/* ==========================================================
   Movimiento: el calor y la alegría del Caribe
   Solo transform y opacity (salvo el brillo del título, que es esporádico).
   Todo vive dentro de no-preference: con movimiento reducido no se anima nada.
   ========================================================== */

/* cinta festiva entre hero e historia */
.ribbon{position:relative;z-index:4;margin:-26px -4% -30px;transform:rotate(-1.6deg);background:linear-gradient(180deg,#FFF07A 0%,#F8D808 45%,#EE9A00 100%);box-shadow:0 5px 0 #9A6A00,0 14px 22px rgba(61,6,48,.35);overflow:hidden;padding:12px 0}
.ribbon__track{display:flex;align-items:center;width:max-content}
.ribbon__item{display:flex;align-items:center;gap:22px;padding-right:22px;font:400 clamp(24px,5.4vw,36px)/1 var(--f-display);color:#4F0540;text-shadow:0 1px 0 rgba(255,255,255,.7);white-space:nowrap}
.ribbon__item svg{width:34px;height:34px;flex:none}

@media (prefers-reduced-motion:no-preference){
  /* HERO */
  .hero__title .ln{animation:bounceIn .9s var(--spring) both}
  .hero__title .ln:nth-child(2){animation-delay:.14s}
  @keyframes bounceIn{0%{opacity:0;transform:translateY(-70px) scale(.9) rotate(-2deg)}55%{opacity:1}100%{opacity:1;transform:none}}
  .hero__title .ln{background-size:100% 100%}
  .hero__title::after{content:'';display:none}
  .hero__hand{animation:rise .7s .3s var(--ease-out) both,wob 4s 1.3s ease-in-out infinite}
  @keyframes wob{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(1.5deg) translateY(-4px)}}

  /* rayos de sol girando detrás del plato */
  .hero__plate::before{content:'';position:absolute;z-index:0;left:50%;top:50%;width:190%;aspect-ratio:1;margin:-95% 0 0 -95%;border-radius:50%;pointer-events:none;
    background:repeating-conic-gradient(rgba(255,226,58,.2) 0 6deg,transparent 6deg 18deg);
    -webkit-mask:radial-gradient(circle,#000 18%,transparent 56%);mask:radial-gradient(circle,#000 18%,transparent 56%);
    animation:spin 90s linear infinite}
  .hero__plate::after{content:'';position:absolute;z-index:0;inset:-8%;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,rgba(255,200,40,.5) 0%,rgba(255,160,20,.18) 45%,transparent 70%);animation:glow 4.5s ease-in-out infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes glow{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.12);opacity:1}}
  .hero__img{animation:bob 6.5s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(.8deg)}}

  /* hojas que se mecen */
  .leaf{transform-origin:50% 100%;animation:sway 6s ease-in-out infinite}
  .leaf--a{--r:-38deg}.leaf--b{--r:148deg;animation-duration:7.5s;animation-delay:-2s}
  @keyframes sway{0%,100%{transform:rotate(calc(var(--r) - 4deg))}50%{transform:rotate(calc(var(--r) + 4deg))}}

  /* ingredientes que caen */
  .fall{position:absolute;top:0;z-index:0;width:var(--s,36px);height:var(--s,36px);left:var(--x);opacity:0;pointer-events:none;animation:fall var(--d) linear var(--w) infinite;filter:drop-shadow(0 4px 4px rgba(0,0,0,.35))}
  @keyframes fall{0%{opacity:0;transform:translate3d(0,-8vh,0) rotate(0)}8%{opacity:.95}88%{opacity:.95}100%{opacity:0;transform:translate3d(var(--dx),104%,0) rotate(var(--rot))}}
  .hero .is-paused,.ribbon.is-paused .ribbon__track{animation-play-state:paused}
  .is-paused *,.is-paused::before,.is-paused::after{animation-play-state:paused!important}

  /* cinta que corre */
  .ribbon__track{animation:marquee 42s linear infinite}
  @keyframes marquee{to{transform:translateX(-50%)}}
  @media (hover:hover){.ribbon:hover .ribbon__track{animation-play-state:paused}}

  /* platos estrella */
  .star img{animation:kb 16s ease-in-out infinite alternate}
  .star--b img{animation-delay:-4s}.star--c img{animation-delay:-8s}.star--d img{animation-delay:-2s}.star--e img{animation-delay:-6s}
  @keyframes kb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.09) translate(-1.5%,-1.5%)}}
  .star:hover img{transform:none}

  /* menú: tarjetas entran con resorte, precios hacen pop */
  .js .card.pre{opacity:0;transform:translateY(22px) scale(.96)}
  .js .card.pre.in{opacity:1;transform:none;transition:opacity .45s var(--ease-out),transform .6s var(--spring)}
  .card.in .price{animation:pop .55s .12s var(--spring) both}
  @keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
  .chip[aria-current="true"]{animation:chipPop .5s var(--spring)}
  @keyframes chipPop{0%{transform:scale(.88)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
  .card__panel .ing{animation:none}
  .card__panel.is-open .ing{animation:pop .45s var(--spring) both;animation-delay:calc(var(--k,0)*55ms + 120ms)}
  .card__panel.is-open .steps li{animation:rise .45s var(--ease-out) both;animation-delay:calc(var(--k,0)*80ms + 200ms)}

  /* glosario: íconos que saltan de alegría */
  .term.in dt svg{animation:hop 3.6s ease-in-out infinite;animation-delay:calc(var(--i,0)*.37s)}
  @keyframes hop{0%,66%,100%{transform:translateY(0) rotate(0)}74%{transform:translateY(-10px) rotate(-7deg)}82%{transform:translateY(0) rotate(5deg)}90%{transform:translateY(-3px) rotate(-2deg)}}
  .term.reveal{transition-timing-function:var(--spring)}

  /* polaroids: respiran como colgadas */
  .polaroid{animation:dangle 7s ease-in-out infinite;transform-origin:50% 0}
  .pol--b{animation-delay:-2.4s}.pol--c{animation-delay:-4.6s}
  @keyframes dangle{0%,100%{transform:rotate(calc(var(--r,0deg) - .8deg))}50%{transform:rotate(calc(var(--r,0deg) + .8deg))}}
  @media (hover:hover){.polaroid:hover{animation-play-state:paused}}

  /* botón de WhatsApp llama la atención de vez en cuando */
  .wa svg{animation:ring 8s ease-in-out 4s infinite}
  @keyframes ring{0%,86%,100%{transform:rotate(0) scale(1)}88%{transform:rotate(-14deg) scale(1.15)}90%{transform:rotate(12deg) scale(1.15)}92%{transform:rotate(-9deg) scale(1.1)}94%{transform:rotate(6deg)}96%{transform:rotate(-3deg)}}

  /* abierto ahora: respira */
  .openstate.is-open{animation:none}

  /* confeti */
  .confetti{position:fixed;left:0;top:0;width:10px;height:14px;border-radius:2px;pointer-events:none;z-index:200;will-change:transform,opacity}
}

@media (prefers-reduced-motion:reduce){
  .fall,.hero__plate::before,.hero__plate::after,.confetti{display:none}
  .ribbon__track{transform:none}
}

@media (min-width:900px){.leaf--a{--r:-72deg;left:-14%;top:46%;width:26%}.leaf--b{width:30%}}