/* =========================================================
   Monopower – refined motion layer (progressive enhancement)
   Everything here is subtle, GPU-friendly (transform/opacity/clip-path)
   and disabled under prefers-reduced-motion.
   ========================================================= */

/* ---- Scroll progress (thin gold line under header) ---- */
.scroll-progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:70;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--gold-dark),var(--gold),#FFF3D1);pointer-events:none}

/* ---- Header: hide on scroll down, reveal on scroll up ---- */
.site-header{transition:transform .5s var(--ease),box-shadow .3s,background-color .3s}
.site-header.is-hidden{transform:translateY(-100%)}

/* ---- Nav underline + current section ---- */
@media (min-width:961px){
  .site-nav a:not(.nav-cta){position:relative;padding:6px 0}
  .site-nav a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
  .site-nav a:not(.nav-cta):hover::after,.site-nav a.is-current::after{transform:scaleX(1);transform-origin:left}
  .site-nav a.is-current{color:var(--gold)}
}

/* ---- Eyebrow lines draw in when their section appears ---- */
.js .reveal .eyebrow::before,.js .reveal .eyebrow--center::after{transform:scaleX(0);transition:transform 1.1s .25s var(--ease)}
.js .reveal .eyebrow::before{transform-origin:right}
.js .reveal .eyebrow--center::after{transform-origin:left}
.js .reveal.in-view .eyebrow::before,.js .reveal.in-view .eyebrow--center::after{transform:scaleX(1)}

/* ---- Staggered children (cards, list items) ---- */
.js .stagger-item{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease);transition-delay:calc(var(--i,0) * 90ms + 150ms)}
.js .in-view>.stagger-item{opacity:1;transform:none}

/* ---- Image curtain reveal + gentle settle ---- */
.js .reveal :is(.mosaic,.about__media) .frame:not(.frame--small){clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease)}
.js .reveal.in-view :is(.mosaic,.about__media) .frame:not(.frame--small){clip-path:inset(0)}
.js .reveal .frame img{scale:1.12;transition:scale 1.8s var(--ease),transform 1.2s var(--ease)}
.js .reveal.in-view .frame img{scale:1}
.mosaic .frame:nth-child(2){transition-delay:.15s}
.mosaic .frame:nth-child(3){transition-delay:.3s}

/* ---- Hero: pointer parallax (desktop) ---- */
.hero-visual{--px:0;--py:0}
.hero-card,.hero-badge,.hero-visual .halo,.hero-visual .ring{transition:translate .9s cubic-bezier(.2,.7,.2,1)}
.hero-card{translate:calc(var(--px) * -14px) calc(var(--py) * -14px)}
.hero-badge{translate:calc(var(--px) * 22px) calc(var(--py) * 18px)}
.hero-visual .halo{translate:calc(var(--px) * 26px) calc(var(--py) * 26px)}
.hero-visual .ring{translate:calc(var(--px) * 10px) calc(var(--py) * 10px)}
/* soft drifting light in hero background */
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-4%,3%)}}
.hero::before{animation:drift 18s ease-in-out infinite}

/* ---- Card sheen on hover ---- */
.product-card__img,.featured__media{position:relative}
.product-card__img::after,.featured__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.38) 48%,transparent 66%);transform:translateX(-120%);transition:transform 1.1s var(--ease)}
.product-card:hover .product-card__img::after,.featured:hover .featured__media::after{transform:translateX(120%)}

/* ---- Spotlight that follows the pointer (featured + ingredient cards) ---- */
.featured,.ing-card{position:relative;--mx:50%;--my:50%}
.featured::before,.ing-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s;z-index:0}
.featured::before{background:radial-gradient(460px circle at var(--mx) var(--my),rgba(227,195,116,.16),transparent 60%)}
.ing-card::before{background:radial-gradient(380px circle at var(--mx) var(--my),rgba(29,107,53,.07),transparent 60%)}
.featured:hover::before,.ing-card:hover::before{opacity:1}
.featured>*,.ing-card>*{position:relative;z-index:1}
.ing-card>.ing-card__num{position:absolute}
.ing-card img{transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
.ing-card:hover img{transform:scale(1.06) rotate(-3deg);box-shadow:0 0 0 6px var(--ring,#F1F7F1),0 18px 30px -16px rgba(15,42,26,.4)}
.ing-card:hover .ing-card__num{color:var(--gold);transition:color .5s}

/* ---- Gold button shine ---- */
.btn--gold{position:relative;overflow:hidden;isolation:isolate}
.btn--gold::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-110%);transition:transform .9s var(--ease)}
.btn--gold:hover::after{transform:translateX(110%)}

/* ---- Parallax helpers ---- */
[data-parallax]{will-change:transform}
.okinawa>img{transform:scale(1.18)}

/* ---- Group chips: number lifts on hover ---- */
.chip b{transition:transform .4s var(--ease)}
.chip:hover b{transform:translateY(-2px)}

/* ---- Contact items: icon glow on hover ---- */
.contact-item__icon{transition:background-color .4s,border-color .4s,transform .4s var(--ease)}
.contact-item:hover .contact-item__icon{transform:translateY(-2px);border-color:var(--gold);background:rgba(227,195,116,.12)}
.contact-item:hover .contact-item__icon--zalo{background:#0052CC}

/* ---- Form success: soft pop ---- */
@keyframes pop{0%{opacity:0;transform:translateY(6px) scale(.98)}100%{opacity:1;transform:none}}
.form-status.is-success,.form-status.is-error{animation:pop .5s var(--ease)}

/* Reduced motion: items still fade in one after another, but without sliding/zooming */
@media (prefers-reduced-motion:reduce){
  .js .stagger-item{transform:none}
  .js .reveal .frame{clip-path:none!important}
  .js .reveal .frame img{scale:1}
  .js .reveal .eyebrow::before,.js .reveal .eyebrow--center::after{transform:none}
  .hero-card,.hero-badge,.hero-visual .halo,.hero-visual .ring{translate:none}
  .site-header.is-hidden{transform:none}
}