/* Atelier Aesthetics — motion layer v1 (Nov 2026)
   Transform/opacity only; nothing hidden without JS; honours reduced motion. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:mo-vt-out .28s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:mo-vt-in .38s cubic-bezier(0,0,.2,1) both}
@keyframes mo-vt-out{to{opacity:0}}
@keyframes mo-vt-in{from{opacity:0}}

/* ── Scroll progress ── */
.mo-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:1002;pointer-events:none;
  background:linear-gradient(90deg,#8a6f3e,#d4b87a 40%,#fbeac2 60%,#d4b87a);transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline:scroll()){
  .mo-progress{animation:mo-grow linear both;animation-timeline:scroll(root)}
  @keyframes mo-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

/* ── Hero: dust, beam, aurora, drift ── */
.mo-dust{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.mo-dust.on{opacity:1}
.mo-beam{position:absolute;top:-20%;bottom:-20%;left:0;width:38%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(230,201,140,.0) 30%,rgba(240,214,160,.13) 50%,rgba(230,201,140,0) 70%,transparent 100%);
  transform:translateX(-120%) skewX(-12deg);animation:mo-beam 9s cubic-bezier(.45,.05,.3,1) 1.4s infinite;mix-blend-mode:screen}
@keyframes mo-beam{0%{transform:translateX(-120%) skewX(-12deg)}55%,100%{transform:translateX(330%) skewX(-12deg)}}
.tx-hero-bg,.hero>.hero-img{animation:mo-drift 16s cubic-bezier(.2,.6,.2,1) both}
@keyframes mo-drift{from{transform:scale(1.09)}to{transform:scale(1)}}
.mo-aura{position:absolute;inset:-30%;z-index:0;pointer-events:none;opacity:.55;
  background:radial-gradient(38% 32% at 30% 40%,rgba(212,184,122,.22),transparent 70%),radial-gradient(30% 28% at 72% 65%,rgba(184,151,90,.18),transparent 70%);
  animation:mo-aura 22s ease-in-out infinite alternate}
@keyframes mo-aura{from{transform:translate3d(-4%,-2%,0) rotate(0)}to{transform:translate3d(5%,3%,0) rotate(8deg)}}
.hero .hero-content,.tx-hero .tx-hero-content{z-index:2}
.mo-cue{position:absolute;left:50%;bottom:1.4rem;z-index:2;width:1px;height:44px;margin-left:-.5px;overflow:hidden;pointer-events:none;background:rgba(255,255,255,.12)}
.mo-cue::after{content:"";position:absolute;left:0;top:0;width:1px;height:16px;background:linear-gradient(#fff3d6,#b8975a);animation:mo-cue 2.2s cubic-bezier(.6,0,.3,1) infinite}
@keyframes mo-cue{from{transform:translateY(-18px)}to{transform:translateY(48px)}}

/* Gold sheen on hero italics (runs a few times, then rests) */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-h1 em,.tx-h1 em,.hero-title em,.tx-cta-band-h em,.mo-kol h2 em{
    background:linear-gradient(100deg,#b8975a 0%,#d9bd82 38%,#fff1cc 50%,#d9bd82 62%,#b8975a 100%);background-size:260% 100%;background-position:100% 0;
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
    animation:mo-sheen 3.6s cubic-bezier(.45,.05,.3,1) .9s 3 both}
}
@keyframes mo-sheen{0%{background-position:100% 0}60%,100%{background-position:0 0}}

/* ── Reveals (classes added by JS only to elements below the fold) ── */
.mo-rv{opacity:0;transform:translate3d(0,18px,0)}
.mo-rv.mo-in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.7,.2,1) var(--mo-d,0s),transform .6s cubic-bezier(.2,.7,.2,1) var(--mo-d,0s)}
.mo-img{clip-path:inset(0 0 100% 0)}
.mo-img.mo-in{clip-path:inset(0 0 0 0);transition:clip-path .9s cubic-bezier(.65,0,.25,1) var(--mo-d,0s)}
.mo-line{transform:scaleX(0);transform-origin:0 50%}
.mo-line.mo-in{transform:scaleX(1);transition:transform .8s cubic-bezier(.65,0,.25,1) .15s}
[style*="text-align:center"] .mo-line,.mo-line.mo-c{transform-origin:50% 50%}

/* ── Card tilt + sheen (fine pointers only, set up by JS) ── */
.mo-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s}
.mo-tilt.mo-live{transition:transform .08s linear,border-color .3s,box-shadow .3s}
.mo-tilt:hover{box-shadow:0 18px 50px rgba(0,0,0,.12),0 0 0 1px rgba(184,151,90,.35)}
.mo-shine{position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(230,201,140,.20),transparent 45%)}
.mo-tilt:hover .mo-shine{opacity:1}

/* ── Buttons: glint + magnet ── */
.mo-btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .35s cubic-bezier(.2,.7,.2,1),background .3s,color .3s,border-color .3s,box-shadow .3s}
.mo-btn:hover{box-shadow:0 10px 30px rgba(184,151,90,.28)}
.mo-glint{position:absolute;top:-10%;bottom:-10%;left:0;width:45%;pointer-events:none;z-index:-1;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);transform:translateX(-160%) skewX(-18deg);animation:mo-glint 5.5s cubic-bezier(.45,.05,.3,1) 2s infinite}
@keyframes mo-glint{0%{transform:translateX(-160%) skewX(-18deg)}28%,100%{transform:translateX(330%) skewX(-18deg)}}

/* ── CTA band aura ── */
.tx-cta-band{position:relative;overflow:hidden;isolation:isolate}
.tx-cta-band>.mo-aura{z-index:-1;opacity:.7}

/* ── Floating WhatsApp (desktop) + action bar (mobile) ── */
.mo-fab{position:fixed;right:28px;bottom:28px;z-index:1001;display:flex;align-items:center;gap:.7rem;text-decoration:none;
  transform:translate3d(0,140%,0);opacity:0;visibility:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .4s,visibility 0s .5s}
.mo-fab.on{transform:none;opacity:1;visibility:visible;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .4s}
.mo-fab-tip{background:#141414;color:#f1e3c2;font:400 .68rem/1 Jost,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  padding:.8rem 1rem;border:1px solid rgba(184,151,90,.35);opacity:0;transform:translateX(8px);transition:opacity .3s,transform .3s;white-space:nowrap}
.mo-fab:hover .mo-fab-tip{opacity:1;transform:none}
.mo-fab-btn{position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,#d4b87a,#b8975a 55%,#8a6f3e);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.mo-fab-btn::before,.mo-fab-btn::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(212,184,122,.8);animation:mo-ping 2.8s cubic-bezier(0,0,.2,1) infinite}
.mo-fab-btn::after{animation-delay:1.4s}
@keyframes mo-ping{from{transform:scale(1);opacity:.85}to{transform:scale(1.9);opacity:0}}
.mo-bar{display:none}
@media (max-width:760px){
  .mo-fab{display:none}
  .mo-bar{position:fixed;left:0;right:0;bottom:0;z-index:1001;display:grid;grid-template-columns:1fr 2.1fr;gap:1px;
    background:rgba(184,151,90,.35);padding-bottom:env(safe-area-inset-bottom,0);box-shadow:0 -10px 30px rgba(0,0,0,.25);
    transform:translate3d(0,110%,0);visibility:hidden;transition:transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s .45s}
  .mo-bar.on{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
  .mo-bar a{display:flex;align-items:center;justify-content:center;gap:.55rem;height:56px;text-decoration:none;
    font:400 .66rem/1.2 Jost,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}
  .mo-bar .mo-call{background:#141414;color:#e9d6a8}
  .mo-bar .mo-wa{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(120deg,#c7a76a,#b8975a 60%,#a3844c);color:#fff}
}

/* ── KOL map section (homepage) ── */
.mo-kol{background:#101010;color:#fff;padding:6.5rem 5% 5.5rem;position:relative;overflow:hidden;isolation:isolate}
.mo-kol .mo-aura{z-index:-1;opacity:.45}
.mo-kol-in{max-width:1180px;margin:0 auto}
.mo-kol .eyebrow{color:#b8975a}
.mo-kol h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.1;margin:.9rem 0 1rem;color:#fff}
.mo-kol h2 em{font-style:italic;color:#d4b87a}
.mo-kol-sub{max-width:62ch;color:rgba(255,255,255,.62);font-size:.95rem;line-height:1.85}
.mo-kol-map{position:relative;aspect-ratio:1000/458;margin:2.8rem 0 2.4rem}
.mo-kol-map svg,.mo-kol-map img{position:absolute;inset:0;width:100%;height:100%}
.mo-kol-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(184,151,90,.18);border:1px solid rgba(184,151,90,.18)}
.mo-kol-list li{background:#101010}
.mo-kol-list a{display:block;height:100%;padding:1.4rem 1.5rem;text-decoration:none;color:inherit;transition:background .3s}
.mo-kol-list a:hover{background:#17140e}
.mo-kol-city{display:block;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:#b8975a;margin-bottom:.45rem}
.mo-kol-ev{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.22rem;line-height:1.3;color:#fff}
.mo-kol-yr{display:block;font-size:.72rem;color:rgba(255,255,255,.45);margin-top:.35rem;letter-spacing:.06em}
.mo-kol-cta{margin-top:2.2rem;display:flex;gap:1.6rem;flex-wrap:wrap;align-items:center}
@media (max-width:900px){.mo-kol-list{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.mo-kol{padding:4.5rem 5% 4rem}.mo-kol-list{grid-template-columns:1fr}.mo-kol-map{margin:2rem -5% 1.8rem}}

/* ── Hero photo crossfade (homepage) ── */
.mo-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease;pointer-events:none}
.mo-slide.on{opacity:.46;animation:mo-drift 9s linear both}

/* ── Reduced motion: keep fades, drop movement ── */
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .mo-beam,.mo-dust,.mo-aura,.mo-glint,.mo-cue{display:none}
  .tx-hero-bg,.hero>.hero-img,.mo-slide.on{animation:none}
  .hero-h1 em,.tx-h1 em,.hero-title em,.tx-cta-band-h em,.mo-kol h2 em{animation:none;background-position:0 0}
  .mo-rv{transform:none}.mo-rv.mo-in{transition:opacity .3s}
  .mo-img{clip-path:none}.mo-line{transform:none}
  .mo-tilt{transform:none}
  .mo-fab-btn::before,.mo-fab-btn::after{animation:none;opacity:0}
}
@media print{.mo-progress,.mo-fab,.mo-bar,.mo-dust,.mo-beam,.mo-aura{display:none!important}}

/* ── Article hero on phones: clear the nav, deepen the overlay ── */
.hero:has(>.hero-meta)>.hero-img{object-position:center 28%}
.hero:has(>.hero-meta) .hero-overlay{background:linear-gradient(to bottom,rgba(14,14,14,.1) 0%,rgba(14,14,14,.45) 48%,rgba(14,14,14,.95) 100%)}

@media (max-width:760px){
  .hero:has(>.hero-meta){height:auto;min-height:520px;padding-top:88px}
  .hero:has(>.hero-meta) .hero-overlay{background:linear-gradient(to bottom,rgba(14,14,14,.35) 0%,rgba(14,14,14,.72) 45%,rgba(14,14,14,.96) 100%)}
}