/* =====================================================================
   Build Theory Fellowship, Cohort 02: first-visit intro ("the loader")
   Approved design. Do not restyle; see HANDOFF.md for what may change.
   All asset paths are relative to THIS file: keep bt-loader.css, bt-loader.js
   and the assets/ folder together in one directory.
   ===================================================================== */
@font-face{font-family:"BT Geist";src:url("assets/fonts/geist-loader-subset.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"BT Geist Mono";src:url("assets/fonts/geist-mono-loader-subset.woff2") format("woff2");font-weight:100 900;font-display:swap}
/* Tokens are scoped to #bt-loader so they never collide with the site's own variables. */
#bt-loader{
  --ink:#0B0B0C;--paper:#F2EFE8;--signal:#FF7759;--signal-deep:#E55A3D;
  --concrete-500:#7B7B85;--concrete-700:#4A4A52;--focus:#1C40F2;
  --sans:"BT Geist",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"BT Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-family:var(--sans);-webkit-font-smoothing:antialiased;color:var(--ink);line-height:normal;text-align:left;
}
#bt-loader,#bt-loader *,#bt-loader *::before,#bt-loader *::after{box-sizing:border-box}
#bt-loader button{margin:0;font-family:var(--sans)}
#bt-loader p{margin:0}

/* ---------- loader ---------- */
#bt-loader{position:fixed;inset:0;z-index:2147483000;overflow:hidden;background:var(--ink);contain:strict}
#bt-loader[hidden]{display:none}
.L-layer{position:absolute;inset:0;background-size:cover;background-position:center}
.L-cold{background-image:url("assets/corridor-cold-16x9.webp")}
.L-warm{background-image:url("assets/corridor-warm-16x9.webp");opacity:0}
@media (orientation:portrait){
  .L-cold{background-image:url("assets/corridor-cold-9x16.webp")}
  .L-warm{background-image:url("assets/corridor-warm-9x16.webp")}
}
.L-sweep{background-image:url("assets/light-sweep.webp");background-position:right center;opacity:0}
.L-flicker{background:#05070A;opacity:0;pointer-events:none}
.L-white{background:#fff;opacity:0}
.L-ink{background:var(--ink)}

.L-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3.5svh,34px);padding:24px 24px calc(24px + 72px + env(safe-area-inset-bottom,0px))}
.L-lift{position:relative;display:flex;flex-direction:column;align-items:center;opacity:0}
.L-float{perspective:1200px;animation:L-float 3.2s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes L-float{to{transform:translateY(-5px)}}

.L-card{
  --cw:min(64vw,37svh,340px);
  position:relative;width:var(--cw);height:calc(var(--cw) / .648);
  transform-style:preserve-3d;transform:rotateX(6deg) rotateY(-10deg);
}
.L-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:calc(var(--cw) * .036)}
.L-front{transform:translateZ(2px)}
.L-idimg{position:absolute;inset:0;background:url("assets/id-card.webp") center/100% 100% no-repeat}

/* printed details that make it read as a real college ID */
.L-print{position:absolute;inset:0;pointer-events:none}
.L-print .avatar{position:absolute;left:8.9%;top:34%;width:36.8%;height:30.2%;border-radius:0 0 calc(var(--cw) * .012) calc(var(--cw) * .012)}
.L-print .college{position:absolute;left:52%;top:35.5%;width:42%;display:flex;flex-direction:column;
  font:700 calc(var(--cw) * .043)/1.14 var(--sans);letter-spacing:.01em;text-transform:uppercase;color:#3B4A63;opacity:.9}
.L-print .idlabel{position:absolute;left:52%;top:48.2%;padding:calc(var(--cw) * .012) calc(var(--cw) * .022);border-radius:calc(var(--cw) * .01);
  background:#5A6B84;color:#E9EDF2;font:500 calc(var(--cw) * .026)/1 var(--mono);letter-spacing:.02em;text-transform:uppercase;font-kerning:none;opacity:.92}
.L-print .sign{position:absolute;left:54%;top:54.5%;width:34%;display:flex;flex-direction:column;align-items:flex-start}
.L-print .sign svg{width:100%;height:auto;opacity:.85}
.L-print .sign span{margin-top:calc(var(--cw) * .004);padding-top:calc(var(--cw) * .008);border-top:1px solid rgba(59,74,99,.45);width:100%;
  font:600 calc(var(--cw) * .024)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#6E7A8C}
.L-print .bc{position:absolute;left:27%;top:92.9%;width:46%;height:3.3%;opacity:.8}

/* printed fields on the ID card: the three boxes */
.L-field{position:absolute;left:7.6%;width:85.1%;height:5.7%;display:flex;align-items:center;gap:4%;padding:0 4%;color:#56606E;transition:opacity .4s ease}
.L-field.f1{top:67.6%}.L-field.f2{top:75.4%}.L-field.f3{top:83.1%}
.L-field b{flex:0 0 28%;font:600 calc(var(--cw) * .027)/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#7A8594}
.L-field .v{font:500 calc(var(--cw) * .044)/1 var(--sans);letter-spacing:.02em;white-space:nowrap}
.L-roll{font:400 calc(var(--cw) * .054)/1 var(--mono);letter-spacing:.04em;white-space:nowrap}
.L-roll span{display:inline-block;width:1ch;text-align:center;transition:color .18s ease}
.L-roll span.hot{color:#35528A}
.L-field.dim{opacity:.45}

.L-sheen{position:absolute;inset:0;overflow:hidden;
  -webkit-mask:url("assets/id-card.webp") center/100% 100% no-repeat;mask:url("assets/id-card.webp") center/100% 100% no-repeat}
.L-sheen i{position:absolute;inset:0;transform:translateX(-110%);
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%)}

/* fellow card (back): the real Build Theory fellow card, same height as the ID card so the swap is invisible edge-on */
.L-back{--bw:calc(var(--cw) / .648 * .5526);left:50%;right:auto;width:var(--bw);margin-left:calc(var(--bw) / -2);border-radius:0;
  transform:rotateY(180deg) translateZ(2px);background:url("assets/fellow-card-back.webp") center/100% 100% no-repeat}
.L-back .code{position:absolute;left:11.35%;top:calc(91.18% - var(--bw) * .0508 * .855);
  font:500 calc(var(--bw) * .0508)/1 var(--mono);color:#fff;white-space:nowrap}
.L-back .code span{display:inline-block;width:.6em;text-align:center}

.L-shadow{width:calc(min(64vw,37svh,340px) * .9);height:calc(min(64vw,37svh,340px) * .1);margin-top:calc(min(64vw,37svh,340px) * .05);
  background:radial-gradient(closest-side,rgba(0,0,0,.34),rgba(0,0,0,0));animation:L-shadow 3.2s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes L-shadow{to{transform:scale(.92);opacity:.8}}

.L-lines{display:grid;justify-items:center}
.L-line{grid-area:1/1;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.6svh,18px);opacity:0}
.L-line p{margin:0;white-space:nowrap;text-align:center;font:350 clamp(21px,3vw,38px)/1.15 var(--sans);letter-spacing:-.035em}
.L-line p span{display:inline-block;opacity:0}
/* three bars: the stylised E from the wordmark, used as the divider mark */
.L-line .bars{display:block;width:18px;height:11px;transform:scaleX(0);
  background:linear-gradient(currentColor,currentColor) 0 0/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 50%/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat}
.L-line.cold{color:#fff}
.L-line.cold p{text-shadow:0 1px 2px rgba(11,11,12,.55),0 0 16px rgba(11,11,12,.5)}
.L-line.cold .bars{color:#A9B3C1}
.L-line.warm{color:var(--ink)}
.L-line.warm p{text-shadow:0 0 10px rgba(255,248,238,.85),0 0 24px rgba(255,248,238,.5)}
.L-line.warm .bars{color:var(--signal)}

/* final wordmark + FELLOWSHIP, built letter by letter. Each letter is a window onto the same
   full-word mask, and the sun inside every letter is sized and placed against the whole word,
   so the fill still reads as one continuous sunrise while the letters move independently. */
.L-word{position:absolute;left:50%;width:var(--W);height:var(--H);transform:translate(-50%,-50%)}
.L-mark{--W:var(--mw);--H:calc(var(--mw) * .095);top:calc(50% - var(--mh) * .55)}
.L-sub{--W:calc(var(--mw) * .6);--H:calc(var(--mw) * .6 * .068);top:calc(50% + var(--mh) * .95)}
.L-word .g{position:absolute;top:0;height:100%;left:calc(var(--W) * var(--l));width:calc(var(--W) * var(--w));opacity:0;overflow:hidden;
  -webkit-mask-repeat:no-repeat;-webkit-mask-size:var(--W) var(--H);-webkit-mask-position:calc(var(--W) * var(--l) * -1) 0;
  mask-repeat:no-repeat;mask-size:var(--W) var(--H);mask-position:calc(var(--W) * var(--l) * -1) 0}
.L-mark .g{-webkit-mask-image:url("assets/wordmark-bold-mask.webp");mask-image:url("assets/wordmark-bold-mask.webp")}
.L-sub .g{-webkit-mask-image:url("assets/fellowship-mask.webp");mask-image:url("assets/fellowship-mask.webp")}
.L-word i{position:absolute;display:block}
.L-word .base{inset:0;background:#FFDDC8}
.L-word .sun,.L-word .rays{top:100%;left:calc(var(--W) * (.5 - var(--l)));width:calc(var(--W) * 1.5);height:calc(var(--W) * 1.5);
  margin-left:calc(var(--W) * -.75);margin-top:calc(var(--W) * -.75);border-radius:50%;transform:scale(0)}
.L-word .sun{background:radial-gradient(closest-side,#FF7759 0%,#FF7759 16%,#FF9677 42%,#FFC4AE 78%,rgba(255,196,174,0) 100%)}
.L-word .rays{z-index:1;opacity:0;mix-blend-mode:screen;
  background:repeating-conic-gradient(from 0deg,rgba(255,247,230,0) 0deg 6deg,rgba(255,247,230,.9) 7.5deg,rgba(255,247,230,0) 9deg 12deg)}

/* camera lens flare: enters from the top-left corner, fades to almost nothing before it reaches the name */
#bt-loader{--mw:min(86vw,820px);--mh:calc(var(--mw) * .095);--fw:max(110vw,190vh);--gw:max(30vw,260px);--cx:7vw;--cy:8vh}
@media (orientation:portrait){#bt-loader{--fw:240vw;--gw:62vw;--cx:3vw;--cy:4vh}}
.L-flare{position:absolute;inset:0;opacity:0;pointer-events:none;
  -webkit-mask:radial-gradient(circle farthest-corner at 0 0,#000 0%,rgba(0,0,0,.6) 22%,rgba(0,0,0,.22) 48%,rgba(0,0,0,.1) 70%,rgba(0,0,0,.06) 100%);
  mask:radial-gradient(circle farthest-corner at 0 0,#000 0%,rgba(0,0,0,.6) 22%,rgba(0,0,0,.22) 48%,rgba(0,0,0,.1) 70%,rgba(0,0,0,.06) 100%)}
.L-flare .pan{position:absolute;inset:0}
.L-flare i{position:absolute;display:block}
.L-flare .img{width:var(--fw);aspect-ratio:1672/941;left:calc(var(--cx) - var(--fw) * .26);top:calc(var(--cy) - var(--fw) * .5628 * .361);
  background:url("assets/lens-flare.webp") center/100% 100% no-repeat}
.L-flare .glint{width:var(--gw);aspect-ratio:1;left:calc(var(--cx) - var(--gw) / 2);top:calc(var(--cy) - var(--gw) / 2);opacity:0;
  background:url("assets/lens-glint.webp") center/100% 100% no-repeat}
.L-ctrl{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;gap:10px;opacity:0}
.L-skip,.L-mute{-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;outline:none;
  transition:transform .18s cubic-bezier(.22,1,.36,1),background-color .18s ease;height:44px;color:#fff;background:rgba(11,11,12,.6);border:1px solid rgba(255,255,255,.22);border-radius:999px;cursor:pointer}
.L-skip{padding:0 24px;font:500 14px/1 var(--sans);letter-spacing:.01em}
.L-mute{position:relative;width:44px;padding:0;display:grid;place-items:center}
.L-mute svg{width:20px;height:20px;grid-area:1/1}
.L-mute .off,.L-mute.is-off .on{display:none}
.L-mute.is-off .off{display:block}
#bt-loader .L-mute:focus-visible,#bt-loader .L-skip:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* soft press instead of the browser's blue tap box */
.L-skip:active,.L-mute:active{transform:scale(.94);background-color:rgba(11,11,12,.75)}
#bt-loader,#bt-loader *{-webkit-tap-highlight-color:transparent}
/* a soft pulse tells first-time visitors there's music behind the speaker */
.L-mute.invite::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);animation:L-ring 1.8s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes L-ring{from{transform:scale(1);opacity:.9}to{transform:scale(1.55);opacity:0}}

#bt-loader .bt-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}