/* Intro showreel, all rules scoped to #reel */
#reel{
  --r-ink:#0a1f2a; --r-toska:#00b3a4; --r-lime:#d4ff3a; --r-sun:#ffc93c; --r-coral:#ff4f6d; --r-sky:#4cc9f0; --r-paper:#ffffff;
  --r-display:"Bricolage Grotesque","Plus Jakarta Sans",system-ui,sans-serif;
  position:fixed;inset:0;z-index:100;overflow:hidden;background:var(--r-ink);color:var(--r-paper);font-family:var(--r-display)}
#reel.done-out{pointer-events:none}
#reel .rs{position:absolute;inset:0;display:grid;place-items:center;visibility:hidden;overflow:hidden}
#reel .rs.on{visibility:visible}
#reel .grain{position:absolute;inset:-50%;z-index:60;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 0.6s steps(3) infinite}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}}
#reel .slate{position:absolute;z-index:70;top:calc(16px + env(safe-area-inset-top,0px));left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;mix-blend-mode:difference;color:#fff}
#reel .slate .rec{display:inline-flex;align-items:center;gap:8px}
#reel .slate .rec i{width:8px;height:8px;border-radius:50%;background:#ff4f6d;display:inline-block;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
#reel .rbar{position:absolute;z-index:80;left:0;bottom:0;height:4px;width:100%;background:rgba(255,255,255,.15)}
#reel .rbar span{display:block;height:100%;width:0;background:var(--r-lime)}
#reel #s1{background:var(--r-ink)}
#reel .burst{position:absolute;width:24vmin;height:24vmin;border-radius:50%;background:var(--r-toska);transform:scale(0)}
#reel .ring{position:absolute;width:24vmin;height:24vmin;border-radius:50%;border:2px solid var(--r-lime);transform:scale(0)}
#reel .count{position:relative;z-index:2;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:600;font-size:clamp(28px,6vw,64px);letter-spacing:.12em}
#reel .count small{display:block;font-size:.28em;letter-spacing:.3em;text-align:center;opacity:.7;margin-top:.4em}
#reel #s2{background:var(--r-lime);color:var(--r-ink)}
#reel .big{font-weight:800;line-height:.82;letter-spacing:-.04em;text-transform:uppercase;text-align:center}
#reel .l1{font-size:clamp(96px,27vw,420px)}
#reel .l2{font-size:clamp(42px,11.6vw,190px);color:var(--r-ink);-webkit-text-stroke:0}
#reel .l2 .ch{color:transparent;-webkit-text-stroke:3px var(--r-ink)}
#reel .ln{display:block;overflow:hidden;padding:0 .04em}
#reel .ch{display:inline-block;will-change:transform}
#reel .tag{position:absolute;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
#reel #s2 .tag.a{left:6vw;bottom:9vh}
#reel #s2 .tag.b{right:6vw;top:10vh}
#reel .stamp{position:absolute;right:6vw;bottom:15vh;width:clamp(84px,12vw,150px);aspect-ratio:1;border-radius:50%;background:var(--r-coral);color:#fff;display:grid;place-items:center;text-align:center;
  font-weight:800;font-size:clamp(13px,1.7vw,20px);line-height:1;text-transform:uppercase;transform:scale(0) rotate(-30deg)}
#reel #s3{background:var(--r-sun);color:var(--r-ink);display:block}
#reel .s3head{position:absolute;left:5vw;top:9vh;font-weight:800;font-size:clamp(28px,5vw,68px);line-height:.9;letter-spacing:-.03em;text-transform:uppercase}
#reel .s3head em{font-style:normal;color:var(--r-coral)}
#reel .panels{position:absolute;left:0;right:0;bottom:0;height:56%;display:grid;grid-template-columns:repeat(3,1fr)}
#reel .pn{position:relative;padding:3vh 2.4vw;display:flex;flex-direction:column;justify-content:flex-start;gap:1.6vh;overflow:hidden}
#reel .pn:nth-child(1){background:var(--r-toska);color:#fff}
#reel .pn:nth-child(2){background:var(--r-coral);color:#fff}
#reel .pn:nth-child(3){background:var(--r-ink);color:var(--r-lime)}
#reel .pn b{font-weight:800;font-size:clamp(34px,7vw,110px);line-height:.85;letter-spacing:-.03em}
#reel .pn .cs{display:flex;flex-wrap:wrap;gap:6px}
#reel .pn .cs span{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:600;font-size:clamp(12px,1.5vw,18px);padding:.3em .55em;border-radius:.5em;background:rgba(255,255,255,.18);transform:scale(0)}
#reel .pn .meta{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
#reel .flash{position:absolute;inset:0;display:grid;place-items:center;visibility:hidden}
#reel .flash b{font-weight:800;font-size:clamp(84px,25vw,400px);letter-spacing:-.05em;line-height:.8;text-transform:uppercase}
#reel .flash .sub{position:absolute;bottom:12vh;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;letter-spacing:.2em;text-transform:uppercase}
#reel .strip{position:absolute;left:0;white-space:nowrap;font-weight:800;font-size:clamp(40px,9vw,140px);text-transform:uppercase;opacity:.18;letter-spacing:-.02em}
#reel #s5{background:var(--r-toska)}
#reel #s5 canvas{position:absolute;inset:0;width:100%;height:100%}
#reel .s5txt{position:relative;z-index:2;font-weight:800;font-size:clamp(40px,8.6vw,136px);line-height:.92;letter-spacing:-.035em;text-align:left;color:#fff;padding-inline:6vw}
#reel .s5txt .hl{color:var(--r-ink);background:var(--r-lime);padding:0 .12em;border-radius:.12em}
#reel .s5txt .ln{padding-bottom:.06em}
#reel #s6{background:var(--r-paper);color:var(--r-ink)}
#reel .lockup{position:relative;display:flex;align-items:center;gap:clamp(14px,3vw,40px);padding-inline:6vw;max-width:100%}
#reel .mk{width:clamp(90px,17vw,240px);aspect-ratio:360/505;background:var(--r-toska);-webkit-mask:url("../img/logo-mark.png") center/contain no-repeat;mask:url("../img/logo-mark.png") center/contain no-repeat;flex:none}
#reel .wd{width:clamp(180px,44vw,640px);aspect-ratio:640/233;background:var(--r-toska);-webkit-mask:url("../img/logo-word.png") left center/contain no-repeat;mask:url("../img/logo-word.png") left center/contain no-repeat;clip-path:inset(0 100% 0 0)}
#reel .s6col{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3vh,30px);margin-top:-6vh;max-width:100%}
#reel .s6meta{text-align:center;padding-inline:16px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:clamp(11px,1.3vw,15px);letter-spacing:.24em;text-transform:uppercase;color:#3a5560}
#reel .dots{position:absolute;inset:0;pointer-events:none}
#reel .dots i{position:absolute;border-radius:50%;transform:scale(0)}
#reel .tape{position:absolute;left:-5%;right:-5%;bottom:11vh;background:var(--r-lime);color:var(--r-ink);transform:rotate(-3deg);padding:1.1vh 0;overflow:hidden;white-space:nowrap}
#reel .tape .track{display:inline-flex;gap:2.4vw;font-weight:800;font-size:clamp(18px,3vw,40px);text-transform:uppercase;letter-spacing:-.01em}
#reel .tape .track span::after{content:"✦";margin-left:2.4vw;color:var(--r-coral)}
#reel .ctas{pointer-events:none;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding-inline:16px;opacity:0}
#reel .ctas button{font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:700;font-size:15px;border-radius:999px;padding:13px 22px;cursor:pointer;border:2px solid var(--r-ink)}
#reel .ctas .go{background:var(--r-ink);color:var(--r-lime)}
#reel .ctas .again{background:transparent;color:var(--r-ink)}
#reel .wipe{position:absolute;inset:0;z-index:50;background:var(--r-coral);transform:scaleX(0);transform-origin:left;pointer-events:none}
@media (max-width:600px){#reel .panels{height:58%}
#reel .pn{padding:2vh 3vw}
#reel .pn .meta{display:none}
#reel .lockup{flex-direction:column;gap:10px}
#reel .wd{width:72vw}
#reel #s2 .tag.b{display:none}
 }