/* Aquamarine Baits · holding page "The Drop"
   Palette read off their live stylesheet. Display type derived from the wordmark.
   No rules, no pills, no bordered boxes, nothing decorative drawn in code:
   every bit of depth on this page comes out of the scene. */

@font-face{font-family:AMD;src:url(fonts/Orbitron-Medium.ttf) format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:AMD;src:url(fonts/Orbitron-SemiBold.ttf) format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:AMT;src:url(fonts/Archivo_Expanded-Light.ttf) format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:AMT;src:url(fonts/Archivo_Expanded-Regular.ttf) format('truetype');font-weight:400;font-display:swap}

:root{ --cy:#3CC1F0; --room:#01060A; --paper:#E8F3F6; --mute:#7F9AA6; --mast:78px }
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--room);-webkit-text-size-adjust:100%}
body{background:var(--room);color:var(--paper);font-family:AMT,system-ui,sans-serif;
     font-weight:300;letter-spacing:.012em;overflow-x:hidden}
a{color:inherit}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:99;background:var(--cy);color:#04222E;padding:10px 16px;font-weight:600}

/* The wordmark opens the page at full size with its strapline readable, then hands
   over to the wordmark alone as a standing mark. Shrinking the baked in strapline
   to corner size turns it to mush, so it is dropped rather than made illegible. */
.filters{position:absolute;width:0;height:0;overflow:hidden}
.mast{position:fixed;inset:0;z-index:14;pointer-events:none}
.topfade{position:absolute;left:0;right:0;top:0;height:140px;opacity:0;
         transition:opacity .5s ease;
         background:linear-gradient(180deg,rgba(1,6,10,.86),rgba(1,6,10,0))}
.walk-moved .topfade{opacity:1}
.lockup{position:absolute;left:50%;top:29%;width:min(52vw,648px);height:auto;display:block;
        transform:translate(-50%,-50%);will-change:opacity,transform,filter;
        filter:url(#ripple);
        /* it opens over the bright underside of the surface, so it carries its own shade */
        filter:drop-shadow(0 1px 2px rgba(1,6,10,.95)) drop-shadow(0 3px 14px rgba(1,6,10,.85))
               drop-shadow(0 0 40px rgba(1,6,10,.70))}
.mark{position:absolute;left:6vw;top:30px;width:238px;height:auto;display:block;opacity:0;
      will-change:opacity,transform;
      filter:drop-shadow(0 1px 3px rgba(1,6,10,.95)) drop-shadow(0 2px 16px rgba(1,6,10,.8))}

/* ── the pinned stage ── */
.walk{position:relative;height:720vh}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--room)}
.walk-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;
             opacity:0;transition:opacity .7s ease}
.walk.ready .walk-canvas{opacity:1}

/* scrims sit under the copy, never over the subject */
.vig{position:absolute;inset:0;pointer-events:none;
     background:
       linear-gradient(100deg,rgba(1,6,10,.88) 0%,rgba(1,6,10,.62) 18%,rgba(1,6,10,.16) 36%,transparent 52%),
       linear-gradient(0deg,rgba(1,6,10,.88) 0%,rgba(1,6,10,.34) 26%,transparent 48%),
       radial-gradient(136% 104% at 50% 46%,transparent 50%,rgba(1,6,10,.66) 100%)}
.panelwash{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s ease;
     background:linear-gradient(260deg,rgba(1,6,10,.92) 0%,rgba(1,6,10,.60) 20%,transparent 44%)}
.walk.arrived .panelwash{opacity:1}

/* ── copy beats ── */
.beats{position:absolute;inset:0;z-index:5;pointer-events:none}
.beat{position:absolute;left:6vw;right:6vw;bottom:15vh;opacity:0;max-width:30ch;
      transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.beat.on{opacity:1;transform:none}
/* the step number anchors the title: without it they float in a busy frame */
.beat-n{display:block;font-family:AMD,sans-serif;font-style:normal;font-weight:600;
        font-size:11px;letter-spacing:.42em;color:var(--cy);margin-bottom:16px;
        text-shadow:0 1px 10px rgba(1,6,10,.95)}
.beat b{display:block;font-family:AMD,sans-serif;font-weight:600;letter-spacing:.055em;
        text-transform:uppercase;font-size:clamp(24px,3.7vw,50px);line-height:1.06;color:#fff;
        text-shadow:0 1px 3px rgba(1,6,10,.98),0 2px 22px rgba(1,6,10,.98),
                    0 5px 64px rgba(1,6,10,.95),0 0 110px rgba(1,6,10,.8)}
.beat i{display:block;margin-top:18px;font-style:normal;font-size:clamp(13px,1.2vw,16px);
        line-height:1.78;color:#D6E6EC;max-width:37ch;
        text-shadow:0 1px 3px rgba(1,6,10,.98),0 2px 22px rgba(1,6,10,.95)}
/* the body copy types itself in once its title has arrived */
.beat i span{opacity:0;transition:opacity 60ms linear}
.beat.on i span{opacity:1;transition-delay:calc(var(--i) * 15ms)}
@media (prefers-reduced-motion:reduce){
  .beat i span{opacity:1;transition:none}
  .beat.on i span{transition-delay:0s}
}

/* ── the capture: a baseline, a cursor and the type ── */
.panel{position:absolute;right:6vw;bottom:14vh;width:min(38vw,430px);z-index:6;
       opacity:0;pointer-events:none;transition:opacity .55s ease}
.walk.arrived .panel{opacity:1;pointer-events:auto}
.panel-k{font-family:AMD,sans-serif;font-weight:600;font-size:clamp(19px,1.9vw,26px);
         letter-spacing:.20em;text-transform:uppercase;color:var(--cy);line-height:1;
         text-shadow:0 1px 3px rgba(1,6,10,.95),0 0 26px rgba(60,193,240,.30),
                     0 2px 30px rgba(1,6,10,.9)}
.panel-h{font-family:AMD,sans-serif;font-weight:500;letter-spacing:.045em;text-transform:uppercase;
         font-size:clamp(17px,1.8vw,23px);line-height:1.25;margin-top:16px;color:#fff}
.panel-p{margin-top:13px;font-size:13.5px;line-height:1.72;color:#BBD3DC}
.panel-row{display:flex;align-items:flex-end;gap:14px;margin-top:26px;
           border-bottom:1px solid rgba(232,243,246,.40);padding-bottom:9px}
.panel-row input{flex:1;background:none;border:0;outline:0;color:#fff;font-family:AMT,sans-serif;
                 font-weight:300;font-size:16px;letter-spacing:.02em;padding:4px 0}
.panel-row input::placeholder{color:rgba(232,243,246,.38)}
.panel-row input:focus{caret-color:var(--cy)}
.panel-row button{background:none;border:0;cursor:pointer;white-space:nowrap;padding:4px 0;
                  font-family:AMD,sans-serif;font-weight:600;font-size:12px;letter-spacing:.17em;
                  text-transform:uppercase;color:var(--cy)}
.panel-s{margin-top:13px;font-size:11.5px;line-height:1.65;color:rgba(232,243,246,.52)}

/* ── scroll affordances ── */
/* the prompt: the word, and a drop that falls away from it, which is the page's
   own idea rather than a borrowed chevron */
.cue{position:absolute;bottom:30px;left:0;right:0;z-index:8;display:flex;
     flex-direction:column;align-items:center;gap:13px;
     transition:opacity .6s ease}
.cue-w{font-family:AMD,sans-serif;font-size:9.5px;letter-spacing:.46em;text-transform:uppercase;
       color:rgba(232,243,246,.78);text-shadow:0 1px 10px rgba(1,6,10,.95);font-size:10px;
       animation:cuePulse 3.2s ease-in-out infinite}
.cue-t{position:relative;display:block;width:4px;height:36px}
.cue-t i{position:absolute;left:0;top:0;width:4px;height:4px;border-radius:50%;
         background:var(--cy);box-shadow:0 0 8px rgba(60,193,240,.85);
         animation:cueFall 2.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes cuePulse{0%,100%{opacity:.52}50%{opacity:1}}
@keyframes cueFall{
  0%   {transform:translateY(0);    opacity:0}
  18%  {opacity:1}
  72%  {opacity:1}
  100% {transform:translateY(31px); opacity:0}}
.walk.cued .cue{opacity:0}
@media (prefers-reduced-motion:reduce){
  .cue-w,.cue-t i{animation:none}
  .cue-t i{opacity:.9;transform:translateY(14px)}
}
.prog{position:fixed;left:0;right:0;bottom:0;height:2px;z-index:15;background:rgba(60,193,240,.14)}
.prog i{display:block;height:100%;width:0;background:var(--cy)}

/* ── the close ── */
.end{position:relative;z-index:2;background:var(--room);padding:13vh 6vw 10vh}
.endgrid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.35fr 1fr;gap:7vw}
.lede{font-size:clamp(15px,1.5vw,19.5px);line-height:1.78;color:#C3D7DE;max-width:52ch}
.ways p{display:flex;flex-direction:column;gap:5px;margin-bottom:26px;font-size:14px;color:#C3D7DE}
.ways span{font-family:AMD,sans-serif;font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--mute)}
.ways a{color:var(--cy);text-decoration:none}

/* ── static tier: no WebGL, reduced motion, or print ── */
.walk.static{height:auto}
.walk.static .stage{position:relative;height:auto;min-height:62svh}
.walk.static .walk-canvas,.walk.static .cue,.walk.static .prog{display:none}
.walk.static .beats{position:relative;inset:auto;padding:calc(var(--mast) + 5vh) 6vw 0}
.walk.static .beat{position:relative;left:auto;right:auto;bottom:auto;opacity:1;transform:none;
                   margin-bottom:30px;max-width:46ch}
.walk.static .panel{position:relative;right:auto;bottom:auto;width:auto;max-width:430px;
                    margin:10px 6vw 40px;opacity:1;pointer-events:auto}
.walk.static .vig,.walk.static .panelwash{display:none}

@media (max-width:820px){
  :root{--mast:62px}
  .vig{background:
    linear-gradient(180deg,rgba(1,6,10,.94) 0%,rgba(1,6,10,.78) 22%,rgba(1,6,10,.30) 42%,transparent 58%),
    linear-gradient(0deg,rgba(1,6,10,.90) 0%,rgba(1,6,10,.32) 22%,transparent 42%)}
  .panelwash{background:linear-gradient(0deg,rgba(1,6,10,.95) 0%,rgba(1,6,10,.80) 30%,transparent 58%)}
  .lockup{width:min(82vw,430px);top:31%}
  .mark{width:176px;left:6vw;top:19px}
  .topfade{height:104px}
  .walk{height:640vh}
  .beat{bottom:auto;top:calc(var(--mast) + 4vh);max-width:none}
  .beat i{max-width:30ch}
  .panel{right:6vw;left:6vw;width:auto;bottom:9vh}
  .panel-row input{font-size:16px}       /* 16px or iOS zooms on focus */
  .endgrid{grid-template-columns:1fr;gap:38px}
}
@media (prefers-reduced-motion:reduce){ .cue span{animation:none} }