:root {
  --bg: #0d0a10;
  --bg-alt: #120d16;
  --aubergine: #1a1020;
  --text: 245, 240, 247;
  --text-secondary: 216, 207, 220;
  --lavender: #c7a4f4;
  --flieder: #b88bea;
  --violet: #8d5bc5;
  --deep-violet: #4d2868;
  --deep-purple: #291533;
  --motion-scale: 1;
  --pos-x: 0vw;
  --pos-y: 0vh;
  --h-scale: 1;
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  position: fixed;
  inset: 0;
  width: 100%;
  margin: 0;
  background: radial-gradient(ellipse at 50% 30%, var(--aubergine) 0%, var(--bg-alt) 45%, var(--bg) 85%);
  color: rgb(var(--text));
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--violet);
  color: rgb(var(--text));
}

/* ---------- brand mark ----------
   A quiet, permanent signature lockup — monogram + subtle full name,
   not an interactive reveal. Kept static throughout the experience. */

.brand {
  position: fixed;
  top: max(24px, env(safe-area-inset-top) + 20px);
  left: max(24px, env(safe-area-inset-left) + 24px);
  z-index: 3;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  appearance: none;
  background: none;
  border: none;
  margin: 0;
  padding: 0.2rem;
  font-family: var(--font);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

@media (min-width: 48rem) {
  .brand {
    top: 40px;
    left: 44px;
  }
}

.brand-mark {
  font-size: clamp(0.85rem, 0.3vw + 0.75rem, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--flieder);
  transition: opacity 0.4s ease;
}

.brand:hover .brand-mark,
.brand:focus-visible .brand-mark {
  opacity: 0.78;
}

.brand:focus-visible {
  outline: 2px solid rgba(199, 164, 244, 0.55);
  outline-offset: 6px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark {
    transition: none;
  }
}

/* ---------- background scene ---------- */

.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.scene.is-paused * {
  animation-play-state: paused !important;
}

/* Ambient breathing — layered on top of the existing slow drift without
   touching it. Each wrapper adds a small, independent translate drift
   (different period, out of phase with the others); each light element
   additionally gets its own blur "breath" (soften/grow, sharpen/settle)
   on yet another period. Nothing here overrides the existing transform/
   opacity animations — different properties, or a parent/child split. */

.drift-wrap {
  position: absolute;
  inset: 0;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.drift-wrap--a {
  animation-name: breatheDriftA;
  animation-duration: calc(13s * var(--motion-scale));
}

.drift-wrap--b {
  animation-name: breatheDriftB;
  animation-duration: calc(16.5s * var(--motion-scale));
  animation-delay: -6s;
}

.drift-wrap--sculpture {
  animation-name: breatheDriftC;
  animation-duration: calc(21s * var(--motion-scale));
  animation-delay: -11s;
}

@keyframes breatheDriftA {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(28px, 14px, 0) rotate(0.3deg); }
  100% { transform: translate3d(-20px, -10px, 0) rotate(-0.2deg); }
}

@keyframes breatheDriftB {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-32px, 18px, 0) rotate(-0.25deg); }
  100% { transform: translate3d(18px, -22px, 0) rotate(0.2deg); }
}

@keyframes breatheDriftC {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(20px, -12px, 0); }
  100% { transform: translate3d(-16px, 10px, 0); }
}

/* fixed ambient glows — quiet spatial depth, low and slow */
.ambient {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity 3.2s ease;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: alternate, alternate;
}

.ambient-1 {
  width: 90vw;
  height: 80vh;
  top: -20vh;
  right: -25vw;
  background: radial-gradient(ellipse at 60% 40%, var(--violet) 0%, rgba(141, 91, 197, 0.35) 35%, transparent 72%);
  animation-name: ambientDriftA, ambientBreatheA;
  animation-duration: calc(140s * var(--motion-scale)), calc(11s * var(--motion-scale));
}

.ambient-2 {
  width: 85vw;
  height: 75vh;
  bottom: -22vh;
  left: -22vw;
  background: radial-gradient(ellipse at 40% 60%, var(--deep-violet) 0%, rgba(77, 40, 104, 0.4) 38%, transparent 74%);
  animation-name: ambientDriftB, ambientBreatheB;
  animation-duration: calc(160s * var(--motion-scale)), calc(13.5s * var(--motion-scale));
  animation-delay: -60s, -4s;
}

@keyframes ambientDriftA {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-3vw, 3vh, 0); }
  100% { transform: translate3d(2vw, -2vh, 0); }
}

@keyframes ambientDriftB {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(3vw, -2vh, 0); }
  100% { transform: translate3d(-2vw, 2vh, 0); }
}

@keyframes ambientBreatheA {
  0% { filter: blur(108px); }
  50% { filter: blur(123px); }
  100% { filter: blur(110px); }
}

@keyframes ambientBreatheB {
  0% { filter: blur(107px); }
  50% { filter: blur(119px); }
  100% { filter: blur(109px); }
}

/* ---------- the light sculpture ---------- */

.sculpture {
  position: absolute;
  top: 40%;
  left: 60%;
  width: min(115vw, 1150px);
  height: min(115vw, 1150px);
  transform: translate3d(-50%, -50%, 0) translate3d(var(--parallax-x, 0px), var(--parallax-y, 0px), 0) rotate(var(--sculpture-rot, 0deg));
  transition: transform 2.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.sculpture-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(38px);
  will-change: opacity, transform;
  transition: opacity 3s ease;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: alternate, alternate;
}

.sculpture-layer--1 {
  animation-name: sculptureDriftA, sculptureBreatheA;
  animation-duration: calc(220s * var(--motion-scale)), calc(12.5s * var(--motion-scale));
}

.sculpture-layer--2 {
  transform: scale(0.72) rotate(35deg) translate(8%, -6%);
  filter: blur(48px);
  animation-name: sculptureDriftB, sculptureBreatheB;
  animation-duration: calc(260s * var(--motion-scale)), calc(9.5s * var(--motion-scale));
  animation-delay: -90s, -3s;
}

.sculpture-layer--3 {
  transform: scale(0.4) rotate(-20deg) translate(-14%, 10%);
  filter: blur(30px);
  animation-name: sculptureDriftC, sculptureBreatheC;
  animation-duration: calc(190s * var(--motion-scale)), calc(14s * var(--motion-scale));
  animation-delay: -40s, -7s;
}

@keyframes sculptureDriftA {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(6deg); }
  100% { transform: rotate(-4deg); }
}

@keyframes sculptureDriftB {
  0% { transform: scale(0.72) rotate(35deg); }
  50% { transform: scale(0.72) rotate(24deg); }
  100% { transform: scale(0.72) rotate(46deg); }
}

@keyframes sculptureDriftC {
  0% { transform: scale(0.4) rotate(-20deg); }
  50% { transform: scale(0.4) rotate(-8deg); }
  100% { transform: scale(0.4) rotate(-30deg); }
}

@keyframes sculptureBreatheA {
  0% { filter: blur(36px); }
  50% { filter: blur(46px); }
  100% { filter: blur(39px); }
}

@keyframes sculptureBreatheB {
  0% { filter: blur(46px); }
  50% { filter: blur(58px); }
  100% { filter: blur(49px); }
}

@keyframes sculptureBreatheC {
  0% { filter: blur(28px); }
  50% { filter: blur(37px); }
  100% { filter: blur(30px); }
}

/* ---------- story light — follows the current text's position ---------- */

.story-light {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(70vw, 900px);
  height: min(70vw, 900px);
  border-radius: 50%;
  background: radial-gradient(circle, var(--story-tint, var(--lavender)) 0%, rgba(199, 164, 244, 0.4) 32%, rgba(199, 164, 244, 0.12) 58%, transparent 78%);
  mix-blend-mode: screen;
  opacity: 0.06;
  transform: translate3d(-50%, -50%, 0) translate3d(var(--pos-x), var(--pos-y), 0);
  transition: transform 3.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 2.4s ease, width 2.4s ease, height 2.4s ease;
  animation: storyLightBreathe calc(10.5s * var(--motion-scale)) ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes storyLightBreathe {
  0% { filter: blur(66px); }
  50% { filter: blur(82px); }
  100% { filter: blur(70px); }
}

/* ---------- click spark ---------- */

.spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lavender), transparent);
  opacity: 0;
  transform: translate3d(calc(-50% + var(--pos-x)), calc(-50% + var(--pos-y)), 0) scaleX(0.3);
  transform-origin: left center;
}

.spark.is-active {
  animation: sparkSweep 0.55s ease-out 1;
}

@keyframes sparkSweep {
  0% { opacity: 0; transform: translate3d(calc(-50% + var(--pos-x)), calc(-50% + var(--pos-y)), 0) scaleX(0.2); }
  35% { opacity: 0.8; }
  100% { opacity: 0; transform: translate3d(calc(-50% + var(--pos-x)), calc(-50% + var(--pos-y)), 0) scaleX(1.6); }
}

/* ---------- ghost rectangles — screen 6 easter eggs ---------- */

.ghost-rect {
  position: absolute;
  top: 62%;
  left: 50%;
  width: min(30vw, 320px);
  height: min(16vw, 170px);
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  border-radius: 6px;
}

.ghost-rect--outline {
  border: 1px solid rgba(199, 164, 244, 0.22);
}

.ghost-rect--outline.is-active {
  animation: ghostFlash 1.6s ease-out 1;
}

.ghost-rect--fill {
  background: rgba(184, 139, 234, 0.06);
  top: 60%;
  left: 47%;
}

.ghost-rect--fill.is-active {
  animation: ghostFlash 1.3s ease-out 0.4s 1;
}

@keyframes ghostFlash {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- cursor / touch light ---------- */

.cursor-light {
  position: fixed;
  top: 0;
  left: 0;
  width: 36vw;
  height: 36vw;
  max-width: 520px;
  max-height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lavender) 0%, transparent 70%);
  filter: blur(64px);
  mix-blend-mode: screen;
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  will-change: transform, opacity;
  z-index: 0;
}

.touch-light {
  position: fixed;
  width: 40vw;
  height: 40vw;
  max-width: 420px;
  max-height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lavender) 0%, transparent 72%);
  filter: blur(70px);
  mix-blend-mode: screen;
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.touch-light.is-active {
  animation: touchPulse 0.9s ease-out 1;
}

@keyframes touchPulse {
  0% { opacity: 0; }
  35% { opacity: 0.32; }
  100% { opacity: 0; }
}

/* ---------- grain ---------- */

.grain {
  position: fixed;
  inset: -10%;
  width: 120%;
  height: 120%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: 0.05;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 1;
}

/* ---------- stage / typography ---------- */

.stage {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(9vh, env(safe-area-inset-top) + 3rem) max(28px, env(safe-area-inset-left) + clamp(28px, 6vw, 5rem)) max(7vh, env(safe-area-inset-bottom) + 2rem);
  text-align: center;
}

.text-wrap {
  position: relative;
  max-width: min(46rem, 88vw);
  transform: translate3d(var(--pos-x), var(--pos-y), 0);
  transition: transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Legibility scrim: the story light is deliberately brightest right behind
   the text, which can crush contrast for light type on the richer late
   screens. This holds contrast steady without ever reading as a literal
   glow around the letters. */
.text-wrap::before {
  content: "";
  position: absolute;
  inset: -55% -40%;
  z-index: -1;
  background: radial-gradient(ellipse, rgba(9, 6, 12, 0.72) 0%, rgba(9, 6, 12, 0.52) 24%, rgba(9, 6, 12, 0.3) 42%, rgba(9, 6, 12, 0.1) 60%, transparent 78%);
  pointer-events: none;
}

/* Small, casual aside above the headline — only screen 1 uses it. Reads as
   a private greeting, not a second heading: smaller, lighter, and it
   settles in before the headline's joke lands. */
.greeting {
  margin: 0 0 0.55rem;
  font-size: clamp(0.95rem, 0.6vw + 0.8rem, 1.15rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--flieder);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.greeting:empty {
  display: none;
}

.greeting.is-entering {
  opacity: 0;
  transform: translateY(6px);
}

.headline {
  margin: 0;
  font-size: calc(clamp(2.1rem, 6.4vw, 4.75rem) * var(--h-scale));
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: rgb(var(--text));
  filter: blur(0);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), filter 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.headline.no-transition {
  transition: none !important;
}

.subline {
  margin: 1.15rem auto 0;
  max-width: 32ch;
  min-height: 1.45em;
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 400;
  color: rgba(var(--text-secondary), 0.88);
  line-height: 1.45;
  filter: blur(0);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.1s, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.1s, filter 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.headline.is-leaving,
.subline.is-leaving {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(-8px);
  transition: opacity 0.32s ease, filter 0.32s ease, transform 0.32s ease;
}

.headline.is-entering,
.subline.is-entering {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(10px);
}

/* ---------- action ---------- */

.action {
  position: relative;
  margin: clamp(2.25rem, 5.5vh, 3.5rem) auto 0;
  min-height: 3rem;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s, filter 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  filter: blur(0);
}

.action.is-leaving {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}

.action.is-entering {
  opacity: 0;
  filter: blur(6px);
}

.action-btn {
  appearance: none;
  background: none;
  border: none;
  margin: 0;
  padding: 0.3rem 0;
  font-family: inherit;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 500;
  color: var(--flieder);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.action-arrow {
  display: inline-block;
  color: var(--lavender);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.action-btn:hover .action-arrow,
.action-btn:focus-visible .action-arrow {
  transform: translateX(6px);
}

.action-btn:focus-visible {
  outline: 2px solid rgba(199, 164, 244, 0.55);
  outline-offset: 6px;
  border-radius: 3px;
}

.idle-hint {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.85rem);
  transform: translateX(-50%);
  margin: 0;
  font-size: 0.82rem;
  color: rgba(var(--text-secondary), 0.78);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.idle-hint.is-visible {
  opacity: 1;
}

/* ---------- scroll hint (Surprise 3) ---------- */

.scroll-hint {
  position: fixed;
  left: 50%;
  bottom: max(6vh, env(safe-area-inset-bottom) + 2rem);
  z-index: 3;
  margin: 0;
  transform: translate3d(-50%, 6px, 0);
  font-size: 0.8rem;
  color: rgba(var(--text-secondary), 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease, transform 1s ease;
}

.scroll-hint.is-visible {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

/* ---------- epilogue ---------- */

.epilogue {
  margin-top: clamp(2.25rem, 6vh, 3.5rem);
}

.epilogue-line {
  margin: 0.4rem 0 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1.6s ease, transform 1.6s ease;
}

.epilogue-line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.epilogue-line--1,
.epilogue-line--2 {
  font-size: 0.95rem;
  font-weight: 400;
  color: rgba(var(--text-secondary), 0.85);
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .ambient,
  .sculpture-layer,
  .story-light,
  .drift-wrap {
    animation: none !important;
    transition-duration: 1s;
  }

  .sculpture {
    transition-duration: 0.9s;
  }

  .text-wrap {
    transition-duration: 0.5s;
  }

  .cursor-light {
    display: none;
  }

  .touch-light.is-active,
  .spark.is-active,
  .ghost-rect.is-active {
    animation: none !important;
    opacity: 0;
  }

  .headline,
  .subline,
  .action,
  .greeting {
    transition-property: opacity;
    transition-duration: 0.5s;
  }

  .headline.is-leaving,
  .subline.is-leaving,
  .headline.is-entering,
  .subline.is-entering,
  .action.is-leaving,
  .action.is-entering,
  .greeting.is-entering {
    filter: none;
    transform: none;
  }

  .epilogue-line {
    transform: none;
    transition-duration: 0.6s;
  }

  .scroll-hint {
    transition-property: opacity;
    transition-duration: 0.5s;
  }

  .scroll-hint.is-visible {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ---------- small screens ---------- */

@media (max-width: 30rem) {
  .text-wrap {
    max-width: 90vw;
    transform: translate3d(calc(var(--pos-x) * 0.35), calc(var(--pos-y) * 0.5), 0);
  }

  .subline {
    max-width: 28ch;
  }
}