/* MMM OVERDRIVE - styles for gate-x.js and overdrive.js */

/* ================= GATE ================= */
.gate.gx{background:#050404;perspective:1200px}
.gx-vortex,.gx-eyes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.gx-vortex{z-index:0;image-rendering:auto;filter:saturate(1.15)}
.gx-vortex.gx-fallback{background:repeating-conic-gradient(from 0deg at 28% 50%,#1a0405 0 6deg,#3a0a0c 6deg 9deg,#050404 9deg 14deg);animation:platter 6s linear infinite}
.gx-eyes{z-index:1;mix-blend-mode:screen;opacity:.9}
.gate.gx .gate__beam{z-index:1;mix-blend-mode:screen}
.gate.gx .deck{z-index:3;filter:drop-shadow(0 0 calc(30px + var(--gxc,0) * 90px) rgba(224,36,47,calc(.3 + var(--gxc,0) * .6)))}
.gate.gx .deck__platter{box-shadow:0 0 0 6px #1a1512,0 0 0 8px var(--gold3),0 0 calc(var(--gxk,0) * 60px) rgba(241,209,132,.6),0 20px 40px rgba(0,0,0,.7)}
.gate.gx .gate__copy{z-index:4;padding:26px 28px;background:radial-gradient(120% 100% at 30% 50%,rgba(5,4,4,.82),rgba(5,4,4,.35) 70%,transparent);border-radius:6px}
.gate.gx .gate__title{font-size:clamp(48px,6.4vw,112px);line-height:.92}
.gate.gx .deck__plinth{background:radial-gradient(circle,rgba(14,9,7,.55) 55%,transparent 72%);box-shadow:none;border-radius:50%}
.gx-w{display:inline-block;white-space:nowrap}
.gx-l{display:inline-block;will-change:transform;text-shadow:calc(var(--gxk,0) * 6px + var(--gxc,0) * 10px) 0 rgba(224,36,47,.85),calc(var(--gxk,0) * -6px - var(--gxc,0) * 10px) 0 rgba(241,209,132,.7)}
.gate.gx-charging .gx-l{color:#fff}
.gate.gx .gate__btns .btn--gold{position:relative;overflow:hidden;font-size:18px;min-height:66px;padding:0 40px}
.gate.gx .gate__btns .btn--gold::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%);transform:translateX(-120%);animation:gxSheen 1.8s ease-in-out infinite}
@keyframes gxSheen{60%,100%{transform:translateX(120%)}}
.gate.gx-charging .gate__btns .btn--gold{animation:gxCharge .12s steps(2) infinite;background:linear-gradient(180deg,#fff,var(--gold2) 40%,var(--red2))}
@keyframes gxCharge{50%{filter:invert(1)}}
.gate.gx-charging{animation:gxRed .2s steps(2) infinite}
@keyframes gxRed{50%{box-shadow:inset 0 0 calc(80px + var(--gxc,0) * 260px) rgba(224,36,47,.75)}}
.gate.gx-gone>*{visibility:hidden}
.gate.gx.out{animation:none;opacity:0}

/* caution tape */
.gx-tapes{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.gx-tape{position:absolute;left:-20%;width:140%;padding:9px 0;background:repeating-linear-gradient(-45deg,#d4a843 0 18px,#e7c25e 18px 36px);color:#0b0806;font:400 clamp(14px,1.6vw,22px)/1 var(--disp);letter-spacing:.14em;white-space:nowrap;box-shadow:0 10px 30px rgba(0,0,0,.6);opacity:.92}
.gx-tape span{display:inline-block;animation:gxTape 22s linear infinite}
.gx-tape--0{top:7%;transform:rotate(-7deg)}
.gx-tape--1{bottom:9%;transform:rotate(5deg);background:repeating-linear-gradient(45deg,#a3121c 0 18px,#c4161f 18px 36px);color:#f1d184}
.gx-tape--1 span{animation-direction:reverse;animation-duration:18s}
.gx-tape--2{top:54%;transform:rotate(-24deg);opacity:.35;mix-blend-mode:screen}
.gx-tape--2 span{animation-duration:30s}
.gate.gx-charging .gx-tape span{animation-duration:1.6s}
.gate.gx-charging .gx-tape{opacity:1}
@keyframes gxTape{to{transform:translateX(-50%)}}

/* HUD */
.gx-hud{position:absolute;inset:0;z-index:5;pointer-events:none}
.gx-clock{position:absolute;bottom:calc(9% + 64px);right:4vw;text-align:right;font-family:var(--cond);color:var(--gold2);text-shadow:0 0 18px rgba(241,209,132,.5)}
.gx-clock small{display:block;font-size:11px;letter-spacing:.4em;color:var(--mute)}
.gx-clock b{display:block;font:400 clamp(34px,4.6vw,64px)/1 var(--disp);letter-spacing:.04em;color:var(--paper)}
.gx-clock em{display:block;font-style:normal;font-size:12px;letter-spacing:.3em;margin-top:6px}
.gx-clock em i{font-style:normal;color:var(--red2);animation:gxBlink 1s steps(2) infinite}
.gx-rec{position:absolute;top:calc(7% + 58px);left:4vw;display:flex;align-items:center;gap:8px;font:600 13px var(--cond);letter-spacing:.3em;color:var(--red2)}
.gx-rec i{width:12px;height:12px;border-radius:50%;background:var(--red2);box-shadow:0 0 14px var(--red2);animation:gxBlink 1s steps(2) infinite}
@keyframes gxBlink{50%{opacity:.15}}
.gx-big{position:absolute;inset:0;display:grid;place-items:center;font:400 clamp(70px,17vw,300px)/.85 var(--disp);color:transparent;-webkit-text-stroke:2px var(--red2);text-align:center;opacity:0;mix-blend-mode:screen}
.gx-big.on{animation:gxBig .55s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes gxBig{0%{opacity:0;transform:scale(2.4) rotate(-6deg);filter:blur(10px)}15%{opacity:1;transform:scale(1) rotate(-3deg);filter:none;color:rgba(224,36,47,.35)}70%{opacity:.9;transform:scale(.96) rotate(-3deg)}100%{opacity:0;transform:scale(.8) rotate(2deg)}}

/* shards */
.gx-shards{position:fixed;inset:0;z-index:129;pointer-events:none;perspective:900px;perspective-origin:50% 50%;overflow:hidden}
.gx-shards canvas{position:absolute;transform-style:preserve-3d;backface-visibility:visible;will-change:transform,opacity}

@media (max-width:820px){
  .gate.gx .gate__copy{padding:16px}
  .gate.gx .gate__title{white-space:normal}
  .gx-clock{display:none}
  .gx-rec{top:calc(7% + 44px);left:16px}
}

/* ================= SITEWIDE ================= */
.od-bees{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.od-speed{position:fixed;inset:0;width:100%;height:100%;z-index:92;pointer-events:none;mix-blend-mode:screen}
.od-bigeye{position:fixed;left:50%;top:50%;z-index:1;width:min(130vmin,1400px);aspect-ratio:400/240;translate:-50% -50%;pointer-events:none;opacity:0;transition:opacity 1.2s ease;mix-blend-mode:screen}
.od-bigeye.on{opacity:.62}
.od-bigeye svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 40px rgba(224,36,47,.45))}
.od-defs{position:absolute;width:0;height:0;overflow:hidden}
.od-strobe{position:fixed;inset:0;z-index:97;pointer-events:none;opacity:0}
.od-strobe.on{opacity:1;backdrop-filter:invert(1) hue-rotate(180deg) contrast(1.4);-webkit-backdrop-filter:invert(1) hue-rotate(180deg) contrast(1.4)}
.od-bands{position:fixed;inset:0;z-index:97;pointer-events:none;overflow:hidden}
.od-bands i{position:absolute;left:0;right:0;translate:var(--gx) 0}
.od-bands i.inv{backdrop-filter:invert(1);-webkit-backdrop-filter:invert(1)}
.od-bands i.hue{backdrop-filter:hue-rotate(140deg) saturate(4) brightness(1.3);-webkit-backdrop-filter:hue-rotate(140deg) saturate(4) brightness(1.3)}
.od-bands i.red{background:rgba(224,36,47,.35);mix-blend-mode:screen;backdrop-filter:blur(2px) brightness(1.6);-webkit-backdrop-filter:blur(2px) brightness(1.6)}

/* record snake */
.od-snake{position:fixed;inset:0;z-index:97;pointer-events:none}
.od-snake i{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,#d4a843 0 9%,#a3121c 10% 30%,#0b0909 31% 100%);box-shadow:0 0 0 1.5px rgba(212,168,67,.55),0 0 14px rgba(224,36,47,.5);opacity:calc(.9 - var(--i) * .08)}
.od-snake i::after{content:"";position:absolute;inset:3px;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 2px,rgba(255,255,255,.08) 2px 3px);animation:platter .9s linear infinite}
.od-snake i:first-child{width:34px;height:34px;left:-17px;top:-17px}
html.calm .od-snake{display:none}

/* texts from the crew */
.od-notes{position:fixed;top:76px;right:14px;z-index:127;display:flex;flex-direction:column;gap:8px;width:min(330px,calc(100% - 28px));pointer-events:none}
.od-note{pointer-events:auto;cursor:pointer;display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:rgba(14,11,10,.88);border:1px solid rgba(212,168,67,.35);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:odIn .5s cubic-bezier(.2,1.4,.4,1) both,odBuzz .09s linear 3 .5s;font-family:var(--sans)}
.od-note__ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(160deg,var(--gold2),var(--gold3));color:#140f05;font:400 18px var(--disp)}
.od-note strong{font:600 13px var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--gold2)}
.od-note em{font-style:normal;font-size:11px;color:var(--mute);margin-left:8px}
.od-note__m{display:block;font-size:14px;line-height:1.35;color:var(--paper)}
.od-note--unk{border-color:rgba(224,36,47,.6)}
.od-note--unk .od-note__ic{background:var(--red2);color:#fff}
.od-note--unk .od-note__m{font-family:var(--type)}
.od-note.del .od-note__m{color:var(--mute);font-style:italic;animation:odGl .25s steps(2) 3}
.od-note.out{animation:odOut .45s ease-in forwards}
@keyframes odIn{from{opacity:0;transform:translateX(120%) rotate(6deg)}}
@keyframes odOut{to{opacity:0;transform:translateX(30%) scale(.8);filter:blur(6px)}}
@keyframes odBuzz{25%{translate:-3px 0}75%{translate:3px 0}}
@keyframes odGl{50%{transform:translateX(4px) skewX(-12deg);color:var(--red2)}}

/* sections flip in */
#view{perspective:1300px}
.od-flip{opacity:0;rotate:x 62deg;translate:0 90px;scale:.9;transform-origin:50% 100%;transition:opacity .7s ease,rotate .9s cubic-bezier(.16,1.2,.3,1),translate .9s cubic-bezier(.16,1.2,.3,1),scale .9s cubic-bezier(.16,1.2,.3,1)}
.od-flip.od-in{opacity:1;rotate:none;translate:none;scale:none}
html.calm .od-flip{opacity:1;rotate:none;translate:none;scale:none;transition:none}

/* headline chroma on the kick */
.disp{text-shadow:calc(var(--kick,0) * 7px) 0 rgba(224,36,47,.75),calc(var(--kick,0) * -7px) 0 rgba(241,209,132,.55)}
html.calm .disp{text-shadow:none}

@media (max-width:760px){
  .od-notes{top:66px;right:8px;width:calc(100% - 16px)}
  .od-note{padding:8px 10px}
}