/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body {
  background: #171717;
  color: #fff;
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  overflow: hidden; /* single viewport — no scroll */
}
img, video { display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; -webkit-tap-highlight-color: transparent; }
a { text-decoration: none; color: inherit; }

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --bg:           #171717;
  --bg-card:      #1e1e1e;
  --bg-btn:       #464646;
  --bg-btn-light: #f1f1f4;
  --accent:       #e40202;
  --text:         #ffffff;
  --text-dark:    #141414;
  --text-muted:   rgba(255,255,255,0.5);

  --font-sans:    'DM Sans', sans-serif;
  --font-script:  'Carattere', cursive;
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;

  --cols:    12;
  --col-gap: clamp(8px, 1.2vw, 18px);
  --page-x:  clamp(28px, 3.8vw, 68px);
  --page-y:  clamp(16px, 2.8vh, 48px);

  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   LOADER
   ============================================================ */
#loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--bg);
  transition: opacity 0.65s ease;
}
#loader.fade-out {
  opacity: 0;
  pointer-events: none;
}
.loader-number {
  position: absolute;
  bottom: clamp(20px, 3vh, 40px);
  left: clamp(28px, 3.8vw, 68px);
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  color: var(--text);
  line-height: 1;
  letter-spacing: -0.04em;
  user-select: none;
}
.loader-bar-track {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,0.07);
}
.loader-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.35s ease;
}

/* ============================================================
   BACKGROUND CANVAS — fixed, full viewport, never resized
   ============================================================ */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* ============================================================
   STAGE
   ============================================================ */
#stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}

/* ============================================================
   12-COL GRID
   ============================================================ */
.layout-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: var(--col-gap);
  row-gap: clamp(8px, 1.4vh, 20px);
  padding: var(--page-y) var(--page-x);
  height: 100%;
  align-items: start;
}

.grid-area-profile  { grid-column: 1 / 5;  grid-row: 1; display: flex; flex-direction: column; gap: clamp(8px, 1.6vh, 22px); }
.grid-area-services { grid-column: 5 / 13; grid-row: 1; display: flex; align-items: center; }
.grid-area-hero     { grid-column: 1 / 13; grid-row: 2; align-self: end; padding-bottom: clamp(4px, 0.8vh, 12px); }
.grid-area-coming   {
  /* position: fixed takes it completely out of grid flow —
     typewriter textContent changes cannot trigger any layout reflow */
  position: fixed;
  bottom: clamp(6px, 1vh, 16px);
  right:  clamp(28px, 3.8vw, 68px);
  z-index: 10;
  text-align: right;
}

/* ============================================================
   PROFILE CARD
   ============================================================ */
.profile-card {
  display: flex;
  align-items: stretch;  /* meta column stretches to avatar height */
  gap: clamp(10px, 1.6vw, 24px);
}

.avatar-wrap {
  flex-shrink: 0;
  width:  clamp(72px, 8vw, 130px);
  height: clamp(72px, 8vw, 130px);
  border-radius: 50%;
  overflow: hidden;
  background: #e9e9e9;
}
.avatar { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.profile-meta {
  display: flex;
  flex-direction: column;
  gap: clamp(1px, 0.2vh, 4px);   /* tight: name ↔ badge */
  padding: 2px 0;
}
/* Social icons anchor to the bottom of the meta column */
.profile-meta .social-icons {
  margin-top: auto;
}
.profile-name {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(0.9rem, 1.5vw, 1.45rem);
  line-height: 1.05;
  white-space: nowrap;
}
.experience-badge {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(0.9rem, 1.5vw, 1.45rem);
  line-height: 1.05;
}

/* ── Social icons ─────────────────────────────────────────── */
.social-icons {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.9vw, 14px);
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width:  clamp(16px, 1.4vw, 22px);
  height: clamp(16px, 1.4vw, 22px);
  flex-shrink: 0;
  transition: transform 0.35s var(--ease-back), opacity 0.3s var(--ease-expo);
  opacity: 0.55;
}
.social-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
}
.social-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  color: inherit; /* sparkle inherits opacity from parent */
}

.social-icon:hover  { opacity: 1; transform: translateY(-4px) scale(1.18); }
.social-icon:active { transform: scale(0.92); }
.social-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ── Profile bottom: buttons + tools locked to toolbox width ── */
/* fit-content on the wrapper means the toolbox (no % width) sets
   the reference width; buttons (width:100%) fill that same size. */
.profile-bottom {
  display: flex;
  flex-direction: column;
  width: fit-content;
  gap: clamp(8px, 1.6vh, 22px);
}

/* ── CTA Buttons — fluid pill pair ──────────────────────── */
.cta-group { display: flex; width: 100%; }

.btn-pill-group {
  display: flex;
  align-items: center;
  width: 100%;
}

.btn-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 0.5vw, 9px);
  height: clamp(36px, 3.2vh, 47px);
  border-radius: 100px;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(0.78rem, 1vw, 1rem);
  letter-spacing: 0.006em;
  white-space: nowrap;
  overflow: hidden;
  outline: none;
  border: none;
  cursor: pointer;
  min-width: max-content;
  /* flex-grow is animated by GSAP — see initPillButtons */
}
.btn-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Contact Me — expanded (3 parts) by default */
.btn-pill--contact {
  background: var(--bg-btn-light);
  color: var(--text-dark);
  flex: 3 1 0;
  padding: 0 clamp(12px, 1.2vw, 18px);
}
/* Resume — contracted (1 part) by default */
.btn-pill--resume {
  background: #707070;
  color: #ffffff;
  flex: 1 1 0;
  padding: 0 clamp(12px, 1.2vw, 18px);
}

.btn-pill-arrow {
  font-size: 0.88em;
  flex-shrink: 0;
}

/* ── Tools Bar ───────────────────────────────────────────── */
.tools-bar {
  display: flex;
  align-items: center;
  gap: clamp(5px, 0.7vw, 12px);
  background: rgba(70,70,70,0.84);
  padding: clamp(6px, 0.7vh, 10px) clamp(10px, 1.2vw, 18px);
  border-radius: 20px;
  box-shadow: inset 0 0 5px rgba(255,255,255,0.22);
  width: fit-content;
}

/* Dark rounded box per tool — matches Figma */
.tool-wrap {
  width:  clamp(24px, 2.2vw, 32px);
  height: clamp(24px, 2.2vw, 32px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3c3c3c;
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: transform 0.32s var(--ease-back), border-color 0.32s ease, box-shadow 0.32s ease;
}
.tool-wrap:hover {
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-5px) scale(1.14);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}

/* Tool icons */
.tool-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: grayscale(1) brightness(1.5) opacity(0.65);
  transition: filter 0.32s var(--ease-expo);
}
/* SVG spark icon (Claude / Contra) — inherits color */
.tool-icon--svg {
  width: 55%;
  height: 55%;
  color: rgba(255,255,255,0.65);
  filter: none;
  transition: color 0.32s var(--ease-expo);
}
/* Padded icons (Figma, Blender, Claude) — scaled down inside box */
.tool-icon--padded {
  width: 70%;
  height: 70%;
}
.tool-wrap:hover .tool-icon     { filter: none; }
.tool-wrap:hover .tool-icon--svg { color: #fff; }

/* ============================================================
   SERVICE CARDS
   ============================================================ */
#services {
  display: flex;
  gap: var(--col-gap);
  width: 100%;
  align-items: stretch;
}

.service-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(7px, 0.9vh, 12px);
  padding: clamp(9px, 1.1vw, 15px);
  background: var(--bg-card);
  border-radius: clamp(9px, 1.1vw, 15px);
  box-shadow: inset 0 0 4.6px rgba(255,255,255,0.15), 0 0 0 rgba(0,0,0,0);
  cursor: pointer;
  outline: none;
  will-change: transform;
  transition: transform 0.5s var(--ease-expo), box-shadow 0.5s var(--ease-expo);
}
.service-card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: inset 0 0 4.6px rgba(255,255,255,0.28), 0 28px 56px rgba(0,0,0,0.55);
}
.service-card:active { transform: translateY(-3px) scale(1.008); transition-duration: 0.12s; }
.service-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.card-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(0.78rem, 1.05vw, 1rem);
  line-height: 1.1;
  color: var(--text);
  letter-spacing: -0.05em;
  white-space: nowrap;
}
.card-title-script { font-family: var(--font-script); font-style: italic; font-weight: var(--fw-regular); }
.card-arrow {
  width:  clamp(14px, 1.4vw, 20px);
  height: clamp(14px, 1.4vw, 20px);
  flex-shrink: 0;
  opacity: 0.7;
  transition: transform 0.4s var(--ease-expo), opacity 0.3s var(--ease-expo);
}
.service-card:hover .card-arrow { transform: translate(3px, -3px) scale(1.1); opacity: 1; }

/* 1:1 thumbnail — full-width matching Figma */
.card-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: clamp(8px, 1vw, 16px);
  overflow: hidden;
  background: #000;
  position: relative;
  flex-shrink: 0;
}
.card-video {
  position: absolute;
  top: 15%;
  left: 15%;
  width: 70%;
  height: 70%;
  object-fit: cover;
  border-radius: clamp(4px, 0.6vw, 8px);
  /* Crush near-blacks to pure black */
  filter: brightness(0.85) contrast(1.2);
  /* Inset shadow blends edges into the black card bg */
  box-shadow: inset 0 0 18px 6px #000;
  transition: transform 0.7s var(--ease-expo), filter 0.5s ease;
}
.service-card:hover .card-video {
  filter: brightness(0.9) contrast(1.15);
}
.service-card:hover .card-video { transform: scale(1.05); }

/* card-btn can be <button> or <a> */
.card-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  padding: clamp(6px, 0.8vh, 10px) clamp(10px, 1.2vw, 16px);
  background: var(--bg-btn);
  border-radius: clamp(12px, 1.4vw, 20px);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(0.68rem, 0.9vw, 0.9rem);
  letter-spacing: -0.04em;
  box-shadow: inset 0 0 5px rgba(255,255,255,0.1);
  outline: none;
  flex-shrink: 0;
  transition: background 0.3s var(--ease-expo), transform 0.35s var(--ease-expo), box-shadow 0.35s var(--ease-expo);
}
.card-btn:hover  { background: #5a5a5a; transform: translateY(-2px); box-shadow: inset 0 0 5px rgba(255,255,255,0.18), 0 8px 20px rgba(0,0,0,0.35); }
.card-btn:active { background: #3a3a3a; transform: scale(0.97); transition-duration: 0.08s; }
.card-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card-btn span { transition: transform 0.35s var(--ease-expo); }
.card-btn:hover span { transform: translateX(4px); }

/* ============================================================
   HERO TEXT — no overflow clip, text can breathe
   ============================================================ */
#hero-text {
  line-height: 0.87;
  letter-spacing: -0.048em;
  /* NO overflow:hidden — text must not clip */
  padding-bottom: 0;
}
.hero-line {
  display: block;
  /* NO overflow:hidden */
}
.hero-accent {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: var(--fw-regular);
  color: var(--accent);
  font-size: clamp(3rem, 9.6vw, 10.2rem);
  display: inline-block;
  vertical-align: bottom;
}
.hero-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(2.7rem, 9.0vw, 9.6rem);
  color: var(--text);
  display: inline-block;
  vertical-align: bottom;
}

/* ============================================================
   COMING SOON
   ============================================================ */
#coming-soon {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(0.58rem, 0.95vw, 0.92rem);
  color: var(--text);
  white-space: nowrap;
  line-height: 1.2;
}
.ellipsis-red { color: var(--accent); }

/* ============================================================
   TABLET  768–1199px
   ============================================================ */
@media (max-width: 1199px) {
  .layout-grid { grid-template-columns: repeat(8, 1fr); }
  .grid-area-profile  { grid-column: 1 / 4; }
  .grid-area-services { grid-column: 4 / 9; }
  .grid-area-hero     { grid-column: 1 / 8; }
  .grid-area-coming   { grid-column: 8 / 9; }
  #services { gap: var(--col-gap); }
  .card-title { font-size: clamp(0.7rem, 1vw, 0.9rem); }
}

/* ============================================================
   MOBILE  max 767px
   ============================================================ */
@media (max-width: 767px) {
  :root { --page-x: 20px; --page-y: 18px; }

  body { overflow-y: auto; }

  #stage { height: auto; min-height: 100dvh; }

  /* Switch to flex-column — hero text naturally anchors to bottom */
  .layout-grid {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    height: auto;
    padding: var(--page-y) var(--page-x) clamp(16px, 3vh, 28px);
    gap: 18px;
  }

  .grid-area-profile  { order: 1; flex-shrink: 0; }
  .grid-area-services { order: 2; flex-shrink: 0; padding-left: 0; }
  /* Grows to push hero text down to the bottom of the viewport */
  .grid-area-hero     { order: 3; flex: 1 0 auto; align-self: stretch; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 4px; }
  .grid-area-coming   { order: 4; flex-shrink: 0; text-align: left; padding-bottom: 0; }

  .profile-card { align-items: center; }

  /* Cards stack vertically on mobile */
  #services {
    flex-direction: column;
    gap: clamp(24px, 4vh, 40px);
    overflow: visible;
  }

  .service-card {
    flex: none;
    width: 100%;
  }

  /* Always honour the 1:1 aspect-ratio — never override it */
  .card-thumb {
    max-height: none;
  }

  /* On mobile the toolbox is too narrow to constrain buttons —
     let the buttons fill full width and the toolbox scroll freely */
  .profile-bottom { width: 100%; }
  .tools-bar { flex-wrap: nowrap; overflow-x: auto; width: fit-content; }
  .tools-bar::-webkit-scrollbar { display: none; }

  /* Force left-align on hero text and all its children */
  #hero-text,
  #hero-text .hero-line { text-align: left; }

  /* Minimum readable sizes on mobile — 22px baseline */
  .profile-name,
  .experience-badge { font-size: 1.375rem; }   /* 22px */
  .card-title        { font-size: 1.25rem; }    /* 20px */
  .btn-pill          { font-size: 1rem; }       /* 16px */
  .card-btn          { font-size: 0.9375rem; }  /* 15px */

  .hero-accent,
  .hero-body { font-size: clamp(2.2rem, 11vw, 3.8rem); }
}

/* ============================================================
   UTILITY
   ============================================================ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }