/* Nutrited by Sabahat: 3D scroll motion for the home page (Nov 2026).
   Everything here only applies once motion.js has added the "motion" class,
   so the page still looks complete without JavaScript or with reduced motion. */

html.motion { scroll-behavior: auto; }
.motion .progress {
  display: block; position: fixed; left: 0; top: 0; height: 4px; width: 100%; z-index: 60;
  background: var(--lime); transform-origin: 0 50%; transform: scaleX(0);
}

/* hero: 3D portrait and floating layers */
.motion .hero { perspective: 1400px; overflow: hidden; }
.motion .hero .wrap { transform-style: preserve-3d; }
.motion .hero-visual { transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.motion .hero-visual .arch, .motion .float-chip, .motion .hero-nutri, .motion .name-tag { will-change: transform; }
.motion .float-chip { animation: bob 6s ease-in-out infinite; }
.motion .chip-2 { animation-duration: 7.4s; animation-delay: -2s; }
.motion .chip-3 { animation-duration: 5.6s; animation-delay: -1s; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* banner: one row that slides sideways */
.motion .marquee-inner { flex-wrap: nowrap; justify-content: flex-start; width: max-content; padding: 0 6vw; will-change: transform; }

/* evidence cards flip in 3D */
.motion .myths { perspective: 1400px; }
.motion .myth { background: none; border: 0; padding: 0; }
.motion .flip-inner { display: grid; height: 100%; transform-style: preserve-3d; }
.motion .face {
  grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--radius); padding: 28px 26px 26px; background: var(--white); border: 1px solid var(--sand);
  display: flex; flex-direction: column;
}
.motion .face.front { justify-content: center; background: var(--charcoal); color: var(--white); border-color: var(--charcoal); min-height: 300px; }
.motion .face.front q { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.12; }
.motion .face.front .who { color: #cfcabb; }
.motion .face.front .stage-tag { color: var(--lime); }
.motion .face.front::after { content: "Keep scrolling: the evidence is on the back"; margin-top: auto; padding-top: 22px; font-size: .85rem; color: #bdb9ad; }
.motion .face .verdict, .motion .face .stage-tag { align-self: flex-start; }
.motion .myth .face.back { transform: rotateY(180deg); margin-top: 0; padding-top: 28px; border-top: 1px solid var(--sand); }

/* steps: a line that draws itself */
.motion .steps-line { display: block; height: 3px; background: var(--charcoal); border-radius: 3px; margin: -18px 0 32px; transform-origin: 0 50%; transform: scaleX(0); }
.motion .steps, .motion .offers, .motion .stages { perspective: 1400px; }

/* community chat */
.motion .chat-wrap { perspective: 1200px; }
.motion .chat { transform-style: preserve-3d; }

/* final */
.motion .final-cta { perspective: 1200px; }

@media (prefers-reduced-motion: reduce) {
  .motion .float-chip { animation: none; }
}