/* ============================================================
   RAVA — Monoï de Tahiti · warm artisan
   Stack: vanilla + GSAP/ScrollTrigger + Lenis
   Type: Newsreader (display, warm) + Inter (body)
   Durations follow Ayzz: hover 160ms · cards 240ms · reveals ~900ms
   ============================================================ */
:root{
  --cream:   #F6EFE2;
  --sand:    #EADFC4;
  --ink:     #221C12;
  --ink-soft:rgba(34,28,18,.62);
  --faint:   rgba(34,28,18,.34);
  --line:    rgba(34,28,18,.14);
  --amber:   #C98A3C;
  --green:   #3A5341;
  --tiare:   #FBF7EE;

  --display: "Newsreader", Georgia, serif;
  --body: "Inter", -apple-system, system-ui, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
  --pad: clamp(1.4rem,5vw,5rem);
}
*{ margin:0; padding:0; box-sizing:border-box; }
body{
  font-family:var(--body); background:var(--cream); color:var(--ink);
  font-size:16px; line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
::selection{ background:var(--amber); color:var(--cream); }
a{ color:inherit; text-decoration:none; }

/* ---------- CUSTOM CURSOR (cursor-follow technique) ---------- */
.cursor{
  position:fixed; top:0; left:0; width:14px; height:14px; border-radius:50%;
  background:var(--amber); pointer-events:none; z-index:300;
  transform:translate(-50%,-50%); mix-blend-mode:multiply;
  transition:width .22s var(--ease), height .22s var(--ease), background .22s var(--ease);
}
.cursor.is-hover{ width:54px; height:54px; background:rgba(201,138,60,.35); }
@media (hover:none){ .cursor{ display:none; } }

/* ---------- INTRO ---------- */
.intro{
  position:fixed; inset:0; z-index:200; background:var(--green);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.intro__word{
  font-family:var(--display); font-weight:500; color:var(--tiare);
  font-size:clamp(3rem,12vw,9rem); letter-spacing:.02em;
}

/* ---------- NAV ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem var(--pad);
}
.nav__brand{ font-family:var(--display); font-weight:600; font-size:1.5rem; letter-spacing:.02em; }
.nav__links{ display:flex; gap:2rem; }
.nav__links a{ font-size:.82rem; color:var(--ink-soft); transition:color .16s var(--ease); }
.nav__links a:hover{ color:var(--ink); }
.nav__cta{
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.7rem 1.2rem; border:1px solid var(--line); border-radius:100px;
  transition:background .24s var(--ease), color .24s var(--ease);
}
.nav__cta:hover{ background:var(--ink); color:var(--cream); }

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:0 var(--pad);
  overflow:hidden;
}
.hero > .hero__glow{
  position:absolute; width:80vw; height:80vw; max-width:900px; max-height:900px;
  border-radius:50%; filter:blur(80px); opacity:.5; z-index:0;
  background:radial-gradient(circle, rgba(201,138,60,.5), rgba(246,239,226,0) 65%);
  will-change:transform;
}
.hero > *{ position:relative; z-index:1; }
.hero__eyebrow{
  font-size:.76rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--amber); margin-bottom:1.6rem;
}
.hero__title{
  font-family:var(--display); font-weight:500;
  font-size:clamp(3.4rem,11vw,9rem); line-height:.96; letter-spacing:-.01em;
}
.hero__title em{ font-style:italic; font-weight:400; color:var(--green); }
.line{ display:block; overflow:hidden; }
.line > span{ display:block; will-change:transform; }
.hero__sub{
  margin:2rem auto 0; max-width:34rem; color:var(--ink-soft);
  font-size:clamp(1rem,1.6vw,1.18rem);
}
.hero__btn, .invite__btn{
  margin-top:2.4rem; display:inline-flex; align-items:center; gap:.7rem;
  padding:1.05rem 2rem; border-radius:100px; background:var(--ink); color:var(--cream);
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  transition:transform .16s var(--ease); will-change:transform;
}
.drop{
  position:absolute; bottom:8%; left:50%; transform:translateX(-50%);
  width:clamp(54px,8vw,86px); aspect-ratio:.8/1; z-index:1;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:radial-gradient(circle at 38% 30%, #FBEFD4 0%, #E2A857 38%, #B9772A 70%, #6E4717 100%);
  box-shadow:inset -6px -8px 18px rgba(110,71,23,.6), 0 18px 30px -12px rgba(110,71,23,.5);
  will-change:transform;
}
.drop__shine{
  position:absolute; top:16%; left:26%; width:26%; height:22%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.9), transparent 70%); filter:blur(1px);
}

/* ---------- shared eyebrow ---------- */
.eyebrow{ font-size:.76rem; letter-spacing:.22em; text-transform:uppercase; margin-bottom:1.6rem; }
.eyebrow--green{ color:var(--green); }

/* ---------- MANIFESTO ---------- */
.manifesto{ padding:clamp(7rem,18vh,13rem) var(--pad); max-width:60rem; margin:0 auto; }
.manifesto__line{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.7rem,4.4vw,3.2rem); line-height:1.3; letter-spacing:-.01em;
}
.word{ display:inline-block; overflow:hidden; vertical-align:top; }
.word > span{ display:inline-block; will-change:transform; }

/* ---------- INGREDIENTS (card hover) ---------- */
.ingr{ padding:clamp(4rem,10vh,8rem) var(--pad); }
.ingr__head{ border-top:1px solid var(--line); padding-top:2rem; margin-bottom:3.4rem; }
.ingr__title{ font-family:var(--display); font-weight:500; font-size:clamp(2rem,5vw,3.6rem); line-height:1; }
.ingr__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(1.2rem,2.5vw,2.4rem); }
.card{
  background:var(--tiare); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition:transform .24s var(--ease), box-shadow .24s var(--ease);
  will-change:transform;
}
.card:hover{ transform:translateY(-8px); box-shadow:0 30px 50px -28px rgba(110,71,23,.55); }
.card__disc{
  height:200px; display:grid; place-items:center;
  background:radial-gradient(circle at 42% 36%, var(--c1), var(--c2) 88%);
}
.card__disc::after{
  content:""; width:46%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, rgba(255,255,255,.5), transparent 60%);
  transition:transform .24s var(--ease);
}
.card:hover .card__disc::after{ transform:scale(1.12); }
.card__body{ padding:1.6rem; }
.card__n{ font-family:var(--display); color:var(--amber); font-size:.9rem; }
.card__body h3{ font-family:var(--display); font-weight:500; font-size:1.7rem; margin:.3rem 0 .6rem; }
.card__body p{ color:var(--ink-soft); font-size:.96rem; }

/* ---------- RITUEL (scrubbed steps) ---------- */
.ritual{ position:relative; }
.ritual__sticky{
  position:relative; min-height:100svh; display:grid; place-items:center;
  background:var(--green); padding:0 var(--pad);
}
.ritual__step{
  position:absolute; max-width:24rem; text-align:center;
  font-family:var(--display); font-style:italic; font-weight:400; color:var(--tiare);
  font-size:clamp(2rem,6vw,4.2rem); line-height:1.1; opacity:0;
}

/* ---------- INVITE ---------- */
.invite{ text-align:center; padding:clamp(7rem,16vh,12rem) var(--pad); display:flex; flex-direction:column; align-items:center; gap:1.2rem; }
.invite__title{ font-family:var(--display); font-weight:500; font-size:clamp(2.4rem,7vw,5.2rem); line-height:1; }
.invite__title em{ font-style:italic; color:var(--green); }
.invite__sub{ color:var(--ink-soft); max-width:30rem; }

/* ---------- FOOTER ---------- */
.foot{ border-top:1px solid var(--line); padding:3rem var(--pad); display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.foot__brand{ font-family:var(--display); font-weight:600; font-size:clamp(3rem,12vw,8rem); line-height:.8; }
.foot__cols{ display:flex; flex-direction:column; gap:.3rem; text-align:right; color:var(--faint); font-size:.84rem; }

[data-reveal]{ opacity:0; transform:translateY(34px); }

@media (max-width:820px){
  .nav__links{ display:none; }
  .cursor{ display:none; }
}
/* signature stays alive under reduced-motion (house rule) */
@media (prefers-reduced-motion:reduce){ .hero__glow{ animation-play-state:running !important; } }