/* ============================================================
   NACRE — Eau de Parfum
   Liquid-chrome iridescent shader · scroll choreography
   ============================================================ */

:root{
  --ink:#f1ecf6;
  --ink-soft:#b8b0c8;
  --ink-faint:#766f88;
  --void:#06060a;
  --void-2:#0c0915;
  --plum-deep:#1a0f24;

  /* luxe palette — gold + lavender + pearl on near-black */
  --gold:#d4a85a;
  --gold-soft:#f0c989;
  --gold-deep:#a8823f;
  --lav:#b8a8e0;
  --lav-soft:#d4c8f0;
  --lav-deep:#7d6db5;
  --pearl:#f3ebda;

  --display:"Cormorant Garamond","Times New Roman",serif;
  --sans:"Space Grotesk",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html{ scrollbar-gutter:stable; }
body{
  min-height:100vh;
  overflow-x:hidden;
  cursor:none;
}
@media (max-width: 880px){ body{ cursor:auto; } }

::selection{ background:var(--gold); color:#05050a; }

img,svg{ display:block; max-width:100%; }

/* ============ SHADER CANVAS (full-bleed background) ============ */
canvas.fluid{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0;
  display:block;
  pointer-events:none;
  /* a soft fade from edges so type sits comfortably */
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 55%, transparent 100%);
}
/* fallback if WebGL fails */
body.no-shader canvas.fluid{ display:none; }
body.no-shader{
  background:
    radial-gradient(60% 50% at 22% 18%, rgba(184,168,224,.16), transparent 70%),
    radial-gradient(60% 50% at 78% 30%, rgba(212,168,90,.14), transparent 70%),
    radial-gradient(80% 60% at 50% 92%, rgba(125,109,181,.18), transparent 70%),
    var(--void);
}

/* ============ GRAIN ============ */
.grain{
  position:fixed; inset:-50%;
  z-index:80;
  pointer-events:none;
  opacity:.10;
  mix-blend-mode:overlay;
  background-image:
    radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.3) 1px, transparent 1px);
  background-size:3px 3px, 7px 7px;
  background-position:0 0, 1px 2px;
  animation: grain 1.6s steps(6) infinite;
}
@keyframes grain{
  0%  { transform:translate(0,0); }
  20% { transform:translate(-3%,2%); }
  40% { transform:translate(2%,-1%); }
  60% { transform:translate(-1%,3%); }
  80% { transform:translate(3%,-2%); }
  100%{ transform:translate(0,0); }
}

/* ============ CHROME CURSOR ============ */
.cursor{
  position:fixed; left:0; top:0;
  width:0; height:0;
  z-index:120;
  pointer-events:none;
  mix-blend-mode:difference;
  transform:translate3d(-100px,-100px,0);
}
.cursor__droplet{
  position:absolute;
  left:-9px; top:-9px;
  width:18px; height:18px; border-radius:50%;
  background:
    radial-gradient(circle at 30% 28%, var(--pearl) 0%, var(--lav-soft) 40%, var(--gold-soft) 75%, var(--gold-deep) 100%);
  filter: blur(.2px) saturate(1.1);
  transition: width .3s var(--ease), height .3s var(--ease), left .3s var(--ease), top .3s var(--ease);
}
.cursor__ring{
  position:absolute;
  left:-22px; top:-22px;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  opacity:.55;
  transition: width .35s var(--ease-out), height .35s var(--ease-out),
              left .35s var(--ease-out), top .35s var(--ease-out),
              opacity .35s var(--ease-out), border-color .35s var(--ease-out);
}
.cursor.is-grow .cursor__droplet{
  width:40px; height:40px; left:-20px; top:-20px;
}
.cursor.is-grow .cursor__ring{
  width:80px; height:80px; left:-40px; top:-40px;
  opacity:.95; border-color:rgba(255,255,255,.9);
}
@media (max-width:880px), (pointer:coarse){
  .cursor{ display:none; }
}

/* ============ CURTAIN (boot reveal) ============ */
.curtain{
  position:fixed; inset:0;
  background:var(--void);
  z-index:200;
  display:flex; align-items:center; justify-content:center;
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
}
.curtain__lines{
  font-family:var(--display);
  font-style:italic;
  font-size: clamp(1.6rem, 4.5vw, 3.4rem);
  line-height:1.18;
  letter-spacing:-.01em;
  text-align:center;
  color:transparent;
  background: linear-gradient(110deg, var(--lav) 0%, var(--pearl) 35%, var(--gold-soft) 60%, var(--gold) 90%);
  background-size:200% 200%;
  -webkit-background-clip:text;
          background-clip:text;
  animation: shimmer 5s linear infinite;
}
.curtain__line{
  opacity:0;
  transform:translateY(14px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
body:not(.boot) .curtain__line{ opacity:1; transform:none; }
body:not(.boot) .curtain__line:nth-child(1){ transition-delay:.20s; }
body:not(.boot) .curtain__line:nth-child(2){ transition-delay:.55s; }
body:not(.boot) .curtain__line:nth-child(3){ transition-delay:.90s; }
body.curtain-lift .curtain{
  opacity:0;
  transform:translateY(-3vh);
  pointer-events:none;
}
@keyframes shimmer{
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ============ TOPBAR ============ */
.topbar{
  position:fixed; top:0; left:0; right:0;
  z-index:90;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  padding: 22px clamp(20px,4vw,44px);
  font-family:var(--sans);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink);
  pointer-events:none;
}
.topbar > *{ pointer-events:auto; }
.topbar__mark{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color:inherit;
  font-weight:500;
}
.topbar__mark svg{ color:#fff; }
.topbar__edition{
  justify-self:center;
  color:var(--ink-faint);
  font-family:var(--mono);
  font-size:11px; letter-spacing:.22em;
}
.topbar__cta{
  justify-self:end;
  text-decoration:none; color:var(--ink);
  padding:9px 16px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  font-size:11px; letter-spacing:.22em;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.topbar__cta:hover{
  background:#fff; color:#05050a; border-color:#fff;
}
@media (max-width:720px){
  .topbar{ grid-template-columns: 1fr auto; }
  .topbar__edition{ display:none; }
}

/* ============ TYPE PRIMITIVES ============ */
.eyebrow{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-faint);
}
.display{
  font-family:var(--display);
  font-weight:300;
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  line-height:.98;
  letter-spacing:-.02em;
  color:var(--ink);
}
.display em{
  font-style:italic;
  background: linear-gradient(110deg, var(--lav) 0%, var(--pearl) 40%, var(--gold-soft) 70%, var(--gold) 100%);
  background-size:200% 200%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation: shimmer 6s linear infinite;
}
.lede{
  font-family:var(--sans);
  font-weight:300;
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  color:var(--ink-soft);
  line-height:1.6;
  max-width: 58ch;
}

[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* ============ HERO ============
   The bottle IS the hero. No headline, no body copy.
   A soft dark halo sits the bottle on the shader so it reads cleanly. */
.hero{
  position:relative;
  z-index:2;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(80px, 14vh, 140px) clamp(22px, 6vw, 64px) clamp(60px, 12vh, 120px);
}
.hero__product{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:100%;
  max-width: min(640px, 88vw);
  margin: 0 auto;
  will-change: transform;
}
/* a wide, soft dark halo behind the bottle — gives it air against the shader,
   plus a faint gold/lavender bloom for atmosphere */
.hero__product::before{
  content:"";
  position:absolute; inset:-22% -28%;
  background:
    radial-gradient(closest-side at 50% 56%, rgba(6,6,10,.78) 0%, rgba(6,6,10,.45) 38%, rgba(6,6,10,0) 72%),
    radial-gradient(closest-side at 50% 80%, rgba(212,168,90,.18) 0%, transparent 55%),
    radial-gradient(closest-side at 50% 40%, rgba(184,168,224,.12) 0%, transparent 60%);
  filter: blur(28px);
  z-index:-1;
  pointer-events:none;
}
.hero__product img{
  width:100%;
  height:auto;
  max-height: 82svh;
  object-fit:contain;
  filter:
    drop-shadow(0 30px 40px rgba(0,0,0,.55))
    drop-shadow(0 0 80px rgba(212,168,90,.18))
    drop-shadow(0 0 60px rgba(184,168,224,.14));
  animation: bottle-float 9s ease-in-out infinite;
}
@keyframes bottle-float{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}

.scrollcue{
  position:absolute;
  bottom: 32px;
  left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--mono);
  font-size:10px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-faint);
}
.scrollcue__line{
  display:block; width:1px; height:60px;
  background: linear-gradient(to bottom, rgba(255,255,255,.4), transparent);
  animation: cue 2.4s var(--ease) infinite;
  transform-origin: top;
}
@keyframes cue{
  0%   { transform: scaleY(0); }
  40%  { transform: scaleY(1); }
  100% { transform: scaleY(1) translateY(60px); opacity:0; }
}

/* ============ NOTES ============ */
.notes{
  position:relative;
  z-index:2;
  padding: clamp(80px, 14vh, 160px) clamp(22px, 6vw, 64px);
  background: linear-gradient(180deg, rgba(5,5,10,0) 0%, rgba(5,5,10,.55) 22%, rgba(5,5,10,.85) 100%);
}
.notes__head{
  max-width: 1180px;
  margin: 0 auto clamp(48px, 8vh, 80px);
}
.notes__head .display{ margin: .3em 0 .5em; max-width: 22ch; }
.notes__grid{
  max-width: 1180px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(24px, 3vw, 48px);
}
@media (max-width:880px){
  .notes__grid{ grid-template-columns: 1fr; }
}
/* Each note is the card. Canvas fills it as a background; text sits over
   the canvas and uses mix-blend-mode: difference so it adapts to whatever
   colour the shader is painting underneath. */
.note{
  position:relative;
  aspect-ratio: 3/4;
  border-radius: 16px;
  overflow:hidden;
  background:#08060f;
  box-shadow:
    0 30px 60px -40px rgba(212,168,90,.35),
    0 20px 50px -40px rgba(184,168,224,.30),
    inset 0 0 0 1px rgba(255,255,255,.06);
  isolation: isolate; /* contain the mix-blend-mode inside the card */
}
.note__bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0;
}
/* gentle darkening at top + bottom so the shader's brightest patches
   don't fight the text; the middle stays open for the colour to show */
.note__shade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.35) 0%,
      rgba(0,0,0,0)   28%,
      rgba(0,0,0,0)   62%,
      rgba(0,0,0,.50) 100%);
  z-index:1;
  pointer-events:none;
}
.note__content{
  position:relative;
  z-index:2;
  width:100%; height:100%;
  display:flex; flex-direction:column;
  padding: 22px 22px 24px;
  color:#fff;
  mix-blend-mode: difference;
}
.note__index{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.22em;
  color:#fff;
}
.note__title{
  font-family:var(--display);
  font-weight:400;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  line-height:1.08;
  margin-top: auto;   /* pushes title + body + list to the bottom of the card */
  margin-bottom:.5em;
}
/* mix-blend-mode handles the colour — em stays italic, plain white,
   the shader behind does the iridescent work */
.note__title em{
  font-style:italic;
  color:#fff;
}
.note__body{
  font-family:var(--sans);
  font-weight:300;
  font-size: .98rem;
  color:#fff;
  line-height:1.55;
  margin-bottom: 16px;
}
.note__list{
  list-style:none;
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:#fff;
  display:flex; flex-direction:column; gap:5px;
  border-top:1px solid rgba(255,255,255,.30);
  padding-top:12px;
}
@media (max-width:880px){
  .note{
    aspect-ratio: auto;
    min-height: 540px;
  }
}

/* ============ HOUSE ============ */
.house{
  position:relative;
  z-index:2;
  padding: clamp(80px,14vh,160px) clamp(22px,6vw,64px);
  background: rgba(5,5,10,.92);
}
.house__inner{
  max-width: 1080px;
  margin: 0 auto;
}
.house__title{
  max-width: 18ch;
  margin: .4em 0 1em;
}
.house__cols{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 60px);
}
.house__cols p{
  font-family:var(--sans);
  font-weight:300;
  font-size: 1.02rem;
  line-height:1.65;
  color:var(--ink-soft);
}
.house__cols b{ color:var(--ink); font-weight:500; }
@media (max-width:760px){
  .house__cols{ grid-template-columns: 1fr; }
}

/* ============ OBJECT (dossier) ============
   Bottle was already shown in the hero. Here it's text-only —
   the dossier behind the object. Shader breathes behind. */
.object{
  position:relative;
  z-index:2;
  padding: clamp(80px,14vh,160px) clamp(22px,6vw,64px) clamp(120px, 18vh, 200px);
  background: linear-gradient(180deg, rgba(5,5,10,.92), rgba(5,5,10,1));
  overflow:hidden;
}
.object__dossier{
  position:relative;
  max-width: 760px;
  margin: 0 auto;
  text-align:left;
}
.object__dossier .display{
  margin: .35em 0 .8em;
  max-width: 14ch;
}
.object__dossier .lede{
  margin-bottom: 8px;
  max-width: 56ch;
}
.object__rule{
  display:block;
  width:48px; height:1px;
  margin: 32px 0 22px;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.specs{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 28px;
  margin: 26px 0 36px;
  border-top:1px solid rgba(255,255,255,.12);
  padding-top: 22px;
}
.specs > div{
  display:flex; flex-direction:column; gap:4px;
  border-bottom:1px solid rgba(255,255,255,.06);
  padding-bottom:10px;
}
.specs dt{
  font-family:var(--mono);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint);
}
.specs dd{
  font-family:var(--sans);
  font-size:1rem;
  color:var(--ink);
  font-weight:400;
}
.object__cta{
  display:inline-flex; align-items:center; gap:12px;
  padding: 14px 22px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:999px;
  text-decoration:none;
  font-family:var(--mono);
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.object__cta:hover{
  background:#fff; color:#05050a; border-color:#fff;
}
.object__cta svg{ transition: transform .35s var(--ease); }
.object__cta:hover svg{ transform: translateX(4px); }

/* ============ FOOTER ============ */
.foot{
  position:relative;
  z-index:2;
  border-top: 1px solid rgba(255,255,255,.08);
  background: #05050a;
  padding: 28px clamp(22px,6vw,64px);
}
.foot__inner{
  max-width: 1180px;
  margin:0 auto;
  display:flex; align-items:center; gap: 18px;
  font-family:var(--mono);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint);
}
.foot__rule{
  flex: 1; height:1px;
  background:rgba(255,255,255,.10);
}
.foot__mark{
  font-family:var(--display); font-style:italic; font-size:14px;
  letter-spacing:.02em; text-transform:none;
  color:var(--ink);
}
.foot__back a{
  color:var(--ink-faint); text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,.18);
  padding-bottom:2px;
}
.foot__back a:hover{ color:var(--ink); border-color:var(--ink); }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .scrollcue, .grain{ display:none; }
  [data-reveal], .hero__title-glyph{ opacity:1 !important; transform:none !important; }
  body{ cursor:auto; }
  .cursor{ display:none; }
}