:root {
  /* IntersectionObserver` with `threshold: 0.15` to trigger fade-reveals as elements enter the viewport. Stagger sibling elements by 150ms intervals so content materializes in gentle waves. */
  --hot-magenta: #ff2d6f;
  --electric-cobalt: #2b7aed;
  --synthetic-amber: #ffc233;
  --marble-white: #f5f2ee;
  --obsidian-violet: #1a1428;
  --rose-quartz: #d4a0b8;
  --ink-violet: #2a2238;
  --dusty-amethyst: #8878a0;
  --pale-lavender: #d8d2e0;
  --violet-gray: #3a3548;
  --cool-gray-vein: #d4cfc8;
  --pale-stone-vein: #e8e4e0;
  --breath: 0px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Quicksand", sans-serif;
  font-weight: 400;
  color: var(--violet-gray);
  background: var(--obsidian-violet);
  overflow-x: hidden;
}

.clip-library { position: absolute; inset: 0; pointer-events: none; }

.luminous-journey { position: relative; isolation: isolate; }

.stratum {
  position: relative;
  min-height: 112vh;
  padding: clamp(5rem, 9vw, 9rem) clamp(1.4rem, 6vw, 7rem);
  margin-top: -8vh;
  overflow: hidden;
}

.stratum:first-child { margin-top: 0; }

.marble-light {
  color: var(--ink-violet);
  background:
    radial-gradient(ellipse at 20% 50%, rgba(212,160,184,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(43,122,237,0.05) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 80%, rgba(255,45,111,0.04) 0%, transparent 60%),
    linear-gradient(135deg, rgba(212,160,184,0.06) 0%, transparent 30%, rgba(212,160,184,0.04) 60%, transparent 100%),
    linear-gradient(245deg, rgba(136,120,160,0.05) 10%, transparent 40%),
    repeating-conic-gradient(from 21deg at 38% 42%, rgba(255,45,111,0.055) 0 4deg, transparent 4deg 16deg),
    #f5f2ee;
}

.marble-dark {
  color: var(--pale-lavender);
  background:
    radial-gradient(ellipse at 18% 44%, rgba(255,194,51,0.12) 0%, transparent 46%),
    radial-gradient(ellipse at 83% 26%, rgba(255,45,111,0.08) 0%, transparent 38%),
    linear-gradient(128deg, rgba(255,194,51,0.12) 0%, transparent 31%, rgba(43,122,237,0.08) 62%, transparent 100%),
    repeating-radial-gradient(circle at 72% 40%, rgba(255,194,51,0.07) 0 1px, transparent 1px 8px),
    #1a1428;
}

.hero { min-height: 100vh; display: flex; align-items: center; clip-path: url(#marble-vein-1); z-index: 5; }
.flow-one { clip-path: url(#marble-vein-2); z-index: 4; }
.flow-two { clip-path: url(#marble-vein-3); z-index: 3; }
.flow-three { clip-path: url(#marble-vein-2); z-index: 2; }
.finale { clip-path: url(#marble-vein-4); min-height: 105vh; z-index: 1; }

.hero-content { max-width: 980px; position: relative; z-index: 2; transform: rotate(-2deg); }

.eyebrow,
.specimen-label,
.stamp-specimen span,
.crystal-facet span,
.mini-facet span,
.swatch span {
  font-family: "Overpass Mono", monospace;
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dusty-amethyst);
}

.marble-dark .eyebrow,
.marble-dark .specimen-label { color: var(--synthetic-amber); }

.pop-title {
  margin: 0.1em 0 0.25em;
  font-family: "Nunito", sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--hot-magenta);
  text-transform: uppercase;
  -webkit-text-stroke: 3px var(--obsidian-violet);
  paint-order: stroke fill;
  filter: drop-shadow(0 0 45px rgba(255,45,111,0.22));
}

.pop-title span,
.pop-title em,
.pop-title strong {
  display: inline-block;
  color: transparent;
  font-style: normal;
  animation: fillTitle 1500ms ease-out forwards;
}

.pop-title strong { color: transparent; animation-name: fillTitleCobalt; }

.pop-title span:nth-child(1) { animation-delay: 80ms; }
.pop-title span:nth-child(2) { animation-delay: 180ms; }
.pop-title span:nth-child(3) { animation-delay: 280ms; }
.pop-title span:nth-child(4) { animation-delay: 380ms; }
.pop-title span:nth-child(5) { animation-delay: 480ms; }
.pop-title span:nth-child(6) { animation-delay: 580ms; }
.pop-title span:nth-child(7) { animation-delay: 680ms; }
.pop-title span:nth-child(8) { animation-delay: 780ms; }
.pop-title em { animation-delay: 900ms; }
.pop-title strong { animation-delay: 1040ms; }

@keyframes fillTitle { to { color: var(--hot-magenta); } }
@keyframes fillTitleCobalt { to { color: var(--electric-cobalt); } }

h2 {
  margin: 0;
  max-width: 720px;
  font-family: "Nunito", sans-serif;
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 5.3rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: currentColor;
  -webkit-text-stroke: 3px var(--obsidian-violet);
  paint-order: stroke fill;
  filter: drop-shadow(0 0 36px rgba(255,45,111,0.16));
}

.marble-dark h2 { -webkit-text-stroke-color: var(--marble-white); color: var(--obsidian-violet); text-shadow: 0 0 40px rgba(255,194,51,0.22); }

p {
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  line-height: 1.75;
}

.hero-text { max-width: 620px; color: var(--violet-gray); }

.hero-vein,
.vein-line::before {
  position: absolute;
  inset: 8% -10% auto;
  height: 36vh;
  border-top: 2px solid rgba(212,160,184,0.55);
  border-radius: 52% 48% 42% 58%;
  transform: rotate(-8deg) translateY(calc(var(--breath) * 0.04));
  filter: drop-shadow(0 0 20px rgba(255,45,111,0.17));
}

.stamp-specimen {
  position: absolute;
  right: 9vw;
  bottom: 17vh;
  width: clamp(145px, 18vw, 235px);
  aspect-ratio: 1.2;
  display: grid;
  place-items: center;
  text-align: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.62), rgba(212,160,184,0.32));
  border: 1px solid rgba(43,122,237,0.38);
  clip-path: polygon(18% 0, 82% 0, 100% 38%, 72% 100%, 12% 86%, 0 28%);
  box-shadow: 0 0 60px rgba(43,122,237,0.17);
}

.stamp-specimen b { display: block; font-family: "Nunito"; font-size: 3rem; color: var(--hot-magenta); -webkit-text-stroke: 2px var(--obsidian-violet); }

.island-left { width: min(650px, 76vw); margin: 18vh 0 0 3vw; position: relative; z-index: 2; }

.crystal-facet {
  position: absolute;
  right: 8vw;
  top: 23vh;
  width: clamp(230px, 31vw, 430px);
  min-height: 300px;
  padding: 2px;
  background: linear-gradient(120deg, var(--rose-quartz), var(--electric-cobalt), var(--synthetic-amber));
  clip-path: polygon(50% 0%, 92% 18%, 100% 65%, 66% 100%, 17% 88%, 0% 38%);
  filter: drop-shadow(0 0 55px rgba(255,194,51,0.2));
}

.crystal-facet > div {
  height: 100%;
  min-height: 296px;
  padding: clamp(2rem, 4vw, 3rem);
  background: rgba(26,20,40,0.82);
  clip-path: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.svg-vein { position: absolute; inset: 8vh 0 auto 0; width: 100%; height: 70vh; pointer-events: none; opacity: 0.78; }
.svg-vein path { fill: none; stroke: var(--rose-quartz); stroke-width: 2; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1300ms ease-out, opacity 900ms ease-out; }
.svg-vein.is-drawn path { stroke-dashoffset: 0; }
.marble-dark .svg-vein path { stroke: var(--synthetic-amber); }

.cluster-radial { width: min(720px, 82vw); margin: 13vh auto 0 10vw; position: relative; z-index: 2; }

.halftone-orb {
  position: absolute;
  right: 4vw;
  top: 13vh;
  width: clamp(220px, 38vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,45,111,0.13) 0 2px, transparent 2px 8px);
  opacity: 0.86;
}

.facet-cloud { position: relative; min-height: 470px; }
.mini-facet {
  position: absolute;
  width: min(300px, 72vw);
  padding: 2rem;
  color: var(--ink-violet);
  background: rgba(245,242,238,0.72);
  border: 1px solid rgba(43,122,237,0.34);
  clip-path: polygon(12% 6%, 78% 0%, 100% 36%, 83% 88%, 24% 100%, 0% 59%);
  box-shadow: 0 0 50px rgba(255,45,111,0.12);
}
.mini-facet.one { right: 15vw; top: -3vh; }
.mini-facet.two { left: 16vw; top: 20vh; }
.mini-facet.three { right: 28vw; top: 35vh; }

.color-core-wrap { margin: 14vh 0 0 auto; width: min(760px, 82vw); }
.swatch-flow { position: relative; min-height: 500px; }
.swatch {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(150px, 18vw, 250px);
  aspect-ratio: 1;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: 4px solid var(--marble-white);
  box-shadow: 0 0 55px rgba(255,255,255,0.13);
}
.swatch span { color: var(--obsidian-violet); background: rgba(245,242,238,0.76); padding: 0.45rem 0.7rem; }
.swatch.magenta { left: 7vw; top: 1vh; background: var(--hot-magenta); }
.swatch.cobalt { left: 28vw; top: 19vh; background: var(--electric-cobalt); }
.swatch.amber { right: 17vw; top: 4vh; background: var(--synthetic-amber); }
.swatch.quartz { right: 5vw; top: 28vh; background: var(--rose-quartz); }

.final-gem {
  width: min(750px, 84vw);
  margin: 18vh auto 0;
  padding: clamp(2rem, 6vw, 5rem);
  text-align: center;
  background: rgba(255,255,255,0.44);
  clip-path: polygon(50% 0%, 90% 12%, 100% 58%, 72% 100%, 22% 92%, 0% 42%);
  box-shadow: 0 0 80px rgba(255,45,111,0.14), inset 0 0 55px rgba(43,122,237,0.08);
}
.final-gem h2 { margin-inline: auto; }
.closing-mark { position: absolute; right: 9vw; bottom: 10vh; font: 900 clamp(3rem, 10vw, 8rem) "Nunito"; color: var(--synthetic-amber); -webkit-text-stroke: 3px var(--obsidian-violet); filter: drop-shadow(0 0 40px rgba(255,194,51,0.32)); }

.crystal-nav { position: fixed; right: 2rem; top: 50%; transform: translateY(-50%); z-index: 30; width: 58px; height: 58px; }
.crystal-button {
  width: 58px;
  height: 58px;
  border: 0;
  cursor: pointer;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: conic-gradient(from 0deg, var(--hot-magenta), var(--electric-cobalt), var(--synthetic-amber), var(--hot-magenta));
  animation: crystalSpin 120s linear infinite;
  box-shadow: 0 0 46px rgba(255,45,111,0.26);
}
.crystal-button span { display: block; width: 36px; height: 36px; margin: 11px; background: rgba(245,242,238,0.6); clip-path: inherit; }
@keyframes crystalSpin { to { filter: hue-rotate(360deg); } }

.nav-ray {
  position: absolute;
  top: 50%;
  right: 0;
  width: 82px;
  padding: 0.45rem 0.55rem;
  text-decoration: none;
  text-align: center;
  font-family: "Overpass Mono", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--obsidian-violet);
  background: rgba(245,242,238,0.9);
  border: 1px solid rgba(212,160,184,0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms ease-out, transform 360ms ease-out;
}
.crystal-nav.is-open .nav-ray { opacity: 1; pointer-events: auto; }
.crystal-nav.is-open .ray-one { transform: translate(-76px, -120px) rotate(-12deg); }
.crystal-nav.is-open .ray-two { transform: translate(-126px, -62px) rotate(-5deg); }
.crystal-nav.is-open .ray-three { transform: translate(-144px, -8px); }
.crystal-nav.is-open .ray-four { transform: translate(-126px, 48px) rotate(5deg); }
.crystal-nav.is-open .ray-five { transform: translate(-76px, 104px) rotate(12deg); }

.fade-reveal { opacity: 0; transition: opacity 1000ms ease-out; }
.fade-reveal.is-visible { opacity: 1; }

@media (max-width: 760px) {
  .stratum { padding-inline: 1.1rem; min-height: 120vh; }
  .hero-content { transform: rotate(-1deg); }
  .crystal-nav { right: 0.8rem; }
  .crystal-facet, .mini-facet, .swatch { position: relative; inset: auto; margin: 1.25rem auto; }
  .facet-cloud, .swatch-flow { min-height: auto; }
  .island-left, .cluster-radial, .color-core-wrap { margin-left: 0; width: 88vw; }
  .stamp-specimen { right: 1rem; bottom: 7vh; opacity: 0.8; }
}