/* ══════════════════════════════════════════════════════════════
   MC DOCERIA — DOCE EM CAMADAS
   O site é o pote: cada camada cobre a anterior, do fundo à tampa.
   Três vozes: Cormorant (a assinatura da marca) · Montserrat (a
   etiqueta do pote) · EB Garamond (a conversa da bancada).
   ══════════════════════════════════════════════════════════════ */

:root {
  /* — paleta, extraída da marca e da bancada — */
  --marfim: #fff0e2;
  --nata: #fff8ef;
  --tinta: #33201a;
  --sepia: #6e5140;
  --rosa: #b40042;
  --rosa-luz: #e96c78;
  --rosa-wash: rgba(180, 0, 66, 0.09);
  --cacau: #4b251a;
  --cacau-2: #2c1b12;
  --vela: #fff0df;
  --caramelo: #d8a25e;

  --hairline: rgba(51, 32, 26, 0.28);
  --hairline-soft: rgba(51, 32, 26, 0.14);
  --hairline-dark: rgba(255, 240, 223, 0.22);

  /* — as três vozes — */
  /* Ogg via Adobe Fonts (kit wfi5umg) — o slug é minúsculo, como o Adobe
     publica. A Cormorant fica como fallback até a Ogg estar confirmada. */
  --display: "ogg", "Cormorant Garamond", Garamond, serif;
  --sans: "Montserrat", "Segoe UI", sans-serif;
  --voz: "EB Garamond", Georgia, serif;

  /* — movimento — */
  --ease-draw: cubic-bezier(0.77, 0, 0.18, 1);
  --ease-rise: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-settle: cubic-bezier(0.26, 1.04, 0.38, 1);

  /* — medidas — */
  --space: clamp(20px, 5vw, 76px);
  --header-h: 64px;
  --sheet-max: 1560px;
}

/* ══════════ base ══════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--cacau);
  color: var(--tinta);
  font-family: var(--voz);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 800px) {
  body {
    font-size: 1.125rem;
  }
}

/* grão do papel da etiqueta */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='0.6'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  mix-blend-mode: multiply;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

p {
  margin: 0;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

/* A Ogg não é usada em itálico: o kit só a oferece em Thin e Light, mais
   finas que o romano da linha vizinha. A linha de acento dos títulos se
   distingue pela cor, não pela inclinação. `font-style: normal` é
   obrigatório aqui — <em> vem itálico por padrão do navegador. */
h2 em {
  font-style: normal;
  font-weight: 500;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

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

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--rosa);
  outline-offset: 3px;
}

.chocolate :focus-visible,
.colofao :focus-visible {
  outline-color: var(--caramelo);
}

::selection {
  background: var(--rosa);
  color: var(--marfim);
}

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

.skip-link {
  position: fixed;
  top: 12px;
  left: 14px;
  z-index: 120;
  transform: translateY(-260%);
  background: var(--tinta);
  color: var(--marfim);
  padding: 10px 16px;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  transition: transform 240ms var(--ease-rise);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ══════════ entrada da marca ══════════
   Fundo vela (o marfim da animação), símbolo em
   vinho reconstruído por JS, assinatura digitada em Cormorant. */

.entrada {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(30px, 5.5vh, 48px);
  background: var(--vela);
  transition:
    opacity 640ms var(--ease-rise),
    visibility 0ms 640ms;
}

.entrada.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

html:not(.js) .entrada {
  display: none;
}

body.entrada-lock {
  overflow: hidden;
}

.entrada-simbolo {
  display: block;
  width: clamp(190px, 40vmin, 340px);
  height: auto;
  overflow: visible;
  color: var(--rosa);
}

/* os anéis "escavam" o disco: traço na cor do fundo */
.entrada-anel {
  fill: none;
  stroke: var(--vela);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

.entrada-nome {
  display: flex;
  align-items: flex-end;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.9rem, 7.3vw, 5.9rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--rosa);
  white-space: nowrap;
}

.entrada-nome [data-letra] {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  will-change: transform, opacity;
}

.entrada-espaco {
  display: inline-block;
  width: 0.38em;
}

.entrada-caret {
  display: inline-block;
  width: max(5px, 0.07em);
  height: 0.86em;
  margin-left: 0.08em;
  background: var(--rosa);
  align-self: center;
}

@media (prefers-reduced-motion: reduce) {
  .entrada {
    display: none;
  }
}

/* ══════════ utilitários de etiqueta ══════════ */

.etiqueta {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sepia);
}

.plate-caption {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-top: 1px solid var(--hairline);
  padding-top: 10px;
  margin-top: 12px;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--sepia);
}

.plate-caption .etiqueta {
  flex-shrink: 0;
}

/* máscara de revelação — a colher espalhando a camada */
.mask {
  overflow: hidden;
}

html.js .mask {
  clip-path: inset(0 0 100% 0);
}

html.js .mask img {
  transform: scale(1.12);
  transform-origin: top right;
}

html.js .is-visible .mask,
html.js .mask.is-open {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1000ms var(--ease-draw);
}

html.js .is-visible .mask img,
html.js .mask.is-open img {
  transform: none;
  transition: transform 1500ms var(--ease-rise);
}

/* máscara de linha tipográfica */
.word-mask {
  display: block;
  overflow: hidden;
  padding-block: 0.04em;
}

html.js .word-mask .word-line {
  display: inline-block;
  transform: translateY(115%);
}

html.js .is-visible .word-mask .word-line {
  transform: none;
  transition: transform 950ms var(--ease-draw);
}

html.js .is-visible .word-mask:nth-child(2) .word-line {
  transition-delay: 110ms;
}

/* botão-carimbo (o selo da etiqueta) */
.btn-primary,
.header-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 30px;
  border: 1px solid var(--rosa);
  color: var(--rosa);
  background: transparent;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition:
    background 320ms var(--ease-rise),
    color 320ms var(--ease-rise),
    border-color 320ms var(--ease-rise),
    transform 320ms var(--ease-settle),
    box-shadow 320ms var(--ease-rise);
}

.btn-primary {
  color: var(--marfim);
  background: var(--rosa);
  box-shadow: 0 12px 28px -18px rgba(180, 0, 66, 0.9);
}

.btn-primary::after,
.header-cta::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid currentColor;
  opacity: 0.4;
  transition: inherit;
}

.btn-primary:hover,
.header-cta:hover {
  background: var(--rosa);
  border-color: var(--rosa);
  color: var(--marfim);
  transform: translateY(-2px) rotate(-0.6deg);
  box-shadow: 0 18px 34px -16px rgba(180, 0, 66, 0.95);
}

.btn-primary:active,
.header-cta:active {
  transform: translateY(0) rotate(0.2deg);
}

/* ══════════ cabeçalho ══════════ */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  min-height: var(--header-h);
  padding: 0 clamp(16px, 2.5vw, 36px);
  color: var(--tinta);
  transition:
    color 420ms var(--ease-rise),
    background 420ms var(--ease-rise),
    border-color 420ms var(--ease-rise);
  border-bottom: 1px solid transparent;
}

body.is-scrolled .site-header {
  background: rgba(255, 240, 226, 0.94);
  border-bottom-color: var(--hairline);
}

body.in-dark .site-header {
  color: var(--vela);
}

body.in-dark.is-scrolled .site-header {
  background: rgba(75, 37, 26, 0.94);
  border-bottom-color: var(--hairline-dark);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.brand-simbolo {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--rosa);
  transition: color 420ms var(--ease-rise), transform 600ms var(--ease-settle);
}

body.in-dark .brand-simbolo {
  color: var(--vela);
}

.brand:hover .brand-simbolo {
  transform: rotate(-24deg);
}

.brand strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 0.04em;
}

.brand-sub {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.65;
}

.main-nav {
  display: flex;
  gap: clamp(14px, 3vw, 34px);
}

.main-nav a {
  position: relative;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 0;
  opacity: 0.8;
  transition: opacity 240ms var(--ease-rise);
}

.nav-num {
  font-size: 0.54rem;
  vertical-align: 0.5em;
  margin-right: 4px;
  color: var(--rosa);
}

body.in-dark .nav-num {
  color: var(--caramelo);
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 360ms var(--ease-draw);
}

.main-nav a:hover {
  opacity: 1;
}

.main-nav a:hover::after {
  transform: scaleX(1);
}

body.in-dark .header-cta {
  background: transparent;
  border-color: var(--rosa-luz);
  color: var(--vela);
}

body.in-dark .header-cta:hover {
  background: var(--rosa-luz);
  border-color: var(--rosa-luz);
  color: var(--tinta);
  box-shadow: 0 18px 36px -14px rgba(233, 108, 120, 0.7);
}

.header-cta {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.62rem;
}

@media (max-width: 719px) {
  .main-nav {
    display: none;
  }

  .brand-sub {
    display: none;
  }
}

/* indicador de camada */
.camada-indicator {
  position: fixed;
  left: clamp(16px, 2.5vw, 36px);
  bottom: 18px;
  z-index: 85;
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sepia);
  transition: color 420ms var(--ease-rise);
}

body.in-dark-bottom .camada-indicator {
  color: var(--caramelo);
}

body.board-open {
  overflow: hidden;
}

@media (max-width: 719px) {
  .camada-indicator {
    display: none;
  }
}

/* ══════════ a pilha de camadas ══════════ */

.camada {
  position: relative;
  min-height: 100svh;
  background: var(--marfim);
  color: var(--tinta);
  box-shadow: 0 -22px 60px rgba(26, 15, 10, 0.3);
  border-top: 1px solid rgba(51, 32, 26, 0.35);
}

html.js .pilha .camada {
  position: sticky;
  top: 0;
  transform: scale(calc(1 - var(--cover, 0) * 0.035));
  transform-origin: 50% 22%;
}

/* o véu que escurece a camada coberta */
.camada::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  background: #170d08;
  opacity: calc(var(--cover, 0) * 0.5);
  pointer-events: none;
}

.camada-body {
  position: relative;
  z-index: 1;
  width: min(100%, var(--sheet-max));
  margin: 0 auto;
  padding: clamp(56px, 9vh, 110px) var(--space);
}

.camada-tab {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 12px;
  margin-bottom: clamp(40px, 7vh, 84px);
}

.camada-tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: clamp(48px, 8vw, 110px);
  height: 2px;
  background: var(--rosa);
}

.camada-tab .etiqueta:first-child {
  color: var(--rosa);
  font-weight: 700;
}

[data-dark] .camada-tab {
  border-color: var(--hairline-dark);
}

[data-dark] .camada-tab .etiqueta {
  color: var(--caramelo);
}

[data-dark] .camada-tab::after {
  background: var(--rosa-luz);
}

/* ══════════ camada 01 · capa ══════════ */

.capa .camada-body {
  padding-top: calc(var(--header-h) + 12px);
  padding-bottom: 0;
}

.capa-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
  overflow: clip;
}

/* os anéis do símbolo, ampliados como desenho de bancada */
.capa-aneis {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(96vmin, 820px);
  aspect-ratio: 1;
  transform: translate(-50%, -54%);
  color: var(--rosa);
  opacity: 0.3;
}

.aneis-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  animation: aneis-spin 160s linear infinite;
}

@keyframes aneis-spin {
  to {
    transform: rotate(360deg);
  }
}

/* os anéis são traçados na entrada, como na animação da marca */
html.js .anel-traco {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

body.is-loaded .anel-traco {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1500ms var(--ease-draw);
}

body.is-loaded .anel-traco:nth-of-type(1) { transition-delay: 200ms; }
body.is-loaded .anel-traco:nth-of-type(2) { transition-delay: 420ms; }
body.is-loaded .anel-traco:nth-of-type(3) { transition-delay: 640ms; }
body.is-loaded .anel-traco:nth-of-type(4) { transition-delay: 860ms; }

.capa-kicker {
  order: 0;
  margin-top: clamp(10px, 2vh, 26px);
  text-align: center;
  letter-spacing: 0.22em;
}

/* a foto de abertura, deitada como prancha sobre a bancada */
.capa-plate {
  order: 1;
  position: relative;
  z-index: 2;
  margin: clamp(18px, 3.5vh, 40px) 0 0;
  width: min(660px, 58vh, 86vw);
}

.capa-plate .mask {
  border: 1px solid var(--hairline);
  background: var(--nata);
  box-shadow: 0 40px 90px -42px rgba(51, 32, 26, 0.65);
}

.capa-flank {
  position: absolute;
  z-index: 2;
  top: 44%;
  line-height: 1.8;
}

.capa-flank-left {
  left: clamp(4px, 4vw, 80px);
}

.capa-flank-right {
  right: clamp(4px, 4vw, 80px);
  text-align: right;
}

/* a marca monumental, ancorada na borda do pote.
   "MC" tem dois glifos, então pode ser maior do que uma palavra caberia. */
.capa-word {
  order: 3;
  position: relative;
  z-index: 3;
  margin-top: auto;
  display: grid;
  justify-items: center;
  /* Monograma de dois glifos inverte qual eixo aperta: no celular a
     largura é o limite (a marca chega perto da borda), no desktop é a
     altura (a capa tem de caber numa tela). min() resolve os dois. */
  font-size: clamp(3.5rem, min(45vw, 32svh), 19rem);
  font-weight: 500;
  line-height: 0.78;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* flex em vez de linha de texto: um inline-block dentro da máscara
   arrasta o strut da fonte e inflava a altura do h1 em ~40% */
.capa-word .word-mask {
  display: flex;
}

/* o vão do wordmark: ~0,35 da altura de caixa alta de MC.
   Sem padding porque não há descendentes em caixa alta para proteger
   durante a revelação — e aqui ele custaria 16% do tamanho de DOCERIA. */
.capa-word .word-mask:nth-of-type(2) {
  padding-block: 0;
  margin-top: 0.113em;
}

/* "DOCERIA": proporções medidas no wordmark da marca — 1/4 da altura de
   MC e 1,14× a largura, alcançada pelo tracking largo. A margem negativa
   cancela o espaço que o letter-spacing acrescenta depois do último
   glifo, senão a linha não centra opticamente. */
.capa-word-sub {
  font-size: 0.25em;
  letter-spacing: 0.45em;
  /* -0.42 e não -0.45: cancela quase todo o espaço final, deixando 0.03em
     de folga para o último "A" não ficar rasante ao corte da máscara.
     Desloca o centro óptico em ~1px, abaixo do perceptível. */
  margin-right: -0.42em;
  line-height: 1;
  color: var(--rosa);
}

@media (max-width: 759px) {
  .capa-flank {
    position: static;
    order: 2;
    text-align: center;
    margin-top: 18px;
  }

  .capa-flank br {
    content: "";
  }

  .capa-flank br::after {
    content: " · ";
  }

  .capa-flank-right {
    display: none;
  }

  .capa-aneis {
    width: 150vw;
  }
}

/* ══════════ camada 02 · montagem ══════════ */

.montagem {
  background: var(--nata);
}

.montagem-grid {
  display: grid;
  gap: clamp(40px, 6vw, 80px);
}

/* Escalas da display recuadas pelo fator 0.911 na troca Cormorant → Ogg.
   A Ogg tem caixa alta 0.7031/em contra 0.6406/em da Cormorant, ou seja é
   ~10% maior no mesmo corpo. Sem esse recuo o tipo cresce opticamente e
   duas linhas passam a quebrar ("nenhuma pressa." e "Ninho com geleia de
   morango"). Trocar a display de novo = refazer esta conta. */
.montagem h2,
.chocolate-heading h2,
.ninho-copy h2,
.pedido-heading h2 {
  font-size: clamp(2.35rem, 5.3vw, 4.65rem);
}

.montagem .lede,
.ninho .lede {
  max-width: 52ch;
  margin-top: clamp(20px, 3vh, 32px);
  color: var(--sepia);
  font-size: 1.06em;
}

/* a etiqueta colada no pote */
.etiqueta-pote {
  margin: clamp(26px, 4vh, 40px) 0 0;
  width: min(100%, 320px);
}

.etiqueta-pote div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.55em 0;
  border-bottom: 1px solid var(--hairline-soft);
}

.etiqueta-pote dt {
  font-style: italic;
  color: var(--sepia);
}

.etiqueta-pote dd {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.montagem-plate {
  margin: 0;
  width: min(100%, 480px);
}

.montagem-plate .mask,
.montagem-result .mask,
.ninho-plate .mask,
.ninho-result .mask,
.pedido-plate .mask {
  border: 1px solid var(--hairline);
  box-shadow: 0 30px 70px -36px rgba(51, 32, 26, 0.5);
}

@media (min-width: 960px) {
  .montagem-grid {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
  }

  .montagem-plate {
    justify-self: end;
  }
}

.montagem-result-shell {
  padding-top: 0;
}

.montagem-result {
  width: min(100%, 900px);
  margin: 0 auto;
}

/* ---- a montagem do pote (sequência scrolly) ---- */

html.js .pote-scroll {
  height: 400vh;
}

.pote-stage {
  position: sticky;
  top: var(--header-h);
  min-height: calc(100svh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 3.5vh, 38px);
  width: min(100%, var(--sheet-max));
  margin: 0 auto;
  padding: 4vh var(--space);
}

html:not(.js) .pote-stage,
.pote-stage.is-static {
  position: static;
  min-height: 0;
  padding-block: clamp(48px, 9vh, 96px);
}

.pote-stage-label {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 10px;
}

.pote-canvas {
  position: relative;
  width: min(300px, 64vw);
  margin: 0 auto;
  aspect-ratio: 10 / 8.4;
  perspective: 1400px;
}

.pote-tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* o copo — desenho técnico do pote, em hairline */
.pote-copo {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 12%;
  bottom: 4%;
  border: 1.5px solid rgba(51, 32, 26, 0.55);
  border-top: 0;
  border-radius: 4px 4px 30px 30px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 26%);
  box-shadow: 0 24px 50px -24px rgba(51, 32, 26, 0.45);
}

/* a borda da tampa, mais larga que o copo */
.pote-borda {
  position: absolute;
  left: 3.5%;
  right: 3.5%;
  top: 8%;
  height: 4.5%;
  border: 1.5px solid rgba(51, 32, 26, 0.55);
  border-radius: 999px;
  background: var(--nata);
}

.pote-camadas {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column-reverse;
  transform-origin: 50% 100%;
}

.pote-camadas.is-squash {
  animation: pote-squash 340ms var(--ease-settle);
}

@keyframes pote-squash {
  0% {
    transform: scaleY(1);
  }
  38% {
    transform: scaleY(0.958);
  }
  100% {
    transform: scaleY(1);
  }
}

.pote-camada {
  transform: scaleY(0);
  transform-origin: 50% 100%;
  will-change: transform;
  box-shadow: inset 0 1px 0 rgba(23, 13, 8, 0.16);
}

html:not(.js) .pote-camada,
.pote-stage.is-static .pote-camada {
  transform: none;
}

/* Cinco faixas somando 100%. Os tons alternam de propósito: nenhuma
   camada encosta em outra de valor parecido, senão a pilha vira mancha. */

.pote-camada[data-cor="massa"] {
  flex: 0 0 22%;
  background: linear-gradient(180deg, #b3814f, #a47443);
}

/* brigadeiro de ninho — a base dos potes de massa branca */
.pote-camada[data-cor="recheio"] {
  flex: 0 0 19%;
  background: linear-gradient(180deg, #f6e9c0, #eedca6);
}

/* a segunda camada, que decide o sabor */
.pote-camada[data-cor="recheio-2"] {
  flex: 0 0 19%;
  background: linear-gradient(180deg, #6b3d20, #5e351c);
}

.pote-camada[data-cor="cobertura"] {
  flex: 0 0 18%;
  background:
    radial-gradient(circle at 22% 44%, #3a2113 0 2.5px, transparent 3px),
    radial-gradient(circle at 56% 30%, #3a2113 0 2px, transparent 2.5px),
    radial-gradient(circle at 82% 56%, #3a2113 0 2.5px, transparent 3px),
    linear-gradient(180deg, #6b3d20, #5e351c);
  background-size: 52px 26px, 44px 22px, 60px 30px, 100% 100%;
}

/* reflexo do plástico por cima das camadas */
.pote-brilho {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10%;
  width: 12%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* farelos que sobem a cada camada assentada */
.pote-farelos {
  position: absolute;
  top: 6%;
  left: 50%;
  width: 0;
  height: 0;
}

.pote-farelos span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #5e351c;
  opacity: 0;
}

.pote-farelos span:nth-child(2n) {
  width: 3px;
  height: 3px;
  background: #d8b978;
}

.pote-farelos span:nth-child(1) { --dx: -46px; --dy: -30px; }
.pote-farelos span:nth-child(2) { --dx: -20px; --dy: -48px; animation-delay: 40ms; }
.pote-farelos span:nth-child(3) { --dx: 8px; --dy: -38px; animation-delay: 20ms; }
.pote-farelos span:nth-child(4) { --dx: 30px; --dy: -50px; animation-delay: 60ms; }
.pote-farelos span:nth-child(5) { --dx: 48px; --dy: -28px; animation-delay: 30ms; }
.pote-farelos span:nth-child(6) { --dx: 66px; --dy: -40px; animation-delay: 80ms; }
.pote-farelos span:nth-child(7) { --dx: 86px; --dy: -20px; animation-delay: 50ms; }

.pote-farelos.is-puff span {
  animation-name: pote-farelo;
  animation-duration: 560ms;
  animation-timing-function: var(--ease-rise);
  animation-fill-mode: forwards;
}

@keyframes pote-farelo {
  0% {
    opacity: 0.95;
    transform: translate(0, 6px) scale(0.5);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(1);
  }
}

.pote-readout {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 14px;
}

/* o nome da camada da vez, na voz da marca */
.pote-nome {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.2rem, 6.4vw, 4.55rem);
  line-height: 1;
  letter-spacing: 0.005em;
  min-height: 1.1em;
}

.pote-nome.is-tick {
  animation: pote-nometick 300ms var(--ease-rise);
}

@keyframes pote-nometick {
  from {
    opacity: 0;
    transform: translateY(0.28em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.pote-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pote-steps li {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sepia);
  opacity: 0.45;
  transition: opacity 240ms var(--ease-rise), color 240ms var(--ease-rise);
}

.pote-steps li.is-done {
  opacity: 1;
}

.pote-steps li.is-current {
  opacity: 1;
  color: var(--rosa);
}

.pote-motto {
  font-family: var(--voz);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  color: var(--tinta);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 600ms var(--ease-rise),
    transform 600ms var(--ease-rise);
}

.pote-motto.is-shown,
html:not(.js) .pote-motto,
.pote-stage.is-static .pote-motto {
  opacity: 1;
  transform: none;
}

.pote-timeline {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(560px, 100%);
  margin: 0 auto;
}

.pote-num,
.pote-num-end {
  min-width: 7ch;
  letter-spacing: 0.1em;
}

.pote-num-end {
  min-width: 4ch;
  text-align: right;
}

.pote-track {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--hairline-soft);
}

.pote-track::before,
.pote-track::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 1px;
  height: 9px;
  background: var(--hairline);
}

.pote-track::before {
  left: 0;
}

.pote-track::after {
  right: 0;
}

.pote-fill {
  position: absolute;
  inset: 0;
  background: var(--rosa);
  transform: scaleX(0);
  transform-origin: left center;
}

html:not(.js) .pote-fill,
.pote-stage.is-static .pote-fill {
  transform: none;
}

/* ══════════ camada 03 · chocolate ══════════ */

.chocolate {
  background: var(--cacau);
  color: var(--vela);
  border-top-color: rgba(243, 233, 215, 0.28);
}

.chocolate .camada-body {
  padding-bottom: 0;
}

.chocolate-heading {
  display: grid;
  gap: 24px;
}

@media (min-width: 960px) {
  .chocolate-heading {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: end;
    gap: 48px;
  }

  .chocolate-heading p {
    max-width: 44ch;
    justify-self: end;
    padding-bottom: 0.6em;
  }
}

/* A linha de acento dos títulos. Sem itálico, a cor é o único distintivo:
   rosa-framboesa nas folhas claras e caramelo sobre o cacau. */
.montagem h2 em,
.ninho-copy h2 em,
.pedido-heading h2 em {
  color: var(--rosa);
}

.chocolate-heading h2 em {
  color: var(--rosa-luz);
}

.chocolate-heading p {
  max-width: 52ch;
  color: rgba(243, 233, 215, 0.78);
}

.reel {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 32px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: clamp(40px, 7vh, 72px) var(--space) 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(243, 233, 215, 0.3) transparent;
}

.reel-panel {
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: center;
}

.reel-panel .mask {
  border: 1px solid var(--hairline-dark);
}

.reel-panel .mask img {
  height: clamp(320px, 56vh, 620px);
  width: auto;
  max-width: 86vw;
  object-fit: cover;
}

.reel-panel figcaption {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-top: 12px;
}

.reel-panel .etiqueta {
  color: var(--caramelo);
}

.reel-verb {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--vela);
}

.reel-hint {
  text-align: center;
  margin: 8px 0 0;
  padding-bottom: clamp(48px, 8vh, 90px);
  color: rgba(243, 233, 215, 0.45);
}

/* ══════════ camada 04 · ninho (massa chiffon branca) ══════════ */

.ninho {
  background: var(--marfim);
}

.ninho-grid {
  display: grid;
  gap: clamp(40px, 6vw, 80px);
}

.ninho-plate {
  margin: 0;
  width: min(100%, 460px);
}

@media (min-width: 960px) {
  .ninho-grid {
    grid-template-columns: 0.95fr 1.05fr;
    align-items: start;
  }

  /* o espelho da montagem: foto à esquerda, conversa à direita */
  .ninho-plate {
    order: -1;
    justify-self: start;
  }

  .ninho-copy {
    justify-self: end;
    max-width: 56ch;
  }
}

.ninho-result-shell {
  padding-top: 0;
}

.ninho-result {
  width: min(100%, 900px);
  margin: 0 auto;
}

/* ══════════ camada 05 · cardápio & pedido ══════════ */

.pedido {
  background: var(--nata);
}

.pedido-heading {
  display: grid;
  gap: 22px;
  margin-bottom: clamp(44px, 7vh, 88px);
}

.pedido-heading p {
  max-width: 50ch;
  color: var(--sepia);
}

.cast {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.cast-row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 20px;
  align-items: baseline;
  width: 100%;
  padding: clamp(18px, 3vh, 30px) 4px;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  transition: padding-left 380ms var(--ease-draw);
}

.cast-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--rosa-wash), transparent 70%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease-draw);
}

.cast-num {
  color: var(--rosa);
}

/* oito linhas, não três: a escala recua para o nome mais longo caber
   numa linha e a lista continuar escaneável de cima a baixo */
.cast-name {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.9vw, 2.35rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  transition: color 300ms var(--ease-rise), font-style 0ms;
}

/* Sem itálico no hover (a Ogg não tem itálico usável): o realce fica na
   cor e no deslocamento da linha, que já eram dois sinais. */
button.cast-row:hover .cast-name,
button.cast-row:focus-visible .cast-name {
  color: var(--rosa);
}

button.cast-row:hover {
  padding-left: clamp(10px, 2vw, 28px);
}

button.cast-row:hover::before,
button.cast-row:focus-visible::before {
  transform: scaleX(1);
}

.cast-notes {
  grid-column: 2;
  font-style: italic;
  font-size: 0.98rem;
  color: var(--sepia);
}

/* a afordância de foto — só existe onde há foto de verdade */
.cast-see {
  grid-column: 2;
  justify-self: start;
  white-space: nowrap;
  color: var(--rosa);
  /* 0.78 e não 0.7: abaixo disso a razão de contraste cai para ~4.6:1,
     sem margem para texto de 10.5px */
  opacity: 0.78;
  transition:
    opacity 300ms var(--ease-rise),
    transform 300ms var(--ease-settle);
}

button.cast-row:hover .cast-see,
button.cast-row:focus-visible .cast-see {
  opacity: 1;
  transform: translateX(4px);
}

/* rótulo de cada lista: a contagem em vinho, a massa em sépia */
.cast-group {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: clamp(36px, 5.5vh, 60px) 0 10px;
  line-height: 1.4;
  color: var(--rosa);
}

.cardapio > .cast-group:first-child {
  margin-top: 0;
}

.cast-group span {
  color: var(--sepia);
}

@media (min-width: 760px) {
  /* a 4ª coluna é fixa: sem isso, linhas sem foto empurram as notas
     mais para a direita e a borda direita da lista desalinha */
  .cast-row {
    grid-template-columns: 3.2rem 1fr auto 8.5ch;
    gap: 20px;
  }

  /* A coluna das notas cresce com a janela, mas nunca o bastante para
     empurrar o nome da receita para uma segunda linha — o nome vem antes
     na hierarquia. Curva ancorada em medição: ~24ch a 820px (onde o nome
     mais longo ainda cabe numa linha) e 42ch a partir de ~1100px. */
  .cast-notes {
    grid-column: auto;
    justify-self: end;
    text-align: right;
    max-width: clamp(22ch, 48.6vw - 218px, 42ch);
  }

  .cast-see {
    grid-column: auto;
    justify-self: end;
  }
}

.pedido-foot {
  margin-top: 18px;
  letter-spacing: 0.16em;
}

/* preview flutuante */
.cast-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: clamp(180px, 19vw, 290px);
  aspect-ratio: 2 / 3;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: var(--nata);
  border: 1px solid var(--hairline);
  box-shadow: 0 34px 80px -30px rgba(51, 32, 26, 0.6);
  transition:
    opacity 320ms var(--ease-rise),
    visibility 0ms 320ms;
}

.cast-preview.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 320ms var(--ease-rise),
    visibility 0ms;
}

.cast-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (pointer: coarse) {
  .cast-preview {
    display: none;
  }
}

/* ---- o pedido ---- */

.pedido-grid {
  display: grid;
  gap: clamp(44px, 6vw, 80px);
  align-items: start;
  margin-top: clamp(52px, 9vh, 100px);
}

.pedido-copy {
  display: grid;
  gap: clamp(18px, 3vh, 28px);
}

.pedido-subtitle {
  font-size: clamp(1.65rem, 3.1vw, 2.45rem);
}

.pedido-copy > p {
  max-width: 50ch;
  color: var(--sepia);
}

.pedido-form {
  display: grid;
  border: 1px solid var(--hairline);
  background: var(--marfim);
  margin-top: 10px;
}

.form-cell {
  border-bottom: 1px solid var(--hairline);
}

.form-cell label {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
}

.pedido-form input,
.pedido-form select {
  width: 100%;
  min-height: 40px;
  border: 0;
  border-bottom: 1px solid rgba(51, 32, 26, 0.35);
  border-radius: 0;
  background: transparent;
  padding: 2px 0 6px;
  color: var(--tinta);
  color-scheme: light;
  accent-color: var(--rosa);
  transition: border-color 240ms var(--ease-rise);
}

.pedido-form input:focus-visible,
.pedido-form select:focus-visible {
  outline: 2px solid var(--rosa);
  outline-offset: 3px;
  border-bottom-color: var(--rosa);
}

.pedido-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236e5140' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 24px;
}

.form-submit {
  margin: 22px 18px 18px;
  justify-self: start;
}

.form-status {
  min-height: 1.6em;
  padding: 0 18px 16px;
  font-style: italic;
  color: var(--rosa);
}

.pedido-plate {
  margin: 0;
  width: min(100%, 460px);
  justify-self: center;
}

@media (min-width: 640px) {
  .pedido-form {
    grid-template-columns: 1fr 1fr;
  }

  .form-cell-wide {
    grid-column: 1 / -1;
  }

  .form-cell:nth-child(2) {
    border-right: 1px solid var(--hairline);
  }

  .form-submit,
  .form-status {
    grid-column: 1 / -1;
  }
}

@media (min-width: 960px) {
  .pedido-grid {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .pedido-plate {
    justify-self: end;
  }
}

/* ══════════ rodapé ══════════ */

.colofao {
  background: var(--cacau);
  color: var(--vela);
  border-top-color: rgba(243, 233, 215, 0.28);
}

.colofao .camada-body {
  display: grid;
  gap: clamp(40px, 7vh, 72px);
}

.colofao-brand {
  display: grid;
  justify-items: center;
  gap: 22px;
  text-align: center;
}

.roundel {
  width: 148px;
  color: var(--caramelo);
}

.roundel svg {
  display: block;
  width: 100%;
  animation: aneis-spin 70s linear infinite;
}

.roundel-text {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 8.6px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  fill: var(--caramelo);
}

.colofao-motto {
  font-family: var(--voz);
  font-size: 1.4rem;
  color: rgba(243, 233, 215, 0.85);
}

.colofao-info {
  display: grid;
  gap: 32px;
  justify-items: start;
  font-style: normal;
}

.colofao-info .etiqueta {
  display: block;
  margin-bottom: 10px;
  color: var(--caramelo);
}

.colofao-info p {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(243, 233, 215, 0.82);
}

.colofao-info a,
.colofao-credito a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--hairline-dark);
  transition: text-decoration-color 240ms var(--ease-rise), color 240ms var(--ease-rise);
}

.colofao-info a:hover,
.colofao-credito a:hover {
  color: var(--caramelo);
  text-decoration-color: var(--caramelo);
}

.colofao-titleblock {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  border: 1px solid var(--hairline-dark);
  padding: 12px 18px;
  color: rgba(243, 233, 215, 0.6);
}

/* A assinatura de quem fez. Fica fora da moldura do titleblock — aquela
   é a chancela da obra, esta é do autor — e mais apagada, para não
   competir com a marca da cliente. Não baixe de 0.55: abaixo disso o
   contraste sobre o cacau cai dos 4.5:1 exigidos para texto pequeno. */
.colofao-credito {
  text-align: center;
  letter-spacing: 0.2em;
  color: rgba(243, 233, 215, 0.55);
}

@media (min-width: 640px) {
  .colofao-info {
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    gap: clamp(40px, 8vw, 110px);
  }
}

/* ══════════ o pote aberto — foto em tela cheia ══════════ */

.pote-aberto {
  position: fixed;
  inset: 0;
  z-index: 110;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.pote-aberto::backdrop {
  background: rgba(23, 13, 8, 0.55);
}

.pote-aberto-sheet {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--nata);
  color: var(--tinta);
  border-top: 1px solid rgba(51, 32, 26, 0.4);
  box-shadow: 0 -30px 80px rgba(23, 13, 8, 0.4);
  transform: translateY(103%);
  transition: transform 700ms var(--ease-draw);
}

.pote-aberto.is-open .pote-aberto-sheet {
  transform: none;
}

.pote-aberto-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px var(--space);
  border-bottom: 1px solid var(--hairline);
}

.pote-aberto-close {
  padding: 10px 14px;
  border: 1px solid var(--hairline);
  letter-spacing: 0.14em;
  color: var(--tinta);
  transition:
    background 280ms var(--ease-rise),
    color 280ms var(--ease-rise),
    border-color 280ms var(--ease-rise);
}

.pote-aberto-close:hover {
  background: var(--rosa);
  border-color: var(--rosa);
  color: var(--marfim);
}

.pote-aberto-mat {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vh, 40px) var(--space);
  overflow: auto;
}

.pote-aberto-mat img {
  max-height: 100%;
  max-width: min(100%, 760px);
  width: auto;
  border: 1px solid var(--hairline);
  box-shadow: 0 40px 90px -44px rgba(51, 32, 26, 0.55);
}

/* ══════════ orquestração de entrada ══════════ */

html.js [data-load] {
  opacity: 0;
  transform: translateY(18px);
}

html.js .capa-aneis[data-load] {
  transform: translate(-50%, -54%) scale(0.985);
}

/* o wordmark não desliza junto: quem o revela são as máscaras de linha */
html.js .capa-word[data-load] {
  transform: none;
}

body.is-loaded [data-load] {
  opacity: 1;
  transform: none;
  transition:
    opacity 900ms var(--ease-rise),
    transform 900ms var(--ease-rise);
}

body.is-loaded .capa-aneis[data-load] {
  opacity: 0.3;
  transform: translate(-50%, -54%);
}

body.is-loaded .capa-word[data-load] {
  opacity: 1;
  transform: none;
}

body.is-loaded [data-load="1"] { transition-delay: 60ms; }
body.is-loaded [data-load="2"] { transition-delay: 180ms; }
body.is-loaded [data-load="3"] { transition-delay: 340ms; }
body.is-loaded [data-load="4"] { transition-delay: 420ms; }
body.is-loaded [data-load="5"] { transition-delay: 600ms; }

/* a capa também comanda suas máscaras */
html.js .capa .mask {
  clip-path: inset(0 0 100% 0);
}

body.is-loaded .capa .mask {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1100ms var(--ease-draw) 220ms;
}

body.is-loaded .capa .mask img {
  transform: none;
  transition: transform 1600ms var(--ease-rise) 220ms;
}

html.js .capa .word-mask .word-line {
  transform: translateY(115%);
}

body.is-loaded .capa .word-mask .word-line {
  transform: none;
  transition: transform 1050ms var(--ease-draw) 460ms;
}

/* MC sobe primeiro, DOCERIA em seguida — a marca se monta em duas partes */
body.is-loaded .capa-word .word-mask:nth-of-type(2) .word-line {
  transition-delay: 640ms;
}

/* ══════════ reveals de rolagem ══════════ */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 860ms var(--ease-rise),
    transform 860ms var(--ease-rise);
}

/* ══════════ movimento reduzido / sem js ══════════ */

@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;
    scroll-behavior: auto !important;
  }

  html.js [data-load],
  html.js [data-reveal],
  html.js .pote-motto,
  body.is-loaded .capa-aneis[data-load] {
    opacity: 1 !important;
    transform: none !important;
  }

  html.js .capa-aneis[data-load] {
    transform: translate(-50%, -54%) !important;
    opacity: 0.3 !important;
  }

  html.js .capa-word[data-load] {
    transform: none !important;
  }

  html.js .anel-traco {
    stroke-dashoffset: 0 !important;
  }

  html.js .mask,
  html.js .capa .mask {
    clip-path: none !important;
  }

  html.js .mask img {
    transform: none !important;
  }

  html.js .word-mask .word-line,
  html.js .capa .word-mask .word-line {
    transform: none !important;
  }

  html.js .pilha .camada {
    position: relative;
    transform: none !important;
  }

  .camada::after {
    display: none;
  }

  html.js .pote-scroll {
    height: auto;
  }

  .pote-stage {
    position: static;
    min-height: 0;
    padding-block: clamp(48px, 9vh, 96px);
  }

  .pote-camada {
    transform: none !important;
  }

  .pote-fill {
    transform: none !important;
  }

  .aneis-svg,
  .roundel svg {
    animation: none;
  }

  .cast-preview {
    display: none;
  }
}