/* =============================================================================
   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. */
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%);
  animation:bgFloat 40s ease-in-out infinite}
/* Matte tooth — a clearly-present grain over the purple base (the "mat purple finish"). */
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.62;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px}
@keyframes bgFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-2%,1.4%,0) scale(1.05)}}
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)}

/* ---- 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 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 */
[data-reveal]{opacity:0;will-change:transform,opacity}
[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) 40%,var(--gold-deep) 75%,var(--purple));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:textPan 8s linear infinite}
.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(46px);opacity:.5;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}
}