/* Home-page hero: pastry conveyor belts (motion driven by hero-pastries.js).
   Columns of Cream-colorway pastries drift vertically, adjacent belts in opposite
   directions. A radial mask fades the pastries to nothing toward the center, so
   they dissolve as they approach the headline / CTAs (no panel needed). */

/* Retire the old inline SVG art (replaced by the belts). */
.hero .pbg { display: none !important; }

.pastry-belts {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.62;
  --pscale: 1;   /* global belt-illustration scale (mobile shrinks this) */
}

/* The "faded circle" — a chocolate radial that dissolves the pastries toward
   the center so the copy reads clean. It's a fade-in OVERLAY (not a belt mask)
   so it can appear COUPLED with the wordmark: the belts fill the whole hero
   first, then on the same beat the center clears and the logo fades in.
   (Same 0.9s delay as .logo-svg-wrap in hero-header.css.) */
.hero-fade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(42% 72% at 50% 50%, var(--choc) 20%, transparent 66%);
  opacity: 0;
  animation: hero-fade-in 0.8s 0.9s ease both;
}
@keyframes hero-fade-in { from { opacity: 0; } to { opacity: 1; } }

.belt {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.belt-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.belt-copy { display: flex; flex-direction: column; align-items: center; }

/* Symmetric margins so the two copies tile with even spacing. Widths are set
   per pastry below to match the designer's relative sizes (see size table). */
.belt-copy img { width: calc(60px * var(--pscale)); height: auto; display: block; margin: 1.4rem 0; transform-origin: center; }

/* ---- Designer's relative sizes ------------------------------------------
   The brand illustrations ship pre-trimmed, so each source PNG's pixel
   dimensions ARE the scale the designer intended relative to the others.
   Width = round(source_width * 0.22); height follows (aspect preserved), so
   every pastry keeps the designer's proportions to every other one. */
.belt-copy img.p-quiche        { width: calc(117px * var(--pscale)); }
.belt-copy img.p-tart          { width: calc(117px * var(--pscale)); }
.belt-copy img.p-baguette      { width: calc(102px * var(--pscale)); }
.belt-copy img.p-rollingpin    { width: calc(99px  * var(--pscale)); }
.belt-copy img.p-bread         { width: calc(90px  * var(--pscale)); }
.belt-copy img.p-puffpastry    { width: calc(71px  * var(--pscale)); }
.belt-copy img.p-macaron       { width: calc(64px  * var(--pscale)); }
.belt-copy img.p-minitart      { width: calc(63px  * var(--pscale)); }
.belt-copy img.p-croissant     { width: calc(61px  * var(--pscale)); }
.belt-copy img.p-palmier       { width: calc(59px  * var(--pscale)); }
.belt-copy img.p-millefeuille  { width: calc(59px  * var(--pscale)); }
.belt-copy img.p-painauchocolat{ width: calc(56px  * var(--pscale)); }
.belt-copy img.p-eclair        { width: calc(55px  * var(--pscale)); }
.belt-copy img.p-donut         { width: calc(52px  * var(--pscale)); }
.belt-copy img.p-meringue      { width: calc(51px  * var(--pscale)); }
.belt-copy img.p-canele        { width: calc(50px  * var(--pscale)); }
.belt-copy img.p-cinnamonroll  { width: calc(46px  * var(--pscale)); }
.belt-copy img.p-whisk         { width: calc(46px  * var(--pscale)); }
.belt-copy img.p-macaron2      { width: calc(44px  * var(--pscale)); }
.belt-copy img.p-madeleine     { width: calc(42px  * var(--pscale)); }
.belt-copy img.p-cupcake       { width: calc(40px  * var(--pscale)); }
.belt-copy img.p-strawberry    { width: calc(38px  * var(--pscale)); }
.belt-copy img.p-creampuff     { width: calc(37px  * var(--pscale)); }
.belt-copy img.p-meringuetart  { width: calc(34px  * var(--pscale)); }

/* ---- Each pastry dances with its own style ------------------------------
   Warm and neighborly, not busy: gentle amplitudes, unhurried tempos.
   (animation-delay is set per-image in JS; both loop-copies share the same
   delay so the wrap stays seamless.)

   Two of the moves borrow the BYB ballerina's technique: a mirror-flip that
   SNAPS between facing-right and facing-left via steps(1) (no interpolation
   through scale 0, which would visually collapse the figure). Because the
   flip lives on the `scale` transform-component and the lean on `rotate`,
   the two layer without fighting over one combined `transform`. */
@keyframes d-flip {
  0%   { scale: 1 1;  animation-timing-function: steps(1, jump-end); }
  50%  { scale: -1 1; animation-timing-function: steps(1, jump-end); }
  100% { scale: 1 1; }
}
@keyframes d-bell   { 0%,100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } }
@keyframes d-jiggle { 0%,100% { transform: rotate(-3deg); } 25% { transform: rotate(2deg); } 50% { transform: rotate(-2deg); } 75% { transform: rotate(3deg); } }
/* Seamless rotations — one full turn lands exactly where it began (360°=0°),
   so there is no reset jump at all. `d-tick` snaps 30° at a time (12 steps);
   `d-turn` glides continuously. Both live on the `rotate` component. */
@keyframes d-tick { to { rotate: -360deg; } }
@keyframes d-turn { to { rotate: 360deg; } }
/* Gentle: a slow drift around a small circle plus a soft side-to-side tilt.
   The circle lives on `translate`, the tilt on `rotate`, so the two layer
   without fighting. Long durations + tiny amplitudes = calm, barely-there. */
@keyframes d-orbit {
  0%    { translate: 4px 0; }
  12.5% { translate: 2.8px 2.8px; }
  25%   { translate: 0 4px; }
  37.5% { translate: -2.8px 2.8px; }
  50%   { translate: -4px 0; }
  62.5% { translate: -2.8px -2.8px; }
  75%   { translate: 0 -4px; }
  87.5% { translate: 2.8px -2.8px; }
  100%  { translate: 4px 0; }
}
@keyframes d-tiltgentle { 0%, 100% { rotate: -3.5deg; } 50% { rotate: 3.5deg; } }
/* "Nibble": clip-path carves a scalloped bite out of the top-right, holds a
   beat, then closes again. Every keyframe uses the SAME vertex count so the
   shape interpolates smoothly (no snapping). A whimsical couldn't-resist touch. */
@keyframes d-bite {
  0%, 16%   { clip-path: polygon(0 0, 62% 0, 74% 0,  86% 0,  100% 0,  100% 22%, 100% 100%, 0 100%); }
  34%, 72%  { clip-path: polygon(0 0, 62% 0, 70% 11%, 82% 7%, 90% 15%, 100% 22%, 100% 100%, 0 100%); }
  90%, 100% { clip-path: polygon(0 0, 62% 0, 74% 0,  86% 0,  100% 0,  100% 22%, 100% 100%, 0 100%); }
}
@keyframes d-bob    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes d-sway   { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes d-pulse  { 0%,100% { transform: scale(1); }      50% { transform: scale(1.09); } }
@keyframes d-tilt   { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }

/* Mirror-flip family: faces left, then right, like the ballerina. Unhurried
   holds between flips keep it charming rather than flickery. */
.belt-copy img.p-croissant   { animation: d-flip 6.25s infinite; }
.belt-copy img.p-meringuetart { animation: d-flip 6.875s infinite; }
/* (Image #30) minitart & cupcake: a very slow, gentle circle + tilt. */
.belt-copy img.p-minitart,
.belt-copy img.p-cupcake     { animation: d-orbit 16s linear infinite, d-tiltgentle 11s ease-in-out infinite; }
.belt-copy img.p-cinnamonroll { animation: d-flip 6.5s infinite; }
/* Strawberry: a slow, short bell-swing from the stem (was rapid & wide). */
.belt-copy img.p-strawberry  { animation: d-bell 8.1s ease-in-out infinite; transform-origin: 50% 8%; }
/* Millefeuille: a soft, unhurried jiggle. */
.belt-copy img.p-millefeuille { animation: d-jiggle 3.5s ease-in-out infinite; }
/* (Image #15) These two felt nervous on the zig-zag "wander": give the tart a
   slow, deliberate rock and the quiche a calm float. */
.belt-copy img.p-tart        { animation: d-sway 5.5s ease-in-out infinite; }
.belt-copy img.p-quiche      { animation: d-bob 4s ease-in-out infinite; }
.belt-copy img.p-canele,
.belt-copy img.p-bread       { animation: d-bob 3.25s ease-in-out infinite; }
/* Prototype: the madeleine gets nibbled (bobs + takes a bite). */
.belt-copy img.p-madeleine   { animation: d-bob 3.25s ease-in-out infinite, d-bite 7.5s ease-in-out infinite; }
.belt-copy img.p-eclair,
.belt-copy img.p-painauchocolat,
.belt-copy img.p-puffpastry,
.belt-copy img.p-baguette    { animation: d-sway 3.75s ease-in-out infinite; }
.belt-copy img.p-creampuff   { animation: d-pulse 3s ease-in-out infinite; }
.belt-copy img.p-palmier     { animation: d-tilt 5.375s ease-in-out infinite; }
/* (Image #15) macaron: a very slow, smooth turn — the calmest motion there is.
   Donut: steady ticks, 30° at a time, counter-clockwise. */
.belt-copy img.p-macaron     { animation: d-turn 28s linear infinite; }
.belt-copy img.p-donut       { animation: d-tick 18s steps(12) infinite; }
/* New arrivals — a second macaron and the baker's tools. */
.belt-copy img.p-macaron2    { animation: d-pulse 3s ease-in-out infinite; }
.belt-copy img.p-meringue    { animation: d-bob 3.25s ease-in-out infinite; }
.belt-copy img.p-whisk       { animation: d-sway 3.75s ease-in-out infinite; }
.belt-copy img.p-rollingpin  { animation: d-tilt 5.375s ease-in-out infinite; }


@media (prefers-reduced-motion: reduce) {
  .belt-copy img { animation: none !important; }
  /* No fade-in — clear the center immediately so the copy is always readable. */
  .hero-fade { animation: none !important; opacity: 1; }
}

@media (max-width: 640px) {
  .pastry-belts {
    opacity: 0.45;
    --pscale: 0.8;   /* shrink every illustration proportionally on phones */
  }
  .hero-fade { background: radial-gradient(60% 62% at 50% 48%, var(--choc) 16%, transparent 62%); }
  .belt-copy img { margin: 1.2rem 0; }
}