/* ============================================================
   EMYJAY — Motion layer
   Loads last (after app-ui.css). Purely additive: it never changes
   colours, layout or content, it only adds movement.

   Rules this file follows
   - Only `transform`, `translate`, `scale`, `rotate` and `opacity`
     are animated, so everything runs on the GPU and stays smooth.
   - Scroll reveals use the individual `translate` / `scale`
     properties, so they never fight the existing hover `transform`s.
   - Nothing is hidden unless JavaScript is running (the `motion-ok`
     class is added by a tiny script in each page's <head>).
   - Everything is switched off for visitors who ask their device
     for reduced motion.
   - Hover effects only apply on devices that really hover.

   Companion script: js/motion.js
   ============================================================ */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* soft landing */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dist: 44px;                                   /* sideways reveal distance */
}
@media (max-width: 640px) { :root { --dist: 22px; } }

/* Anchor links (e.g. #how-it-works) should not land under the sticky header */
html { scroll-padding-top: 5.5rem; }

/* ------------------------------------------------------------
   1. PAGE ENTER / LEAVE
   Only <main> and the footer fade, so the header and tab bar stay
   still and the site feels like one continuous app.
   ------------------------------------------------------------ */
.motion-ok:not(.motion-ready) main { opacity: 0; }
.motion-ready main { animation: pageIn 0.6s var(--ease-out) backwards; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

main, .site-footer { transition: opacity 0.22s ease, translate 0.22s ease; }
.is-leaving main, .is-leaving .site-footer { opacity: 0; translate: 0 -6px; }

/* ------------------------------------------------------------
   2. SCROLL REVEALS (left / right / up / zoom / fade)
   js/motion.js adds .rv + data-rv to elements and .is-in when they
   scroll into view. Delays are staggered per group via --d.
   ------------------------------------------------------------ */
.rv {
  opacity: 0;
  translate: var(--rx, 0) var(--ry, 0);
  scale: var(--rs, 1);
}
.rv[data-rv="left"]  { --rx: calc(var(--dist) * -1); }
.rv[data-rv="right"] { --rx: var(--dist); }
.rv[data-rv="up"]    { --ry: calc(var(--dist) * 0.6); }
.rv[data-rv="down"]  { --ry: calc(var(--dist) * -0.45); }
.rv[data-rv="zoom"]  { --rs: 0.94; --ry: 14px; }
.rv.is-in { animation: rvIn var(--rd, 0.85s) var(--ease-out) var(--d, 0s) both; }
@keyframes rvIn {
  from { opacity: 0; translate: var(--rx, 0) var(--ry, 0); scale: var(--rs, 1); }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}

/* ------------------------------------------------------------
   3. HEADLINE WORD REVEAL
   Each word slides up out of an invisible mask, one after another.
   ------------------------------------------------------------ */
.split-w {
  display: inline-block; vertical-align: top; overflow: hidden;
  padding-block: 0.12em; margin-block: -0.12em;
}
.split-wi { display: inline-block; translate: 0 115%; }
[data-split].is-split-in .split-wi {
  animation: wordIn 0.9s var(--ease-out) calc(var(--sd, 0ms) + var(--i, 0) * 55ms) both;
}
@keyframes wordIn { from { translate: 0 115%; } to { translate: 0 0; } }

/* ------------------------------------------------------------
   4. MARQUEE (moving text) — shared component
   Two identical groups sit side by side; the track slides left by
   exactly one group width, so the loop is seamless. Speed is set in
   JS (--mq-dur) so long and short strips move at the same pace.
   ------------------------------------------------------------ */
.marquee {
  position: relative; display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.marquee.is-empty { display: none; }
.marquee-track {
  display: flex; flex: none; width: max-content;
  animation: mq var(--mq-dur, 40s) linear infinite;
  animation-direction: var(--mq-dir, normal);
  will-change: transform;
}
.marquee-group { display: flex; flex: none; align-items: center; }
.mq-item { white-space: nowrap; padding-inline: var(--mq-gap, 1.6rem); }
.mq-dot { flex: none; width: 0.42em; height: 0.42em; border-radius: 50%; background: var(--gold); }
@keyframes mq { to { transform: translate3d(-50%, 0, 0); } }

/* Static fallback: text is short enough to fit, or motion is reduced */
.marquee.is-static { justify-content: center; -webkit-mask-image: none; mask-image: none; }
.marquee.is-static .marquee-track { animation: none; will-change: auto; width: 100%; justify-content: center; }
.marquee.is-static .marquee-group { flex-wrap: wrap; justify-content: center; row-gap: 0.25rem; }
.marquee.is-static .marquee-group + .marquee-group { display: none; }
.marquee.is-single.is-static .mq-dot { display: none; }

/* The moving strip on the homepage */
.home .marquee-band {
  padding-block: clamp(0.7rem, 1.8vw, 1.1rem); margin-block: 0.5rem;
  background: #fff; border-block: 1px solid var(--line);
}
.marquee-lg .mq-item {
  --mq-gap: clamp(1.2rem, 3vw, 2.4rem);
  font-family: var(--font-display); font-weight: 600; color: var(--forest-deep);
  font-size: clamp(1.35rem, 1rem + 1.7vw, 2.3rem); line-height: 1.25;
}
.marquee-sm { margin-top: 0.35rem; }
.marquee-sm .mq-item {
  --mq-gap: clamp(1rem, 2.4vw, 1.9rem);
  font-weight: 600; font-size: clamp(0.85rem, 0.8rem + 0.25vw, 1rem); color: var(--ink-soft);
}
.marquee-sm .mq-dot { width: 0.36rem; height: 0.36rem; background: var(--forest); opacity: 0.55; }

/* The delivery line in the green bar at the top of every page */
.announcement .marquee { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.announcement .marquee.is-static { -webkit-mask-image: none; mask-image: none; }
.announcement .mq-item { --mq-gap: 1.4rem; }
.announcement .mq-dot { width: 0.32rem; height: 0.32rem; background: rgba(255, 255, 255, 0.6); }

/* ------------------------------------------------------------
   5. HERO — one orchestrated entrance, then gentle floating
   ------------------------------------------------------------ */
.hero-card { position: relative; isolation: isolate; }
.hero-card::before {                               /* slow drifting light behind the hero */
  content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 45% at 18% 25%, rgba(255, 255, 255, 0.8), transparent 70%),
    radial-gradient(34% 42% at 82% 28%, rgba(198, 138, 46, 0.17), transparent 70%),
    radial-gradient(44% 52% at 62% 92%, rgba(15, 92, 70, 0.13), transparent 70%);
  animation: driftA 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes driftA {
  from { transform: translate3d(-3%, -2%, 0) rotate(0deg); }
  to   { transform: translate3d(3%, 3%, 0) rotate(7deg); }
}

.hero-stage { transform: translate3d(0, var(--py, 0px), 0); }   /* --py is set on scroll (parallax) */

.motion-ready .stage-tile { animation: tileIn 1s var(--ease-out) backwards, floatY 6s ease-in-out infinite; }
.motion-ready .stage-tile-1 { animation-delay: 0.5s, 1.8s; --float: -8px; }
.motion-ready .stage-tile-2 { animation-delay: 0.65s, 2s; animation-duration: 1s, 7s; --float: -6px; }
.motion-ready .stage-tile-3 { animation-delay: 0.8s, 2.2s; animation-duration: 1s, 6.4s; --float: -10px; }
@keyframes tileIn {
  from { opacity: 0; translate: 0 48px; scale: 0.94; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes floatY {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 var(--float, -8px); }
}
.motion-ready .hero-badge {
  animation: badgeIn 0.9s var(--ease-out) 1s backwards, floatY 5.2s ease-in-out 1.9s infinite;
  --float: -7px;
}
@keyframes badgeIn {
  from { opacity: 0; scale: 0.6; rotate: -18deg; }
  to   { opacity: 1; scale: 1; rotate: 0deg; }
}

/* Floating product icon on the product page + about image */
.main-shot .pplaceholder svg, .empty-state svg, .cart-empty svg {
  animation: floatY 7s ease-in-out infinite; --float: -9px;
}

/* ------------------------------------------------------------
   6. PHOTO BANNERS — parallax layer, slow zoom and drifting glow
   ------------------------------------------------------------ */
.photo-banner.has-parallax { background-image: none !important; }
.pb-bg {
  position: absolute; left: 0; right: 0; top: -9%; bottom: -9%; z-index: -2;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
.photo-banner.is-seen .pb-bg { animation: bgZoom 2s var(--ease-out) backwards; }
@keyframes bgZoom { from { scale: 1.12; } to { scale: 1; } }
.photo-banner::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 70%; aspect-ratio: 1; left: -15%; top: -45%;
  background: radial-gradient(closest-side, rgba(226, 169, 63, 0.14), transparent 72%);
  animation: driftB 18s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes driftB {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(70%, 25%, 0) scale(1.18); }
}

/* Image settle: images ease from slightly zoomed in to rest as they appear */
.hero-visual.is-seen .pplaceholder,
.main-shot.is-seen .pplaceholder,
.promo-art.is-seen .pplaceholder { animation: imgZoom 1.4s var(--ease-out) backwards; }
@keyframes imgZoom { from { scale: 1.14; } to { scale: 1; } }

/* Counters: fixed-width digits so numbers don't jiggle while counting */
.deal-stats strong, .summary-score strong { font-variant-numeric: tabular-nums; }

/* Review bars fill up when the summary appears */
.reviews-summary.is-seen .rating-bars .bar span { transform-origin: left center; animation: barGrow 1.1s var(--ease-out) 0.25s backwards; }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Pause anything that is off-screen (saves battery on phones) */
.is-offscreen, .is-offscreen *, .is-offscreen::before, .is-offscreen::after,
.is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }

/* ------------------------------------------------------------
   7. HEADER, FORMS, SMALL FEEDBACK MOMENTS
   ------------------------------------------------------------ */
.site-header { transition: box-shadow 0.35s var(--ease-out); }
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 26px -14px rgba(15, 40, 30, 0.22); }

.form-field input, .form-field select, .form-field textarea,
.review-form input, .review-form select, .review-form textarea, .search-bar {
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus,
.review-form input:focus, .review-form select:focus, .review-form textarea:focus {
  border-color: var(--forest); box-shadow: 0 0 0 4px rgba(15, 92, 70, 0.12);
}
.search-bar:focus-within { box-shadow: var(--shadow-card), 0 0 0 4px rgba(15, 92, 70, 0.12); }

.cart-count.bump { animation: bump 0.55s var(--ease-out); }
@keyframes bump { 0%, 100% { scale: 1; } 40% { scale: 1.55; } }

.wish-btn.pop svg { animation: heartPop 0.55s var(--ease-out); }
@keyframes heartPop { 0% { scale: 1; } 35% { scale: 1.45; } 70% { scale: 0.92; } 100% { scale: 1; } }

.btn-add-to-cart.is-added { animation: addPulse 0.6s var(--ease-out); }
@keyframes addPulse { 0%, 100% { scale: 1; } 40% { scale: 1.12; } }

/* Mobile menu: panel fades in, links follow one by one */
.mobile-nav.is-open { animation: navIn 0.35s var(--ease-out); }
@keyframes navIn { from { opacity: 0; translate: 0 -12px; } to { opacity: 1; translate: 0 0; } }
.mobile-nav.is-open li, .mobile-nav.is-open .btn { animation: fadeRise 0.55s var(--ease-out) backwards; }
.mobile-nav.is-open li:nth-child(1) { animation-delay: 0.08s; }
.mobile-nav.is-open li:nth-child(2) { animation-delay: 0.14s; }
.mobile-nav.is-open li:nth-child(3) { animation-delay: 0.20s; }
.mobile-nav.is-open li:nth-child(4) { animation-delay: 0.26s; }
.mobile-nav.is-open li:nth-child(5) { animation-delay: 0.32s; }
.mobile-nav.is-open li:nth-child(6) { animation-delay: 0.38s; }
.mobile-nav.is-open .btn { animation-delay: 0.46s; }
@keyframes fadeRise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

/* Chat window: the welcome bubble and quick questions ease in */
.chat-panel:not([hidden]) .chat-bubble { animation: fadeRise 0.5s var(--ease-out) 0.1s backwards; }
.chat-panel:not([hidden]) .chat-chip { animation: fadeRise 0.5s var(--ease-out) backwards; }
.chat-panel:not([hidden]) .chat-chip:nth-child(1) { animation-delay: 0.22s; }
.chat-panel:not([hidden]) .chat-chip:nth-child(2) { animation-delay: 0.30s; }
.chat-panel:not([hidden]) .chat-chip:nth-child(3) { animation-delay: 0.38s; }
.chat-panel:not([hidden]) .chat-chip:nth-child(4) { animation-delay: 0.46s; }

/* Mobile tab bar: tactile press */
.tab-icon { transition: transform 0.25s var(--ease-out); }
.tab-item:active .tab-icon { transform: scale(0.86); }
.tab-item.is-active .tab-icon { animation: tabPop 0.5s var(--ease-out); }
@keyframes tabPop { 0% { transform: translateY(4px) scale(0.9); } 60% { transform: translateY(-2px) scale(1.06); } 100% { transform: none; } }

/* Cards and buttons: transitions (safe for touch too) */
.btn { position: relative; overflow: hidden; isolation: isolate;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease),
              box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out); }
.btn svg { transition: translate 0.35s var(--ease-out); }
.btn-primary::after, .btn-gold::after, .btn-whatsapp::after, .btn-dark::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.28) 50%, transparent 68%);
  translate: -125% 0; transition: translate 0.8s var(--ease-out);
}
.icon-action { transition: background 0.2s, color 0.2s, transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
.icon-btn { transition: color 0.2s, transform 0.3s var(--ease-out); }
.product-card { transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.3s; }
.feature-card { transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.3s; }
.cat-card { transition: transform 0.35s var(--ease-out), border-color 0.25s, box-shadow 0.35s var(--ease-out); }
.product-card .thumb-link .pplaceholder, .feature-thumb .pplaceholder, .promo-art .pplaceholder,
.hero-visual .pplaceholder, .main-shot .pplaceholder { transition: transform 0.8s var(--ease-out); }
.pplaceholder svg { transition: transform 0.8s var(--ease-out); }
.cat-thumb svg, .cat-icon svg, .benefit svg { transition: transform 0.4s var(--ease-out); }
.benefit, .step-card, .value-card { transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.3s; }
.step-num { transition: transform 0.4s var(--ease-out); }
.logo .mark { transition: transform 0.45s var(--ease-out); }
.footer-col a { display: inline-block; transition: opacity 0.2s, color 0.2s, translate 0.3s var(--ease-out); }
.view-all svg { transition: translate 0.3s var(--ease-out); }
.filter-chip { transition: background-color 0.2s, color 0.2s, transform 0.3s var(--ease-out); }
.thumb-row button { transition: transform 0.3s var(--ease-out), border-color 0.2s; }

/* ------------------------------------------------------------
   8. HOVER EFFECTS — only on devices that can hover, and only when
   the visitor has not asked for reduced motion.
   ------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 20px -8px rgba(15, 40, 30, 0.38); }
  .btn:active:not(:disabled) { transform: translateY(0) scale(0.98); box-shadow: none; }
  .btn:hover::after { translate: 125% 0; }
  .btn:hover svg:has(> path[d^="M5 12h14"]) { translate: 4px 0; }
  .btn-ghost:hover:not(:disabled) { transform: none; box-shadow: none; }
  .view-all:hover svg { translate: 4px 0; }

  .icon-action:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 16px -8px rgba(15, 40, 30, 0.4); }
  .icon-action:active:not(:disabled) { transform: scale(0.92); }
  .icon-btn:hover { transform: scale(1.1); }
  .logo:hover .mark { transform: rotate(-8deg) scale(1.07); }

  .product-card:hover { transform: translateY(-6px); border-color: rgba(15, 92, 70, 0.28);
    box-shadow: 0 18px 36px -14px rgba(15, 40, 30, 0.28); }
  .product-card:hover .thumb-link .pplaceholder { transform: scale(1.08); }
  .product-card:hover .thumb-link .pplaceholder svg { transform: scale(1.06) rotate(-2deg); }
  .product-card .thumb-link:hover .pplaceholder { transform: scale(1.08); }

  .feature-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -14px rgba(15, 40, 30, 0.26); }
  .feature-card:hover .feature-thumb .pplaceholder { transform: scale(1.08); }

  .cat-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px -14px rgba(15, 40, 30, 0.3); }
  .cat-card:hover .cat-thumb svg { transform: scale(1.14) rotate(-5deg); }
  .cat-tile:hover .cat-icon svg { transform: scale(1.12) rotate(-4deg); }

  .promo-card:hover .promo-art .pplaceholder { transform: scale(1.07); }
  .hero-visual:hover .pplaceholder, .main-shot:hover .pplaceholder { transform: scale(1.04); }

  .benefit:hover, .step-card:hover { transform: translateY(-4px); border-color: rgba(15, 92, 70, 0.25);
    box-shadow: 0 16px 30px -16px rgba(15, 40, 30, 0.28); }
  .benefit:hover svg { transform: rotate(-8deg) scale(1.1); }
  .step-card:hover .step-num { transform: scale(1.14); }
  .value-card:hover { transform: translateY(-3px); }

  .testimonial-card { transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
  .footer-col a:hover { translate: 4px 0; }
  .filter-chip:hover { transform: translateY(-2px); }
  .filter-chip:active { transform: scale(0.96); }
  .thumb-row button:hover { transform: translateY(-3px); }
  .wish-btn:hover svg { transform: scale(1.15); }

  .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
}

/* ------------------------------------------------------------
   9. REDUCED MOTION — everything static, marquees become plain rows
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero-card::before, .photo-banner::after, .marquee-track,
  .stage-tile, .hero-badge, .main-shot .pplaceholder svg { animation: none !important; }
  .rv, .split-wi { opacity: 1 !important; translate: none !important; scale: none !important; }
  main, .site-footer { transition: none; }
}