/* ============================================================
   AINI · Luxe Interaction Layer
   preloader / grain / cursor / split-text / curtain reveals /
   parallax / magnetic buttons / header hide / progress bar
   ============================================================ */

/* ---------- film grain ---------- */
.grain{
  position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;
}

/* ---------- preloader ---------- */
.preloader{
  position:fixed;inset:0;z-index:3000;background:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;
  transition:opacity .65s var(--ease),visibility .65s;
}
.preloader .pl-brand{font-family:var(--serif);font-weight:600;font-size:2.1rem;letter-spacing:.42em;text-indent:.42em;color:var(--ink-dark);opacity:0;animation:plfade .9s .1s var(--ease) forwards}
.preloader .pl-zh{font-family:var(--zh-serif);font-size:.92rem;letter-spacing:.7em;text-indent:.7em;color:var(--gold-deep);opacity:0;animation:plfade .9s .3s var(--ease) forwards}
.preloader .pl-line{width:0;height:1px;background:var(--gold);animation:plline 1.2s .2s var(--ease) forwards}
@keyframes plfade{to{opacity:1}}
@keyframes plline{to{width:130px}}
/* failsafe: even if JS never runs, the veil lifts on its own */
@keyframes plhide{to{opacity:0;visibility:hidden}}
.preloader{animation:plhide .65s var(--ease) 1.15s forwards}
body.loaded .preloader{opacity:0;visibility:hidden;animation:none}

/* ---------- scroll progress ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;width:100%;height:2px;z-index:2100;
  background:linear-gradient(90deg,var(--gold),var(--gold-deep));
  transform-origin:left;transform:scaleX(0);
}

/* ---------- custom cursor ---------- */
@media (pointer:fine) and (hover:hover){
  body.has-cursor, body.has-cursor a, body.has-cursor button, body.has-cursor summary{cursor:none}
  .cursor-dot,.cursor-ring{
    position:fixed;top:0;left:0;pointer-events:none;z-index:4000;border-radius:50%;
  }
  .cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--gold-deep)}
  .cursor-ring{
    width:36px;height:36px;margin:-18px 0 0 -18px;
    border:1px solid rgba(160,127,63,.55);
    transition:transform .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease);
  }
  body.cursor-hover .cursor-ring{transform:scale(1.9);background:rgba(194,162,101,.12);border-color:rgba(160,127,63,.25)}
  body.cursor-press .cursor-ring{transform:scale(.7)}
}
.cursor-dot,.cursor-ring{display:none}
body.has-cursor .cursor-dot,body.has-cursor .cursor-ring{display:block}

/* ---------- split-text word/char reveal ---------- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.wi{display:inline-block;transform:translateY(118%);transition:transform 1.05s var(--ease);transition-delay:calc(var(--i,0)*60ms)}
.in .wi,.played .wi{transform:none}
body.zh .wi{transition-delay:calc(var(--i,0)*24ms)}

/* ---------- image curtain reveal ---------- */
.img-frame img{
  clip-path:inset(100% 0 0 0);
  transform:scale(1.16);
  transition:clip-path 1.25s var(--ease),transform 1.6s var(--ease);
}
.in .img-frame img,.in.img-frame img,.played .img-frame img{clip-path:inset(0 0 0 0);transform:scale(1.02)}
.img-frame:hover img{transform:scale(1.07)}
.card-media{position:relative}
.card-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.3) 50%,transparent 58%);
  transform:translateX(-130%);
}
.card:hover .card-media::after{transform:translateX(130%);transition:transform .9s var(--ease)}

/* ---------- parallax hooks ---------- */
.hero-bg{inset:-9% 0;will-change:transform}
.cta-banner .bg{inset:-12% 0;will-change:transform}

/* ---------- header hide on scroll down ---------- */
.site-head{transition:box-shadow .5s var(--ease),padding .5s var(--ease),transform .55s var(--ease)}
.site-head.hidden{transform:translateY(-110%)}

/* ---------- micro-interactions ---------- */
.marquee:hover .marquee-track{animation-play-state:paused}
.btn{will-change:transform}
.textlink{transition:color .4s var(--ease),letter-spacing .5s var(--ease)}
.textlink:hover{letter-spacing:.3em;color:var(--ink-dark)}
.navlink{transition:color .4s,letter-spacing .45s var(--ease)}
.reveal.in .stat .big{animation:statpop 1.1s var(--ease) both}
@keyframes statpop{from{opacity:0;transform:translateY(46%) scale(.92)}to{opacity:1;transform:none}}
.pillar svg{transition:transform .6s var(--ease)}
.pillar:hover svg{transform:translateY(-4px) scale(1.08)}
.faq summary{transition:color .4s,padding-left .45s var(--ease)}
.faq details[open] summary,.faq summary:hover{color:var(--gold-deep);padding-left:.4em}
.info-row{transition:transform .5s var(--ease)}
.info-row:hover{transform:translateX(6px)}

/* ---------- hero side label ---------- */
.hero-side{
  position:absolute;right:2.4rem;bottom:9rem;z-index:2;
  writing-mode:vertical-rl;display:flex;align-items:center;gap:1.1em;
  font-family:var(--sans);font-size:.66rem;font-weight:500;
  letter-spacing:.5em;text-transform:uppercase;color:rgba(255,255,255,.75);
}
.hero-side::before{content:"";width:1px;height:64px;background:linear-gradient(180deg,transparent,rgba(232,206,150,.9))}
@media (max-width:1020px){.hero-side{display:none}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .preloader{display:none}
  .grain{display:none}
  .wi{transform:none!important;transition:none!important}
  .w{overflow:visible}
  .img-frame img{clip-path:none!important;transform:none!important;transition:none!important}
  .hero-bg,.cta-banner .bg{inset:0}
  .site-head.hidden{transform:none}
  .cursor-dot,.cursor-ring{display:none!important}
  body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:auto}
  .reveal.in .stat .big{animation:none}
}

/* ---------- client brand logo (2026-08-26) ---------- */
.pl-logo{width:min(76vw,460px);height:auto;opacity:0;animation:plfade 1s .15s var(--ease) forwards}
.brand{align-items:center;gap:.65em}
.brand-mark{height:62px;width:62px;flex-shrink:0;transition:all .5s var(--ease)}
.site-head.scrolled .brand-mark{height:50px;width:50px}
.site-foot .brand-mark{height:82px;width:82px}
@media (max-width:620px){
  .brand-mark{height:48px;width:48px}
  .site-head.scrolled .brand-mark{height:42px;width:42px}
  .site-foot .brand-mark{height:64px;width:64px}
  .pl-logo{width:82vw}
}

/* A quiet editorial close to the homepage heritage story. */
.home-director .heritage-frame .heritage-frame__body>p.heritage-coda{
  max-width:36rem;
  margin-top:2rem;
  padding-left:1.2rem;
  color:var(--director-parchment);
  border-left:1px solid rgba(199,164,106,.52);
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(1.05rem,1.5vw,1.3rem);
  font-style:italic;
  line-height:1.5;
}
body.home-director .heritage-frame h2{
  font-size:clamp(3.35rem,5vw,4.65rem);
  line-height:.94;
}

/* Make the repertoire note read as editorial context, not an eighth ingredient. */
body.home-director .botanical-marquee__track span.marquee-note{
  color:var(--director-brass);
  font-family:var(--sans);
  font-size:.62rem;
  font-style:normal;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* Keep long-form heritage copy clear of the cinematic chapter rail. */
@media (min-width:1200px) and (max-width:1500px){
  body.home-director .heritage-frame__body>.lede,
  body.home-director .heritage-frame__body>p:not(.director-kicker):not(.lede):not(.heritage-coda){max-width:32rem}
}
@media (max-width:1699px){
  body.home-director .chapter-rail{display:none!important}
}
@media (max-width:820px){
  body.home-director .heritage-frame::before{display:none}
  body.home-director .heritage-frame__grid{display:block}
  body.home-director .heritage-frame__media{max-width:32rem;margin:0 1rem 4rem 0}
  body.home-director .heritage-frame__body{padding-block:0}
}
@media (max-width:720px){
  body.home-director .heritage-frame .heritage-stats{grid-template-columns:1fr}
  body.home-director .heritage-frame .heritage-stats>div,
  body.home-director .heritage-frame .heritage-stats>div+div{
    display:grid;
    grid-template-columns:4.5rem minmax(0,1fr);
    align-items:center;
    gap:1rem;
    padding:1.15rem 0;
    border-right:0;
    border-bottom:1px solid rgba(199,164,106,.2);
  }
  body.home-director .heritage-frame .heritage-stats>div:last-child{border-bottom:0}
  body.home-director .heritage-frame .heritage-stats dt{font-size:3rem}
  body.home-director .heritage-frame .heritage-stats dd{margin:0;font-size:.7rem;line-height:1.45;letter-spacing:.12em}
  body.home-director .hero-editorial .lede{font-size:.96rem;line-height:1.75}
  body.home-director .hero-editorial .hero-kicker{font-size:.65rem;line-height:1.55}
}

/* ---------- brand name lockup (Aini Herbal Skin Care Inc.) ---------- */
.brand-text{display:flex;flex-direction:column;justify-content:center;line-height:1.15;min-width:0}
.brand-name{
  font-family:var(--serif);font-weight:600;font-size:1.28rem;letter-spacing:.14em;
  color:#fff;transition:color .4s;white-space:nowrap;
}
body.zh .brand-name{font-family:var(--zh-serif);font-size:1.04rem;letter-spacing:.2em}
.brand-sub{
  font-family:var(--sans);font-size:.55rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:#E8CE96;transition:color .4s;margin-top:.22em;white-space:nowrap;
}
.site-head.scrolled .brand-name,.site-head.solid .brand-name{color:var(--ink-dark)}
.site-head.scrolled .brand-sub,.site-head.solid .brand-sub{color:var(--gold-deep)}
.site-foot .brand-name{color:#fff;font-size:1.28rem;letter-spacing:.08em}
body.zh .site-foot .brand-name{font-size:1.18rem;letter-spacing:.14em}
.site-foot .brand-sub{color:var(--gold);font-size:.64rem;letter-spacing:.26em}
@media (max-width:620px){
  .brand-name{font-size:1.02rem;letter-spacing:.1em}
  body.zh .brand-name{font-size:.94rem;letter-spacing:.12em}
  .brand-sub{font-size:.47rem;letter-spacing:.16em}
  .site-foot .brand-name{font-size:1.05rem}
}

/* ---------- dark-header brand adaptations (match legacy .brand-en rules) ---------- */
.page-visit .site-head.solid:not(.scrolled) .brand-name{color:#fff}
.page-visit .site-head.solid:not(.scrolled) .brand-sub{color:#E8CE96}
.home-director .site-head.scrolled .brand-name{color:#fff}
.home-director .site-head.scrolled .brand-sub{color:#E8CE96}
.zh-editorial.nav-open .brand-name{color:#fff!important}
.zh-editorial.nav-open .brand-sub{color:#E8CE96!important}

/* ---------- brand wordmark slices (cut from client logo, traditional chars) ---------- */
.brand-text{align-items:center;gap:.3rem}
.brand-word-en{height:33px;width:auto;display:block;transition:height .5s var(--ease)}
.brand-word-zh{height:11px;width:auto;display:block;transition:height .5s var(--ease)}
.site-head.scrolled .brand-word-en{height:28px}
.site-head.scrolled .brand-word-zh{height:9.5px}
.site-foot .brand-word-en{height:42px}
.site-foot .brand-word-zh{height:14px}
@media (max-width:620px){
  .brand-word-en{height:26px}
  .brand-word-zh{height:10.5px}
  .site-foot .brand-word-en{height:34px}
  .site-foot .brand-word-zh{height:12px}
}

/* ---------- 2026-09 editorial polish: hierarchy, restraint, access ---------- */
:where(a,button,summary):focus-visible{
  outline:2px solid #d6b173;
  outline-offset:4px;
}
.site-head:focus-within{transform:none!important}

/* Keep navigation legible while the transparent header crosses bright imagery. */
.home-director .site-head:not(.scrolled)::before{
  opacity:1;
  background:linear-gradient(180deg,rgba(13,9,7,.58),rgba(13,9,7,.16) 72%,transparent);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* Small editorial labels should feel quiet, never faint. */
body.home-director .director-intro__label{font-size:.66rem}
body.home-director .heritage-frame__media figcaption{color:rgba(255,255,255,.58);font-size:.64rem}
body.home-director .heritage-stats dd{color:rgba(255,255,255,.62);font-size:.66rem}
body.home-director .ritual-panel__num{color:#806038;font-size:.72rem}
body.home-director .ritual-panel__body a{min-height:44px;font-size:.72rem}
body.home-director .ritual-panel__meta{font-size:.66rem}
body.home-director .formula-step b,
body.home-director .formula-story .director-kicker,
body.home-director .ritual-deck .director-kicker,
body.home-director .price-moment .director-kicker,
body.home-director .visit-strip .director-kicker{color:#806038}
body.home-director .formula-step p{color:#66594f;font-size:.97rem}
body.home-director .formula-story__media figcaption{color:#66594f;font-size:.64rem}
body.home-director .director-quote cite{color:rgba(255,255,255,.68);font-size:.65rem}
body.home-director .price-moment__figure span{font-size:.69rem}
body.home-director .visit-strip__details dt{color:#806038;font-size:.65rem}
body.home-director .hero-editorial__foot{font-size:.62rem}

/* A shorter card cadence keeps the long homepage cinematic, not laborious. */
body.home-director .ritual-panel{min-height:min(64vh,640px);margin-bottom:7vh}
body.home-director .ritual-panel__media{min-height:500px}
body.home-director .director-quote{padding-block:clamp(7rem,10vw,10rem)}

body.home-director .price-moment__actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1.25rem;
  margin-top:2rem;
}
body.home-director .price-moment__actions .btn,
body.home-director .price-moment__actions .director-link{margin-top:0}
body.home-director .price-moment__actions .director-link{font-size:.68rem}

body.home-director .director-foot .disclaimer{
  max-width:72ch;
  color:rgba(255,255,255,.64);
  font-size:.875rem;
  line-height:1.8;
}

@media (min-width:1700px){
  body.home-director .chapter-rail a span{font-size:.56rem;letter-spacing:.12em}
  body.home-director--zh .chapter-rail a span{font-size:.6rem;letter-spacing:.16em}
}

/* Close the narrow desktop gap around 1024px. */
@media (min-width:1021px) and (max-width:1050px){
  body.home-director .nav{
    position:fixed;
    inset:0;
    z-index:110;
    flex-direction:column;
    justify-content:center;
    gap:2.2rem;
    background:var(--director-espresso);
    transform:translateX(100%);
    transition:transform .55s var(--ease);
  }
  body.home-director.nav-open .nav{transform:none}
  body.home-director .nav a.navlink{min-height:44px;padding:.65rem 1rem;color:rgba(255,255,255,.86)!important;font-size:.95rem;letter-spacing:.18em}
  body.home-director .burger{display:block}
  body.home-director .head-cta .btn--book{display:none}
  body.home-director .burger span{background:#fff}
}

@media (max-width:1050px){
  body.home-director .director-intro__grid,
  body.home-director .ritual-deck__head{grid-template-columns:120px 1fr}
  body.home-director .director-intro__copy,
  body.home-director .ritual-deck__head>p{grid-column:2}
  body.home-director .heritage-frame__grid{gap:4rem}
  body.home-director .formula-story__grid{grid-template-columns:1fr minmax(330px,.75fr);gap:4rem}
  body.home-director .price-moment__grid{grid-template-columns:1fr .55fr}
  body.home-director .price-moment__copy{grid-column:1/3;display:flex;align-items:flex-start;justify-content:space-between;gap:3rem}
  body.home-director .price-moment__copy>p{max-width:36rem}
  body.home-director .price-moment__actions{flex:0 0 auto;margin-top:0}
  body.home-director .lang-pill,
  body.home-director .burger{min-width:44px;min-height:44px}
}

@media (max-width:1020px){
  body.home-director .nav a.navlink{min-height:44px;padding:.65rem 1rem;font-size:.95rem;letter-spacing:.18em}
  body.home-director .lang-pill,
  body.home-director .burger{min-width:44px;min-height:44px}
}

@media (min-width:721px) and (max-width:820px){
  body.home-director .formula-story__grid,
  body.home-director .visit-strip__grid{display:block}
  body.home-director .formula-story__media{position:relative;top:auto;max-width:30rem;margin:3.5rem 0 0}
  body.home-director .visit-strip__details{margin-top:3rem}
  body.home-director .ritual-panel,
  body.home-director .ritual-panel:nth-child(n){min-height:560px}
  body.home-director .ritual-panel__media{min-height:560px}
  body.home-director .ritual-panel__body,
  body.home-director .ritual-panel__meta{padding-inline:2rem}
  body.home-director .ritual-panel__body h3{font-size:clamp(2.75rem,7vw,3.35rem)}
  body.home-director .price-moment__copy{display:block}
  body.home-director .price-moment__actions{margin-top:1.6rem}
}

@media (max-width:720px){
  .grain{display:none}
  body.home-director .hero-kicker{font-size:.66rem;line-height:1.55}
  body.home-director .hero-editorial .btn--solid{min-height:48px}
  body.home-director .ritual-panel__body a{font-size:.78rem}
  body.home-director .price-moment__copy{display:block}
  body.home-director .price-moment__actions{margin-top:1.8rem}
}

@media (max-width:430px){
  body.home-director .heritage-frame h2{font-size:clamp(2.85rem,13vw,3.15rem);line-height:.98;text-wrap:balance}
}

@media (max-width:720px) and (max-height:720px){
  body.home-director .hero-editorial__grid{padding-top:6.2rem;padding-bottom:4.3rem}
  body.home-director .hero-kicker{gap:.32rem;margin-bottom:.75rem;font-size:.59rem}
  body.home-director .hero-editorial h1{font-size:clamp(3rem,15vw,3.75rem)}
  body.home-director .hero-editorial .lede{margin-top:.85rem;font-size:.84rem;line-height:1.55}
  body.home-director .hero-editorial .hero-cta{margin-top:1rem}
  body.home-director .hero-editorial .btn--solid{min-height:44px;padding-block:.85em}
  body.home-director .hero-editorial__foot{bottom:.65rem}
}