:root {
  /* Design typography tokens: Montserra Montserrat** medium semi-bold weights */
  --obsidian: #050506;
  --charcoal: #15120E;
  --gold: #D7A83F;
  --champagne: #FFE8A3;
  --teal: #0B3A3C;
  --pearl: #F7F0D6;
  --amber: #B96F18;
  --display: "Jost", "Poppins", "Montserrat", geometric sans-serif;
  --label: "Montserrat", "Poppins", sans-serif;
  --body: "Manrope", "Inter", sans-serif;
  --scroll: 0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--pearl);
  font-family: var(--body);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,232,163,.22), transparent 35%),
    radial-gradient(circle at 18% 72%, rgba(11,58,60,.44), transparent 32%),
    linear-gradient(180deg, rgba(5,5,6,.7), rgba(21,18,14,.64) 45%, rgba(11,58,60,.28));
  mix-blend-mode: screen;
}

.ambient { position: fixed; inset: 0; overflow: hidden; background: var(--obsidian); }

.depth { position: absolute; inset: -15%; opacity: .85; transform: translate3d(0, calc(var(--scroll) * -.03px), 0); }
.depth-one { background: radial-gradient(ellipse at 52% 8%, rgba(215,168,63,.28), transparent 26%), radial-gradient(ellipse at 70% 48%, rgba(11,58,60,.42), transparent 34%), linear-gradient(180deg, #050506 0%, #15120E 42%, #0B3A3C 100%); }
.depth-two { background: repeating-radial-gradient(ellipse at 50% 36%, rgba(247,240,214,.035) 0 1px, transparent 1px 38px); opacity: .44; transform: translate3d(0, calc(var(--scroll) * -.08px), 0) rotate(-4deg); }

.caustics { position: absolute; width: 120vw; height: 60vh; left: -10vw; border-radius: 50%; filter: blur(18px); opacity: .34; }
.caustics-a { top: 4vh; background: conic-gradient(from 20deg, transparent, rgba(215,168,63,.24), transparent, rgba(255,232,163,.12), transparent); animation: causticDrift 16s ease-in-out infinite alternate; }
.caustics-b { bottom: 8vh; background: conic-gradient(from 190deg, transparent, rgba(185,111,24,.2), transparent, rgba(215,168,63,.16), transparent); animation: causticDrift 21s ease-in-out infinite alternate-reverse; }

@keyframes causticDrift { to { transform: translate3d(5vw, 6vh, 0) rotate(12deg) scale(1.08); } }

.bubble-field { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.bubble {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255,232,163,.52);
  background: radial-gradient(circle at 32% 28%, rgba(255,232,163,.72) 0 5%, transparent 7%), radial-gradient(circle at 65% 70%, rgba(215,168,63,.18), transparent 35%), rgba(247,240,214,.025);
  box-shadow: inset -12px -16px 30px rgba(11,58,60,.32), inset 8px 8px 18px rgba(255,232,163,.09), 0 0 24px rgba(215,168,63,.08);
  opacity: var(--o);
  transform: translate3d(calc(sin(var(--scroll)) * 1px), calc(var(--scroll) * var(--speed) * -1px), 0);
  animation: bubbleWaver var(--dur) ease-in-out infinite alternate;
}
.bubble::after { content: "BCD"; position: absolute; inset: 35% auto auto 28%; font: 600 8px var(--label); color: rgba(255,232,163,.22); letter-spacing: .18em; }
@keyframes bubbleWaver { to { margin-left: 18px; filter: blur(.2px); } }

.day-marker { position: fixed; right: 30px; top: 50%; width: 28px; height: 58vh; transform: translateY(-50%); z-index: 8; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.marker-line { position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--gold), transparent); opacity: .6; }
.tick { width: 8px; height: 8px; border-radius: 999px; border: 1px solid var(--gold); background: var(--obsidian); box-shadow: 0 0 0 6px rgba(5,5,6,.66); cursor: pointer; }
.tick.active { background: var(--champagne); box-shadow: 0 0 18px var(--gold); }
.progress-bead { position: absolute; top: 0; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--champagne); background: radial-gradient(circle at 35% 35%, var(--champagne), var(--gold) 36%, var(--amber)); box-shadow: 0 0 25px rgba(215,168,63,.72); transform: translateY(var(--bead, 0px)); }

main { position: relative; z-index: 3; }
.panel { min-height: 100vh; position: relative; display: grid; place-items: center; padding: 8vw; overflow: hidden; }
.water-surface { position: absolute; top: 10vh; left: 8vw; right: 8vw; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,232,163,.75), transparent); box-shadow: 0 0 44px rgba(215,168,63,.36); animation: surface 5s ease-in-out infinite alternate; }
@keyframes surface { to { transform: translateY(12px) scaleX(.94); opacity: .58; } }

.flow-lines, .sunrise-arcs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .62; overflow: visible; }
.flow-lines path, .sunrise-arcs path { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 7 18; filter: drop-shadow(0 0 10px rgba(215,168,63,.42)); animation: dash 24s linear infinite; }
.sunrise-arcs path { stroke: var(--champagne); stroke-dasharray: 2 12; }
@keyframes dash { to { stroke-dashoffset: -220; } }

.drift-card { --tx: 0px; --ty: 0px; --rot: 0deg; transform: translate3d(var(--tx), var(--ty), 0) rotate(var(--rot)); transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease; }
.drift-card:hover { box-shadow: 0 0 0 1px rgba(255,232,163,.45), 0 24px 90px rgba(215,168,63,.2); border-color: rgba(255,232,163,.82); }

.date-card, .memory-card, .fragment-card, .final-card, .note-card {
  position: relative;
  border: 1px solid rgba(215,168,63,.42);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(21,18,14,.88), rgba(5,5,6,.72));
  backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,232,163,.12), 0 30px 120px rgba(0,0,0,.45);
  overflow: hidden;
}
.date-card::before, .memory-card::before, .fragment-card::before, .final-card::before, .note-card::before { content: ""; position: absolute; inset: -40%; background: radial-gradient(circle, rgba(255,232,163,.16), transparent 34%); opacity: 0; transform: translate(var(--mx, 50%), var(--my, 50%)); transition: opacity .3s ease; }
.date-card:hover::before, .memory-card:hover::before, .fragment-card:hover::before, .final-card:hover::before, .note-card:hover::before { opacity: 1; }

.oversized { width: min(720px, 86vw); padding: clamp(36px, 7vw, 82px); text-align: center; border-radius: 44px; }
.eyebrow, .card-label, .note-card span, .fragment-card span { display: block; font-family: var(--label); text-transform: uppercase; letter-spacing: .28em; color: var(--champagne); font-size: 11px; font-weight: 600; }
h1, h2, h3, p { margin: 0; }
h1 { font-family: var(--display); font-size: clamp(72px, 14vw, 178px); line-height: .82; color: var(--gold); letter-spacing: .09em; text-transform: lowercase; text-shadow: 0 0 34px rgba(215,168,63,.25); }
.numeral { margin: 28px 0 18px; font: 500 clamp(24px, 4vw, 54px) var(--display); letter-spacing: .36em; color: var(--champagne); }
.date-card > p:last-of-type { max-width: 500px; margin: auto; color: rgba(247,240,214,.78); font-size: 17px; line-height: 1.7; }
.card-glint { position: absolute; inset: auto 12% 0; height: 1px; background: linear-gradient(90deg, transparent, var(--champagne), transparent); box-shadow: 0 0 20px var(--gold); }

.note-card { position: absolute; left: 9vw; bottom: 14vh; max-width: 260px; padding: 22px; transform: rotate(-4deg); }
.note-card p { margin-top: 10px; color: rgba(247,240,214,.72); line-height: 1.55; }
.scroll-cue { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); font: 600 10px var(--label); color: var(--gold); letter-spacing: .28em; text-transform: uppercase; display: grid; justify-items: center; gap: 8px; }
.scroll-cue span { width: 1px; height: 48px; background: linear-gradient(var(--gold), transparent); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 50% { transform: translateY(12px); opacity: .5; } }

.section-title { position: absolute; top: 13vh; left: 8vw; max-width: 560px; }
.section-title.right { left: auto; right: 8vw; text-align: right; }
h2 { margin-top: 14px; font: 600 clamp(42px, 7vw, 92px)/.9 var(--display); color: var(--gold); letter-spacing: .04em; text-transform: lowercase; }

.constellation, .archive-grid { position: relative; width: min(1120px, 88vw); min-height: 70vh; }
.memory-card { position: absolute; width: min(330px, 42vw); padding: 28px; }
.memory-card h3 { margin: 18px 0 12px; font: 600 26px var(--display); color: var(--champagne); letter-spacing: .08em; text-transform: lowercase; }
.memory-card p, .fragment-card p, .final-card p { color: rgba(247,240,214,.76); line-height: 1.65; }
.smoked { left: 2%; top: 30%; transform: rotate(-2deg); }
.pearl { right: 4%; top: 18%; background: linear-gradient(145deg, rgba(247,240,214,.18), rgba(21,18,14,.75)); transform: rotate(2deg); }
.wire { left: 35%; bottom: 5%; background: rgba(5,5,6,.32); border-style: double; transform: rotate(1deg); }
.matte { right: 19%; bottom: 21%; background: linear-gradient(145deg, rgba(5,5,6,.9), rgba(11,58,60,.35)); transform: rotate(-1deg); }

.archive-halo { position: absolute; width: 62vw; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,232,163,.12); box-shadow: inset 0 0 90px rgba(11,58,60,.42), 0 0 80px rgba(215,168,63,.1); }
.archive-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; align-items: center; }
.fragment-card { min-height: 180px; padding: 24px; border-radius: 28px; }
.fragment-card:nth-child(1) { grid-column: 1 / 5; grid-row: 2; }
.fragment-card:nth-child(2) { grid-column: 5 / 8; grid-row: 1 / 3; }
.fragment-card:nth-child(3) { grid-column: 8 / 12; grid-row: 2; }
.fragment-card:nth-child(4) { grid-column: 3 / 7; grid-row: 3; }
.fragment-card:nth-child(5) { grid-column: 7 / 13; grid-row: 3; }
.fragment-card p { margin-top: 40px; font-size: 18px; }
.fragment-card.gold { background: linear-gradient(135deg, rgba(185,111,24,.38), rgba(21,18,14,.84)); }
.fragment-card.outline { background: transparent; border-color: rgba(255,232,163,.58); }

.first-light { background: radial-gradient(circle at 50% 70%, rgba(255,232,163,.18), transparent 34%); }
.final-card { width: min(760px, 86vw); padding: clamp(34px, 6vw, 72px); text-align: center; background: linear-gradient(160deg, rgba(21,18,14,.86), rgba(11,58,60,.42), rgba(5,5,6,.86)); }
.final-card h2 { font-size: clamp(68px, 12vw, 150px); }
.final-card p { max-width: 560px; margin: 22px auto 34px; font-size: 18px; }
.ritual-button { border: 1px solid var(--gold); border-radius: 999px; color: var(--obsidian); background: linear-gradient(90deg, var(--gold), var(--champagne), var(--amber)); padding: 15px 26px; font: 700 11px var(--label); text-transform: uppercase; letter-spacing: .24em; cursor: pointer; box-shadow: 0 0 34px rgba(215,168,63,.24); }
.ritual-button.released { filter: brightness(1.3); transform: translateY(-2px); }
.morning-beads { position: absolute; bottom: 18vh; display: flex; gap: 28px; }
.morning-beads span { width: 11px; height: 11px; border-radius: 50%; background: var(--champagne); box-shadow: 0 0 24px var(--gold); animation: bead 3s ease-in-out infinite; }
.morning-beads span:nth-child(even) { animation-delay: .8s; }
@keyframes bead { 50% { transform: translateY(-24px); opacity: .55; } }

@media (max-width: 760px) {
  .panel { padding: 96px 22px; align-items: start; }
  .day-marker { right: 12px; }
  .note-card { display: none; }
  .section-title, .section-title.right { position: relative; inset: auto; text-align: left; margin-bottom: 28px; }
  .constellation, .archive-grid { width: 100%; min-height: auto; display: grid; grid-template-columns: 1fr; gap: 18px; }
  .memory-card, .fragment-card, .fragment-card:nth-child(n) { position: relative; width: 100%; grid-column: auto; grid-row: auto; left: auto; right: auto; top: auto; bottom: auto; }
  h1 { font-size: 58px; }
}