/* ═══════════════════════════════════════════════════════
   HAUTE CUISINE — Motion layer
   Line art that draws itself, and a kitchen that breathes.
   Everything here is opt-in per element and fully disabled
   under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════ */

:root {
  /* Confident, weighted easings — no linear, ever. */
  --mo-draw:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --mo-settle:  cubic-bezier(0.16, 1, 0.3, 1);
  --mo-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --mo-soft:    cubic-bezier(0.4, 0, 0.2, 1);

  --mo-stagger: 42ms;
  --mo-line:    1150ms;
}

/* ── 1 · Line art draws itself ───────────────────────── */
.mo-fig svg { overflow: visible; }

.mo-fig .mo-draw {
  transition:
    stroke-dashoffset var(--mo-line) var(--mo-draw),
    opacity 420ms var(--mo-soft);
  transition-delay: calc(var(--i, 0) * var(--mo-stagger));
  opacity: 0.999;
}

/* Filled accents and labels arrive after the lines that hold them. */
.mo-fig .mo-fade {
  opacity: 0;
  transition: opacity 620ms var(--mo-soft);
  transition-delay: calc(220ms + var(--i, 0) * var(--mo-stagger));
}
.mo-fig.mo-run .mo-fade { opacity: var(--mo-op, 1); }

.mo-fig .mo-pop {
  opacity: 0;
  transform: scale(0.4);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 380ms var(--mo-soft), transform 620ms var(--mo-spring);
  transition-delay: calc(300ms + var(--i, 0) * var(--mo-stagger));
}
.mo-fig.mo-run .mo-pop { opacity: var(--mo-op, 1); transform: scale(1); }

/* The figure frame itself lifts as its contents draw. */
figure.illus.mo-fig {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--mo-settle), transform 800ms var(--mo-settle);
}
figure.illus.mo-fig.mo-run { opacity: 1; transform: none; }

/* ── 2 · Content reveal ──────────────────────────────── */
.mo-rise {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 760ms var(--mo-settle), transform 860ms var(--mo-settle);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.mo-rise.mo-run { opacity: 1; transform: none; }

/* ── 3 · Hero ────────────────────────────────────────── */
.hero-title-line1,
.hero-title-line2,
.hero-eyebrow,
.hero-subtitle,
.hero-desc,
.hero-actions,
.hero-rule {
  opacity: 0;
  transform: translateY(26px);
  animation: mo-hero-in 1150ms var(--mo-settle) forwards;
}
.hero-eyebrow      { animation-delay: 120ms; }
.hero-title-line1  { animation-delay: 260ms; }
.hero-title-line2  { animation-delay: 400ms; }
.hero-rule         { animation-delay: 560ms; }
.hero-subtitle     { animation-delay: 640ms; }
.hero-desc         { animation-delay: 720ms; }
.hero-actions      { animation-delay: 820ms; }

@keyframes mo-hero-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* The menu frame behind the hero breathes, very slowly. */
.hero-frame-svg {
  animation: mo-breathe 26s ease-in-out infinite;
  transform-origin: center;
}
@keyframes mo-breathe {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50%      { transform: scale(1.012); opacity: 1; }
}

/* ── 4 · The illustration strip drifts ───────────────── */
.illus-strip { position: relative; }
.illus-strip svg {
  animation: mo-drift 78s linear infinite;
  transform-origin: center;
}
.illus-strip:hover svg { animation-play-state: paused; }
@keyframes mo-drift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-3.2%); }
}

/* ── 5 · Icons: idle float, spring on hover ──────────── */
.card-illus svg,
.technique-icon svg,
.ing-illus svg,
.region-illus svg {
  animation: mo-float 7.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.9s);
  transform-origin: 50% 60%;
  transition: transform 620ms var(--mo-spring);
  will-change: transform;
}
@keyframes mo-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(-0.9deg); }
}

a.card:hover .card-illus svg      { transform: translateY(-8px) scale(1.09) rotate(2deg); }
.technique-card:hover .technique-icon svg { transform: translateY(-5px) scale(1.08); }
.ing-card:hover .ing-illus svg    { transform: translateY(-6px) scale(1.1) rotate(-2.5deg); }
.region-card:hover .region-illus svg { transform: translateY(-6px) scale(1.1); }

/* ── 6 · The sauces simmer ───────────────────────────── */
.sauce-vessel-wrap svg {
  animation: mo-simmer 5.2s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -1.1s);
  transform-origin: 50% 85%;
}
@keyframes mo-simmer {
  0%, 100% { transform: translateY(0) scaleY(1); }
  45%      { transform: translateY(-2.5px) scaleY(1.012); }
}
.sauce-panel { transition: background 320ms var(--mo-soft), transform 520ms var(--mo-spring); }
.sauce-panel:hover { transform: translateY(-5px); }

/* ── 7 · Steam, drawn in ─────────────────────────────── */
.mo-steam path {
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  opacity: 0;
  animation: mo-rise-steam 4.6s ease-in-out infinite;
}
.mo-steam path:nth-child(2) { animation-delay: 1.5s; }
.mo-steam path:nth-child(3) { animation-delay: 3s; }
@keyframes mo-rise-steam {
  0%   { opacity: 0;    transform: translateY(4px)   scaleY(0.72); }
  30%  { opacity: 0.55; }
  70%  { opacity: 0.28; }
  100% { opacity: 0;    transform: translateY(-16px) scaleY(1.18); }
}

/* ── 8 · Interface polish ────────────────────────────── */
.btn-primary, .btn-outline, .btn-generate {
  transition: background 260ms var(--mo-soft),
              color 260ms var(--mo-soft),
              border-color 260ms var(--mo-soft),
              box-shadow 320ms var(--mo-soft),
              transform 420ms var(--mo-spring);
}
.btn-primary:hover, .btn-outline:hover, .btn-generate:hover:not(:disabled) { transform: translateY(-2px); }
.btn-primary:active, .btn-outline:active, .btn-generate:active:not(:disabled) { transform: translateY(0) scale(0.985); }

.quick-chip, .filter-btn, .pill {
  transition: background 220ms var(--mo-soft), color 220ms var(--mo-soft),
              border-color 220ms var(--mo-soft), transform 380ms var(--mo-spring);
}
.quick-chip:hover, .filter-btn:hover { transform: translateY(-2px); }

.tag {
  animation: mo-tag-in 420ms var(--mo-spring) both;
  transform-origin: left center;
}
@keyframes mo-tag-in {
  from { opacity: 0; transform: scale(0.7) translateY(4px); }
  to   { opacity: 1; transform: none; }
}

a.card, .ing-card, .region-card {
  transition: background 260ms var(--mo-soft), box-shadow 380ms var(--mo-soft),
              border-color 300ms var(--mo-soft), transform 520ms var(--mo-spring);
}
a.card:hover { transform: translateY(-4px); }

.pager a { transition: background 260ms var(--mo-soft), transform 480ms var(--mo-spring); }
.pager a:hover { transform: translateY(-3px); }

.step .n {
  transition: color 520ms var(--mo-soft), transform 620ms var(--mo-spring);
  display: inline-block;
}
.step:hover .n { color: var(--gold); transform: scale(1.06); }

/* The recipe document arrives with weight. */
.recipe-output.visible .recipe-document,
.menu-output.visible .menu-document {
  animation: mo-doc-in 900ms var(--mo-settle) both;
}
@keyframes mo-doc-in {
  from { opacity: 0; transform: translateY(22px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* Generating: the button's own quiet pulse. */
.btn-generate.loading { animation: mo-pulse 1.6s ease-in-out infinite; }
@keyframes mo-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,87,168,0.28); }
  50%      { box-shadow: 0 0 0 10px rgba(0,87,168,0); }
}

/* ── 9 · Respect the reader ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .mo-fig .mo-draw { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .mo-fig .mo-fade,
  .mo-fig .mo-pop  { opacity: var(--mo-op, 1) !important; transform: none !important; }
  figure.illus.mo-fig,
  .mo-rise { opacity: 1 !important; transform: none !important; }
  .hero-title-line1, .hero-title-line2, .hero-eyebrow,
  .hero-subtitle, .hero-desc, .hero-actions, .hero-rule { opacity: 1 !important; transform: none !important; }
  .mo-steam { display: none; }
}