/* ══ ONECAST, intro section ═══════════════════════════════════════════
   The intro is a real block at the top of the document, not an overlay.
   You scroll through it like any other section; a curved wave at its
   base overlaps the wiki below. Once you're fully past it, intro.js
   removes it and corrects the scroll position so the page doesn't jump, from then on, scrolling up lands you at the top of the wiki.

   Namespaced under #intro throughout. Delete the CSS and JS and the
   site works exactly as before.                                       */

#intro{
  position:relative;
  height:100svh;min-height:520px;
  display:grid;place-items:center;
  overflow:hidden;
  margin-bottom:-72px;              /* the wave overlaps the content below */
  background:
    radial-gradient(1100px 700px at 50% 116%, color-mix(in srgb,var(--accent) 34%,transparent), transparent 64%),
    linear-gradient(180deg,#0d2338 0%,#11324c 55%,#16456a 100%);
}

/* The topbar stays out of the way until you've scrolled into the wiki */
.topbar{transition:opacity .5s ease,transform .5s ease}
.intro-active .topbar{opacity:0;pointer-events:none;transform:translateY(-8px)}

/* ── Ambient water ──────────────────────────────────────────────────── */
#intro .water{position:absolute;inset:0;pointer-events:none;opacity:.62}
#intro .water span{
  position:absolute;left:-25%;width:150%;height:2px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 65%,transparent),transparent);
  filter:blur(1px);opacity:0;
  animation:i-drift var(--dur,9s) linear var(--del,0s) infinite;
}
@keyframes i-drift{
  0%{opacity:0;transform:translateX(-14%) scaleX(.7)}
  18%{opacity:.7}82%{opacity:.7}
  100%{opacity:0;transform:translateX(14%) scaleX(1.25)}
}
#intro .bubbles{position:absolute;inset:0;pointer-events:none}
#intro .bubbles i{
  position:absolute;bottom:-40px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  animation:i-rise var(--dur,11s) linear var(--del,0s) infinite;
}
@keyframes i-rise{
  0%{transform:translateY(0);opacity:0}
  8%{opacity:.75}
  50%{transform:translateY(-52vh) translateX(var(--sway,14px))}
  92%{opacity:.5}
  100%{transform:translateY(-108vh);opacity:0}
}

/* ── Centre stack, drifts and fades as you scroll through ──────────── */
#intro .stage{
  position:relative;z-index:3;text-align:center;padding:28px;max-width:760px;
  will-change:transform,opacity;
}

#intro .mark{
  width:min(440px,72vw);height:auto;margin:0 auto 22px;
  /* opacity stays 1 on purpose. The entry keyframe starts at 0 and uses
     'both', so it still fades in, but if animations are switched off
     (reduced motion, or iOS Low Power Mode) the logo is simply visible
     rather than stuck invisible at opacity 0. */
  opacity:1;
  animation:i-logo-in .8s cubic-bezier(.34,1.56,.64,1) both,
            i-bob 4.2s ease-in-out 1s infinite;
}
#intro .mark img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.55))}
@keyframes i-logo-in{from{opacity:0;transform:translateY(22px) scale(.94)}to{opacity:1;transform:none}}

#intro .mark .ring{
  fill:none;stroke:color-mix(in srgb,var(--accent) 35%,transparent);stroke-width:1.5;
  transform-origin:center;animation:i-spin 14s linear infinite;
}
#intro .mark .hook{
  fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:120;stroke-dashoffset:120;
  animation:i-draw 1s cubic-bezier(.65,0,.35,1) .1s forwards;
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--accent) 70%,transparent));
}
@keyframes i-draw{to{stroke-dashoffset:0}}
@keyframes i-bob{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}
@keyframes i-spin{to{transform:rotate(360deg)}}

#intro h1{
  font-family:var(--display,ui-monospace,monospace);
  font-size:clamp(2.6rem,10vw,5.4rem);line-height:1;margin:0 0 14px;
  letter-spacing:.04em;color:#fff;display:flex;justify-content:center;flex-wrap:wrap;
}
#intro h1 span{
  display:inline-block;opacity:0;transform:translateY(26px) rotate(-6deg);
  animation:i-letter .62s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay:calc(.24s + var(--i) * .035s);
  text-shadow:0 0 34px color-mix(in srgb,var(--accent) 45%,transparent);
}
@keyframes i-letter{to{opacity:1;transform:translateY(0) rotate(0)}}

#intro .tag{
  color:#c2d8ea;font-size:clamp(.92rem,2.4vw,1.08rem);margin:0 auto;max-width:44ch;
  opacity:0;animation:i-fade .6s ease .72s forwards;
}
#intro .rule{
  width:0;height:1px;margin:24px auto 0;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:i-rule .8s cubic-bezier(.4,0,.2,1) .82s forwards;
}
@keyframes i-rule{to{width:min(320px,72vw)}}

#intro .load{margin:30px auto 0;width:min(320px,72vw);opacity:0;animation:i-fade .5s ease .2s forwards}
#intro .track{height:3px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden}
#intro .fill{
  height:100%;width:0;border-radius:3px;background:var(--accent);
  box-shadow:0 0 16px var(--accent);transition:width .28s cubic-bezier(.4,0,.2,1);
}
#intro .load p{
  margin:11px 0 0;font:600 10px/1 var(--mono,monospace);letter-spacing:.2em;
  text-transform:uppercase;color:#93b0c9;display:flex;justify-content:space-between;
}
#intro .pct{color:var(--accent)}

/* ── The wave. this is what overlaps the wiki below ────────────────── */
#intro .wave{
  position:absolute;left:0;right:0;bottom:-1px;z-index:4;
  width:100%;height:150px;pointer-events:none;
  opacity:0;transform:translateY(20px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1);
}
#intro.ready .wave{opacity:1;transform:none}
#intro .wave svg{display:block;width:100%;height:100%}
#intro .wave .w-back {fill:var(--bg);opacity:.4}
#intro .wave .w-mid  {fill:var(--bg);opacity:.72}
#intro .wave .w-front{fill:var(--bg)}
#intro .wave .w-line{
  fill:none;stroke:color-mix(in srgb,var(--accent) 45%,transparent);stroke-width:1.5;
}

/* ── Scroll cue, sitting just above the wave ────────────────────────── */
#intro .cue{
  position:absolute;left:50%;bottom:118px;transform:translateX(-50%);
  z-index:5;display:flex;flex-direction:column;align-items:center;gap:11px;
  background:none;border:none;cursor:pointer;padding:10px 18px;
  opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s;
}
#intro.ready .cue{opacity:1;visibility:visible}
#intro .cue-text{
  font:600 10px var(--mono,monospace);letter-spacing:.24em;text-transform:uppercase;
  color:#b3c9dd;transition:color .2s;
}
#intro .cue:hover .cue-text{color:var(--accent)}
#intro .mouse{width:23px;height:36px;border:1.5px solid #6d8ba7;border-radius:12px;position:relative;transition:border-color .2s}
#intro .cue:hover .mouse{border-color:var(--accent)}
#intro .mouse:after{
  content:"";position:absolute;left:50%;top:7px;width:3px;height:6px;border-radius:2px;
  background:var(--accent);transform:translateX(-50%);
  animation:i-wheel 1.9s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes i-wheel{0%{opacity:0;transform:translate(-50%,0)}25%{opacity:1}70%{opacity:0;transform:translate(-50%,13px)}100%{opacity:0}}

#intro .skip-intro{
  position:absolute;top:22px;right:24px;z-index:6;
  background:none;border:1px solid rgba(255,255,255,.24);color:#b3c9dd;
  border-radius:99px;padding:7px 16px;cursor:pointer;
  font:600 10px var(--mono,monospace);letter-spacing:.18em;text-transform:uppercase;
  opacity:0;animation:i-fade .5s ease 1.1s forwards;transition:border-color .2s,color .2s;
}
#intro .skip-intro:hover{border-color:var(--accent);color:var(--accent)}
@keyframes i-fade{to{opacity:1}}

/* The wiki's first rows clear the overlapping wave */
.intro-present .shell{padding-top:58px}

@media (max-width:620px){
  #intro{margin-bottom:-48px}
  #intro .wave{height:100px}
  #intro .cue{bottom:84px}
  #intro .skip-intro{top:16px;right:16px}
  .intro-present .shell{padding-top:40px}
}

@media (prefers-reduced-motion:reduce){
  #intro .water,#intro .bubbles{display:none}
  #intro *{animation:none!important}
  #intro .mark,#intro .mark img,#intro h1 span,#intro .tag,#intro .load,
  #intro .skip-intro{opacity:1!important;transform:none}
  #intro .rule{width:min(320px,72vw)}
    #intro .cue,#intro .wave{opacity:1;visibility:visible;transform:none}
  .intro-active .topbar{opacity:1;transform:none;pointer-events:auto}
}