/* ==========================================================================
   KR BEAUTY STUDIO — Design system
   « Cosy futurism » : la chaleur du studio (bois, velours terracotta, mur de
   fleurs) rencontre le néon rose de l'enseigne. Base sombre, accents lumineux.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root{
  /* Encres chaudes — échantillonnées sur le bois et les murs du studio */
  --ink:#120E0C;
  --ink-2:#181211;
  --ink-3:#201816;
  --ink-4:#2A201C;
  --surface:#1C1512;
  --surface-2:#241B17;

  /* Clairs */
  --cream:#F7F1E9;
  --cream-2:#E9DECF;
  --sand:#D9C7B2;
  --taupe:#A6968A;
  --muted:rgba(247,241,233,.60);
  --muted-2:rgba(247,241,233,.42);

  /* Rose signature — enseigne néon + mur de fleurs */
  --rose:#E58AA6;
  --rose-neon:#FF74AE;
  --rose-soft:#F3C2D0;
  --rose-deep:#A8425C;

  /* Or — luminaires et robinetterie */
  --gold:#C89A5B;
  --gold-2:#E8CD97;
  --gold-3:#F4E5C8;

  /* Terracotta — fauteuils velours */
  --clay:#B4604A;

  /* Rôles */
  --bg:var(--ink);
  --fg:var(--cream);
  --line:rgba(247,241,233,.13);
  --line-2:rgba(247,241,233,.07);

  /* Dégradés signature */
  --grad-signature:linear-gradient(115deg,
      var(--gold) 0%, var(--rose) 38%, var(--rose-neon) 60%, var(--gold-2) 100%);
  --grad-rose:linear-gradient(120deg,var(--rose-neon),var(--rose) 55%,var(--gold-2));
  --grad-gold:var(--grad-signature);
  /* Version bouclable du dégradé signature, pour les fonds animés.
     `--grad-signature` finit sur --gold-2 (clair) et repart de --gold (foncé) :
     répété par l'animation, ce saut dessinait une bande sombre qui traversait
     les boutons. Ici les deux extrémités sont identiques et l'axe est
     horizontal, ce qui rend la couture invisible. */
  --grad-flow:linear-gradient(90deg,
      var(--gold) 0%, var(--gold-2) 13%, var(--rose) 34%, var(--rose-neon) 50%,
      var(--rose) 66%, var(--gold-2) 87%, var(--gold) 100%);
  --grad-aurora:
    radial-gradient(58% 58% at 18% 22%,rgba(255,116,174,.42),transparent 66%),
    radial-gradient(52% 52% at 82% 28%,rgba(232,205,151,.32),transparent 66%),
    radial-gradient(66% 66% at 52% 88%,rgba(180,96,74,.34),transparent 70%);

  /* Halos */
  --glow-rose:0 0 42px rgba(255,116,174,.30);
  --glow-gold:0 0 38px rgba(232,205,151,.26);

  /* Typo */
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;

  /* Rythme */
  --shell:1240px;
  --gut:clamp(1.25rem,4vw,2.75rem);
  --sec:clamp(4.5rem,10vw,9rem);
  --r-lg:18px;
  --r-xl:28px;

  /* Mouvement */
  --ease:cubic-bezier(.22,.68,0,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
}

/* --- 2. Reset ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* `clip` plutôt que `hidden` : bloque tout débordement latéral résiduel
   sans casser `position: sticky` sur les descendants. */
html{-webkit-text-size-adjust:100%;background:var(--ink);overflow-x:clip}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ul,ol,address{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
address{font-style:normal}
::selection{background:var(--rose-neon);color:var(--ink)}
:focus-visible{outline:2px solid var(--rose-neon);outline-offset:3px;border-radius:2px}

html{scroll-behavior:smooth;scroll-padding-top:120px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
    animation-iteration-count:1!important;
  }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.72;
  letter-spacing:.005em;
  /* `clip` et non `hidden` : `overflow-x:hidden` force `overflow-y:auto`,
     ce qui ferait du body un conteneur de défilement et casserait
     `position:sticky` sur la colonne latérale des pages de soin. */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}

/* Voile lumineux global qui suit le curseur */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,-20%),
             rgba(255,116,174,.075),transparent 62%);
  opacity:0;transition:opacity .6s var(--ease);
}
body.has-pointer::after{opacity:1}

.skip{
  position:fixed;top:-100px;left:1rem;z-index:9999;
  background:var(--rose-neon);color:var(--ink);padding:.75rem 1.25rem;transition:top .3s;
}
.skip:focus{top:1rem}

/* --- 3. Typographie ----------------------------------------------------- */
h1,h2,h3,h4,h5,h6{font-weight:300;line-height:1.08;letter-spacing:-.015em}

.display{
  font-family:var(--sans);
  font-size:clamp(2.4rem,1.1rem + 5.4vw,5.6rem);
  font-weight:200;
  line-height:.97;
  letter-spacing:-.038em;
  text-wrap:balance;
}
.display em,.h2 em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.005em;
  background:var(--grad-flow);
  background-size:230% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:shimmer 9s linear infinite;
}
@keyframes shimmer{to{background-position:230% 0}}

.h2{
  font-size:clamp(1.9rem,1.1rem + 2.6vw,3.5rem);
  font-weight:200;letter-spacing:-.032em;line-height:1.03;text-wrap:balance;
}
.h3{font-size:clamp(1.35rem,1.05rem + 1.1vw,1.95rem);font-weight:300;letter-spacing:-.02em}
.h4{font-size:clamp(1.1rem,1rem + .5vw,1.35rem);font-weight:400;letter-spacing:-.01em}

.eyebrow{
  font-size:.7rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;
  color:var(--rose);display:flex;align-items:center;gap:.85rem;margin-bottom:1.4rem;
}
.eyebrow::before{
  content:"";width:clamp(22px,3vw,44px);height:1px;flex:none;
  background:linear-gradient(90deg,transparent,var(--rose-neon));
}
.eyebrow--gold{color:var(--gold-2)}
.eyebrow--gold::before{background:linear-gradient(90deg,transparent,var(--gold-2))}

.lead{
  font-size:clamp(1.05rem,1rem + .35vw,1.2rem);
  color:var(--muted);max-width:62ch;line-height:1.75;
}
.serif{font-family:var(--serif);font-style:italic;font-weight:400}
.muted{color:var(--muted)}

.prose p{margin-bottom:1.15em;color:rgba(247,241,233,.74)}
.prose p:last-child{margin-bottom:0}
.rich-list{display:grid;gap:.6rem;margin:0 0 1.15em;padding:0}
.rich-list li{position:relative;padding-left:1.6rem;color:rgba(247,241,233,.74)}
.rich-list li::before{
  content:"";position:absolute;left:0;top:.66em;width:7px;height:7px;border-radius:50%;
  background:var(--grad-rose);box-shadow:0 0 0 3px rgba(255,116,174,.14),var(--glow-rose);
}

/* --- 4. Layout ---------------------------------------------------------- */
.shell{width:min(100% - var(--gut)*2,var(--shell));margin-inline:auto;position:relative;z-index:2}
.shell--wide{width:min(100% - var(--gut)*2,1500px)}

.section{padding-block:var(--sec);position:relative}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}

/* Panneaux de tonalité — le fond reste sombre, la nuance change */
.tone-deep{background:var(--ink)}
/* Bandes teintées volontairement translucides : l'atmosphère WebGL du fond
   respire au travers. Sans elle (reduced-motion, pas de WebGL), elles se
   composent sur --bg et retrouvent leur teinte pleine d'origine. */
.tone-raise{background:rgba(24,18,17,.88)}
.tone-panel{background:var(--surface)}
.dark{background:rgba(24,18,17,.92)}

/* Rare respiration claire */
.tone-cream{
  background:var(--cream);color:var(--ink);
  --fg:var(--ink);
  --muted:rgba(18,14,12,.62);
  --line:rgba(18,14,12,.12);
  --line-2:rgba(18,14,12,.07);
}
.tone-cream .prose p,.tone-cream .rich-list li{color:rgba(18,14,12,.76)}
.tone-cream .eyebrow{color:var(--rose-deep)}

.section-head{max-width:70ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section-head .lead{margin-top:1.4rem}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .eyebrow{justify-content:center}
.section-head--center .eyebrow::after{
  content:"";width:clamp(22px,3vw,44px);height:1px;flex:none;
  background:linear-gradient(270deg,transparent,var(--rose-neon));
}
.section-head--center .lead{margin-inline:auto}

.grid{display:grid;gap:clamp(1.25rem,2.5vw,2rem)}
.split{display:grid;gap:clamp(2.5rem,6vw,5rem);align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split--wide{grid-template-columns:1.08fr .92fr}
}

/* Filet lumineux de séparation */
.hr-glow{height:1px;border:0;margin:0;background:linear-gradient(90deg,
  transparent,rgba(255,116,174,.45) 30%,rgba(232,205,151,.45) 70%,transparent)}

/* --- 5. Boutons --------------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.05rem 2.1rem;border-radius:100px;
  font-size:.76rem;font-weight:500;letter-spacing:.19em;text-transform:uppercase;
  overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease),transform .35s var(--ease-back),box-shadow .4s var(--ease),border-color .4s var(--ease);
  will-change:transform;
}
.btn span{position:relative;z-index:2}
.btn--sm{padding:.8rem 1.5rem;font-size:.7rem}
.btn:active{transform:scale(.97)}

/* Bouton signature : dégradé or→rose + halo néon */
.btn--gold{
  color:var(--ink);
  background:var(--grad-flow);background-size:220% 100%;
  box-shadow:0 10px 32px -12px rgba(255,116,174,.7),var(--glow-rose);
  animation:btnFlow 7s linear infinite;
}
@keyframes btnFlow{to{background-position:220% 0}}
.btn--gold::after{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform .5s var(--ease);z-index:1;
}
.btn--gold:hover{color:var(--rose-soft);box-shadow:0 20px 46px -14px rgba(255,116,174,.6),0 0 60px rgba(255,116,174,.35)}
.btn--gold:hover::after{transform:translateY(0)}

.btn--ghost{border:1px solid var(--line);color:var(--fg)}
.btn--ghost::after{
  content:"";position:absolute;inset:0;background:var(--grad-signature);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:1;
}
.btn--ghost:hover{color:var(--ink);border-color:transparent}
.btn--ghost:hover::after{transform:scaleX(1)}

.btn--dark{background:var(--cream);color:var(--ink)}
.btn--dark::after{
  content:"";position:absolute;inset:0;background:var(--grad-signature);
  transform:translateY(101%);transition:transform .5s var(--ease);z-index:1;
}
.btn--dark:hover{color:var(--ink)}
.btn--dark:hover::after{transform:translateY(0)}

.btn-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}

.link-arrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--rose);
}
.link-arrow::after{
  content:"";width:26px;height:1px;background:currentColor;
  transition:width .45s var(--ease),box-shadow .45s var(--ease);
}
.link-arrow:hover::after{width:46px;box-shadow:var(--glow-rose)}

/* --- 6. Texture & loader ------------------------------------------------ */
.grain{
  position:fixed;inset:-50%;z-index:9998;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  17%{transform:translate(-4%,-3%)}
  33%{transform:translate(3%,-5%)}
  50%{transform:translate(-3%,4%)}
  67%{transform:translate(4%,3%)}
  83%{transform:translate(-5%,-2%)}
}

.loader{
  position:fixed;inset:0;z-index:9997;
  display:grid;place-content:center;justify-items:center;
  gap:clamp(2rem,5vmin,3.2rem);
  background:radial-gradient(120% 100% at 50% 45%,#1D1412 0%,#0C0908 72%);
  transition:opacity .9s var(--ease),visibility .9s,transform .9s var(--ease),filter .9s var(--ease);
}

/* Halo rose respirant */
.loader__glow{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:min(120vw,1000px);aspect-ratio:2/1;border-radius:50%;
  background:
    radial-gradient(50% 60% at 50% 50%,rgba(255,116,174,.5),transparent 70%),
    radial-gradient(40% 50% at 22% 40%,rgba(232,205,151,.28),transparent 70%);
  filter:blur(90px);
  animation:loaderGlow 4.2s var(--ease-soft) infinite alternate;
}
@keyframes loaderGlow{
  from{transform:scale(.85);opacity:.3}
  to{transform:scale(1.1);opacity:.55}
}

/* --- Lettrage --- */
.loader__title{
  position:relative;
  display:grid;justify-items:center;gap:clamp(.3rem,1.4vmin,.9rem);
  padding:clamp(1.6rem,5vmin,3rem);
}

.loader__kr,.loader__ws{display:flex;align-items:baseline;justify-content:center}

.loader__kr{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(3.4rem,15vmin,7.5rem);line-height:1;letter-spacing:.01em;
}
.loader__ws{
  font-family:var(--sans);font-weight:200;
  font-size:clamp(.85rem,3.4vmin,1.75rem);
  letter-spacing:clamp(.18em,.9vmin,.34em);text-indent:clamp(.18em,.9vmin,.34em);
}
.loader__ws .gap{width:clamp(.6em,2vmin,1em)}

/* Chaque lettre s'allume en cascade, en rose */
.loader__title .ltr{
  display:inline-block;
  background:linear-gradient(180deg,#FFF0F5 0%,#FF74AE 42%,#E58AA6 72%,#E8CD97 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,116,174,.55));
  opacity:0;transform:translateY(.32em) scale(.86);
  animation:ltrIn .9s var(--ease-back) forwards,
            ltrShine 3.4s var(--ease-soft) infinite;
  animation-delay:calc(var(--i)*90ms),calc(var(--i)*90ms + 900ms);
}
@keyframes ltrIn{
  0%{opacity:0;transform:translateY(.32em) scale(.86);filter:drop-shadow(0 0 0 rgba(255,116,174,0)) blur(4px)}
  60%{opacity:1;filter:drop-shadow(0 0 34px rgba(255,116,174,.95)) blur(0)}
  100%{opacity:1;transform:none;filter:drop-shadow(0 0 18px rgba(255,116,174,.55))}
}
@keyframes ltrShine{
  0%,100%{filter:drop-shadow(0 0 16px rgba(255,116,174,.45))}
  50%{filter:drop-shadow(0 0 30px rgba(255,116,174,.9))}
}

/* --- Paillettes --- */
.loader__sparks{position:absolute;inset:0;display:block;pointer-events:none}
.spark{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--s);height:var(--s);translate:-50% -50%;
  color:#FFE9F2;
  opacity:0;
  animation:sparkPop 2.8s var(--ease-soft) infinite;
  animation-delay:var(--d);
}
/* Étoile à quatre branches, dessinée en CSS */
.spark::before,.spark::after{
  content:"";position:absolute;inset:0;background:currentColor;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  filter:drop-shadow(0 0 6px rgba(255,116,174,.95));
}
.spark::after{transform:rotate(45deg) scale(.55);opacity:.75}
@keyframes sparkPop{
  0%,100%{opacity:0;transform:scale(.2) rotate(0deg)}
  12%{opacity:1;transform:scale(1.15) rotate(35deg)}
  34%{opacity:.5;transform:scale(.85) rotate(70deg)}
  55%{opacity:0;transform:scale(.3) rotate(110deg)}
}

/* Traînée lumineuse qui balaie le lettrage */
.loader__title::after{
  content:"";position:absolute;top:0;bottom:0;width:35%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  filter:blur(6px);pointer-events:none;
  animation:titleSweep 3.6s var(--ease-soft) infinite;
}
@keyframes titleSweep{
  0%{transform:translateX(-140%);opacity:0}
  25%{opacity:1}
  70%,100%{transform:translateX(400%);opacity:0}
}

/* Jauge */
.loader__meter{display:flex;align-items:center;gap:.9rem}
.loader__bar{
  position:relative;width:min(230px,42vw);height:2px;
  background:rgba(247,241,233,.09);border-radius:2px;overflow:hidden;
}
.loader__bar i{
  position:absolute;inset:0;display:block;transform-origin:left;
  transform:scaleX(var(--p,0));
  background:var(--grad-signature);box-shadow:var(--glow-rose);
  transition:transform .45s var(--ease);
}
.loader__pct{
  font-size:.68rem;letter-spacing:.16em;color:var(--muted-2);
  font-variant-numeric:tabular-nums;min-width:3ch;
}
.loader__pct::after{content:"%";opacity:.55;margin-left:.15em}

/* Sortie : le monogramme s'ouvre et l'écran se dissipe */
.is-loaded .loader{opacity:0;visibility:hidden;transform:scale(1.06);filter:blur(6px)}
.is-loaded .loader__mark{transform:scale(1.5);opacity:0;filter:blur(3px)}

.no-js .loader{display:none}

@media (prefers-reduced-motion:reduce){
  .loader__wave,.loader__orbit{display:none}
}

/* Barre de progression de lecture */
.progress{
  position:fixed;top:0;left:0;height:2px;z-index:9996;
  width:100%;transform:scaleX(var(--p,0));transform-origin:left;
  background:var(--grad-signature);box-shadow:var(--glow-rose);
  pointer-events:none;
}

/* --- 7. Reveal ---------------------------------------------------------- */
.js .reveal{
  opacity:0;transform:translateY(38px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
.js .reveal.in{opacity:1;transform:none}

.js [data-stagger]>*{
  opacity:0;transform:translateY(30px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
  transition-delay:calc(var(--i,0)*80ms);
}
.js [data-stagger].in>*{opacity:1;transform:none}

.js .reveal-mask{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)}
.js .reveal-mask.in{clip-path:inset(0 0 0 0)}

/* Révélation de titre mot par mot */
.js .split-word{display:inline-block;overflow:hidden;vertical-align:top}
.js .split-word>i{
  display:inline-block;font-style:inherit;
  transform:translateY(105%);
  transition:transform .95s var(--ease);
  transition-delay:calc(var(--w,0)*55ms);
}
.js .in .split-word>i,.js .split-word.in>i{transform:none}
/* Sur mobile, le glissement mot à mot est supprimé : le titre se lève d'un
   bloc avec sa section.
   Deux raisons. Le titre passe sur plusieurs lignes, donc la cascade s'étirait
   sur plus d'une seconde. Surtout, le mot en italique n'a pas de couleur
   propre : il est peint par un dégradé `background-clip:text` ancré sur le
   <em>. Pendant qu'il glisse de 105 %, ses glyphes sortent de la zone peinte
   et il reste invisible jusqu'à l'atterrissage — il arrivait donc toujours en
   dernier, même avec un délai nul. La cascade reste sur grand écran, où le
   titre tient sur une ou deux lignes. */
@media (max-width:1023px){
  .js .split-word{overflow:visible}
  .js .split-word>i{transform:none;transition:none}
}

/* Volet d'image qui se retire */
.js .shutter{position:relative;overflow:hidden}
.js .shutter::after{
  content:"";position:absolute;inset:0;z-index:4;background:var(--ink);
  transform-origin:right;transition:transform 1.1s var(--ease);
}
.js .shutter.in::after{transform:scaleX(0)}
.js .shutter img{transform:scale(1.18);transition:transform 1.6s var(--ease)}
.js .shutter.in img{transform:scale(1)}

/* --- Atmosphère de fond (WebGL) ----------------------------------------- */
/* z-index négatif : la couche passe au-dessus du fond du body mais reste
   derrière tout le contenu, y compris les bandes translucides. */
.atmos{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:-1;pointer-events:none;
  opacity:0;transition:opacity 2.4s var(--ease);
}
.atmos.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){.atmos{display:none}}