/* 04-hero.css — The opening screen and its stained-glass window. */

/* ---------- hero ---------- */
.hero{
  background:var(--ink);color:var(--paper);position:relative;overflow:hidden;
  min-height:calc(100svh - 92px);display:flex;align-items:center;
}
.hero-glow{
  position:absolute;width:70vw;height:70vw;max-width:820px;max-height:820px;
  border-radius:50%;filter:blur(90px);opacity:.30;pointer-events:none;
  background:radial-gradient(circle,var(--accent),transparent 68%);
  left:var(--gx,60%);top:var(--gy,20%);transform:translate(-50%,-50%);
  transition:background .9s ease;
}
.motes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mote{
  position:absolute;border-radius:50%;background:var(--accent);opacity:.0;
  animation:rise linear infinite;
}
@keyframes rise{
  0%{opacity:0;transform:translateY(0) scale(.6)}
  12%{opacity:.5}
  88%{opacity:.35}
  100%{opacity:0;transform:translateY(-92vh) scale(1.15)}
}
.hero-in{
  position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;
  padding:72px 24px 88px;width:100%;
  display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;
}
.hero .eyebrow{opacity:.85;color:var(--accent)}
.now{
  display:flex;align-items:flex-start;gap:9px;margin:0 0 18px;max-width:46ch;
  font-size:13.5px;letter-spacing:.04em;opacity:.8;
}
.now .dot-live{margin-top:8px}
.now b{font-weight:500}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--verdant);box-shadow:0 0 0 0 rgba(31,107,69,.7);animation:live 2.4s ease-out infinite}
@keyframes live{to{box-shadow:0 0 0 11px rgba(31,107,69,0)}}
.hero h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.6rem,5.6vw,4.5rem);line-height:1.03;
  margin:14px 0 22px;letter-spacing:-.015em;
}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.5em) rotate(2deg);
  animation:word .85s cubic-bezier(.22,1,.36,1) forwards}
@keyframes word{to{opacity:1;transform:none}}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p.lede{font-size:19px;line-height:1.62;max-width:44ch;opacity:.86;margin:0 0 32px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px}
.btn{
  display:inline-flex;align-items:center;gap:9px;border-radius:999px;
  padding:14px 26px;font-size:15px;font-weight:600;letter-spacing:.01em;
  text-decoration:none;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .16s,background .18s,color .18s,border-color .18s;
}
.btn:active{transform:translateY(1px)}
.btn-solid{background:var(--accent);color:var(--ink)}
.btn-solid::before{
  content:"";position:absolute;inset:0;z-index:-1;background:#fff;opacity:0;transition:opacity .2s;
}
.btn-solid:hover::before{opacity:.22}
.btn-ghost{border:1.5px solid rgba(238,241,231,.42);color:var(--paper)}
.btn-ghost:hover{border-color:var(--paper);background:rgba(238,241,231,.08)}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:26px;margin-top:38px;
  padding-top:26px;border-top:1px solid rgba(238,241,231,.18);
  font-size:14px;opacity:.72;
}
.scroll-cue{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.5;
}
.scroll-cue i{display:block;width:1px;height:38px;background:linear-gradient(var(--paper),transparent);
  animation:drip 2.2s ease-in-out infinite}
@keyframes drip{0%,100%{transform:scaleY(.35);opacity:.3}50%{transform:scaleY(1);opacity:.9}}

/* ---------- stained glass window ---------- */
.window{width:100%;max-width:430px;margin:0 auto;display:block;overflow:visible}
.pane-group{cursor:pointer}
.pane-group .lift{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.pane-group:hover .lift,.pane-group:focus-visible .lift{transform:translateY(-9px)}
.arch-frame{fill:none;stroke:var(--ink-2);stroke-width:7}
.win-label{
  font-family:var(--body);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;fill:var(--paper);opacity:.55;
  transition:opacity .3s;
}
.pane-group:hover .win-label,.pane-group:focus-visible .win-label{opacity:1}
.liquid{transform-origin:center bottom;animation:pour 1.3s cubic-bezier(.4,0,.2,1) both}
@keyframes pour{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.wave{animation:wave 7s linear infinite}
@keyframes wave{to{transform:translateX(-160px)}}
.shine{opacity:.0;animation:shine 6s ease-in-out infinite}
@keyframes shine{0%,72%,100%{opacity:0}82%{opacity:.5}}