/* ═══ SECTION 1 — HERO (centred, typewriter headline over an animated stage) ═══
   Everything is scoped to .section1 so the generic names (.dot, .row, .ring …)
   can't reach the other sections on the page. */
.section1.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;
  display:grid;grid-template-rows:1fr auto;
  padding:calc(var(--nav-h) + clamp(30px,6vh,70px)) var(--gut) 0;
  text-align:center;--angle:36.5deg}
@keyframes fade{to{opacity:1}}
@keyframes rise{to{transform:translateY(0)}}

/* ── stage: everything behind the type ── */
.section1 .stage{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* vertical rules */
.section1 .rules{position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(245,244,239,.042) 0 1px, transparent 1px clamp(90px,9vw,140px))}

/* soft diagonal bands — broad, low contrast, barely there */
.section1 .bars{position:absolute;inset:-45%;
  background:repeating-linear-gradient(var(--angle),
    rgba(245,244,239,.000) 0px,
    rgba(245,244,239,.013) 14px,
    rgba(245,244,239,.013) 26px,
    rgba(245,244,239,.000) 40px);
  animation:drift 34s linear infinite}
@keyframes drift{to{transform:translate(32px,43px)}}

/* ghost wordmark, cropped hard at both edges */
.section1 .ghost{position:absolute;left:50%;top:53%;translate:-50% -50%;
  font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:900;
  font-size:min(26vw,360px);line-height:.8;letter-spacing:-.045em;white-space:nowrap;
  color:#F5F4EF;opacity:.075;user-select:none;
  animation:float 30s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(-18px,-12px)}}

/* the burst — rays pulse in a wave travelling around the circle */
.section1 .burst{position:absolute;left:50%;top:47%;width:min(58vw,720px);aspect-ratio:1;
  translate:-50% -50%;opacity:.85}
.section1 .ray{position:absolute;left:50%;bottom:50%;width:1.7px;
  height:calc(50% - var(--inner));
  background:var(--cut);transform-origin:bottom center;
  transform:rotate(var(--a)) scaleY(var(--base));
  animation:wave var(--dur) ease-in-out var(--delay) infinite}
@keyframes wave{
  0%,100%{transform:rotate(var(--a)) scaleY(calc(var(--base) * .74))}
  50%    {transform:rotate(var(--a)) scaleY(calc(var(--base) * 1.18))}
}

/* counter-rotating dashed rings */
.section1 .ring{position:absolute;left:50%;top:47%;width:min(30vw,380px);aspect-ratio:1;
  translate:-50% -50%;opacity:.8;animation:spinback 80s linear infinite}
.section1 .ring circle{fill:none;stroke:rgba(245,244,239,.3);stroke-width:1;stroke-dasharray:3 15}
@keyframes spinback{to{transform:rotate(-360deg)}}

/* the solid dot, breathing */
.section1 .hero-dot{position:absolute;left:50%;top:47%;width:clamp(44px,4.6vw,76px);aspect-ratio:1;
  translate:-50% -50%;border-radius:50%;background:var(--cut);
  animation:breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.1);opacity:1}}

/* three cut lines sweeping across, staggered */
.section1 .sweeps{position:absolute;inset:-30%}
.section1 .sweeps i{position:absolute;left:-30%;right:-30%;height:2px;background:var(--cut);
  rotate:var(--angle);opacity:0}
.section1 .sweeps i:nth-child(1){top:26%;animation:sweep 10s cubic-bezier(.65,0,.35,1) 1s infinite}
.section1 .sweeps i:nth-child(2){top:52%;height:1px;animation:sweep 10s cubic-bezier(.65,0,.35,1) 4.4s infinite}
.section1 .sweeps i:nth-child(3){top:76%;height:1px;animation:sweep 10s cubic-bezier(.65,0,.35,1) 7.8s infinite}
@keyframes sweep{
  0%{transform:translateX(-120%);opacity:0}
  10%{opacity:.8}
  42%{opacity:.8}
  68%{transform:translateX(120%);opacity:0}
  100%{transform:translateX(120%);opacity:0}
}

/* vignette so the centre type always has something to sit on */
.section1 .stage::after{content:"";position:absolute;inset:0;
  background:radial-gradient(56% 46% at 50% 47%,rgba(10,10,10,.70) 0%,rgba(10,10,10,.34) 58%,transparent 100%)}

/* ── copy ── */
.section1 .hero-main{position:relative;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;min-height:0}
.section1 .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.2em;
  font-weight:600;color:var(--dim);margin-bottom:clamp(20px,3.4vh,38px);
  opacity:0;animation:fade .8s ease .5s forwards}
.section1 .eyebrow::before{content:"";width:7px;height:7px;background:var(--cut);flex-shrink:0}

.section1 h1{font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:900;
  font-size:clamp(2.6rem,9.2vw,9.4rem);line-height:.87;letter-spacing:-.035em;
  max-width:16ch}
/* typewriter rows — a hidden sizer holds the space so nothing jumps */
.section1 h1 .row{display:block;position:relative}
.section1 h1 .sizer{visibility:hidden;display:block}
.section1 h1 .type{position:absolute;left:50%;top:0;translate:-50% 0;white-space:pre;display:block}
.section1 h1 .type::after{content:"";display:inline-block;width:.07em;height:.78em;
  background:var(--cut);margin-left:.06em;vertical-align:-.06em;opacity:0}
.section1 h1 .row.typing .type::after{opacity:1;animation:caret .85s steps(1) infinite}
.section1 h1 .row.done .type::after{opacity:0}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
.section1 h1 .dot-c{color:var(--cut)}

.section1 .sub{margin:clamp(22px,3.6vh,38px) auto 0;max-width:52ch;
  font-size:clamp(.94rem,1.12vw,1.12rem);line-height:1.6;color:var(--muted);
  opacity:0;animation:fade .85s ease .68s forwards}
.section1 .actions{margin-top:clamp(24px,3.6vh,38px);display:flex;flex-wrap:wrap;gap:11px;
  justify-content:center;opacity:0;animation:fade .85s ease .82s forwards}

.section1 .hero-foot{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:clamp(14px,2.2vh,20px) 0;border-top:1px solid var(--border);
  opacity:0;animation:fade .85s ease 1s forwards}
.section1 .scroll-hint{display:flex;align-items:center;gap:11px;font-size:10.5px;letter-spacing:.2em;color:var(--dim)}
.section1 .scroll-hint .tick{width:1px;height:22px;background:var(--border);position:relative;overflow:hidden}
.section1 .scroll-hint .tick::after{content:"";position:absolute;left:0;right:0;top:-100%;height:100%;
  background:var(--cut);animation:tickrun 2.2s ease-in-out 1.8s infinite}
@keyframes tickrun{0%{top:-100%}55%{top:100%}100%{top:100%}}
.section1 .hero-foot .meta{font-size:10.5px;letter-spacing:.18em;color:var(--dim)}
@media(max-width:640px){.section1 .hero-foot .meta{display:none}}

@media(max-width:700px){
  .section1 .burst{width:92vw}
  .section1 .ring{width:52vw}
  .section1 .ghost{font-size:44vw}
}

@media(prefers-reduced-motion:reduce){
  .section1 h1 .type::after{display:none}
  .section1 .eyebrow,.section1 .sub,.section1 .actions,.section1 .hero-foot{opacity:1}
  .section1 .sweeps{display:none}
  .section1 .burst .ray{animation:none!important;transform:rotate(var(--a)) scaleY(var(--base))}
  .section1 .bars,.section1 .ghost,.section1 .ring,.section1 .hero-dot{animation:none!important}
}