/* Progressive enhancement: content remains visible without JavaScript. */
.tiffin-steam {
  position: absolute;
  left: 25%; top: 12%; width: 50%; height: 34%;
  z-index: 2; pointer-events: none;
  opacity: clamp(0, calc((var(--open, 0) - .15) * 2), 1);
  transition: opacity .6s ease;
}
.tiffin-steam i {
  position: absolute; bottom: 0; left: 10%;
  width: 21%; height: 85%; border-radius: 50%;
  background: radial-gradient(ellipse at center, #fffffff2 0%, #ffffffb8 25%, #ffffff66 45%, transparent 73%);
  filter: blur(3px) drop-shadow(0 0 5px #ffffff44); opacity: 0;
  transform-origin: center bottom;
  animation: tiffin-steam-rise 6.5s ease-in-out infinite;
  animation-play-state: paused;
}
[data-state="open"] .tiffin-steam i { animation-play-state: running; }
.tiffin-steam i:nth-child(2) { left: 26%; height: 95%; animation-delay: -1.3s; }
.tiffin-steam i:nth-child(3) { left: 43%; width: 25%; animation-delay: -2.6s; }
.tiffin-steam i:nth-child(4) { left: 62%; height: 90%; animation-delay: -3.9s; }
.tiffin-steam i:nth-child(5) { left: 78%; height: 80%; animation-delay: -5.2s; }
@keyframes tiffin-steam-rise {
  0% { opacity: 0; transform: translate3d(0, 22%, 0) scale(.65, .6) rotate(-7deg); }
  12% { opacity: .85; }
  35% { opacity: 1; transform: translate3d(-15%, -5%, 0) scale(1, .9) rotate(5deg); }
  65% { opacity: .9; transform: translate3d(12%, -35%, 0) scale(1.25, 1.05) rotate(-4deg); }
  85% { opacity: .5; }
  100% { opacity: 0; transform: translate3d(-10%, -75%, 0) scale(1.5, 1.25) rotate(7deg); }
}
.motion-ready .scene-enter {
  transition: opacity .75s ease, translate .85s cubic-bezier(.2,.75,.2,1);
  transition-delay: var(--scene-delay, 0ms);
}
.motion-ready .scene-enter:not(.scene-visible) { opacity: 0; translate: 0 32px; }
.motion-ready .scene-visible { opacity: 1; translate: 0 0; }
.motion-ready .tiffin-stage { perspective: 1000px; }
.motion-ready .tiffin-visual {
  transform: rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg));
  transition: transform .5s cubic-bezier(.2,.75,.2,1);
}
.motion-ready .tiffin-orbit { animation: orbit-turn 38s linear infinite; }
.motion-ready .hero-glow { translate: var(--glow-x, 0px) var(--glow-y, 0px); transition: translate 1.5s ease-out; }
.motion-ready .meal-label { opacity: 0; transform: translateY(18px) scale(.85); transition: opacity .35s ease, transform .6s cubic-bezier(.2,1.6,.4,1); }
.motion-ready [data-state="open"] .meal-label { opacity: 1; transform: translateY(0) scale(1); }
.motion-ready .label-rice { transition-delay: 70ms; }
.motion-ready .label-dal { transition-delay: 170ms; }
.motion-ready .label-main { transition-delay: 270ms; }
.motion-ready .label-side { transition-delay: 370ms; }
.hero h1 em { background: linear-gradient(110deg,#c3eb39 15%,#eafeae 40%,#c3eb39 65%); background-size: 220% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: heading-light 7s ease-in-out 2; }
.motion-ready .plan-card { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
.motion-ready .plan-card:hover { transform: translateY(-8px) rotate(-.5deg); box-shadow: 0 24px 44px #063c2b18; }
.motion-ready .monthly-card:hover { transform: translateY(-8px) rotate(.5deg); }
.motion-ready .steps { position: relative; }
.motion-ready .step-icon { transition: transform .4s cubic-bezier(.2,1.8,.3,1); }
.motion-ready .steps article:hover .step-icon { transform: rotate(-12deg) scale(1.13); }
.motion-ready .app-preview { translate: 0 var(--phone-y, 0px); transition: translate .3s ease-out; }
.motion-ready .app-meals>div { transition: transform .35s, background .35s; }
.motion-ready .app-meals>div:hover { transform: translateY(-5px); background: #eaf4df; }
.button, .submit-lead, .pin-search button, .section-search button { position: relative; overflow: hidden; }
.button::after, .submit-lead::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg,transparent 25%,#ffffff30 50%,transparent 75%); transform: translateX(-130%); pointer-events: none; }
.button:hover::after, .submit-lead:hover::after { transition: transform .65s ease; transform: translateX(130%); }
.nav nav a { position: relative; }
.nav nav a::after { content: ''; position: absolute; bottom: -7px; left: 0; width: 100%; height: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.nav nav a:hover::after, .nav nav a:focus-visible::after { transform: scaleX(1); }
.faq-list details[open]>p { animation: answer-enter .3s ease both; }
.faq-list summary span { transition: transform .3s; }
.scroll-indicator { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 16px 0 0; color: #bfd5c7; font-size: .75rem; }
.scroll-indicator span { display: block; height: 25px; width: 15px; border: 1px solid #bfd5c780; border-radius: 12px; position: relative; }
.scroll-indicator span::after { content: ''; position: absolute; top: 5px; left: 5px; width: 3px; height: 6px; border-radius: 5px; background: var(--lime); animation: scroll-cue 1.8s ease-in-out 3; }
.motion-toggle { margin: 16px auto 0; display: block; border: 1px solid #cadbd1; border-radius: 100px; background: white; color: var(--muted); font-size: .75rem; padding: 8px 14px; }
.hero .motion-toggle { color: #c8dccf; background: transparent; border-color: #ffffff30; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.motion-paused .scene-enter { opacity: 1 !important; translate: none !important; transition: none !important; }
@keyframes orbit-turn { from { transform: rotate(-25deg); } to { transform: rotate(335deg); } }
@keyframes heading-light { 0%,100% { background-position: 0 50%; } 50% { background-position: 100% 50%; } }
@keyframes answer-enter { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
@keyframes scroll-cue { 0%,100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(7px); opacity: 1; } }
@media (hover:none) { .motion-ready .plan-card:hover, .motion-ready .monthly-card:hover { transform: none; } }
@media (prefers-reduced-motion:reduce) {
  .tiffin-steam { display: none; }
  .hero h1 em { background: none; color: var(--lime); }
  .motion-ready .scene-enter { opacity: 1 !important; translate: none !important; }
  .motion-ready .tiffin-visual { transform: none; }
  .motion-ready .app-preview { translate: none; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
}