/* Shared text cadence across Home, Products, Education and About. */
:root {
  --motion-text-duration: 600ms;
  --motion-text-fade: 450ms;
  --motion-text-gap: 100ms;
  --motion-text-ease: cubic-bezier(.22,.75,.25,1);
}
.hero video { animation: none; }
.site-footer .hero-signup { animation: none; }
.js-motion .range .flavors,
.js-motion .range:not(.is-revealed) .flavors { visibility: visible; }
.js-motion .hero-texture :is(img,video) { opacity: 1; transform: none; animation: none; }

@media (prefers-reduced-motion: no-preference) {
  .origin-copy h1 {
    animation: quick-text-rise var(--motion-text-duration) 0s both var(--motion-text-ease);
  }
  .origin-copy .lead {
    animation: quick-text-rise var(--motion-text-duration) var(--motion-text-gap) both var(--motion-text-ease);
  }
  .origin-callout-copy {
    animation: quick-text-rise var(--motion-text-duration) calc(var(--motion-text-gap) * 2) both var(--motion-text-ease);
  }
  .timeline-follow .year-copy, .timeline-follow .year-visual,
  .motion-ready .year-copy, .motion-ready .year-visual {
    transition-duration: var(--motion-text-duration);
    transition-timing-function: var(--motion-text-ease);
    transition-delay: 0s;
  }

  .js-motion .hero .hero-character {
    opacity: .25;
    transform: translateY(8px);
    transition: opacity var(--motion-text-fade) var(--motion-text-ease), transform var(--motion-text-duration) var(--motion-text-ease);
    transition-delay: var(--character-delay, 0ms);
  }
  .js-motion .hero .hero-character.is-visible { opacity: 1; transform: none; }
  .hero > .hero-content > p:not(.hero-eyebrow) {
    animation: quick-text-rise var(--motion-text-duration) var(--motion-text-gap) both var(--motion-text-ease);
  }
  .hero .hero-signup {
    animation: quick-text-rise var(--motion-text-duration) calc(var(--motion-text-gap) * 2) both var(--motion-text-ease);
  }
  .js-motion [data-reveal] {
    opacity: .25;
    transform: translateY(12px);
    transition: opacity var(--motion-text-fade) var(--motion-text-ease), transform var(--motion-text-duration) var(--motion-text-ease);
    transition-delay: 0ms;
  }
  .js-motion [data-reveal="soft"] { transform: translateY(8px); }
  .js-motion [data-reveal="scale"] { transform: translateY(8px) scale(.995); }
  .js-motion [data-reveal].is-revealed { opacity: 1; transform: none; }
  .js-motion [data-reveal].is-fast-reveal { transition-duration: var(--motion-text-fade), var(--motion-text-duration); }

  .js-motion .range .flavor,
  .js-motion .product-grid .product-card {
    opacity: 1;
    transform: translateY(12px);
    transition: transform var(--motion-text-duration) var(--motion-text-ease), background .3s ease, border-color .3s ease;
  }
  .js-motion .range.is-revealed .flavor,
  .js-motion .product-grid.is-revealed .product-card { opacity: 1; transform: none; }
  .js-motion .range.is-revealed .flavor:nth-child(2),
  .js-motion .product-grid.is-revealed .product-card:nth-child(2) { transition-delay: .045s; }
  .js-motion .range.is-revealed .flavor:nth-child(3),
  .js-motion .product-grid.is-revealed .product-card:nth-child(3) { transition-delay: .09s; }
  .js-motion .range.is-fast-reveal .flavor { transition-duration: var(--motion-text-duration), .3s, .3s; }

  .js-motion .shop-heading h1, .js-motion .shop-heading p { opacity: .25; transform: translateY(10px); }
  .js-motion .shop-heading.is-intro-revealed h1 { animation: quick-text-rise var(--motion-text-duration) 0s both var(--motion-text-ease); }
  .js-motion .shop-heading.is-intro-revealed p { animation: quick-text-rise var(--motion-text-duration) var(--motion-text-gap) both var(--motion-text-ease); }
  .js-motion .hero-copy h1 { animation: quick-text-rise var(--motion-text-duration) 0s both var(--motion-text-ease); }
  .js-motion .hero-copy .lead { animation: quick-text-rise var(--motion-text-duration) var(--motion-text-gap) both var(--motion-text-ease); }

  .js-motion .heritage .heritage-character {
    opacity: .25; transform: translateY(8px);
    transition: opacity var(--motion-text-fade) var(--motion-text-ease), transform var(--motion-text-duration) var(--motion-text-ease);
    transition-delay: var(--character-delay, 0ms);
  }
  .js-motion .heritage .mask-body, .js-motion .heritage .heritage-cta {
    opacity: .25; transform: translateY(8px);
    transition: opacity var(--motion-text-fade) var(--motion-text-ease) .14s, transform var(--motion-text-duration) var(--motion-text-ease) .14s;
  }
  .js-motion .heritage.is-revealed .heritage-character,
  .js-motion .heritage.is-revealed .mask-body,
  .js-motion .heritage.is-revealed .heritage-cta { opacity: 1; transform: none; }
  .js-motion .heritage.is-fast .heritage-character { transition-duration: var(--motion-text-fade), var(--motion-text-duration); }
  .js-motion .heritage.is-fast .mask-body, .js-motion .heritage.is-fast .heritage-cta { transition-delay: .06s; }

  .js-motion #how-many-gels .planner-character {
    opacity: .25; transform: translateY(8px);
    transition: opacity var(--motion-text-fade) var(--motion-text-ease), transform var(--motion-text-duration) var(--motion-text-ease);
    transition-delay: var(--planner-character-delay, 0ms);
  }
  .js-motion #how-many-gels.is-revealed .planner-character { opacity: 1; transform: none; }
  .js-motion #how-many-gels .alternative-heading p,
  .js-motion #how-many-gels .pack-control,
  .js-motion #how-many-gels #timing-count,
  .js-motion #how-many-gels .timing-route,
  .js-motion #how-many-gels .cadence-guidance,
  .js-motion #how-many-gels .cadence-source,
  .js-motion #how-many-gels .pack-formulation-cta {
    opacity: .35; transform: translateY(8px);
    transition: opacity var(--motion-text-fade) var(--motion-text-ease), transform var(--motion-text-duration) var(--motion-text-ease);
  }
  .js-motion #how-many-gels.is-revealed .alternative-heading p,
  .js-motion #how-many-gels.is-revealed .pack-control,
  .js-motion #how-many-gels.is-revealed #timing-count,
  .js-motion #how-many-gels.is-revealed .timing-route,
  .js-motion #how-many-gels.is-revealed .cadence-guidance,
  .js-motion #how-many-gels.is-revealed .cadence-source,
  .js-motion #how-many-gels.is-revealed .pack-formulation-cta {
    opacity: 1; transform: none; transition-delay: .08s;
  }

  .js-motion .faq-list.is-revealed details {
    animation: quick-text-rise var(--motion-text-duration) calc(var(--faq-delay,0ms) * .4) both var(--motion-text-ease);
  }
  .js-motion .signup.is-revealed > *, .js-motion .site-footer .signup.is-revealed > * {
    animation: quick-text-rise var(--motion-text-duration) calc(var(--signup-delay,0ms) * .3) both var(--motion-text-ease);
  }
  .js-motion .coming-soon.is-revealed .coming-soon-editorial > *,
  .js-motion .coming-soon.is-revealed .coming-soon-row-copy,
  .js-motion .coming-soon.is-revealed .coming-soon-products figure {
    animation: quick-text-rise var(--motion-text-duration) calc(var(--coming-delay,0ms) * .35) both var(--motion-text-ease);
  }
  .js-motion .texture-break img { transition-duration: var(--motion-text-fade), var(--motion-text-duration); }
  .js-motion .footer-wordmark.is-revealed .footer-letter > span {
    animation-duration: var(--motion-text-duration);
    animation-delay: calc(var(--letter-delay,0ms) * .4);
  }
}

@keyframes quick-text-rise {
  from { opacity: .25; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal], .js-motion .hero .hero-character,
  .hero > .hero-content > p:not(.hero-eyebrow), .hero .hero-signup,
  .js-motion .range .flavor, .js-motion .product-grid .product-card,
  .js-motion .shop-heading h1, .js-motion .shop-heading p,
  .js-motion .hero-copy h1, .js-motion .hero-copy .lead,
  .js-motion .heritage .heritage-character, .js-motion .heritage .mask-body, .js-motion .heritage .heritage-cta,
  .js-motion #how-many-gels .planner-character,
  .js-motion #how-many-gels .alternative-heading p, .js-motion #how-many-gels .pack-control,
  .js-motion #how-many-gels #timing-count, .js-motion #how-many-gels .timing-route,
  .js-motion #how-many-gels .cadence-guidance, .js-motion #how-many-gels .cadence-source,
  .js-motion #how-many-gels .pack-formulation-cta,
  .js-motion .faq-list details, .js-motion .signup > *,
  .js-motion .coming-soon .coming-soon-editorial > *,
  .js-motion .coming-soon .coming-soon-row-copy, .js-motion .coming-soon .coming-soon-products figure {
    opacity: 1 !important; transform: none !important;
    animation: none !important; transition: none !important;
  }
}

/* Fruit visibility is controlled by the mobile scroll animation. */

/* Native text avoids mobile line reflow while individually composited letters settle. */
@media (hover: none), (max-width: 760px) {
  .js-motion .heritage .mask-reveal,
  .js-motion #how-many-gels #pack-timing-title {
    opacity: .25;
    transform: none;
    transition: opacity var(--motion-text-fade) var(--motion-text-ease);
  }
  .js-motion .heritage.is-revealed .mask-reveal,
  .js-motion #how-many-gels.is-revealed #pack-timing-title { opacity: 1; }
  .js-motion #how-many-gels[data-reveal] { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js-motion .heritage .mask-reveal,
  .js-motion #how-many-gels #pack-timing-title { opacity: 1; transition: none; }
}