/* ============================================================
   MUDD BRUDDAS — STYLES
   Dark "mudd" cinematic world that cracks open into vivid
   exotic-flavor commerce. Mobile-first, fluid, no h-overflow.
   ============================================================ */

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* No overflow-x guard on html/body: putting overflow-x (clip OR hidden) on the
   root/body puts the viewport in a scroll state where programmatic scrolling
   (window.scrollTo / scrollIntoView) silently no-ops. Horizontal overflow is
   instead contained at the source — every decorative/oversized element lives
   inside a section with its own `overflow: hidden`. Verified no h-overflow 320+. */
html, body { max-width: 100%; }
body {
  background: var(--mudd-black);
  color: var(--text-on-dark);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
input { font: inherit; }
h1, h2, h3 { line-height: 0.95; font-weight: 400; }
:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--gold); color: var(--ink); }

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -100px; left: 50%; transform: translateX(-50%);
  z-index: 200; background: var(--gold); color: var(--ink);
  padding: 0.75rem 1.25rem; font: 700 0.85rem/1 "Space Mono", monospace;
  letter-spacing: 0.08em; border-radius: 0 0 var(--radius) var(--radius);
  transition: top var(--dur-1) var(--ease);
}
.skip-link:focus { top: 0; }

.eyebrow {
  font: 700 var(--fs-eyebrow)/1 "Space Mono", monospace;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-soft);
}
.eyebrow--center { text-align: center; }
.accent { color: var(--flavor); }
.accent-gold { color: var(--gold); }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Section scaffold ---------- */
section { padding-block: var(--space-6); padding-inline: var(--gutter); }
.sec-head { max-width: var(--maxw); margin-inline: auto; margin-bottom: var(--space-4); }
.sec-title {
  font-family: "Anton", "Inter", sans-serif; text-transform: uppercase;
  font-size: var(--fs-h2); letter-spacing: 0.01em; margin-top: 0.4rem;
}
.sec-sub { color: var(--text-dim); max-width: 46ch; margin-top: var(--space-2); font-size: var(--fs-lead); }
.sec-head--light .sec-sub { color: rgba(21,17,15,0.6); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.85em 1.5em;
  font: 700 0.82rem/1 "Space Mono", monospace; letter-spacing: 0.14em;
  text-transform: uppercase; border-radius: var(--radius);
  transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  will-change: transform;
}
.btn--primary { background: var(--gold); color: var(--ink); box-shadow: 0 10px 30px -12px rgba(201,162,39,0.7); }
.btn--primary:hover { background: var(--gold-soft); transform: translateY(-2px); }
.btn--ghost { border: 1px solid var(--line-on-dark); color: var(--text-on-dark); }
.btn--ghost:hover { border-color: var(--gold-soft); color: var(--gold-soft); transform: translateY(-2px); }
.btn--block { width: 100%; }
.btn--sm { min-height: 40px; padding: 0.6em 1em; }
.btn.is-disabled { opacity: 0.4; pointer-events: none; }

.btn--add {
  border: 1.5px solid var(--flavor); color: var(--text-on-dark); background: transparent;
}
.btn--add:hover, .btn--add:focus-visible { background: var(--flavor); color: #fff; transform: translateY(-2px); }
.btn--add.is-added { background: var(--flavor); color: #fff; }

/* ======================================================
   NAV
   ====================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: var(--header-h);
  padding-inline: var(--gutter);
  padding-top: env(safe-area-inset-top, 0);
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-solid {
  background: color-mix(in srgb, var(--mudd-black) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line-on-dark);
}
.nav__brand {
  font: 400 clamp(1.05rem, 0.9rem + 0.9vw, 1.5rem)/0.82 "Anton", sans-serif;
  letter-spacing: 0.02em; display: grid;
}
.nav__brand span { color: var(--gold); }
.nav__links { display: none; gap: clamp(1rem, 2.2vw, 2.4rem); }
.nav__links a {
  font: 700 0.78rem/1 "Space Mono", monospace; letter-spacing: 0.14em; color: var(--text-dim);
  text-transform: uppercase; transition: color var(--dur-1) var(--ease); position: relative;
}
.nav__links a:hover { color: var(--text-on-dark); }
.nav__actions { display: flex; align-items: center; gap: 0.5rem; }
.nav__cart {
  display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; padding: 0 0.6rem;
  font: 700 0.78rem/1 "Space Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase;
}
.cart-count {
  display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 0.3em;
  background: var(--gold); color: var(--ink); border-radius: 999px; font-size: 0.72rem;
  transition: transform var(--dur-1) var(--ease);
}
.cart-count.is-bump { transform: scale(1.4); }
.nav__menu {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; padding: 0 0.4rem;
  font: 700 0.78rem/1 "Space Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase;
}
.nav__menu-bars { display: inline-grid; gap: 4px; width: 20px; }
.nav__menu-bars i { height: 2px; background: currentColor; border-radius: 2px; }

/* ======================================================
   MOBILE MENU
   ====================================================== */
.menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: color-mix(in srgb, var(--mudd-black) 97%, transparent);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity var(--dur-2) var(--ease), visibility var(--dur-2);
  padding: calc(var(--header-h) + env(safe-area-inset-top,0)) var(--gutter) env(safe-area-inset-bottom,1rem);
}
.menu[hidden] { display: grid; }        /* keep in flow for transition; JS toggles .is-open */
.menu.is-open { opacity: 1; visibility: visible; }
.menu__inner { width: 100%; max-width: 560px; }
.menu__links { display: grid; gap: clamp(0.25rem, 2vh, 1rem); }
.menu__links a {
  display: flex; align-items: baseline; gap: 1rem;
  font: 400 clamp(2.4rem, 13vw, 4.5rem)/0.95 "Anton", sans-serif; text-transform: uppercase;
  border-bottom: 1px solid var(--line-on-dark); padding-block: clamp(0.3rem, 1.2vh, 0.8rem);
  transition: color var(--dur-1) var(--ease), padding-left var(--dur-1) var(--ease);
}
.menu__links a span { font: 700 0.8rem/1 "Space Mono", monospace; color: var(--gold); letter-spacing: 0.1em; }
.menu__links a:hover, .menu__links a:focus-visible { color: var(--gold); padding-left: 0.6rem; }
.menu__tag { margin-top: var(--space-4); font: 400 1.5rem/1 "Anton", sans-serif; color: var(--text-dim); letter-spacing: 0.04em; }
body.is-locked { overflow: hidden; }

/* ======================================================
   CART DRAWER
   ====================================================== */
.cart-backdrop {
  position: fixed; inset: 0; z-index: calc(var(--z-cart) - 1);
  background: rgba(0,0,0,0.6); opacity: 0; visibility: hidden;
  transition: opacity var(--dur-2) var(--ease), visibility var(--dur-2);
}
.cart-backdrop.is-open { opacity: 1; visibility: visible; }
.cart {
  position: fixed; z-index: var(--z-cart); top: 0; right: 0; height: 100svh;
  width: min(420px, 100vw);
  background: var(--mudd-950); border-left: 1px solid var(--line-on-dark);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--dur-2) var(--ease);
  padding-top: env(safe-area-inset-top, 0); padding-bottom: env(safe-area-inset-bottom, 0);
}
.cart[hidden] { display: flex; }
.cart.is-open { transform: none; }
.cart__head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem var(--space-3); border-bottom: 1px solid var(--line-on-dark); }
.cart__title { font: 400 1.4rem/1 "Anton", sans-serif; letter-spacing: 0.03em; }
.cart__close { font: 700 0.75rem/1 "Space Mono", monospace; letter-spacing: 0.12em; color: var(--text-dim); min-height: 44px; padding: 0 0.5rem; }
.cart__close:hover { color: var(--text-on-dark); }
.cart__items { flex: 1; overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: 1rem; }
.cart__empty { color: var(--text-dim); font-size: 0.95rem; }
.cart-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 0.9rem; align-items: center; }
.cart-item__thumb { width: 44px; height: 56px; display: grid; place-items: center; background: var(--mudd-800); border-radius: var(--radius); }
.cart-item__thumb .can { height: 48px; }
.cart-item__name { font: 700 0.82rem/1.2 "Space Mono", monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.cart-item__price { color: var(--text-dim); font-size: 0.8rem; margin-top: 0.2rem; }
.cart-item__qty { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.4rem; }
.cart-item__qty button { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line-on-dark); border-radius: var(--radius); color: var(--text-dim); }
.cart-item__qty button:hover { color: var(--text-on-dark); border-color: var(--gold-soft); }
.cart-item__qty span { min-width: 1.5em; text-align: center; font: 700 0.85rem "Space Mono", monospace; }
.cart-item__line { font: 700 0.9rem "Space Mono", monospace; text-align: right; }
.cart-item__remove { display: block; margin-top: 0.3rem; font-size: 0.68rem; color: var(--text-dim); letter-spacing: 0.08em; }
.cart-item__remove:hover { color: var(--f-dragon); }
.cart__foot { padding: var(--space-3); border-top: 1px solid var(--line-on-dark); display: grid; gap: 0.8rem; }
.cart__subtotal { display: flex; justify-content: space-between; font: 700 1rem "Space Mono", monospace; letter-spacing: 0.06em; }
.cart__note { color: var(--text-dim); font-size: 0.72rem; text-align: center; }

/* ======================================================
   WORLD 01 — HERO
   ====================================================== */
.hero {
  position: relative; min-height: 100svh; min-height: 100dvh;
  display: grid; place-items: center; text-align: center;
  padding-block: calc(var(--header-h) + var(--space-4)) var(--space-5);
  overflow: hidden; isolation: isolate;
}
.hero__atmos { position: absolute; inset: 0; z-index: -2; }
.hero__glow {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%;
  width: min(120vw, 1000px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--flavor) 55%, transparent) 0%, transparent 62%);
  filter: blur(40px); opacity: 0.6; animation: breathe 9s var(--ease-in-out) infinite;
}
.hero::after { /* vignette */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(130% 90% at 50% 30%, transparent 40%, var(--mudd-black) 100%);
}
.hero__grain {
  position: absolute; inset: -50%; z-index: -1; pointer-events: none; opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__frame { position: absolute; inset: clamp(0.75rem, 3vw, 2rem); z-index: 1; pointer-events: none; }
.hero__corner {
  position: absolute; font: 700 0.64rem/1 "Space Mono", monospace; letter-spacing: 0.18em;
  color: var(--text-dim); text-transform: uppercase;
}
.hero__corner::before { content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--line-on-dark); }
.hero__corner--tl { top: 0; left: 0; padding: 12px 0 0 12px; }
.hero__corner--tl::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hero__corner--tr { top: 0; right: 0; padding: 12px 12px 0 0; text-align: right; }
.hero__corner--tr::before { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.hero__corner--bl { bottom: 0; left: 0; padding: 0 0 12px 12px; }
.hero__corner--bl::before { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.hero__corner--br { bottom: 0; right: 0; padding: 0 12px 12px 0; text-align: right; }
.hero__corner--br::before { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.hero__inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 0; max-width: 1100px; }
.hero__eyebrow { font: 700 var(--fs-eyebrow)/1 "Space Mono", monospace; letter-spacing: 0.3em; color: var(--gold-soft); text-transform: uppercase; }
.hero__title {
  font-family: "Anton", sans-serif; text-transform: uppercase;
  font-size: clamp(3rem, 2rem + 9vw, 9.5rem);
  letter-spacing: 0.005em; margin-top: 0.3em; text-shadow: 0 0 60px rgba(0,0,0,0.5);
}
.hero__sub {
  font: 700 clamp(0.85rem, 0.5rem + 1.8vw, 1.6rem)/1 "Space Mono", monospace;
  letter-spacing: 0.4em; color: var(--text-on-dark); margin-top: 0.4em; padding-left: 0.4em;
}
.hero__can-wrap { margin-top: clamp(0.5rem, 1vw, 1rem); margin-bottom: clamp(0.25rem, 1vw, 0.75rem); }
.can--hero { height: clamp(140px, 24vw, 250px); filter: drop-shadow(0 30px 40px rgba(0,0,0,0.55)); animation: float 6s var(--ease-in-out) infinite; }
.hero__line { font-size: var(--fs-lead); color: var(--text-on-dark); max-width: 24ch; text-wrap: balance; }
.hero__line em { color: var(--flavor); font-style: italic; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: var(--space-3); }
.hero__scroll {
  position: absolute; bottom: calc(env(safe-area-inset-bottom,0) + 1rem); left: 50%; translate: -50% 0; z-index: 2;
  display: grid; justify-items: center; gap: 0.5rem;
  font: 700 0.62rem/1 "Space Mono", monospace; letter-spacing: 0.22em; color: var(--text-dim); text-transform: uppercase;
}
.hero__scroll i { width: 1px; height: 34px; background: linear-gradient(var(--gold-soft), transparent); animation: scrollcue 1.8s var(--ease-in-out) infinite; }

/* ======================================================
   TRANSITION / WORLD INTRO
   ====================================================== */
.intro {
  position: relative; text-align: center; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 120%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 60%),
    linear-gradient(var(--mudd-black), var(--mudd-900));
}
.intro__inner { max-width: 900px; margin-inline: auto; display: grid; justify-items: center; gap: var(--space-2); }
.intro__title { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: var(--fs-h2); margin-top: 0.5rem; }
.intro__tags { font: 700 clamp(0.75rem, 0.5rem + 1.3vw, 1.15rem)/1 "Space Mono", monospace; letter-spacing: 0.22em; color: var(--gold-soft); text-transform: uppercase; }
.intro__tags i { color: var(--text-dim); font-style: normal; padding-inline: 0.3em; }
.intro__body { color: var(--text-dim); max-width: 60ch; font-size: var(--fs-lead); }

/* ======================================================
   FEATURED CAMPAIGN
   ====================================================== */
.campaign {
  display: grid; gap: var(--space-4); align-items: center;
  background: linear-gradient(var(--mudd-900), var(--mudd-950));
  position: relative;
}
.campaign__media { position: relative; display: grid; place-items: center; min-height: clamp(280px, 50vw, 520px); }
.campaign__glow {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--f-original) 50%, transparent), transparent 60%);
  filter: blur(50px); opacity: 0.55;
}
.can--campaign { position: relative; z-index: 1; height: clamp(230px, 40vw, 440px); filter: drop-shadow(0 40px 50px rgba(0,0,0,0.6)); animation: float 7s var(--ease-in-out) infinite; }
.campaign__body { max-width: 560px; display: grid; gap: var(--space-2); }
.campaign__title { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: var(--fs-display); line-height: 0.85; }
.campaign__sub { font: 700 0.85rem/1 "Space Mono", monospace; letter-spacing: 0.22em; color: var(--gold-soft); text-transform: uppercase; }
.campaign__text { color: var(--text-dim); max-width: 44ch; }
.campaign .btn { justify-self: start; margin-top: var(--space-2); }

/* ======================================================
   CHOOSE YOUR MUDD — DRINKS GRID
   ====================================================== */
.drinks { background: var(--mudd-900); }
.product-grid {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; gap: clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: 1fr;
}
.product {
  position: relative; display: grid; gap: var(--space-2);
  padding: var(--space-3); border: 1px solid var(--line-on-dark); border-radius: var(--radius-lg);
  background: linear-gradient(var(--mudd-800), var(--mudd-900));
  overflow: hidden; transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.product:hover { border-color: color-mix(in srgb, var(--flavor) 60%, transparent); }
.product__media { position: relative; display: grid; place-items: center; min-height: clamp(200px, 40vw, 280px); }
.product__media .can { position: relative; z-index: 1; height: clamp(180px, 36vw, 250px); filter: drop-shadow(0 20px 26px rgba(0,0,0,0.5)); transition: transform var(--dur-2) var(--ease); }
.product__burst {
  position: absolute; inset: 0; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--flavor), transparent 60%);
  filter: blur(30px); opacity: 0.18; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.product:hover .can, .product:focus-within .can { transform: translateY(-12px) rotate(-5deg) scale(1.05); }
.product:hover .product__burst, .product:focus-within .product__burst { opacity: 0.5; transform: scale(1.1); }
.product__flavor { font: 700 0.7rem/1 "Space Mono", monospace; letter-spacing: 0.2em; color: var(--flavor); text-transform: uppercase; }
.product__name { font-family: "Anton", sans-serif; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); text-transform: uppercase; }
.product__desc { color: var(--text-dim); font-size: 0.92rem; min-height: 2.8em; }
.product__buy { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.25rem; }
.price { font: 700 1.3rem/1 "Space Mono", monospace; color: var(--text-on-dark); }

/* ======================================================
   CRACK THE CAN
   ====================================================== */
.crack {
  position: relative; text-align: center; display: grid; justify-items: center; gap: var(--space-2);
  background: var(--mudd-black); overflow: hidden; isolation: isolate;
}
.crack__glow {
  position: absolute; left: 50%; top: 55%; translate: -50% -50%; z-index: -1;
  width: min(100vw, 760px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--flavor), transparent 60%);
  filter: blur(60px); opacity: 0.14; transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.crack.is-cracked .crack__glow { opacity: 0.6; transform: translate(-50%, -50%) scale(1.25); }
.crack__title { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: var(--fs-h2); }
.crack__can { position: relative; display: inline-grid; place-items: center; padding: 1rem; border-radius: 50%; margin-top: var(--space-2); }
.crack__can .can { height: clamp(220px, 44vw, 340px); filter: drop-shadow(0 30px 40px rgba(0,0,0,0.55)); transition: transform var(--dur-2) var(--ease); }
.crack__can:hover .can { transform: scale(1.03); }
.crack__can .can__tab { transform-box: fill-box; transform-origin: center; transition: transform var(--dur-2) var(--ease-in-out); }
.crack.is-cracked .crack__can .can__tab { transform: rotate(32deg) translateY(-2px); }
.crack__can .can { animation: float 6s var(--ease-in-out) infinite; }
.crack__fizz { position: absolute; left: 0; right: 0; top: 6%; height: 40%; pointer-events: none; }
.crack__fizz .bubble {
  position: absolute; bottom: 0; width: 10px; height: 10px; border-radius: 50%;
  background: color-mix(in srgb, var(--flavor) 70%, #fff); opacity: 0;
}
.crack__hint { font: 700 0.75rem/1 "Space Mono", monospace; letter-spacing: 0.2em; color: var(--text-dim); text-transform: uppercase; }
.crack.is-cracked .crack__hint { opacity: 0; }
.crack__payoff {
  font-family: "Anton", sans-serif; text-transform: uppercase; font-size: var(--fs-h2);
  color: var(--flavor); opacity: 0; transform: translateY(14px) scale(0.96); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.crack.is-cracked .crack__payoff { opacity: 1; transform: none; }

/* ======================================================
   MUDD WORLD — EDITORIAL
   ====================================================== */
.world { background: var(--bone); color: var(--ink); }
.world .eyebrow { color: color-mix(in srgb, var(--ink) 55%, transparent); }
.sec-head--light .sec-title { color: var(--ink); }
.editorial {
  max-width: var(--maxw); margin-inline: auto;
  display: grid; gap: clamp(1rem, 2vw, 1.75rem); grid-template-columns: 1fr;
}
.story {
  display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius-lg); overflow: hidden;
  background: #fff; border: 1px solid var(--line-on-light);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.story:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(21,17,15,0.4); }
.story__media { aspect-ratio: 16 / 10; position: relative; overflow: hidden; }
.story__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.14)); }
.story__media[data-art="culture"] { background: linear-gradient(135deg, var(--f-original), var(--mudd-800)); }
.story__media[data-art="music"]   { background: linear-gradient(135deg, var(--f-volt), var(--mudd-900)); }
.story__media[data-art="people"]  { background: linear-gradient(135deg, var(--f-dragon), var(--mudd-800)); }
.story__media[data-art="events"]  { background: linear-gradient(135deg, var(--f-mango), var(--mudd-800)); }
.story__media[data-art="food"]    { background: linear-gradient(135deg, var(--f-lime), var(--mudd-900)); }
.story__body { padding: var(--space-3); display: grid; gap: 0.5rem; align-content: start; }
.story__cat { font: 700 0.68rem/1 "Space Mono", monospace; letter-spacing: 0.2em; color: color-mix(in srgb, var(--ink) 50%, transparent); }
.story__title { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: clamp(1.3rem, 1rem + 1.5vw, 2rem); color: var(--ink); }
.story__excerpt { color: rgba(21,17,15,0.62); font-size: 0.95rem; }
.story__link { font: 700 0.75rem/1 "Space Mono", monospace; letter-spacing: 0.12em; color: var(--ink); margin-top: 0.3rem; }
.story:hover .story__link { color: var(--f-original); }

/* ======================================================
   MUDD AFTER DARK — FILM
   ====================================================== */
.film { position: relative; display: grid; place-items: center; text-align: center; min-height: clamp(420px, 70vh, 760px); overflow: hidden; isolation: isolate; }
.film__poster { position: absolute; inset: 0; z-index: -2; }
.film__motion {
  position: absolute; inset: -20%;
  background:
    radial-gradient(40% 60% at 20% 30%, color-mix(in srgb, var(--f-volt) 60%, transparent), transparent 60%),
    radial-gradient(50% 50% at 80% 70%, color-mix(in srgb, var(--f-dragon) 55%, transparent), transparent 60%),
    linear-gradient(120deg, var(--mudd-black), var(--mudd-900));
  filter: blur(30px); animation: drift 18s var(--ease-in-out) infinite alternate;
}
.film::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 120% at 50% 50%, transparent 30%, rgba(0,0,0,0.75)); }
.film__grain { position: absolute; inset: 0; z-index: -1; opacity: 0.1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.film__inner { display: grid; justify-items: center; gap: var(--space-2); max-width: 680px; }
.film__title { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: var(--fs-h2); }
.film__text { color: var(--text-dim); max-width: 44ch; }
.film__play { margin-top: var(--space-2); }
.film__play-icon { width: 0; height: 0; border-left: 10px solid currentColor; border-block: 7px solid transparent; }

/* ======================================================
   MUDD GOODS — MERCH
   ====================================================== */
.goods { background: var(--bone-200); color: var(--ink); }
.merch-grid { max-width: var(--maxw); margin-inline: auto; display: grid; gap: clamp(0.85rem, 1.6vw, 1.5rem); grid-template-columns: repeat(2, 1fr); }
.merch { background: #fff; border: 1px solid var(--line-on-light); border-radius: var(--radius-lg); overflow: hidden; display: grid; grid-template-rows: auto auto; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.merch:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -24px rgba(21,17,15,0.4); }
.merch__media { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: linear-gradient(145deg, var(--mudd-800), var(--mudd-black)); }
.merch__media .garment { width: 62%; color: var(--bone); }
.merch__media .garment use { fill: currentColor; }
.merch__print { position: absolute; font: 400 clamp(0.6rem, 2.4vw, 0.95rem)/1 "Anton", sans-serif; letter-spacing: 0.08em; color: var(--gold); top: 50%; left: 50%; translate: -50% -10%; text-transform: uppercase; }
.merch__tag { position: absolute; top: 0.6rem; right: 0.6rem; font: 700 0.6rem/1 "Space Mono", monospace; letter-spacing: 0.1em; background: var(--f-dragon); color: #fff; padding: 0.35em 0.6em; border-radius: 999px; }
.merch__info { padding: var(--space-2) var(--space-3) var(--space-3); display: grid; gap: 0.6rem; }
.merch__name { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: clamp(1.05rem, 0.9rem + 1vw, 1.5rem); color: var(--ink); }
.merch__buy { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.goods .price { color: var(--ink); font-size: 1.1rem; }
.goods .btn--add { border-color: var(--ink); color: var(--ink); }
.goods .btn--add:hover { background: var(--ink); color: var(--bone); }

/* ======================================================
   DROPS
   ====================================================== */
.drops { background: linear-gradient(var(--mudd-950), var(--mudd-black)); }
.drop-list { max-width: var(--maxw); margin-inline: auto; display: grid; gap: clamp(0.85rem, 1.6vw, 1.5rem); }
.drop {
  display: grid; gap: var(--space-2); align-items: center;
  grid-template-columns: 1fr; padding: var(--space-3);
  border: 1px solid var(--line-on-dark); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--mudd-800) 60%, transparent);
  transition: border-color var(--dur-2) var(--ease);
}
.drop--live { border-color: color-mix(in srgb, var(--gold) 50%, transparent); background: linear-gradient(120deg, color-mix(in srgb, var(--f-original) 14%, var(--mudd-900)), var(--mudd-900)); }
.drop--locked { opacity: 0.6; }
.drop__no { font-family: "Anton", sans-serif; font-size: clamp(2.6rem, 2rem + 4vw, 5rem); line-height: 0.82; color: var(--gold); letter-spacing: 0.02em; }
.drop--soon .drop__no, .drop--locked .drop__no { color: var(--text-dim); }
.drop__body { display: grid; gap: 0.4rem; }
.drop__status { font: 700 0.7rem/1 "Space Mono", monospace; letter-spacing: 0.18em; color: var(--gold-soft); text-transform: uppercase; }
.drop--soon .drop__status { color: var(--text-dim); }
.drop__title { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: clamp(1.6rem, 1.2rem + 2.4vw, 3rem); }
.drop__text { color: var(--text-dim); max-width: 52ch; }
.drop__cta { justify-self: start; }

/* ======================================================
   NEWSLETTER + FOOTER
   ====================================================== */
.footer { background: var(--mudd-black); padding: var(--space-6) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom, 0)); border-top: 1px solid var(--line-on-dark); }
.footer__news { max-width: var(--maxw); margin-inline: auto; display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.footer__big { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: var(--fs-mega); line-height: 0.82; }
.news-form { display: flex; flex-wrap: wrap; gap: 0.6rem; max-width: 520px; }
.news-form input {
  flex: 1 1 220px; min-height: 48px; padding: 0 1rem; color: var(--text-on-dark);
  background: var(--mudd-900); border: 1px solid var(--line-on-dark); border-radius: var(--radius);
}
.news-form input::placeholder { color: var(--text-dim); }
.news-form input:focus-visible { border-color: var(--gold-soft); outline: none; }
.news-form__msg { flex-basis: 100%; font: 700 0.75rem/1.4 "Space Mono", monospace; color: var(--gold-soft); min-height: 1em; }
.footer__cols { max-width: var(--maxw); margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); padding-block: var(--space-4); border-top: 1px solid var(--line-on-dark); }
.footer__col { display: grid; gap: 0.5rem; align-content: start; }
.footer__h { font: 700 0.72rem/1 "Space Mono", monospace; letter-spacing: 0.2em; color: var(--gold-soft); }
.footer__col a { color: var(--text-dim); font-size: 0.92rem; transition: color var(--dur-1) var(--ease); }
.footer__col a:hover { color: var(--text-on-dark); }
.footer__base { max-width: var(--maxw); margin-inline: auto; padding-top: var(--space-4); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: baseline; }
.footer__statement { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: clamp(1.4rem, 1rem + 2.4vw, 2.6rem); color: var(--gold); }
.footer__legal { color: var(--text-dim); font-size: 0.75rem; }

/* ======================================================
   FILM MODAL
   ====================================================== */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--gutter); opacity: 0; visibility: hidden; transition: opacity var(--dur-2) var(--ease), visibility var(--dur-2); }
.modal[hidden] { display: grid; }
.modal.is-open { opacity: 1; visibility: visible; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.85); }
.modal__box { position: relative; width: min(960px, 100%); }
.modal__close { position: absolute; top: -2.5rem; right: 0; font: 700 0.75rem/1 "Space Mono", monospace; letter-spacing: 0.1em; color: var(--text-on-dark); min-height: 44px; }
.modal__screen { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; display: grid; place-items: center; border: 1px solid var(--line-on-dark); }
.film__motion--big { inset: -10%; }
.modal__soon { position: relative; z-index: 1; font: 700 clamp(0.75rem, 2.2vw, 1rem)/1.4 "Space Mono", monospace; letter-spacing: 0.18em; color: var(--text-on-dark); text-align: center; text-transform: uppercase; }

/* ======================================================
   TOAST
   ====================================================== */
.toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom,0) + 1.25rem); translate: -50% 120%;
  z-index: 150; background: var(--gold); color: var(--ink);
  padding: 0.75rem 1.25rem; border-radius: var(--radius); max-width: calc(100vw - 2rem);
  font: 700 0.78rem/1.3 "Space Mono", monospace; letter-spacing: 0.06em; text-align: center;
  box-shadow: 0 16px 40px -14px rgba(0,0,0,0.7); transition: translate var(--dur-2) var(--ease); pointer-events: none;
}
.toast.is-show { translate: -50% 0; }

/* ======================================================
   KEYFRAMES
   ====================================================== */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes breathe { 0%,100% { opacity: 0.45; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 0.7; transform: translate(-50%,-50%) scale(1.08); } }
@keyframes scrollcue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@keyframes drift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(4%, -3%) scale(1.1); } }
@keyframes bubbleup { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-120px) scale(1.1); } }

/* ======================================================
   RESPONSIVE — tablet & up
   ====================================================== */
@media (min-width: 600px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .merch-grid { grid-template-columns: repeat(3, 1fr); }
  .drop { grid-template-columns: auto 1fr auto; gap: var(--space-4); }
  .drop__cta { justify-self: end; }
}

@media (min-width: 768px) {
  .editorial {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
  }
  .story--wide { grid-column: span 2; grid-template-columns: 1.1fr 1fr; grid-template-rows: 1fr; }
  .story--wide .story__media { aspect-ratio: auto; height: 100%; min-height: 260px; }
  .campaign { grid-template-columns: 1fr 1fr; }
  .campaign__body { padding-right: var(--space-3); }
}

@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__menu { display: none; }
  .menu { display: none !important; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .editorial { grid-template-columns: repeat(3, 1fr); }
  .story--wide { grid-column: span 2; grid-template-columns: 1.3fr 1fr; }
  .merch-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (min-width: 1400px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Short landscape phones: let the hero breathe, never clip */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: calc(var(--header-h) + 1.5rem) 2.5rem; }
  .can--hero { height: clamp(120px, 22vh, 200px); }
  .hero__scroll { display: none; }
}

/* ======================================================
   REDUCED MOTION — content + function preserved, motion off
   ====================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero__glow, .film__motion, .can--hero, .can--campaign, .crack__can .can { animation: none !important; }
  .crack__payoff { opacity: 1; transform: none; } /* show payoff without relying on motion */
}

/* ======================================================
   OVERLAY STATE PATCHES (source-order wins)
   ====================================================== */
/* Menu must truly disappear (not focusable) when closed */
.menu[hidden] { display: none; }
/* Cart: hidden from a11y/focus when closed, animate on close */
.cart { visibility: hidden; transition: transform var(--dur-2) var(--ease), visibility var(--dur-2) var(--ease); }
.cart.is-open { visibility: visible; }
/* Fixed-nav offset so anchored headings aren't covered */
:where(section, .footer)[id],
#about { scroll-margin-top: calc(var(--header-h) + 10px); }

/* ======================================================
   THE MUDD PORTAL — immersive world hub, stacked on the site
   Default = in-flow first section (works with JS off).
   body.portal-on = JS upgrades it to a fixed, scroll-locked gate.
   ====================================================== */
.portal {
  position: relative; min-height: 100svh; min-height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--mudd-black); overflow: hidden; isolation: isolate;
  padding: calc(env(safe-area-inset-top, 0) + var(--space-3)) var(--gutter) calc(env(safe-area-inset-bottom, 0) + var(--space-3));
}
body.portal-on { overflow: hidden; }
body.portal-on .portal { position: fixed; inset: 0; z-index: var(--z-portal); overflow: hidden auto; }
body.portal-on .nav { opacity: 0; visibility: hidden; pointer-events: none; }
/* keep the portal fixed/overlaying while it animates out, so revealing the
   site underneath doesn't cause a layout jump */
.portal.is-exiting { position: fixed; inset: 0; z-index: var(--z-portal); overflow: hidden; }
.portal.is-out { transform: translateY(-7%); opacity: 0; pointer-events: none;
  transition: transform var(--dur-3) var(--ease), opacity var(--dur-3) var(--ease); }
.portal[hidden] { display: none; }

/* atmosphere */
.portal__atmos { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.portal__glow {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: min(130vw, 1100px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--flavor) 50%, transparent), transparent 62%);
  filter: blur(55px); opacity: 0.5; animation: breathe 10s var(--ease-in-out) infinite;
}
.portal__grain { position: absolute; inset: 0; opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.portal__bubbles { position: absolute; inset: 0; overflow: hidden; }
.portal__bubbles .pbub { position: absolute; bottom: -24px; border-radius: 50%;
  background: color-mix(in srgb, var(--flavor) 60%, #fff); opacity: 0; }

/* top bar */
.portal__bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.portal__brand { font: 400 clamp(1rem, 0.85rem + 0.9vw, 1.5rem)/0.82 "Anton", sans-serif; display: grid; }
.portal__brand b { color: var(--gold); font-weight: 400; }
.portal__meta { display: grid; justify-items: end; gap: 3px; text-align: right; }
.portal__clock { font: 700 clamp(0.8rem, 0.7rem + 0.5vw, 1.05rem)/1 "Space Mono", monospace; color: var(--gold-soft); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.portal__loc { font: 700 0.6rem/1 "Space Mono", monospace; letter-spacing: 0.2em; color: var(--text-dim); text-transform: uppercase; }

/* stage */
.portal__stage { position: relative; z-index: 1; flex: 1; display: grid; align-content: center; gap: var(--space-3); padding-block: var(--space-3); }
.portal__lead { display: grid; justify-items: start; gap: var(--space-2); max-width: 40ch; }
.portal__title { font-family: "Anton", sans-serif; text-transform: uppercase; font-size: clamp(2.6rem, 1.6rem + 6vw, 6rem); }
.portal__title .accent { font-style: normal; }
.portal__line { color: var(--text-dim); font-size: var(--fs-lead); max-width: 32ch; }
.portal__line em { color: var(--flavor); font-style: italic; }
.portal__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: var(--space-2); }
.portal__skip { font: 700 0.72rem/1 "Space Mono", monospace; letter-spacing: 0.12em; color: var(--text-dim); text-transform: uppercase; min-height: 44px; padding: 0 0.25rem; }
.portal__skip:hover { color: var(--text-on-dark); text-decoration: underline; }

/* core can (desktop centerpiece; hidden on small to keep the hub tight) */
.portal__core { display: none; position: relative; place-items: center; justify-self: center; }
.portal__core-glow { position: absolute; width: 130%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--flavor) 55%, transparent), transparent 60%); filter: blur(38px); opacity: 0.45; z-index: -1; }
.portal__core .can { height: clamp(280px, 44vh, 440px); filter: drop-shadow(0 30px 44px rgba(0,0,0,0.55)); animation: float 6s var(--ease-in-out) infinite; }

/* module tiles */
.portal__modules { display: grid; gap: 0.6rem; grid-template-columns: 1fr; }
.pmod {
  display: grid; grid-template-columns: auto 1fr auto;
  grid-template-areas: "no name go" "no desc go";
  align-items: center; column-gap: 0.9rem; text-align: left;
  padding: 0.8rem 1rem; min-height: 60px;
  border: 1px solid var(--line-on-dark); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--mudd-800) 66%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.pmod:hover, .pmod:focus-visible { transform: translateY(-3px); border-color: color-mix(in srgb, var(--flavor) 70%, transparent); background: color-mix(in srgb, var(--flavor) 14%, var(--mudd-800)); }
.pmod__no { grid-area: no; align-self: center; font: 700 0.8rem/1 "Space Mono", monospace; color: var(--flavor); }
.pmod__name { grid-area: name; align-self: end; line-height: 1; font-family: "Anton", sans-serif; text-transform: uppercase; font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem); }
.pmod__desc { grid-area: desc; align-self: start; font: 400 0.76rem/1.2 "Inter", sans-serif; color: var(--text-dim); }
.pmod__go { grid-area: go; align-self: center; font: 700 1.1rem/1 "Space Mono", monospace; color: var(--flavor); transition: transform var(--dur-1) var(--ease); }
.pmod:hover .pmod__go { transform: translateX(4px); }

/* foot */
.portal__foot { position: relative; z-index: 2; display: grid; gap: 0.75rem; }
.portal__marquee { overflow: hidden; border-block: 1px solid var(--line-on-dark); padding-block: 0.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.portal__track { display: inline-flex; white-space: nowrap; animation: marquee 28s linear infinite; }
.portal__track span { font: 700 0.75rem/1 "Space Mono", monospace; letter-spacing: 0.14em; color: var(--text-dim); text-transform: uppercase; }
.portal__social { display: flex; gap: 1rem; justify-content: center; }
.portal__social a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 0.3rem; font: 700 0.72rem/1 "Space Mono", monospace; letter-spacing: 0.14em; color: var(--text-dim); }
.portal__social a:hover { color: var(--gold-soft); }

/* crack-in flood */
.portal__flood { position: absolute; left: 50%; top: 55%; width: 12px; height: 12px; border-radius: 50%;
  background: var(--flavor); translate: -50% -50%; scale: 0; opacity: 0; z-index: 5; pointer-events: none; }
.portal.is-flooding .portal__flood { animation: flood 0.62s var(--ease) forwards; }

/* nav re-entry button */
.nav__portal { display: inline-flex; align-items: center; gap: 0.45em; min-height: 44px; padding: 0 0.5rem;
  font: 700 0.72rem/1 "Space Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.nav__portal:hover { color: var(--gold-soft); }
.nav__portal-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); animation: pulse 2.6s var(--ease-in-out) infinite; }
.nav__portal-label { display: none; }

/* mobile menu entry (gold pill at top) */
.menu__portal { justify-self: start; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px;
  padding: 0.7rem 1.15rem; margin-bottom: 0.5rem; border-radius: 999px;
  background: var(--gold); color: var(--ink); font: 700 0.9rem/1 "Space Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; }
.menu__portal span { color: inherit; font-size: 1rem; }
.menu__portal:hover { background: var(--gold-soft); }

@keyframes flood { 0% { scale: 0; opacity: 0.92; } 70% { opacity: 0.92; } 100% { scale: 70; opacity: 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes pbub { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 15% { opacity: 0.5; } 100% { transform: translateY(-82vh) scale(1.1); opacity: 0; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 35%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--gold) 0%, transparent); } }

/* portal — tablet/desktop command-center layout */
@media (min-width: 900px) {
  .portal__stage { grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: clamp(1.5rem, 3vw, 3.5rem); }
  .portal__core { display: grid; }
  .portal__lead { max-width: none; }
  .portal__modules { align-self: center; }
  .nav__portal-label { display: inline; }
}

@media (min-width: 1200px) {
  .portal__modules { grid-template-columns: 1fr 1fr; }
}

/* portal — reduced motion */
@media (prefers-reduced-motion: reduce) {
  .portal__glow, .portal__core .can, .portal__track, .nav__portal-dot, .portal__bubbles { animation: none !important; }
  .portal.is-flooding .portal__flood { animation: none !important; }
}