/* EWDDCT motion layer — comic-book / collectible animations */

:root {
  --pop: cubic-bezier(.34, 1.56, .64, 1);
  --snap: cubic-bezier(.16, 1, .3, 1);
  --intro: 1.25s
}

html.fx-no-intro {
  --intro: 0s
}

/* ---------- Intro splash (once per session) ---------- */
.fx-intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  display: grid;
  place-items: center;
  animation: fx-intro-out 0s linear 1.75s forwards
}

html.fx-no-intro .fx-intro {
  display: none
}

.fx-intro-panel {
  position: absolute;
  left: -5%;
  right: -5%;
  height: 56%;
  background: var(--ink);
  background-image: radial-gradient(circle, rgba(255, 214, 66, .22) 1px, transparent 1.6px);
  background-size: 12px 12px;
  border: 0 solid var(--red)
}

.fx-intro-panel.fx-top {
  top: 0;
  border-bottom-width: 6px;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
  animation: fx-panel-up .75s var(--snap) .95s forwards
}

.fx-intro-panel.fx-bottom {
  bottom: 0;
  border-top-width: 6px;
  clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%);
  animation: fx-panel-down .75s var(--snap) .95s forwards
}

.fx-intro-logo {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--yellow);
  font: 900 clamp(64px, 14vw, 170px)/.8 var(--display);
  letter-spacing: -.02em;
  text-shadow: 6px 6px 0 var(--red), 12px 12px 0 rgba(0, 0, 0, .5);
  animation: fx-slam .6s var(--pop) .1s both, fx-logo-out .45s var(--snap) .9s forwards
}

.fx-intro-logo small {
  display: block;
  margin-top: 16px;
  color: #fff;
  text-shadow: none;
  font: 500 clamp(10px, 1.2vw, 13px) var(--mono);
  letter-spacing: .32em;
  text-transform: uppercase;
  animation: fx-rise .5s var(--snap) .4s both
}

@keyframes fx-panel-up {
  to {
    translate: 0 -110%
  }
}

@keyframes fx-panel-down {
  to {
    translate: 0 110%
  }
}

@keyframes fx-logo-out {
  to {
    opacity: 0;
    scale: 1.6;
    filter: blur(8px)
  }
}

@keyframes fx-intro-out {
  to {
    visibility: hidden
  }
}

/* ---------- Scroll progress ---------- */
.fx-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 5px;
  z-index: 100;
  pointer-events: none;
  /* Own compositing layer so it stays painted during mobile momentum scrolling */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform
}

.fx-progress span {
  display: block;
  height: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  will-change: transform;
  background: repeating-linear-gradient(-45deg, var(--red) 0 10px, var(--yellow) 10px 20px);
  box-shadow: 0 2px 0 var(--ink)
}

/* ---------- Hero ---------- */
@keyframes fx-rise {
  from {
    opacity: 0;
    translate: 0 34px;
    filter: blur(6px)
  }

  to {
    opacity: 1;
    translate: 0 0;
    filter: none
  }
}

@keyframes fx-slam {
  0% {
    opacity: 0;
    scale: 2.4;
    rotate: -9deg
  }

  60% {
    opacity: 1;
    scale: .94;
    rotate: 2deg
  }

  100% {
    opacity: 1;
    scale: 1;
    rotate: 0deg
  }
}

.fx-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: inherit;
  background-size: cover;
  transform-origin: 60% 40%;
  translate: var(--gx, 0px) calc(var(--hero-py, 0px) + var(--gy, 0px));
  animation: fx-kenburns 2.4s var(--snap) calc(var(--intro) * .7) both
}

.fx-hero-bg:after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 360px at var(--lx, 70%) var(--ly, 40%), rgba(255, 214, 66, .28), transparent 70%);
  mix-blend-mode: soft-light;
  transition: background .2s
}

@keyframes fx-kenburns {
  from {
    scale: 1.22;
    filter: saturate(0) brightness(.4)
  }

  to {
    scale: 1.06;
    filter: none
  }
}

.hero-copy-block>* {
  animation: fx-rise .9s var(--snap) both
}

.hero-copy-block .kicker {
  animation-delay: calc(var(--intro) + .1s)
}

.hero-copy-block h1 {
  animation: fx-slam .8s var(--pop) calc(var(--intro) + .25s) both;
  transform-origin: 0 60%
}

.hero-copy-block .hero-copy {
  animation-delay: calc(var(--intro) + .55s)
}

.hero-copy-block .hero-actions {
  animation-delay: calc(var(--intro) + .7s)
}

.hero-copy-block .hero-note {
  animation-delay: calc(var(--intro) + .85s)
}

.hero h1 em {
  display: inline-block;
  background: linear-gradient(100deg, var(--yellow) 40%, #fff7c9 50%, var(--yellow) 60%) 0 0/250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fx-shimmer 4.5s ease-in-out calc(var(--intro) + 1.4s) infinite
}

@keyframes fx-shimmer {

  0%,
  60% {
    background-position: 100% 0
  }

  100% {
    background-position: -50% 0
  }
}

.hero-copy-block {
  will-change: transform, opacity
}

.fx-scroll-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 22px;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #fff;
  font: 500 9px var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .85;
  animation: fx-rise .8s var(--snap) calc(var(--intro) + 1.2s) both
}

.fx-scroll-cue span {
  width: 22px;
  height: 34px;
  border: 2px solid #fff;
  border-radius: 12px;
  position: relative
}

.fx-scroll-cue span:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 4px;
  height: 7px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--yellow);
  animation: fx-wheel 1.6s ease-in-out infinite
}

@keyframes fx-wheel {
  0% {
    opacity: 0;
    translate: 0 -2px
  }

  40% {
    opacity: 1
  }

  100% {
    opacity: 0;
    translate: 0 12px
  }
}

@media(max-width:720px) {
  .fx-scroll-cue {
    display: none
  }
}

/* ---------- Ticker reacts to scroll velocity ---------- */
.ticker {
  position: relative;
  z-index: 4;
  transform: rotate(-1.4deg) scaleX(1.04) skewX(var(--skew, 0deg));
  margin-block: -8px;
  box-shadow: 0 6px 0 var(--ink)
}

/* ---------- Giant scroll-linked type band ---------- */
.fx-bigtype {
  overflow: hidden;
  padding: 26px 0 10px;
  background: var(--paper);
  user-select: none
}

.fx-bigtype-row {
  white-space: nowrap;
  font: 900 clamp(60px, 11vw, 160px)/.92 var(--display);
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  overflow: hidden
}

.fx-bigtype-track {
  display: flex;
  width: max-content;
  animation: fx-marquee 38s linear infinite;
  will-change: transform
}

.fx-bigtype-row[data-dir="-1"] .fx-bigtype-track {
  animation-direction: reverse;
  animation-duration: 44s
}

/* motion.js drives the band itself once it's running (CSS animation is only the no-JS fallback) */
.fx-bigtype.fx-js .fx-bigtype-track {
  animation: none
}

.fx-bigtype-row span {
  display: inline-block;
  flex: none
}

@keyframes fx-marquee {
  from { transform: translate3d(0, 0, 0) }
  to { transform: translate3d(-50%, 0, 0) }
}

.fx-bigtype-row.fx-alt {
  color: var(--red);
  -webkit-text-stroke: 0;
  text-shadow: 4px 4px 0 var(--ink)
}

/* ---------- Generic scroll reveal + card tilt ---------- */
.fx-in,
.fx-tilt {
  transition: opacity .7s var(--snap) var(--d, 0s), translate .9s var(--pop) var(--d, 0s), scale .9s var(--pop) var(--d, 0s), rotate .9s var(--pop) var(--d, 0s), clip-path 1.1s var(--snap) var(--d, 0s), transform .35s var(--snap), box-shadow .3s
}

.fx-in {
  opacity: 0;
  translate: 0 48px;
  scale: .92
}

.fx-in.fx-card {
  rotate: var(--tilt-in, -4deg);
  translate: 0 90px
}

.fx-in.fx-wipe {
  clip-path: polygon(0 0, 0 0, -30% 100%, -30% 100%);
  rotate: 0deg;
  scale: 1.04;
  translate: 0 30px
}

.fx-in.fx-shown {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  rotate: 0deg;
  clip-path: polygon(0 0, 130% 0, 100% 100%, -30% 100%)
}

.fx-tilt {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)) !important;
  transform-style: preserve-3d
}

.fx-tilt.fx-tracking {
  transition: opacity .7s var(--snap) var(--d, 0s), translate .9s var(--pop) var(--d, 0s), scale .9s var(--pop) var(--d, 0s), rotate .9s var(--pop) var(--d, 0s), clip-path 1.1s var(--snap) var(--d, 0s), transform .08s linear, box-shadow .3s
}

.fx-tilt:hover {
  --lift: -8px
}

.product-card.fx-tilt:hover {
  box-shadow: 8px 8px 0 var(--red), 0 22px 40px rgba(0, 0, 0, .18)
}

.service-card.fx-tilt:hover,
.spot-card.fx-tilt:hover,
.category-card.fx-tilt:hover {
  box-shadow: 8px 8px 0 var(--yellow)
}

.fx-shine {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .55), transparent 42%),
    linear-gradient(115deg, transparent 20%, rgba(255, 120, 210, .35) 36%, rgba(255, 230, 110, .35) 46%, rgba(110, 255, 200, .35) 56%, rgba(120, 170, 255, .35) 66%, transparent 80%) var(--hx, 50%) 0/250% 100%;
  mix-blend-mode: overlay
}

.fx-tilt:hover .fx-shine {
  opacity: 1
}

/* Section titles: words punch in */
.fx-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 .04em .06em 0;
  margin-bottom: -.06em
}

.fx-word>span {
  display: inline-block;
  translate: 0 110%;
  rotate: 8deg;
  transition: translate .8s var(--pop), rotate .8s var(--pop);
  transition-delay: calc(var(--i) * 90ms + .1s)
}

.fx-shown .fx-word>span {
  translate: 0 0;
  rotate: 0deg
}

.section-head .section-kicker {
  display: inline-block;
  position: relative
}

.section-head .section-kicker:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 2px;
  width: 100%;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .8s var(--snap) .5s
}

.section-head.fx-shown .section-kicker:after {
  transform: scaleX(1)
}

/* Product hover: figure floats */
.product-card:hover .product-art img {
  animation: fx-float 1.8s ease-in-out infinite
}

@keyframes fx-float {

  0%,
  100% {
    translate: 0 0
  }

  50% {
    translate: 0 -7px
  }
}

.category-card .category-arrow {
  transition: background .3s, color .3s, rotate .45s var(--pop)
}

.category-card:hover .category-arrow {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--yellow);
  rotate: 45deg
}

.service-card img {
  animation: fx-float 4s ease-in-out infinite
}

/* Magnetic buttons */
.fx-magnet {
  translate: var(--tx, 0px) var(--ty, 0px);
  transition: transform .25s, background .25s, color .25s, translate .4s var(--pop)
}

/* ---------- Parallax images ---------- */
.spot-card img,
.about-visual img.collect-universe-image {
  scale: 1.16;
  translate: 0 var(--py, 0px)
}

/* ---------- Comic feature: animated comic-cover collage ---------- */
.comic-feature {
  isolation: isolate;
  min-height: clamp(460px, 48vw, 620px);
  display: flex;
  align-items: center
}

.comic-feature>.wrap {
  width: min(1220px, calc(100% - 48px))
}

.comic-feature:before {
  z-index: 1;
  pointer-events: none
}

.comic-inner {
  z-index: 2;
  padding: 80px 0
}

.comic-inner>div:first-child {
  text-shadow: 0 2px 14px rgba(120, 0, 0, .45)
}

.fx-collage {
  position: absolute;
  inset: -30% -15%;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  rotate: -9deg;
  opacity: 0;
  scale: 1.25;
  transition: opacity 1s var(--snap), scale 1.6s var(--snap)
}

.fx-collage.fx-shown {
  opacity: 1;
  scale: 1
}

.fx-collage:after {
  content: "";
  position: absolute;
  inset: -20%;
  rotate: 9deg;
  background: linear-gradient(90deg, rgba(237, 52, 41, .97) 0%, rgba(237, 52, 41, .9) 34%, rgba(237, 52, 41, .5) 62%, rgba(237, 52, 41, .28) 100%);
  pointer-events: none
}

.fx-strip {
  translate: var(--sx, 0px) 0;
  will-change: translate
}

.fx-strip-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: fx-strip 70s linear infinite
}

.fx-strip:nth-child(even) .fx-strip-track {
  animation-direction: reverse;
  animation-duration: 85s
}

@keyframes fx-strip {
  to {
    transform: translateX(-50%)
  }
}

.fx-panel {
  flex: none;
  width: clamp(190px, 20vw, 290px);
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #fff;
  border: 5px solid #fff;
  outline: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  rotate: var(--pr, 0deg)
}

.fx-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.05;
  filter: saturate(1.15) contrast(1.05)
}

.fx-price-wrap {
  justify-self: end;
  position: relative;
  display: grid;
  place-items: center;
  padding: 30px
}

.fx-price-wrap .comic-price {
  justify-self: auto;
  position: relative;
  z-index: 1;
  padding: 36px 46px;
  min-width: 300px;
  animation: fx-wiggle 3.2s ease-in-out infinite
}

.fx-price-wrap .comic-price strong {
  font-size: clamp(64px, 7.5vw, 100px)
}

.fx-price-wrap .comic-price span {
  margin-top: 16px;
  font-size: 13px
}

.fx-burst {
  position: absolute;
  inset: -50px;
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 66, .7) 0 6deg, transparent 6deg 18deg);
  mask-image: radial-gradient(circle, #000 25%, transparent 68%);
  animation: fx-spin 26s linear infinite
}

@keyframes fx-spin {
  to {
    rotate: 360deg
  }
}

@keyframes fx-wiggle {

  0%,
  100% {
    rotate: 0deg;
    scale: 1
  }

  50% {
    rotate: -5deg;
    scale: 1.05
  }
}

@media(max-width:720px) {
  .fx-in.fx-wipe {
    clip-path: none
  }

  .spot-card {
    min-height: 0
  }

  .fx-collage:after {
    background: linear-gradient(180deg, rgba(237, 52, 41, .93), rgba(237, 52, 41, .8))
  }

  .comic-inner {
    padding: 56px 0
  }

  .comic-feature>.wrap {
    width: min(100% - 32px, 560px)
  }

  .comic-inner {
    justify-items: center;
    text-align: center;
    gap: 34px
  }

  .comic-inner>div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%
  }

  .comic-feature p {
    margin-inline: auto
  }

  .fx-price-wrap {
    justify-self: center;
    width: 100%;
    max-width: 340px;
    padding: 26px 16px
  }

  .fx-price-wrap .comic-price {
    margin: 0 auto;
    width: 100%;
    min-width: 0;
    padding: 30px 20px
  }

  .fx-price-wrap .comic-price strong {
    font-size: clamp(64px, 20vw, 88px)
  }

  .fx-price-wrap .comic-price span {
    font-size: 12px
  }

  .fx-burst {
    inset: -30px
  }
}

/* ---------- About label wobble ---------- */
.about-visual:after {
  animation: fx-wiggle 4s ease-in-out infinite;
  transform-origin: 0 0
}

/* ---------- Cursor follower (desktop) ---------- */
.fx-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 150;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid var(--red);
  border-radius: 50%;
  pointer-events: none;
  display: grid;
  place-items: center;
  color: var(--ink);
  font: 800 0px/1 var(--display);
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: 0;
  transition: width .35s var(--pop), height .35s var(--pop), margin .35s var(--pop), background .3s, border-color .3s, font-size .3s, opacity .3s;
  mix-blend-mode: normal
}

.fx-cursor.fx-on {
  opacity: 1
}

.fx-cursor.fx-big {
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  background: var(--yellow);
  border-color: var(--ink);
  font-size: 17px;
  box-shadow: 4px 4px 0 var(--red)
}

/* ---------- Click: halftone shockwave ---------- */
.fx-ripple {
  position: fixed;
  z-index: 140;
  width: 140px;
  height: 140px;
  margin: -70px 0 0 -70px;
  pointer-events: none;
  border-radius: 50%;
  background:
    repeating-conic-gradient(var(--yellow) 0 4deg, transparent 4deg 22deg);
  mask-image: radial-gradient(circle, transparent 30%, #000 32%, #000 48%, transparent 70%);
  animation: fx-ripple .6s var(--snap) forwards
}

@keyframes fx-ripple {
  from {
    scale: .2;
    opacity: 1;
    rotate: 0deg
  }

  to {
    scale: 1.4;
    opacity: 0;
    rotate: 25deg
  }
}

/* ---------- Reduced motion: keep everything static and visible ---------- */
@media(prefers-reduced-motion:reduce) {

  .fx-word>span,
  .fx-collage {
    opacity: 1 !important
  }

  .fx-in,
  .fx-in.fx-card,
  .fx-in.fx-wipe,
  .fx-word>span,
  .fx-collage {
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    clip-path: none !important
  }

  .fx-collage {
    rotate: -9deg !important
  }

  .fx-tilt {
    transform: none !important
  }

  .ticker {
    transform: rotate(-1.4deg) scaleX(1.04)
  }

  .fx-intro,
  .fx-ripple,
  .fx-cursor,
  .fx-scroll-cue,
  .fx-burst {
    display: none
  }

  .fx-hero-bg,
  .hero-copy-block>*,
  .hero-copy-block h1 {
    animation: none
  }

  .fx-bigtype-track {
    animation-duration: 90s !important
  }

  .fx-bigtype-row[data-dir="-1"] .fx-bigtype-track {
    animation-duration: 100s !important
  }

  .spot-card img,
  .about-visual img.collect-universe-image {
    scale: 1;
    translate: none
  }
}

/* ---------- Hero flying superhero ---------- */
.hero-flyer {
  position: absolute;
  z-index: 2;
  /* sits near the right edge (nudged slightly inward) so the centre logo banner in the artwork stays visible */
  right: 4.5vw;
  top: 50%;
  width: clamp(250px, 26vw, 430px);
  aspect-ratio: 560 / 475;
  margin-top: calc(clamp(250px, 26vw, 430px) * -.424);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: fx-flyer-in 1.1s var(--snap) calc(var(--intro) + .45s) both
}

/* comic starburst that pops in behind the hero on hover */
.hero-flyer:before {
  content: "";
  position: absolute;
  inset: -6% -4%;
  z-index: -1;
  background: var(--yellow);
  clip-path: polygon(50% 0%, 60% 30%, 82% 12%, 76% 40%, 100% 50%, 76% 60%, 87% 88%, 60% 73%, 50% 100%, 40% 73%, 13% 88%, 24% 60%, 0 50%, 24% 40%, 18% 12%, 40% 30%);
  filter: drop-shadow(8px 8px 0 var(--red));
  opacity: 0;
  scale: .3;
  rotate: -20deg;
  transition: opacity .25s, scale .45s var(--pop), rotate .45s var(--pop)
}

.hero-flyer-float {
  width: 100%;
  height: 100%;
  animation: fx-flyer-hover 4.6s ease-in-out infinite;
  will-change: transform
}

.hero-flyer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 22px 18px rgba(0, 0, 0, .5));
  transition: filter .3s
}

/* Hover (or tap on touch screens): switches from gentle floating to a power-up dash */
.hero-flyer:hover:before,
.hero-flyer.is-powered:before {
  opacity: 1;
  scale: 1;
  rotate: 0deg;
  animation: fx-flyer-burst 1.2s linear .45s infinite
}

.hero-flyer:hover .hero-flyer-float,
.hero-flyer.is-powered .hero-flyer-float {
  animation: fx-flyer-dash .9s var(--pop) both, fx-flyer-power .5s ease-in-out .9s infinite alternate
}

.hero-flyer:hover img,
.hero-flyer.is-powered img {
  filter: drop-shadow(0 0 18px rgba(255, 214, 66, .75)) drop-shadow(0 26px 20px rgba(0, 0, 0, .55))
}

@keyframes fx-flyer-in {
  from {
    opacity: 0;
    translate: 60vw -30vh;
    scale: .35;
    rotate: 18deg
  }

  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    rotate: 0deg
  }
}

@keyframes fx-flyer-hover {

  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-2deg)
  }

  25% {
    transform: translate3d(-6px, -14px, 0) rotate(0deg)
  }

  50% {
    transform: translate3d(0, -24px, 0) rotate(2deg)
  }

  75% {
    transform: translate3d(6px, -10px, 0) rotate(0deg)
  }
}

@keyframes fx-flyer-dash {
  0% {
    transform: translate3d(0, -12px, 0) rotate(0deg) scale(1)
  }

  30% {
    transform: translate3d(14%, -4%, 0) rotate(8deg) scale(.9)
  }

  70% {
    transform: translate3d(-9%, -6%, 0) rotate(-7deg) scale(1.16)
  }

  100% {
    transform: translate3d(-5%, -4%, 0) rotate(-4deg) scale(1.1)
  }
}

@keyframes fx-flyer-power {
  from {
    transform: translate3d(-5%, -4%, 0) rotate(-4deg) scale(1.1)
  }

  to {
    transform: translate3d(-6.5%, -5.5%, 0) rotate(-5.5deg) scale(1.13)
  }
}

@keyframes fx-flyer-burst {
  to {
    rotate: 360deg
  }
}

/* Tablets: smaller hero tucked into the bottom-right so it never covers the copy */
@media(max-width:1099px) {
  .hero-flyer {
    top: auto;
    bottom: 22px;
    right: 6vw;
    width: 160px;
    margin-top: 0
  }
}

/* Phones: a small mascot in the bottom-right corner; tap to power up */
@media(max-width:720px) {
  .hero-flyer {
    bottom: 12px;
    right: 20px;
    width: 96px
  }

  .hero-flyer-float {
    animation-duration: 3.8s
  }
}

@media(prefers-reduced-motion:reduce) {

  .hero-flyer,
  .hero-flyer:hover .hero-flyer-float,
  .hero-flyer.is-powered .hero-flyer-float,
  .hero-flyer:hover:before,
  .hero-flyer.is-powered:before {
    animation: none
  }
}

/* =====================================================================
   Ambient "living page" layer — runs on desktop and phones
   ===================================================================== */

/* ---------- Mascot follows the mouse / phone tilt a little ---------- */
.hero-flyer picture {
  display: block;
  width: 100%;
  height: 100%;
  translate: var(--gx, 0px) var(--gy, 0px)
}

/* ---------- Hero sparkles drifting up through the artwork ---------- */
.fx-sparks {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none
}

.fx-sparks i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 14px;
  height: 14px;
  scale: var(--s, 1);
  background: var(--yellow);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 0 6px rgba(255, 214, 66, .9));
  opacity: 0;
  animation: fx-spark var(--t, 8s) ease-in-out var(--dl, 0s) infinite;
  will-change: transform, opacity
}

.fx-sparks i.fx-red {
  background: #fff
}

@keyframes fx-spark {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(.4)
  }

  20% {
    opacity: .95;
    transform: translate3d(8px, -30px, 0) rotate(45deg) scale(1)
  }

  50% {
    opacity: .35
  }

  65% {
    opacity: .9
  }

  100% {
    opacity: 0;
    transform: translate3d(-10px, -150px, 0) rotate(180deg) scale(.3)
  }
}

/* ---------- Products float in place while on screen ---------- */
.product-card.fx-live .product-art img {
  animation: fx-bob 4.4s ease-in-out var(--bob-d, 0s) infinite
}

.product-card.fx-live:hover .product-art img {
  animation: fx-float 1.8s ease-in-out infinite
}

@keyframes fx-bob {

  0%,
  100% {
    translate: 0 2px;
    rotate: -.8deg
  }

  50% {
    translate: 0 -6px;
    rotate: .8deg
  }
}

/* soft spotlight sweeping across the dark product stage */
.product-art:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 120%, rgba(255, 214, 66, .22), transparent 60%);
  opacity: .6;
  transition: opacity .4s
}

.product-card:hover .product-art:after,
.product-card.fx-focus .product-art:after {
  opacity: 1
}

/* ---------- Buttons: light sweep on hover, idle sweep on the main CTA ---------- */
.button,
.nav-cta {
  position: relative
}

.button:after,
.nav-cta:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  translate: -130% 0;
  transition: translate .75s var(--snap)
}

.button:hover:after,
.nav-cta:hover:after {
  translate: 130% 0
}

.hero-actions .button:first-child:after,
.nav-cta:after {
  animation: fx-sweep 4.2s ease-in-out calc(var(--intro) + 2s) infinite
}

@keyframes fx-sweep {

  0%,
  70% {
    translate: -130% 0
  }

  100% {
    translate: 130% 0
  }
}

/* ---------- Nav links: comic underline ---------- */
.nav-links a {
  position: relative
}

.nav-links a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .4s var(--snap)
}

.nav-links a:hover:after {
  transform: scaleX(1);
  transform-origin: 0 50%
}

/* ---------- Filters pop when picked ---------- */
.filter {
  transition: background .2s, color .2s, border-color .2s, transform .3s var(--pop)
}

.filter:hover {
  transform: translateY(-2px)
}

.filter.active {
  animation: fx-pop .45s var(--pop)
}

@keyframes fx-pop {
  0% {
    scale: .85
  }

  60% {
    scale: 1.08
  }

  100% {
    scale: 1
  }
}

.search {
  transition: border-color .3s, box-shadow .3s, width .45s var(--snap)
}

/* ---------- Category / spotlight images breathe slowly ---------- */
.category-card img {
  animation: fx-breathe 9s ease-in-out infinite alternate
}

.category-card:nth-child(2) img { animation-delay: -2.2s }
.category-card:nth-child(3) img { animation-delay: -4.4s }
.category-card:nth-child(4) img { animation-delay: -6.6s }

@keyframes fx-breathe {
  from {
    scale: 1
  }

  to {
    scale: 1.06
  }
}

/* ---------- Touch screens: cards light up as they cross the middle of the screen ---------- */
.fx-shine-touch {
  background: linear-gradient(115deg, transparent 20%, rgba(255, 120, 210, .3) 36%, rgba(255, 230, 110, .35) 46%, rgba(110, 255, 200, .3) 56%, rgba(120, 170, 255, .3) 66%, transparent 80%) 100% 0/250% 100%
}

.fx-focus .fx-shine-touch {
  opacity: 1;
  animation: fx-holo 2.8s ease-in-out infinite
}

@keyframes fx-holo {
  from {
    background-position: 110% 0
  }

  to {
    background-position: -60% 0
  }
}

.product-card.fx-focus {
  transform: translateY(-5px);
  box-shadow: 6px 6px 0 var(--red), 0 18px 34px rgba(0, 0, 0, .16)
}

.product-card.fx-focus .product-art img {
  transform: scale(1.04)
}

.category-card.fx-focus {
  transform: translateY(-6px);
  box-shadow: 7px 7px 0 var(--red)
}

.category-card.fx-focus .category-arrow {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--yellow);
  rotate: 45deg
}

.spot-card.fx-focus img {
  transform: scale(1.05)
}

.spot-card.fx-focus,
.service-card.fx-focus {
  box-shadow: 7px 7px 0 var(--yellow)
}

@media(hover:none) {

  /* the cursor spotlight on the hero roams by itself on phones */
  .fx-hero-bg:after {
    inset: -30%;
    background: radial-gradient(circle 240px at 50% 50%, rgba(255, 214, 66, .34), transparent 70%);
    animation: fx-roam 11s ease-in-out infinite alternate
  }

  /* press feedback */
  .button:active,
  .nav-cta:active,
  .filter:active,
  .menu-toggle:active {
    transform: scale(.94);
    transition-duration: .08s
  }

  .product-card:active,
  .category-card:active,
  .spot-card:active {
    transform: scale(.97);
    transition-duration: .1s
  }
}

@keyframes fx-roam {
  0% {
    translate: -14% -10%
  }

  50% {
    translate: 12% 6%
  }

  100% {
    translate: -4% 14%
  }
}

@media(prefers-reduced-motion:reduce) {

  .fx-sparks,
  .fx-shine-touch {
    display: none
  }

  .fx-hero-bg:after,
  .category-card img,
  .filter.active,
  .hero-actions .button:first-child:after,
  .nav-cta:after {
    animation: none
  }

  .product-card.fx-live .product-art img {
    animation-duration: 8s
  }
}