/* The content repeats at a fixed gap; its width never stretches to fill a screen. */
.ticker {
  --ticker-gap: 20px;
  position: relative;
  z-index: 3;
  width: calc(100% + 64px);
  margin-left: -32px;
}
.ticker-track {
  width: max-content;
  gap: 0;
  animation: pizza-marquee var(--ticker-duration, 100s) linear infinite;
  will-change: transform;
}
.ticker-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  min-width: 0;
  padding: 0;
}
.ticker-unit {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--ticker-gap);
  padding-inline: calc(var(--ticker-gap) / 2);
}
.ticker-unit > * { flex: 0 0 auto; }
@keyframes pizza-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* The delivery label has its own row, outside the moving illustration. */
.hero-art { aspect-ratio: auto; }
.hero-art-stage {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}
.hero-art-stage .hero-mascot {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  z-index: 1;
}
.hero-art-stage .round-stamp { z-index: 0; }
.hero-art-caption {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  width: 94%;
  max-width: 460px;
  margin: 30px auto 0;
  padding: 4px 10px;
}
.hero-art-caption .delivery-sticker {
  position: relative;
  inset: auto;
  z-index: auto;
  flex: 0 0 185px;
  max-width: 185px;
  padding: 11px 17px;
  font-size: 12px;
}
.hero-art-caption .delivery-sticker strong { font-size: 17px; }
.hero-art-caption .art-note {
  position: relative;
  inset: auto;
  font-size: 22px;
  flex: 0 1 180px;
}

/* Small neutral dots provide the printed-paper texture. */
body { isolation: isolate; }
.dot-field {
  position: fixed;
  inset: -40px;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, #82745b3b 1px, transparent 1.35px);
  background-size: 14px 14px;
  animation: pizza-dot-drift 20s linear infinite;
}
.hero-copy {
  background: radial-gradient(ellipse at 35% 48%, #fff6df 28%, #fff6dfed 58%, #fff6df00 77%);
}
.section-heading > div:first-child,
.story-copy,
.vault-intro > h2,
.vault-intro > p { position: relative; }
.vault-section, .story-section, .closing-section { isolation: isolate; }
.section-dots {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, #20231e22 1px, transparent 1.35px);
  background-size: 14px 14px;
}
.vault-section .section-dots {
  background-image: radial-gradient(circle, #fff6df22 1px, transparent 1.35px);
}
.closing-section .section-dots {
  background-image: radial-gradient(circle, #fff6df29 1px, transparent 1.35px);
}
.closing-section::before { display: none; }
.vault-layout, .story-layout { position: relative; }
.recipe-illustration {
  flex: 0 0 255px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.recipe-illustration img {
  width: 155px;
  padding: 7px;
  margin-block: -20px;
  flex: 0 0 155px;
  animation: pizza-slice-float 7s ease-in-out infinite;
  filter: drop-shadow(0 6px 0 #20231e14);
}
.recipe-illustration .recipe-note {
  display: block;
  margin-right: 0;
  font-size: 21px;
  transform: rotate(6deg);
}
.chart-canvas-wrap { height: 385px; }
.chart-empty { padding: 14px 24px 20px; }
.chart-oven {
  width: 174px;
  height: 174px;
  object-fit: contain;
  margin: -10px 0 2px;
  animation: pizza-oven-warmth 5s ease-in-out infinite;
}
.chart-empty > span:last-child { margin-top: 14px; }
.closing-pizza-art {
  position: absolute;
  left: -28px;
  top: 34px;
  width: min(24vw, 290px);
  pointer-events: none;
}
.closing-pizza-art img {
  padding: 12px;
  animation: pizza-slice-float 9s ease-in-out infinite reverse;
  filter: drop-shadow(6px 10px 0 #20231e24);
}
@keyframes pizza-dot-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(14px, 14px, 0); }
}
@keyframes pizza-slice-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-12deg); }
  50% { transform: translate3d(4px, -9px, 0) rotate(-5deg); }
}
@keyframes pizza-oven-warmth {
  0%, 100% { transform: translateY(0) rotate(-2deg); filter: drop-shadow(0 4px 0 #20231e10); }
  50% { transform: translateY(-3px) rotate(1deg); filter: drop-shadow(0 4px 12px #ffc54930); }
}
@media (max-width: 1150px) {
  .recipe-illustration { flex-basis: 210px; }
  .recipe-illustration img { width: 135px; flex-basis: 135px; }
  .recipe-illustration .recipe-note { font-size: 18px; }
  .hero-art-caption { gap: 20px; }
  .hero-art-caption .delivery-sticker { flex-basis: 165px; max-width: 165px; }
  .hero-art-caption .art-note { font-size: 20px; }
  .closing-pizza-art { left: -18px; top: 65px; width: 23vw; }
}
@media (max-width: 900px) {
  .hero-art-caption { gap: 15px; margin-top: 25px; width: 100%; padding-inline: 5px; }
  .hero-art-caption .delivery-sticker { flex-basis: 149px; max-width: 149px; padding: 10px 13px; }
  .hero-art-caption .delivery-sticker strong { font-size: 15px; }
  .hero-art-caption .art-note { font-size: 18px; }
  .recipe-section .section-heading { gap: 22px; }
  .recipe-illustration { flex-basis: 145px; }
  .recipe-illustration img { width: 140px; flex-basis: 140px; }
  .recipe-illustration .recipe-note { display: none; }
}
@media (max-width: 720px) {
  .ticker { --ticker-gap: 16px; }
  .hero-art { margin-top: 32px; margin-bottom: 0; width: 88%; }
  .hero-art-caption { margin-top: 22px; gap: 19px; }
  .hero-art-caption .delivery-sticker { flex-basis: 151px; max-width: 151px; }
  .hero-art-caption .art-note { font-size: 18px; }
  .recipe-section .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 125px;
    align-items: center;
    gap: 12px 4px;
  }
  .recipe-section .section-heading > div:first-child { grid-column: 1; grid-row: 1; }
  .recipe-section .section-heading > p { grid-column: 1 / -1; grid-row: 2; margin-top: 0; }
  .recipe-illustration { grid-column: 2; grid-row: 1; margin: 0; }
  .recipe-illustration img { width: 130px; flex-basis: 130px; margin: 0 0 0 -4px; padding: 9px; }
  .recipe-section .section-heading h2 { font-size: clamp(1.8rem, 7.4vw, 2.7rem); }
  .recipe-section .eyebrow { font-size: 12px; letter-spacing: .5px; }
  .chart-canvas-wrap { height: 365px; }
  .chart-oven { width: 148px; height: 148px; margin-top: -3px; }
  .chart-empty { padding: 13px 15px 17px; }
  .chart-empty > span:last-child { margin-top: 12px; }
  .closing-pizza-art {
    position: relative;
    inset: auto;
    width: 132px;
    margin: -25px auto 22px;
  }
  .closing-pizza-art img { padding: 7px; }
  .closing-content { padding-top: 5px; }
}
@media (max-width: 360px) {
  .hero-art-caption { gap: 13px; width: 110%; margin-left: -5%; }
  .hero-art-caption .delivery-sticker { flex-basis: 143px; max-width: 143px; }
  .hero-art-caption .art-note { font-size: 16px; }
  .recipe-section .section-heading { grid-template-columns: minmax(0, 1fr) 105px; }
  .recipe-illustration img { width: 113px; flex-basis: 113px; }
  .recipe-section .section-heading h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .dot-field, .ticker-track, .recipe-illustration img, .chart-oven, .closing-pizza-art img { animation: none; }
}

.vault-panel { min-height: 0; padding-top: 28px; }
.receipt-message { margin-top: 24px; padding-top: 22px; }
.receipt-end { margin-top: 25px; }

/* Hover uses the independent scale property. The existing transform animations
   keep their timing and position when a pointer enters or leaves. */
:root { --pizza-hover-ease: cubic-bezier(.22, .68, 0, 1); }
main > section,
.site-footer,
.recipe-menu,
.ingredient,
.receipt,
.chart-box,
.story-art-panel {
  scale: 1;
  transition: scale .38s var(--pizza-hover-ease);
}
.js-motion :is(.recipe-menu, .receipt, .chart-box, .story-art-panel).reveal {
  transition: opacity .65s ease, translate .65s ease,
    scale .38s var(--pizza-hover-ease);
}
img[src$=".png"] {
  scale: 1;
  pointer-events: auto;
  transition: scale .4s var(--pizza-hover-ease);
}
.wordmark,
.pizza-brand,
.round-stamp,
.delivery-sticker,
.closing-stamp,
.story-ticket,
.ingredient-number,
.handwritten,
.coin-symbol,
main h1,
main h2 {
  transition: scale .35s var(--pizza-hover-ease);
}
.pizza-brand {
  display: inline-block;
  transform-origin: 50% 65%;
  animation: pizza-brand-sway 6.4s ease-in-out infinite;
}
.ingredient h3 > .pizza-brand { color: inherit; font: inherit; }
.recipe-section .pizza-brand { animation-delay: -1.8s; }
.receipt .pizza-brand { animation-delay: -3.1s; }
.chart-section .pizza-brand { animation-delay: -4.3s; }
.story-section .pizza-brand { animation-delay: -2.4s; }
.closing-section .pizza-brand { animation-delay: -5.2s; }
.site-footer .pizza-brand { animation-delay: -3.6s; }

.story-art-panel > img { animation: pizza-history-float 8s ease-in-out infinite; }
main h1, main h2 { animation: pizza-title-float 8s ease-in-out infinite; }
.recipe-section h2, .story-section h2 { animation-delay: -2.5s; }
.vault-section h2, .closing-section h2 { animation-delay: -5s; }
.round-stamp,
.closing-stamp,
.story-ticket,
.ingredient-number,
.comic-spark { animation: pizza-detail-bob 7s ease-in-out infinite; }
.closing-stamp, .ingredient:nth-child(2) .ingredient-number { animation-delay: -2.2s; }
.story-ticket, .ingredient:nth-child(3) .ingredient-number { animation-delay: -4.5s; }
.spark-two { animation-delay: -3.5s; }

/* Movement is small and staggered, like the printed pieces coming to life. */
@keyframes pizza-brand-sway {
  0%, 100% { transform: translateY(0) rotate(-.7deg); }
  50% { transform: translateY(-2px) rotate(.7deg); }
}
@keyframes pizza-history-float {
  0%, 100% { transform: translateY(0) rotate(-.5deg); }
  50% { transform: translateY(-5px) rotate(.5deg); }
}
@keyframes pizza-title-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes pizza-detail-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}

/* Fine pointers get a gentle response; touch scrolling keeps its normal feel. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button {
    transition: transform .2s, box-shadow .2s, background .2s,
      scale .25s var(--pizza-hover-ease);
  }
  :root:not(.motion-off) .button:hover:not(:disabled) { scale: 1.025; }
  :root:not(.motion-off) :is(main > section, .site-footer):hover { scale: 1.006; }
  :root:not(.motion-off) :is(.recipe-menu, .receipt, .chart-box, .story-art-panel):hover {
    scale: 1.012;
  }
  :root:not(.motion-off) .ingredient:hover { scale: 1.015; }
  :root:not(.motion-off) img[src$=".png"]:hover,
  :root:not(.motion-off) .hero-art-stage:hover .hero-mascot { scale: 1.04; }
  :root:not(.motion-off) :is(.wordmark, .round-stamp, .delivery-sticker,
    .closing-stamp, .story-ticket, .ingredient-number, .handwritten, .coin-symbol):hover {
    scale: 1.035;
  }
  :root:not(.motion-off) .pizza-brand:hover { scale: 1.055; }
  :root:not(.motion-off) :is(main h1, main h2):hover { scale: 1.015; }

  .desktop-nav a, .footer-top nav a, .footer-top nav button,
  .chain-label, .text-link, .preview-toggle, .chart-timeframes button,
  .copy-contract, #motion-toggle {
    transition: scale .25s var(--pizza-hover-ease), color .2s, background .2s;
  }
  .text-link { display: inline-flex; align-items: center; }
  :root:not(.motion-off) :is(.desktop-nav a, .footer-top nav a,
    .footer-top nav button, .chain-label, .text-link, .preview-toggle,
    .chart-timeframes button, .copy-contract, #motion-toggle):hover:not(:disabled) {
    scale: 1.035;
  }
  :root:not(.motion-off) .wordmark:focus-visible { scale: 1.035; }
}
.motion-off *, .motion-off *::before, .motion-off *::after {
  transition: none !important;
}