/* All movement lives here, and all of it is switched off for people who ask for less motion.
   Rule: motion only decorates. Nothing may start hidden and depend on an animation to appear,
   so every effect uses `animation-fill-mode: both` on a short entrance, never on content that
   a slow device or a disabled stylesheet could leave invisible. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 35, 31, .6); } 50% { box-shadow: 0 0 0 10px rgba(201, 35, 31, 0); } }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes flicker {
    0%, 100% { opacity: .95; transform: scale(1); }
    22% { opacity: .78; transform: scale(.97); }
    48% { opacity: 1; transform: scale(1.03); }
    71% { opacity: .85; transform: scale(.99); }
  }
  @keyframes glow {
    0%, 100% { box-shadow: 0 6px 18px rgba(201, 35, 31, .4); }
    50% { box-shadow: 0 8px 30px rgba(255, 70, 50, .75); }
  }
  @keyframes drift { to { background-position-x: 80px; } }
  @keyframes fall {
    0% { transform: translate3d(0, -30px, 0) rotate(0deg); opacity: 0; }
    10% { opacity: .8; }
    100% { transform: translate3d(var(--drift), 115vh, 0) rotate(560deg); opacity: 0; }
  }

  /* Hero: the text rises one line after another. */
  .hero-copy h1 { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy p { animation: rise .8s .15s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-actions { animation: rise .8s .3s cubic-bezier(.2, .7, .2, 1) both; }
  .hero .btn-primary { animation: glow 3.4s 1.2s ease-in-out infinite; }
  .hero-art { animation: fade 1.2s .2s both; }

  /* Lantern light flickers, waves drift slowly, petals fall. */
  .lantern { animation: flicker 5.5s ease-in-out infinite; }
  .lantern-right { animation-duration: 7s; animation-delay: -2s; }
  .waves { animation: drift 40s linear infinite; }
  .petals span { animation: fall var(--fall) var(--delay) linear infinite; }

  /* Cards come in with a short stagger (the first twelve; the rest share the last delay). */
  .card-grid > .recipe-card { animation: rise .6s calc(var(--i, 12) * 70ms) cubic-bezier(.2, .7, .2, 1) backwards; }
  .card-grid > :nth-child(1) { --i: 0; }
  .card-grid > :nth-child(2) { --i: 1; }
  .card-grid > :nth-child(3) { --i: 2; }
  .card-grid > :nth-child(4) { --i: 3; }
  .card-grid > :nth-child(5) { --i: 4; }
  .card-grid > :nth-child(6) { --i: 5; }
  .card-grid > :nth-child(7) { --i: 6; }
  .card-grid > :nth-child(8) { --i: 7; }
  .card-grid > :nth-child(9) { --i: 8; }
  .card-grid > :nth-child(10) { --i: 9; }
  .card-grid > :nth-child(11) { --i: 10; }
  .card-grid > :nth-child(12) { --i: 11; }

  /* Recipe page: the title card and then each step. */
  .title-card { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .steps > li { animation: rise .5s calc(var(--i, 8) * 90ms + .2s) cubic-bezier(.2, .7, .2, 1) backwards; }
  .steps > :nth-child(1) { --i: 0; }
  .steps > :nth-child(2) { --i: 1; }
  .steps > :nth-child(3) { --i: 2; }
  .steps > :nth-child(4) { --i: 3; }
  .steps > :nth-child(5) { --i: 4; }
  .steps > :nth-child(6) { --i: 5; }
  .steps > :nth-child(7) { --i: 6; }
  .steps > :nth-child(8) { --i: 7; }

  /* Profile links page: the heading rises, then each recipe row. */
  .links-head { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .link-list > li { animation: rise .5s calc(var(--i, 12) * 60ms + .15s) cubic-bezier(.2, .7, .2, 1) backwards; }
  .link-list > :nth-child(1) { --i: 0; }
  .link-list > :nth-child(2) { --i: 1; }
  .link-list > :nth-child(3) { --i: 2; }
  .link-list > :nth-child(4) { --i: 3; }
  .link-list > :nth-child(5) { --i: 4; }
  .link-list > :nth-child(6) { --i: 5; }
  .link-list > :nth-child(7) { --i: 6; }
  .link-list > :nth-child(8) { --i: 7; }
  .link-list > :nth-child(9) { --i: 8; }
  .link-list > :nth-child(10) { --i: 9; }
  .link-list > :nth-child(11) { --i: 10; }
  .link-list > :nth-child(12) { --i: 11; }
  .link-card { transition: transform .25s ease, box-shadow .25s ease; }
  .link-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(80, 50, 20, .28); }
  .link-card:active { transform: scale(.98); }
  .link-go { transition: transform .2s ease, background-color .2s ease; }
  .link-card:hover .link-go { transform: translateX(4px); background: rgba(201, 35, 31, .1); }

  /* Hover and press feedback. */
  .recipe-card { transition: transform .25s ease, box-shadow .25s ease; }
  .recipe-card:hover { transform: translateY(-5px); }
  .catalog .recipe-card:hover { box-shadow: 0 14px 30px rgba(80, 50, 20, .28); }
  .btn { transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(.98); }
  .pills a, .quick a { transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
  .pills a:hover, .quick a:hover { transform: translateY(-2px); }
  .card-badge { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background-color .2s ease, color .2s ease; }
  .recipe-card:hover .card-badge { transform: rotate(-10deg) scale(1.12); background: var(--red); color: #fff; }
  .ingredients input { transition: transform .15s ease; }
  .ingredients input:active { transform: scale(.85); }
  .steps .num { transition: transform .2s ease; }
  .steps li:hover .num { transform: scale(1.12) rotate(-6deg); }
  .thumb img { transition: transform .5s ease; }
  .save-ring { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background-color .2s ease; }
  .save-btn:hover .save-ring { transform: scale(1.12); }
  .save-btn:active .save-ring { transform: scale(.9); }
  .save-btn[aria-pressed="true"] .icon { animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
  .drawer { transition: transform .26s cubic-bezier(.2, .8, .2, 1); }

  /* Panels enter after the hero; on the home page the two cards below follow. */
  .paper { animation: rise .8s .35s cubic-bezier(.2, .7, .2, 1) backwards; }
  .duo-card { animation: rise .8s .5s cubic-bezier(.2, .7, .2, 1) backwards; }
  .duo-card + .duo-card { animation-delay: .62s; }
  .hero-vertical, .hero-kanji { animation: fade 1.4s .4s both; }
  .hero-copy .catalog-search { animation: rise .8s .3s cubic-bezier(.2, .7, .2, 1) backwards; }
  .catalog { animation: rise .8s .35s cubic-bezier(.2, .7, .2, 1) backwards; }
  .pills, .quick-title { animation: rise .6s .5s cubic-bezier(.2, .7, .2, 1) backwards; }
  .quick a { animation: rise .5s calc(.4s + var(--i, 0) * .06s) cubic-bezier(.2, .7, .2, 1) backwards; }
  .quick a:nth-child(2) { --i: 1; } .quick a:nth-child(3) { --i: 2; }
  .quick a:nth-child(4) { --i: 3; } .quick a:nth-child(5) { --i: 4; }
  .craving { animation: rise .7s .3s cubic-bezier(.2, .7, .2, 1) backwards; }
  .suggested { animation: rise .6s .35s cubic-bezier(.2, .7, .2, 1) backwards; }
  .notice { animation: rise .6s .2s cubic-bezier(.2, .7, .2, 1) backwards; }
  .recipe-body { animation: rise .7s .25s cubic-bezier(.2, .7, .2, 1) backwards; }
  .related { animation: rise .7s .4s cubic-bezier(.2, .7, .2, 1) backwards; }
  .recipe-status, .recipe-tags { animation: rise .6s .3s cubic-bezier(.2, .7, .2, 1) backwards; }
  .recipe-tags a { transition: background-color .2s ease, transform .2s ease; }
  .recipe-tags a:hover { transform: translateY(-2px); }
  /* Cook mode: the layer fades in, each step rises, a finished timer pulses. */
  .cook:not([hidden]) { animation: fade .25s ease backwards; }
  .cook-step:not([hidden]), .cook-done:not([hidden]) > * { animation: rise .45s cubic-bezier(.2, .7, .2, 1) backwards; }
  .cook-step:not([hidden]) .step-help-image { animation: rise .55s cubic-bezier(.2, .7, .2, 1) .12s backwards; }
  .cook-done:not([hidden]) > :nth-child(2) { animation-delay: .08s; }
  .cook-done:not([hidden]) > :nth-child(3) { animation-delay: .16s; }
  .cook-progress span { transition: width .35s cubic-bezier(.2, .7, .2, 1); }
  .cook-btn, .cook-suggest-btn, .cook-icon-btn, .cook-related a { transition: background-color .18s ease, transform .18s ease; }
  .cook-btn:hover:not(:disabled), .cook-suggest-btn:hover { transform: translateY(-2px); }
  .cook-btn:active:not(:disabled), .cook-suggest-btn:active { transform: scale(.97); }
  .cook-timer { animation: rise .35s cubic-bezier(.2, .7, .2, 1) backwards; }
  .cook-timer.is-done { animation: pulse 1.2s ease-out 3; }
  .cook-done-mark { animation: pop .5s .1s cubic-bezier(.3, 1.6, .5, 1) backwards; }
  .untested { animation: rise .6s .15s cubic-bezier(.2, .7, .2, 1) backwards; }
  .cooked { animation: rise .7s .35s cubic-bezier(.2, .7, .2, 1) backwards; }
  .choice span:hover { border-color: var(--red); transform: translateY(-1px); }
  .choice span { transition: background .2s ease, border-color .2s ease, transform .2s ease; }

  /* Arrows slide forward on hover. */
  .btn .icon, .see-all .icon, .cook-cta .icon { transition: transform .2s ease; }
  .btn:hover .icon:last-child, .see-all:hover .icon, .cook-cta:hover .icon:last-child { transform: translateX(4px); }
  .pills a .icon, .quick a .icon { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
  .pills a:hover .icon, .quick a:hover .icon { transform: rotate(-12deg) scale(1.15); }
  .footer-nav a, .main-nav a { transition: color .2s ease; }

  /* 404: the lantern icon floats. */
  .not-found-inner > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) backwards; }
  .not-found-inner > :nth-child(2) { animation-delay: .1s; }
  .not-found-inner > :nth-child(3) { animation-delay: .2s; }
  .not-found-inner > :nth-child(4) { animation-delay: .3s; }
  .not-found-inner > :nth-child(5) { animation-delay: .4s; }
  @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
  .not-found-icon { animation: float 4s ease-in-out infinite; }

  /* Newsletter pages and privacy: the same entrance as the 404; the form rises and its icon floats. */
  .message-inner > *, .privacy-hero-inner > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) backwards; }
  .message-inner > :nth-child(2), .privacy-hero-inner > :nth-child(2) { animation-delay: .1s; }
  .message-inner > :nth-child(3), .privacy-hero-inner > :nth-child(3) { animation-delay: .2s; }
  .message-inner > :nth-child(4) { animation-delay: .3s; }
  .message-icon, .newsletter-icon { animation: float 4s ease-in-out infinite; }
  .privacy, .newsletter, .recipe-origin { animation: rise .7s .3s cubic-bezier(.2, .7, .2, 1) backwards; }
  .privacy section { animation: rise .6s calc(.35s + var(--i, 0) * 80ms) cubic-bezier(.2, .7, .2, 1) backwards; }
  .privacy section:nth-child(2) { --i: 1; }
  .privacy section:nth-child(3) { --i: 2; }
  .privacy section:nth-child(4) { --i: 3; }
  .privacy section:nth-child(5) { --i: 4; }
  .privacy section:nth-child(6) { --i: 5; }
  .privacy section:nth-child(7) { --i: 6; }
  .privacy section:nth-child(8) { --i: 7; }
  .newsletter-row .btn, .newsletter-consent input { transition: transform .18s ease, background-color .18s ease; }
  .newsletter-row .btn:active { transform: scale(.97); }

  /* Consent banner: rises after the page so it never covers the first paint; its icon floats. */
  .consent { animation: rise .5s .6s cubic-bezier(.2, .7, .2, 1) backwards; }
  .consent-icon { animation: float 4s ease-in-out infinite; }
  .consent-btn { transition: transform .18s ease, background-color .18s ease, color .18s ease; }
  .consent-btn:active { transform: scale(.97); }

  /* Home: the hero photo breathes slowly; the story bands rise one line after another. */
  @keyframes breathe { from { transform: scale(1); } to { transform: scale(1.06); } }
  html { scroll-behavior: smooth; }
  .hero-photo { transform-origin: 72% 58%; animation: breathe 22s ease-in-out infinite alternate; }
  .story-inner > * { animation: rise .7s calc(var(--i, 4) * 90ms) cubic-bezier(.2, .7, .2, 1) backwards; }
  .story-inner > :nth-child(1) { --i: 0; }
  .story-inner > :nth-child(2) { --i: 1; }
  .story-inner > :nth-child(3) { --i: 2; }
  .story-inner > :nth-child(4) { --i: 3; }
  /* Where the browser ties animations to scrolling, the bands reveal and drift as they come in. */
  @supports (animation-timeline: view()) {
    @keyframes parallax { from { transform: translateY(-6%) scale(1.14); } to { transform: translateY(6%) scale(1.14); } }
    .story-photo { animation: parallax linear both; animation-timeline: view(); }
    .story-inner > * {
      animation: rise linear backwards;
      animation-timeline: view();
      animation-range: entry calc(var(--i, 4) * 6%) entry calc(60% + var(--i, 4) * 6%);
    }

    /* Photo heroes in layers: the photo sinks slower than the page, the petals drift down and
       the text rises away. `translate` adds to the `transform` of the other animations. */
    @keyframes sink { to { translate: 0 24%; } }
    @keyframes drift-down { to { translate: 0 120px; } }
    @keyframes lift { to { translate: 0 -70px; opacity: .25; } }
    .hero.has-photo .hero-photo {
      animation: breathe 22s ease-in-out infinite alternate, sink linear both;
      animation-timeline: auto, scroll();
      animation-range: normal, 0px 560px;
    }
    .hero.has-photo > .petals, .hero-kanji { animation: drift-down linear both; animation-timeline: scroll(); animation-range: 0px 560px; }
    .duo-photo { animation: parallax linear both; animation-timeline: view(); }
    .duo-card { animation: rise linear backwards; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .hero.has-photo .hero-copy { animation: lift linear both; animation-timeline: scroll(); animation-range: 0px 560px; }


    /* Home chapters (see scroll-story.css): the glass panels rise as each chapter comes into view. */
    .story-live .perks li, .story-live .chapter-title, .story-live .craving h2, .story-live .craving .quick a {
      animation: rise linear backwards; animation-timeline: view(); animation-range: entry 0% entry 70%;
    }

    /* Catalog cards rise as they scroll into view; the ones already on screen are left alone. */
    .catalog .card-grid > .recipe-card { animation: rise linear backwards; animation-timeline: view(); animation-range: entry 0% entry 80%; }
  }
}