/* ─────────────────────────────────────
   Makeup Exquisite — base.css
   Tokens, reset, cursors, animation utilities
───────────────────────────────────── */

:root {
  --c-pink:       #F978A3;
  --c-pink-light: #FFE9EF;
  --c-red:        #FF2020;
  --c-black:      #000000;
  --c-white:      #FFFFFF;
  --c-grey:       #DDDDDD;
  --c-grey-mid:   #888888;
  --c-grey-dark:  #444444;
  --c-off-white:  #FAFAFA;
  --f-head:       'Playfair Display', Georgia, serif;
  --f-body:       'Poppins', system-ui, sans-serif;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 20px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--f-body); color:var(--c-black); background:var(--c-white); line-height:1.6; overflow-x:hidden; }
img  { display:block; max-width:100%; height:auto; }
a    { text-decoration:none; color:inherit; }
button { font-family:var(--f-body); }
ul,ol  { list-style:none; }
svg    { display:block; }
::selection    { background:var(--c-pink-light); }
:focus-visible { outline:2px solid var(--c-pink); outline-offset:3px; }

@media (hover:hover) and (pointer:fine) { *,*::before,*::after { cursor:none !important; } }

/* ── Custom cursor ── */
.cursor-dot {
  position:fixed; top:0; left:0; z-index:99999;
  width:5px; height:5px; border-radius:50%;
  background:var(--c-pink); pointer-events:none;
  transform:translate(-50%,-50%); will-change:left,top;
  transition:background .2s, transform .15s;
}
.cursor-ring {
  position:fixed; top:0; left:0; z-index:99998;
  width:32px; height:32px; border-radius:50%;
  border:1.5px solid rgba(249,120,163,.45); pointer-events:none;
  transform:translate(-50%,-50%); will-change:left,top;
  transition:
    width .35s cubic-bezier(.16,1,.3,1),
    height .35s cubic-bezier(.16,1,.3,1),
    border-color .3s,
    background .3s;
}
.cursor-hover .cursor-dot  { transform:translate(-50%,-50%) scale(0); }
.cursor-hover .cursor-ring { width:52px; height:52px; border-color:rgba(249,120,163,.7); background:rgba(249,120,163,.06); }
.cursor-click .cursor-dot  { transform:translate(-50%,-50%) scale(2); }

/* ── Char animation — opacity stagger, JS adds .in ── */
.char { display:inline-block; opacity:0.5; transition:opacity 0.45s ease calc(var(--i,0) * 14ms); }
.char-anim.in .char { opacity:1; }

/* ── Scroll reveal ── */
.reveal    { opacity:0; transform:translateY(1rem); transition:opacity .65s ease, transform .65s ease; }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.1s; }
.reveal.d2 { transition-delay:.2s; }
.reveal.d3 { transition-delay:.3s; }

/* ── Slide-left reveal (wordmarks, ed-hero-title) ── */
.slide-left    { opacity:0; transform:translateX(-2.5rem); transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.slide-left.in { opacity:1; transform:none; }
.slide-left-d1 { transition-delay:.15s; }
.slide-left-d2 { transition-delay:.3s; }

/* ── Hero wordmark — JS owns the reveal and scroll-fade ── */
.hero-wordmark-wrap { opacity:0; }

/* ── Footer wordmark — opacity only; layout.css owns translateX(-50%) ── */
.footer-wordmark-wrap { opacity:0; transition:opacity .9s ease; }
.footer-wordmark-wrap.wm-in { opacity:1; }

/* ── pad-xl — shape and elevation only; layout.css adds padding-block ── */
.pad-xl {
  border-radius:0 0 var(--r-lg) var(--r-lg);
  box-shadow:0 6px 40px rgba(0,0,0,.07);
  position:relative; z-index:1;
}

/* ── SVG path stagger — keyframe shared by both wordmarks ── */
@keyframes wm-path-in { from { opacity:0; } to { opacity:1; } }

/* Hero wordmark paths — class present in markup on load */
.wm-animate path { opacity:0; animation:wm-path-in .55s ease forwards; }
.wm-animate path:nth-child(1)  { animation-delay:.55s }
.wm-animate path:nth-child(2)  { animation-delay:.58s }
.wm-animate path:nth-child(3)  { animation-delay:.61s }
.wm-animate path:nth-child(4)  { animation-delay:.64s }
.wm-animate path:nth-child(5)  { animation-delay:.67s }
.wm-animate path:nth-child(6)  { animation-delay:.70s }
.wm-animate path:nth-child(7)  { animation-delay:.73s }
.wm-animate path:nth-child(8)  { animation-delay:.76s }
.wm-animate path:nth-child(9)  { animation-delay:.79s }
.wm-animate path:nth-child(10) { animation-delay:.82s }
.wm-animate path:nth-child(11) { animation-delay:.85s }
.wm-animate path:nth-child(12) { animation-delay:.88s }
.wm-animate path:nth-child(13) { animation-delay:.91s }
.wm-animate path:nth-child(14) { animation-delay:.94s }
.wm-animate path:nth-child(15) { animation-delay:.97s }
.wm-animate path:nth-child(16) { animation-delay:1.00s }
.wm-animate path:nth-child(17) { animation-delay:1.03s }
.wm-animate path:nth-child(18) { animation-delay:1.06s }

/* Footer wordmark paths — hidden until IO adds .wm-footer-animate to the svg */
.footer-wordmark-wrap svg path { opacity:0; }
.wm-footer-animate path { animation:wm-path-in .45s ease forwards; }
.wm-footer-animate path:nth-child(1)  { animation-delay:.00s }
.wm-footer-animate path:nth-child(2)  { animation-delay:.03s }
.wm-footer-animate path:nth-child(3)  { animation-delay:.06s }
.wm-footer-animate path:nth-child(4)  { animation-delay:.09s }
.wm-footer-animate path:nth-child(5)  { animation-delay:.12s }
.wm-footer-animate path:nth-child(6)  { animation-delay:.15s }
.wm-footer-animate path:nth-child(7)  { animation-delay:.18s }
.wm-footer-animate path:nth-child(8)  { animation-delay:.21s }
.wm-footer-animate path:nth-child(9)  { animation-delay:.24s }
.wm-footer-animate path:nth-child(10) { animation-delay:.27s }
.wm-footer-animate path:nth-child(11) { animation-delay:.30s }
.wm-footer-animate path:nth-child(12) { animation-delay:.33s }
.wm-footer-animate path:nth-child(13) { animation-delay:.36s }
.wm-footer-animate path:nth-child(14) { animation-delay:.39s }
.wm-footer-animate path:nth-child(15) { animation-delay:.42s }
.wm-footer-animate path:nth-child(16) { animation-delay:.45s }
.wm-footer-animate path:nth-child(17) { animation-delay:.48s }
.wm-footer-animate path:nth-child(18) { animation-delay:.51s }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .char     { opacity: 1; }
  .reveal, .slide-left { opacity: 1; transform: none; }
  .wm-animate path, .footer-wordmark-wrap svg path { opacity: 1; animation: none; }
  .feat-marquee-track { animation-play-state: paused; }
  .page-curtain { display: none; }
}