/* ============================================================
   POE — Maison de perles noires de Tahiti
   Reference build · agency tier
   Stack: vanilla + GSAP/ScrollTrigger + Lenis
   Type:  Fraunces (display), Inter (body) — self-hosted
   ============================================================ */

:root{
  --ink:      #07090C;
  --ink-2:    #0B0F14;
  --bone:     #ECE6DA;
  --mist:     rgba(236,230,218,.56);
  --faint:    rgba(236,230,218,.30);
  --line:     rgba(236,230,218,.12);
  --gold:     #D8B36A;
  --teal:     #9FE6D8;

  --display: "Fraunces", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);     /* the one curve, everywhere */
  --pad: clamp(1.4rem, 5vw, 5rem);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--body);
  background:var(--ink);
  color:var(--bone);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Lenis */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

::selection{ background:var(--gold); color:var(--ink); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---------- INTRO ---------- */
.intro{
  position:fixed; inset:0; z-index:200;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.intro__line{
  position:absolute; left:var(--pad); right:var(--pad); top:50%;
  height:1px; background:var(--line); transform:scaleX(0); transform-origin:left;
}
.intro__count{
  display:flex; gap:.9rem; align-items:baseline;
  font-family:var(--display); font-weight:600; letter-spacing:.04em;
  font-size:clamp(1.1rem,2.4vw,1.6rem); color:var(--mist);
}
.intro__count span:last-child{ color:var(--bone); }

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem var(--pad);
  mix-blend-mode:difference;
}
.nav__brand{
  font-family:var(--display); font-weight:900; font-size:1.5rem;
  letter-spacing:.06em;
}
.nav__links{ display:flex; gap:2.2rem; }
.nav__links a{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mist); transition:color .4s var(--ease);
}
.nav__links a:hover{ color:var(--bone); }
.nav__cta{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.65rem 1.2rem; border:1px solid var(--line); border-radius:100px;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.nav__cta:hover{ border-color:var(--bone); }

/* ============================================================
   THE PEARL — the one signature object
   ============================================================ */
.pearl{
  position:relative;
  width:min(46vw, 30rem); aspect-ratio:1;
  display:grid; place-items:center;
  will-change:transform;
}
.pearl__bloom{
  position:absolute; inset:-30%;
  background:radial-gradient(circle at 50% 45%,
    rgba(159,230,216,.22), rgba(107,79,138,.16) 38%, transparent 64%);
  filter:blur(28px);
  will-change:opacity,transform;
}
.pearl__orb{
  position:relative; width:100%; height:100%;
  border-radius:50%;
  background:
    radial-gradient(circle at 34% 28%,
      #f3efe6 0%, #cdd6cf 9%, #7fa39a 24%,
      #2f6f68 44%, #2a3550 66%, #11131c 86%, #090a10 100%);
  box-shadow:
    inset -14px -18px 46px rgba(0,0,0,.78),
    inset 20px 22px 40px rgba(159,230,216,.10),
    0 40px 80px -30px rgba(0,0,0,.9);
  overflow:hidden;
  isolation:isolate;
}
/* iridescent peacock film — soft offset sheens, no conic seam */
.pearl__iris{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 26%, rgba(159,230,216,.42), transparent 44%),
    radial-gradient(circle at 73% 70%, rgba(120,90,170,.34), transparent 48%),
    radial-gradient(circle at 60% 42%, rgba(216,179,106,.22), transparent 52%),
    radial-gradient(circle at 48% 82%, rgba(46,111,104,.30), transparent 50%);
  mix-blend-mode:screen;
  opacity:.66;
  filter:blur(11px) saturate(1.1);
  will-change:filter;
}
/* moving specular highlight (JS-driven) */
.pearl__spec{
  position:absolute;
  left:30%; top:22%;
  width:30%; height:30%;
  background:radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,.25) 35%, transparent 60%);
  filter:blur(3px);
  mix-blend-mode:screen;
  will-change:left,top,transform;
}
/* fine grain for richness */
.pearl__grain{
  position:absolute; inset:0; opacity:.10; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pearl__contact{
  position:absolute; bottom:-6%; left:50%; transform:translateX(-50%);
  width:64%; height:7%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.7), transparent 70%);
  filter:blur(10px);
}

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
}
.hero__stage{
  position:relative; width:100%;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1.3rem,4vh,2.6rem);
  text-align:center;
  padding:0 var(--pad);
}
.hero__word{
  font-family:var(--display); font-weight:900;
  font-size:clamp(4.5rem, 17vw, 13rem);
  line-height:.82; letter-spacing:-.02em;
  display:flex; align-items:center; justify-content:center; gap:.03em;
  color:var(--bone);
}
.hero__char{ display:inline-block; will-change:transform; }
/* the pearl IS the O */
.hero__o{
  display:inline-grid; place-items:center; position:relative;
  width:.86em; height:.86em; vertical-align:middle;
  will-change:transform;
}
.hero__o .pearl{ width:100%; }
.hero__eyebrow{
  display:flex; gap:.7rem; justify-content:center;
  font-size:.74rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--mist);
}
.hero__eyebrow .dot{ color:var(--gold); }
.hero__sub{
  max-width:30rem;
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:clamp(1.05rem,2.2vw,1.5rem); color:var(--bone);
}
.hero__scrollcue{
  position:absolute; bottom:1.8rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--faint);
}
.hero__scrollcue i{
  width:1px; height:34px;
  background:linear-gradient(var(--mist), transparent);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{
  0%{ transform:scaleY(0); transform-origin:top; }
  40%{ transform:scaleY(1); transform-origin:top; }
  60%{ transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* ---------- MANIFESTO ---------- */
.manifesto{
  padding:clamp(8rem,22vh,16rem) var(--pad);
  max-width:64rem; margin:0 auto;
}
.manifesto__eyebrow,
.collection__eyebrow,
.invite__eyebrow{
  font-size:.74rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold); margin-bottom:2rem;
}
.manifesto__line{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.7rem, 4.6vw, 3.4rem);
  line-height:1.28; letter-spacing:-.01em;
}
.word{ display:inline-block; overflow:hidden; vertical-align:top; }
.word > span{ display:inline-block; will-change:transform; }

/* ---------- ORIGINE / STORY ---------- */
.story{ position:relative; }
.story__sticky{
  position:relative; min-height:100svh;
  display:grid; grid-template-columns:1fr 1fr; align-items:center;
  gap:2rem; padding:0 var(--pad);
}
.story .pearl--story{
  width:min(38vw,28rem); justify-self:center;
}
.story__captions{ position:relative; height:18rem; }
.story__cap{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:1rem;
  justify-content:center; max-width:26rem;
  opacity:0;
}
.story__num{
  font-family:var(--display); font-weight:600; color:var(--gold);
  font-size:.9rem; letter-spacing:.1em;
}
.story__cap h2{
  font-family:var(--display); font-weight:900;
  font-size:clamp(2.2rem,5vw,3.6rem); line-height:1;
}
.story__cap p{ color:var(--mist); font-size:1.02rem; max-width:24rem; }

/* ---------- COLLECTION ---------- */
.collection{ padding:clamp(6rem,14vh,11rem) var(--pad); }
.collection__head{
  display:flex; flex-direction:column; gap:.4rem;
  margin-bottom:4rem; border-top:1px solid var(--line); padding-top:2rem;
}
.collection__title{
  font-family:var(--display); font-weight:900;
  font-size:clamp(2.2rem,6vw,4.5rem); line-height:1; letter-spacing:-.02em;
}
.collection__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap:clamp(1.4rem,3vw,3rem);
}
.piece{ cursor:pointer; }
.piece__visual{
  position:relative; aspect-ratio:4/5; border-radius:4px; overflow:hidden;
  background:linear-gradient(160deg,#0E141A,#080A0E);
  display:grid; place-items:center;
  border:1px solid var(--line);
}
.piece__pearl{
  width:48%; aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(circle at 36% 30%,
      #f1ede4 0%, #c7d0c9 10%, var(--h1,#2f6f68) 40%,
      var(--h2,#2a3550) 70%, #0b0d12 100%);
  box-shadow:inset -8px -10px 26px rgba(0,0,0,.7), 0 24px 40px -20px rgba(0,0,0,.8);
  transition:transform 1s var(--ease);
}
.piece:hover .piece__pearl{ transform:scale(1.06) translateY(-2%); }
.piece__visual::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 36% 30%, rgba(159,230,216,.16), transparent 55%);
  opacity:0; transition:opacity .8s var(--ease);
}
.piece:hover .piece__visual::after{ opacity:1; }
.piece__meta{ display:flex; flex-direction:column; gap:.25rem; padding:1.1rem 0; }
.piece__meta h3{ font-family:var(--display); font-weight:700; font-size:1.4rem; }
.piece__meta span{ color:var(--faint); font-size:.86rem; }

/* ---------- INVITE / CTA ---------- */
.invite{
  text-align:center; padding:clamp(8rem,20vh,15rem) var(--pad);
  display:flex; flex-direction:column; align-items:center; gap:1.4rem;
}
.invite__title{
  font-family:var(--display); font-weight:900;
  font-size:clamp(2.6rem,8vw,6rem); line-height:1; letter-spacing:-.02em;
}
.invite__title em{ font-style:italic; font-weight:900; color:var(--teal); }
.invite__sub{ color:var(--mist); max-width:30rem; }
.invite__btn{
  margin-top:1.4rem; display:inline-flex; align-items:center; gap:.9rem;
  padding:1.1rem 2rem; border:1px solid var(--mist); border-radius:100px;
  font-size:.8rem; letter-spacing:.18em; text-transform:uppercase;
  overflow:hidden; position:relative; transition:color .5s var(--ease);
}
.invite__btn i{
  width:6px; height:6px; border-radius:50%; background:var(--gold);
  transition:transform .5s var(--ease);
}
.invite__btn::before{
  content:""; position:absolute; inset:0; background:var(--bone);
  transform:translateY(101%); transition:transform .6s var(--ease); z-index:-1;
}
.invite__btn:hover{ color:var(--ink); border-color:var(--bone); }
.invite__btn:hover::before{ transform:translateY(0); }
.invite__btn:hover i{ transform:translateX(4px); background:var(--ink); }

/* ---------- 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:900; font-size:clamp(3rem,12vw,9rem); line-height:.8; }
.foot__cols{ display:flex; flex-direction:column; gap:.4rem; text-align:right; color:var(--faint); font-size:.84rem; }

/* ---------- REVEAL BASE (JS adds .in) ---------- */
[data-reveal]{ opacity:0; transform:translateY(30px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:880px){
  .nav__links{ display:none; }
  .story__sticky{ grid-template-columns:1fr; gap:2.4rem; padding-top:12vh; align-content:center; text-align:center; }
  .story .pearl--story{ width:60vw; }
  .story__captions{ height:13rem; }
  .story__cap{ align-items:center; }
  .hero__word{ font-size:clamp(3.2rem, 21vw, 7rem); flex-wrap:nowrap; }
  .hero__o{ width:.9em; height:.9em; }
}

/* Reduced motion: the maison stays alive — the signature object keeps its
   light. We only calm the page-level scrubbing, never freeze the pearl.
   (Per house rule: quality > motion-accessibility default for the signature.) */
@media (prefers-reduced-motion:reduce){
  .pearl__spec, .pearl__iris{ animation-play-state:running !important; }
}