/* ============================================================
   LASH LOFT · THE HEADSPA LOFT — serene luxury demo
   Design system
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* warm sand palette */
  --paper:      #F4EEE3;   /* page canvas */
  --cream:      #FBF7EF;   /* raised surfaces */
  --sand:       #E7DCCB;   /* soft fill */
  --sand-deep:  #DCCBB4;
  --blush:      #E3CFBE;   /* photographic blush */
  --espresso:   #2A241D;   /* near-black text / dark sections */
  --mocha:      #4C4234;
  --stone:      #8C8073;   /* muted text */
  --camel:      #B0875E;   /* primary accent */
  --clay:       #C18F6A;
  --olive:      #7E866B;   /* secondary, sparing */
  --gold:       #C9A86A;

  --line:       rgba(42,36,29,.14);
  --line-soft:  rgba(42,36,29,.08);
  --line-light: rgba(255,255,255,.16);

  --shadow-sm: 0 2px 20px rgba(42,36,29,.06);
  --shadow-md: 0 24px 60px -28px rgba(42,36,29,.30);
  --shadow-lg: 0 50px 110px -40px rgba(42,36,29,.45);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --container: 1320px;
  --gutter: clamp(20px, 5vw, 80px);

  --ff-display: "Cormorant Garamond", Georgia, serif;
  --ff-sans: "Jost", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--ff-sans);
  background:var(--paper);
  color:var(--espresso);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
::selection{ background:var(--camel); color:var(--cream); }

/* custom scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--paper); }
::-webkit-scrollbar-thumb{ background:var(--sand-deep); border-radius:20px; border:3px solid var(--paper); }

/* ---------- Typography ---------- */
.display{
  font-family:var(--ff-display);
  font-weight:300;
  line-height:.96;
  letter-spacing:-.01em;
}
.display em{ font-style:italic; }
h1,h2,h3{ font-weight:300; }

.eyebrow{
  font-family:var(--ff-sans);
  font-size:clamp(11px,1vw,12.5px);
  text-transform:uppercase;
  letter-spacing:.34em;
  font-weight:400;
  color:var(--camel);
  display:inline-flex;
  align-items:center;
  gap:.9em;
}
.eyebrow::before{
  content:"";
  width:34px; height:1px;
  background:currentColor;
  opacity:.6;
  display:inline-block;
}
.eyebrow.center::after{
  content:"";
  width:34px; height:1px;
  background:currentColor;
  opacity:.6;
  display:inline-block;
}

.lead{
  font-size:clamp(17px,1.45vw,20px);
  line-height:1.7;
  color:var(--mocha);
  font-weight:300;
  max-width:46ch;
}

/* ---------- Layout ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
section{ position:relative; }
.section-pad{ padding-block:clamp(80px,12vh,170px); }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--espresso); --fg:var(--cream);
  position:relative;
  display:inline-flex; align-items:center; gap:.8em;
  padding:1.05em 2em;
  background:var(--bg); color:var(--fg);
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:400;
  border-radius:999px;
  overflow:hidden;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease);
  isolation:isolate;
}
.btn span{ position:relative; z-index:2; }
.btn::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:var(--camel);
  transform:translateY(101%);
  transition:transform .55s var(--ease-out);
}
.btn:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.btn:hover::after{ transform:translateY(0); }
.btn.ghost{ --bg:transparent; --fg:var(--espresso); border:1px solid var(--line); }
.btn.ghost::after{ background:var(--espresso); }
.btn.ghost:hover{ --fg:var(--cream); }
.btn.light{ --bg:var(--cream); --fg:var(--espresso); }
.btn.on-dark.ghost{ --fg:var(--cream); border-color:var(--line-light); }

.link-underline{
  position:relative; display:inline-flex; align-items:center; gap:.6em;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  padding-bottom:4px;
}
.link-underline::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease-out);
}
.link-underline:hover::after{ transform:scaleX(1); transform-origin:left; }
.link-underline .arr{ transition:transform .4s var(--ease-out); }
.link-underline:hover .arr{ transform:translateX(5px); }

/* ---------- Reveal animations ----------
   IMPORTANT: hidden start-states are scoped under html.anim, which JS only adds
   when the document is actually visible and can animate. If JS doesn't run, the
   tab is in the background, reduced-motion is on, or the page is being captured,
   content stays fully visible instead of stuck at opacity:0. */
html.anim [data-reveal]{
  opacity:0;
  transform:translateY(34px);
  transition:opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
html.anim [data-reveal="fade"]{ transform:none; }
html.anim [data-reveal].in{ opacity:1; transform:none; }

.reveal-line{ display:block; overflow:hidden; }
html.anim .reveal-line > *{
  display:block;
  transform:translateY(112%);
  transition:transform 1.15s var(--ease-out);
  transition-delay:var(--d,0ms);
}
html.anim .reveal-line.in > *{ transform:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.001ms !important; }
  html.anim [data-reveal]{ opacity:1 !important; transform:none !important; }
  html.anim .reveal-line > *{ transform:none !important; }
}

/* ---------- Progress + cursor ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:100%;
  transform:scaleX(0); transform-origin:left; z-index:120;
  background:linear-gradient(90deg,var(--camel),var(--gold));
}
.cursor-dot{
  position:fixed; top:0; left:0; width:7px; height:7px; border-radius:50%;
  background:var(--espresso); pointer-events:none; z-index:200;
  transform:translate(-50%,-50%); transition:opacity .3s, background .3s;
  mix-blend-mode:multiply;
}
.cursor-ring{
  position:fixed; top:0; left:0; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--camel); pointer-events:none; z-index:200;
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease), height .35s var(--ease), opacity .3s, background .35s, border-color .35s;
}
.cursor-ring.hot{ width:64px; height:64px; background:rgba(176,135,94,.12); border-color:transparent; }
body.dark-cursor .cursor-dot{ background:var(--cream); mix-blend-mode:screen; }
@media (hover:none){ .cursor-dot,.cursor-ring{ display:none; } }