/* GRUVEE7 / QUEST smartlink
   Authored on a 1080x1920 artboard: 1u = 1 artboard px, scaled to the 9:16 column. */

@font-face{font-family:"Orbitron";src:url(assets/fonts/orbitron-var-latin.woff2) format("woff2");
  font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url(assets/fonts/chakra-petch-600-latin.woff2) format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url(assets/fonts/chakra-petch-700-latin.woff2) format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#060A0B;
  --abyss:#0A1A1E;
  --steel:#93A7AC;
  --bone:#E9E7E0;
  --volt:#FFD400;
  --volt-hi:#FFE866;

  --col:min(100vw, calc(100dvh * 9 / 16));
  --u:calc(var(--col) / 1080);
  --gut:calc(64 * var(--u));
  --ease-out:cubic-bezier(.16,1,.3,1);

  --f-display:"Orbitron","Arial Black",sans-serif;
  --f-ui:"Chakra Petch","Arial Narrow",sans-serif;
  color-scheme:dark;
}
@supports not (height:100dvh){:root{--col:min(100vw, calc(100vh * 9 / 16))}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;background:var(--ink);color:var(--bone);overflow-x:hidden;
  font-family:var(--f-ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block;fill:currentColor}

/* ---------- background: poster + looping video, never interactive ---------- */
.bg,.shade,.grain{position:fixed;inset:0;pointer-events:none;user-select:none}
.bg{z-index:0;overflow:hidden;background:var(--ink)}
.bg__drift,.bg__drift>*{position:absolute;inset:0}
.bg__poster img,.bg__video{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.bg__video{opacity:0;transition:opacity .6s linear}
.bg__video.is-playing{opacity:1}
.shade{z-index:1;background:linear-gradient(180deg,
  rgba(6,10,11,.9) 0%,rgba(6,12,14,.8) 24%,rgba(8,20,24,.36) 40%,rgba(8,20,24,.3) 52%,
  rgba(6,12,14,.8) 61%,rgba(6,10,11,.96) 69%,rgba(6,10,11,.97) 100%)}
.grain{z-index:2;inset:-50%;opacity:.07;background:url(assets/img/grain.png) repeat;background-size:80px}

/* ---------- column ---------- */
.page{position:relative;z-index:3;width:var(--col);min-height:100vh;min-height:100dvh;margin:0 auto;
  display:flex;flex-direction:column;
  padding:calc(56 * var(--u) + env(safe-area-inset-top)) var(--gut) calc(40 * var(--u) + env(safe-area-inset-bottom))}

.corners{display:flex;justify-content:space-between;
  font:600 calc(34 * var(--u))/1 var(--f-display);letter-spacing:.06em;color:var(--volt)}

.hero{margin-top:calc(64 * var(--u))}
.artist{font:600 calc(46 * var(--u))/1 var(--f-ui);letter-spacing:.34em;color:var(--bone)}
.title{position:relative;margin:calc(16 * var(--u)) 0 0 calc(-8 * var(--u));
  font:900 calc(236 * var(--u))/.8 var(--f-display);letter-spacing:-.01em;color:var(--volt)}
.title__slice{position:absolute;inset:0;opacity:0;pointer-events:none}
.title__slice:nth-child(2){--dx:calc(-64 * var(--u));clip-path:polygon(0 0,100% 0,100% 24%,0 36%)}
.title__slice:nth-child(3){--dx:calc(48 * var(--u));clip-path:polygon(0 36%,100% 24%,100% 60%,0 70%)}
.title__slice:nth-child(4){--dx:calc(-28 * var(--u));clip-path:polygon(0 70%,100% 60%,100% 100%,0 100%)}

/* ---------- platform buttons ---------- */
.links{display:grid;gap:calc(24 * var(--u));margin-top:auto;padding-top:calc(80 * var(--u))}
.btn{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:calc(34 * var(--u));min-height:max(48px, calc(150 * var(--u)));padding:0 calc(44 * var(--u));
  background:var(--volt);color:var(--ink);
  font:600 calc(40 * var(--u))/1.1 var(--f-ui);letter-spacing:.09em;text-transform:uppercase;
  overflow:hidden;transition:transform .12s var(--ease-out),background-color .2s linear,opacity .25s linear;touch-action:manipulation}
.btn b{font-weight:700}
.btn__logo svg{width:calc(64 * var(--u));height:calc(64 * var(--u))}
.btn__arrow svg{width:calc(46 * var(--u));height:calc(46 * var(--u));transition:transform .25s var(--ease-out)}
.btn::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.btn:active{transform:scale(.97)}
.btn.flash::after{animation:flash .28s ease-out}
.btn:focus-visible{outline:3px solid var(--bone);outline-offset:4px}
@media (hover:hover){
  .btn:hover{background:var(--volt-hi)}
  .btn:hover .btn__arrow svg{transform:translate(calc(6 * var(--u)),calc(-6 * var(--u)))}
}
@keyframes flash{0%{opacity:.75}100%{opacity:0}}

/* ---------- launch: plays on tap, in parallel with navigation, self-resetting ---------- */
.btn::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:translateX(-120%) skewX(-20deg)}
.links.is-going .btn:not(.is-go){opacity:.35}
.launch{position:fixed;inset:0;z-index:9;pointer-events:none;overflow:hidden}
.launch__band{position:absolute;left:-30%;width:160%;display:flex;align-items:center;justify-content:center;
  background:var(--volt);color:var(--ink);transform:translateX(-110%) skewX(-16deg)}
.launch__band:nth-child(1){top:-6%;height:40%}
.launch__band:nth-child(2){top:32%;height:38%;background:var(--bone)}
.launch__band:nth-child(3){top:68%;height:40%}
.launch__txt{transform:skewX(16deg);white-space:nowrap;
  font:900 calc(150 * var(--u))/1 var(--f-display);letter-spacing:-.01em;text-transform:uppercase}

@media (prefers-reduced-motion:no-preference){
  .btn.is-go::before{animation:scan .5s cubic-bezier(.4,0,.2,1)}
  .btn.is-go .btn__arrow svg{animation:arrow-go .46s var(--ease-out)}
  .is-launch .title__slice{animation:slice .42s .05s both}
  .is-launch .title__txt{animation:show 1ms linear .45s both}
  .is-launch .launch__band{animation:sweep .62s cubic-bezier(.75,0,.2,1)}
  .is-launch .launch__band:nth-child(2){animation-delay:.05s}
  .is-launch .launch__band:nth-child(3){animation-delay:.1s}
}
@keyframes scan{from{transform:translateX(-120%) skewX(-20deg)}to{transform:translateX(420%) skewX(-20deg)}}
@keyframes arrow-go{
  0%{transform:none;opacity:1}
  40%{transform:translate(calc(60 * var(--u)),calc(-60 * var(--u)));opacity:0}
  41%{transform:translate(calc(-60 * var(--u)),calc(60 * var(--u)));opacity:0}
  100%{transform:none;opacity:1}}
@keyframes sweep{from{transform:translateX(-110%) skewX(-16deg)}to{transform:translateX(110%) skewX(-16deg)}}

/* ---------- footer ---------- */
.foot{display:flex;justify-content:flex-end;margin-top:calc(28 * var(--u))}
.share{display:flex;align-items:center;gap:calc(20 * var(--u));min-height:max(48px, calc(132 * var(--u)));
  padding:0 calc(8 * var(--u)) 0 calc(24 * var(--u));
  font:600 calc(32 * var(--u))/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--bone)}
.share svg{width:calc(48 * var(--u));height:calc(48 * var(--u));fill:var(--volt)}
.share:focus-visible{outline:3px solid var(--bone);outline-offset:2px}

.toast{position:fixed;z-index:10;left:50%;bottom:calc(220 * var(--u) + env(safe-area-inset-bottom));
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  padding:calc(22 * var(--u)) calc(40 * var(--u));background:var(--bone);color:var(--ink);
  font:700 calc(32 * var(--u))/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;
  transition:opacity .2s linear,transform .3s var(--ease-out)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

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

/* ---------- motion (only when JS set html.anim and motion is allowed) ---------- */
@media (prefers-reduced-motion:no-preference){
  .anim .bg{animation:bg-in .9s var(--ease-out) both}
  .motion .bg__drift{animation:drift 24s ease-in-out .9s infinite alternate}
  .motion .grain{animation:grain 1s steps(1) infinite}
  .anim .corners>*{animation:rise .3s var(--ease-out) .15s both;--from:calc(-8 * var(--u))}
  .anim .corners>*+*{animation-delay:.2s}
  .anim .artist{animation:rise .3s var(--ease-out) .25s both;--from:calc(10 * var(--u))}
  .anim .title__txt{animation:show 1ms linear .75s both}
  .anim .title__slice{animation:slice .45s .3s both}
  .anim .btn{animation:rise .36s var(--ease-out) both;--from:calc(40 * var(--u))}
  .anim .btn:nth-child(1){animation-delay:.7s}
  .anim .btn:nth-child(2){animation-delay:.79s}
  .anim .btn:nth-child(3){animation-delay:.88s}
  .anim .foot{animation:show .3s linear .95s both}
}
@keyframes bg-in{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}
@keyframes drift{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.09) translate3d(-1.5%,-1%,0)}}
@keyframes grain{
  0%{transform:translate(0,0)}12%{transform:translate(-3%,2%)}25%{transform:translate(2%,-4%)}
  37%{transform:translate(-4%,-1%)}50%{transform:translate(3%,3%)}62%{transform:translate(-1%,4%)}
  75%{transform:translate(4%,-2%)}87%{transform:translate(-2%,-3%)}}
@keyframes rise{from{opacity:0;transform:translateY(var(--from))}to{opacity:1;transform:none}}
@keyframes show{from{opacity:0}to{opacity:1}}
@keyframes slice{
  0%{opacity:0;transform:translateX(var(--dx));animation-timing-function:steps(1,end)}
  12%{opacity:1;transform:translateX(var(--dx));animation-timing-function:steps(1,end)}
  34%{opacity:1;transform:translateX(calc(var(--dx) * -.55));animation-timing-function:steps(1,end)}
  56%{opacity:1;transform:translateX(calc(var(--dx) * .25));animation-timing-function:steps(1,end)}
  76%{opacity:1;transform:none;animation-timing-function:steps(1,end)}
  100%{opacity:0;transform:none}}

@media (prefers-reduced-motion:reduce){
  .btn,.btn__arrow svg,.bg__video,.toast{transition:none}
  .btn.flash::after{animation:none}
}