:root{
  /* brand palette in order of importance */
  --accent:#cc330f;
  --line:#090e11;
  --whiteline:#ededed;
  --accent-2:#8e0dab;
  --accent-3:#f3af32;

  --background:#ededed;
  --zone-dark:#090e11;

  /* canvas + body fill, set per zone below */
  --zone-bg:var(--background);
}

@media (prefers-color-scheme: dark){
  :root{
    --background:#090e11;
    --line:#ededed;
  }
}

/* scroll zones, html[data-zone] set by Script.js */
html[data-zone="orange"]{--zone-bg:var(--accent);}
html[data-zone="purple"]{--zone-bg:var(--accent-2);}
html[data-zone="black"]{--zone-bg:var(--zone-dark);}

html[data-zone]{--line:var(--whiteline);}

@font-face{
  font-family:"Deltarune";
  src:url("../Assets/Easter Eggs/Deltarune Undertale/deltarune.ttf") format("truetype");
  font-weight:normal;
  font-display:swap;
}

@font-face{
  font-family:"SuperMalibu";
  src:url("../Assets/Typeface/SuperMalibu.ttf") format("truetype");
  font-weight:normal;
  font-display:swap;
}

/* dont know why this works but gmeni said it do soo.... */
  /* Hide scrollbar for Chrome, Safari and Opera */
  ::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,body{
  width:100%;
  min-height:100%;
  background:var(--zone-bg);
}

#canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
}

/* film grain, above the canvas, below content */
.grain{
  position:fixed;
  inset:0;
  z-index:0;

  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='2' seed='7' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.35' intercept='0'/%3E%3CfeFuncG type='linear' slope='0.35' intercept='0'/%3E%3CfeFuncB type='linear' slope='0.35' intercept='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:500px 500px;

  opacity:.14;

  pointer-events:none;
  animation:grainShift .8s steps(8) infinite;
}

@media (prefers-color-scheme:dark){.grain{opacity:.1;}}

/* offsets are irregular, no visible loop */
@keyframes grainShift{
  0%{background-position:0 0;}
  12%{background-position:-140px 60px;}
  25%{background-position:90px -120px;}
  37%{background-position:-70px -160px;}
  50%{background-position:160px 40px;}
  62%{background-position:-110px 110px;}
  75%{background-position:50px -70px;}
  87%{background-position:-160px -30px;}
  100%{background-position:0 0;}
}

/* skip the splash once the intro has played this tab */
html.intro-seen #splash{display:none;}

#splash{
  position:fixed;
  inset:0;
  z-index:1000;

  display:flex;
  align-items:center;
  justify-content:center;

  /* always the dark zone colour */
  background:var(--zone-dark);
  overflow:hidden;

  transition:opacity .7s ease,visibility .7s;
}

#splash.loaded{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.splash-center{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.building-blocks{
  position:relative;

  width:min(280px,55vw);
  aspect-ratio:1;

  transition:transform 1.2s cubic-bezier(.22,1,.36,1),opacity .5s ease;
}

.building-blocks img{
  position:absolute;
  width:100%;
  height:100%;

  object-fit:contain;

  transform-origin:center;

  pointer-events:none;
  user-select:none;
}

.block-orange{transform:rotate(-45deg);}
.block-gray{transform:rotate(0deg);}
.block-purple{transform:rotate(0deg);}
.block-white{transform:rotate(0deg);}

#splash .block-orange{animation:orangeMove 1.5s ease-in-out infinite;}
#splash .block-purple{animation:purpleMove 1.5s ease-in-out infinite;}
#splash .block-gray,
#splash .block-white{animation:blockPulse 1.5s ease-in-out infinite;}

@keyframes orangeMove{
  0%,20%{transform:rotate(-45deg);}
  50%,70%{transform:rotate(0deg);}
  100%{transform:rotate(-45deg);}
}

@keyframes purpleMove{
  0%,20%{transform:rotate(0deg);}
  50%,70%{transform:rotate(90deg);}
  100%{transform:rotate(0deg);}
}

/* circles' dance, uses scale so it won't fight rotate */
@keyframes blockPulse{
  0%,20%{scale:1;}
  50%,70%{scale:1.12;}
  100%{scale:1;}
}

.loading-container{
  position:absolute;
  left:50%;
  bottom:-45px;
  width:180px;
  height:2px;

  transform:translateX(-50%);

  background:color-mix(in srgb, var(--whiteline) 15%, transparent);

  overflow:hidden;
  transition:opacity .3s ease;
}

.loading-bar{
  position:absolute;
  left:50%;
  top:0;
  width:0%;
  height:100%;

  background:var(--whiteline);

  transform:translateX(-50%);

  transition:width .25s ease;
}

#splash.loaded .loading-bar{
  width:100%;
}

/* osu!lazer style intro, driven by gsap in Script.js */
#splash.intro .building-blocks{transition:none;}

.splash-welcome{
  position:absolute;
  inset:0;
  z-index:2;

  display:flex;
  align-items:center;
  justify-content:center;

  margin:0;
  pointer-events:none;
  visibility:hidden;
}

/* thin + spaced like osu!'s welcome */
.splash-welcome-text{
  display:inline-block;
  white-space:nowrap;

  font-family:"azo-sans-web","obliqua",sans-serif;
  font-weight:300;
  font-size:clamp(1.3rem,3.4vw,2.6rem);
  letter-spacing:.16em;
  color:var(--whiteline);
}

/* last word in the brand font */
.splash-welcome-text span{
  font-family:"SuperMalibu","obliqua",sans-serif;
  font-weight:400;
  letter-spacing:.04em;
  color:var(--accent);
}

.splash-glitch{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.splash-glitch span{
  position:absolute;
  left:0;
  top:0;
  visibility:hidden;
}

/* logo outline, draws in then ripples */
.splash-ring{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;

  overflow:visible;
  pointer-events:none;
  visibility:hidden;
}

.splash-ring path{
  fill:none;
  stroke:var(--whiteline);
  stroke-width:10;
  stroke-dasharray:100;
}

.splash-flash{
  position:absolute;
  inset:0;
  z-index:3;

  background:#fff;
  pointer-events:none;
  visibility:hidden;
}

/* navbar */
.navbar{
  position:fixed;
  top:28px;
  left:28px;
  right:28px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  z-index:10;

  pointer-events:none;
}

/* wraps each glass orb */
.nav-orb{
  display:inline-flex;
  pointer-events:none;

  transition:transform .35s cubic-bezier(.22,1,.36,1);
}

.nav-orb:hover{
  transform:scale(1.05);
}

/* liquid glass */
.nav-logo,
.nav-links,
.nav-menu,
.nav-buy{
  pointer-events:auto;

  background:rgba(0,0,0,.035);
  border:1px solid rgba(0,0,0,.08);

  backdrop-filter:blur(25px) saturate(160%);
  -webkit-backdrop-filter:blur(25px) saturate(160%);
  box-shadow:0 10px 30px rgba(0,0,0,.06),inset 0 1px 1px rgba(255,255,255,.6);
  color:var(--line);

  overflow:hidden;

  /* forces the browser to re-clip */
  -webkit-mask-image:-webkit-radial-gradient(white,black);
  mask-image:radial-gradient(white,black);

  transition:
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

/* uinfied gover state */
.nav-orb:hover .nav-logo,
.nav-orb:hover .nav-links,
.nav-orb:hover .nav-menu,
.nav-buy:hover{
  background:rgba(0,0,0,.065);
  border-color:rgba(0,0,0,.14);
  box-shadow:0 14px 35px rgba(0,0,0,.1),inset 0 1px 1px rgba(255,255,255,.8);
}

/* nav logo */
.nav-logo{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;

  height:54px;
  width:54px;
  border-radius:50%;

  text-decoration:none;
  color:var(--line);

  overflow:hidden;
}

.nav-logo > img{
  width:38px;
  height:38px;

  display:block;

  transition:opacity .3s ease,transform .5s cubic-bezier(.22,1,.36,1);
}

/* hides nav logo till animation is done */
#splash:not(.loaded) ~ .navbar .nav-logo > img{
  opacity:0;
}

/* center logo with animation in nav*/
.nav-building-blocks{
  position:absolute;
  top:50%;
  left:50%;
  width:38px;
  height:38px;

  pointer-events:none;

  opacity:0;

  transform:translate(-50%, -50%) scale(.8);

  transition:opacity .25s ease,transform .4s cubic-bezier(.22,1,.36,1);
}

.nav-building-blocks img{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  object-fit:contain;
}

.nav-orb:hover .nav-logo .nav-building-blocks{opacity:1; transform:translate(-50%, -50%) scale(1);}
.nav-orb:hover .nav-logo > img{opacity:0; transform:scale(.7) rotate(-15deg);}

.nav-orb:hover .nav-logo .block-orange{animation:navOrangeMove .8s ease-in-out;}
.nav-orb:hover .nav-logo .block-purple{animation:navPurpleMove .8s ease-in-out;}
.nav-orb:hover .nav-logo .block-gray,
.nav-orb:hover .nav-logo .block-white{animation:navPulse .8s ease-in-out;}

@keyframes navPulse{
  0%{scale:1;}
  50%{scale:1.12;}
  100%{scale:1;}
}

@keyframes navOrangeMove{
  0%{transform:rotate(-45deg);}
  50%{transform:rotate(0deg);}
  100%{transform:rotate(-45deg);}
}

@keyframes navPurpleMove{
  0%{transform:rotate(0deg);}
  50%{transform:rotate(90deg);}
  100%{transform:rotate(0deg);}
}

/* middle nav */
.nav-links{
  position:relative;
  display:flex;
  align-items:center;

  gap:6px;
  height:54px;
  padding:6px;
  border-radius:100px;

  overflow:hidden;
}

/* sliding hover */
.nav-indicator{
  position:absolute;
  top:6px;
  bottom:6px;
  left:0;
  width:0;

  border-radius:100px;
  background:rgba(0,0,0,.07);

  pointer-events:none;
  opacity:0;

  transition:
    left .35s cubic-bezier(.22,1,.36,1),
    width .35s cubic-bezier(.22,1,.36,1),
    opacity .25s ease;
}

.nav-links a{
  position:relative;
  z-index:1;

  padding:10px 18px;
  border-radius:100px;

  color:var(--line);

  text-decoration:none;
  font-family:"obliqua",sans-serif;
  font-weight:700;
  font-size:15px;

  transition:transform .25s ease;
}

.nav-links a:hover{
  transform:scale(1.04);
}

/* right nav */
.nav-menu{
  position:relative;

  width:54px;
  height:54px;
  padding:0;

  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;

  color:var(--line);

  font-size:20px;

  cursor:pointer;
}

/* hamburger bars, fold into an x when open */
.nav-menu-bars{
  position:relative;
  display:block;
  width:18px;
  height:14px;
}

.nav-menu-bars span{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  border-radius:2px;
  background:currentColor;

  transition:top .35s cubic-bezier(.22,1,.36,1), rotate .35s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}

.nav-menu-bars span:nth-child(1){top:0;}
.nav-menu-bars span:nth-child(2){top:6px;}
.nav-menu-bars span:nth-child(3){top:12px;}

.navbar.nav-menu-open .nav-menu-bars span:nth-child(1){top:6px; rotate:45deg;}
.navbar.nav-menu-open .nav-menu-bars span:nth-child(2){opacity:0;}
.navbar.nav-menu-open .nav-menu-bars span:nth-child(3){top:6px; rotate:-45deg;}

/* product page buy pill, drops out from under the nav */
.nav-buy{
  position:absolute;
  z-index:-1;
  top:calc(100% + 10px);
  left:0;
  right:0;
  width:fit-content;
  margin-inline:auto;

  display:flex;
  align-items:center;
  gap:12px;
  height:44px;
  padding:5px 5px 5px 18px;
  border-radius:100px;

  white-space:nowrap;

  visibility:hidden;
  opacity:0;
  transform:translateY(-58px) scale(.9);

  /* hiding: quick tuck */
  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    opacity .3s ease,
    scale .35s cubic-bezier(.22,1,.36,1),
    visibility 0s linear .45s,
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

/* showing: springy drop */
.navbar.nav-buy-shown .nav-buy{
  visibility:visible;
  opacity:1;
  transform:none;

  transition:
    transform .6s cubic-bezier(.34,1.56,.64,1),
    opacity .3s ease,
    scale .35s cubic-bezier(.22,1,.36,1),
    visibility 0s,
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

/* scale so hover won't fight the transform */
.nav-buy:hover{scale:1.05;}

.nav-buy-name{
  font-family:"SuperMalibu","obliqua",sans-serif;
  font-size:14px;
  color:var(--line);
}

.nav-buy-price{
  font-family:"obliqua",sans-serif;
  font-size:13px;
  color:var(--line);
  opacity:.7;
}

/* two classes to beat .btn sizing */
.nav-buy .nav-buy-btn{
  height:100%;
  padding:0 14px;
  font-size:13px;
  line-height:1;
}

@media (prefers-reduced-motion:reduce){
  .nav-buy,
  .navbar.nav-buy-shown .nav-buy{transition:opacity .2s ease, visibility 0s;}
  .nav-buy{transform:none;}
}

/* hamburger menu panel */
.nav-menu-panel{
  position:absolute;
  top:calc(100% + 12px);
  right:0;

  /* main pages, then products */
  display:flex;
  flex-direction:column;
  gap:14px;
  width:300px;
  padding:16px;
  border-radius:28px;

  /* scrolls if the screen is short */
  max-height:calc(100vh - 122px);
  max-height:calc(100dvh - 122px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;

  /* smoked frosted glass so text stays readable */
  background:color-mix(in srgb, color-mix(in srgb, var(--zone-bg) 85%, #000) 45%, transparent);
  border:1px solid color-mix(in srgb, var(--line) 16%, transparent);
  backdrop-filter:blur(40px) saturate(150%) brightness(.6);
  -webkit-backdrop-filter:blur(40px) saturate(150%) brightness(.6);
  box-shadow:0 24px 60px rgba(0,0,0,.3);

  /* own stack for the hover pill */
  isolation:isolate;
  pointer-events:auto;
  transform-origin:top right;

  /* hiding: quick tuck */
  visibility:hidden;
  opacity:0;
  transform:translateY(-14px) scale(.94);
  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    opacity .3s ease,
    visibility 0s linear .45s,
    background .35s ease,
    border-color .35s ease;
}

/* showing: springy drop */
.navbar.nav-menu-open .nav-menu-panel{
  visibility:visible;
  opacity:1;
  transform:none;

  transition:
    transform .6s cubic-bezier(.34,1.56,.64,1),
    opacity .3s ease,
    visibility 0s,
    background .35s ease,
    border-color .35s ease;
}

.nav-menu-group{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

/* divider */
.nav-menu-group + .nav-menu-group{
  padding-top:12px;
  border-top:1px solid color-mix(in srgb, var(--line) 14%, transparent);
}

/* same small caps as the footer's column headings */
.nav-menu-heading{
  padding:6px 16px 8px;

  font-family:"obliqua",sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--line) 55%, transparent);
}

.nav-menu-link{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding:9px 16px;
  border-radius:100px;

  font-family:"SuperMalibu","obliqua",sans-serif;
  font-size:1.1rem;
  line-height:1.15;
  color:var(--line);
  text-decoration:none;
  white-space:nowrap;
}

/* main pages read bigger */
.nav-menu-group--site .nav-menu-link{padding:10px 16px; font-size:1.45rem;}

/* product descriptions */
.nav-menu-link small{
  font-family:"obliqua",sans-serif;
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--line) 60%, transparent);
}

.nav-menu-link:focus-visible{outline:2px solid var(--line); outline-offset:-2px;}

/* hover pill, slides vertically */
.nav-menu-indicator{
  position:absolute;
  z-index:-1;
  left:0;
  top:0;
  width:0;
  height:0;
  border-radius:100px;

  background:color-mix(in srgb, var(--line) 14%, transparent);
  opacity:0;

  pointer-events:none;
  transition:
    left .35s cubic-bezier(.22,1,.36,1),
    top .35s cubic-bezier(.22,1,.36,1),
    width .35s cubic-bezier(.22,1,.36,1),
    height .35s cubic-bezier(.22,1,.36,1),
    opacity .25s ease;
}

.nav-menu-indicator.is-on{opacity:1;}

/* rows drop in one by one */
.nav-menu-heading,
.nav-menu-link{
  opacity:0;
  translate:0 -8px;
  transition:opacity .2s ease, translate .2s ease;
}

.navbar.nav-menu-open .nav-menu-heading,
.navbar.nav-menu-open .nav-menu-link{
  opacity:1;
  translate:0 0;
  transition:
    opacity .35s ease calc(.06s + var(--i,0) * 28ms),
    translate .5s cubic-bezier(.22,1,.36,1) calc(.06s + var(--i,0) * 28ms);
}

/* hide the buy pill while the menu's open */
.navbar.nav-menu-open .nav-buy{
  visibility:hidden;
  opacity:0;
  transform:translateY(-58px) scale(.9);

  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    opacity .3s ease,
    scale .35s cubic-bezier(.22,1,.36,1),
    visibility 0s linear .45s,
    background .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

@media (prefers-reduced-motion:reduce){
  .nav-menu-panel,
  .navbar.nav-menu-open .nav-menu-panel{transform:none;}

  .nav-menu-panel{transition:opacity .2s ease, visibility 0s linear .2s;}
  .navbar.nav-menu-open .nav-menu-panel{transition:opacity .2s ease, visibility 0s;}

  .nav-menu-heading,
  .nav-menu-link,
  .navbar.nav-menu-open .nav-menu-heading,
  .navbar.nav-menu-open .nav-menu-link{translate:none; transition:none;}

  .navbar.nav-menu-open .nav-buy{transform:none; transition:opacity .2s ease, visibility 0s linear .2s;}

  .nav-menu-bars span,
  .nav-menu-indicator{transition:none;}
}

/* dark mode */
@media (prefers-color-scheme:dark){
  .nav-logo,
  .nav-links,
  .nav-menu,
  .nav-buy{
    background:rgba(255,255,255,.015);
    border-color:rgba(255,255,255,.08);
    box-shadow:
      0 8px 30px rgba(0,0,0,.3),
      inset 0 1px 1px rgba(255,255,255,.1);
  }

  .nav-logo:hover,
  .nav-links:hover,
  .nav-menu:hover,
  .nav-buy:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.2);
    box-shadow:0 12px 35px rgba(0,0,0,.4),inset 0 1px 1px rgba(255,255,255,.2);
  }

  .nav-indicator{
    background:rgba(255,255,255,.12);
  }
}

/* scroll zones need a light theme */
html[data-zone] .nav-logo,
html[data-zone] .nav-links,
html[data-zone] .nav-menu,
html[data-zone] .nav-buy{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 8px 30px rgba(0,0,0,.2), inset 0 1px 1px rgba(255,255,255,.15);
}

html[data-zone] .nav-orb:hover .nav-logo,
html[data-zone] .nav-orb:hover .nav-links,
html[data-zone] .nav-orb:hover .nav-menu,
html[data-zone] .nav-buy:hover{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.25);
  box-shadow:0 12px 35px rgba(0,0,0,.25),inset 0 1px 1px rgba(255,255,255,.25);
}

html[data-zone] .nav-indicator{
  background:rgba(255,255,255,.16);
}

/* hero */
.hero-wrap{
  position:relative;
  z-index:1;
  height:200vh;
}

.hero-sticky{
  position:relative;
  height:100vh;
  overflow:hidden;
}

.hero-copy{
  position:absolute;
  top:50%;
  left:8%;
  z-index:3;

  max-width:none;
  transform:translateY(-50%);
  text-align:center;

  will-change:transform,opacity;
}

.hero-copy,
.hero-behind,
.btn{font-family:"SuperMalibu","obliqua",sans-serif;}
/* same as every hero title */
.hero-title{
  font-weight:400;
  font-size:clamp(2.4rem,5.5vw,6.2rem);
  line-height:1.05;
  color:var(--line);
  white-space:nowrap;
}

.hero-title span{color:var(--accent);}
.hero-title-atom{position:relative; display:inline-block;}
.hero-title-atom-text{transition:opacity .3s ease;}
.hero-title-atom.atom-ready .hero-title-atom-text{opacity:0;}
.hero-title-atom-canvas{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  pointer-events:none;
  opacity:0;

  transition:opacity .3s ease;
}

.hero-title-atom.atom-ready .hero-title-atom-canvas{ opacity:1;}

.hero-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:36px;
}

.hero-copy .hero-buttons{justify-content:center;}

/* hero entrance */
#splash:not(.loaded) ~ .hero-wrap .hero-title,
#splash:not(.loaded) ~ .hero-wrap .hero-buttons,
#splash:not(.loaded) ~ .hero-wrap .hero-laptop img{opacity:0;}

#splash.loaded ~ .hero-wrap .hero-title{animation:lappy-hero-rise 1s cubic-bezier(.22,1,.36,1) both;}
#splash.loaded ~ .hero-wrap .hero-title-atom{animation:lappy-hero-pop .9s cubic-bezier(.22,1,.36,1) .25s both;}
#splash.loaded ~ .hero-wrap .hero-buttons{animation:lappy-hero-rise 1s cubic-bezier(.22,1,.36,1) .4s both;}
#splash.loaded ~ .hero-wrap .hero-laptop img{animation:hero-laptop-slide 1.2s cubic-bezier(.22,1,.36,1) .35s both;}

/* laptop slide-in, on translate + rotate */
@keyframes hero-laptop-slide{
  from{opacity:0; translate:140px 0; rotate:4deg;}
  to{opacity:1; translate:0 0; rotate:0deg;}
}

/* shared hero keyframes */
@keyframes lappy-hero-rise{
  from{opacity:0; transform:translateY(70px) rotate(-3deg);}
  to{opacity:1; transform:none;}
}

@keyframes lappy-hero-pop{
  from{opacity:0; transform:scale(.6) rotate(6deg);}
  to{opacity:1; transform:none;}
}

@media (prefers-reduced-motion: reduce){
  #splash.loaded ~ .hero-wrap .hero-title,
  #splash.loaded ~ .hero-wrap .hero-title-atom,
  #splash.loaded ~ .hero-wrap .hero-buttons,
  #splash.loaded ~ .hero-wrap .hero-laptop img{animation:none;}
}

/* arrow that slides animation on hover */
.btn::after{
  content:"\2192";
  display:inline-block;

  max-width:0;
  margin-left:0;
  opacity:0;
  overflow:hidden;

  transform:translateX(-6px);

  transition:
    max-width .35s cubic-bezier(.22,1,.36,1),
    margin-left .35s cubic-bezier(.22,1,.36,1),
    opacity .3s ease,
    transform .35s cubic-bezier(.22,1,.36,1);
}

.btn:hover::after{
  max-width:24px;
  margin-left:8px;
  opacity:1;
  transform:translateX(0);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:16px 34px;
  border-radius:100px;

  font-weight:400;
  font-size:18px;
  text-decoration:none;

  transition:
    transform .25s ease,
    background .35s ease,
    border-color .35s ease;
}

.btn:hover{transform:scale(1.04);}

.btn-fill{
  background:var(--accent);
  border:1px solid var(--accent);
  color:#fff;
}

.btn-outline{
  background:rgba(0,0,0,.035);
  border:1px solid rgba(0,0,0,.08);
  color:var(--line);

  backdrop-filter:blur(25px) saturate(160%);
  -webkit-backdrop-filter:blur(25px) saturate(160%);
}

/* orange zone colour swaps */
html[data-zone="orange"] .btn-fill{
  background:var(--whiteline);
  border-color:var(--whiteline);
  color:var(--accent);
}

html[data-zone="orange"] .hero-title span{color:var(--whiteline);}

.hero-laptop{
  position:absolute;
  top:50%;
  left:50%;
  z-index:2;

  width:min(46vw,560px);
  transform:translate(-50%,-50%);

  will-change:transform;
  cursor:pointer;
}

.hero-laptop img{
  display:block;
  max-width:100%;
  max-height:70vh;
  width:auto;
  height:auto;
  margin:0 auto;
  user-select:none;
  pointer-events:none;
}

.hero-behind{
  position:absolute;
  top:50%;
  left:50%;
  z-index:1;

  width:100vw;

  display:flex;
  flex-direction:column;
  gap:16px;

  transform:translate(-50%,-50%);
  opacity:0;
  pointer-events:none;

  will-change:transform,opacity;
}

.marquee{overflow:hidden;padding:16px 0;}

.marquee-track{
  display:flex;
  width:max-content;
  will-change:transform;
}

.marquee-set{
  display:flex;
  flex-shrink:0;
  white-space:nowrap;

  font-family:"SuperMalibu","obliqua",sans-serif;
  font-weight:400;
  font-size:clamp(2rem,6vw,4rem);
  letter-spacing:.04em;
  padding-right:2.5rem;
}

/* primary bar, right to left */
.marquee-a{background:var(--accent);}
.marquee-a .marquee-set{color:var(--background);}
.marquee-a .marquee-track{animation:marquee-rtl 22s linear infinite;}

/* secondary bar, left to right */
.marquee-b{background:var(--accent-2);}
.marquee-b .marquee-set{color:var(--accent-3);}
.marquee-b .marquee-track{animation:marquee-ltr 26s linear infinite;}

@keyframes marquee-rtl{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

@keyframes marquee-ltr{
  from{transform:translateX(-50%);}
  to{transform:translateX(0);}
}

/* product showcase */
.product-wrap{
  position:relative;
  z-index:1;
  height:400vh;
}

.product-sticky{
  position:relative;
  height:100vh;
  overflow:hidden;

  display:flex;
  align-items:center;
}

.product-viewport{
  width:100%;
  overflow:hidden;

  /* fade cards at the edges */
  -webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);
  mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);
}

.product-track{
  display:flex;
  align-items:center;

  height:82vh;

  will-change:transform,opacity;
}

.product-card{
  flex:0 0 33.3333vw;
  height:100%;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.25rem;
  padding:0 4vw;

  text-align:center;
  font-family:"SuperMalibu","obliqua",sans-serif;
  color:var(--line);

  /* 260px, narrower on short screens */
  --media-w:min(260px, (82vh - 265px) * .5625);
}

/* image / info / buy -> buy / info / image */
.product-card--alt{flex-direction:column-reverse;}
.product-card{transition:transform .4s cubic-bezier(.22,1,.36,1);}
.product-card:hover{transform:translateY(-12px);}
.product-media{
  width:100%;
  max-width:var(--media-w);
  aspect-ratio:9/16;
  border-radius:24px;
  overflow:hidden;

  background:color-mix(in srgb, var(--line) 6%, transparent);

  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .4s ease;
}

.product-card:hover .product-media{
  transform:rotate(-1.5deg);
  box-shadow:0 24px 48px rgba(0,0,0,.2);
}

.product-card--alt:hover .product-media{transform:rotate(1.5deg);}

.product-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  user-select:none;
  pointer-events:none;

  transition:transform .6s cubic-bezier(.22,1,.36,1);
}

.product-card:hover .product-media img{transform:scale(1.1);}

/* solid tint, not glass (glass can't see past a mask) */
.product-info{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;

  width:100%;
  max-width:260px;
  padding:16px 18px 18px;
  border-radius:22px;

  background:color-mix(in srgb, var(--zone-bg) 90%, #000);
  border:1px solid color-mix(in srgb, var(--line) 16%, transparent);

  transition:background .35s ease, border-color .35s ease;
}

.product-name{font-weight:400; font-size:clamp(1.2rem,1.9vw,1.6rem); line-height:1.1;}

.product-text{
  font-family:"obliqua",sans-serif;
  font-size:.92rem;
  line-height:1.45;
  color:color-mix(in srgb, var(--line) 75%, transparent);
}

/* yellow, white on orange */
.product-price{
  margin-top:4px;
  font-size:1.3rem;
  line-height:1;
  color:var(--accent-3);

  transition:color .35s ease;
}

html[data-zone="orange"] .product-price{color:var(--whiteline);}

.product-price small{
  font-family:"obliqua",sans-serif;
  font-size:.7rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--line) 65%, transparent);
}

.btn.product-buy{padding:12px 30px;font-size:15px;}

.placeholder-section{
  position:relative;
  z-index:1;

  min-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--line);
  opacity:.5;

  font-family:"obliqua",sans-serif;
}

/* about and more info section */
.about-wrap{
  position:relative;
  z-index:1;

  display:grid;
  grid-template-columns:minmax(200px,22vw) 1fr 1fr minmax(200px,22vw);
  gap:32px;

  padding:140px 48px;

  /* glass copy cards */
  --card-bg:rgba(0,0,0,.035);
  --card-border:rgba(0,0,0,.08);
  --glass:blur(25px) saturate(160%);
}

html[data-zone] .about-wrap{--card-bg:rgba(255,255,255,.05); --card-border:rgba(255,255,255,.14);}

/* smoked glass on orange + purple */
html[data-zone="orange"] .about-wrap,
html[data-zone="purple"] .about-wrap{
  --card-bg:rgba(0,0,0,.1);
  --card-border:rgba(255,255,255,.16);
  --glass:blur(25px);
}

.about-media{
  min-height:460px;
  border-radius:28px;
  overflow:hidden;
  background:color-mix(in srgb, var(--line) 6%, transparent);

  /* reveal and hover on separate properties */
  opacity:0;
  translate:0 48px;
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1) var(--delay,0s),
    translate .9s cubic-bezier(.22,1,.36,1) var(--delay,0s),
    transform .4s cubic-bezier(.22,1,.36,1),
    box-shadow .4s ease;
}

.about-media.in-view{opacity:1; translate:0 0;}

.about-media.in-view:hover{
  transform:translateY(-12px);
  box-shadow:0 24px 48px rgba(0,0,0,.2);
}

.about-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  user-select:none;
  pointer-events:none;

  transition:transform .6s cubic-bezier(.22,1,.36,1);
}

.about-media:hover img{transform:scale(1.1);}

/* frosted copy card */
.about-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  padding:48px 28px;
  border-radius:28px;

  text-align:center;

  background:var(--card-bg);
  border:1px solid var(--card-border);
  backdrop-filter:var(--glass);
  -webkit-backdrop-filter:var(--glass);

  opacity:0;
  translate:0 48px;
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1) var(--delay,0s),
    translate .9s cubic-bezier(.22,1,.36,1) var(--delay,0s),
    transform .4s cubic-bezier(.22,1,.36,1),
    box-shadow .4s ease,
    background .35s ease,
    border-color .35s ease;
}

.about-copy.in-view{opacity:1; translate:0 0;}

.about-copy.in-view:hover{
  transform:translateY(-12px);
  box-shadow:0 24px 48px rgba(0,0,0,.2);
}

/* the row arrives together, a beat apart */
.about-wrap > :nth-child(2){--delay:.1s;}
.about-wrap > :nth-child(3){--delay:.2s;}
.about-wrap > :nth-child(4){--delay:.3s;}

.about-heading{position:relative;display:inline-block;}

/* room for the scribble loop, one line */
.about-heading:has(.about-scribble){margin-bottom:30px;}
.about-heading:has(.about-scribble) .about-title{white-space:nowrap;}

.about-title{
  font-family:"SuperMalibu","obliqua",sans-serif;
  font-weight:400;
  font-size:clamp(2.2rem,3.6vw,3.2rem);
  line-height:1.05;
  color:var(--line);
}

/* "Squircle" scribble, draws in, hover undoes it */
.about-scribble{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;

  display:inline-block;
  transform:translate(-50%,-50%) rotate(-20deg);
  pointer-events:none;
}

.about-scribble-text{
  position:relative;
  z-index:1;
  display:block;

  font-family:"SuperMalibu","obliqua",sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:clamp(2.4rem,4vw,3.6rem);
  color:var(--accent);
  white-space:nowrap;

  /* hovering the word counts as the heading */
  pointer-events:auto;
}

/* one per letter, --i index, --n count */
.about-scribble-letter{
  display:inline-block;
  transform-origin:50% 70%;

  /* hidden */
  opacity:0;
  transform:translateY(.35em) scale(.3) rotate(var(--tilt,-24deg));

  /* the undo, quick and last letter first */
  transition:
    transform .24s cubic-bezier(.55,0,1,.45) calc((var(--n,1) - 1 - var(--i,0)) * 16ms),
    opacity .2s ease calc((var(--n,1) - 1 - var(--i,0)) * 16ms);
}

/* alternate letter tilt */
.about-scribble-letter:nth-child(even){--tilt:20deg;}

.about-heading.in-view:not(:hover) .about-scribble-letter{
  opacity:1;
  transform:none;

  /* pop in */
  transition:
    transform .6s cubic-bezier(.34,1.56,.64,1) calc(var(--i,0) * 55ms),
    opacity .25s ease calc(var(--i,0) * 55ms);
}

.about-scribble-circle{
  position:absolute;
  inset:-30% -14%;
  width:128%;
  height:160%;
  overflow:visible;
}

.about-scribble-circle path{
  fill:none;
  stroke:var(--accent);
  stroke-width:3;
  stroke-linecap:round;
  /* dash slightly longer than the loop to avoid a dot */
  stroke-dasharray:100 101;
  stroke-dashoffset:100.5;

  /* undo */
  transition:stroke-dashoffset .35s cubic-bezier(.55,0,.45,1);
}

/* draw the loop */
.about-heading.in-view:not(:hover) .about-scribble-circle path{
  stroke-dashoffset:0;
  transition:stroke-dashoffset .75s cubic-bezier(.65,0,.35,1) .3s;
}

.about-text{
  max-width:36ch;
  font-family:"obliqua",sans-serif;
  font-size:1rem;
  line-height:1.5;
  color:var(--line);
  opacity:.7;
}

/* stat, yellow, white on orange */
.about-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;

  font-family:"SuperMalibu","obliqua",sans-serif;
  font-size:clamp(1.8rem,2.8vw,2.4rem);
  line-height:1;
  color:var(--accent-3);

  transition:color .35s ease;
}

html[data-zone="orange"] .about-stat{color:var(--whiteline);}

.about-stat small{
  font-family:"obliqua",sans-serif;
  font-size:.75rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--line) 65%, transparent);
}

/* tablets: two by two */
@media (max-width:1200px){
  .about-wrap{grid-template-columns:1fr 1fr;}
}

/* banner image before fotter */
.about-banner{
  position:relative;
  z-index:1;

  width:100%;
  height:clamp(340px,54vw,760px);
  padding:0 48px;
  overflow:hidden;

  opacity:0;
  transform:translateY(48px);
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1),
    transform .9s cubic-bezier(.22,1,.36,1),
    box-shadow .4s ease;
}

.about-banner.in-view{opacity:1;transform:translateY(0);}

.about-banner.in-view:hover{
  transform:translateY(-12px);
  box-shadow:0 24px 48px rgba(0,0,0,.2);
  transition-duration:.4s;
}

.about-banner img{
  display:block;
  width:100%;
  height:100%;
  border-radius:28px;
  object-fit:cover;

  /* card tint behind cut-out product shots */
  background:color-mix(in srgb, var(--line) 6%, transparent);

  transition:transform .6s cubic-bezier(.22,1,.36,1);
}

.about-banner:hover img{transform:scale(1.1);}

/* the footer */
.site-footer{
  position:relative;
  z-index:1;

  margin-top:80px;

  background:rgba(0,0,0,.035);
  border-top:1px solid rgba(0,0,0,.08);
  backdrop-filter:blur(25px) saturate(160%);
  -webkit-backdrop-filter:blur(25px) saturate(160%);
}

.footer-marquee{padding:14px 0;}
.footer-marquee .marquee-set{font-size:clamp(1.6rem,4.5vw,3rem);}

.footer-main{
  position:relative;

  display:grid;
  grid-template-columns:1.2fr 2fr auto;
  gap:48px;
  align-items:center;

  max-width:1400px;
  margin:0 auto;
  padding:72px 48px;
}

.footer-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.footer-blocks{
  position:relative;
  width:64px;
  aspect-ratio:1;
  margin-bottom:20px;
}

.footer-blocks img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
}

/* easter egg overlay */
.deltarune-battle{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;

  background:#000;
  padding:32px;
  box-sizing:border-box;
  overflow:auto;
}

.deltarune-battle[hidden]{display:none;}
.deltarune-battle.db-screen-shake{animation:db-screen-shake .4s linear;}

@keyframes db-screen-shake{
  0%,100%{transform:translate(0,0);}
  10%{transform:translate(-10px,-6px);}
  20%{transform:translate(9px,5px);}
  30%{transform:translate(-8px,6px);}
  40%{transform:translate(10px,-5px);}
  50%{transform:translate(-9px,-4px);}
  60%{transform:translate(8px,6px);}
  70%{transform:translate(-6px,-5px);}
  80%{transform:translate(6px,4px);}
  90%{transform:translate(-4px,2px);}
}

.db-scene{
  position:relative;
  width:min(40vw,200px);
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.db-enemy{
  width:100%;
  image-rendering:pixelated;
  animation:db-drop .5s ease-out;
}

@keyframes db-drop{from{transform:translateY(-120%);opacity:0;} to{transform:translateY(0);opacity:1;}
}

.db-hp{
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  font-family:"Deltarune","Courier New",monospace;
  font-size:.9rem;
}

.db-hp[hidden]{display:none;}
.db-hp-name{font-weight:bold;}

.db-hp-bar{
  width:120px;
  height:14px;
  background:#601010;
  border-radius:2px;
  overflow:hidden;
}

.db-hp-fill{
  height:100%;
  width:100%;
  background:#ffd23f;
  transition:width .15s ease-out;
}

.db-board{
  position:relative;
  width:300px;
  max-width:80vw;
  height:200px;
  background:#000;
  border:4px solid #fff;
  box-sizing:border-box;
  overflow:hidden;
}

.db-board[hidden]{display:none;}

.db-heart{
  position:absolute;
  width:16px;
  height:16px;
  transform:translate(-50%,-50%);
  image-rendering:pixelated;
  pointer-events:none;
}

.db-heart.db-hit{animation:db-shake .12s linear 3; filter:drop-shadow(0 0 6px #ff3b3b);
}

@keyframes db-shake{0%,100%{margin-left:0;} 50%{margin-left:4px;}}

.db-bullet{
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 35%,#d6f4ff,#2aa7e0);
  box-shadow:0 0 6px rgba(65,190,255,.8);
  pointer-events:none;
}

.db-textbox{
  width:min(90vw,720px);
  min-height:120px;
  border:4px solid #fff;
  background:#000;
  padding:24px 28px;
  box-sizing:border-box;
}

.db-text{
  margin:0;
  color:#fff;
  font-family:"Deltarune","Courier New",monospace;
  font-size:clamp(1rem,2vw,1.4rem);
  line-height:1.6;
  white-space:pre-wrap;
}

.db-menu{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:16px;
}

.db-menu[hidden]{display:none;}

.db-menu button{
  border:2px solid #fff;
  background:transparent;
  color:#fff;
  font-family:"Deltarune","Courier New",monospace;
  font-size:.95rem;
  padding:8px 18px;
  cursor:pointer;
}

.db-menu button:hover{background:#fff;color:#000;}

.db-close{
  border:2px solid #fff;
  background:transparent;
  color:#fff;
  font-family:"Deltarune","Courier New",monospace;
  font-size:.95rem;
  padding:10px 20px;
  cursor:pointer;
}

.db-close:hover{background:#fff;color:#000;}


/* flappy bird easter egg */
.flappy-game{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;

  background:rgba(0,0,0,.85);
  padding:32px;
  box-sizing:border-box;
  overflow:auto;
}

.flappy-game[hidden]{display:none;}

.flappy-hud{
  display:flex;
  gap:24px;
  color:#fff;
  font-family:Arial,sans-serif;
  font-size:1.1rem;
}

.flappy-canvas{
  display:block;
  border:4px solid #fff;
  border-radius:6px;
  background:#7fd4ff;
  max-width:90vw;
  max-height:70vh;
  width:auto;
  height:auto;
  cursor:pointer;
}

.flappy-msg{
  margin:0;
  color:#fff;
  font-family:Arial,sans-serif;
  font-size:.95rem;
  text-align:center;
}

.flappy-msg[hidden]{display:none;}
.flappy-close{font-family:Arial,sans-serif;}

/* idle wiggle */
.footer-blocks .block-orange{animation:orangeMove 3s ease-in-out infinite;}
.footer-blocks .block-purple{animation:purpleMove 3s ease-in-out infinite;}
.footer-blocks .block-gray,
.footer-blocks .block-white{animation:blockPulse 3s ease-in-out infinite;}

.footer-tagline{
  max-width:32ch;
  font-family:"obliqua",sans-serif;
  color:var(--line);
  opacity:.7;
  line-height:1.5;
}

.footer-links{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
}

.footer-col{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer-heading{
  margin-bottom:6px;

  font-family:"obliqua",sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--line);
  opacity:.45;
}

.footer-col a{
  position:relative;
  width:fit-content;

  color:var(--line);
  text-decoration:none;
  font-family:"obliqua",sans-serif;
  font-size:15px;
}

.footer-col a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:100%;
  height:1px;

  background:currentColor;

  transform:scaleX(0);
  transform-origin:right;
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}

.footer-col a:hover::after{transform:scaleX(1); transform-origin:left;}

.footer-top{
  display:flex;
  align-items:center;
  justify-content:center;
  justify-self:end;

  width:54px;
  height:54px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(0,0,0,.035);

  color:var(--line);
  font-size:20px;
  cursor:pointer;

  transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    background .35s ease;
}

.footer-top:hover{transform:translateY(-4px); background:rgba(0,0,0,.065);}

/* acknowledgement of country + LGBTQIA+ welcome */
.footer-acknowledge{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;

  max-width:1400px;
  margin:0 auto 32px;
  padding:32px 48px 0;
  border-top:1px solid color-mix(in srgb, var(--line) 12%, transparent);
}

.footer-ack-item{
  display:flex;
  align-items:flex-start;
  gap:16px;

  font-family:"obliqua",sans-serif;
  font-size:14px;
  line-height:1.6;
  color:var(--line);
}

.footer-ack-item span:last-child{opacity:.7;}

.footer-flag{
  flex:0 0 auto;
  width:42px;
  aspect-ratio:3/2;
  margin-top:3px;
  border-radius:4px;
  object-fit:cover;
}

.footer-bottom{
  padding:0 48px 32px;

  text-align:center;
  font-family:"obliqua",sans-serif;
  font-size:13px;
  color:var(--line);
  opacity:.45;
}
.footer-bottom a{color:inherit; text-underline-offset:2px;}

@media (prefers-color-scheme:dark){
  .site-footer{background:rgba(255,255,255,.015); border-color:rgba(255,255,255,.08);}
  .footer-top{background:rgba(255,255,255,.015); border-color:rgba(255,255,255,.08);}
  .footer-top:hover{background:rgba(255,255,255,.08);}
}

@media (prefers-color-scheme:dark){
  .btn-outline{
    background:rgba(255,255,255,.015);
    border-color:rgba(255,255,255,.08);
  }
}

/* footer is always black, light glass buttons */
html[data-zone] .site-footer{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14);}
html[data-zone] .footer-top{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14);}
html[data-zone] .footer-top:hover{background:rgba(255,255,255,.12);}
html[data-zone] .btn-outline{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);}

/* mobile */
@media (max-width:650px){
  .navbar{top:18px; left:18px; right:18px;}
  .nav-links{gap:2px;}
  .nav-links a{padding:9px 12px; font-size:13px;}
  .nav-buy{top:calc(100% + 8px);}
  .nav-buy-name{display:none;}

  /* full width menu on phones */
  .nav-menu-panel{
    left:0;
    width:auto;
    max-height:calc(100vh - 110px);
    max-height:calc(100dvh - 110px);
  }

  /* mobile gets a stacked hero */
  .hero-wrap{height:auto;}

  .hero-sticky{
    position:static;
    height:auto;
    overflow:visible;
    /* clip so the slide-in can't scroll sideways */
    overflow-x:clip;

    display:flex;
    flex-direction:column;
    align-items:center;

    padding:100px 24px 60px;
  }

  .hero-copy{
    position:static;
    width:100%;
    max-width:none;
    text-align:center;
    transform:none;
  }

  .hero-title{
    white-space:normal;
    font-size:clamp(2rem,9vw,3rem);
  }

  .hero-buttons{justify-content:center;}

  .hero-laptop{
    position:static;
    width:min(80vw,380px);
    margin-top:40px;
    transform:none;
  }

  .hero-behind{
    position:static;
    width:calc(100% + 48px);
    margin:40px -24px 0;
    opacity:1;
    transform:none;
  }

  /* mobile gets a stacked list */
  .product-wrap{height:auto;}

  .product-sticky{
    position:static;
    height:auto;
    display:block;
  }

  .product-viewport{
    overflow:visible;
    -webkit-mask-image:none;
    mask-image:none;
  }

  .product-track{
    display:flex;
    flex-direction:column;
    height:auto;
    gap:56px;
    padding:60px 24px;

    opacity:1;
    transform:none;
  }

  .product-card{
    flex:none;
    width:100%;
    height:auto;
    padding:0;

    /* no track to fit */
    --media-w:260px;
  }

  .about-wrap{
    grid-template-columns:1fr;
    padding:72px 24px;
    gap:40px;
  }

  .about-media{min-height:320px;}
  .about-copy{padding:36px 24px;}
  .about-banner{height:clamp(220px,70vw,420px); padding:0 24px;}

  .footer-main{
    grid-template-columns:1fr;
    gap:40px;
    padding:56px 24px;
  }

  .footer-brand{align-items:center; text-align:center;}
  .footer-blocks{margin-inline:auto;}
  
  .footer-links{
    grid-template-columns:1fr;
    gap:28px;
    text-align:center;
  }

  .footer-col{align-items:center;}
  .footer-top{justify-self:center;}

  .footer-acknowledge{
    grid-template-columns:1fr;
    gap:24px;
    padding:28px 24px 0;
  }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  #splash .block-orange,
  #splash .block-purple,
  #splash .block-gray,
  #splash .block-white,
  .loading-bar,
  .marquee-track,
  .grain{animation:none;}

  .footer-blocks .block-orange,
  .footer-blocks .block-purple,
  .footer-blocks .block-gray,
  .footer-blocks .block-white{animation:none;}

  /* scribble just fades */
  .about-scribble-letter,
  .about-heading.in-view:not(:hover) .about-scribble-letter{transform:none; transition:opacity .3s ease;}

  .about-scribble-circle path{stroke-dashoffset:0; opacity:0; transition:opacity .3s ease;}
  .about-heading.in-view:not(:hover) .about-scribble-circle path{opacity:1; transition:opacity .3s ease;}

  .about-media,
  .about-media img,
  .about-copy,
  .about-banner,
  .about-banner img,
  .product-card,
  .product-media,
  .product-media img,
  .btn::after{transition:none;}

  .about-media,
  .about-copy,
  .about-banner{opacity:1; translate:none; transform:none;}

  .loading-bar{width:100%;}

  #splash{transition:none;}
}