/* ==========================================================================
   MAMUTE ENERGY — landing inspirada na estrutura de ciaoenergy.com
   --------------------------------------------------------------------------
   Sumário
   01. Tokens (cores, fontes, espaçamentos) + temas por sabor
   02. Reset e base
   03. Utilitários e componentes (botões, logo, eyebrow, lata)
   04. Loader
   05. Navbar e menu
   06. HUD
   07. Hero
   08. Manifesto + Sabores (painéis horizontais)
   09. Por dentro da lata + Tamanhos
   10. Argumento
   11. Momentos + Revenda
   12. FAQ
   13. Frase final (marquee)
   14. Newsletter + rodapé
   15. Animações de entrada
   16. Responsivo (tablet / celular)
   17. Movimento (app.js)
   ========================================================================== */


/* ==========================================================================
   01. TOKENS
   Cores neutras extraídas da referência:
   fundo #000 · texto #FFF · texto suave rgba(255,255,255,.6/.5/.3)
   botão claro #FFF/#000 raio 7px · botão redondo rgba(255,255,255,.05) raio 640px
   Cores de sabor extraídas das latas Mamute.
   ========================================================================== */

/* @property permite animar a troca de cor entre sabores */
@property --accent { syntax: "<color>"; inherits: true; initial-value: #F5C400; }
@property --deep   { syntax: "<color>"; inherits: true; initial-value: #1F1A00; }
@property --glow   { syntax: "<color>"; inherits: true; initial-value: rgba(245, 196, 0, .32); }

:root {
  /* Neutros */
  --black: #000000;
  --white: #FFFFFF;
  --text-soft: rgba(255, 255, 255, .6);
  --text-muted: rgba(255, 255, 255, .5);
  --text-faint: rgba(255, 255, 255, .3);
  --line: rgba(255, 255, 255, .2);
  --surface: rgba(255, 255, 255, .05);
  --surface-hover: rgba(255, 255, 255, .12);

  /* Tipografia */
  --font-body: "Geist", "Inter", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-display: "Libre Franklin", "Franklin Gothic Heavy", Arial, sans-serif;

  /* Espaçamentos */
  --gutter: clamp(1rem, 3.2vw, 2.5rem);   /* 16px no celular -> 40px no desktop */
  --section-y: clamp(5rem, 12vw, 10rem);
  --container: 1440px;
  --nav-h: clamp(4.5rem, 7vw, 6rem);

  /* Raios */
  --radius-btn: 7px;
  --radius-pill: 640px;
  --radius-card: 20px;

  /* Movimento */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .6s;
}

/* Tema padrão / Original — preto e amarelo */
body,
[data-flavor="original"] {
  --accent: #F5C400;
  --accent-ink: #0B0B0B;
  --deep: #1F1A00;
  --glow: rgba(245, 196, 0, .32);
}
/* Tropical — amarelo quente puxado para o laranja */
[data-flavor="tropical"] {
  --accent: #FFD23F;
  --accent-ink: #1A1400;
  --deep: #3A2600;
  --glow: rgba(255, 170, 30, .36);
}
/* Melancia — vermelho + verde da casca */
[data-flavor="melancia"] {
  --accent: #E3262B;
  --accent-ink: #FFFFFF;
  --deep: #3D0709;
  --glow: rgba(227, 38, 43, .38);
}
/* Maçã Verde — verde-limão */
[data-flavor="maca-verde"] {
  --accent: #7AC943;
  --accent-ink: #0B1F02;
  --deep: #0F2E06;
  --glow: rgba(122, 201, 67, .34);
}


/* ==========================================================================
   02. RESET E BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: --accent var(--dur) var(--ease), --deep var(--dur) var(--ease), --glow var(--dur) var(--ease);
}
body.is-loading,
body.menu-open { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
svg { display: block; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }


/* ==========================================================================
   03. UTILITÁRIOS E COMPONENTES
   ========================================================================== */
.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: .75rem; left: .75rem; z-index: 200;
  padding: .75rem 1rem; background: var(--white); color: var(--black);
  border-radius: var(--radius-btn); transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { position: relative; }

/* Título de exibição: Franklin pesado, itálico, caixa alta, entrelinha curta */
.display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  line-height: .86;
  letter-spacing: -.02em;
}

.eyebrow,
.link-mono {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow { display: inline-block; color: var(--accent); margin-bottom: 1.25rem; }
.link-mono { color: var(--white); transition: opacity .25s; }
a.link-mono:hover { opacity: .6; }
.is-muted { color: var(--text-muted); }

.lead {
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.55;
  color: var(--text-soft);
  max-width: 34ch;
}

/* Botões ------------------------------------------------------------------ */
.btn {
  --btn-bg: var(--white);
  --btn-fg: var(--black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.1rem 1.35rem;               /* 17.5px 21px como na referência */
  border-radius: var(--radius-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transform: translate(var(--mx, 0px), var(--my, 0px));   /* --mx/--my: efeito magnético (fx.js) */
  transition: transform .45s var(--ease), box-shadow .35s var(--ease), background-color .3s, color .3s;
}
.btn:hover {
  transform: translate(var(--mx, 0px), calc(var(--my, 0px) - 2px));
  box-shadow: 0 10px 30px -10px rgba(255, 255, 255, .45);
}
.btn:active { transform: translate(var(--mx, 0px), var(--my, 0px)) scale(.97); }

.btn--light { --btn-bg: var(--white); --btn-fg: var(--black); }
.btn--accent { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); }
.btn--accent:hover { box-shadow: 0 10px 30px -10px var(--glow); }
.btn--nav { padding: .8rem 1.1rem; font-size: .78rem; }   /* 12.6px 17.5px */

/* Botão redondo (setas do carrossel) */
.icon-btn {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--white);
  transition: background-color .3s, transform .35s var(--ease), border-color .3s;
}
.icon-btn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn { transform: translate(var(--mx, 0px), var(--my, 0px)); }
.icon-btn:hover { background: var(--surface-hover); border-color: rgba(255, 255, 255, .45); transform: translate(var(--mx, 0px), var(--my, 0px)) scale(1.06); }
.icon-btn:disabled { opacity: .3; pointer-events: none; }

/* Logo: símbolo do mamute (SVG) + nome ---------------------------------- */
.logo { display: inline-flex; align-items: center; gap: .65rem; line-height: 1; }
.logo__mark { width: 2.7rem; height: auto; flex: none; color: var(--accent); transition: transform .6s var(--ease), color .6s; }
.logo:hover .logo__mark { transform: rotate(-8deg) scale(1.06); }
.logo__text { display: flex; flex-direction: column; transform: skewX(-6deg); }
.logo__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.03em;
  font-size: 1.5rem;
}
.logo__tag {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .5rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: .2rem;
}

/* Lata (PNG/WebP com fundo transparente) ---------------------------------- */
.can {
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55));
  user-select: none;
  -webkit-user-drag: none;
}


/* Lata 3D (can3d.js) --------------------------------------------------------
   Canvas fixo por cima dos fundos das seções e por baixo dos textos.
   Com o 3D ativo, as fotos viram só "âncoras" invisíveis de posição. */
.can3d {
  position: fixed; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none;
}
.has-can3d [data-can-anchor] { visibility: hidden; }
.has-can3d .can--tilt.is-swapping { transform: rotate(14deg); }   /* evita salto da âncora na troca */

/* Textos acima da lata */
.hero__aside, .flavor-rail, .moments .container, .sizes .container,
.argument__copy, .resale__copy, .faq__grid, .last__inner, .footer { position: relative; z-index: 3; }
.hero__scroll { z-index: 3; }
body.is-over-can { cursor: grab; }
body.is-grabbing, body.is-grabbing * { cursor: grabbing !important; user-select: none; }

/* Troca de sabor: a nova cor inunda a tela a partir do clique (fx.js) */
.flood {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  clip-path: circle(0 at var(--fx) var(--fy));
  opacity: .92;
  transition: clip-path .8s cubic-bezier(.7, 0, .3, 1), opacity .75s ease;
}
.flood.is-on { clip-path: circle(150% at var(--fx) var(--fy)); }
.flood.is-out { opacity: 0; }


/* ==========================================================================
   04. LOADER
   ========================================================================== */
.loader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; align-content: center; gap: 1.6rem;
  background: var(--black);
  transition: opacity .8s var(--ease), visibility .8s;
}
.loader__mark { width: min(46vw, 260px); height: auto; overflow: visible; }
.loader__mark-dim { color: rgba(255, 255, 255, .08); }
.loader__mark-fill { color: var(--accent); }
.loader__brand { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .4em; text-transform: uppercase; color: var(--text-muted); }
.loader__count {
  position: absolute;
  bottom: 10vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .4em;
}
/* Saída em cortina: sobe revelando a página */
body:not(.is-loading) .loader {
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 1.1s cubic-bezier(.76, 0, .24, 1), visibility 0s 1.1s;
}
body:not(.is-loading) .loader > * { transform: translateY(-40px); opacity: 0; transition: transform .8s var(--ease), opacity .5s; }

@keyframes loader-pulse { 50% { opacity: .45; } }


/* ==========================================================================
   05. NAVBAR E MENU
   ========================================================================== */
.navbar {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* garante logo exatamente no centro */
  align-items: center;
  padding-inline: var(--gutter);
  pointer-events: none;                  /* só os filhos recebem clique */
}
.navbar > * { pointer-events: auto; }
.navbar::before {                        /* degradê para legibilidade sobre o conteúdo */
  content: ""; position: absolute; inset: 0 0 -40%; z-index: -1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .75), transparent);
  pointer-events: none;
}

.logo--nav { justify-self: center; transition: opacity .3s; }
.navbar, .hud { transition: color .5s var(--ease); }
.navbar::before { transition: opacity .5s var(--ease); }
body.on-light .navbar { color: #0B0B0B; }
body.on-light .navbar::before { opacity: 0; }
body.on-light .logo__mark, body.on-light .logo__tag { color: #0B0B0B; }
body.on-light .hud { color: #0B0B0B; }
body.on-light .hud__corner { border-color: rgba(0, 0, 0, .45); }
body.on-light .hud__side { color: rgba(0, 0, 0, .55); }
.logo--nav:hover { opacity: .8; }

.navbar__actions { justify-self: end; display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.75rem); }

.menu-btn {
  justify-self: start;
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .5rem 0;
  transition: opacity .25s;
}
.menu-btn__dots {                         /* ícone de 4 pontos "::" */
  width: 8px; height: 8px;
  background:
    radial-gradient(circle, currentColor 1.1px, transparent 1.3px) 0 0 / 4px 4px;
}
.menu-btn { transform: translate(var(--mx, 0px), var(--my, 0px)); transition: opacity .25s, transform .45s var(--ease); }
.menu-btn:hover { opacity: .6; }

/* Menu em tela cheia */
.menu {
  position: fixed; inset: 0; z-index: 150;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--gutter);
  background: rgba(0, 0, 0, .96);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.menu.is-open { opacity: 1; }
.menu[hidden] { display: none; }

.menu__top { display: flex; justify-content: space-between; align-items: center; min-height: calc(var(--nav-h) - var(--gutter)); }
.menu__label { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.menu__close { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border-radius: var(--radius-pill); background: var(--surface); transition: background-color .3s, transform .4s var(--ease); }
.menu__close:hover { background: var(--surface-hover); transform: rotate(90deg); }
.menu__close svg { width: 1.1rem; height: 1.1rem; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  font-family: var(--font-display); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.5rem, 8vw, 6rem); line-height: 1;
  padding: .65rem 0;
  border-bottom: 1px solid var(--line);
  transform: translateY(20px); opacity: 0;
  transition: color .3s, padding-left .4s var(--ease), transform .6s var(--ease), opacity .6s var(--ease);
}
.menu.is-open .menu__links a { transform: none; opacity: 1; }
.menu.is-open .menu__links a:nth-child(2) { transition-delay: .05s; }
.menu.is-open .menu__links a:nth-child(3) { transition-delay: .1s; }
.menu.is-open .menu__links a:nth-child(4) { transition-delay: .15s; }
.menu__links a:hover { color: var(--accent); padding-left: 1rem; }

.menu__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; }
.menu__social { display: flex; gap: 2rem; flex-wrap: wrap; }


/* ==========================================================================
   06. HUD — molduras e barra de progresso (fixo, decorativo)
   ========================================================================== */
.hud { position: fixed; inset: 0; z-index: 90; pointer-events: none; }

.hud__corner {
  position: absolute; width: 10px; height: 10px;
  border: 1px solid rgba(255, 255, 255, .55);
}
.hud__corner--tl { top: calc(var(--nav-h) + .5rem); left: var(--gutter); border-right: 0; border-bottom: 0; }
.hud__corner--tr { top: calc(var(--nav-h) + .5rem); right: var(--gutter); border-left: 0; border-bottom: 0; }
.hud__corner--bl { bottom: var(--gutter); left: var(--gutter); border-right: 0; border-top: 0; }
.hud__corner--br { bottom: var(--gutter); right: var(--gutter); border-left: 0; border-top: 0; }

.hud__side {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: .62rem; line-height: 1.9; text-align: center;
  color: var(--text-muted);
}
.hud__side--left { left: .7rem; }
.hud__side--right { right: .7rem; }

.hud__energy {
  position: absolute; right: calc(.7rem + 3px); top: 60%;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.hud__energy-bar {
  position: relative; width: 3px; height: 16vh;
  border-radius: 3px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.hud__energy-bar span {
  position: absolute; inset: 0;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  transform-origin: bottom; transform: scaleY(var(--energy, 0));
}
.hud__energy-label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-mono); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-muted);
}
.hud__energy-label b { color: var(--accent); font-weight: 500; }
body.on-light .hud__energy-label { color: rgba(0, 0, 0, .55); }
body.on-light .hud__energy-bar { background: rgba(0, 0, 0, .15); }
.hud__progress {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: rgba(255, 255, 255, .06);
}
.hud__progress span {
  display: block; height: 100%; width: 100%;
  background: var(--accent);
  transform-origin: left; transform: scaleX(var(--progress, 0));
}


/* ==========================================================================
   07. HERO
   A lata fica em pé no centro, sobre a linha do chão, na frente do letreiro
   MAMUTE gigante. Cantos: frase da marca (sup. esq.), destaques (sup. dir.),
   sabor atual (inf. esq.), trilho de sabores (inf. dir.).
   ========================================================================== */
.hero {
  --pad: calc(var(--gutter) + 2rem);
  --floor-b: max(21svh, 10.5rem);        /* distância do chão até a base da tela (nunca cobre o texto de baixo) */
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  /* Luz cinza vinda do canto (como na referência) */
  background:
    radial-gradient(90% 80% at 0% 100%, rgba(255, 255, 255, .12), transparent 60%),
    linear-gradient(160deg, #0a0a0a 0%, #000 55%, #111 100%);
}

/* Cantos superiores */
.hero__claim {
  position: absolute; z-index: 3;
  top: calc(var(--nav-h) + 2.4rem); left: var(--pad);
  font-family: var(--font-display); font-style: italic; font-weight: 800; text-transform: uppercase;
  font-size: clamp(1rem, 1.35vw, 1.4rem); line-height: 1.05;
}
.hero__facts {
  position: absolute; z-index: 3;
  top: calc(var(--nav-h) + 2.4rem); right: var(--pad);
  display: grid; gap: .5rem; justify-items: end;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted);
}
.hero__facts li { display: flex; align-items: center; gap: .6rem; }
.hero__facts li::after { content: ""; width: 5px; height: 5px; background: var(--accent); }

/* Palco: ocupa a tela toda; a lata fica em pé sobre .hero__floor */
.hero__stage {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: var(--floor-b);
  pointer-events: none;
}
/* Feixe de luz de palco descendo sobre a lata */
.hero__beam {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: conic-gradient(from 180deg at 50% -12%, rgba(255, 255, 255, .12) 0deg, var(--glow) 5deg, transparent 14deg 346deg, var(--glow) 355deg, rgba(255, 255, 255, .12) 360deg);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 85%);
          mask-image: linear-gradient(to bottom, #000 30%, transparent 85%);
  filter: blur(12px);
  opacity: .75;
  animation: beam 5s ease-in-out infinite alternate;
}
@keyframes beam { from { opacity: .5; } to { opacity: .9; } }

/* Brilho do sabor atrás da lata + fumaça colorida nas laterais */
.hero__glow {
  position: absolute; inset: 0 -10% 10%;
  z-index: 0;
  background:
    radial-gradient(18% 30% at 50% 50%, var(--glow), transparent 75%),
    radial-gradient(22% 30% at 24% 62%, var(--glow), transparent 70%),
    radial-gradient(20% 28% at 76% 44%, var(--glow), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

/* Letreiro gigante: as letras "moram" abaixo da linha do chão e saltam na pisada.
   --k = posição da letra a partir do centro (fx.js) · --hp = saída do hero (0–1)
   --px/--py = mouse (profundidade) · --d = atraso da onda a partir da lata */
.hero__word {
  position: absolute; z-index: 1;
  left: 50%; bottom: calc(var(--floor-b) - .03em);
  display: flex;
  font-family: var(--font-display); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: min(19.5vw, 34svh); line-height: .8; letter-spacing: -.045em;   /* telas baixas: limita pela altura */
  white-space: nowrap;
  color: var(--accent);
  transform: translateX(calc(-50% - .03em));   /* compensa a inclinação do itálico */
  translate: calc(var(--px, 0) * -16px) calc(var(--py, 0) * -8px);
  opacity: calc(1 - var(--hp, 0) * 1.25);
  clip-path: inset(-60% -10% 0 -10%);    /* nada aparece abaixo do chão */
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, rgba(0, 0, 0, .28));
          mask-image: linear-gradient(to bottom, #000 35%, rgba(0, 0, 0, .28));
  user-select: none;
}
.hero__word span {
  display: inline-block;
  translate: calc(var(--k, 0) * var(--hp, 0) * 11vw) calc(var(--hp, 0) * -5vh);
}
.js .hero__word span { transform: translateY(108%); }
.hero__word.is-up span { transform: none; transition: transform 1s cubic-bezier(.2, 1.3, .35, 1) var(--d, 0s); }
.hero__word.is-jump span { animation: word-jump .75s cubic-bezier(.3, .7, .3, 1) var(--d, 0s) both; }
@keyframes word-jump {
  0%   { transform: none; }
  25%  { transform: translateY(calc(var(--amp, 1) * -14%)); }
  55%  { transform: translateY(calc(var(--amp, 1) * 2%)); }
  100% { transform: none; }
}

/* Tremor da pisada (fx.js liga .is-shake com --amp) */
.hero.is-shake { animation: hero-shake .5s linear; }
@keyframes hero-shake {
  0%, 100% { translate: 0 0; }
  12% { translate: calc(var(--amp, 1) * -7px) calc(var(--amp, 1) * 6px); }
  26% { translate: calc(var(--amp, 1) * 6px) calc(var(--amp, 1) * -4px); }
  42% { translate: calc(var(--amp, 1) * -4px) calc(var(--amp, 1) * 3px); }
  60% { translate: calc(var(--amp, 1) * 2px) calc(var(--amp, 1) * -2px); }
  80% { translate: calc(var(--amp, 1) * -1px) 0; }
}

.can--hero {
  position: relative; z-index: 2;
  height: clamp(260px, min(60svh, calc(100svh - var(--floor-b) - var(--nav-h) - 2rem)), 660px);
  width: auto;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.can.is-swapping { opacity: 0; transform: translateY(16px) scale(.97); }

/* Linha do chão: o centro deste elemento = base da lata.
   Sem WebGL vira a sombra da foto; com 3D o chão é desenhado na cena. */
.hero__floor {
  position: relative; z-index: 1;
  width: clamp(200px, 22vw, 360px); height: 28px;
  margin-top: -14px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(0, 0, 0, .9), transparent),
    radial-gradient(closest-side, var(--glow), transparent);
}

/* Dica "Arraste para girar" ao lado da lata */
.hero__hint {
  position: absolute; z-index: 3; top: 34%;
  left: calc(50% + clamp(110px, 9vw, 170px));
  display: none; align-items: center; gap: .65rem;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-soft);
  white-space: nowrap;
  transition: opacity .6s;
}
.has-can3d .hero__hint { display: inline-flex; }
.hero__hint i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: hint-ping 1.8s ease-out infinite; }
.hero__hint.is-used { opacity: 0; }
@keyframes hint-ping {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent); }
  to   { box-shadow: 0 0 0 14px transparent; }
}

/* Cantos inferiores: sabor atual e trilho de sabores */
.hero__aside {
  position: absolute; z-index: 3;
  left: var(--pad); bottom: 2.4rem;
  max-width: 22rem;
}
.hero__title {
  font-size: clamp(2.2rem, 3.8vw, 3.9rem);
  margin: .55rem 0 .4rem;
}
.hero__tagline {
  font-size: clamp(.95rem, 1.1vw, 1.12rem);
  line-height: 1.35;
  color: var(--text-soft);
}

.flavor-rail {
  position: absolute; z-index: 3;
  right: var(--pad); bottom: 2.4rem;
  display: flex; gap: .8rem;
}
.flavor-rail__btn {
  width: 3.25rem; height: 3.25rem;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--text-muted);
  transition: color .3s, background-color .3s, border-color .3s, transform .4s var(--ease), box-shadow .4s var(--ease);
}
.flavor-rail__btn svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.flavor-rail__btn circle { fill: currentColor; stroke: none; }
.flavor-rail__btn { transform: translate(var(--mx, 0px), var(--my, 0px)); }
.flavor-rail__btn:hover { color: var(--white); background: var(--surface-hover); transform: translate(var(--mx, 0px), var(--my, 0px)) scale(1.08); }
.flavor-rail__btn[aria-selected="true"] {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 24px -4px var(--glow);
}

/* Indicador "role para descobrir" */
.hero__scroll {
  position: absolute; z-index: 3; left: 50%; bottom: 2.4rem; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
}
.hero__scroll .link-mono { color: var(--text-faint); font-size: .65rem; }
.hero__scroll-track {
  position: relative; display: block;
  width: clamp(120px, 14vw, 220px); height: 1px;
  background: rgba(255, 255, 255, .15); overflow: hidden;
}
.hero__scroll-track span {
  position: absolute; inset: 0; width: 30%;
  background: var(--white);
  animation: scroll-hint 2.2s var(--ease) infinite;
}
@keyframes scroll-hint { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* Os textos do hero saem junto com o letreiro ao rolar */
.hero__claim, .hero__facts, .hero__aside, .flavor-rail, .hero__scroll { opacity: calc(1 - var(--hp, 0) * 2); }


/* ==========================================================================
   08. MANIFESTO + SABORES
   Manifesto: seção alta com o conteúdo preso na tela; as palavras acendem
   conforme a rolagem (fx.js). Sabores: 4 painéis coloridos num trilho
   horizontal movido pela rolagem vertical; a lata 3D fica no centro.
   ========================================================================== */

/* Posição da lata 3D (âncora invisível) */
.can-slot { pointer-events: none; aspect-ratio: .5; }

/* --- Manifesto --- */
.manifesto { height: 240vh; background: #000; }
.manifesto__sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
  background: radial-gradient(50% 60% at 78% 55%, var(--glow), transparent 70%);
}
.manifesto__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.manifesto__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 3.5vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -.02em;
}
.manifesto__text em { font-style: inherit; color: var(--accent); }
.manifesto__text .sw { transition: opacity .3s linear; }
.manifesto__slot { justify-self: center; height: clamp(300px, 68vh, 640px); }

/* --- Sabores --- */
.flavors { height: 460vh; }
.flavors::before,
.inside::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -89px; z-index: 1;
  height: 90px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='90'%3E%3Cpath d='M0 90V45Q90 0 180 45T360 45V90Z'/%3E%3C/svg%3E") 0 100% / 360px 90px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='90'%3E%3Cpath d='M0 90V45Q90 0 180 45T360 45V90Z'/%3E%3C/svg%3E") 0 100% / 360px 90px repeat-x;
  animation: edge-flow 3.2s linear infinite;
  pointer-events: none;
}
.flavors::before { background: #F5C400; }          /* mesma cor do primeiro painel */
.inside::before { background: #050505; }           /* mesma cor da seção seguinte */
@keyframes edge-flow { to { -webkit-mask-position: 360px 100%; mask-position: 360px 100%; } }
.flavors__sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
.flavors__track { display: flex; width: 400%; height: 100%; will-change: transform; }

/* Cores de cada painel: fundo contrastando com a lata para ela "saltar" */
/* --p-solid = cor da borda do painel · --p-prev = cor da borda do painel anterior (onda) */
.flavor-panel--original   { --p-solid: #F5C400; --p-bg: radial-gradient(42% 60% at 50% 46%, #FFE066, #F5C400 100%); --p-ink: #0B0B0B; --p-deco: #0B0B0B; --p-giant: rgba(0, 0, 0, .09); }
.flavor-panel--tropical   { --p-solid: #0A7F82; --p-prev: #F5C400; --p-bg: radial-gradient(42% 60% at 50% 44%, #19C2BC, #0A7F82 100%); --p-ink: #FFE45C; --p-deco: #FFE45C; --p-giant: rgba(255, 255, 255, .08); }
.flavor-panel--melancia   { --p-solid: #0E6E36; --p-prev: #0A7F82; --p-bg: radial-gradient(42% 60% at 50% 44%, #22B25C, #0E6E36 100%); --p-ink: #FFFFFF; --p-deco: #FF4B55; --p-giant: rgba(255, 255, 255, .07); }
.flavor-panel--maca-verde { --p-solid: #E4ECC6; --p-prev: #0E6E36; --p-bg: radial-gradient(42% 60% at 50% 44%, #FFFFFF, #E4ECC6 100%); --p-ink: #17420F; --p-deco: #7AC943; --p-giant: rgba(23, 66, 15, .08); }

.flavor-panel {
  position: relative;
  flex: 0 0 25%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr minmax(220px, 30vw) 1fr;
  align-items: center;
  gap: 2rem;
  padding: calc(var(--nav-h) + 1rem) calc(var(--gutter) + 2.5rem) 5rem;
  overflow: hidden;
  background: var(--p-bg), var(--p-solid);
  color: var(--p-ink);
}

/* Emenda líquida: a borda esquerda de cada painel é uma onda na cor do painel anterior */
.flavor-panel + .flavor-panel::before {
  content: "";
  position: absolute; left: 0; top: -20%; bottom: -20%; z-index: 0;
  width: 80px;
  background: var(--p-prev);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='260'%3E%3Cpath d='M0 0H40Q80 65 40 130T40 260H0Z'/%3E%3C/svg%3E") 0 0 / 80px 260px repeat-y;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='260'%3E%3Cpath d='M0 0H40Q80 65 40 130T40 260H0Z'/%3E%3C/svg%3E") 0 0 / 80px 260px repeat-y;
  animation: seam-flow 2.4s linear infinite;
  opacity: calc(1 - var(--vis, 0));                /* só aparece durante a transição */
  pointer-events: none;
}
@keyframes seam-flow { to { -webkit-mask-position: 0 260px; mask-position: 0 260px; } }

/* Nome gigante ao fundo (anda mais devagar que o painel: parallax) */
.flavor-panel__giant {
  position: absolute; left: 50%; bottom: -.14em;
  font-family: var(--font-display); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: 23vw; line-height: 1; letter-spacing: -.04em; white-space: nowrap;
  color: var(--p-giant);
  translate: calc(-50% + var(--rel, 0) * 30vw) 0;
  pointer-events: none;
}

/* Ilustrações flutuando em volta da lata */
.flavor-panel__deco { position: absolute; inset: 0; pointer-events: none; }
.deco {
  position: absolute;
  width: max(var(--s), 44px); height: auto;
  fill: var(--p-deco);
  rotate: var(--r);
  translate: calc(var(--rel, 0) * var(--px) * 1vw) 0;
  animation: deco-float 7s ease-in-out infinite alternate;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .18));
}
.deco--1 { --s: 8vw; --r: -14deg; --px: 16; top: 12%; left: 34%; }
.deco--2 { --s: 4.5vw; --r: 18deg; --px: 32; top: 66%; left: 29%; animation-delay: -2s; }
.deco--3 { --s: 6.5vw; --r: 10deg; --px: 24; top: 18%; left: 62%; animation-delay: -4s; }
.deco--4 { --s: 3.6vw; --r: -24deg; --px: 42; top: 70%; left: 66%; animation-delay: -1s; }
@keyframes deco-float { from { transform: translateY(-12px); } to { transform: translateY(14px); } }
.deco--kiwi .skin { fill: #7A5A2E; }
.deco--kiwi .flesh { fill: #8DD13A; }
.deco--kiwi .core { fill: #F4F7D0; }
.deco--kiwi .seeds { fill: #1A1A1A; }
.deco--passion .skin { fill: #6B2A5E; }
.deco--passion .pulp { fill: #FFC21A; }
.deco--passion .seeds { fill: #2B1A0A; }
.deco--pineapple .skin { fill: #C98A12; }
.deco--pineapple .flesh { fill: #FFE14D; }
.deco--pineapple .rays { fill: none; stroke: #E9B21C; stroke-width: .6; }
.deco--pineapple .core { fill: #FFF3A6; }
.flavor-panel--melancia .deco .flesh { fill: #FF4B55; }
.flavor-panel--melancia .deco .rind { fill: none; stroke: #A5F0B4; stroke-width: 1.8; }
.flavor-panel--melancia .deco ellipse { fill: #0B0B0B; }
.flavor-panel--maca-verde .deco .leaf { fill: none; stroke: var(--p-ink); stroke-width: 1.1; stroke-linecap: round; }

.flavor-panel__copy { position: relative; grid-column: 1; max-width: 26rem; }
.flavor-panel__copy, .flavor-panel__specs {
  opacity: var(--vis, 1);
  translate: calc(var(--rel, 0) * -7vw) 0;       /* parallax: textos andam mais devagar que o painel */
}
.flavor-panel__num { display: block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; opacity: .7; margin-bottom: 1rem; }
.flavor-panel__title { font-size: clamp(3rem, 6.6vw, 6.8rem); margin-bottom: 1.25rem; }
.flavor-panel__copy p { font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.5; opacity: .85; max-width: 30ch; }
/* Link para a página do sabor (SEO: cada sabor tem página própria) */
.flavor-panel__more {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.4rem; padding-bottom: .2rem;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  pointer-events: auto;
  transition: gap .35s var(--ease), opacity .3s;
}
.flavor-panel__more:hover { gap: .9rem; opacity: .75; }

.flavor-panel__specs { position: relative; grid-column: 3; justify-self: end; display: grid; gap: 1.1rem; min-width: 14rem; }
.flavor-panel__specs div { padding-top: .8rem; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.flavor-panel__specs dt { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; opacity: .65; margin-bottom: .3rem; }
.flavor-panel__specs dd { margin: 0; font-size: 1.05rem; font-weight: 600; }

/* Foto de reserva (só sem WebGL) */
.flavor-panel__img {
  position: absolute; left: 50%; top: 50%;
  height: min(62vh, 560px); width: auto;
  transform: translate(-50%, -46%) rotate(6deg);
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45));
}
.has-can3d .flavor-panel__img { display: none; }

.flavors__slot { position: absolute; left: 50%; top: 50%; height: clamp(320px, 66vh, 640px); transform: translate(-50%, -46%); }

.flavors__dots {
  position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%);
  display: flex; gap: 1.5rem;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; mix-blend-mode: difference;           /* legível em qualquer cor de painel */
}
.flavors__dots li { opacity: .45; padding-bottom: .4rem; border-bottom: 1px solid transparent; transition: opacity .3s, border-color .3s; }
.flavors__dots li.is-active { opacity: 1; border-color: currentColor; }


/* ==========================================================================
   09. POR DENTRO DA LATA + TAMANHOS
   ========================================================================== */

/* --- Por dentro da lata: lata no centro, informações ligadas por linhas --- */
.inside { position: relative; height: 360vh; background: #050505; }
.inside__sticky {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: radial-gradient(40% 55% at 50% 55%, var(--glow), transparent 70%);
}
.inside__head { position: absolute; top: calc(var(--nav-h) + .75rem); left: 0; right: 0; z-index: 3; }
.inside__title { font-size: clamp(2.4rem, 4.6vw, 4.8rem); }
.inside__slot { position: absolute; left: 50%; top: 55%; height: clamp(320px, 68vh, 660px); transform: translate(-50%, -50%); }

.inside__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.inside__lines polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;                               /* escondida até a informação aparecer */
  transition: stroke-dashoffset 1.1s var(--ease);
}
.inside__lines polyline.is-on { stroke-dashoffset: 0; }

.inside__spots { position: absolute; inset: 0; pointer-events: none; }
.spot {
  position: absolute; left: var(--x); top: var(--y); z-index: 3;
  width: min(22vw, 21rem);
  display: grid; gap: .4rem;
  transform: translateY(-50%);
  opacity: 0; translate: 0 22px;
  transition: opacity .6s var(--ease), translate .9s var(--ease);
}
.spot.is-on { opacity: 1; translate: 0 0; }
.spot--l { text-align: right; justify-items: end; }
.spot__num { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; color: var(--accent); }
.spot__title {
  font-family: var(--font-display); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.3rem, 2vw, 2.1rem); line-height: .95;
}
.spot__text { color: var(--text-soft); font-size: .95rem; line-height: 1.45; max-width: 28ch; }
.inside__note {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  width: 90%; text-align: center;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint);
}

/* --- Tamanhos: silhuetas na escala real que enchem de "energia" --- */
.sizes { padding-block: var(--section-y); background: #000; }
.sizes .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 5rem);
}
.sizes__head { padding-bottom: 2rem; }
.sizes__title { font-size: clamp(2.5rem, 4.8vw, 5rem); margin-bottom: 1.25rem; }
.sizes__list {
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: end;
  gap: clamp(1rem, 3vw, 3rem);
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.size { display: grid; justify-items: center; gap: .5rem; text-align: center; }
.size__art { width: 100%; max-width: 150px; height: auto; overflow: visible; }
.size__outline { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.size__cap { fill: rgba(255, 255, 255, .14); stroke: rgba(255, 255, 255, .55); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.size__liquid { fill: var(--accent); animation: size-wave 2.6s linear infinite; }
.size__level { transform: translateY(334px); transition: transform 2.2s var(--ease) .2s; }   /* vazio até aparecer */
.size.is-visible .size__level { transform: translateY(var(--lvl)); }
.size:nth-child(2) .size__level { transition-delay: .4s; }
.size:nth-child(3) .size__level { transition-delay: .6s; }
.size:nth-child(4) .size__level { transition-delay: .8s; }
@keyframes size-wave { to { transform: translateX(120px); } }   /* 120 = 2 ondas do desenho */
.size__vol { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: clamp(2.4rem, 4.5vw, 4.4rem); line-height: 1; margin-top: 1rem; }
.size__vol small { font-size: .45em; margin-left: .08em; color: var(--accent); }
.size__type { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); }


/* ==========================================================================
   10. ARGUMENTO
   ========================================================================== */
.argument {
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-block: var(--section-y);
  overflow: hidden;
  isolation: isolate;
}
.argument__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.argument::after {                        /* escurece base para o texto */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .2) 55%, transparent 80%),
    linear-gradient(to top, #000 0%, rgba(0, 0, 0, .55) 40%, rgba(0, 0, 0, .1) 70%, #000 100%);
}
.argument__title { font-size: clamp(2.6rem, 7vw, 7rem); max-width: 14ch; }
.argument__title em { color: var(--accent); font-style: inherit; }


/* ==========================================================================
   11. MOMENTOS + REVENDA
   ========================================================================== */

/* --- Momentos: painéis que se expandem --- */
.moments { padding-block: var(--section-y); background: #000; }
.moments__head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.moments__title { font-size: clamp(2.75rem, 6.5vw, 6.5rem); }

.moments__list { display: flex; gap: .75rem; height: clamp(440px, 64vh, 640px); }
.moment--balada    { --m-bg: radial-gradient(120% 90% at 15% 0%, #FF5FBF, #A0177A 45%, #1D0420); --m-ink: #FFFFFF; }
.moment--treino    { --m-bg: radial-gradient(120% 90% at 15% 0%, #FF6A57, #C4161F 45%, #3A0508); --m-ink: #FFFFFF; }
.moment--pista     { --m-bg: radial-gradient(120% 90% at 15% 0%, #FFE970, #F5C400 45%, #6B4F00); --m-ink: #111111; }
.moment--madrugada { --m-bg: radial-gradient(120% 90% at 15% 0%, #21C4BE, #0A5C63 45%, #02121A); --m-ink: #FFE45C; }

.moment {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  padding: clamp(1.25rem, 2vw, 2rem);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-align: left;
  color: var(--m-ink);
  background: var(--m-bg);
  isolation: isolate;
  transition: flex .8s var(--ease), filter .4s;
}
.moment:not(.is-open) { filter: saturate(.75) brightness(.8); }
.moment.is-open { flex: 3.4; }
.moment::after {                                   /* brilho girando devagar */
  content: ""; position: absolute; inset: -40%; z-index: -1;
  background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, .14), transparent 30%);
  animation: spin-slow 14s linear infinite;
  opacity: 0; transition: opacity .6s;
}
.moment.is-open::after { opacity: 1; }
.moment__glare {                                   /* luz que segue o mouse (fx.js) */
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(35% 45% at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .28), transparent 70%);
  mix-blend-mode: soft-light;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

.moment__num { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; opacity: .75; }
.moment__label {
  font-family: var(--font-display); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.8rem, 3.4vw, 3.8rem); line-height: .9;
  writing-mode: vertical-rl; transform: rotate(180deg);
}
.moment.is-open .moment__label { writing-mode: horizontal-tb; transform: none; font-size: clamp(2.6rem, 5vw, 5.4rem); }
.moment__body {
  display: grid; gap: 1.25rem;
  opacity: 0; transform: translateY(24px);
  transition: opacity .5s var(--ease), transform .7s var(--ease);
  pointer-events: none;
}
.moment.is-open .moment__body { opacity: 1; transform: none; transition-delay: .25s; }
.moment__body svg { width: clamp(3.5rem, 6vw, 5.5rem); height: auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.moment__text { font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.45; max-width: 32ch; }

/* --- Revenda --- */
.resale {
  padding-block: var(--section-y);
  overflow: hidden;
  background:
    radial-gradient(55% 60% at 75% 60%, var(--glow), transparent 70%),
    #050505;
}
.resale__grid { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.resale__title { font-size: clamp(2.75rem, 6vw, 6rem); margin-bottom: 1.5rem; }
.resale__list { display: grid; gap: .8rem; margin: 2rem 0 2.5rem; }
.resale__list li { display: flex; align-items: center; gap: .9rem; font-size: 1.05rem; }
.resale__list li::before { content: ""; flex: none; width: 20px; height: 2px; background: var(--accent); }
.resale__actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--white); }

/* As 4 latas em leque; abrem no hover */
.resale__lineup {
  position: relative;
  height: clamp(340px, 60vh, 600px);
  display: flex; justify-content: center; align-items: flex-end;
  isolation: isolate;
}
.resale__lineup::after {                            /* luz no "chão" */
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 2%; height: 14%; z-index: -1;
  background: radial-gradient(closest-side, var(--glow), transparent);
  filter: blur(10px);
}
.resale__lineup img {
  height: 86%; width: auto;
  margin: 0 -6.5%;
  filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .6));
  transition: transform .9s var(--ease);
  animation: bob 5s ease-in-out infinite alternate;
}
.resale__lineup img:nth-child(1) { transform: rotate(-13deg) translateY(5%); --dd: 0s; }
.resale__lineup img:nth-child(2) { transform: rotate(-4deg) translateY(-2%); --dd: .13s; }
.resale__lineup img:nth-child(3) { transform: rotate(5deg) translateY(-3%); --dd: .26s; }
.resale__lineup img:nth-child(4) { transform: rotate(14deg) translateY(4%); --dd: .39s; }

/* Entrada: as latas despencam uma a uma, quicam e o chão acende (fx.js liga .is-dropped) */
.js .resale__lineup img { opacity: 0; animation: none; }
.resale__lineup.is-dropped img {
  opacity: 1;
  animation:
    can-drop .9s var(--dd) both,
    bob 5s ease-in-out calc(var(--dd) + .9s) infinite alternate;
}
.js .resale__lineup::after { opacity: 0; }
.resale__lineup.is-dropped::after { animation: lineup-flash 1.6s ease-out .5s both; }
@keyframes can-drop {
  0%   { translate: 0 -85vh; opacity: 0; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  8%   { opacity: 1; }
  60%  { translate: 0 0; animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  76%  { translate: 0 -6%; animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  90%  { translate: 0 0; }
  95%  { translate: 0 -1%; }
  100% { translate: 0 0; opacity: 1; }
}
@keyframes lineup-flash {
  0%   { opacity: 0; transform: scaleX(.6); }
  12%  { opacity: 1; transform: scaleX(1.35); filter: blur(4px) brightness(1.8); }
  100% { opacity: 1; transform: none; }
}
.resale__lineup:hover img:nth-child(1) { transform: rotate(-20deg) translate(-12%, 4%); }
.resale__lineup:hover img:nth-child(2) { transform: rotate(-7deg) translate(-4%, -6%); }
.resale__lineup:hover img:nth-child(3) { transform: rotate(8deg) translate(4%, -7%); }
.resale__lineup:hover img:nth-child(4) { transform: rotate(21deg) translate(12%, 3%); }
@keyframes bob { from { translate: 0 0; } to { translate: 0 16px; } }


/* ==========================================================================
   12. FAQ
   ========================================================================== */
.faq { padding-block: var(--section-y); background: #000; }
.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
}
.faq__title {
  position: sticky; top: calc(var(--nav-h) + 2rem);
  font-size: clamp(2.75rem, 6vw, 6rem);
}

.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.6rem 0;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: color .25s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent); }

/* Ícone + que vira − */
.faq__icon {
  flex: none; position: relative;
  width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pill);
  background: var(--surface);
  transition: background-color .3s, transform .4s var(--ease);
}
.faq__icon::before,
.faq__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 12px; height: 1.5px; background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .4s var(--ease);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon { background: var(--accent); color: var(--accent-ink); transform: rotate(180deg); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0); }

.faq__answer { padding: 0 3.5rem 1.75rem 0; }
.faq__answer p { color: var(--text-soft); line-height: 1.65; max-width: 60ch; }
.faq__item[open] .faq__answer { animation: faq-in .45s var(--ease); }
@keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }


/* ==========================================================================
   13. FRASE FINAL — marquee
   ========================================================================== */
.last-copy {
  padding-block: clamp(3rem, 8vw, 7rem);
  overflow: hidden;
  background: linear-gradient(to bottom, #000, var(--deep) 50%, #000);
  border-block: 1px solid var(--line);
}
.marquee__track {
  display: flex; width: max-content;
  animation: marquee 22s linear infinite;
}
.marquee__track span {
  font-family: var(--font-display); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: clamp(4rem, 13vw, 13rem); line-height: 1;
  padding-right: .35em;
  white-space: nowrap;
}
.marquee__track .is-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
}
@keyframes marquee { to { transform: translateX(-50%); } }


/* ==========================================================================
   14. NEWSLETTER + RODAPÉ
   ========================================================================== */
.last {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-top: var(--section-y);
  background:
    radial-gradient(60% 50% at 50% 100%, var(--glow), transparent 70%),
    #000;
}
.last__inner { display: grid; place-items: center; flex: 1; }

.newsletter { display: grid; justify-items: center; text-align: center; gap: 1.5rem; max-width: 46rem; }
.newsletter__title { font-size: clamp(3rem, 8vw, 7.5rem); }
.newsletter .lead { max-width: 42ch; }

.newsletter__form {
  width: 100%; max-width: 32rem;
  display: flex; align-items: flex-end; gap: 1rem;
  margin-top: 1rem;
}
.field { flex: 1; display: grid; gap: .5rem; text-align: left; }
.field__label { color: var(--text-muted); font-size: .68rem; }
.field input {
  width: 100%;
  padding: .95rem 0;
  background: transparent;
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, .35);
  border-radius: 0;
  font-size: 1rem;
  transition: border-color .3s;
}
.field input::placeholder { color: var(--text-faint); }
.field input:focus { outline: none; border-color: var(--accent); }
.field input[aria-invalid="true"] { border-color: #FF7676; }

.newsletter__legal { font-size: .78rem; color: var(--text-muted); }
.newsletter__legal a { text-decoration: underline; text-underline-offset: 3px; }
.newsletter__legal a:hover { color: var(--white); }
.newsletter__msg { min-height: 1.5em; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; color: var(--accent); }

.footer {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap;
  padding-block: 2rem calc(2rem + env(safe-area-inset-bottom));
  margin-top: 4rem;
  border-top: 1px solid var(--line);
}
.footer__social, .footer__flavors { display: flex; flex-wrap: wrap; gap: 1.75rem; }
.bando__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: .5rem 0 1rem; }
.footer__mark {
  display: flex; justify-content: center;
  font-family: var(--font-display); font-style: italic; font-weight: 900; text-transform: uppercase;
  font-size: 20.5vw; line-height: .8; letter-spacing: -.045em;
  white-space: nowrap;
  color: var(--accent);
  -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 92%);
          mask-image: linear-gradient(180deg, #000 10%, transparent 92%);
  clip-path: inset(-60% -10% 0 -10%);
  margin-top: 1rem; user-select: none;
}
.footer__mark span { display: inline-block; }
.js .footer__mark span { transform: translateY(108%); }
.footer__mark.is-up span { transform: none; transition: transform 1.1s cubic-bezier(.2, 1.3, .35, 1) var(--d, 0s); }
.footer__legal a { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); transition: color .25s; }
.footer__legal a:hover { color: var(--white); }


/* ==========================================================================
   15. ANIMAÇÕES DE ENTRADA (ativadas pelo IntersectionObserver no script.js)
   ========================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; }
}


/* ==========================================================================
   16. RESPONSIVO
   Breakpoints no padrão da referência (Webflow): 991 · 767 · 479
   ========================================================================== */

/* Tablet ----------------------------------------------------------------- */
@media (max-width: 991px) {
  .hud__side, .hud__energy { display: none; }

  /* Hero: sabor atual e trilho empilhados embaixo, centralizados */
  .hero { --pad: var(--gutter); --floor-b: 30svh; }
  .can--hero { height: min(52svh, 72vw); }
  .hero__scroll { display: none; }
  .hero__aside { left: 0; right: 0; bottom: calc(2.4rem + 3.25rem + 1.2rem); max-width: none; text-align: center; }
  .flavor-rail { right: 50%; transform: translateX(50%); }

  .manifesto__inner { grid-template-columns: 1fr; gap: 1rem; }
  .manifesto__text { font-size: clamp(1.7rem, 5.6vw, 3rem); }
  .manifesto__slot { height: 36vh; }

  .flavor-panel { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; align-items: start; padding-inline: var(--gutter); }
  .flavor-panel__copy { grid-column: 1 / -1; }
  .flavor-panel__specs { grid-column: 2; align-self: end; }
  .flavors__slot { top: 60%; height: 46vh; }

  .resale__grid { grid-template-columns: 1fr; }
  .sizes .container { grid-template-columns: 1fr; }
  .resale__lineup { height: 48vh; }

  /* Benefícios: lata sai do sticky e vira faixa no topo */
  /* Por dentro: só a informação atual aparece, num cartão sob a lata */
  .inside__lines { display: none; }
  .inside__slot { top: 47%; height: 46vh; }
  .spot {
    left: var(--gutter); right: var(--gutter); top: auto; bottom: 7vh;
    width: auto; transform: none;
    padding: 1rem 1.2rem; border-radius: 14px;
    background: rgba(0, 0, 0, .6); border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .spot--l { text-align: left; justify-items: start; }
  .spot.is-on:not(.is-current) { opacity: 0; }
  .inside__note { bottom: .9rem; }

  .hero__hint { display: none !important; }
  .hero__facts { display: none; }

  .faq__grid { grid-template-columns: 1fr; }
  .faq__title { position: static; }
}

/* Celular (paisagem) / tablets pequenos ---------------------------------- */
@media (max-width: 767px) {
  .navbar { grid-template-columns: auto 1fr auto; }
  .logo--nav { justify-self: center; }
  .logo__mark { width: 2.1rem; }
  .logo__name { font-size: 1.15rem; }
  .logo__tag { font-size: .42rem; letter-spacing: .24em; }
  .sizes__list { grid-template-columns: repeat(2, 1fr); row-gap: 3rem; }
  .btn--nav { padding: .6rem .85rem; font-size: .68rem; }

  .hud__corner--tl, .hud__corner--tr { top: calc(var(--nav-h) + .25rem); }

  .flavor-panel__specs { display: none; }
  .flavor-panel__title { font-size: clamp(2.8rem, 13vw, 4.5rem); margin-bottom: .75rem; }
  .flavor-panel__copy p { font-size: .98rem; }
  .flavors__slot { top: 62%; height: 44vh; }
  .flavors__dots { gap: .8rem; font-size: .56rem; }
  .deco--1 { left: 8%; top: 44%; }
  .deco--3 { left: 76%; top: 40%; }

  .moments__list { flex-direction: column; height: auto; }
  .moment { flex: none; min-height: 84px; transition: min-height .7s var(--ease), filter .4s; }
  .moment.is-open { flex: none; min-height: 300px; }
  .moment__label, .moment.is-open .moment__label { writing-mode: horizontal-tb; transform: none; }

  .faq__answer { padding-right: 0; }
  .footer { justify-content: center; text-align: center; }
  .footer__social, .footer__flavors { order: 3; width: 100%; justify-content: center; }
}

/* Celular (retrato) ------------------------------------------------------ */
@media (max-width: 479px) {
  /* Hero no celular: letreiro no alto (inteiro, legível) e a lata na frente */
  .hero { --floor-b: calc(2.4rem + 2.9rem + 1rem + 8.2rem); }
  .hero__claim {
    left: 0; right: 0; top: calc(var(--nav-h) + 1.4rem + 15.6vw + .9rem);
    text-align: center; font-size: .8rem;
  }
  .hero__word { bottom: auto; top: calc(var(--nav-h) + 1.4rem); }
  .can--hero { height: clamp(260px, 50svh, 440px); }
  .hero__aside { bottom: calc(2.4rem + 2.9rem + 1rem); }
  .hero__title { font-size: 2.3rem; margin: .4rem 0 .3rem; }
  .flavor-rail { gap: .6rem; }
  .flavor-rail__btn { width: 2.9rem; height: 2.9rem; }


  .newsletter__form { flex-direction: column; align-items: stretch; }
  .newsletter__form .btn { width: 100%; }

  .hero__claim { top: calc(var(--nav-h) + 1.4rem + 15.6vw + 1.2rem); font-size: .92rem; line-height: 1.22; }
  /* a lata cabe no espaço entre a frase e o chão (em telas mais baixas ela não cobre a frase) */
  .can--hero { height: clamp(220px, calc(100svh - var(--floor-b) - var(--nav-h) - 15.6vw - 6.2rem), 440px); }
}

/* Celular: mais respiro entre linhas e entre blocos de texto ---------------- */
@media (max-width: 767px) {
  /* títulos grandes: as linhas não encostam mais uma na outra */
  .display { line-height: .98; letter-spacing: -.01em; }
  .eyebrow { margin-bottom: 1rem; }
  .lead { line-height: 1.6; }

  /* menu fixo: faixa escura por trás, o texto que passa por baixo não encosta em MENU / COMPRAR */
  .navbar::before {
    inset: 0 0 -1.75rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .86) 60%, transparent 100%);
  }

  /* manifesto: frase um pouco menor e mais aberta; a lata fica abaixo, sem cobrir o texto */
  .manifesto__inner { gap: 2rem; }
  .manifesto__text { font-size: clamp(1.35rem, 6.1vw, 1.9rem); line-height: 1.16; letter-spacing: -.005em; }
  .manifesto__slot { height: 30vh; }

  /* sabores */
  .flavor-panel__num { margin-bottom: .8rem; }
  .flavor-panel__title { margin-bottom: 1rem; }
  .flavor-panel__copy p { line-height: 1.58; }
  .flavor-panel__more { margin-top: 1.2rem; }
  .flavors__dots { gap: 1.1rem; font-size: .62rem; bottom: 1.7rem; }

  /* por dentro da lata: lata um pouco menor e mais baixa, sem cobrir o título */
  .inside__slot { top: 52%; height: 38vh; }
  .spot { gap: .55rem; padding: 1.1rem 1.25rem 1.2rem; }
  .spot__title { line-height: 1.05; }

  /* tamanhos */
  .sizes__title { margin-bottom: 1.2rem; }
  .sizes__list { row-gap: 3.5rem; }

  /* momentos: no celular os 4 cartões ficam abertos e compactos (antes sobrava cartão vazio) */
  .moments__list { gap: .9rem; }
  .moment, .moment.is-open {
    min-height: 0; flex: none; filter: none;
    justify-content: flex-start; gap: .9rem;
    padding: 1.4rem 1.35rem 1.6rem;
  }
  .moment::after { opacity: 1; }
  .moment__label, .moment.is-open .moment__label { font-size: 2.3rem; line-height: 1; }
  .moment__body, .moment.is-open .moment__body { opacity: 1; transform: none; gap: .85rem; }
  .moment__body svg { width: 2.6rem; }
  .moment__text { font-size: 1rem; line-height: 1.55; }

  /* revenda */
  .resale__title { margin-bottom: 1.25rem; }
  .resale__list { gap: 1rem; margin: 1.9rem 0 2.2rem; }

  /* newsletter e rodapé */
  .newsletter { gap: 1.3rem; }
  .footer { flex-direction: column; gap: 1.3rem; }
  .footer__flavors { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: .9rem 2.2rem; }
  .footer__social { gap: 1.6rem; }
}


/* Celular baixo (ex.: iPhone SE): a lata encosta no letreiro, a frase sai */
@media (max-width: 479px) and (max-height: 700px) {
  .hero__claim { display: none; }
  .can--hero { height: clamp(240px, 50svh, 440px); }
}


/* ==========================================================================
   17. MOVIMENTO (app.js)
   Rolagem suave, grão de filme, abertura, títulos letra a letra, cursor
   ========================================================================== */

/* Lenis (rolagem suave) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Grão de filme por cima de tudo: tira o aspecto "digital limpo demais" */
body::after {
  content: "";
  position: fixed; inset: -50%;
  z-index: 95;
  pointer-events: none;
  opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(5) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -4%); }
  60% { transform: translate(-3%, -2%); }
  80% { transform: translate(2%, 4%); }
  100% { transform: translate(0, 0); }
}

/* Chão: com 3D ativo vira só referência de posição (o 3D desenha o chão) */
.has-can3d .hero__floor { visibility: hidden; }
.hero__glow { animation: glow-drift 14s ease-in-out infinite alternate; }
@keyframes glow-drift {
  from { transform: translate3d(-3%, 2%, 0) scale(1); }
  to   { transform: translate3d(3%, -3%, 0) scale(1.08); }
}

/* Abertura: tudo escondido durante o loader e entra em sequência depois */
.is-loading .hero__aside, .is-loading .flavor-rail, .is-loading .hero__scroll,
.is-loading .hero__claim, .is-loading .hero__facts,
.is-loading .navbar > *, .is-loading .hud { opacity: 0; }
.is-intro .navbar > *    { animation: intro-down .9s var(--ease) .5s backwards; }
.is-intro .hud           { animation: intro-fade 1.4s var(--ease) .8s backwards; }
.is-intro .hero__claim   { animation: intro-left 1.1s var(--ease) 1.2s backwards; }
.is-intro .hero__facts   { animation: intro-right 1.1s var(--ease) 1.2s backwards; }
.is-intro .hero__aside   { animation: intro-left 1.1s var(--ease) 1.4s backwards; }
.is-intro .flavor-rail   { animation: intro-right 1.1s var(--ease) 1.5s backwards; }
.is-intro .hero__scroll  { animation: intro-fade 1s var(--ease) 1.9s backwards; }
.is-loading .hero__beam  { opacity: 0; }
.is-loading .hero__hint  { opacity: 0; }
.is-intro .hero__hint:not(.is-used) { animation: intro-fade 1s ease 2.6s backwards; }
.is-intro .hero__beam    { animation: intro-fade 1.6s ease 1.1s backwards, beam 5s ease-in-out 2.7s infinite alternate; }
@keyframes intro-down  { from { opacity: 0; transform: translateY(-24px); } }
@keyframes intro-left  { from { opacity: 0; transform: translateX(-40px); } }
@keyframes intro-right { from { opacity: 0; transform: translateX(40px); } }
@keyframes intro-fade  { from { opacity: 0; } }

/* Títulos letra a letra: cada palavra é uma "janela"; as letras sobem de baixo */
.is-split .w {
  display: inline-block;
  white-space: nowrap;
  clip-path: inset(-90% -14% -30% -14%);      /* folga para acentos (Ú, Ã), Ç e itálico */
}
.is-split .c {
  display: inline-block;
  transform: translate3d(0, 130%, 0) rotate(8deg);
  transform-origin: 0 100%;
  transition: transform 1.05s var(--ease) calc(var(--i) * 26ms);
}
.is-split.is-in .c { transform: none; }

/* Letreiro controlado pelo JS (velocidade do scroll) */
.marquee__track.is-js { animation: none; will-change: transform; }


/* Parallax da foto do manifesto */
.argument__bg { will-change: transform; transform-origin: center; }

/* Cursor customizado (só mouse) */
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor summary { cursor: none; }
.cursor {
  position: fixed; inset: 0; z-index: 400;
  pointer-events: none;
  opacity: 0; transition: opacity .3s;
}
.cursor.is-visible { opacity: 1; }
.cursor__dot {
  position: absolute; left: 0; top: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  transform: translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), 0);
}
.cursor__ring {
  position: absolute; left: 0; top: 0;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
  transform: translate3d(calc(var(--rx) - 50%), calc(var(--ry) - 50%), 0);
  transition: width .4s var(--ease), height .4s var(--ease), background-color .3s, border-color .3s;
}
.cursor.is-hover .cursor__ring { width: 64px; height: 64px; background: rgba(255, 255, 255, .1); border-color: var(--accent); }
.cursor.is-drag .cursor__ring { width: 92px; height: 92px; background: var(--accent); border-color: transparent; }
.cursor__label {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-ink);
}

@media (prefers-reduced-motion: reduce) {
  .is-split .c { transform: none; }
  .js .hero__word span, .js .footer__mark span { transform: none; }
  body::after { animation: none; }
}