/* components.css — nav, footer (shared, identical markup on every page) */

/* === Navigation (fixed top) — SPEC §3.1 ============================== */
.nav {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  z-index: 50;
}

/* Nav scales with the viewport like the rest of the design (1rem = 100vw/1440,
   base.css). Logo AND pill are both in rem, so they stay matched to each other
   and proportional to the page at every width. A fixed-px nav rendered tiny
   beside the rem-scaled content on >1440 screens ("bar siêu nhỏ"); an earlier
   pass that pinned only the pill to px (while the logo stayed a fixed 57px img)
   instead left the two mismatched. Both-rem fixes both. Design (1440) spec
   unchanged: logo 60/19 + 57², pill 62/26, height 39, font 12, gap 48. Mobile
   (≤768px) keeps its own overrides below. */
.nav-logo {
  position: absolute;
  left: 60rem;
  top: 19rem;
  display: block;
  line-height: 0;
}
.nav-logo img { width: 57rem; height: 57rem; border-radius: 50%; } /* rem overrides the 57px HTML attr so the logo scales with the viewport */

.nav-pill {
  position: absolute;
  right: 62rem;
  top: 26rem;
  height: 39rem;
  background: var(--nav-pill);
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 48rem;
  padding: 0 28rem;
  font-size: 12rem;
  color: #c9c9c9;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-pill a { color: inherit; }
/* current page — main.js adds .is-current to the a[data-page] that matches body[data-page] */
.nav-pill a.is-current { color: #fff; font-weight: 700; }

.nav-lang { display: flex; align-items: center; gap: 10rem; }
.nav-lang b { color: #fff; font-weight: 700; font-style: normal; }
.nav-lang a { color: #9a9a9a; }

/* === Footer (identical on every page) — SPEC §3.2 ===================== */
.site-footer {
  position: relative;
  background: var(--black);
  color: var(--white);
  padding-top: 36rem;
  padding-bottom: 56rem; /* ref: ~57px black below logotype (footer ~810 tall) */
}

.footer-content { padding-left: var(--mx); padding-right: var(--mx); }

.footer-cta {
  font-size: 40rem;
  line-height: 1.15;
  font-weight: 700;
  text-transform: uppercase;
}
/* === Gradient-word (fluid color field) — SPEC §3.3, ported from demo/gradient-word.html === */
.gw {
  position: relative;
  display: inline-block;
  font-family: var(--font-hand);
  font-weight: 700;
  /* inherits text-transform from context so case matches surrounding heading */
}
.gw > span { background-clip: text; -webkit-background-clip: text; color: transparent; }
/* Crop fix. The WT HandWriting script glyphs overrun the default background-clip
   paint box (the font content-area) on every side — tall flourishes sheared off
   the top, the trailing "S" curl clipped on the right. Fix without disturbing
   layout by separating sizing from painting:
     • .sizer — the only in-flow child (visibility:hidden). It sets .gw's
       inline-block box to the glyph's true advance width, so the space to the
       next word is exactly the font's own word-space (no negative margins, so
       nothing eats the gap — that was the "TWISTS HAPPEN" run-together bug).
     • l0–l3 — absolutely-positioned painters. inset pushes each layer's border
       box out past the ink; equal padding (border-box) pulls the text content
       back to the glyph position, so the paint area grows while the letters stay
       put. Since they're absolute, none of this touches the sentence's layout.
   em-based → scales with font-size. */
.gw .sizer { visibility: hidden; }
.gw .l0, .gw .l1, .gw .l2, .gw .l3 {
  position: absolute;
  inset: -0.30em -0.22em -0.16em;
  padding: 0.30em 0.22em 0.16em;
}
.gw .l0 { background-image: linear-gradient(115deg, #5fd4ee 0%, #45c092 38%, #3aa8e0 68%, #2f7fc8 100%); }
/* will-change here (QA pass-2 audit): unlike most of this file's transitions, these
   3 layers per gw instance animate continuously (infinite alternate) for as long as
   the page is open, so — unlike a stray blanket will-change on rarely-animating
   elements — this is exactly the "actually animating" case the hint is for. Reset to
   auto under reduced-motion below, since the animation stops there too. */
.gw .l1, .gw .l2, .gw .l3 { will-change: background-position; }
.gw .l1 {
  background-image:
    radial-gradient(50% 62% at 24% 32%, #f06020 0 42%, #f0a040 56%, rgba(240,160,64,0) 74%),
    radial-gradient(46% 56% at 82% 74%, #f0a040 0 38%, #f07030 52%, rgba(240,112,48,0) 72%);
  background-size: 200% 200%, 220% 220%;
  animation: gw-drift-1 1.7s ease-in-out infinite alternate;
}
.gw .l2 {
  background-image:
    radial-gradient(52% 64% at 70% 22%, #35b380 0 40%, #50c8a0 54%, rgba(80,200,160,0) 72%),
    radial-gradient(44% 58% at 18% 82%, #2fa8a0 0 36%, rgba(47,168,160,0) 68%);
  background-size: 210% 210%, 240% 240%;
  animation: gw-drift-2 2.6s ease-in-out infinite alternate;
}
.gw .l3 {
  background-image:
    radial-gradient(30% 74% at 46% 60%, #ff8a9a 0 32%, rgba(255,138,154,0) 62%),
    radial-gradient(24% 68% at 60% 30%, #f2d030 0 28%, rgba(242,208,48,0) 58%);
  background-size: 260% 260%, 280% 280%;
  animation: gw-drift-3 3.3s ease-in-out infinite alternate;
}
@keyframes gw-drift-1 { 0%{background-position:12% 8%,86% 92%} 33%{background-position:55% 42%,40% 60%} 66%{background-position:28% 78%,70% 24%} 100%{background-position:80% 96%,12% 6%} }
@keyframes gw-drift-2 { 0%{background-position:88% 10%,8% 90%} 40%{background-position:34% 48%,64% 40%} 75%{background-position:66% 86%,30% 12%} 100%{background-position:10% 94%,88% 8%} }
@keyframes gw-drift-3 { 0%{background-position:50% 0%,50% 100%} 30%{background-position:20% 55%,78% 45%} 60%{background-position:72% 88%,26% 18%} 100%{background-position:42% 12%,58% 82%} }
@media (prefers-reduced-motion: reduce) { .gw .l1, .gw .l2, .gw .l3 { animation: none; will-change: auto; } }

.footer-info {
  margin-top: 19rem; /* was 24rem — the bigger 23rem body text (see font-size below)
    shifted the ink-to-ink gap from cta ~5rem too wide vs ref; trimmed to re-match
    (QA pass 2 top-to-top rhythm check). */
  display: flex;
  flex-direction: column;
  gap: 6rem; /* was 8rem — same rhythm re-check, line1→line2 ink gap ~2rem too wide */
  max-width: 900rem;
  font-size: 23rem; /* measured: ref/Homepage1.png line-2 ink bbox = 780rem wide vs the
    previous 17rem's live render at 577rem — 17 * (780/577) ≈ 23. SPEC §2.3's "~17px" was
    a pre-render estimate; QA pass 2 corrected it against the actual ref pixels. */
  color: #c9c9c9;
}
.footer-info a { font-weight: 700; color: var(--white); }
/* Footer contact hover — SPEC §3.2 Home G5: hover phone/email → warm gradient tone.
   Ideal upgrade (deferred): live animated gradient-clip matching .gw's fluid color
   field; simple accepted version below is a solid-color transition to the same
   warm accent used by the gradient-word's orange blob layer (l1: #f07030). */
.footer-info a, .footer-link { transition: color .3s ease; }
.footer-info a:hover, .footer-link:hover { color: #f07030; }

/* === Button pill — SPEC §3.4 =========================================
   Instances: "See all" (Selected Twists), "Start the twist" (Services /
   About), reused as-is. Size is content + padding driven (no fixed
   width/height) so it fits labels of any length. Measured from
   ref/Homepage1.png "See all ↗": bbox 144×42, outline reads as a thin
   black 1px stroke (anti-aliasing made a raw pixel-sample come back
   ~#808080, but that's the expected look of a 1px stroke at this
   resolution, not an intentional gray — kept solid black per SPEC). */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 8rem;
  height: 30rem;             /* fixed pill height (border-box) */
  padding: 0 20rem;          /* 20rem (≈20px @1440) each end; no vertical pad — height drives it */
  line-height: 1.2; /* default 'normal' measured ~1.47 on this font, rendering
    the pill visibly taller/narrower than ref's 144×42 "See all" bbox */
  border: 1px solid var(--black);  /* crisp CSS pill outline — redraws Rectangle 1919 cleanly at any width */
  border-radius: 999px;
  background: transparent;
  font-size: 17rem;
  color: var(--black);
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}
.btn-pill:hover, .btn-pill:focus-visible {
  background-color: var(--black);
  color: var(--white);
}
/* "Start the twist" trailing arrow — raster asset (arrow_start_the_twist.png)
   replacing the ↗ glyph on the two Start-the-twist CTAs (Home .svc-cta /
   About .hb-cta). "See all" keeps its glyph. The PNG is black line-art, so on
   hover (pill flips to black bg) it must invert to stay visible. */
.btn-pill-arrow {
  flex: 0 0 auto;
  width: 8rem;   /* solid-ink PNG reads heavier than a glyph; 8rem matches the dainty ref arrow */
  height: 8rem;
  object-fit: contain;
}
.btn-pill:hover .btn-pill-arrow,
.btn-pill:focus-visible .btn-pill-arrow { filter: invert(1); }

.footer-social {
  margin-top: 408rem; /* was 413rem — QA pass 2 rhythm re-check (top-to-top vs ref) trimmed ~5rem */
  display: flex;
  gap: 99rem; /* tuned so the 4-item row spans ≈561rem like ref (see footer-info's
    font-size comment); re-verify with QA pass-2's pixel scan if copy ever changes */
  font-size: 16rem; /* measured: ref social-row ink bbox = 562rem wide vs the previous
    12rem's live render at 415rem — 12 * (562/415) ≈ 16.25, rounded to a clean 16; the
    residual reach to ≈561 total width is tuned via gap above, not font-size. */
  color: var(--white);
}

.footer-logotype {
  display: block;
  width: 1280rem; /* native SVG size (viewBox 1280×158) — QA pass 2 correction: the
    previous 100% (full-bleed edge-to-edge) rendered the wordmark ~12.5% too wide and
    touching the viewport edges. ref/Homepage1.png's own ink bbox measures exactly
    1280×157 (native 1:1 scale, centered — inset ~69/91rem each side, the small
    asymmetry being ordinary glyph side-bearing, not a true off-center margin), NOT
    full-width. SPEC §3.2's "full-width, chạm 2 mép" text was wrong vs the ref pixels
    (same "trust the fresh measurement over the pre-asset prose" pattern as elsewhere
    in this codebase — see qa-notes.md). */
  height: auto;
  margin: 22rem auto 0; /* was 26rem — QA pass 2 rhythm re-check trimmed ~4rem; auto sides center it */
}

/* === Statement pin section (shared) — SPEC §4.2 / §5.2 Phase A ========
   Reused as-is: Home #statement now, About #process (phase A) later. */
.stmt {
  height: 100vh;
  background: #000;
  color: #fff;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.stmt-title {
  font-size: 60rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  transform-origin: center top;
  will-change: transform;
}

.stmt-intro {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* explicit width (not max-width): with left:50%, an auto/max-width box's
     shrink-to-fit sizing is capped at (container width − left offset) = 50%
     of the container, wrapping the longest line a second time. A fixed
     width sidesteps that shrink-to-fit calc entirely. */
  /* feedback: bump intro > 32 (design was 28). Widen the fixed box so the 4
     hard-wrapped lines still fit one-per-line at the larger size. min(…,90vw)
     caps it below viewport width in the narrow 769–900px band (where base.css's
     100vw/900 rem rule would otherwise blow 1220rem past the viewport); at the
     default ≥1440 widths this always resolves to 1220rem. */
  width: min(1220rem, 90vw);
  font-size: 36rem;
  line-height: 44rem;
  color: #fff;
  text-align: center;
  opacity: 0;
  will-change: opacity;
}

/* === Scroll-top button (shared, both pages) — SPEC §3.4 / §6.11 =======
   Ref (Homepage1.png bottom-right): visible from load (not scroll-gated). */
.scroll-top {
  position: fixed;
  right: 24rem;
  bottom: 67rem; /* lands ~y715 in an 810 viewport */
  width: 40rem;
  height: 52rem; /* mouse.png is 94×121 → keep aspect at 40 wide (40×121/94 ≈ 51.5) */
  border: 0;              /* the mouse graphic supplies its own outline + arrow */
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40; /* below .nav's 50 */
}
/* the mouse/scroll-cue graphic (mouse.png) — replaces the CSS pill + ↑ glyph */
.scroll-top img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ======================================================================
   MOBILE (≤768px) — shared nav / statement / footer / scroll-top.
   Phase-2 first-pass responsive. Desktop (>768px) is entirely unaffected.
   ====================================================================== */
@media (max-width: 768px) {
  /* Content side-margin: 60rem desktop → 24rem (~23px @390). Declared here
     (not base.css) so it wins over base.css's main :root{--mx:60rem}. */
  :root { --mx: 24rem; }

  /* --- Nav: compact the fixed pill so logo + links fit one row with no
     overlap/overflow. The three disabled placeholder links (WORKS/NEWS/
     CONTACT — href="#" aria-disabled) are hidden on mobile: with the logo
     present there isn't room for all five, and hiding dead links is the
     cleanest compaction. Leaves logo + ABOUT + EN|VN. --- */
  .nav-logo { left: var(--mx); top: 14rem; }
  .nav-logo img { width: 42px; height: 42px; } /* HTML attr is 57px; shrink on mobile */
  .nav-pill {
    right: var(--mx);
    top: 15rem;
    height: 34rem;
    gap: 16rem;      /* was 48rem */
    padding: 0 16rem; /* was 0 28rem */
    font-size: 13rem;
  }
  .nav-pill > a[aria-disabled="true"] { display: none; } /* WORKS/NEWS/CONTACT — not the VN inside .nav-lang */
  .nav-lang { gap: 7rem; }

  /* --- Statement (Home #statement; About #process handled in about.css):
     drop the 100vh pinned centering, let title wrap + intro flow readably.
     JS takes the static branch (no ScrollTrigger pin) at ≤768. --- */
  .stmt {
    height: auto;
    min-height: 62vh;
    padding: 72rem var(--mx);
    flex-direction: column;
    justify-content: center;
    gap: 22rem;
  }
  .stmt-title {
    font-size: 40rem;
    line-height: 1.12;
    white-space: normal;            /* was nowrap — allow wrapping */
    transform: none !important;     /* defeat any JS shrink transform on mobile */
  }
  .stmt-intro {
    position: static;               /* was absolute/centered */
    width: auto;
    max-width: 100%;
    transform: none;
    opacity: 1 !important;          /* shown statically (no scroll fade) */
    margin: 0;
    font-size: 18rem;
    line-height: 1.45;
  }

  /* --- Footer: stack, kill the desktop 408rem spacer that pushed the social
     row down, scale the wordmark to fit (was fixed 1280rem → overflow). --- */
  .site-footer { padding-top: 48rem; padding-bottom: 40rem; }
  .footer-cta { font-size: 40rem; }
  .footer-info { margin-top: 16rem; font-size: 18rem; gap: 8rem; }
  .footer-social {
    margin-top: 44rem;   /* was 408rem */
    gap: 22rem 26rem;    /* was 99rem */
    font-size: 16rem;
    flex-wrap: wrap;
  }
  .footer-logotype {
    width: 100%;         /* was 1280rem (overflowed the viewport) */
    margin-top: 40rem;
  }

  /* --- Scroll-top: keep reachable in the corner, a touch smaller. --- */
  .scroll-top { right: var(--mx); bottom: 24rem; width: 38rem; height: 50rem; }
}