/* ==========================================================================
   LENA — Couture Pink · core (tokens, reset, typography, atmosphere, controls)
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* surfaces */
  --blush:        #FFF1F6;
  --blush-deep:   #FFE4EE;
  --cream:        #FFFAF6;
  --white:        #FFFFFF;
  --plum-900:     #1B040F;
  --plum-800:     #2A0714;
  --plum-700:     #3D0E20;

  /* ink */
  --ink:          #2A0714;
  --ink-soft:     #71364F;
  --ink-faint:    #A4738A;
  --on-dark:      #FFEFF6;
  --on-dark-soft: #D8A9BF;

  /* accents */
  --pink:         #FF3F8E;
  --pink-hot:     #FF5C9E;
  --pink-deep:    #C9155F;
  --pink-soft:    #FFD3E4;
  --pink-mist:    #FFE9F1;
  --gold:         #C08A44;
  --gold-light:   #EECA96;
  --gold-glow:    #F6E3C4;

  --line:         #F3CEDD;
  --line-soft:    #FBE4EC;
  --line-dark:    rgba(238,202,150,.22);

  /* type */
  --display: "Bodoni Moda", Didot, "Times New Roman", serif;
  --body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --label:   "Space Grotesk", var(--body);

  /* rhythm */
  --gutter:  clamp(1.25rem, 4vw, 4.5rem);
  --maxw:    84rem;
  --section: clamp(5.5rem, 12vh, 11rem);

  /* motion */
  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.33,1,.68,1);

  --shadow-soft: 0 2px 6px rgba(120,20,60,.04), 0 12px 30px -12px rgba(150,25,80,.14);
  --shadow-lift: 0 4px 12px rgba(120,20,60,.06), 0 34px 70px -28px rgba(150,25,80,.28);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
/* NOTE: never give <html> overflow-x:hidden — it turns the root into its own
   scroll container and breaks Lenis. `clip` contains overflow without doing that. */
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  background:var(--blush);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .25vw,1.0625rem);
  line-height:1.62;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
body.is-locked{ overflow:hidden; }
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ list-style:none; padding:0; }
::selection{ background:var(--pink); color:#fff; }

:focus-visible{ outline:2px solid var(--pink); outline-offset:3px; }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:fixed; top:.5rem; left:.5rem; z-index:2000;
  padding:.7rem 1.1rem; background:var(--plum-900); color:var(--on-dark);
  font-family:var(--label); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  transform:translateY(-180%); transition:transform .3s var(--ease);
}
.skip:focus{ transform:none; }

/* ---------- typography ---------- */
h1,h2,h3,h4,.display{
  font-family:var(--display);
  font-weight:400;
  font-optical-sizing:auto;
  line-height:.98;
  letter-spacing:-.02em;
  text-wrap:balance;
  color:var(--ink);
}
.d1{ font-size:clamp(2.9rem,7.6vw,7rem); }
.d2{ font-size:clamp(2.2rem,5.2vw,4.5rem); line-height:1.04; }
.d3{ font-size:clamp(1.7rem,3vw,2.7rem); line-height:1.08; }
.d4{ font-size:clamp(1.28rem,1.9vw,1.68rem); line-height:1.16; letter-spacing:-.012em; }
.ital{ font-style:italic; }

.eyebrow{
  font-family:var(--label);
  font-size:clamp(.62rem,.58rem + .12vw,.72rem);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.34em;
  color:var(--pink-deep);
  display:flex; align-items:center; gap:.85em;
}
.eyebrow::before{
  content:""; width:clamp(1.5rem,4vw,3rem); height:1px; flex:none;
  background:linear-gradient(90deg,transparent,var(--gold));
}
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{
  content:""; width:clamp(1.5rem,4vw,3rem); height:1px; flex:none;
  background:linear-gradient(270deg,transparent,var(--gold));
}
.dark .eyebrow{ color:var(--gold-light); }

.lead{
  font-size:clamp(1.05rem,1rem + .5vw,1.32rem);
  line-height:1.58;
  color:var(--ink-soft);
  max-width:36ch;
}
.prose{ max-width:60ch; color:var(--ink-soft); }
.prose p+p{ margin-top:1.1em; }
.prose strong{ font-weight:500; color:var(--ink); }
.prose a{ color:var(--pink-deep); border-bottom:1px solid var(--line); padding-bottom:.05em; }
.prose a:hover{ border-color:var(--pink); }
.muted{ color:var(--ink-faint); }
.dark .prose{ color:var(--on-dark-soft); }
.dark .prose strong,.dark h1,.dark h2,.dark h3,.dark h4{ color:var(--on-dark); }

.grad{
  background:linear-gradient(104deg,var(--pink-deep) 6%,var(--pink) 46%,#FF8BBE 96%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-wide{ width:100%; max-width:104rem; margin-inline:auto; padding-inline:var(--gutter); }
section{ position:relative; }
.sec{ padding-block:var(--section); }
.sec-sm{ padding-block:clamp(3.5rem,7vh,6rem); }

.grid{ display:grid; gap:clamp(1.5rem,3vw,3rem); }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:980px){ .g4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px){ .g3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .g2,.g3,.g4{ grid-template-columns:minmax(0,1fr); } }

/* ---------- atmosphere ---------- */
.grain{
  position:fixed; inset:-60%; z-index:900; pointer-events:none;
  opacity:.42; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-3%,2%); } 40%{ transform:translate(2%,-3%); }
  60%{ transform:translate(-2%,-2%); } 80%{ transform:translate(3%,1%); }
}

.aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.aurora span{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.55; will-change:transform;
}
.aurora .b1{ width:48vw; height:48vw; left:-13vw; top:-15vw;
  background:radial-gradient(circle at 45% 45%,#FFB3D2,rgba(255,179,210,0) 70%); }
.aurora .b2{ width:40vw; height:40vw; right:-11vw; top:5vh;
  background:radial-gradient(circle at 50% 50%,#FFCFE4,rgba(255,207,228,0) 70%); }
.aurora .b3{ width:36vw; height:36vw; left:22vw; bottom:-17vw; opacity:.45;
  background:radial-gradient(circle at 50% 50%,#F6DFC5,rgba(246,223,197,0) 70%); }
.aurora .b4{ width:26vw; height:26vw; right:16vw; bottom:3vh; opacity:.3;
  background:radial-gradient(circle at 50% 50%,#FF9AC6,rgba(255,154,198,0) 70%); }

.sparkles{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }

/* ---------- buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  padding:1.02em 1.9em;
  font-family:var(--label); font-size:.78rem; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; white-space:nowrap;
  border-radius:100px; overflow:hidden; isolation:isolate;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease),
             color .35s var(--ease), background-color .35s var(--ease), border-color .35s;
}
.btn svg{ width:1.05em; height:1.05em; flex:none; }
.btn-primary{ color:#fff; box-shadow:0 14px 34px -14px rgba(201,21,95,.6); }
.btn-primary::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(104deg,var(--pink-deep),var(--pink) 52%,#FF87BC);
}
.btn-primary::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(104deg,#FF87BC,var(--pink) 48%,var(--pink-deep));
  transition:opacity .5s var(--ease);
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 22px 46px -16px rgba(201,21,95,.7); }
.btn-primary:hover::after{ opacity:1; }
.btn-primary:active{ transform:translateY(-1px); }

.btn-ghost{
  color:var(--ink); border:1px solid var(--line);
  background:rgba(255,255,255,.5); backdrop-filter:blur(8px);
}
.btn-ghost:hover{
  border-color:var(--pink); color:var(--pink-deep); background:#fff;
  transform:translateY(-3px); box-shadow:var(--shadow-soft);
}
.dark .btn-ghost{ color:var(--on-dark); border-color:var(--line-dark); background:rgba(255,255,255,.05); }
.dark .btn-ghost:hover{ color:var(--plum-900); background:var(--gold-light); border-color:var(--gold-light); }

.btn .sheen{
  position:absolute; top:0; left:-60%; width:40%; height:100%; z-index:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg); pointer-events:none;
}
.btn:hover .sheen{ animation:sheen 1.05s var(--ease-soft); }
@keyframes sheen{ to{ left:130%; } }

.tlink{
  position:relative; display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--label); font-size:.78rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--pink-deep);
  padding-bottom:.35em;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(.24); transform-origin:left;
  transition:transform .5s var(--ease);
}
.tlink:hover::after{ transform:scaleX(1); }
.tlink .arr{ transition:transform .45s var(--ease); }
.tlink:hover .arr{ transform:translateX(5px); }
.dark .tlink{ color:var(--gold-light); }

/* ---------- custom cursor ---------- */
.cursor,.cursor-dot{
  position:fixed; top:0; left:0; z-index:1200; pointer-events:none;
  border-radius:50%; mix-blend-mode:multiply; opacity:0; transition:opacity .3s;
}
.cursor{
  width:38px; height:38px; margin:-19px 0 0 -19px; border:1px solid var(--pink);
  transition:opacity .3s, width .35s var(--ease), height .35s var(--ease),
             margin .35s var(--ease), background-color .35s var(--ease), border-color .35s;
}
.cursor-dot{ width:5px; height:5px; margin:-2.5px 0 0 -2.5px; background:var(--pink-deep); }
.cursor.is-hover{
  width:74px; height:74px; margin:-37px 0 0 -37px;
  background:rgba(255,63,142,.12); border-color:transparent;
}
html.has-cursor,html.has-cursor a,html.has-cursor button{ cursor:none; }
@media (hover:none),(max-width:900px){ .cursor,.cursor-dot{ display:none; } }

/* ---------- scroll progress ---------- */
.progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:1100;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--gold),var(--pink),var(--pink-deep));
}

/* ==========================================================================
   PRELOADER — rose bloom
   ========================================================================== */
.preload{
  position:fixed; inset:0; z-index:1500;
  display:grid; place-items:center; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #FFE6F0 0%, #FFF1F6 42%, #FFE2EC 100%);
}
.pl-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(52% 44% at 50% 48%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(90% 70% at 50% 120%, rgba(201,21,95,.16), transparent 70%);
}

/* falling petals */
.pl-petals{ position:absolute; inset:0; pointer-events:none; }
.pl-petals i{
  position:absolute; top:-8vh; display:block;
  width:17px; height:22px;
  border-radius:74% 8% 74% 8%;
  background:
    radial-gradient(120% 100% at 18% 12%, rgba(255,255,255,.6), transparent 46%),
    linear-gradient(148deg,#FFC2DC,#FF5C9E 52%,#C9155F);
  opacity:0; filter:blur(.15px);
  box-shadow:0 5px 12px -7px rgba(201,21,95,.55);
  animation:plFall linear infinite;
}
.pl-petals i:nth-child(1){ left:6%;  animation-duration:6.5s; animation-delay:.0s;  transform:scale(.8); }
.pl-petals i:nth-child(2){ left:17%; animation-duration:8.0s; animation-delay:.9s;  transform:scale(1.1); }
.pl-petals i:nth-child(3){ left:28%; animation-duration:7.0s; animation-delay:.35s; transform:scale(.65); }
.pl-petals i:nth-child(4){ left:39%; animation-duration:9.0s; animation-delay:1.5s; transform:scale(.95); }
.pl-petals i:nth-child(5){ left:50%; animation-duration:6.8s; animation-delay:.6s;  transform:scale(.75); }
.pl-petals i:nth-child(6){ left:61%; animation-duration:8.4s; animation-delay:2.0s; transform:scale(1.05); }
.pl-petals i:nth-child(7){ left:72%; animation-duration:7.4s; animation-delay:.2s;  transform:scale(.7); }
.pl-petals i:nth-child(8){ left:82%; animation-duration:9.4s; animation-delay:1.1s; transform:scale(.9); }
.pl-petals i:nth-child(9){ left:91%; animation-duration:6.2s; animation-delay:1.8s; transform:scale(.6); }
.pl-petals i:nth-child(10){ left:46%; animation-duration:10s; animation-delay:2.6s; transform:scale(1.15); }
@keyframes plFall{
  0%{   opacity:0;  transform:translate3d(0,0,0) rotate(0deg) scale(.9); }
  8%{   opacity:.85; }
  50%{  transform:translate3d(34px,58vh,0) rotate(220deg) scale(.95); }
  85%{  opacity:.6; }
  100%{ opacity:0; transform:translate3d(-22px,118vh,0) rotate(460deg) scale(.85); }
}

/* stage */
.pl-stage{
  position:relative; z-index:2;
  display:grid; justify-items:center; gap:0;
  padding:clamp(2.2rem,6vw,3.4rem) clamp(2.4rem,7vw,4rem);
  width:min(400px,86vw);
}
.pl-frame{
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  opacity:0; animation:plFrame 1.1s var(--ease) .15s forwards;
}
@keyframes plFrame{ from{ opacity:0; transform:scale(1.06); } to{ opacity:1; transform:none; } }

/* rose */
.pl-rose{
  width:clamp(8.5rem,26vw,11.5rem); aspect-ratio:1;
  filter:drop-shadow(0 16px 30px rgba(201,21,95,.28));
}
.pl-glow{ animation:plGlow 3.2s ease-in-out infinite; transform-origin:50% 50%; }
@keyframes plGlow{ 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:1; transform:scale(1.06); } }

.pl-ring{  transform-origin:50% 50%; animation:spin 22s linear infinite; }
.pl-ring2{ transform-origin:50% 50%; animation:spin 16s linear infinite reverse; }

.pl-layer{ transform-origin:50% 50%; }
/* transparency lives on fill-opacity — the bloom keyframe animates `opacity`,
   and `opacity:inherit` in a keyframe would flatten these layers to 1. */
.pl-l1{ fill-opacity:.5; }
.pl-l2{ fill-opacity:.78; }
.pl-l3{ fill-opacity:1; }
.pl-l1{ animation:plBloom 1.5s var(--ease) .1s both, plSway 7s ease-in-out 1.6s infinite; }
.pl-l2{ animation:plBloom 1.5s var(--ease) .3s both, plSway 6s ease-in-out 1.8s infinite reverse; }
.pl-l3{ animation:plBloom 1.5s var(--ease) .5s both; }
@keyframes plBloom{
  from{ opacity:0; transform:scale(.2) rotate(-70deg); }
  to{   opacity:1; transform:none; }
}
@keyframes plSway{
  0%,100%{ transform:rotate(0deg) scale(1); }
  50%{     transform:rotate(7deg) scale(1.025); }
}

.pl-spiral{
  stroke-dasharray:60; stroke-dashoffset:60;
  animation:plDraw 1.5s var(--ease) .75s forwards;
}
@keyframes plDraw{ to{ stroke-dashoffset:0; } }

.pl-leaves{
  opacity:0; transform-origin:50% 76%;
  animation:plLeaves 1.1s var(--ease) .85s forwards;
}
@keyframes plLeaves{ from{ opacity:0; transform:scaleY(.2); } to{ opacity:1; transform:none; } }

.pl-sparks path{ transform-box:fill-box; transform-origin:50% 50%; }
.pl-sparks path:nth-child(1){ animation:plTwinkle 2.4s ease-in-out .9s infinite; }
.pl-sparks path:nth-child(2){ animation:plTwinkle 2.9s ease-in-out 1.4s infinite; }
.pl-sparks path:nth-child(3){ animation:plTwinkle 2.1s ease-in-out 1.8s infinite; }
@keyframes plTwinkle{
  0%,100%{ opacity:.25; transform:scale(.7) rotate(0deg); }
  50%{     opacity:1;   transform:scale(1.25) rotate(35deg); }
}

/* wordmark */
.pl-word{
  margin-top:1.15rem; display:flex; gap:.04em;
  font-family:var(--display); font-style:italic; font-weight:500;
  font-size:clamp(2.3rem,7vw,3.1rem); line-height:1; letter-spacing:-.02em;
  color:var(--ink);
}
.pl-word span{
  display:inline-block; opacity:0;
  animation:plLetter .85s var(--ease) forwards;
}
.pl-word span:nth-child(1){ animation-delay:.55s; }
.pl-word span:nth-child(2){ animation-delay:.65s; }
.pl-word span:nth-child(3){ animation-delay:.75s; }
.pl-word span:nth-child(4){ animation-delay:.85s; }
@keyframes plLetter{ from{ opacity:0; transform:translateY(18px) rotate(-6deg); } to{ opacity:1; transform:none; } }

.pl-sub{
  margin-top:.55rem;
  font-family:var(--label); font-size:.56rem; font-weight:500;
  letter-spacing:.38em; text-transform:uppercase; color:var(--ink-faint);
  opacity:0; animation:plFade .9s var(--ease) 1s forwards;
}
@keyframes plFade{ to{ opacity:1; } }

/* ornate bar */
.pl-bar{
  margin-top:1.6rem; display:flex; align-items:center; gap:.6rem;
  width:min(260px,64vw);
  opacity:0; animation:plFade .8s var(--ease) 1.05s forwards;
}
.pl-cap{
  width:9px; height:9px; flex:none; transform:rotate(45deg);
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  box-shadow:0 0 0 1px rgba(192,138,68,.35);
}
.pl-track{
  position:relative; flex:1; height:3px; overflow:hidden;
  background:rgba(192,138,68,.18);
  box-shadow:inset 0 0 0 1px rgba(192,138,68,.12);
}
.pl-track i{
  position:absolute; inset:0; display:block;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,#C08A44,#EECA96 28%,#FF5C9E 62%,#C9155F);
}
.pl-track::after{
  content:""; position:absolute; top:0; bottom:0; width:38%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  animation:plShimmer 1.9s var(--ease-soft) infinite;
}
@keyframes plShimmer{ 0%{ left:-40%; } 100%{ left:105%; } }

.pl-pct{
  margin-top:.75rem; display:flex; align-items:baseline; gap:.12em;
  font-family:var(--display); font-size:1.05rem; color:var(--pink-deep);
  opacity:0; animation:plFade .8s var(--ease) 1.15s forwards;
}
.pl-pct em{
  font-style:normal; font-family:var(--label); font-size:.58rem;
  letter-spacing:.2em; color:var(--ink-faint);
}

@media (prefers-reduced-motion:reduce){
  .pl-petals,.pl-sparks,.pl-track::after{ display:none; }
  .pl-rose,.pl-layer,.pl-word span,.pl-sub,.pl-bar,.pl-pct,.pl-frame,.pl-leaves,.pl-spiral{
    animation:none !important; opacity:1 !important; transform:none !important;
    stroke-dashoffset:0 !important;
  }
}

/* ---------- reveal primitives (pre-GSAP no-flash guards) ---------- */
.js [data-rise],.js [data-mask] > *{ opacity:0; }
.js [data-split]{ opacity:0; }
.no-js [data-rise],.no-js [data-split],.no-js [data-mask] > *{ opacity:1 !important; transform:none !important; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .grain,.sparkles{ display:none; }
  [data-rise],[data-split],[data-mask] > *{ opacity:1 !important; transform:none !important; }
}