/* ==========================================================================
   Rudvi Foods — motion layer
   Loaded after site.css. Hidden "before" states only apply under html.motion,
   which assets/motion.js adds when the visitor allows motion, so content is
   never hidden when JavaScript is off or reduced motion is requested.
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.075'/%3E%3C/svg%3E");
}

/* ---------- Page curtain: load reveal + page-to-page transitions ---------- */
html.js body::before,
html.js body::after { position: fixed; z-index: 9998; inset: 0; visibility: hidden; content: ""; pointer-events: none; transform: translate3d(0, 100%, 0); }
html.js body::before { background: var(--noise), var(--pine); }
html.js body::after { z-index: 9997; background: var(--maize); }
html.is-covered body::before,
html.is-covered body::after { visibility: visible; transform: none; animation: curtain-failsafe 0s 6s forwards; }
html.is-revealing body::before,
html.is-revealing body::after { visibility: visible; transform: translate3d(0, -100%, 0); transition: transform 1s var(--ease-in-out); }
html.is-revealing body::after { transition-delay: .12s; }
html.is-leaving body::before,
html.is-leaving body::after { visibility: visible; transform: none; transition: transform .65s var(--ease-in-out); }
html.is-leaving body::before { transition-delay: .1s; }
@keyframes curtain-failsafe { to { visibility: hidden; } }

/* First-visit intro (injected by motion.js over the curtain) */
.intro { position: fixed; z-index: 9999; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1.15rem; color: #fff7e1; pointer-events: none; transition: opacity .55s var(--ease-out), translate .8s var(--ease-in-out); }
.intro.is-done { opacity: 0; translate: 0 -7vh; }
.intro-logo { display: block; width: min(250px, 58vw); height: auto; filter: drop-shadow(0 22px 40px rgba(0,0,0,.35)); animation: logo-in 1.1s var(--ease-spring) .1s backwards; }
@keyframes logo-in { from { opacity: 0; scale: .55; rotate: -10deg; } }
.intro-line { position: relative; overflow: hidden; width: min(220px, 50vw); height: 1px; background: rgba(255,255,255,.16); }
.intro-line::after { position: absolute; inset: 0; background: var(--maize); content: ""; transform-origin: left; animation: line-grow 1.3s var(--ease-in-out) .25s backwards; }
.intro-sub { color: var(--maize); font-size: .64rem; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; animation: fade-up .9s var(--ease-out) .6s backwards; }

/* ---------- Scroll progress + header ---------- */
.scroll-progress { position: fixed; z-index: 60; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--maize), var(--saffron), var(--clay)); pointer-events: none; transform: scaleX(0); transform-origin: 0 50%; }
.header { transition: transform .6s var(--ease-out), box-shadow .4s, background-color .4s; }
.header.is-scrolled { background: rgba(255,253,248,.88); box-shadow: 0 10px 30px rgba(18,40,26,.07); }
.header.is-hidden { transform: translate3d(0, -105%, 0); }
.nav a { position: relative; }
.nav a::after { position: absolute; right: 0; bottom: -7px; left: 0; height: 1.5px; border-radius: 2px; background: currentColor; content: ""; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.brand img { transition: transform .8s var(--ease-spring); }
.brand:hover img { transform: rotate(-4deg) scale(1.06); }

html.motion:not(.is-ready) .header-inner > * { opacity: 0; }
html.motion.is-ready .header-inner > * { animation: drop-in .9s var(--ease-out) .45s backwards; }
html.motion.is-ready .header-inner > .brand { animation-delay: .3s; }
html.motion.is-ready .header-inner > .nav { animation: none; }
@media (min-width: 721px) {
  html.motion:not(.is-ready) .nav a { opacity: 0; }
  html.motion.is-ready .nav a { animation: drop-in .8s var(--ease-out) backwards; }
  html.motion.is-ready .nav a:nth-child(1) { animation-delay: .36s; }
  html.motion.is-ready .nav a:nth-child(2) { animation-delay: .41s; }
  html.motion.is-ready .nav a:nth-child(3) { animation-delay: .46s; }
  html.motion.is-ready .nav a:nth-child(4) { animation-delay: .51s; }
  html.motion.is-ready .nav a:nth-child(5) { animation-delay: .56s; }
  html.motion.is-ready .nav a:nth-child(6) { animation-delay: .61s; }
  html.motion.is-ready .nav a:nth-child(7) { animation-delay: .66s; }
}

/* Burger that morphs into a close icon */
.menu-toggle .bars { position: relative; display: block; width: 18px; height: 12px; }
.menu-toggle .bars i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: top .3s var(--ease-out), transform .45s var(--ease-out), opacity .25s; }
.menu-toggle .bars i:nth-child(1) { top: 0; }
.menu-toggle .bars i:nth-child(2) { top: 5px; }
.menu-toggle .bars i:nth-child(3) { top: 10px; }
.menu-toggle[aria-expanded="true"] .bars i:nth-child(1) { top: 5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle[aria-expanded="true"] .bars i:nth-child(3) { top: 5px; transform: rotate(-45deg); }

/* ---------- Buttons: liquid fill from the pointer, arrow nudge, magnetic pull ---------- */
.button, .nav-cta { position: relative; overflow: hidden; isolation: isolate; transition: transform .35s var(--ease-out), translate .55s var(--ease-out), background-color .35s, border-color .35s, box-shadow .35s, color .35s; }
.button::before, .nav-cta::before { position: absolute; z-index: -1; top: var(--fy, 50%); left: var(--fx, 50%); width: 260%; aspect-ratio: 1; border-radius: 50%; background: var(--fill, var(--clay)); content: ""; pointer-events: none; transform: translate(-50%, -50%) scale(0); transition: transform .7s var(--ease-out); }
.button:hover::before, .nav-cta:hover::before, .button:focus-visible::before, .nav-cta:focus-visible::before { transform: translate(-50%, -50%) scale(1); }
.button-primary, .nav-cta { --fill: var(--clay); }
.button-light { --fill: #fff7e1; }
.button-light:hover, .button-light:focus-visible { border-color: #fff7e1; color: var(--pine); }
.button-outline { --fill: var(--pine); }
.button-outline:hover, .button-outline:focus-visible { border-color: var(--pine); color: white; }
.button > span, .nav-cta > span { display: inline-block; transition: transform .5s var(--ease-out); }
.button:hover > span, .nav-cta:hover > span { transform: translateX(4px); }
.whatsapp-float { transition: transform .35s var(--ease-out), translate .55s var(--ease-out), box-shadow .35s; }
.whatsapp-float::after { position: absolute; inset: 0; border: 2px solid rgba(37,211,102,.55); border-radius: inherit; content: ""; pointer-events: none; animation: ripple 3.2s var(--ease-out) 3s infinite; }
.wa-icon svg { transition: transform .6s var(--ease-spring); }
.whatsapp-float:hover .wa-icon svg { transform: rotate(-12deg) scale(1.08); }
.yt-logo { transition: transform .6s var(--ease-spring); }
.yt-card:hover .yt-logo { transform: rotate(-6deg) scale(1.06); }
html.motion:not(.is-ready) .whatsapp-float { opacity: 0; }
html.motion.is-ready .whatsapp-float { animation: pop-in 1s var(--ease-spring) 1.6s backwards; }

/* Animated underlines for text links */
.section-link, .card-foot a, .footer-col a, .breadcrumb a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; text-decoration: none; transition: background-size .55s var(--ease-out), color .3s; }
.section-link:hover, .card-foot a:hover, .footer-col a:hover, .breadcrumb a:hover { background-size: 100% 1px; text-decoration: none; }
.footer-col a { width: fit-content; }
.section-link span { display: inline-block; transition: transform .5s var(--ease-out); }
.section-link:hover span { transform: translateX(4px); }

/* ---------- Split headings (words rise out of a mask) ---------- */
.sw { display: inline-block; margin-bottom: -.22em; padding-bottom: .22em; clip-path: inset(-1em -1em 0 -1em); vertical-align: top; }
.si { display: inline-block; transform-origin: 0 100%; }
html.motion [data-split]:not(.is-in) .si { translate: 0 115%; }
html.motion [data-split].is-in .si { animation: rise-in 1.2s var(--ease-out) calc(var(--delay, 0s) + var(--w, 0) * 55ms) backwards; }

/* ---------- Scroll reveals (classes applied by motion.js) ---------- */
html.motion [data-reveal]:not(.is-in) { opacity: 0; }
html.motion [data-reveal].is-in { animation: reveal-up 1.1s var(--ease-out) var(--delay, 0s) backwards; }
html.motion [data-reveal="fade"].is-in { animation-name: fade-in; }
html.motion [data-reveal="scale"].is-in { animation-name: reveal-scale; animation-duration: 1.3s; }
html.motion [data-reveal="eyebrow"].is-in { animation-name: reveal-left; }
html.motion [data-reveal="eyebrow"].is-in::before { transform-origin: left; animation: line-grow 1s var(--ease-out) calc(var(--delay, 0s) + .15s) backwards; }
html.motion [data-reveal="media"].is-in { animation-name: fade-in; animation-duration: .8s; }
html.motion [data-reveal="media"]:not(.is-in) > img,
html.motion [data-reveal="media"]:not(.is-in) .video-frame { clip-path: inset(100% -12% -12% -12%); }
html.motion [data-reveal="media"].is-in > img,
html.motion [data-reveal="media"].is-in .video-frame { animation: media-in 1.6s var(--ease-out) var(--delay, 0s) backwards; }
html.motion [data-reveal="media"]:not(.is-in) .round-stamp { opacity: 0; }
html.motion [data-reveal="media"].is-in .round-stamp { animation: badge-in 1.2s var(--ease-spring) calc(var(--delay, 0s) + .8s) backwards; }

/* ---------- Home hero ---------- */
.home-hero { background-image: var(--noise); }
.home-hero::before { transform: translate3d(0, calc(var(--out, 0) * 140px), 0); animation: breathe 9s ease-in-out infinite alternate; }
.home-hero::after { transform: translate3d(0, calc(var(--out, 0) * -90px), 0); animation: drift 15s ease-in-out infinite alternate; }
.hero-grains { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-copy { opacity: calc(1 - var(--out, 0) * 1.15); transform: translate3d(0, calc(var(--out, 0) * 120px), 0); }
.hero-display { transform: translate3d(0, calc(var(--out, 0) * 50px), 0); }
.hero-layer { transform: translate3d(calc(var(--mx, 0) * var(--depth, 10) * 1px), calc(var(--my, 0) * var(--depth, 10) * 1px), 0); }
.hero-product { transition: scale .7s var(--ease-out), box-shadow .7s var(--ease-out); }
.hero-product:hover { scale: 1.045; box-shadow: 0 38px 70px rgba(0,0,0,.3); }
.home-hero h1 em { position: relative; display: inline-block; vertical-align: top; }
.hero-swash { position: absolute; bottom: -.06em; left: -2%; width: 104%; height: .24em; overflow: visible; color: var(--maize); pointer-events: none; }
.hero-swash path { fill: none; stroke: currentColor; stroke-dasharray: 1; stroke-linecap: round; stroke-width: 3px; vector-effect: non-scaling-stroke; }

html.motion .home-hero:not(.is-live) .hero-layer,
html.motion .home-hero:not(.is-live) .hero-swash { opacity: 0; }
html.motion .home-hero.is-live .hero-layer { animation: layer-in 1.4s var(--ease-out) var(--in, .3s) backwards; }
html.motion .home-hero.is-live .hero-product { animation: pop-in 1.4s var(--ease-spring) var(--in, .3s) backwards, float var(--float, 7s) ease-in-out calc(var(--in, .3s) + 1.4s) infinite; }
html.motion .home-hero.is-live .hero-disc { animation: disc-in 1.7s var(--ease-out) .3s backwards, disc-morph 16s ease-in-out 2s infinite alternate; }
html.motion .home-hero.is-live .hero-badge { animation: badge-in 1.2s var(--ease-spring) var(--in, 1.2s) backwards, sway 7s ease-in-out calc(var(--in, 1.2s) + 1.2s) infinite; }
html.motion .home-hero.is-live .hero-swash path { animation: draw 1.3s var(--ease-in-out) 1.35s backwards; }

/* Scroll parallax (motion.js writes --py) */
.taste-col { transform: translate3d(0, var(--py, 0px), 0); }

/* Taste board: tiles lift on hover, the tagline glows and shimmers */
.taste-tile { transition: transform .7s var(--ease-out), box-shadow .6s var(--ease-out); }
.taste-tile img { transition: scale 1.1s var(--ease-out); }
.taste-tile span { transition: color .35s, background-color .35s; }
.taste-tile span::after { display: inline-block; transition: translate .5s var(--ease-out); }
.taste-tile:hover, .taste-tile:focus-visible { box-shadow: 0 0 0 1px rgba(21,58,44,.08), 0 40px 64px -28px rgba(25,47,31,.5); transform: translateY(-8px); }
.taste-tile:hover img, .taste-tile:focus-visible img { scale: 1.07; }
.taste-tile:hover span, .taste-tile:focus-visible span { color: white; background: var(--pine); }
.taste-tile:hover span::after, .taste-tile:focus-visible span::after { translate: 3px 0; }
.taste-quote::after { position: absolute; top: -45%; right: -35%; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(231,189,88,.3), rgba(231,189,88,0) 65%); content: ""; pointer-events: none; animation: breathe 6s ease-in-out infinite alternate; }
.taste-quote em { background: linear-gradient(100deg, #d98942 0%, #e7bd58 30%, #f7e1a1 50%, #e7bd58 70%, #d98942 100%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
html.motion .taste-quote.is-in em { animation: gold-shimmer 5s linear 1.4s infinite; }
html.motion .taste-quote.is-in .taste-mark { animation: badge-in 1.1s var(--ease-spring) calc(var(--delay, 0s) + .35s) backwards; }
.round-stamp { transform: translate3d(0, var(--py, 0px), 0) rotate(8deg); }

/* ---------- Home banner hero: sunbeam, glow, golden dust, product stack entrance + parallax ---------- */
html.motion .banner-light { display: block; background: linear-gradient(112deg, transparent 30%, rgba(255,240,205,.55) 45%, rgba(255,250,235,.2) 52%, transparent 64%); background-size: 260% 100%; animation: light-sweep 11s ease-in-out 2.4s infinite; }
html.motion .banner-glow { display: block; background: radial-gradient(50% 70% at 16% 4%, rgba(255,236,196,.9), transparent 62%); animation: glow-breathe 7s ease-in-out infinite alternate; }

/* Premium text banner: blur-to-sharp word reveal, gold shimmer, drawn underline, drifting backdrop word */
.banner-word { transform: translate(-50%, calc(-50% + var(--out, 0) * 90px)); }
html.motion .banner-hero:not(.is-live) .banner-word,
html.motion .banner-hero:not(.is-live) .hero-swash { opacity: 0; }
html.motion .banner-hero.is-live .banner-word { animation: word-in 2.6s var(--ease-out) .2s backwards, drift 18s ease-in-out 2.8s infinite alternate; }
html.motion .banner-hero .banner-title.is-in .si { animation: rise-blur 1.3s var(--ease-out) calc(var(--delay, 0s) + var(--w, 0) * 70ms) backwards; }
html.motion .banner-hero .banner-title.is-in em .si { animation: rise-blur 1.3s var(--ease-out) calc(var(--delay, 0s) + var(--w, 0) * 70ms) backwards, gold-shimmer 5s linear 2.6s infinite; }
html.motion .banner-hero.is-live .hero-swash path { animation: draw 1.4s var(--ease-in-out) 1.55s backwards; }
.banner-badge i::after { position: absolute; inset: 0; border-radius: 50%; background: #1faf54; content: ""; animation: ripple 2.2s var(--ease-out) infinite; }
.banner-video { transform: translate3d(calc(var(--mx, 0) * -12px), calc(var(--my, 0) * -8px + var(--out, 0) * 90px), 0) scale(1.05); }
html.motion .banner-hero:not(.is-live) .banner-video { opacity: 0; }
html.motion .banner-hero.is-live .banner-video { animation: video-in 2.2s var(--ease-out) .05s backwards; }
/* Golden god-rays fanning from the top-left light source, gently swaying and breathing */
html.motion .banner-hero.is-dark .banner-light { inset: -25% -10% -10% -25%; z-index: 1; background: repeating-conic-gradient(from 100deg at 0% 0%, rgba(241,205,115,0) 0deg 2.5deg, rgba(241,205,115,.2) 4deg, rgba(241,205,115,0) 5.5deg 8deg); background-size: auto; filter: blur(5px); mix-blend-mode: screen; transform-origin: 0 0; -webkit-mask-image: radial-gradient(75% 85% at 0% 0%, #000 0%, rgba(0,0,0,.4) 45%, transparent 75%); mask-image: radial-gradient(75% 85% at 0% 0%, #000 0%, rgba(0,0,0,.4) 45%, transparent 75%); animation: rays-sway 14s ease-in-out infinite alternate, rays-breathe 6s ease-in-out infinite alternate; }
@keyframes rays-sway { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }
@keyframes rays-breathe { from { opacity: .45; } to { opacity: 1; } }
@keyframes video-in { from { opacity: 0; scale: 1.12; } }
@media (max-width: 720px) { .banner-video { transform: translate3d(0, calc(var(--out, 0) * 50px), 0) scale(1.02); } }
@keyframes rise-blur { from { opacity: 0; filter: blur(12px); translate: 0 115%; rotate: 4deg; } }
@keyframes gold-shimmer { to { background-position: -220% 0; } }
@keyframes word-in { from { opacity: 0; scale: 1.08; } }
@keyframes light-sweep { 0% { background-position: 120% 0; } 60%, 100% { background-position: -40% 0; } }
@keyframes glow-breathe { from { opacity: .4; } to { opacity: 1; } }

/* ---------- Interior page hero ---------- */
.page-hero::before { position: absolute; width: 240px; height: 240px; bottom: -130px; left: -90px; border-radius: 50%; background: rgba(231,189,88,.2); content: ""; transform: translate3d(0, calc(var(--out, 0) * -70px), 0); animation: drift 16s ease-in-out infinite alternate; }
.page-hero::after { transform: translate3d(0, calc(var(--out, 0) * 130px), 0); animation: breathe 10s ease-in-out infinite alternate; }

/* ---------- Proof bar, values, cards ---------- */
.proof-icon { transition: rotate .7s var(--ease-spring), background-color .35s, color .35s; }
.proof:hover .proof-icon { color: var(--maize); background: var(--pine); rotate: 18deg; }
html.motion .proof.is-in .proof-icon { animation: icon-pop .9s var(--ease-spring) calc(var(--delay, 0s) + .2s) backwards; }
.value b { display: inline-block; transition: transform .5s var(--ease-spring); }
.value:hover b { transform: scale(1.3); }

.product-card { position: relative; transition: transform .7s var(--ease-out), box-shadow .6s var(--ease-out); }
.product-card.is-tilting { transition: transform .12s linear, box-shadow .4s var(--ease-out); }
.product-card::after { position: absolute; z-index: 3; inset: 0; background: radial-gradient(460px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.45), transparent 45%); content: ""; opacity: 0; pointer-events: none; mix-blend-mode: soft-light; transition: opacity .45s; }
.product-card:hover::after { opacity: 1; }
.product-photo { overflow: hidden; }
.product-photo img { transition: scale 1.1s var(--ease-out); }
.product-card:hover .product-photo img { scale: 1.06; }
.product-photo-graphic i { transition: transform 1s var(--ease-spring); }
.product-card:hover .product-photo-graphic i { transform: rotate(180deg) scale(1.1); }
.tag { transition: background-color .3s, color .3s; }
.product-card:hover .tag:first-child { color: var(--pine); background: #e3e9d6; }
.product-photo .zoom-button { transition: transform .45s var(--ease-out), background-color .3s, color .3s; }
.product-photo .zoom-button:hover { transform: translateY(-2px); }

.info-card, .stat-card { transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .4s; }
.info-card:hover, .stat-card:hover { border-color: rgba(184,93,69,.28); box-shadow: 0 22px 45px rgba(25,47,31,.09); transform: translateY(-6px); }
.info-card .info-icon { transition: transform .7s var(--ease-spring), background-color .4s, color .4s; }
.info-card:hover .info-icon { color: white; background: var(--clay); transform: rotate(-12deg) scale(1.1); }

/* ---------- Pine sections, video, CTA ---------- */
.section-pine, .footer { background-image: var(--noise); }
.video-frame { position: relative; overflow: hidden; border-radius: 14px; }
.video-frame::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,18,13,.05) 35%, rgba(8,18,13,.5)); content: ""; pointer-events: none; transition: opacity .6s; }
.video-play { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; place-items: center; gap: .8rem; border: 0; padding: 0; color: white; background: none; cursor: pointer; font-size: .68rem; font-weight: 850; letter-spacing: .22em; text-shadow: 0 2px 14px rgba(0,0,0,.55); text-transform: uppercase; transform: translate(-50%, -50%); transition: opacity .5s, visibility .5s; }
.video-play-icon { position: relative; display: grid; width: 88px; height: 88px; place-items: center; border-radius: 50%; color: var(--pine); background: var(--maize); box-shadow: 0 18px 40px rgba(0,0,0,.3); transition: transform .6s var(--ease-spring), background-color .3s; }
.video-play-icon svg { width: 26px; height: 26px; margin-left: 4px; fill: currentColor; }
.video-play-icon::before, .video-play-icon::after { position: absolute; inset: 0; border: 1px solid rgba(231,189,88,.75); border-radius: 50%; content: ""; animation: ripple 2.8s var(--ease-out) infinite; }
.video-play-icon::after { animation-delay: 1.4s; }
.video-play:hover .video-play-icon { background: #f1cd73; transform: scale(1.1); }
.video-frame.is-playing .video-play { visibility: hidden; opacity: 0; }
.video-frame.is-playing::after { opacity: 0; }

.cta-panel { background-image: var(--noise); }
.cta-panel::before { position: absolute; inset: 0; background: radial-gradient(520px circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,.17), transparent 45%); content: ""; opacity: 0; pointer-events: none; transition: opacity .5s; }
.cta-panel:hover::before { opacity: 1; }
.cta-panel::after { animation: breathe 7s ease-in-out infinite alternate; }

/* ---------- Marquee band ---------- */
.marquee { overflow: hidden; padding: clamp(1.5rem, 3.4vw, 2.6rem) 0; border-block: 1px solid var(--line); background: var(--paper); user-select: none; }
.marquee-track { display: flex; width: max-content; align-items: center; gap: clamp(1.4rem, 3vw, 2.8rem); will-change: transform; }
.marquee-track span { color: var(--pine); font: 500 clamp(2.8rem, 7vw, 6.4rem)/1.05 var(--serif); letter-spacing: -.045em; white-space: nowrap; }
.marquee-track span.is-outline { color: transparent; -webkit-text-stroke: 1.2px var(--pine); }
.marquee-track i { display: inline-block; color: var(--maize); font-size: clamp(1.3rem, 3vw, 2.4rem); font-style: normal; animation: spin 9s linear infinite; }

/* ---------- FAQ accordion ---------- */
summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { flex: 0 0 30px; height: 30px; border-radius: 50%; background: linear-gradient(currentColor, currentColor) center / 11px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 11px no-repeat, var(--oat); content: ""; transition: rotate .55s var(--ease-out), background-color .3s; }
details[open]:not(.is-closing) > summary::after { rotate: 135deg; }
details { transition: border-color .3s, box-shadow .45s var(--ease-out); }
details:hover { border-color: rgba(184,93,69,.3); }
details[open] { box-shadow: 0 14px 34px rgba(25,47,31,.06); }
.details-body { overflow: hidden; }

/* ---------- Forms ---------- */
.field label { transition: color .3s; }
.field:focus-within label { color: var(--clay); }
.field input, .field textarea, .field select { transition: border-color .3s, box-shadow .3s; }
.contact-row i { transition: transform .6s var(--ease-spring), background-color .3s, color .3s; }
.contact-row:hover i { color: white; background: var(--clay); transform: scale(1.1) rotate(-8deg); }
.contact-row-youtube:hover i { background: #ffe3e3; }
.contact-row-whatsapp:hover i { background: #1faf54; }

/* Location map */
.map-pin::after { position: absolute; inset: 0; border: 2px solid rgba(184,93,69,.55); border-radius: 50%; content: ""; animation: ripple 2.4s var(--ease-out) infinite; }
.map-pin svg { animation: pin-bob 2.4s ease-in-out infinite; }
.map-place:not([hidden]) { animation: fade-up .6s var(--ease-out); }
.map-card { transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.map-card:hover { box-shadow: 0 32px 64px rgba(10,30,20,.34); transform: translateY(-4px); }
@keyframes pin-bob { 50% { translate: 0 -3px; } }
@media (max-width: 720px) { .map-card:hover { transform: none; } }

/* ---------- Image viewer dialog ---------- */
dialog.image-viewer[open] { animation: viewer-in .55s var(--ease-out); }
dialog.image-viewer[open]::backdrop { animation: fade-in .4s ease; }
dialog.image-viewer.is-closing { animation: viewer-out .3s var(--ease-in-out) forwards; }
dialog.image-viewer.is-closing::backdrop { animation: fade-out .3s ease forwards; }

/* ---------- Footer wordmark ---------- */
.footer-mark { display: flex; justify-content: center; overflow: hidden; padding-top: .4rem; color: transparent; font: 500 clamp(5.5rem, 24vw, 20rem)/.86 var(--serif); letter-spacing: -.05em; -webkit-text-stroke: 1px rgba(255,255,255,.15); pointer-events: none; user-select: none; }
.footer-mark span { display: inline-block; transform-origin: 0 100%; }
html.motion .footer-mark:not(.is-in) span { translate: 0 105%; }
html.motion .footer-mark.is-in span { animation: rise-in 1.4s var(--ease-out) calc(var(--i) * 80ms) backwards; }

/* ---------- Custom cursor (fine pointers only; injected by motion.js) ---------- */
.cursor { position: fixed; z-index: 9996; top: 0; left: 0; opacity: 0; pointer-events: none; transition: opacity .3s; }
.cursor.is-visible { opacity: 1; }
.cursor-ring { position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid var(--clay); border-radius: 50%; transition: scale .5s var(--ease-out), background-color .3s, border-color .3s, opacity .3s; }
.cursor.on-dark .cursor-ring { border-color: var(--maize); }
.cursor.is-link .cursor-ring { border-color: transparent; background: rgba(184,93,69,.14); scale: 1.7; }
.cursor.on-dark.is-link .cursor-ring { background: rgba(231,189,88,.18); }
.cursor.is-down .cursor-ring { scale: .75; }
.cursor.is-text .cursor-ring { opacity: 0; }

/* ---------- Keyframes ---------- */
@keyframes rise-in { from { translate: 0 115%; rotate: 5deg; } }
@keyframes reveal-up { from { opacity: 0; translate: 0 34px; } }
@keyframes reveal-left { from { opacity: 0; translate: -16px 0; } }
@keyframes reveal-scale { from { opacity: 0; scale: .94; translate: 0 26px; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; translate: 0 14px; } }
@keyframes drop-in { from { opacity: 0; translate: 0 -14px; } }
@keyframes line-grow { from { transform: scaleX(0); } }
@keyframes media-in { from { clip-path: inset(100% -12% -12% -12%); scale: 1.18; } to { clip-path: inset(-12% -12% -12% -12%); } }
@keyframes layer-in { from { opacity: 0; translate: 0 90px; } }
@keyframes pop-in { from { opacity: 0; scale: .7; rotate: -9deg; } }
@keyframes float { 50% { translate: 0 -14px; } }
@keyframes disc-in { from { opacity: 0; scale: .35; rotate: -50deg; } }
@keyframes disc-morph {
  0% { border-radius: 48% 52% 44% 56% / 48% 45% 55% 52%; rotate: 0deg; }
  50% { border-radius: 56% 44% 52% 48% / 42% 55% 45% 58%; }
  100% { border-radius: 44% 56% 58% 42% / 55% 48% 52% 45%; rotate: 9deg; }
}
@keyframes badge-in { from { opacity: 0; scale: 0; rotate: -120deg; } }
@keyframes sway { 50% { rotate: -7deg; } }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes breathe { to { scale: 1.07; } }
@keyframes drift { to { translate: -40px -30px; } }
@keyframes icon-pop { from { scale: 0; rotate: -90deg; } }
@keyframes ripple { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 1.8; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes viewer-in { from { opacity: 0; scale: .94; translate: 0 18px; } }
@keyframes viewer-out { to { opacity: 0; scale: .96; translate: 0 10px; } }
@keyframes menu-in { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes menu-link { from { opacity: 0; translate: 0 -10px; } }

@media (max-width: 720px) {
  .nav a::after { display: none; }
  html.motion .nav.is-open { animation: menu-in .55s var(--ease-out); }
  html.motion .nav.is-open a { animation: menu-link .6s var(--ease-out) backwards; }
  html.motion .nav.is-open a:nth-child(2) { animation-delay: .04s; }
  html.motion .nav.is-open a:nth-child(3) { animation-delay: .08s; }
  html.motion .nav.is-open a:nth-child(4) { animation-delay: .12s; }
  html.motion .nav.is-open a:nth-child(5) { animation-delay: .16s; }
  html.motion .nav.is-open a:nth-child(6) { animation-delay: .2s; }
  html.motion .nav.is-open a:nth-child(7) { animation-delay: .24s; }
  .video-play-icon { width: 70px; height: 70px; }
  .footer-mark { padding-top: 1rem; }
}

@media print {
  html.motion [data-reveal], html.motion .si, html.motion .hero-layer, html.motion .footer-mark span { opacity: 1 !important; translate: none !important; clip-path: none !important; animation: none !important; }
  .scroll-progress, .cursor, .whatsapp-float { display: none !important; }
}

/* ---------- Store: quick view, cart sheet and cart bar ---------- */
html.motion dialog.quick-view[open] { animation: qv-in .55s var(--ease-out); }
html.motion dialog.quick-view[open]::backdrop, html.motion dialog.cart-sheet[open]::backdrop { animation: fade-in .4s ease-out; }
html.motion dialog.quick-view.is-closing { animation: qv-out .24s ease-in forwards; }
html.motion dialog.cart-sheet[open] { animation: sheet-in .55s var(--ease-out); }
html.motion dialog.cart-sheet.is-closing { animation: sheet-out .24s ease-in forwards; }
html.motion .cart-bar:not([hidden]) { animation: cart-in .6s var(--ease-spring); }
html.motion .qv-info > * { animation: fade-up .7s var(--ease-out) backwards; }
html.motion .qv-info > :nth-child(2) { animation-delay: .05s; }
html.motion .qv-info > :nth-child(3) { animation-delay: .1s; }
html.motion .qv-info > :nth-child(n+4) { animation-delay: .15s; }
@keyframes qv-in { from { opacity: 0; translate: 0 34px; scale: .97; } }
@keyframes qv-out { to { opacity: 0; translate: 0 24px; scale: .98; } }
@keyframes sheet-in { from { translate: 100% 0; } }
@keyframes sheet-out { to { translate: 100% 0; } }
@keyframes cart-in { from { opacity: 0; translate: -50% 40px; } }
@media (max-width: 760px) {
  html.motion dialog.quick-view[open], html.motion dialog.cart-sheet[open] { animation-name: rise-sheet; }
  html.motion dialog.quick-view.is-closing, html.motion dialog.cart-sheet.is-closing { animation-name: drop-sheet; }
}
@keyframes rise-sheet { from { translate: 0 100%; } }
@keyframes drop-sheet { to { translate: 0 100%; } }html.motion .done-icon { animation: badge-in .9s var(--ease-spring) .1s backwards; }
html.motion .cf-location:not([hidden]) { animation: fade-up .5s var(--ease-out); }

/* Trust headline: grains rise at two depths, the light orbs drift (heading area only) */
html.motion .trust-glow i:first-child { animation: trust-orb-a 16s ease-in-out infinite alternate; }
html.motion .trust-glow i:nth-child(2) { animation: trust-orb-b 20s ease-in-out infinite alternate; }
html.motion .trust-glow i:nth-child(3) { animation: trust-orb-a 24s ease-in-out -8s infinite alternate-reverse; }
html.motion .trust-stalks .ts-left { animation: stalk-sway 7s ease-in-out infinite alternate; }
html.motion .trust-stalks .ts-right { animation: stalk-sway 8.5s ease-in-out -3s infinite alternate-reverse; }
@keyframes stalk-sway { from { rotate: -4deg; } to { rotate: 4deg; } }
@keyframes trust-orb-a { to { translate: -55% 25%; scale: 1.15; } }
@keyframes trust-orb-b { to { translate: 60% -25%; scale: 1.2; } }