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

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

  /* what the canvas + body actually paint; overridden per scroll zone below */
  --zone-bg:var(--background);
}

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

/* scroll-driven background zones: hero+product = orange, about = purple, footer = black.
/* html[data-zone] is set by Script.js as the user scrolls mode colors above, these are fixed brand colors */
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, sits directly above the canvas but still below all page 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;}
}

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

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

  background:var(--background);

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

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

.splash-center{
  position:relative;
  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;}

@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);}
}

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

  transform:translateX(-50%);

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

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

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

  background:var(--line);

  transform:translateX(-50%);

  transition:width .25s ease;
}

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

/* 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;}

@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;
}

.nav-menu span{
  display:inline-block;
  line-height:1;
  transform:translateY(-1px);
}

/* product-page buy pill: tucked behind the middle orb (z-index -1 inside the navbar's own stacking context)
   and drops out from under the glass once the hero is scrolled past. Script.js toggles .nav-buy-shown */
.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 back up. visibility flips only after the tuck finishes so it doesn't vanish mid-animation */
  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 that overshoots a touch then settles */
.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;
}

/* the individual scale property so the hover grow doesn't fight the show/hide 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 so it outranks the plain .btn sizing further down the file (one class lost to it and the button
   rendered full size, spilling out of the pill). height:100% fills the pill's inner height exactly, and with
   the same 5px inset on every side its rounded end sits concentric inside the pill's, so nothing gets clipped */
.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;}
}

/* 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 orange/purple/black need to workout a light them */
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:560px;
  transform:translateY(-50%);

  will-change:transform,opacity;
}

.hero-copy,
.hero-behind,
.btn{font-family:"SuperMalibu","obliqua",sans-serif;}
.hero-title{
  font-weight:400;
  font-size:clamp(3rem,7.5vw,6.2rem);
  line-height:1.05;
  color:var(--line);
}

.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;
}

/* 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 only change the colours as ornage is the noraml acsent colour */
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;
}

/* important palette color primary bar, scrolling 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 + tertiary palette colors lighter-weight bar, scrolling 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;

  /* fades cards in/out at the edges instead of hard clip */
  -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.75rem;
  padding:0 4vw;

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

/* card order image / name / buy -> buy / name / 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:260px;
  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);}
.product-name{font-weight:400;font-size:clamp(1.3rem,2.2vw,1.8rem);}
.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;
}

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

  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-media.in-view{opacity:1;transform:translateY(0);}

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

.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);}

.about-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;

  text-align:center;
}

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

.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);
}

.about-scribble{
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;

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

  transition:opacity .3s ease;
}

.about-heading:hover .about-scribble{opacity:0;}

.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;

  opacity:0;
  transform:scale(.5);
  transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .4s ease;
}

.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;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transition:stroke-dashoffset .9s ease .35s;
}

.about-heading.in-view .about-scribble-text{opacity:1;transform:scale(1);}
.about-heading.in-view .about-scribble-circle path{stroke-dashoffset:0;}

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

/* 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;

  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 deltarune and undertaile opens the overlay (Script.js) */
.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 reusing splash screen animation */
.footer-blocks .block-orange{animation:orangeMove 3s ease-in-out infinite;}
.footer-blocks .block-purple{animation:purpleMove 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, each with a small flag image (Assets/Flag) */
.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;
}

@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);
  }
}

/* scroll zones footer is always black and .btn-outline appears in hero and more info both need light tinted glass */
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;}

  /* scroll animation is desktop-only mobile gets stacked hero */
  .hero-wrap{height:auto;}

  .hero-sticky{
    position:static;
    height:auto;
    overflow:visible;

    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-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;
  }

  /* scroll-jacked pan is desktop-only; mobile gets a simple 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;
  }

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

  .about-media{min-height:320px;}
  .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,
  .loading-bar,
  .marquee-track,
  .grain{animation:none;}

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

  .about-scribble-text,
  .about-scribble-circle path{transition:none;}

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

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

  .loading-bar{width:100%;}

  #splash{transition:none;}
}