/* Short, coordinated motion; the layout and scroll position stay stable. */
@media screen and (prefers-reduced-motion:no-preference){
  /* Match the first JS keyframe before a block enters the screen. */
  .scroll-fade-pending{opacity:.2;transform:translate3d(0,18px,0)}
  .family-card.scroll-fade-pending{opacity:0;transform:translate3d(0,28px,0)}
  .cinematic-band > img.scroll-fade-pending{opacity:.55;transform:scale(1.025)}
  .hero-visual img{animation:griot-photo-settle 1.5s cubic-bezier(.22,1,.36,1)}
  .hero-heading > :is(.eyebrow,h1,p),.page-intro > :is(.eyebrow,h1,.lead){animation:griot-intro-appear .56s cubic-bezier(.22,1,.36,1)}
  dialog[open]{animation:griot-panel-appear .24s cubic-bezier(.22,1,.36,1)}
  dialog[open]::backdrop{animation:griot-backdrop-appear .24s ease-out}
  .mobile-nav:not([hidden]){animation:griot-nav-appear .22s cubic-bezier(.22,1,.36,1)}
  .menu-toggle span{transition:transform .24s cubic-bezier(.22,1,.36,1)}
  .menu-toggle[aria-expanded=true] span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}
  .desktop-nav a::after{width:100%;transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.22,1,.36,1)}
  .desktop-nav a:hover::after,.desktop-nav a:focus-visible::after,.desktop-nav a[aria-current=page]::after{transform:scaleX(1)}
}

@media screen and (max-width:700px) and (prefers-reduced-motion:no-preference){
  .scroll-fade-pending{transform:translate3d(0,12px,0)}
  .family-card.scroll-fade-pending{transform:translate3d(0,20px,0)}
  .cinematic-band > img.scroll-fade-pending{transform:scale(1.025)}
}

@media screen and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .button{transition:transform .24s cubic-bezier(.22,1,.36,1),background .2s,border-color .2s,color .2s}
  .button:not(:disabled):not([aria-disabled=true]):is(:hover,:focus-visible){transform:translateY(-2px)}
  .button:not(:disabled):not([aria-disabled=true]):active{transform:translateY(0)}

  .text-link::after{transform:scaleX(1);transform-origin:left;transition:transform .28s cubic-bezier(.22,1,.36,1)}
  .text-link:is(:hover,:focus-visible)::after{transform:scaleX(1.08)}
  .home-price .icon,.chapter-link .icon,.add-link .icon,.button .icon,.text-link .icon,.text-link > span[aria-hidden=true]{transition:transform .28s cubic-bezier(.22,1,.36,1)}
  .home-dish:is(:hover,:focus-visible) .home-price .icon,.chapter-link a:is(:hover,:focus-visible) .icon,.add-link:not(:disabled):is(:hover,:focus-visible) .icon,.button:not(:disabled):not([aria-disabled=true]):is(:hover,:focus-visible) .icon,.text-link:is(:hover,:focus-visible) .icon,.text-link:is(:hover,:focus-visible) > span[aria-hidden=true]{transform:translateX(5px)}

  .home-dish{position:relative}
  .home-dish::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--yellow);pointer-events:none;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1)}
  .home-dish:is(:hover,:focus-visible){border-color:var(--line)}
  .home-dish:is(:hover,:focus-visible)::before{transform:scaleX(1)}
  /* Independent of the transform used by JS to reveal each card. */
  .home-dish > div{translate:0;transition:translate .3s cubic-bezier(.22,1,.36,1)}
  .home-dish:is(:hover,:focus-visible) > div{translate:4px 0}
}

@keyframes griot-photo-settle{from{transform:scale(1.045)}to{transform:scale(1)}}
@keyframes griot-intro-appear{from{opacity:.25;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes griot-panel-appear{from{opacity:.35;transform:translateY(10px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes griot-backdrop-appear{from{opacity:0}to{opacity:1}}
@keyframes griot-nav-appear{from{opacity:.35;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

@media (prefers-reduced-motion:reduce),print{
  .scroll-fade-pending{opacity:1!important;transform:none!important}
  .hero-visual img,.hero-heading > :is(.eyebrow,h1,p),.page-intro > :is(.eyebrow,h1,.lead),dialog[open],dialog[open]::backdrop,.mobile-nav:not([hidden]){animation:none!important;transform:none!important}
  .button,.home-price .icon,.chapter-link .icon,.add-link .icon,.button .icon,.text-link .icon,.text-link > span[aria-hidden=true],.text-link::after,.desktop-nav a::after,.home-dish::before{transition:none!important;transform:none!important}
  .home-dish > div{translate:none!important;transition:none!important}
}

/* A centered, consistent close mark in the mobile navigation. */
.menu-toggle{position:relative;width:44px;height:44px;padding:0}
.menu-toggle span{position:absolute;left:50%;top:50%;width:22px;height:1.5px;margin:0;transform:translate(-50%,-50%) translateY(-4px)}
.menu-toggle span:last-child{transform:translate(-50%,-50%) translateY(4px)}
@media(prefers-reduced-motion:reduce){.menu-toggle span{transition:none}}

/* The round outline stays still; only the arrow's colour changes on hover. */
.text-link:is(:hover,:focus-visible)>.arrow-icon,
.chapter-link>a:is(:hover,:focus-visible)>.arrow-icon{transform:none}
.button:not(:disabled):not([aria-disabled=true]):is(:hover,:focus-visible)>.arrow-icon,
.add-link:not(:disabled):is(:hover,:focus-visible)>.arrow-icon{transform:none}