/* ============================================================
   JOYLAND — one product, one page, one strong moment.

   Two rules hold the whole thing together:

   1. Nothing is displayed wider than its source, with one
      deliberate exception — the hero clip, upscaled 2x and then
      graded down hard. Below ~55% brightness, behind a vignette
      and grain, softness reads as cinema instead of blur.
   2. The hero is the only loud thing. Everything after it is
      quiet on purpose.
   ============================================================ */
:root{
  --ink:       #07050A;
  --ink-2:     #0E0913;
  --plate:     #E4E5E3;   /* sampled from the product shot's own ground */
  --glow:      #FF1E56;
  --glow-soft: #FF6B8F;
  --blush:     #F6DDE2;
  --muted:     #8B7B92;
  --line:      rgba(246,221,226,.13);

  --shell: min(1140px, 90vw);
  --f-display: "Bodoni Moda", Didot, "Bodoni MT", Georgia, serif;
  --f-body:    "Hanken Grotesk", "Avenir Next", -apple-system, system-ui, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--blush);
  font-family:var(--f-body);
  font-weight:330;
  font-size:clamp(1rem,.96rem + .2vw,1.08rem);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video{ display:block; max-width:100%; }
figure{ margin:0; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--glow-soft); outline-offset:4px; border-radius:3px; }

.shell{ width:var(--shell); margin-inline:auto; }
.label{
  font-size:.68rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted); margin:0;
}
.display{
  font-family:var(--f-display); font-weight:500; line-height:1;
  letter-spacing:-.022em; text-wrap:balance; margin:0;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  border-radius:999px; padding:.95rem 2rem;
  font-size:.76rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .45s var(--ease), background .45s, color .45s, border-color .45s, box-shadow .45s;
}
.btn--solid{ background:var(--glow); color:#fff; }
.btn--solid:hover{ transform:translateY(-2px); box-shadow:0 14px 44px rgba(255,30,86,.42); }
.btn--ghost{ border-color:rgba(246,221,226,.34); color:var(--blush); backdrop-filter:blur(6px); }
.btn--ghost:hover{ border-color:var(--blush); background:rgba(246,221,226,.08); transform:translateY(-2px); }
.btn svg{ transition:transform .45s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }

/* ---------- scroll progress hairline ---------- */
.prog{
  position:fixed; inset:0 0 auto; z-index:80; height:2px;
  background:linear-gradient(90deg, var(--glow), var(--glow-soft));
  transform:scaleX(0); transform-origin:0 50%;
  will-change:transform;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.15rem clamp(1.2rem,4vw,3rem);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s var(--ease);
  animation:navIn 1s var(--ease-out) 1.5s both;
}
@keyframes navIn{ from{ opacity:0 } to{ opacity:1 } }
.nav[data-stuck="true"]{
  background:rgba(7,5,10,.76);
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border-bottom-color:var(--line);
}
.nav__mark{ font-family:var(--f-display); font-style:italic; font-weight:600; font-size:1.45rem; }
.nav__mark b{ color:var(--glow); font-weight:600; }
/* the registered logo, cut out of its white ground; its black outline melts
   into the dark page so the pink lettering carries it */
.nav__logo{ display:block; flex:none; line-height:0; margin-block:-.4rem; }
.nav__logo img{ display:block; height:54px; width:auto; }
@media (max-width:640px){ .nav__logo img{ height:38px; } }
.nav__right a{ white-space:nowrap; }
/* phones can't fit the logo, two text links and the buy button on one line.
   "The kit" goes first ("See the kit" is still in the hero), then Joyfans
   (its banner is further down); the buy button always stays */
@media (max-width:480px){ .nav__right .nav__kit{ display:none; } }
@media (max-width:370px){ .nav__right a:not(.btn){ display:none; } }
.nav__right{ display:flex; align-items:center; gap:1.5rem; }
.nav__right a:not(.btn){
  font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; opacity:.74;
  transition:opacity .3s;
}
.nav__right a:not(.btn):hover{ opacity:1; }
.nav .btn{ padding:.6rem 1.35rem; font-size:.68rem; }

/* ============================================================
   HERO — the clip, graded down until it becomes atmosphere
   ============================================================ */
.hero{ position:relative; height:100svh; min-height:600px; overflow:hidden; }
.hero__media{ position:absolute; inset:0; will-change:transform; transform-origin:50% 40%; }
.hero__media video{
  width:100%; height:100%; object-fit:cover; object-position:84% 8%;
  /* the grade that turns a 2x-upscaled clip into a lit room */
  filter:brightness(.48) contrast(1.22) saturate(.7);
  animation:mediaIn 2.4s var(--ease-out) both;
}
@keyframes mediaIn{ from{ opacity:0; transform:scale(1.08) } to{ opacity:1; transform:none } }

.hero__veil{ position:absolute; inset:0; pointer-events:none; }
/* vignette: edges fall away so the frame has a centre */
.hero__veil--vig{
  background:radial-gradient(115% 85% at 62% 40%, transparent 26%, rgba(7,5,10,.5) 66%, rgba(7,5,10,.92) 100%);
}
/* scrim: a wall of ink on the left for the type, and a floor at the bottom */
.hero__veil--scrim{
  background:
    linear-gradient(90deg, rgba(7,5,10,.95) 0%, rgba(7,5,10,.66) 38%, transparent 68%),
    linear-gradient(0deg, var(--ink) 0%, rgba(7,5,10,.38) 26%, transparent 52%),
    radial-gradient(85% 58% at 74% 30%, rgba(255,30,86,.1), transparent 68%);
}
.hero__veil--grain{ opacity:.55; mix-blend-mode:overlay; }

.hero__inner{
  position:absolute; z-index:4; inset:auto 0 0;
  width:var(--shell); margin-inline:auto;
  padding-bottom:clamp(3.5rem,10vh,7rem);
  display:grid; gap:1.5rem; justify-items:start;
}
.hero__eyebrow{ overflow:hidden; }
.hero__eyebrow span{ display:block; animation:riseIn 1.1s var(--ease-out) .35s both; }
.hero__title{
  font-size:clamp(3rem,10.5vw,9rem);
  line-height:.86; letter-spacing:-.035em; font-weight:400;
}
.hero__title .ln{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero__title .ln > span{ display:block; }
.hero__title .ln:nth-of-type(1) > span{ animation:riseIn 1.25s var(--ease-out) .5s both; }
.hero__title .ln:nth-of-type(2) > span{ animation:riseIn 1.25s var(--ease-out) .64s both; }
.hero__title em{
  font-style:italic; font-weight:500; color:var(--glow);
  text-shadow:0 0 38px rgba(255,30,86,.5), 0 0 100px rgba(255,30,86,.22);
}
@keyframes riseIn{ from{ transform:translateY(110%) } to{ transform:none } }

.hero__sub{
  margin:0; max-width:34ch; opacity:.84;
  animation:fadeUp 1.2s var(--ease-out) .95s both;
}
.hero__buy{
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  animation:fadeUp 1.2s var(--ease-out) 1.12s both;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:none } }

.price{ font-family:var(--f-display); font-size:1.9rem; font-weight:500; font-variant-numeric:tabular-nums; }
.price small{
  display:block; margin-top:.1rem; font-family:var(--f-body);
  font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
}

.scrollcue{
  position:absolute; z-index:4; right:clamp(1.2rem,4vw,3rem); bottom:clamp(3.5rem,10vh,7rem);
  display:grid; gap:.8rem; justify-items:center;
  animation:fadeUp 1.2s var(--ease-out) 1.5s both;
}
.scrollcue i{
  display:block; width:1px; height:70px; transform-origin:top;
  background:linear-gradient(180deg, transparent, var(--glow-soft));
  animation:drip 2.6s var(--ease) infinite;
}
@keyframes drip{ 0%{transform:scaleY(0);opacity:0} 40%{opacity:1} 100%{transform:scaleY(1);opacity:0} }
@media (max-width:760px){ .scrollcue{ display:none; } }

/* ============================================================
   PRODUCT — the kit, lit, sharp, on its own ground
   ============================================================ */
.kit{ padding:clamp(5rem,13vh,9rem) 0; }
.kit__grid{
  display:grid; grid-template-columns:0.82fr 1fr; gap:clamp(2rem,4.5vw,4rem);
  align-items:center;
}
.kit__copy{ display:grid; gap:1.3rem; justify-items:start; }
.kit__copy .display{ font-size:clamp(1.9rem,4vw,3rem); }
.kit__copy p{ margin:0; max-width:34ch; color:var(--muted); }
/* the kit was shot on studio white; it has been cut out and relit on the
   page's own ground, so the plate now belongs to the room instead of
   punching a hole in it */
.plate-card{
  position:relative; border-radius:20px; overflow:hidden;
  background:var(--ink-2);
  box-shadow:0 34px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(246,221,226,.07);
  will-change:transform;
}
.plate-card img{ width:100%; height:auto; }
/* the composite already vignettes itself — this only softens the last seam */
.plate-card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 34px 4px rgba(7,5,10,.7);
}
@media (max-width:860px){
  .kit__grid{ grid-template-columns:1fr; gap:2.5rem; }
  .kit__copy{ order:2; }
  .plate-card{ order:1; }
}

/* ============================================================
   ONE LINE, LIT WORD BY WORD
   ============================================================ */
.line{ padding:clamp(5rem,14vh,10rem) 0; }
.line .display{ font-size:clamp(1.7rem,4vw,3.4rem); line-height:1.15; max-width:18ch; }
.line .w{ color:rgba(246,221,226,.13); transition:color .45s var(--ease), text-shadow .45s var(--ease); }
.line .w.on{ color:var(--blush); }
.line .w.accent.on{ color:var(--glow); text-shadow:0 0 30px rgba(255,30,86,.38); }

/* ============================================================
   IN THE BOX
   ============================================================ */
.box{ padding:clamp(3rem,8vh,6rem) 0; }
.box__head{ display:grid; gap:.7rem; margin-bottom:clamp(2.5rem,6vh,4rem); }
.box__head .display{ font-size:clamp(1.8rem,3.6vw,2.8rem); }
.box__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(1rem,2.4vw,1.8rem); }
.item{
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,30,86,.055), transparent 72%);
  display:grid; align-content:start;
}
.item__shot{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--ink-2); }
.item__shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.item:hover .item__shot img{ transform:scale(1.05); }
.item__shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 -34px 40px -12px var(--ink), inset 0 0 44px 14px rgba(7,5,10,.75);
}
.item__body{ padding:1.4rem 1.6rem 1.7rem; display:grid; gap:.45rem; }
.item__n{ font-family:var(--f-display); font-size:.9rem; color:var(--glow-soft); font-variant-numeric:tabular-nums; letter-spacing:.08em; }
.item h3{ margin:0; font-size:1.12rem; font-weight:600; }
.item p{ margin:0; color:var(--muted); font-size:.93rem; line-height:1.6; }

/* ============================================================
   STILLS
   ============================================================ */
.stills{ padding:clamp(3rem,8vh,6rem) 0 clamp(4rem,11vh,8rem); }
.stills__head{ display:grid; gap:.6rem; margin-bottom:clamp(1.8rem,4vh,2.6rem); }
.stills__head .display{ font-size:clamp(1.5rem,3vw,2.3rem); }
.stills__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.7rem,1.6vw,1.2rem); }
.still{ border-radius:14px; overflow:hidden; aspect-ratio:3/4; }
.still img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.88) brightness(.86);
  transition:transform 1.1s var(--ease), filter .6s var(--ease);
}
.still:hover img{ transform:scale(1.04); filter:saturate(1) brightness(.96); }
@media (max-width:640px){
  .stills__grid{ grid-template-columns:1fr 1fr; }
  .stills__grid > :nth-child(3){ display:none; }
}

/* ============================================================
   BUY + FOOTER
   ============================================================ */
.buy{
  padding:clamp(5rem,14vh,9rem) 0;
  background:linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  border-top:1px solid var(--line);
}
.buy__in{ display:grid; gap:1.4rem; justify-items:center; text-align:center; }
.buy .display{ font-size:clamp(2.1rem,5.4vw,4.2rem); }
.buy .display em{ font-style:italic; color:var(--glow); text-shadow:0 0 36px rgba(255,30,86,.42); }
.buy p{ margin:0; color:var(--muted); max-width:42ch; }
.buy__meta{
  display:flex; gap:1.7rem; flex-wrap:wrap; justify-content:center; margin-top:.5rem;
  color:var(--muted); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
}

.foot{ background:var(--ink-2); border-top:1px solid var(--line); padding:clamp(2.5rem,6vh,4rem) 0 2rem; }
.foot__grid{ display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:start; }
.foot__links{ display:flex; gap:1.7rem; flex-wrap:wrap; }
.foot a{ opacity:.72; font-size:.9rem; transition:opacity .3s, color .3s; }
.foot a:hover{ opacity:1; color:var(--glow-soft); }
.foot__base{
  margin-top:2.5rem; padding-top:1.4rem; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  color:var(--muted); font-size:.8rem;
}

/* ============================================================
   JOYFANS — the sister site, and its diamonds
   ============================================================ */
.jf{
  padding:clamp(4.5rem,12vh,8rem) 0;
  background:var(--ink-2);
  border-top:1px solid var(--line);
}
.jf__in{
  display:grid; grid-template-columns:0.85fr 1fr; gap:clamp(2.2rem,5vw,4.5rem);
  align-items:center;
}
.jf__copy{ display:grid; }
.jf__pitch{ display:grid; gap:1.3rem; justify-items:start; }
.jf__pitch[hidden]{ display:none; }
.jf__copy .display{ font-size:clamp(1.9rem,4vw,3rem); }
.jf__kit{
  display:block; width:100%; max-width:460px; border-radius:16px; overflow:hidden;
  background:var(--ink); box-shadow:0 24px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(246,221,226,.07);
}
.jf__kit img{ width:100%; height:auto; }
.jf__buy{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.jf__packs-head{ grid-column:1/-1; }
.jf__copy .display em{ font-style:italic; color:var(--glow); text-shadow:0 0 30px rgba(255,30,86,.38); }
.jf__copy p{ margin:0; max-width:36ch; color:var(--muted); }
.jf__packs{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:clamp(.7rem,1.6vw,1rem);
}
.pack{
  display:grid; gap:.2rem; justify-items:start; align-content:start;
  padding:1.3rem 1.3rem 1.2rem;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg, rgba(255,30,86,.07), transparent 80%);
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.pack:hover{ transform:translateY(-3px); border-color:rgba(255,107,143,.5); box-shadow:0 18px 50px rgba(255,30,86,.18); }
.pack__n{
  display:flex; align-items:center; gap:.5rem;
  font-family:var(--f-display); font-size:1.9rem; font-weight:500; line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.pack__n svg{ color:var(--glow-soft); flex:none; }
.pack__unit{ font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.pack__price{ margin-top:.7rem; font-size:1rem; font-variant-numeric:tabular-nums; }
.pack__price del{ opacity:.5; margin-right:.35rem; }
.pack__price ins{ text-decoration:none; }
.pack__cta{
  margin-top:.45rem; font-size:.68rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--glow-soft);
}
.jf__note{ grid-column:1/-1; margin:.3rem 0 0; color:var(--muted); font-size:.82rem; }
@media (max-width:860px){
  .jf__in{ grid-template-columns:1fr; }
  /* someone sent by Joyfans came for diamonds: those first, the kit after */
  .jf[data-from="joyfans"] .jf__packs{ order:-1; }
}

/* WooCommerce prints sale prices with screen-reader text; the theme that
   would normally hide it isn't loaded on this page */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- entrance reveals ----------
   Hidden only once the script has claimed the page by stamping
   .js on <html>. If the script never runs, every section renders
   as plain visible content instead of an empty screen. */
.js .rise{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .rise.in{ opacity:1; transform:none; }
.js .rise[data-d="1"]{ transition-delay:.08s; }
.js .rise[data-d="2"]{ transition-delay:.16s; }
.js .rise[data-d="3"]{ transition-delay:.24s; }
.js .rise[data-d="4"]{ transition-delay:.32s; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js .rise{ opacity:1; transform:none; }
  .line .w{ color:var(--blush); }
  .line .w.accent{ color:var(--glow); }
  .hero__media,.plate-card{ transform:none !important; }
  .prog{ display:none; }
}