/* ============================================================
   Kronisys — home page specifics (v4)
   Everything structural lives in css/global.css; this file
   carries the treatments unique to this page: the hero ghost
   word, service glyph tiles + middot runs, the Strata browser
   stage, the story ledger, the tooling type cloud, the CTA glow.
   ============================================================ */

/* hero image — multi-format so whichever export exists shows */
.hero{--hero-img:url("../assets/heroes/hero-home.webp"),url("../assets/heroes/hero-home.jpg"),url("../assets/heroes/hero-home.png")}

/* ===== hero — kinetic editorial: bottom-anchored type, the blue slot
   cycles through what we actually build ===== */
.hero{align-items:flex-end;text-align:left}
.hero .wrap{padding-top:clamp(120px,16vh,180px);padding-bottom:clamp(70px,10vh,120px);width:100%}
.hero-slash{width:clamp(46px,4.8vw,66px);height:auto;display:block;margin-bottom:clamp(20px,3vh,32px);opacity:0;animation:fadeUp .8s var(--ease) .04s forwards}
.hero-slash path{fill:var(--c)}
.hero-slash path:nth-child(2){opacity:.62}
.hero-slash path:nth-child(3){opacity:.3}
.hero h1{font-size:clamp(48px,7.4vw,112px);max-width:none;margin:0;opacity:1;animation:none;line-height:1.04}
.hero h1 .w{display:inline-block;white-space:nowrap}
.hero h1 .bl{color:var(--c)}
.fx-on .ch{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(.3em) scale(.96);animation:chIn .75s var(--ease) forwards;animation-delay:calc(var(--i)*42ms + .14s)}
.hero h1.fx-on .bl{opacity:0;animation:blIn .8s var(--ease) .5s forwards}
@keyframes blIn{from{opacity:0;filter:blur(12px);transform:translateY(.3em) scale(.96)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes chIn{to{opacity:1;filter:blur(0);transform:none}}
.hero::before{transform:translateY(var(--py,0)) scale(1.04)}
/* the beam now lives bottom-left with the text — soften the corner scrim so it shows,
   keep a slim bottom fade for the slab edge */
.hero::after{background:linear-gradient(115deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.1) 38%,rgba(0,0,0,0) 60%),linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 70%,rgba(5,5,7,.6) 100%)}
.hero .sub{max-width:520px;font-size:clamp(14.5px,1.3vw,16.5px);text-shadow:0 1px 16px rgba(0,0,0,.5)}
.hero-acts{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.hero-alt{display:inline-flex;align-items:center;gap:7px;margin-top:clamp(24px,3.4vh,34px);font-size:14px;font-weight:600;letter-spacing:-.2px;color:rgba(255,255,255,.62);transition:color .3s var(--ease);opacity:0;animation:fadeUp .9s var(--ease) .74s forwards}
.hero-alt svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.hero-alt:hover{color:#fff}
.hero-alt:hover svg{transform:translate(2px,-2px)}
/* hollow action button — glass outline, floods Kronisys blue on hover */
.btn-hollow{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(24px,3.4vh,34px);padding:13px 28px;font-size:14px;font-weight:600;letter-spacing:-.2px;color:#fff;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.32);border-radius:12px;position:relative;overflow:hidden;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease);opacity:0;animation:fadeUp .9s var(--ease) .62s forwards}
.btn-hollow::before{content:'';position:absolute;inset:0;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);z-index:0}
.btn-hollow span,.btn-hollow svg{position:relative;z-index:1}
.btn-hollow svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.btn-hollow:hover{border-color:var(--c);box-shadow:0 8px 28px rgba(0,151,237,.3);transform:translateY(-2px)}
.btn-hollow:hover::before{transform:scaleX(1)}
.btn-hollow:hover svg{transform:translateX(3px)}
.btn-hollow:active{transform:scale(.97)}

/* ===== services index — glyph tiles + inline middot runs ===== */
#services .svc-t{display:flex;align-items:center;gap:16px}
#services .svc-glyph{flex:none;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--ltb);border-radius:13px;background:rgba(255,255,255,.55);color:var(--ltt2);transition:border-color .35s var(--ease),color .35s var(--ease),background .35s var(--ease)}
#services .svc-glyph svg{width:22px;height:22px}
#services .idx-row:hover .svc-glyph{border-color:rgba(0,151,237,.5);color:var(--cd);background:#fff}
#services .idx-num,#services .idx-arrow{padding-top:13px}
#services .idx-body{padding-top:10px}
.svc-run{margin-top:14px;font-size:13px;line-height:1.9;letter-spacing:-.05px;color:var(--ltt2)}
.svc-run span:not(:last-child)::after{content:'\00B7';margin:0 .7em;opacity:.45}

/* ===== Strata showcase — three-phase cinematic scrub =====
   The wrapper is 320vh with data-scrub; js writes --sp (0→1).
   Phase 1: monumental title + intro, frame waiting low, tilted, dim.
   Phase 2: title compacts & intro folds away while the frame rises,
            untilts and scales to full — a hand-off.
   Phase 3: three captions swap in sequence beneath the frame. */
.split-hd{font-size:clamp(34px,4.8vw,60px);font-weight:700;letter-spacing:-2px;line-height:1.05;margin-bottom:14px}
/* sticky positioning dies inside overflow:clip — this slab has no bleed to clip */
#strata.slab{overflow:visible}
.strata-pin-wrap{height:320vh}
.strata-pin{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;
  --t1:clamp(0,(var(--sp,0) - .18)*3.4,1);
  --t2:clamp(0,(var(--sp,0) - .3)*3,1)}
.strata-stage{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:clamp(24px,4vh,44px)}
.strata-title{transform:translateY(calc((1 - var(--t1))*13vh)) scale(calc(1.42 - .42*var(--t1)));transform-origin:center top}
.strata-title .kicker{justify-content:center}
.strata-title .kicker::before{display:none}
.strata-intro{font-size:14.5px;line-height:1.7;color:var(--w2);letter-spacing:-.1px;max-width:680px;margin:0 auto;opacity:calc(1 - var(--t1)*1.3);max-height:calc((1 - var(--t1))*140px);overflow:hidden}
#strata .bf-stage{position:relative;perspective:1500px;max-width:820px;width:100%;margin:clamp(16px,2.6vh,28px) auto 0}
#strata .bf-glow{position:absolute;inset:-12% -16%;background:radial-gradient(52% 62% at 50% 42%,rgba(0,151,237,.22),transparent 72%);filter:blur(8px);pointer-events:none;opacity:var(--t2)}
#strata .bf-scrub{transform:perspective(1500px) translateY(calc((1 - var(--t2))*24vh)) rotateX(calc((1 - var(--t2))*24deg)) scale(calc(.6 + .4*var(--t2)));opacity:calc(.12 + .88*var(--t2));transform-origin:center 85%;will-change:transform}
#strata .bframe{display:block;position:relative;opacity:1;transform:none;transition:box-shadow .4s var(--ease)}
#strata .bframe:hover{box-shadow:0 48px 110px rgba(0,0,0,.6),0 0 0 1px rgba(0,151,237,.2),0 0 110px rgba(0,151,237,.18)}
.strata-caps{position:relative;height:56px;width:100%;margin-top:clamp(16px,2.6vh,28px)}
.cap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;font-size:clamp(15px,1.6vw,19px);font-weight:600;letter-spacing:-.3px;color:var(--w)}
.cap.c1{opacity:clamp(0,min((var(--sp,0) - .58)*8,(.76 - var(--sp,0))*8),1)}
.cap.c2{opacity:clamp(0,min((var(--sp,0) - .74)*8,(.9 - var(--sp,0))*8),1)}
.cap.c3{opacity:clamp(0,(var(--sp,0) - .88)*8,1)}
.cap a{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--c);transition:color .25s var(--ease)}
.cap a:hover{color:var(--c2)}
.cap a svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.cap a:hover svg{transform:translateX(2px)}

/* ===== story — vertical ledger with em-dash prefixes ===== */
#story .quote{margin-top:2px}
.story-ledger{list-style:none;margin-top:30px}
.story-ledger li{display:flex;align-items:baseline;border-top:1px solid var(--ltb);padding:14px 0;font-size:14px;line-height:1.55;letter-spacing:-.1px;color:var(--ltt2);transition:color .3s var(--ease)}
.story-ledger li::before{content:'\2014';flex:none;width:22px;color:var(--cd);transition:transform .3s var(--ease)}
.story-ledger li:hover{color:var(--ltt)}
.story-ledger li:hover::before{transform:translateX(3px)}

/* ===== tooling — typographic cloud, no loops ===== */
#stack .kicker{margin-bottom:30px}
.cloud{max-width:1000px;font-size:clamp(17px,2vw,26px);font-weight:600;letter-spacing:-.4px;line-height:1.8;color:var(--w3)}
.cloud span{transition:color .25s var(--ease)}
.cloud span:hover{color:var(--w)}
.cloud span:not(:last-child)::after{content:'\00B7';margin:0 .62em;font-size:.72em;vertical-align:.09em;color:var(--c);opacity:.5}

/* ===== CTA — radial glow behind the heading ===== */
#contact .wrap{position:relative}
#contact::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);width:min(880px,130%);aspect-ratio:1.7;background:radial-gradient(closest-side,rgba(0,151,237,.08),transparent);pointer-events:none}
#contact h2{font-size:clamp(40px,6vw,76px)}

/* ===== responsive ===== */
@media(max-width:768px){
  #services .svc-t{gap:12px}
  #services .svc-glyph{width:38px;height:38px;border-radius:11px}
  #services .svc-glyph svg{width:20px;height:20px}
  #stack .kicker{margin-bottom:22px}
  /* scrub stage collapses to a simple static section */
  #strata .bf-glow{left:0;right:0}
  .strata-pin-wrap{height:auto}
  .strata-pin{position:static;min-height:0;--sp:1;--t1:1;--t2:1}
  .strata-caps{height:auto;display:flex;flex-direction:column;gap:12px}
  .cap{position:static;opacity:1!important}
  .strata-intro{max-height:none;opacity:1}
  .strata-title{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .strata-pin-wrap{height:auto}
  .strata-pin{position:static;min-height:0;--t1:1;--t2:1}
  .strata-caps{height:auto;display:flex;flex-direction:column;gap:12px}
  .cap{position:static;opacity:1!important}
  .strata-intro{max-height:none;opacity:1}
  .strata-title{transform:none}
  .hero h1.fx-on .bl{opacity:1;animation:none}
  .btn-hollow{opacity:1;animation:none}
  .hero-alt{opacity:1;animation:none}
}