/* ==========================================================================
   TALLAH LUXE — Motion layer
   Every animation is opt-in via data-anim="" and honours prefers-reduced-motion.
   ========================================================================== */

/* Page-load curtain */
.curtain{position:fixed;inset:0;z-index:9998;background:var(--plum);display:grid;place-items:center;
  transition:transform 1s var(--e-inout),opacity .6s .4s}
.curtain__logo{font-family:var(--font-display);color:var(--gold-soft);font-size:2rem;
  letter-spacing:.4em;text-transform:uppercase;opacity:0;animation:curtainLogo 1.1s var(--e-out) forwards}
@keyframes curtainLogo{0%{opacity:0;letter-spacing:.9em}60%{opacity:1}100%{opacity:1;letter-spacing:.4em}}
.curtain.is-done{transform:translateY(-100%);opacity:0;pointer-events:none}

/* Scroll reveal primitives */
[data-anim]{will-change:transform,opacity}
[data-anim="fade"]{opacity:0;transition:opacity .9s var(--e-out)}
[data-anim="fade-up"]{opacity:0;transform:translateY(38px);transition:opacity .85s var(--e-out),transform .85s var(--e-out)}
[data-anim="fade-down"]{opacity:0;transform:translateY(-30px);transition:opacity .85s var(--e-out),transform .85s var(--e-out)}
[data-anim="fade-left"]{opacity:0;transform:translateX(48px);transition:opacity .9s var(--e-out),transform .9s var(--e-out)}
[data-anim="fade-right"]{opacity:0;transform:translateX(-48px);transition:opacity .9s var(--e-out),transform .9s var(--e-out)}
[data-anim="zoom"]{opacity:0;transform:scale(.93);transition:opacity .9s var(--e-out),transform 1s var(--e-out)}
[data-anim="blur"]{opacity:0;filter:blur(12px);transform:translateY(20px);
  transition:opacity 1s var(--e-out),filter 1s var(--e-out),transform 1s var(--e-out)}
[data-anim].is-in{opacity:1;transform:none;filter:none}

/* Image clip reveal — the signature move for editorial photography */
[data-anim="reveal"]{clip-path:inset(0 0 100% 0);transition:clip-path 1.15s var(--e-out)}
[data-anim="reveal"].is-in{clip-path:inset(0 0 0 0)}
[data-anim="reveal-x"]{clip-path:inset(0 100% 0 0);transition:clip-path 1.15s var(--e-out)}
[data-anim="reveal-x"].is-in{clip-path:inset(0 0 0 0)}
[data-anim="reveal"] img,[data-anim="reveal-x"] img{transform:scale(1.18);transition:transform 1.5s var(--e-out)}
[data-anim="reveal"].is-in img,[data-anim="reveal-x"].is-in img{transform:scale(1)}

/* Line-by-line heading reveal */
.split-line{display:block;overflow:hidden}
.split-line>span{display:block;transform:translateY(105%);
  transition:transform .95s var(--e-out)}
.is-in .split-line>span{transform:none}
.split-line:nth-child(2)>span{transition-delay:.09s}
.split-line:nth-child(3)>span{transition-delay:.18s}
.split-line:nth-child(4)>span{transition-delay:.27s}

/* Character shimmer for the wordmark */
.shimmer{background:linear-gradient(100deg,var(--plum) 30%,var(--gold) 48%,var(--plum) 66%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 6s ease-in-out infinite}
@keyframes shimmer{0%{background-position:180% 0}55%,100%{background-position:-80% 0}}

/* Stagger helper: parent gets data-stagger, children animate in sequence */
[data-stagger]>*{opacity:0;transform:translateY(30px);
  transition:opacity .75s var(--e-out),transform .75s var(--e-out)}
[data-stagger].is-in>*{opacity:1;transform:none}
[data-stagger].is-in>*:nth-child(1){transition-delay:.00s}
[data-stagger].is-in>*:nth-child(2){transition-delay:.08s}
[data-stagger].is-in>*:nth-child(3){transition-delay:.16s}
[data-stagger].is-in>*:nth-child(4){transition-delay:.24s}
[data-stagger].is-in>*:nth-child(5){transition-delay:.32s}
[data-stagger].is-in>*:nth-child(6){transition-delay:.40s}
[data-stagger].is-in>*:nth-child(7){transition-delay:.48s}
[data-stagger].is-in>*:nth-child(8){transition-delay:.56s}
[data-stagger].is-in>*:nth-child(n+9){transition-delay:.64s}

/* Parallax */
[data-parallax]{will-change:transform}

/* Magnetic buttons (desktop pointer only) */
@media (hover:hover) and (pointer:fine){
  .magnetic{transition:transform .35s var(--e-out)}
}

/* Custom cursor (desktop only) */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:9997;pointer-events:none;border-radius:50%;
  mix-blend-mode:difference;opacity:0;transition:opacity .3s,width .3s var(--e-spring),height .3s var(--e-spring)}
.cursor{width:34px;height:34px;border:1px solid rgba(255,255,255,.85);transform:translate(-50%,-50%)}
.cursor-dot{width:5px;height:5px;background:#fff;transform:translate(-50%,-50%)}
body.has-cursor .cursor,body.has-cursor .cursor-dot{opacity:1}
body.cursor-hover .cursor{width:62px;height:62px;border-color:var(--gold)}
@media (hover:none),(pointer:coarse){.cursor,.cursor-dot{display:none}}

/* Counters */
.counter{font-variant-numeric:tabular-nums}

/* Skeleton shimmer for lazy product images */
.img-skeleton{position:relative;overflow:hidden;background:var(--cream)}
.img-skeleton::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  transform:translateX(-100%);animation:skel 1.6s infinite}
@keyframes skel{100%{transform:translateX(100%)}}
.img-skeleton.is-loaded::after{display:none}

/* Micro-interactions */
.pulse-ring{position:relative}
.pulse-ring::after{content:"";position:absolute;inset:-4px;border:1px solid var(--gold);border-radius:inherit;
  opacity:0;animation:pulsering 2.4s var(--e-out) infinite}
@keyframes pulsering{0%{opacity:.7;transform:scale(.95)}70%,100%{opacity:0;transform:scale(1.18)}}

.float-slow{animation:floaty 7s var(--e-inout) infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.rotate-slow{animation:rot 26s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}

/* Ripple for add-to-cart */
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);
  transform:scale(0);animation:ripple .65s var(--e-out);pointer-events:none}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}

/* Flying image when adding to cart */
.fly-img{position:fixed;z-index:9990;pointer-events:none;border-radius:4px;object-fit:cover;
  transition:all .9s cubic-bezier(.55,-0.2,.35,1)}

/* Toast */
.toast-stack{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:9995;
  display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none}
.toast{background:var(--plum);color:#fff;padding:.9rem 1.4rem;border-radius:99px;font-size:var(--fs-sm);
  box-shadow:var(--shadow);display:flex;align-items:center;gap:.6rem;
  opacity:0;transform:translateY(20px) scale(.95);transition:all .45s var(--e-spring)}
.toast.is-in{opacity:1;transform:none}
.toast svg{width:17px;height:17px;color:var(--gold-soft)}

/* Modal (quick view / lightbox) */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:var(--gutter);
  background:rgba(25,19,22,.62);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.modal.is-open{opacity:1;visibility:visible}
.modal__panel{position:relative;background:var(--white);width:min(1000px,100%);max-height:88vh;overflow:auto;
  border-radius:var(--radius-lg);transform:translateY(28px) scale(.97);opacity:0;
  transition:transform .55s var(--e-out),opacity .45s}
.modal.is-open .modal__panel{transform:none;opacity:1}
.modal__close{position:absolute;top:1rem;inset-inline-end:1rem;z-index:3;width:40px;height:40px;border-radius:50%;
  background:var(--cream);display:grid;place-items:center;transition:transform .35s var(--e-spring),background .3s}
.modal__close:hover{background:var(--plum);color:#fff;transform:rotate(90deg)}
.modal--lightbox .modal__panel{background:transparent;width:auto;max-width:min(1100px,92vw)}
.modal--lightbox img{max-height:85vh;width:auto;border-radius:var(--radius-lg)}

/* Progress bar at top of page */
.read-progress{position:fixed;top:0;inset-inline:0;height:2px;z-index:9996;background:transparent}
.read-progress__fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold-soft),var(--gold))}

/* Before/After slider (makeup looks) */
.ba{position:relative;overflow:hidden;border-radius:var(--radius-lg);cursor:ew-resize;user-select:none}
.ba img{width:100%;display:block}
.ba__after{position:absolute;inset:0;overflow:hidden;width:50%}
.ba__after img{position:absolute;inset:0;height:100%;width:auto;max-width:none}
.ba__handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translateX(-50%);z-index:3}
.ba__handle::after{content:"⟷";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:#fff;color:var(--plum);display:grid;place-items:center;
  box-shadow:var(--shadow)}

@media (prefers-reduced-motion:reduce){
  [data-anim],[data-stagger]>*{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  .split-line>span{transform:none!important}
  .curtain{display:none}
  .marquee__track,.shimmer,.float-slow,.rotate-slow,.pulse-ring::after{animation:none!important}
  .cursor,.cursor-dot{display:none}
}

/* ==========================================================================
   SAFETY NET
   Every hiding style above is gated on html.tl-anim, which main.js adds the
   moment it parses. If the script is blocked, fails, or the visitor has
   reduce-motion on, nothing is ever hidden — the page just renders.
   ========================================================================== */
html:not(.tl-anim) [data-anim],
html:not(.tl-anim) [data-stagger] > *,
html:not(.tl-anim) [data-anim] img{
  opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
html:not(.tl-anim) .split-line > span{transform:none!important}
html:not(.tl-anim) .curtain{display:none!important}