/* =============================================================================
   Names Done Right — premium.css
   Shared design system + animation library (the cohesion backbone for every page).
   Palette: purple (action) · sage (calm lead) · gold (heirloom) · mist (serenity).
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&display=swap');

:root{
  --paper:#efe8f2; --paper-soft:#e6def0; --paper-deep:#ddd3ea;
  --ink:#262430; --ink-soft:#5c5666; --ink-faint:#8a8494;
  --line:#e3dceb; --line-soft:#ece6f2;
  --purple:#7c5e8c; --purple-deep:#5d4569; --purple-bright:#9b78ad; --purple-tint:#efe9f3;
  --plum:#574a60; --plum-deep:#3f3447;
  --sage:#7d9b8e; --sage-deep:#5e7d70; --sage-tint:#eaf0ec;
  --mist:#93a9b8; --mist-tint:#e9eef2;
  --gold:#c0a463; --gold-soft:#dcc78f; --gold-deep:#9c7f3f;
  --gold-foil:linear-gradient(135deg, #efe2b4 0%, #c0a463 45%, #9c7f3f 100%);
  --gold-text:#8a6d2f; --mist-text:#566f7d;
  --card:#ffffff;
  --shadow-s:0 8px 22px rgba(60,42,70,.07);
  --shadow:0 16px 44px rgba(60,42,70,.11);
  --shadow-l:0 34px 80px rgba(60,42,70,.18);
  --glow:0 0 0 1px rgba(124,94,140,.12),0 18px 50px rgba(124,94,140,.20);
  --radius:18px; --radius-lg:28px; --radius-sm:12px;
  --maxw:1180px;
  --ease:cubic-bezier(.22,1,.36,1); --ease-soft:cubic-bezier(.4,0,.2,1);
  --serif:'Fraunces','Cormorant Garamond',Georgia,serif;
  --script:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
/* Rich living background — replaces the flat fill site-wide: a drifting gradient
   mesh + a fine premium grain, fixed behind all content. */
/* Static gradient wash (was an infinitely-animated + scale()'d full-viewport layer — that
   continuous repaint was a major idle-CPU cost; the still gradient looks identical at rest). */
body::before{content:"";position:fixed;inset:-12% -6% 0 -6%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1300px 1100px at 50% 46%, rgba(124,94,140,.14), transparent 72%),
    radial-gradient(900px 720px at 10% -6%, rgba(124,94,140,.24), transparent 60%),
    radial-gradient(840px 660px at 94% 2%, rgba(155,120,173,.20), transparent 60%),
    radial-gradient(760px 760px at 84% 98%, rgba(147,169,184,.12), transparent 62%),
    radial-gradient(680px 560px at 2% 94%, rgba(125,155,142,.11), transparent 60%)}
/* NOTE: the full-screen SVG-turbulence grain overlay (body::after with mix-blend-mode:multiply)
   was removed — a viewport-sized multiply blend forces the browser to re-composite everything
   beneath it on every paint/scroll, the single biggest cause of the reported slowness. */
h1,h2,h3,h4{font-family:var(--serif);line-height:1.08;margin:0 0 .4em;font-weight:600;letter-spacing:-.01em}
a{color:var(--purple-deep);text-decoration:none}
img,svg{max-width:100%}
::selection{background:rgba(124,94,140,.18);color:var(--purple-deep)}

/* ---- Mobile overflow containment ----
   Decorative background blobs are position:absolute inside sections. When a section
   is position:static their containing block becomes the initial containing block, so
   they escape past the right edge and force horizontal page scroll on phones (the
   "very off on mobile" symptom). Making every section a positioned, x-clipping context
   anchors the blobs to their own section and clips the bleed — with overflow-y left
   visible (clip, not hidden) so vertical flow and sticky elements are unaffected.
   Long tables opt into their own internal scroll via a .scroll-x / .cmp-wrap wrapper. */
section{position:relative;overflow-x:clip}

/* ---- Keyboard focus ring (a11y) ---- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.btn:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--purple-deep);outline-offset:3px;border-radius:6px}

/* ---- Premium scrollbar ---- */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-thumb{background:linear-gradient(var(--purple),var(--sage));border-radius:99px;border:3px solid var(--paper)}
*::-webkit-scrollbar-track{background:transparent}

/* ---- Layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:96px 0;position:relative}
.eyebrow{display:inline-block;font:600 .76rem/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--purple);margin-bottom:18px}
.muted{color:var(--ink-soft)} .center{text-align:center}
.serif{font-family:var(--serif)} .script{font-family:var(--script);font-style:italic}

/* ---- Buttons ---- */
.btn{position:relative;display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;font:600 1rem/1 var(--sans);
  padding:16px 32px;border-radius:999px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s;overflow:hidden;text-align:center}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:none}
.btn:hover::after{animation:sheen .9s var(--ease)}
.btn:hover{transform:translateY(-3px)}
.btn-primary{background:linear-gradient(135deg,var(--purple),var(--purple-deep));color:#fff;box-shadow:0 12px 30px rgba(124,94,140,.34)}
.btn-primary:hover{box-shadow:0 18px 44px rgba(124,94,140,.46)}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--purple);color:var(--purple-deep)}
.btn-gold{background:linear-gradient(135deg,var(--gold-soft),var(--gold));color:#3a2f12;box-shadow:0 12px 30px rgba(192,164,99,.34),inset 0 1px 0 rgba(255,255,255,.45)}

/* ---- Cards / surfaces ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-s);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.glass{background:rgba(255,255,255,.7);backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.6)}
.gradient-border{position:relative;border-radius:var(--radius-lg);background:var(--card)}
.gradient-border::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:linear-gradient(135deg,var(--purple),var(--sage) 45%,var(--gold));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* ---- Pills / badges / seal ---- */
.pill{display:inline-flex;align-items:center;gap:6px;font:600 .74rem/1 var(--sans);padding:5px 12px;border-radius:999px;white-space:nowrap}
.pill-purple{background:var(--purple-tint);color:var(--purple-deep)}
.pill-sage{background:var(--sage-tint);color:var(--sage-deep)}
.pill-gold{background:#f4ecd6;color:#6f5a1e}
.pill-mist{background:var(--mist-tint);color:var(--mist-text)}
.seal{width:118px;height:118px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold-deep);font-family:var(--serif);text-align:center;position:relative}

/* =============================================================================
   ANIMATION LIBRARY — 50+ named keyframes + utility classes.
   Scroll-triggered reveals add .in-view (see premium.js).
   ============================================================================= */
@keyframes fadeUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-34px)}to{opacity:1;transform:none}}
@keyframes fadeLeft{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes fadeRight{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}
@keyframes zoomIn{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}
@keyframes blurIn{from{opacity:0;filter:blur(14px)}to{opacity:1;filter:blur(0)}}
@keyframes fadeBlurUp{from{opacity:0;filter:blur(10px);transform:translateY(28px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes rotateIn{from{opacity:0;transform:rotate(-7deg) scale(.92)}to{opacity:1;transform:none}}
@keyframes flipIn{from{opacity:0;transform:perspective(800px) rotateX(34deg)}to{opacity:1;transform:none}}
@keyframes swingIn{from{opacity:0;transform:rotate(6deg) translateY(20px)}to{opacity:1;transform:none}}
@keyframes maskUp{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes maskRight{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes popIn{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floatSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
@keyframes drift{0%{transform:translate(0,0)}33%{transform:translate(10px,-12px)}66%{transform:translate(-8px,8px)}100%{transform:translate(0,0)}}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.05);opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(124,94,140,.35)}50%{box-shadow:0 0 0 16px rgba(124,94,140,0)}}
@keyframes glowPulse{0%,100%{filter:drop-shadow(0 0 2px rgba(192,164,99,.4))}50%{filter:drop-shadow(0 0 12px rgba(192,164,99,.9))}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes sheen{0%{left:-130%}100%{left:130%}}
@keyframes shine{0%{transform:translateX(-120%) rotate(8deg)}100%{transform:translateX(220%) rotate(8deg)}}
@keyframes gradientPan{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes auroraShift{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(6%,-4%) rotate(8deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1)}}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes orbit{from{transform:rotate(0) translateX(34px) rotate(0)}to{transform:rotate(360deg) translateX(34px) rotate(-360deg)}}
@keyframes wave{0%,100%{transform:rotate(0)}25%{transform:rotate(14deg)}75%{transform:rotate(-8deg)}}
@keyframes ripple{from{transform:scale(.4);opacity:.6}to{transform:scale(2.4);opacity:0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes wobble{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px) rotate(-3deg)}60%{transform:translateX(4px) rotate(2deg)}}
@keyframes tada{0%{transform:scale(1)}10%,20%{transform:scale(.92) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.08) rotate(3deg)}40%,60%,80%{transform:scale(1.08) rotate(-3deg)}100%{transform:scale(1)}}
@keyframes heartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.18)}28%{transform:scale(1)}42%{transform:scale(1.18)}70%{transform:scale(1)}}
@keyframes jelly{0%,100%{transform:scale(1)}30%{transform:scale(1.12,.88)}50%{transform:scale(.9,1.1)}70%{transform:scale(1.04,.96)}}
@keyframes textPan{to{background-position:200% center}}
@keyframes caretBlink{50%{border-color:transparent}}
@keyframes underlineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes borderTrace{0%{background-position:0 0,0 0,0 0,0 0}100%{background-position:0 -200%,0 200%,-200% 0,200% 0}}
@keyframes fall{to{transform:translateY(108vh) rotate(420deg);opacity:0}}
@keyframes leafFall{0%{transform:translateY(-10vh) rotate(0);opacity:0}10%{opacity:.9}100%{transform:translateY(110vh) rotate(360deg);opacity:0}}
@keyframes risePetal{0%{transform:translateY(20px) scale(.6);opacity:0}30%{opacity:1}100%{transform:translateY(-120px) scale(1) rotate(40deg);opacity:0}}
@keyframes starTwinkle{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes revealLine{from{width:0}to{width:100%}}
@keyframes letterFade{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
@keyframes hueRot{to{filter:hue-rotate(360deg)}}

/* reveal base — JS adds .in-view to play.
   (Dropped the blanket will-change: it promoted every reveal element to its own GPU layer
   permanently — hundreds of layers — which slows compositing far more than it helps.) */
[data-reveal]{opacity:0}
[data-reveal].in-view{opacity:1}
[data-reveal="up"].in-view{animation:fadeUp .9s var(--ease) both}
[data-reveal="down"].in-view{animation:fadeDown .9s var(--ease) both}
[data-reveal="left"].in-view{animation:fadeLeft .9s var(--ease) both}
[data-reveal="right"].in-view{animation:fadeRight .9s var(--ease) both}
[data-reveal="fade"].in-view{animation:fadeIn 1s var(--ease) both}
[data-reveal="scale"].in-view{animation:scaleIn .9s var(--ease) both}
[data-reveal="zoom"].in-view{animation:zoomIn 1s var(--ease) both}
[data-reveal="blur"].in-view{animation:fadeBlurUp 1s var(--ease) both}
[data-reveal="rotate"].in-view{animation:rotateIn .9s var(--ease) both}
[data-reveal="flip"].in-view{animation:flipIn 1s var(--ease) both}
[data-reveal="mask"].in-view{animation:maskUp 1s var(--ease) both,fadeIn 1s both}
[data-reveal="pop"].in-view{animation:popIn .7s var(--ease) both}
[data-reveal] [data-delay="1"]{animation-delay:.1s}
.stagger>*{opacity:0}
.stagger.in-view>*{animation:fadeUp .8s var(--ease) both}
.stagger.in-view>*:nth-child(1){animation-delay:.05s}
.stagger.in-view>*:nth-child(2){animation-delay:.13s}
.stagger.in-view>*:nth-child(3){animation-delay:.21s}
.stagger.in-view>*:nth-child(4){animation-delay:.29s}
.stagger.in-view>*:nth-child(5){animation-delay:.37s}
.stagger.in-view>*:nth-child(6){animation-delay:.45s}
.stagger.in-view>*:nth-child(7){animation-delay:.53s}
.stagger.in-view>*:nth-child(8){animation-delay:.61s}

/* ambient utility classes */
.a-float{animation:float 6s var(--ease-soft) infinite}
.a-float-slow{animation:floatSlow 9s var(--ease-soft) infinite}
.a-drift{animation:drift 14s ease-in-out infinite}
.a-sway{animation:sway 7s ease-in-out infinite}
.a-breathe{animation:breathe 5s ease-in-out infinite}
.a-spin-slow{animation:spinSlow 26s linear infinite}
.a-twinkle{animation:twinkle 3.5s ease-in-out infinite}
.a-glow{animation:glowPulse 4s ease-in-out infinite}
.a-bob{animation:bob 3s ease-in-out infinite}
.a-pulse-glow{animation:pulseGlow 2.4s ease-out infinite}

/* gradient / shimmer text */
.text-gradient{background:linear-gradient(100deg,var(--purple),var(--sage-deep) 45%,var(--gold-deep) 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.text-shimmer{background:linear-gradient(100deg,var(--ink) 40%,var(--gold) 50%,var(--ink) 60%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 4s linear infinite}
.foil{background:var(--gold-foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.underline-grow{position:relative}
.underline-grow::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:2px;background:linear-gradient(90deg,var(--purple),var(--sage));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.underline-grow:hover::after{transform:scaleX(1)}

/* hover interactions (paired w/ premium.js for tilt/magnetic) */
.lift{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.lift:hover{transform:translateY(-8px) scale(1.012);box-shadow:var(--shadow)}
.tilt{transition:transform .18s var(--ease-soft);transform-style:preserve-3d}
.sheen-on-hover{position:relative;overflow:hidden}
.sheen-on-hover::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);transform:translateX(-120%)}
.sheen-on-hover:hover::before{animation:shine 1s var(--ease)}

/* decorative ambient blobs */
.blob{position:absolute;border-radius:50%;filter:blur(38px);opacity:.42;pointer-events:none;z-index:0}
.blob-purple{background:radial-gradient(circle,rgba(124,94,140,.5),transparent 70%)}
.blob-sage{background:radial-gradient(circle,rgba(125,155,142,.5),transparent 70%)}
.blob-mist{background:radial-gradient(circle,rgba(147,169,184,.5),transparent 70%)}
.blob-gold{background:radial-gradient(circle,rgba(192,164,99,.45),transparent 70%)}

/* progress + cursor + misc UI from premium.js */
#scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;background:linear-gradient(90deg,var(--purple),var(--sage),var(--gold));box-shadow:0 0 10px rgba(124,94,140,.5)}
.cursor-dot{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:50%;background:var(--purple);pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:transform .12s ease,background .2s;mix-blend-mode:multiply}
.cursor-ring{position:fixed;top:0;left:0;width:34px;height:34px;border:1.5px solid rgba(124,94,140,.5);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .2s,height .2s,border-color .2s}
.spark{position:fixed;pointer-events:none;z-index:9997;font-size:10px;opacity:.55;animation:sparkle .8s ease forwards}
.confetti{position:fixed;top:-10px;z-index:9996;pointer-events:none;animation:fall linear forwards}
.leaf{position:fixed;top:-10vh;z-index:1;pointer-events:none;animation:leafFall linear forwards}
@media(hover:none){.cursor-dot,.cursor-ring{display:none}}

/* easter-egg toast + konami banner */
.egg-toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);opacity:0;background:linear-gradient(135deg,var(--purple-deep),var(--plum-deep));color:#fff;padding:13px 22px;border-radius:999px;font:500 .92rem var(--sans);z-index:10000;box-shadow:var(--shadow-l);transition:opacity .4s,transform .4s var(--ease);max-width:90vw}
.egg-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.egg-toast b{color:var(--gold-soft)}

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1 !important}
  .cursor-dot,.cursor-ring{display:none}
}
/* Keyboard users should be able to bypass repeated site navigation. */
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:16px;top:12px;z-index:1000;padding:10px 14px;border:1px solid var(--line,#e8ddd0);border-radius:8px;background:#fff;color:var(--ink,#2a2730);box-shadow:0 12px 34px rgba(60,42,30,.12)}