/* G-ROLLZ version 3: the motion layer. Builds on grollz.css and onepage.css.
   Iris transitions between worlds, letter-by-letter headlines, 3D packs that follow the
   cursor, light sweeps cut to the product shape, and one particle canvas per world. */

:root { --spring: cubic-bezier(.16, 1.24, .3, 1); --iris: cubic-bezier(.77, 0, .18, 1); }

/* ---------- World transition: the next world opens as a circle over the last one ---------- */
.v3 .world.is-leaving { display: block; visibility: visible; opacity: 1; z-index: 1; }
.v3 .reel.is-wiping .world.is-leaving { animation: v3-leave 1s var(--iris) both; }
.v3 .reel.is-wiping .world.is-active { z-index: 3; animation: v3-iris 1s var(--iris) .06s both; }
.v3 .reel__wipe { z-index: 2; clip-path: circle(0% at var(--ix, 72%) var(--iy, 50%)); }
.v3 .reel.is-wiping .reel__wipe { visibility: visible; animation: v3-ring 1s var(--iris) both; }
@keyframes v3-iris { from { clip-path: circle(0% at var(--ix, 72%) var(--iy, 50%)); } to { clip-path: circle(150% at var(--ix, 72%) var(--iy, 50%)); } }
@keyframes v3-ring { 0% { clip-path: circle(0% at var(--ix, 72%) var(--iy, 50%)); } 100% { clip-path: circle(150% at var(--ix, 72%) var(--iy, 50%)); } }
@keyframes v3-leave { to { transform: scale(1.08); filter: brightness(.4) saturate(.7); } }

/* ---------- Headlines: letters rise into place, numbers and chips follow ---------- */
.v3 .world__line .wd, .v3 .world__line .nw { display: inline-block; white-space: nowrap; }
.v3 .world__line .ch { display: inline-block; will-change: transform; }
.js .v3 .world.is-entering .world__line { animation: none; }
.js .v3 .world.is-entering .world__line .ch { animation: v3-ch .9s var(--spring) both; animation-delay: calc(.42s + var(--ci, 0) * 26ms); }
@keyframes v3-ch {
  0% { transform: translate3d(0, .7em, 0) rotate(8deg) scale(.6); opacity: 0; filter: blur(10px); }
  60% { opacity: 1; filter: blur(0); }
  100% { transform: none; opacity: 1; filter: none; }
}
.v3 .world__num { display: flex; align-items: center; }
.js .v3 .world.is-entering .world__num { animation: v3-num .7s var(--ease-out) .3s both; }
@keyframes v3-num { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.world__chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.world__chips li {
  padding: 7px 12px 6px; border-radius: 999px; font: 600 11.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase;
  color: currentColor; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.world--ape .world__chips li { background: var(--gr-black); color: var(--gr-white); box-shadow: none; }
.world--gold .world__chips li { color: var(--gold-hi); box-shadow: inset 0 0 0 1px rgba(232, 205, 130, .5); background: rgba(232, 205, 130, .08); }
.js .v3 .world.is-entering .world__chips li { animation: v3-chip .6s var(--spring) both; }
.js .v3 .world.is-entering .world__chips li:nth-child(1) { animation-delay: 1.05s; }
.js .v3 .world.is-entering .world__chips li:nth-child(2) { animation-delay: 1.13s; }
.js .v3 .world.is-entering .world__chips li:nth-child(3) { animation-delay: 1.21s; }
.js .v3 .world.is-entering .world__chips li:nth-child(4) { animation-delay: 1.29s; }
@keyframes v3-chip { from { transform: translate3d(0, 14px, 0) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Giant outline marquee behind the products ---------- */
.mq { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-62%) rotate(-6deg); overflow: hidden; pointer-events: none; opacity: .0; transition: opacity 1.2s ease .6s; }
.world.is-active .mq { opacity: 1; }
.mq__in { display: flex; width: max-content; animation: v3-mq 38s linear infinite; }
.mq__in span {
  font: 400 clamp(110px, 17vw, 260px)/1 var(--f-display); text-transform: uppercase; white-space: nowrap; padding-right: .3em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .26);
}
.world--ape .mq__in span { -webkit-text-stroke-color: rgba(19, 19, 19, .2); }
.world--gold .mq__in span { -webkit-text-stroke-color: rgba(232, 205, 130, .2); }
@keyframes v3-mq { to { transform: translate3d(-50%, 0, 0); } }
.reel.is-paused .mq__in { animation-play-state: paused; }

/* ---------- Particle canvas: above the ground, below the products ---------- */
.fx { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Packs: real 3D tilt with the cursor, light sweep cut to the product shape ---------- */
.v3 .big { perspective: 1100px; }
.v3 .big .pack { transform: rotateY(calc(var(--px, 0) * 12deg)) rotateX(calc(var(--py, 0) * -9deg)); transition: transform .7s var(--ease-out); }
.v3 .row { perspective: 900px; }
.v3 .row .pack { transform: rotateY(calc(var(--px, 0) * -10deg)); transition: transform .8s var(--ease-out); }
.v3 .world__stage .pack::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, .7) 48%, rgba(255, 255, 255, .08) 54%, rgba(255, 255, 255, 0) 62%);
  background-size: 300% 100%; background-position: 140% 0; mix-blend-mode: overlay;
  animation: v3-shine 7s ease-in-out 1.2s infinite;
}
.v3 .row .pack::before { -webkit-mask-position: center bottom; mask-position: center bottom; animation-delay: 1.6s; }
@keyframes v3-shine { 0% { background-position: 140% 0; } 22%, 100% { background-position: -40% 0; } }
.reel.is-paused .world__stage .pack::before { animation-play-state: paused; }

/* Product entrances (replace the simple rise). */
.js .v3 .world.is-entering .big { animation: v3-big 1.25s var(--spring) .28s both; }
@keyframes v3-big {
  0% { transform: translate3d(14%, 22%, 0) rotate(-14deg) scale(.55); opacity: 0; filter: blur(14px); }
  55% { opacity: 1; filter: blur(0); }
  100% { transform: none; opacity: 1; filter: none; }
}
.js .v3 .world.is-entering .row li { animation: v3-deal .95s var(--spring) both; animation-delay: calc(.62s + var(--i, 0) * 110ms); }
@keyframes v3-deal {
  0% { transform: translate3d(40vw, 18%, 0) rotate(28deg); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* ---------- 02 Cheech & Chong: the swirl keeps moving, smoke rises, the tray goes holographic ---------- */
/* The swirl is drawn once and then only moved and faded (transform + opacity), which phones run
   smoothly. It used to animate a CSS filter (hue-rotate, blur on entry) on a layer 1.6x the screen,
   which repainted the whole layer every frame and made this slide stutter. The colours below are the
   old filter results baked in: hue 0 + saturate(1.1), and hue-rotate(40deg) + saturate(1.25). */
.swirl__hue { display: none; }
.v3 .swirl::before, .v3 .swirl__hue { filter: none; will-change: transform; backface-visibility: hidden; animation: v3-swirl 26s ease-in-out infinite alternate; }
.v3 .swirl::before {
  background:
    radial-gradient(closest-side at 28% 36%, rgba(249, 231, 194, .75), rgba(249, 231, 194, 0) 70%),
    repeating-conic-gradient(from 8deg at 56% 46%, #CF173F 0deg, #EEA232 12.6deg, #F9E7C2 21.6deg, #80B369 32.4deg, #29818D 45deg, #6B2E45 57.6deg, #CF173F 72deg);
}
.v3 .swirl__hue {
  display: block; position: absolute; inset: -30%; opacity: 0;
  background:
    radial-gradient(closest-side at 28% 36%, rgba(218, 241, 186, .75), rgba(218, 241, 186, 0) 70%),
    repeating-conic-gradient(from 8deg at 56% 46%, #BA2700 0deg, #8EC210 12.6deg, #DAF1BA 21.6deg, #5ABB8A 32.4deg, #4873BC 45deg, #6B3121 57.6deg, #BA2700 72deg);
  animation: v3-swirl 26s ease-in-out infinite alternate, v3-hue 26s ease-in-out infinite alternate;
}
@keyframes v3-swirl { 0% { transform: scale(1.06) rotate(0deg); } 100% { transform: scale(1.18) rotate(7deg); } }
@keyframes v3-hue { from { opacity: 0; } to { opacity: 1; } }
.js .v3 .world--cc.is-entering .swirl::before { animation: v3-swirl-in 1.6s var(--ease-out) both, v3-swirl-fade 1.6s var(--ease-out) both, v3-swirl 26s ease-in-out 1.6s infinite alternate; }
.js .v3 .world--cc.is-entering .swirl__hue { animation: v3-swirl-in 1.6s var(--ease-out) both, v3-swirl 26s ease-in-out 1.6s infinite alternate, v3-hue 26s ease-in-out 1.6s infinite alternate; }
@keyframes v3-swirl-in { from { transform: rotate(-24deg) scale(1.6); } to { transform: scale(1.06); } }
@keyframes v3-swirl-fade { from { opacity: .3; } to { opacity: 1; } }
.world--cc .big .pack::after { display: none; }
.v3 .world--cc .big .pack::before {
  background: linear-gradient(calc(110deg + var(--px, 0) * 50deg), rgba(255, 0, 128, .0) 20%, rgba(255, 60, 160, .45) 34%, rgba(255, 220, 60, .45) 44%, rgba(60, 255, 170, .45) 54%, rgba(60, 140, 255, .45) 64%, rgba(160, 60, 255, 0) 78%);
  background-size: 260% 100%; mix-blend-mode: color-dodge; opacity: .55;
  animation: v3-holo 6s ease-in-out infinite alternate;
}
@keyframes v3-holo { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- 03 Ape Cones: packs drop with a squash, the burst bounces, dots drift ---------- */
.v3 .acid::before { animation: v3-dots 14s linear infinite; }
@keyframes v3-dots { to { background-position: 150px -150px; } }
.js .v3 .world--ape.is-entering .big { animation: v3-drop 1.1s cubic-bezier(.3, .7, .3, 1) .3s both; transform-origin: 50% 100%; }
@keyframes v3-drop {
  0% { transform: translate3d(0, -120%, 0) scaleY(1.12); opacity: 0; }
  45% { transform: translate3d(0, 0, 0) scale(1.1, .86); opacity: 1; }
  62% { transform: translate3d(0, -7%, 0) scale(.96, 1.05); }
  80% { transform: translate3d(0, 0, 0) scale(1.03, .97); }
  100% { transform: none; opacity: 1; }
}
.js .v3 .world--ape.is-entering .row li { animation: v3-pop .8s var(--spring) both; animation-delay: calc(.85s + var(--i, 0) * 120ms); }
@keyframes v3-pop { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.v3 .world--ape .burst { animation: v3-wobble 2.4s ease-in-out infinite; transform-origin: 50% 55%; }
.js .v3 .world--ape.is-entering .burst { animation: v3-burst .9s var(--spring) .35s both, v3-wobble 2.4s ease-in-out 1.25s infinite; }
@keyframes v3-burst { 0% { transform: scale(0) rotate(-120deg); } 100% { transform: none; } }
@keyframes v3-wobble { 0%, 100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(4deg) scale(1.06); } }

/* ---------- Accessories: a product turntable. The Mystikal Maze grinder spins like a record while
   trays, grinders, G-Tubes and gift boxes ride a ring around it under a sweeping club light. ---------- */
.acc { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(75% 85% at 72% 46%, #145a2c 0%, #0a2a16 38%, #040d07 72%, #020503 100%); }
.acc__sweep { position: absolute; left: 72%; top: -30%; width: 160vmax; height: 160vmax; margin-left: -80vmax; border-radius: 50%; mix-blend-mode: screen; opacity: .55;
  background: conic-gradient(from 0deg, transparent 0 8deg, rgba(160, 255, 120, .38) 12deg, transparent 18deg 70deg, rgba(255, 255, 255, .22) 76deg, transparent 82deg 150deg, rgba(120, 255, 200, .3) 156deg, transparent 163deg 230deg, rgba(255, 120, 220, .26) 236deg, transparent 242deg 300deg, rgba(160, 255, 120, .3) 306deg, transparent 312deg);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 70%); mask: radial-gradient(closest-side, #000 20%, transparent 70%); animation: acc-sweep 22s linear infinite; }
@keyframes acc-sweep { to { transform: rotate(360deg); } }
.acc__bloom { position: absolute; left: 72%; top: 44%; width: 62vmin; height: 62vmin; margin: -31vmin 0 0 -31vmin; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 255, 79, .55), rgba(124, 255, 79, .12) 55%, transparent); filter: blur(8px); animation: acc-pulse 3.2s ease-in-out infinite; }
@keyframes acc-pulse { 50% { transform: scale(1.12); opacity: .75; } }
.acc__deck { position: absolute; left: 72%; top: 71%; width: 74vmin; height: 15vmin; margin-left: -37vmin; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(124, 255, 79, .32), rgba(124, 255, 79, .06) 70%, transparent), radial-gradient(closest-side, transparent 88%, rgba(170, 255, 140, .9) 92%, transparent 96%);
  box-shadow: 0 0 60px 10px rgba(124, 255, 79, .18); }
.reel.is-paused .acc__sweep, .reel.is-paused .acc__bloom, .world--trays:not(.is-active) .acc__sweep, .world--trays:not(.is-active) .acc__bloom { animation-play-state: paused; }
.v3 .world--trays .mq__in span { -webkit-text-stroke-color: rgba(170, 255, 140, .22); }
.v3 .world--trays .world__scrim { background: linear-gradient(to top, rgba(2, 8, 4, .75), rgba(2, 8, 4, 0) 42%), linear-gradient(to right, rgba(2, 8, 4, .7), rgba(2, 8, 4, 0) 52%); }
.v3 .world--trays .world__stage { left: 44%; right: 0; }

.spin { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 30%; transform-style: preserve-3d; --R: min(20vw, 33vh); --ih: min(17vh, 11vw); --hero: min(33vh, 20vw); --dur: 30s;
  transform: translate3d(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 8px), 0); transition: transform .6s var(--ease-out); }
.spin__ring { position: absolute; left: 50%; top: 56%; width: 0; height: 0; margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; animation: acc-ring var(--dur) linear infinite; }
@keyframes acc-ring { from { transform: rotateX(-14deg) rotateY(0deg); } to { transform: rotateX(-14deg) rotateY(-360deg); } }
.spin__item { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: rotateY(var(--a)) translateZ(var(--R)); }
.spin__face { position: absolute; left: 0; top: 0; height: var(--ih); width: calc(var(--ih) * 1.05); margin: calc(var(--ih) * -.92) 0 0 calc(var(--ih) * -.525); display: grid; place-items: end center; backface-visibility: hidden; animation: acc-face var(--dur) linear infinite; }
@keyframes acc-face { from { transform: rotateY(calc(-1 * var(--a))) rotateX(14deg); } to { transform: rotateY(calc(360deg - var(--a))) rotateX(14deg); } }
.spin__face img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .55)); -webkit-box-reflect: below 2px linear-gradient(transparent 70%, rgba(255, 255, 255, .16)); }
.spin__hero { position: absolute; left: 50%; top: 45%; width: var(--hero); height: var(--hero); margin: calc(var(--hero) / -2) 0 0 calc(var(--hero) / -2); transform: translateZ(0); transform-style: preserve-3d; }
.spin__hero::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(190, 255, 120, .55), rgba(124, 255, 79, .22) 45%, rgba(45, 225, 194, .08) 70%, transparent); animation: acc-pulse 3.2s ease-in-out infinite; }
.spin__hero::after { content: ""; position: absolute; inset: -5%; border-radius: 50%; border: 2px dashed rgba(200, 255, 160, .55); animation: acc-spin 9s linear infinite reverse; }
.spin__disc { position: absolute; inset: 0; border-radius: 50%; animation: acc-spin 14s linear infinite; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .6)); }
.spin__disc img { display: block; width: 100%; height: 100%; object-fit: contain; }
@keyframes acc-spin { to { transform: rotate(360deg); } }
.reel.is-paused .spin__ring, .reel.is-paused .spin__face, .reel.is-paused .spin__disc, .reel.is-paused .spin__hero::before, .reel.is-paused .spin__hero::after,
.world--trays:not(.is-active) .spin__ring, .world--trays:not(.is-active) .spin__face, .world--trays:not(.is-active) .spin__disc, .world--trays:not(.is-active) .spin__hero::before, .world--trays:not(.is-active) .spin__hero::after { animation-play-state: paused; }
.js .v3 .world--trays.is-entering .spin__hero { animation: acc-drop 1.1s var(--spring) .2s both; }
.js .v3 .world--trays.is-entering .spin__item { animation: acc-rise .9s var(--ease-out) both; }
@keyframes acc-drop { from { transform: translateY(-60%) scale(.3) rotate(-180deg); } }
@keyframes acc-rise { from { transform: rotateY(var(--a)) translateZ(0) scale(.2); } }
@keyframes v3-card {
  0% { transform: translate3d(30%, -10%, 0) rotateY(-110deg) rotateZ(18deg) scale(.7); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}

/* ---------- 05 24K Gold: full colour, sharp edges, a spotlight with turning rays and falling flakes ---------- */
.v3 .goldg { background: radial-gradient(60% 75% at 72% 48%, #3a2a10 0%, #17110a 46%, #070605 100%); }
.v3 .goldg::before { display: none; }
.goldg__rays {
  position: absolute; left: 72%; top: 46%; width: 170vmax; height: 170vmax; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 214, 120, .12) 0deg 4deg, rgba(255, 214, 120, 0) 4deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .55) 22%, transparent 55%); mask: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .55) 22%, transparent 55%);
  animation: v3-rays 60s linear infinite;
}
@keyframes v3-rays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.goldg__bloom {
  position: absolute; left: 72%; top: 48%; width: 62vmin; height: 62vmin; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 200, 90, .42), rgba(255, 170, 60, .12) 55%, rgba(255, 170, 60, 0)); filter: blur(6px);
  animation: v3-bloom 5s ease-in-out infinite alternate;
}
@keyframes v3-bloom { from { opacity: .75; transform: translate(-50%, -50%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
.v3 .world--gold .world__stage { mix-blend-mode: normal; }
.v3 .world--gold .big .pack img, .v3 .world--gold .row .pack img {
  -webkit-mask-image: none; mask-image: none;
  filter: brightness(1.12) contrast(1.06) saturate(1.2) drop-shadow(0 0 28px rgba(255, 196, 90, .28)) drop-shadow(0 26px 30px rgba(0, 0, 0, .55));
}
.v3 .world--gold .big .pack::after { display: block; background: radial-gradient(closest-side, rgba(255, 200, 100, .35), rgba(255, 200, 100, 0)); }
.v3 .world--gold .big { left: 4%; right: 30%; top: 0; bottom: 6%; }
.v3 .world--gold .row { right: 2%; bottom: 6%; }
.v3 .world--gold .row li.r-lg { height: clamp(170px, min(36vh, 22vw), 340px); }
.v3 .world--gold .pack::before { background: linear-gradient(105deg, rgba(255, 240, 200, 0) 38%, rgba(255, 246, 220, .9) 48%, rgba(255, 240, 200, 0) 58%); background-size: 300% 100%; mix-blend-mode: soft-light; animation-duration: 5s; }
.js .v3 .world--gold.is-entering .big { animation: v3-rise 1.6s cubic-bezier(.2, .9, .2, 1) .25s both; }
@keyframes v3-rise { 0% { transform: translate3d(0, 14%, 0) scale(.9); opacity: 0; filter: brightness(0); } 100% { transform: none; opacity: 1; filter: none; } }
.js .v3 .world--gold.is-entering .row li { animation: v3-roll 1.2s var(--spring) .9s both; }
@keyframes v3-roll { 0% { transform: translate3d(45vw, 0, 0) rotate(40deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.world__line--gold { color: #F4D88A !important; text-shadow: 0 0 34px rgba(255, 196, 90, .35), 0 2px 0 rgba(120, 80, 20, .35); }

/* ---------- 06 Diablos: heat glow pulses under the embers ---------- */
.v3 .world--diablos .world__ground::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 55%; pointer-events: none;
  background: radial-gradient(80% 100% at 55% 100%, rgba(255, 90, 20, .3), rgba(255, 90, 20, 0) 70%); mix-blend-mode: screen;
  animation: v3-heat 3.2s ease-in-out infinite alternate;
}
@keyframes v3-heat { from { opacity: .5; } to { opacity: 1; } }

/* ---------- Intro: kaleidoscope trip through the packs, then an eye opens onto the site ---------- */
.intro { position: fixed; inset: 0; z-index: 110; pointer-events: none; }
.intro::before { content: ""; position: absolute; inset: 0; background: #070605; transition: opacity .3s ease; }
.intro.mode-trip::before { opacity: 0; }
.intro[hidden] { display: none; }
.intro__c { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro__skip { position: absolute; left: 0; right: 0; bottom: 28px; text-align: center; font: 500 10px/1 var(--f-mono); letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .6); text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
.intro.is-blow .intro__skip { opacity: 0; transition: opacity .25s; }
.v3.is-intro .op-brand { opacity: 0; }
.v3 .op-brand { transition: opacity .8s ease .2s; }
.js .v3.is-intro .op-links, .js .v3.is-intro .op-dock, .js .v3.is-intro .reel__bar, .js .v3.is-intro .op-legal { opacity: 0; transform: translateY(10px); }
.v3 .op-links, .v3 .op-dock, .v3 .reel__bar, .v3 .op-legal { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  .world__chips { margin-top: 10px; gap: 6px; }
  .world__chips li { font-size: 10px; padding: 6px 9px 5px; }
  .world__chips li:nth-child(n+3) { display: none; }
  .onepage.v3 .world__copy { bottom: 166px; }
  .mq { top: 26%; }
  .mq__in span { font-size: 120px; }
  .acc__sweep, .acc__bloom, .acc__deck { left: 50%; }
  .acc__bloom { top: 37%; width: 90vw; height: 90vw; margin: -45vw 0 0 -45vw; }
  .acc__deck { top: 42%; width: 96vw; height: 20vw; margin-left: -48vw; }
  .v3 .world--trays .world__scrim { background: linear-gradient(to bottom, rgba(2, 8, 4, 0) 46%, rgba(2, 8, 4, .88) 68%); }
  .v3 .world--trays .world__stage { left: 12px; right: 12px; }
  .spin { --R: 32vw; --ih: min(13vh, 24vw); --hero: min(25vh, 46vw); perspective: 900px; }
  .spin__ring { top: 48%; }
  .spin__hero { top: 37%; }
  .v3 .world--gold .big { left: 0; right: 34%; top: 0; bottom: 4%; }
  .v3 .world--gold .row { right: 4%; bottom: 4%; }
  .v3 .world--gold .row li.r-lg { height: clamp(130px, 22vh, 190px); }
  .goldg__rays, .goldg__bloom { left: 50%; top: 26%; }
  .v3 .goldg { background: radial-gradient(80% 50% at 50% 26%, #3a2a10 0%, #17110a 50%, #070605 100%); }
}
@media (max-width: 760px) and (max-height: 700px) {
  .world__chips { display: none; }
}

/* ---------- Reduced motion: keep the look, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .mq__in, .goldg__rays, .goldg__bloom, .acc__sweep, .acc__bloom, .spin__ring, .spin__face, .spin__disc, .spin__hero::before, .spin__hero::after, .v3 .swirl::before, .v3 .swirl__hue, .v3 .acid::before, .v3 .world--ape .burst,
  .world__line--gold, .v3 .world__stage .pack::before { animation: none !important; }
  .v3 .big .pack, .v3 .row .pack { transform: none !important; }
  .fx, .intro { display: none !important; }
}

/* ---------- Worlds that open with a film, then show their scene (data-film-beats) ---------- */
.film-open { position: absolute; inset: 0; z-index: 1; background: #2a1d0b; transition: opacity .9s ease, transform 1.2s var(--iris); }
.world.is-scene .film-open { opacity: 0; transform: scale(1.12); visibility: hidden; transition: opacity .9s ease, transform 1.2s var(--iris), visibility 0s 1.2s; }
.film-open .world__poster, .film-open .world__film { object-position: 50% 50%; }
.world[data-film-beats]:not(.is-scene) .mq, .world[data-film-beats]:not(.is-scene) .fx { opacity: 0; }
.world[data-film-beats] .fx { transition: opacity .9s ease .4s; }

/* Blunt Cones: after the film, the collection banner drifts in */
.blunts { position: absolute; inset: 0; background: #4b26a8; overflow: hidden; }
.blunts__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.world--blunts.is-scene .blunts__photo { animation: v3-blunts 7s ease-out both; }
@keyframes v3-blunts { from { transform: scale(1.18) rotate(-2deg) translate3d(3%, 2%, 0); filter: blur(6px) brightness(.7); } 30% { filter: none; } to { transform: scale(1.03); } }
.world--blunts .world__scrim { background: linear-gradient(to top, rgba(22, 10, 48, .78), rgba(22, 10, 48, 0) 55%), linear-gradient(to right, rgba(22, 10, 48, .6), rgba(22, 10, 48, 0) 55%); }
.world--blunts .mq__in span { -webkit-text-stroke-color: rgba(255, 255, 255, .18); }
.world--blunts .mq { top: 18%; }
@media (max-width: 760px) {
  .blunts__photo { height: 60%; object-position: 40% 50%; }
  .film-open { background: linear-gradient(to bottom, #2a1d0b 55%, #160b2c); }
  .world--blunts .world__scrim { background: linear-gradient(to bottom, rgba(22, 10, 48, 0) 36%, rgba(22, 10, 48, .92) 62%); }
}
@media (prefers-reduced-motion: reduce) { .world--blunts.is-scene .blunts__photo { animation: none; } }

/* seven worlds: one row of tabs */
.v3 .reel__tabs { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 761px) { .v3 .tab { gap: 6px; } .v3 .tab__l { font-size: clamp(12px, 1.05vw, 16px); } }

/* readable copy over the bright opening film: shade fades out with the film */
.film-open::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(18, 10, 4, .9), rgba(18, 10, 4, .55) 30%, rgba(18, 10, 4, 0) 62%), linear-gradient(to right, rgba(18, 10, 4, .75), rgba(18, 10, 4, .3) 38%, rgba(18, 10, 4, 0) 60%); }
.world--blunts .world__copy { text-shadow: 0 2px 18px rgba(10, 5, 20, .55), 0 1px 2px rgba(10, 5, 20, .6); }
.world--blunts .world__chips span, .world--blunts .world__chips li { background: rgba(14, 8, 28, .55); }
@media (max-width: 760px) {
  .film-open::after { background: linear-gradient(to bottom, rgba(18, 10, 4, 0) 34%, rgba(18, 10, 4, .8) 52%, rgba(18, 10, 4, .95)); }
}