/* Home page artistry (own file so it never collides with site.css edits). Everything here is progressive enhancement:
   without JavaScript the page shows its complete, static end state. */

/* ---------- First-visit intro: the logo draws itself, then a curtain lifts. Only when html.intro-on is set by the inline head script
   (home page, once per session, never for reduced motion). CSS-only failsafe: after 4.5 s it can never stay on screen. ---------- */
.intro{display:none}
html.intro-on{overflow:hidden;animation:intro-unlock .01s 4.5s forwards}
html.intro-on .intro{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:var(--surface);
  animation:intro-curtain .6s cubic-bezier(.65,0,.35,1) 1.5s forwards,intro-failsafe .01s 4.5s forwards}
html.intro-skip .intro{display:none}
.intro svg{width:min(34vw,9rem);height:auto;overflow:visible;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--deco) 45%,transparent))}
.intro .i-link{fill:none;stroke:var(--deco);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:i-draw .7s .15s cubic-bezier(.65,0,.35,1) forwards}
.intro circle{transform-box:fill-box;transform-origin:center;scale:0}
.intro .i-hub{fill:var(--deco);animation:i-pop .5s .55s var(--spring) forwards}
.intro .i-node{fill:var(--surface);stroke:var(--ink);stroke-width:2.4;animation:i-pop .45s .75s var(--spring) forwards}
@keyframes i-draw{to{stroke-dashoffset:0}}
@keyframes i-pop{to{scale:1}}
@keyframes intro-curtain{to{clip-path:inset(0 0 100% 0)}}
@keyframes intro-failsafe{to{visibility:hidden}}
@keyframes intro-unlock{to{overflow:auto}}

/* ---------- Hero audience switcher (reserves its line so picking one never shifts the layout) ---------- */
.hero-aud{justify-content:flex-start;gap:.75rem;max-width:none;margin:2rem 0 0}
.aud-line{min-height:6.5rem;margin:1.25rem 0 0!important;max-width:36rem;font:500 1rem/1.65 var(--f-ui);color:var(--ink)}
.aud-line a{display:block;margin-top:.7rem;font-weight:700}
.hero .actions{margin-top:1.75rem}
.hero .cta-note{margin-top:1.1rem}

/* ---------- Scroll-fill statement: words fill in as you scroll through it ---------- */
.statement{padding-block:clamp(4rem,12vw,9rem)}
.statement-text{max-width:24ch;margin:0 auto;padding-inline:var(--gutter);text-align:center;font:700 clamp(2rem,1rem + 4.8vw,4.4rem)/1.1 var(--f-h1);letter-spacing:-.01em;color:var(--ink)}
/* Unlit words stay at full AA contrast (muted ink); lit words turn orange, so the statement visibly "fills" without ever being hard to read. */
.sf{transition:color .35s}
html.js .sf:not(.lit){color:var(--muted)}
html.js .sf.lit{color:var(--orange)}
html.js .sf.cur{color:var(--ink)}

/* ---------- Network snap: scattered nodes converge into the logo as you scroll (pinned stage) ---------- */
.snap-story:not(.live){padding-block:clamp(3rem,8vw,5rem)}
.snap-story.live{height:240vh}
@media (max-width:48em){.snap-story.live{height:190vh}}
.snap-stage{display:grid;justify-items:center;align-content:center;gap:1.5rem;padding:2rem var(--gutter)}
.snap-story.live .snap-stage{position:sticky;top:0;height:100svh;padding-top:5.5rem}
.snap-svg{width:min(100%,46rem);height:auto;overflow:visible}
.snap-links path{stroke:var(--deco);stroke-width:5;stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--deco) 55%,transparent))}
.snap-nodes circle{fill:var(--muted);opacity:.75}
.snap-nodes circle:nth-child(-n+3){opacity:1}
.snap-nodes circle:nth-child(n+4){opacity:0}
.snap-story.live .snap-nodes circle:nth-child(n+4){opacity:.75}
.snap-cap{display:grid;max-width:34rem;margin:0;text-align:center;font:700 clamp(1.2rem,.9rem + 1.4vw,2rem)/1.2 var(--f-h2)}
.snap-cap span{grid-area:1/1;transition:opacity .45s,translate .45s}
.snap-cap .cap-a{color:var(--muted);opacity:0}
.snap-story.live .snap-cap .cap-a{opacity:1}
.snap-cap .cap-b{color:var(--ink)}

/* ---------- Service paths: 3D flip cards ---------- */
.flip-card{position:relative;perspective:1400px}
.flip-inner{display:grid;height:100%;transform-style:preserve-3d;transition:transform .85s var(--spring)}
.flip-front,.flip-back{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--surface);box-shadow:var(--raise)}
.flip-back{transform:rotateY(180deg);visibility:hidden}
html.js .flip-back{visibility:visible}
.flip-card.flipped .flip-inner{transform:rotateY(180deg)}
.flip-front.tilting{transform:none!important}
.flip-back.tilting{transform:rotateY(180deg)!important}
.flip-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:auto!important;padding-top:.5rem}
.flip-row .more{margin-top:0;padding-top:0}
.flip-btn{position:relative;z-index:3;min-height:2.4rem;padding:.3rem 1rem;border:0;border-radius:99px;background:var(--surface);box-shadow:var(--raise);color:var(--ink);font:500 .85rem var(--f-ui);cursor:pointer}
.flip-btn:hover{box-shadow:var(--press)}
.flip-tldr{color:var(--ink)!important;font-size:1.05rem;line-height:1.55}
.flip-back .btn{position:relative;z-index:3}
@media (prefers-reduced-motion:reduce){.flip-inner{transition:none}}

/* ---------- Spotlight rim: a light ring that traces each card's border where the pointer is (the soft fill glow already exists) ---------- */
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(14rem circle at var(--mx,50%) var(--my,50%),var(--deco),transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.card:hover::after{opacity:1}