/* Mind Analytics Hub mockup v3: one-screen "cinema" hero shared by the app pages.
   Heading, write-up, then a full-height stage that plays the page's sections as chapters. */

.app-hero.stacked.one{padding:108px var(--gut) 56px;text-align:left}
.app-hero.stacked.one .intro-col{min-height:0;max-width:none;margin:0;align-items:flex-start;padding:0 clamp(.5rem,1.2vw,1.4rem)}
.app-hero.stacked.one .h1{font-size:clamp(1.35rem,2.2vw,2.05rem);margin-top:0;white-space:nowrap}
.app-hero.stacked.one .lead{margin:.9rem 0 0;max-width:none;width:100%;font-size:clamp(1rem,1.25vw,1.18rem);line-height:1.65}
/* typed write-up: a hidden full copy reserves the space so nothing below jumps */
.lead.tw{position:relative;opacity:1;transform:none}
.lead.tw .ghost{visibility:hidden}
.lead.tw .typed{position:absolute;inset:0}
.lead.tw .caret{display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.16em;background:var(--app);box-shadow:0 0 8px var(--app);animation:caret 1s steps(1) infinite}
.lead.tw.done .caret{animation:caret 1s steps(1) 3 forwards;opacity:0;transition:opacity .4s 3s}
/* the animation takes whatever height the heading and write-up leave */
@media (min-width:901px){
  .app-hero.stacked.one{display:flex;flex-direction:column;align-items:stretch;gap:0;height:100vh;min-height:720px;padding-bottom:28px}
  .app-hero.stacked.one .stage.big.cinema{flex:1 1 auto;height:auto;min-height:480px;max-height:none;margin-top:1.9rem}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mock{display:none}

.stage.big.cinema{transform:none;opacity:1;height:calc(100vh - 290px);min-height:540px;max-height:940px;margin-top:2rem;animation:stageIn 1.5s cubic-bezier(.2,.7,.2,1) .35s both}
@keyframes stageIn{from{opacity:0;transform:perspective(1800px) rotateX(16deg) scale(.9) translateY(50px)}}
.cinema .chrome{gap:8px}
.cinema .chrome .ttl{margin-left:12px;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--text-muted)}
.cinema .chrome .ttl b{color:var(--text-dim);font-weight:400}
.cinema .chrome .live{margin-left:auto;display:flex;align-items:center;gap:.45rem;font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--app)}
.cinema .chrome .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--app);box-shadow:0 0 8px var(--app);animation:pulse 2s infinite}
.cinema .chrome .key{margin-left:14px;display:flex;align-items:center;gap:.5rem;height:28px;padding:0 .9rem;border-radius:8px;background:var(--app);color:#05080F;font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;box-shadow:0 0 22px color-mix(in srgb,var(--app) 45%,transparent);transition:transform .3s,box-shadow .3s}
.cinema .chrome .key:hover{transform:translateY(-1px);box-shadow:0 0 34px color-mix(in srgb,var(--app) 70%,transparent)}
.cinema .chrome .key svg{width:12px;height:12px;position:static}
.stage .cinema-svg-static,.cinema .btn svg,.cinema a svg{position:static}
.cinema .btn svg{width:14px;height:14px}

/* chapters */
.chaps{position:absolute;top:44px;bottom:54px;left:0;right:0}
.chap{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(22px) scale(.985);filter:blur(6px);transition:opacity .6s,transform .8s cubic-bezier(.2,.7,.2,1),filter .6s,visibility 0s .8s}
.chap.on{opacity:1;visibility:visible;transform:none;filter:none;transition:opacity .8s .2s,transform 1s .2s cubic-bezier(.2,.7,.2,1),filter .8s .2s,visibility 0s}
.tabs{position:absolute;left:0;right:0;bottom:0;height:54px;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(var(--n,4),1fr);background:rgba(5,8,15,.55);z-index:3}
.tab{all:unset;cursor:pointer;position:relative;display:flex;align-items:center;gap:.8rem;padding:0 22px;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);transition:color .3s;white-space:nowrap;overflow:hidden}
.tab + .tab{border-left:1px solid var(--border)}
.tab b{font-weight:400;color:color-mix(in srgb,var(--app) 60%,transparent)}
.tab:hover,.tab.on{color:var(--text)}
.tab.on b{color:var(--app)}
.tab::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:var(--p,0%);background:linear-gradient(90deg,color-mix(in srgb,var(--app) 40%,transparent),var(--app));box-shadow:0 0 10px var(--app)}
.tab:focus-visible{outline:1px solid var(--app);outline-offset:-4px}
.hold{position:absolute;right:16px;bottom:64px;z-index:4;font-family:var(--mono);font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);opacity:0;transition:opacity .3s}
.cinema.paused .hold{opacity:1}
.drawonce{stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400)}
.chap.on .drawonce{animation:draw var(--dur,3s) cubic-bezier(.4,.1,.2,1) var(--delay,0s) forwards}
@keyframes inUp{to{opacity:1;transform:none}}

/* layout helpers shared by chapters */
.cinema .chaps svg{position:static;inset:auto}
.split{position:absolute;inset:0;display:grid;gap:clamp(1.4rem,3vw,3.2rem);align-items:center;padding:clamp(1.4rem,2.6vw,2.8rem) clamp(1.6rem,3vw,3.2rem)}
.split.l{grid-template-columns:minmax(280px,31%) 1fr}
.split.r{grid-template-columns:1fr minmax(280px,33%)}
.card{border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.018);position:relative;overflow:hidden}
.lbl{font-family:var(--mono);font-weight:400;font-size:.5rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted)}
.inUp{opacity:0;transform:translateY(12px)}
.chap.on .inUp{animation:inUp .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}

/* captions: each chapter carries its section's write-up */
.cap{display:flex;flex-direction:column;gap:.85rem}
.cap .k{font-family:var(--mono);font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--app);display:flex;align-items:center;gap:.7rem}
.cap .k::before{content:"";width:22px;height:1px;background:var(--app);box-shadow:0 0 8px var(--app)}
.cap h3{font-size:clamp(1.4rem,2.3vw,2.25rem);font-weight:300;line-height:1.18;letter-spacing:.01em}
.cap h3 em{font-style:normal;font-weight:600;background:linear-gradient(135deg,color-mix(in srgb,var(--app) 55%,white),var(--app));-webkit-background-clip:text;background-clip:text;color:transparent}
.cap p{font-size:clamp(.84rem,1.02vw,.98rem);line-height:1.7;color:var(--text-dim);max-width:46ch}
.cap .acts{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.4rem}
.cap > *{opacity:0;transform:translateY(14px)}
.chap.on .cap > *{animation:inUp .8s cubic-bezier(.2,.7,.2,1) forwards}
.chap.on .cap > :nth-child(1){animation-delay:.35s}
.chap.on .cap > :nth-child(2){animation-delay:.5s}
.chap.on .cap > :nth-child(3){animation-delay:.75s}
.chap.on .cap > :nth-child(4){animation-delay:1.05s}
.chap.on .cap > :nth-child(5){animation-delay:1.3s}
.cap.center{align-items:center;text-align:center}
.cap.center p{max-width:60ch}
.cap.center .k::after{content:"";width:22px;height:1px;background:var(--app);box-shadow:0 0 8px var(--app)}

@media (max-width:1100px){.app-hero.stacked.one .h1{white-space:normal}}
@media (max-width:900px){
  .stage.big.cinema{height:auto;min-height:0;max-height:none}
  .chaps{position:relative;top:auto;bottom:auto;margin-top:44px;margin-bottom:54px}
  .chap{position:relative;inset:auto;display:none}
  .chap.on{display:block}
  .split{position:relative;inset:auto}
  .split.l,.split.r{grid-template-columns:1fr}
  .tab{padding:0 10px;font-size:.5rem}.tab span{display:none}
  .cinema .chrome .ttl,.cinema .chrome .live{display:none}.cinema .chrome .key{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){.stage.big.cinema{animation:none}.cap > *{opacity:1;transform:none}}