/* ============================================================
   Home — Gradient Background + Smart Header (handoff: Concept 9)
   Loaded after /styles.css, scoped to body.home-cine. Self-contained.
   ============================================================ */
.home-cine { --hc-ease: cubic-bezier(.22,1,.36,1); --hc-accent: #6c74c4; }

/* ---------- Gradient canvas baked into the content surface ----------
   #main stays OPAQUE so it covers the dark sticky footer until the final
   scroll, and carries the gradient (base wash + 3 soft blooms + center
   white wash) as a fixed-attachment background, so it reads as a stationary
   canvas while the page scrolls over it. Base styles.css keeps #main's
   rounded bottom corners + z-index that drive the dark footer reveal. */
.home-cine #main {
  background: #eef0f3;
}
:root[data-theme="dark"] .home-cine #main {
  background-color: #0b0b0f;
  background-image:
    radial-gradient(85% 70% at 50% 38%, rgba(12,12,16,.45) 0%, transparent 72%),
    radial-gradient(62vw 62vw at 103% -5%, rgba(120,126,205,.20) 0%, transparent 60%),
    radial-gradient(60vw 60vw at -5% 104%, rgba(150,134,196,.18) 0%, transparent 60%),
    radial-gradient(54vw 54vw at 42% 32%, rgba(118,150,200,.14) 0%, transparent 60%),
    linear-gradient(180deg, #0b0b0f 0%, #0d0d12 60%, #0a0a0e 100%);
}

/* ---------- Smart header ---------- */
.home-cine .nav {
  background: transparent;
  border-bottom: 0; box-shadow: none;
  transition: transform .45s var(--hc-ease), box-shadow .35s ease;
  will-change: transform;
}
/* Frosted white linear gradient on two masked layers, so the frost + gradient fade out at the
   bottom (merging into the page, no gray fringe) without ever fading the nav content.
   ::before = frosted blur + a subtle, mostly-transparent white gradient near the top (always on).
   ::after  = the more-solid white gradient that fades in once you scroll past the hero.
   Pure white (255,255,255) keeps the frost reading white, not gray. */
.home-cine .nav::before,
.home-cine .nav::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}
.home-cine .nav::before {
  z-index: -2;
  background: linear-gradient(180deg, rgba(255,255,255,.50) 0%, rgba(255,255,255,.14) 55%, rgba(255,255,255,0) 100%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.home-cine .nav::after {
  z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.80) 50%, rgba(255,255,255,0) 100%);
  opacity: 0; transition: opacity .4s var(--hc-ease);
}
.home-cine .nav.is-scrolled::after { opacity: 1; }
.home-cine .nav.is-scrolled { box-shadow: 0 1px 0 rgba(43,47,56,.05); }
.home-cine .nav.is-hidden { transform: translateY(-110%); }
:root[data-theme="dark"] .home-cine .nav::before { background: linear-gradient(180deg, rgba(13,13,18,.50) 0%, rgba(13,13,18,.14) 55%, rgba(13,13,18,0) 100%); }
:root[data-theme="dark"] .home-cine .nav::after { background: linear-gradient(180deg, rgba(13,13,18,.95) 0%, rgba(13,13,18,.80) 50%, rgba(13,13,18,0) 100%); }
:root[data-theme="dark"] .home-cine .nav.is-scrolled { box-shadow: 0 1px 0 rgba(255,255,255,.06); }
@media (prefers-reduced-motion: reduce) {
  .home-cine .nav { transition: box-shadow .3s ease; }
  .home-cine .nav::after { transition: none; }
  .home-cine .nav.is-hidden { transform: none; }
}

/* ---------- Content polish (glassy cards on the canvas) ---------- */
.home-cine .hero { position: relative; overflow: clip; min-height: 84vh; display: flex; align-items: center; }
/* De-pilled: Home eyebrows are plain uppercase labels, matching About + case-study pages. */
.home-cine .eyebrow { padding: 0; border: 0; background: none; }
.home-cine .stat__value { background: linear-gradient(120deg, var(--ink) 32%, var(--hc-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-cine .stat__value .unit { -webkit-text-fill-color: var(--hc-accent); color: var(--hc-accent); }
.home-cine .card, .home-cine .work-card { border-radius: 16px; }
.home-cine .work-card {
  background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(43,47,56,.08); box-shadow: 0 12px 34px rgba(60,64,82,.08);
}
:root[data-theme="dark"] .home-cine .work-card { background: rgba(28,28,36,.55); border-color: rgba(255,255,255,.08); }
.home-cine .card--hover:hover, .home-cine .work-card:hover { transform: translateY(-5px); box-shadow: 0 24px 54px rgba(60,64,82,.15); }
.home-cine .metrics-band { background: rgba(255,255,255,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 16px; }
:root[data-theme="dark"] .home-cine .metrics-band { background: rgba(28,28,36,.55); }
.home-cine .btn--accent { background: #3c4a5e; }

/* Home hero headline is a longer identity statement; use the shared --step-4 rung
   (not the short-headline --step-5 display size) rather than a bespoke clamp. */
.home-cine .hero__title { font-size: var(--step-4); line-height: 1.16; max-width: 26ch; }

/* Headline word entrance + magnetic CTA easing */
.home-cine .hero__title .hc-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; }
/* No persistent will-change here: it kept 14 headline-word spans as permanent GPU
   layers after the one-time entrance animation, adding scroll-compositing cost. */
.home-cine .hero__title .hc-w__i { display: inline-block; }
.home-cine .hero__actions .btn { transition: transform .28s var(--hc-ease), background .25s var(--hc-ease), box-shadow .25s var(--hc-ease); }

/* ============================================================
   Case Studies — Flagship section (home). Scoped to .csf.
   Recreated from the "Case Studies Flagship Light" handoff.
   ============================================================ */
.csf { position: relative; }
@keyframes csf-fl1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes csf-fl2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
@keyframes csf-fl3 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes csf-gpulse { 0%,100%{opacity:.4} 50%{opacity:.85} }
@keyframes csf-nodepulse { 0%,100%{box-shadow:0 0 0 0 rgba(129,140,248,0)} 50%{box-shadow:0 0 0 6px rgba(129,140,248,.10)} }
@keyframes csf-flow { to { stroke-dashoffset:-22 } }
.csf [data-flowline] { stroke-dasharray:5 6; animation:csf-flow 1.1s linear infinite; }

/* glass panels float */
.csf-fl1 { animation:csf-fl1 8s ease-in-out infinite; }
.csf-fl2 { animation:csf-fl2 9s ease-in-out infinite; }
.csf-fl3 { animation:csf-fl3 7s ease-in-out infinite; }
.csf-gpulse { animation:csf-gpulse 8s ease-in-out infinite; }
.csf-nodepulse { animation:csf-nodepulse 4s ease-in-out infinite; }

/* capability card hover + cta underline */
.csf-cap { transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .4s ease, box-shadow .4s ease; }
.csf-cap:hover { transform:translateY(-6px); border-color:rgba(99,102,241,.30); box-shadow:0 50px 90px -34px rgba(99,102,241,.5); }
.csf-cap--violet:hover { border-color:rgba(167,139,250,.4); box-shadow:0 50px 90px -34px rgba(167,139,250,.45); }
.csf-cta { --u:#818cf8; background-image:linear-gradient(var(--u),var(--u)); background-repeat:no-repeat; background-position:0 100%; background-size:0% 2px; transition:background-size .45s cubic-bezier(.16,1,.3,1), gap .3s ease; }
.csf-cta:hover { background-size:100% 2px; gap:15px; }
/* reveal the CTA underline when hovering anywhere on the card */
.csf-flag:hover .csf-cta,
.csf-gov:hover .csf-cta,
.csf-cap:hover .csf-cta { background-size:100% 2px; gap:15px; }
.csf-cap .csf-cta { padding-bottom:4px; }
.csf-cap--violet .csf-cta { --u:#a78bfa; }

@media (prefers-reduced-motion: reduce) {
  .csf *, .csf *::before, .csf *::after { animation: none !important; }
}
@media (max-width: 900px) {
  .csf-flag__grid, .csf-gov__grid { grid-template-columns: 1fr !important; gap: 30px !important; }
  .csf-caps { grid-template-columns: 1fr !important; }
  .csf-stage { height: 440px !important; }
  .csf-flag__body, .csf-gov__pad, .csf-gov__tl { padding-left: 26px !important; padding-right: 26px !important; }
  .csf-tl { grid-template-columns: 1fr 1fr !important; gap: 22px 14px !important; }
}
@media (max-width: 560px) {
  .csf-outcomes { grid-template-columns: 1fr 1fr; }
  .csf-stage__hide { display: none !important; }
}

/* Flagship header sits on the page canvas (not a card) — keep it legible in dark mode */
:root[data-theme="dark"] .home-cine .csf__head h2 { color: #f4f4f5; }
:root[data-theme="dark"] .home-cine .csf__head p { color: #a1a1aa; }

/* "What I lead" cards: equal size + aligned descriptions */
.home-cine .grid--3 { grid-auto-rows: 1fr; }
.home-cine .grid--3 .card h3 { line-height: 1.25; min-height: 2.5em; }

/* ---- Mobile: hide the fixed-size flagship mockup (it can't fit small screens) ---- */
@media (max-width: 680px) {
  .csf-stage { display: none !important; }
  .csf-flag__body, .csf-gov__pad { padding: 32px 22px !important; }
}