/* ============================================================
   ABISSO — style.css
   Design system: DESIGN.md (v2, Design Director's cut)
   Cinematic deep ocean · abyssal navy · bioluminescent cyan
   ============================================================ */

/* ------------------------------------------------------------
   0. Tokens
   ------------------------------------------------------------ */
:root {
  /* Depth ramp */
  --bg-page:      #060F2C;
  --bg-deep:      #040A1E;
  --bg-surface:   #0A1B45;
  --bg-raised:    #0F2454;
  --bg-overlay:   #163166;

  /* Borders / lines */
  --line-soft:    #1B3468;
  --line-strong:  #2A4B8F;
  --line-glow:    rgba(63,224,255,.45);
  --line-catch:   rgba(143,240,255,.10);

  /* Text ramp */
  --text-hi:      #F2F7FF;
  --text-mid:     #B7C9EC;
  --text-low:     #8298C7;
  --text-faint:   #5A6FA3;
  --text-on-accent: #041022;

  /* Accent family */
  --acc:          #3FE0FF;
  --acc-bright:   #8FF0FF;
  --acc-deep:     #0EB5E4;
  --acc-blue:     #3B6CFF;
  --acc-glow:     rgba(63,224,255,.35);
  --acc-tint:     rgba(63,224,255,.12);

  /* Violet — covers + DLC/preorder chrome only */
  --violet:       #7B8CFF;
  --violet-text:  #A9B4FF;
  --violet-tint:  rgba(123,140,255,.16);
  --violet-line:  rgba(123,140,255,.40);
  --text-on-violet: #0A1030;

  /* Semantic */
  --ok:           #3DE8A8;
  --ok-tint:      rgba(61,232,168,.14);
  --text-on-ok:   #04140D;
  --hot:          #FF5977;
  --hot-soft:     #FF8DA3;
  --hot-tint:     rgba(255,89,119,.12);
  --warn:         #FFC24B;
  --warn-soft:    #FFD98A;
  --warn-tint:    rgba(255,194,75,.14);

  /* Gradients */
  --grad-cta:     linear-gradient(135deg, #3FE0FF 0%, #3B6CFF 100%);
  --grad-gold:    linear-gradient(135deg, #FFD98A 0%, #E8B23A 100%);
  --text-on-gold: #2A1D04;
  --grad-hero-veil: linear-gradient(90deg, rgba(6,15,44,.92) 0%, rgba(6,15,44,.55) 45%, rgba(6,15,44,.10) 100%);
  --grad-fade-edge: linear-gradient(90deg, #060F2C, transparent);

  /* Shadows */
  --shadow-card:  0 10px 30px rgba(2,8,25,.55);
  --shadow-lift:  0 24px 50px rgba(2,8,25,.7), 0 0 0 1px var(--line-glow), 0 8px 40px var(--acc-glow);
  --shadow-cta:   0 8px 30px rgba(63,224,255,.35);
  --shadow-header:0 10px 30px rgba(2,8,25,.45);

  /* Geometry */
  --r-sm: 10px; --r-md: 14px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --container: 1240px;

  /* Z-index */
  --z-bg: -1; --z-header: 100; --z-overlay: 200; --z-toast: 300;

  /* Type scale */
  --font-display: "Unbounded", "Arial Black", sans-serif;
  --font-ui: "Manrope", "Segoe UI", system-ui, sans-serif;
  --fs-hero: clamp(2.1rem, 4.6vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 2.6vw, 2rem);
  --fs-h3: 1.125rem;
  --fs-body: 1rem;
  --fs-sm: .875rem;
  --fs-xs: .75rem;
  --fs-price: 1.375rem;
  --fs-price-hero: clamp(1.75rem, 3vw, 2.5rem);

  /* Motion */
  --dur-tap: 120ms;
  --dur-hover: 200ms;
  --dur-lift: 280ms;
  --dur-pop: 300ms;
  --dur-filter: 350ms;
  --dur-cover: 450ms;
  --dur-slide: 650ms;
  --dur-reveal: 700ms;
  --ease-hover: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-lift: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-slide: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);

  /* Shared grain (feTurbulence, static) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");

  color-scheme: dark;
}

/* ------------------------------------------------------------
   1. Reset / base
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-mid);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.no-scroll { overflow: hidden; }

[hidden] { display: none !important; }

img, svg { display: block; max-width: 100%; }

ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, p { margin: 0; }

a { color: var(--acc); text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--acc-bright);
  outline-offset: 3px;
  border-radius: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: calc(var(--z-toast) + 1);
  padding: 10px 18px;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--text-hi);
  font-weight: 700;
  transform: translateY(-72px);
  transition: transform var(--dur-hover) var(--ease-hover);
}
.skip-link:focus-visible { transform: translateY(0); }

.container {
  width: 100%;
  max-width: calc(var(--container) + 48px);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ------------------------------------------------------------
   2. Sfondo che respira (§3)
   ------------------------------------------------------------ */
.abyss {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  overflow: hidden;
  background: var(--bg-page);
  pointer-events: none;
}

.abyss span { position: absolute; border-radius: 50%; }

.abyss .glow-a {
  width: 70vmax; height: 70vmax;
  top: -24vmax; left: -16vmax;
  background: radial-gradient(closest-side, rgba(63,224,255,.10), transparent 70%);
  opacity: .9;
  animation: drift-a 26s ease-in-out -4s infinite alternate;
}
.abyss .glow-b {
  width: 60vmax; height: 60vmax;
  top: 5vmax; right: -20vmax;
  background: radial-gradient(closest-side, rgba(59,108,255,.16), transparent 70%);
  opacity: .8;
  animation: drift-b 21s ease-in-out -9s infinite alternate;
}
.abyss .glow-c {
  width: 64vmax; height: 64vmax;
  bottom: -28vmax; left: 15vw;
  background: radial-gradient(closest-side, rgba(80,116,255,.10), transparent 70%);
  opacity: .85;
  animation: drift-c 30s ease-in-out -13s infinite alternate;
}
.abyss .glow-d {
  width: 55vmax; height: 55vmax;
  bottom: -16vmax; right: 5vw;
  background: radial-gradient(closest-side, rgba(4,10,30,.85), transparent 70%);
  opacity: .6;
  animation: drift-d 17s ease-in-out infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(0,0,0) scale(1); opacity: .9; }
  to   { transform: translate3d(6vw,4vh,0) scale(1.15); opacity: .55; }
}
@keyframes drift-b {
  from { transform: translate3d(0,0,0) scale(1); opacity: .8; }
  to   { transform: translate3d(-8vw,6vh,0) scale(.9); opacity: 1; }
}
@keyframes drift-c {
  from { transform: translate3d(0,0,0) scale(1); opacity: .85; }
  to   { transform: translate3d(5vw,-7vh,0) scale(1.2); opacity: .5; }
}
@keyframes drift-d {
  from { transform: translate3d(0,0,0) scale(1); opacity: .6; }
  to   { transform: translate3d(-4vw,-5vh,0) scale(1.1); opacity: .85; }
}

/* Caustic shafts — static, top 30% only */
.abyss::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(100deg, transparent 0 46px, rgba(143,240,255,.022) 46px 48px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 30%);
  mask-image: linear-gradient(180deg, #000, transparent 30%);
}

/* Anti-banding grain — static */
.abyss::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grain);
  opacity: .04;
  mix-blend-mode: overlay;
}

/* ------------------------------------------------------------
   3. Header (§5.1)
   ------------------------------------------------------------ */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.header.is-scrolled {
  background: rgba(6,15,44,.72);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-soft);
  box-shadow: var(--shadow-header);
}

@supports not (backdrop-filter: blur(1px)) {
  .header.is-scrolled { background: rgba(6,15,44,.96); }
}

.header__row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: 72px;
}

/* Wordmark */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 14px rgba(63,224,255,.35));
  transition: filter var(--dur-hover) ease-out;
  border-radius: var(--r-sm);
}
.brand:hover { filter: drop-shadow(0 0 20px rgba(63,224,255,.55)); }

.brand__text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: linear-gradient(92deg, #8FF0FF 0%, #3FE0FF 45%, #3B6CFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Bubble dot over the last S */
.brand__s { position: relative; }
.brand__s::after {
  content: "";
  position: absolute;
  top: -4px; left: 50%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #8FF0FF;
}

/* Sonar-portal O */
.brand__o { width: 21px; height: 21px; overflow: visible; }
.brand__ring { fill: none; stroke: #3FE0FF; stroke-width: 2.5; }
.brand__pulse {
  fill: none; stroke: #3FE0FF; stroke-width: 1.5;
  opacity: .35;
  transform-origin: center;
  animation: sonar 2.8s ease-out infinite;
}
@keyframes sonar {
  from { transform: scale(1); opacity: .35; }
  to   { transform: scale(1.35); opacity: 0; }
}

/* Nav */
.nav { margin-inline: auto; }
.nav__list { display: flex; gap: var(--space-5); }
.nav__link {
  position: relative;
  display: inline-block;
  padding-block: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-mid);
  transition: color var(--dur-hover) var(--ease-hover);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--acc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-hover) var(--ease-hover);
}
.nav__link:hover { color: var(--text-hi); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--acc-bright); }

/* Actions */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid transparent;
  color: var(--text-mid);
  transition: background var(--dur-hover) var(--ease-hover),
              border-color var(--dur-hover) var(--ease-hover),
              color var(--dur-hover) var(--ease-hover);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover {
  background: var(--acc-tint);
  border-color: var(--line-strong);
  color: var(--text-hi);
}
.icon-btn.is-active { color: var(--hot); }

.count-bubble {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 18px; height: 18px;
  padding-inline: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--acc);
  color: var(--text-on-accent);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.count-bubble.pop { animation: pop var(--dur-pop) var(--ease-pop); }
@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ------------------------------------------------------------
   4. Bottoni (§5.6)
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: transform var(--dur-hover) var(--ease-hover),
              box-shadow var(--dur-hover) var(--ease-hover),
              background var(--dur-hover) var(--ease-hover),
              border-color var(--dur-hover) var(--ease-hover);
}

.btn--primary {
  background: var(--grad-cta);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-cta);
}
.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 36px rgba(63,224,255,.5);
}
.btn--primary:active {
  transform: translateY(0);
  background: var(--acc-deep);
  box-shadow: none;
  transition-duration: var(--dur-tap);
}

.btn--ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text-hi);
}
.btn--ghost:hover {
  border-color: var(--acc);
  background: var(--acc-tint);
}

.btn--compact { min-height: 40px; padding: 10px 20px; }

/* ------------------------------------------------------------
   5. Hamburger + pannello mobile
   ------------------------------------------------------------ */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  border-radius: 50%;
  align-items: center;
}
.hamburger__bar {
  width: 20px; height: 2px;
  border-radius: 2px;
  background: var(--text-hi);
  transition: transform 250ms var(--ease-hover), opacity 250ms var(--ease-hover);
}
.hamburger.is-open .hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open .hamburger__bar:nth-child(2) { opacity: 0; }
.hamburger.is-open .hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-panel {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  padding: 120px 32px 32px;
  background: rgba(4,10,30,.94);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  overflow-y: auto;
}
@supports not (backdrop-filter: blur(1px)) {
  .mobile-panel { background: rgba(4,10,30,.98); }
}
.mobile-panel__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.mobile-panel__list > li {
  opacity: 0;
  transform: translateY(14px);
  animation: fade-up 350ms var(--ease-lift) forwards;
  animation-delay: calc(var(--i) * 60ms);
}
.mobile-panel__link {
  display: block;
  padding-block: var(--space-2);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--text-hi);
}
.mobile-panel__link:hover { color: var(--acc-bright); }
.mobile-panel__login { margin-top: var(--space-4); align-self: flex-start; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   6. Overlay di ricerca (§5.7)
   ------------------------------------------------------------ */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(4,10,30,.88);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  overflow-y: auto;
  animation: overlay-in 250ms ease-out;
}
@supports not (backdrop-filter: blur(1px)) {
  .search-overlay { background: rgba(4,10,30,.97); }
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }

.search-overlay__inner { padding-block: 96px 48px; }

.search-overlay__bar {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  animation: fade-up 250ms ease-out;
}

.search-overlay__input {
  flex: 1;
  min-width: 0;
  padding: 16px 22px;
  border-radius: var(--r-md);
  background: var(--bg-surface);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 var(--line-catch);
  color: var(--text-hi);
  font: inherit;
  font-size: var(--fs-h3);
  transition: border-color var(--dur-hover) var(--ease-hover),
              box-shadow var(--dur-hover) var(--ease-hover);
}
.search-overlay__input::placeholder { color: var(--text-low); }
.search-overlay__input:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-tint), inset 0 1px 0 var(--line-catch);
}

.search-overlay__close { flex-shrink: 0; border-color: var(--line-strong); }

.search-overlay__hint {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-low);
}

.search-overlay__results {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.s-result {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  box-shadow: inset 0 1px 0 var(--line-catch);
  transition: border-color var(--dur-hover) var(--ease-hover),
              background var(--dur-hover) var(--ease-hover);
}
.s-result:hover { border-color: var(--line-strong); background: var(--bg-raised); }

.s-result__cover {
  width: 44px; height: 59px;
  flex-shrink: 0;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(143,240,255,.12);
}

.s-result__info { flex: 1; min-width: 0; }
.s-result__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-hi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.s-result__meta {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-low);
}
.s-result__price {
  font-size: var(--fs-h3);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-hi);
  white-space: nowrap;
}
.s-result__buy { flex-shrink: 0; }

/* ------------------------------------------------------------
   7. Hero slider (§5.2)
   ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: clamp(565px, 68vh, 660px);
  margin-top: -72px; /* the sticky transparent header floats over the hero */
  overflow: hidden;
}

.hero__slides { position: absolute; inset: 0; }

.hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
  transition: opacity var(--dur-slide) var(--ease-slide),
              transform var(--dur-slide) var(--ease-slide);
}
.hero__slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Backdrop: procedural mood recipe, veiled and welded to the page */
.hero__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  animation: hero-drift 20s ease-in-out infinite alternate;
}
@keyframes hero-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

.hero__scenery {
  position: absolute;
  right: -1%;
  bottom: 10%;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -.01em;
  color: rgba(255,255,255,.94);
  opacity: .3;
  text-shadow: 0 2px 40px rgba(4,10,30,.8);
  white-space: nowrap;
  user-select: none;
}

.hero__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--grad-hero-veil);
}
.hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 60%, #060F2C 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 96px;   /* room under the floating header */
  padding-bottom: 24px; /* bottom space is governed by the hero height */
}

.hero__stack { max-width: 560px; }

.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--text-hi);
  text-shadow: 0 4px 40px rgba(2,8,25,.8);
  text-transform: uppercase;
}

.hero__desc {
  margin-top: var(--space-4);
  max-width: 46ch;
  color: var(--text-mid);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero__priceblock {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.hero__oldprice {
  font-size: var(--fs-h3);
  color: var(--text-low);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.hero__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-price-hero);
  color: var(--acc-bright);
  text-shadow: 0 0 18px rgba(63,224,255,.22);
  font-variant-numeric: tabular-nums;
}

.hero__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.hero__heart {
  border-color: var(--line-strong);
  background: rgba(10,27,69,.7);
}

/* Staggered entrance of the active slide's text */
.hero__slide.is-active .stagger {
  animation: fade-up 450ms var(--ease-lift) both;
  animation-delay: calc(var(--i) * 80ms);
}

/* Thumb deck */
.hero__deck {
  position: absolute;
  left: 0; right: 0;
  bottom: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.hero__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(10,27,69,.7);
  border: 1px solid var(--line-strong);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text-hi);
  transition: border-color var(--dur-hover) var(--ease-hover),
              box-shadow var(--dur-hover) var(--ease-hover);
}
@supports not (backdrop-filter: blur(1px)) {
  .hero__arrow { background: rgba(10,27,69,.92); }
}
.hero__arrow svg { width: 20px; height: 20px; }
.hero__arrow:hover { border-color: var(--acc); box-shadow: var(--shadow-cta); }

.hero__thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 8px 4px;
  margin-inline: auto;
}
.hero__thumbs::-webkit-scrollbar { display: none; }

.hero__thumb {
  position: relative;
  flex: 0 0 64px;
  height: 85px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  opacity: .55;
  scroll-snap-align: center;
  transition: opacity 250ms var(--ease-hover),
              transform 250ms var(--ease-hover),
              border-color 250ms var(--ease-hover),
              box-shadow 250ms var(--ease-hover);
}
.hero__thumb:hover { opacity: .85; }
.hero__thumb[aria-selected="true"] {
  opacity: 1;
  transform: scale(1.12);
  border: 2px solid var(--acc);
  box-shadow: 0 0 20px var(--acc-glow);
}

.hero__thumb-label {
  position: absolute;
  left: 4px; right: 4px; bottom: 5px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 6px rgba(4,10,30,.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  pointer-events: none;
}

.hero__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--acc);
  transform: scaleX(0);
  transform-origin: left;
}
.hero__thumb[aria-selected="true"] .hero__progress.is-running {
  animation: thumb-progress 6.5s linear forwards;
}
@keyframes thumb-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------------------
   8. Sezioni (§5.4)
   ------------------------------------------------------------ */
.section { padding-block: var(--space-7); }
.section--last { padding-bottom: var(--space-8); }

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.section__kicker {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--acc);
  margin-bottom: var(--space-1);
}

.section__title {
  position: relative;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  color: var(--text-hi);
  padding-bottom: 14px;
}
.section__title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 48px; height: 2px;
  border-radius: 2px;
  background: var(--grad-cta);
}

.section__tools {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.see-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--acc);
  transition: color var(--dur-hover) var(--ease-hover);
  white-space: nowrap;
}
.see-all__arrow {
  display: inline-block;
  transition: transform var(--dur-hover) var(--ease-hover);
}
.see-all:hover { color: var(--acc-bright); }
.see-all:hover .see-all__arrow { transform: translateX(4px); }

.row-nav { display: flex; gap: var(--space-2); }
.row-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  box-shadow: inset 0 1px 0 var(--line-catch);
  color: var(--text-mid);
  transition: border-color var(--dur-hover) var(--ease-hover),
              color var(--dur-hover) var(--ease-hover),
              box-shadow var(--dur-hover) var(--ease-hover);
}
.row-nav__btn svg { width: 18px; height: 18px; }
.row-nav__btn:hover {
  border-color: var(--acc);
  color: var(--text-hi);
  box-shadow: 0 0 14px var(--acc-glow), inset 0 1px 0 var(--line-catch);
}

/* Card rows (scroll orizzontale) */
.card-row {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 8px 4px 28px;
}
.card-row::-webkit-scrollbar { display: none; }
.card-row .card {
  flex: 0 0 230px;
  scroll-snap-align: start;
}

/* Griglia bestseller */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-5) var(--space-4);
  margin-top: var(--space-5);
}

.grid-empty {
  margin-top: var(--space-5);
  padding: var(--space-6);
  text-align: center;
  color: var(--text-low);
  background: var(--bg-surface);
  border: 1px dashed var(--line-soft);
  border-radius: var(--r-lg);
}

/* ------------------------------------------------------------
   9. Chips genere (§5.5)
   ------------------------------------------------------------ */
.chips {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--bg-surface);
  border: 1px solid var(--line-soft);
  box-shadow: inset 0 1px 0 var(--line-catch);
  color: var(--text-mid);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: border-color 150ms ease-out, color 150ms ease-out,
              background 150ms ease-out, box-shadow 150ms ease-out;
}
.chip:hover { border-color: var(--line-strong); color: var(--text-hi); }
.chip:active { transform: scale(.97); transition-duration: var(--dur-tap); }

.chip[aria-pressed="true"] {
  background: var(--grad-cta);
  border-color: transparent;
  color: var(--text-on-accent);
  font-weight: 800;
  box-shadow: 0 0 18px var(--acc-glow), 0 2px 10px rgba(2,8,25,.5);
}

/* ------------------------------------------------------------
   10. Card prodotto (§5.3)
   ------------------------------------------------------------ */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface); /* opaca — non negoziabile */
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card), inset 0 1px 0 var(--line-catch);
  transition: transform var(--dur-lift) var(--ease-lift),
              border-color var(--dur-lift) var(--ease-lift),
              box-shadow var(--dur-lift) var(--ease-lift);
}
.card:hover, .card:focus-within {
  transform: translateY(-6px);
  border-color: var(--line-glow);
  box-shadow: var(--shadow-lift), inset 0 1px 0 var(--line-catch);
}

.card__media { position: relative; }

/* Cover procedurale (§6) */
.cover {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md) var(--r-md) 0 0;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(143,240,255,.12);
}

.cover__inner {
  position: absolute;
  inset: 0;
  transition: transform var(--dur-cover) var(--ease-lift);
}
.card:hover .cover__inner,
.card:focus-within .cover__inner { transform: scale(1.05); }

.cover__art { position: absolute; inset: 0; }

.cover__grain {
  position: absolute;
  inset: 0;
  background: var(--grain);
  opacity: .05;
  mix-blend-mode: overlay;
}

/* Sheen — pure CSS, resets instantly on un-hover */
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(105deg, transparent 40%, rgba(143,240,255,.14) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}
.card:hover .cover::after {
  transform: translateX(120%);
  transition: transform 700ms ease-out;
}

/* Lettering */
.cover__txt {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  font-family: var(--font-display);
  color: rgba(255,255,255,.94);
  text-shadow: 0 2px 18px rgba(4,10,30,.8);
  text-transform: uppercase;
  line-height: 1;
}

.cover__eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.5);
  margin-bottom: 3px;
}

.cover__kicker {
  font-weight: 600;
  font-size: calc(var(--big-size) * .4);
  letter-spacing: .18em;
}

.cover__big {
  font-weight: 800;
  font-size: var(--big-size);
  line-height: .95;
  overflow-wrap: anywhere;
}
.cover__big.is-long { letter-spacing: -.03em; }

.cover__big.is-hollow {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,.92);
}
@supports not (-webkit-text-stroke: 1px #fff) {
  .cover__big.is-hollow { color: rgba(255,255,255,.94); }
}

.cover__num {
  font-weight: 600;
  font-size: calc(var(--big-size) * .4);
  letter-spacing: .3em;
  color: var(--c3, var(--acc));
}

/* Flourish per stile */
.cover--horror .cover__big {
  transform: skewX(-4deg);
  text-shadow: 0 2px 18px rgba(4,10,30,.8), 0 0 22px var(--c3, rgba(255,89,119,.5));
}
.cover--sport .cover__big,
.cover--sport .cover__kicker {
  font-style: italic;
  letter-spacing: -.02em;
}
.cover--indie .cover__big {
  font-family: var(--font-ui);
  font-weight: 800;
  text-transform: lowercase;
}

/* Badge (§5.3) */
.badge {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 3;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.4;
}
.badge--static { position: static; }
.badge--hit      { background: var(--acc); color: var(--text-on-accent); }
.badge--promo    { background: var(--ok); color: var(--text-on-ok); }
.badge--novita   { background: var(--acc-tint); color: var(--acc-bright); border: 1px solid var(--line-glow); }
.badge--dlc      { background: var(--violet-tint); color: var(--violet-text); border: 1px solid var(--violet-line); }
.badge--preordine{ background: var(--violet); color: var(--text-on-violet); }
.badge--premium  { background: var(--grad-gold); color: var(--text-on-gold); }

/* Cuore wishlist */
.card__heart {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(4,10,30,.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--text-hi);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--dur-hover) ease-out,
              transform var(--dur-hover) ease-out,
              color var(--dur-hover) ease-out;
}
@supports not (backdrop-filter: blur(1px)) {
  .card__heart { background: rgba(4,10,30,.85); }
}
.card__heart svg { width: 18px; height: 18px; }
.card:hover .card__heart,
.card:focus-within .card__heart,
.card__heart:focus-visible {
  opacity: 1;
  transform: translateY(0);
}
.card__heart[aria-pressed="true"] { opacity: 1; transform: translateY(0); color: var(--hot); }
.card__heart[aria-pressed="true"] svg path { fill: var(--hot); stroke: var(--hot); }
.card__heart.pop svg { animation: pop var(--dur-pop) var(--ease-pop); }

@media (hover: none) {
  .card__heart { opacity: 1; transform: translateY(0); }
}

/* Corpo card */
.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4) var(--space-4);
  flex: 1;
}

.card__title {
  font-family: var(--font-ui);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--text-hi);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__platform {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-low);
}

.card__pricerow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
}

.card__price {
  font-size: var(--fs-price);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-hi);
}

.card__oldprice {
  font-size: var(--fs-sm);
  color: var(--text-low);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.price-pill {
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--ok-tint);
  color: var(--ok);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.card__buy {
  margin-top: var(--space-3);
  min-height: 40px;
  padding: 8px 16px;
  width: 100%;
}

/* Countdown (§5.6) */
.countdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin: var(--space-3) var(--space-4) 0;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--warn-tint);
  border: 1px solid rgba(255,194,75,.35);
  color: var(--warn);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.countdown::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--warn);
  flex-shrink: 0;
}

.countdown.is-critical {
  background: var(--hot-tint);
  border-color: rgba(255,89,119,.35);
  color: var(--hot-soft);
}
.countdown.is-critical::before {
  background: var(--hot);
  animation: dot-pulse 2s ease-in-out infinite alternate;
}
@keyframes dot-pulse { from { opacity: .4; } to { opacity: 1; } }

.countdown span { display: inline-block; }
.countdown .blink { animation: digit-blink 240ms ease-out; }
@keyframes digit-blink {
  0% { opacity: 1; } 50% { opacity: .45; } 100% { opacity: 1; }
}

/* ------------------------------------------------------------
   11. Scroll reveal
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease-reveal),
              transform var(--dur-reveal) var(--ease-reveal);
  transition-delay: var(--d, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Re-render della griglia dopo il filtro */
.grid-enter {
  animation: fade-up var(--dur-filter) var(--ease-lift) both;
  animation-delay: calc(var(--i) * 40ms);
}

/* ------------------------------------------------------------
   12. Footer (§5.8)
   ------------------------------------------------------------ */
.footer {
  position: relative;
  background: var(--bg-deep);
  padding-block: var(--space-7) var(--space-6);
  margin-top: var(--space-6);
}
.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--acc-blue), transparent);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, 1fr);
  gap: var(--space-6) var(--space-5);
}

.footer__logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: .04em;
  background: linear-gradient(92deg, #8FF0FF 0%, #3FE0FF 45%, #3B6CFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.footer__tagline {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-low);
}

.footer__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-hi);
  margin-bottom: var(--space-3);
}
.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer__col a {
  font-size: var(--fs-sm);
  color: var(--text-low);
  transition: color 150ms ease-out;
}
.footer__col a:hover { color: var(--acc-bright); }

.footer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  color: var(--text-low);
  transition: border-color var(--dur-hover) var(--ease-hover),
              color var(--dur-hover) var(--ease-hover),
              box-shadow var(--dur-hover) var(--ease-hover);
}
.footer__social svg { width: 18px; height: 18px; }
.footer__social a:hover {
  border-color: var(--acc);
  color: var(--acc-bright);
  box-shadow: 0 0 16px var(--acc-glow);
}

.footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-soft);
}

.footer__legal-info {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 62ch;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__copyright {
  font-size: var(--fs-xs);
  color: var(--text-low);
  line-height: 1.6;
}

.footer__seller {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--text-low);
  line-height: 1.6;
}
.footer__seller-label {
  color: var(--text-mid);
  font-weight: 700;
}

/* Documenti legali — colonna destra */
.footer__docs { flex: 0 0 auto; }

.footer__legal-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  text-align: right;
}
.footer__legal-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-mid);
  transition: color 150ms ease-out;
}
.footer__legal-links a:hover { color: var(--acc-bright); }
.footer__legal-links a:hover .footer__doc-ext {
  border-color: var(--acc);
  color: var(--acc-bright);
}

.footer__doc-ext {
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--text-low);
  line-height: 1.5;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}

/* Реквизиты: почта поддержки — такая же ссылка, но читаемая */
.footer__seller a {
  color: var(--acc);
  text-decoration: none;
  border-bottom: 1px solid var(--acc-tint);
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.footer__seller a:hover { color: var(--acc-bright); border-color: var(--acc); }

/* Правовые документы: страница сайта + запасная версия PDF */
.footer__legal-links li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer__doc-pdf {
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--line-strong);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.5;
  color: var(--text-low) !important;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.footer__legal-links li:hover .footer__doc-pdf {
  border-color: var(--acc);
  color: var(--acc-bright) !important;
}

@media (max-width: 768px) {
  .footer__legal { flex-direction: column; gap: var(--space-5); }
  .footer__legal-links { align-items: flex-start; text-align: left; }
}

/* ------------------------------------------------------------
   13. Toast (§5.6)
   ------------------------------------------------------------ */
.toast-stack {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: min(360px, calc(100vw - 48px));
}

.toast {
  padding: var(--space-3) var(--space-4);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--ok);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card), inset 0 1px 0 var(--line-catch);
  color: var(--text-hi);
  font-size: var(--fs-sm);
  font-weight: 600;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-pop) var(--ease-lift),
              transform var(--dur-pop) var(--ease-lift);
}
.toast--wish { border-left-color: var(--hot); }
.toast.is-in { opacity: 1; transform: translateY(0); }
.toast.is-out { opacity: 0; transition-duration: 200ms; }

/* ------------------------------------------------------------
   14. Responsive
   ------------------------------------------------------------ */
@media (max-width: 960px) {
  .nav { display: none; }
  .hamburger { display: inline-flex; }
  .header__login { display: none; }
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .header__row { height: 64px; }
  .hero { margin-top: -64px; min-height: clamp(580px, 76vh, 720px); }
  .hero__content { padding-top: 84px; }
  .abyss .glow-c { display: none; }
  .row-nav { display: none; }
  .section { padding-block: var(--space-6); }
  .card-row .card { flex-basis: 200px; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .toast-stack { right: 16px; bottom: 16px; }
  .container { padding-inline: 16px; }
}

@media (max-width: 560px) {
  .hero__scenery { display: none; }
  .hero__arrow { display: none; }
  .hero__thumbs { justify-content: flex-start; }
  .hero__thumb { flex-basis: 48px; height: 64px; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: var(--space-4) var(--space-3); }
  .card-row .card { flex-basis: 178px; }
  .card__price { font-size: 1.2rem; }
  .cover__txt { --big-size-scale: .82; }
  .cover__big { font-size: calc(var(--big-size) * .82); }
  .cover__kicker, .cover__num { font-size: calc(var(--big-size) * .4 * .82); }
  .brand__s::after { display: none; }
}

/* ------------------------------------------------------------
   15. Reduced motion — tutto si ferma, la profondità resta
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .abyss span { animation: none; }
  .brand__pulse { animation: none; opacity: .35; }
  .hero__art { animation: none; }
  .countdown.is-critical::before { animation: none; }
  .countdown .blink { animation: none; }
  .count-bubble.pop { animation: none; }
  .card__heart.pop svg { animation: none; }
  .hero__thumb[aria-selected="true"] .hero__progress.is-running { animation: none; }

  .hero__slide {
    transform: none;
    transition: opacity 150ms ease-out;
  }
  .hero__slide.is-active .stagger { animation: none; }

  .mobile-panel__list > li { animation-duration: 0ms; }
  .search-overlay, .search-overlay__bar { animation: none; }

  .reveal, .card, .cover__inner, .btn, .chip, .nav__link,
  .see-all__arrow, .card__heart, .hero__thumb, .toast {
    transition-duration: 0ms !important;
  }
  .grid-enter { animation-duration: 0ms; animation-delay: 0ms; }
  .reveal { opacity: 1; transform: none; }
  .card:hover { transform: none; }
  .card:hover .cover__inner { transform: none; }
  .card:hover .cover::after { transition: none; transform: translateX(-120%); }
}