/* SLICK — views layered over the persistent storm canvas.
   The cover's own styles live in index.html; this file covers the dojo,
   the NDA gate and the materials room. */

:root{
  --ink:#0a0e18;
  --panel:rgba(9,13,22,.72);
  --line:rgba(240,180,78,.32);
  --teal-soft:rgba(63,215,192,.85);
}

/* ---------- view routing ---------- */
.view{display:none;}
.view.is-active{display:flex;}
.view[hidden]{display:none !important;}   /* beats the cover's own .stage{display:flex} */
body.is-inside{overflow:auto;}

/* ---------- the gate button on the cover ---------- */
.enter{
  display:inline-flex;align-items:center;gap:.7em;
  margin:0 auto;
  padding:.72em 1.9em .68em;
  border:1px solid var(--line);
  border-radius:2px;
  background:rgba(9,13,22,.42);
  backdrop-filter:blur(3px);
  color:#f3e6c8;
  font:700 clamp(11px,1.15vw,16px)/1 "Barlow Condensed","Oswald",sans-serif;
  letter-spacing:.3em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;
  transition:color .3s, border-color .3s, background .3s, transform .3s, box-shadow .3s;
  transform:translate3d(calc(var(--txt-x) * .3), calc(var(--txt-y) * .3), 0);
}
.enter::before{content:"";width:1.5em;height:1px;background:var(--line);transition:background .3s;}
.enter::after{content:"";width:1.5em;height:1px;background:var(--line);transition:background .3s;}
.enter:hover,.enter:focus-visible{
  color:#fff;border-color:rgba(63,215,192,.75);
  background:rgba(12,28,32,.6);
  box-shadow:0 0 34px rgba(63,215,192,.22), inset 0 0 22px rgba(63,215,192,.10);
  outline:none;
}
.enter:hover::before,.enter:hover::after,
.enter:focus-visible::before,.enter:focus-visible::after{background:var(--teal-soft);}
.enter:active{transform:translate3d(calc(var(--txt-x) * .3), calc(var(--txt-y) * .3), 0) scale(.985);}

/* ---------- shared inner-view chrome ---------- */
.inner{
  position:relative;z-index:2;
  min-height:100svh;
  flex-direction:column;align-items:center;
  padding:clamp(56px,7svh,88px) 5vw clamp(40px,6svh,72px);
  color:#f1ece2;
}
.inner-head{text-align:center;margin-bottom:clamp(20px,3.4svh,40px);}
.kicker{
  margin:0 0 .55em;
  font-size:clamp(9px,.95vw,13px);font-weight:700;
  letter-spacing:.42em;text-transform:uppercase;color:var(--gold);
  text-shadow:0 1px 10px rgba(0,0,0,.8);
}
/* the router moves focus for screen readers; don't paint a ring for it */
[tabindex="-1"]:focus{outline:none;}
.inner-head h2{
  margin:0;
  font-size:clamp(22px,3.4vw,46px);font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  text-shadow:0 2px 20px rgba(0,0,0,.8);
}
.rule{
  width:min(420px,70vw);height:1px;margin:clamp(14px,2svh,22px) auto 0;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
  transform:scaleX(0);transform-origin:center;
}
.is-active .rule{animation:ruleIn 1.1s .15s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes ruleIn{to{transform:scaleX(1);}}

.back{
  position:fixed;top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));
  z-index:6;
  display:inline-flex;align-items:center;gap:.6em;
  padding:.5em .95em;border:1px solid rgba(255,255,255,.16);border-radius:2px;
  background:rgba(9,13,22,.6);backdrop-filter:blur(4px);
  color:rgba(255,255,255,.78);
  font:600 11px/1 "Barlow Condensed",sans-serif;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:color .25s,border-color .25s;
}
.back:hover{color:#fff;border-color:var(--line);}

/* staggered entrance for anything marked .rise */
.rise{opacity:0;transform:translateY(18px);}
.is-active .rise{animation:rise .9s cubic-bezier(.16,1,.3,1) forwards;}
.is-active .rise:nth-child(1){animation-delay:.05s}
.is-active .rise:nth-child(2){animation-delay:.14s}
.is-active .rise:nth-child(3){animation-delay:.23s}
.is-active .rise:nth-child(4){animation-delay:.32s}
.is-active .rise:nth-child(5){animation-delay:.41s}
.is-active .rise:nth-child(6){animation-delay:.50s}
@keyframes rise{to{opacity:1;transform:none;}}

/* ---------- dojo ---------- */
.dojo-emblem{
  width:min(340px,52vw);height:auto;margin:0 auto clamp(18px,3svh,34px);
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.6))
         drop-shadow(0 0 calc(14px + 34px * var(--flash)) rgba(240,196,120,calc(.16 + .4 * var(--flash))));
  animation:emblemFloat 9s ease-in-out infinite;
  transform-origin:50% 46%;
}
@keyframes emblemFloat{
  0%,100%{transform:translateY(0) rotate(-.6deg) scale(1);}
  50%    {transform:translateY(-14px) rotate(.6deg) scale(1.012);}
}

.contact-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(18px,3vw,44px);
  width:min(880px,92vw);margin:0 auto;
}
.card{
  padding:clamp(18px,2.4vw,28px);
  border:1px solid rgba(255,255,255,.10);border-left:2px solid var(--line);
  background:var(--panel);backdrop-filter:blur(6px);
  transition:border-color .35s, background .35s, transform .35s;
}
.card:hover{border-left-color:var(--teal-soft);background:rgba(11,20,26,.78);transform:translateY(-3px);}
.card h3{
  margin:0 0 .7em;font-size:clamp(13px,1.3vw,17px);font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.card a{
  display:block;color:#f1ece2;text-decoration:none;
  font-size:clamp(14px,1.5vw,19px);letter-spacing:.04em;line-height:1.85;
  transition:color .25s;
}
.card a:hover{color:var(--teal-soft);}
.card .role{
  margin:0;color:rgba(255,255,255,.62);
  font-size:clamp(11px,1.1vw,14px);letter-spacing:.14em;text-transform:uppercase;
}

.creators{
  width:min(880px,92vw);margin:clamp(24px,4svh,44px) auto 0;text-align:center;
  color:rgba(255,255,255,.78);
}
.creators p{margin:.35em 0;font-size:clamp(12px,1.25vw,16px);letter-spacing:.09em;}
.creators .names{color:#fff;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}

/* a name above its titles, inside the contact cards */
.card .role b{
  display:block;color:#fff;font-weight:700;letter-spacing:.14em;
  font-size:clamp(12px,1.2vw,15px);margin-bottom:.15em;
}
.card .role + .role{margin-top:.75em;}
.card .role{margin:0 0 .35em;line-height:1.5;}

/* ---------- pitch deck viewer ---------- */
.deck{
  position:relative;width:100%;aspect-ratio:16/9;
  background:#05070c;border:1px solid rgba(255,255,255,.09);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.deck iframe{width:100%;height:100%;border:0;display:block;}
.deck .pending{padding:2em;color:rgba(255,255,255,.55);text-align:center;}
@media (max-width:820px){
  .deck{aspect-ratio:3/4;}
}

.dojo-cta{margin:clamp(28px,5svh,56px) auto 0;text-align:center;}
.dojo-cta .note{
  margin:.9em auto 0;max-width:44ch;
  color:rgba(255,255,255,.55);font-size:clamp(10px,1vw,13px);letter-spacing:.06em;line-height:1.7;
}

/* ---------- NDA ---------- */
.nda-wrap{width:min(880px,94vw);margin:0 auto;}
.nda-doc{
  max-height:min(52svh,560px);overflow-y:auto;
  padding:clamp(20px,2.6vw,34px);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(8,11,18,.82);backdrop-filter:blur(6px);
  font-family:"Barlow Condensed","Helvetica Neue",sans-serif;
  scroll-behavior:smooth;
}
.nda-doc h4{
  margin:1.6em 0 .5em;font-size:clamp(13px,1.3vw,16px);
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
}
.nda-doc h4:first-of-type{margin-top:.4em;}
.nda-doc p{
  margin:0 0 .85em;font-size:clamp(13px,1.32vw,16px);line-height:1.72;
  color:rgba(255,255,255,.86);letter-spacing:.012em;
}
.nda-doc .doc-title{
  margin:0 0 .3em;font-size:clamp(16px,1.9vw,23px);font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:#fff;
}
.nda-doc .doc-meta{
  margin:0 0 1.4em;padding-bottom:1.2em;border-bottom:1px solid rgba(255,255,255,.1);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);
}

.scroll-hint{
  margin:.9em 0 0;text-align:center;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  transition:opacity .4s;
}
.scroll-hint.done{opacity:0;pointer-events:none;}

.field-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(12px,1.6vw,20px);margin-top:clamp(18px,2.6svh,30px);
}
.field{display:flex;flex-direction:column;gap:.45em;}
.field.wide{grid-column:1/-1;}
.field label{
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62);
}
.field label .req{color:var(--gold);}
.field input{
  padding:.72em .85em;
  border:1px solid rgba(255,255,255,.16);border-radius:2px;
  background:rgba(6,9,15,.72);color:#fff;
  font:500 15px/1.3 "Barlow Condensed","Helvetica Neue",sans-serif;letter-spacing:.03em;
  transition:border-color .25s, box-shadow .25s;
}
.field input:focus{
  outline:none;border-color:var(--teal-soft);
  box-shadow:0 0 0 3px rgba(63,215,192,.12);
}
.field input::placeholder{color:rgba(255,255,255,.28);}
.field input.sig{
  font-family:"Segoe Script","Bradley Hand","Snell Roundhand",cursive;
  font-size:26px;padding:.35em .6em;letter-spacing:.02em;color:#fff;
  border-bottom:1px solid var(--line);
}

.ack{
  display:flex;gap:.8em;align-items:flex-start;
  margin-top:clamp(16px,2.4svh,26px);
  padding:clamp(14px,1.8vw,20px);
  border:1px solid rgba(255,255,255,.12);background:rgba(8,11,18,.7);
}
.ack input{margin-top:.25em;width:17px;height:17px;accent-color:#3fd7c0;flex:0 0 auto;cursor:pointer;}
.ack span{font-size:clamp(12px,1.2vw,14.5px);line-height:1.65;color:rgba(255,255,255,.8);}

.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:clamp(18px,2.6svh,28px);}
.btn{
  padding:.85em 2.1em;border:1px solid var(--line);border-radius:2px;
  background:rgba(240,180,78,.10);color:#f7e9c8;
  font:700 13px/1 "Barlow Condensed",sans-serif;letter-spacing:.24em;text-transform:uppercase;
  cursor:pointer;transition:all .28s;
}
.btn:hover:not(:disabled){background:rgba(63,215,192,.16);border-color:var(--teal-soft);color:#fff;box-shadow:0 0 28px rgba(63,215,192,.2);}
.btn:disabled{opacity:.34;cursor:not-allowed;}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.7);}
.btn.ghost:hover{border-color:var(--line);color:#fff;background:rgba(255,255,255,.04);}

.form-note{margin:0;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.5);}
.form-error{
  margin:14px 0 0;padding:.8em 1em;
  border-left:2px solid #e0563f;background:rgba(224,86,63,.10);
  color:#ffb9a9;font-size:13px;letter-spacing:.04em;
}
.form-error:empty{display:none;}

/* ---------- materials room ---------- */
.vault-grid{width:min(1100px,94vw);margin:0 auto;display:grid;gap:clamp(22px,3.2vw,38px);}
.slab{
  border:1px solid rgba(255,255,255,.11);border-top:2px solid var(--line);
  background:var(--panel);backdrop-filter:blur(6px);
  padding:clamp(18px,2.4vw,30px);
}
.slab h3{
  margin:0 0 .2em;font-size:clamp(15px,1.7vw,22px);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
}
.slab .sub{
  margin:0 0 1.2em;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.player{
  position:relative;aspect-ratio:16/9;width:100%;
  background:#05070c;border:1px solid rgba(255,255,255,.09);
  display:flex;align-items:center;justify-content:center;text-align:center;
  overflow:hidden;
}
.player video{width:100%;height:100%;object-fit:cover;display:block;}
.player .pending{padding:2em;color:rgba(255,255,255,.55);}
.player .pending strong{
  display:block;margin-bottom:.6em;color:var(--gold);
  font-size:13px;letter-spacing:.24em;text-transform:uppercase;
}
.player .pending code{
  display:inline-block;margin-top:.9em;padding:.35em .6em;
  background:rgba(255,255,255,.06);border-radius:2px;
  font-size:11.5px;color:rgba(255,255,255,.75);
}

.script{
  position:relative;
  max-height:min(62svh,720px);overflow-y:auto;
  padding:clamp(18px,2.4vw,32px) clamp(16px,3vw,52px);
  background:rgba(4,6,10,.86);border:1px solid rgba(255,255,255,.09);
}
.script pre{
  margin:0;
  font-family:"Courier New",Courier,monospace;
  font-size:clamp(11px,1.05vw,13.5px);line-height:1.5;
  color:rgba(255,255,255,.87);
  white-space:pre-wrap;word-break:break-word;
}
.watermark{
  position:sticky;top:0;
  margin:-.4em 0 1.2em;padding:.5em 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(4,6,10,.94);
  font:600 10px/1.5 "Barlow Condensed",sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(240,180,78,.75);
}
.script-end{
  margin:2em 0 0;padding-top:1.4em;border-top:1px solid rgba(255,255,255,.1);
  text-align:center;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

.receipt{
  width:min(1100px,94vw);margin:clamp(22px,3svh,34px) auto 0;
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:center;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);
}
.receipt b{color:rgba(255,255,255,.8);font-weight:600;}

@media (max-width:620px){
  .inner{padding-top:64px;}
  .nda-doc{max-height:46svh;}
  .enter{letter-spacing:.2em;padding:.7em 1.35em;}
  .enter::before,.enter::after{width:.9em;}
}

@media (prefers-reduced-motion:reduce){
  .rise,.is-active .rise{animation:none;opacity:1;transform:none;}
  .rule,.is-active .rule{animation:none;transform:scaleX(1);}
  .dojo-emblem{animation:none;}
}

/* ---------- the cover's gate button, under the title ---------- */
.top .enter{margin-top:clamp(6px,1.4svh,14px);}


/* ---------- live drips on the cover mark ---------- */
.drips{
  position:absolute;inset:0;
  container-type:size;
  pointer-events:none;
}
.drips i{
  position:absolute;left:var(--x);top:var(--y);
  width:1.5cqw;aspect-ratio:.58;
  transform:translate(-50%,0);
}
/* the bead that swells at the tip before it lets go */
.drips i::before,
.drips i::after{
  content:"";position:absolute;inset:0;
  border-radius:50% 50% 46% 46% / 58% 58% 42% 42%;
  background:
    radial-gradient(ellipse at 34% 26%, rgba(190,255,248,.62) 0%, rgba(26,86,84,.9) 38%, rgba(5,20,22,1) 72%);
  box-shadow:0 0 .35cqw rgba(0,0,0,.6);
}
.drips i::before{
  transform-origin:50% 0;
  animation:bead var(--dur) var(--delay) infinite ease-in;
}
.drips i::after{
  opacity:0;
  animation:fall var(--dur) var(--delay) infinite cubic-bezier(.35,0,.85,.5);
}
@keyframes bead{
  0%, 30%  {transform:scale(.22);opacity:.85;}
  68%      {transform:scale(1);opacity:1;}
  73%      {transform:scale(.9) translateY(12%);opacity:.9;}
  76%, 100%{transform:scale(.18);opacity:.55;}
}
@keyframes fall{
  0%, 73%  {transform:translateY(0) scale(1,1);opacity:0;}
  76%      {opacity:1;}
  92%      {opacity:.9;}
  100%     {transform:translateY(var(--fall)) scale(.78,1.6);opacity:0;}
}

@media (prefers-reduced-motion:reduce){
  .drips{display:none;}
}


/* ---------- privacy policy link ---------- */
.privacy-link{
  position:fixed;right:max(12px,env(safe-area-inset-right));
  bottom:calc(10px + env(safe-area-inset-bottom));z-index:5;
  color:rgba(255,255,255,.38);text-decoration:none;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  transition:color .25s;
}
.privacy-link:hover{color:var(--gold);}