@import url("https://fonts.googleapis.com/css2?family=Finger+Paint&display=swap");

:root {
  --ink: #fffaf0;
  --ink-soft: #ded5ec;
  --night: #10061f;
  --night-2: #1a0a31;
  --violet: #6d2b8f;
  --pink: #d94e9c;
  --gold: #ffcc65;
  --gold-bright: #ffe5a1;
  --glass: rgba(255, 255, 255, 0.085);
  --line: rgba(255, 239, 205, 0.22);
  --shadow: 0 32px 90px rgba(6, 1, 14, 0.46);
  --serif: Georgia, "Times New Roman", serif;
  --heading: "Finger Paint", cursive;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative;
  margin: 0;
  padding-top: max(3.5rem, calc(var(--header-clearance, 10rem) - 6.5rem));
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 79% 11%, rgba(205, 68, 149, 0.18), transparent 27rem),
    radial-gradient(circle at 18% 37%, rgba(102, 56, 165, 0.2), transparent 30rem),
    var(--night);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: 0.42;
  background-image:
    radial-gradient(circle at 18% 19%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 30%, #ffd97e 0 1px, transparent 1.7px),
    radial-gradient(circle at 45% 76%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 92% 84%, #ff9ddb 0 1px, transparent 1.6px);
  background-size: 230px 210px, 290px 260px, 330px 300px, 370px 320px;
  animation: starfield-breathe 8s ease-in-out infinite alternate;
}

main,
.footer { position: relative; z-index: 2; }

.cosmic-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.cosmic-canvas::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.5;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 216, 134, 0.72) 0 1.2px, transparent 1.8px),
    radial-gradient(circle, rgba(230, 160, 255, 0.68) 0 0.9px, transparent 1.5px);
  background-position: 0 0, 63px 117px, 151px 47px;
  background-size: 190px 230px, 280px 310px, 360px 270px;
  animation: quiet-stars 18s linear infinite alternate;
}

.cosmic-planet {
  --travel-x: 28px;
  --travel-y: -18px;
  --turn: 4deg;
  position: absolute;
  display: block;
  aspect-ratio: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.32;
  filter: saturate(1.08) drop-shadow(0 0 34px rgba(255, 192, 128, 0.3));
  mix-blend-mode: screen;
  animation: planet-drift var(--duration, 13s) ease-in-out var(--delay, 0s) infinite alternate;
  will-change: transform;
}

.planet-violet {
  top: 17%;
  left: 54%;
  width: clamp(150px, 19vw, 300px);
  --duration: 17s;
  --travel-x: -52px;
  --travel-y: 30px;
  --turn: -5deg;
  background-image: url("assets/optimized/planet-violet.webp");
}

.planet-crystal {
  top: 38%;
  left: 22%;
  width: clamp(135px, 17vw, 270px);
  --duration: 14s;
  --delay: -5s;
  --travel-x: 48px;
  --travel-y: -34px;
  --turn: 6deg;
  background-image: url("assets/optimized/planet-crystal.webp");
}

.planet-marble {
  top: 60%;
  left: 61%;
  width: clamp(155px, 20vw, 320px);
  --duration: 19s;
  --delay: -8s;
  --travel-x: -45px;
  --travel-y: -38px;
  --turn: -4deg;
  background-image: url("assets/optimized/planet-marble-clean.webp");
}

.planet-ringed {
  top: 80%;
  left: 29%;
  width: clamp(230px, 29vw, 470px);
  --duration: 21s;
  --delay: -3s;
  --travel-x: 62px;
  --travel-y: 32px;
  --turn: 5deg;
  background-image: url("assets/optimized/planet-ringed.webp");
}

.meteor-layer {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
}

.character-layer {
  position: fixed;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
}

.floating-figure {
  --peak-opacity: 0.96;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: clamp(50px, 5.75vw, 85px);
  max-width: none;
  height: auto;
  opacity: 0;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(255, 203, 101, 0.38)) drop-shadow(0 10px 22px rgba(7, 1, 15, 0.28));
  user-select: none;
  -webkit-user-drag: none;
  animation-duration: var(--duration, 82s);
  animation-timing-function: ease-in-out;
  animation-delay: var(--delay, 0s);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.figure-anaro-ring {
  width: clamp(50px, 5.75vw, 85px);
  --duration: 82s;
  --delay: -8s;
  animation-name: figure-glide-a;
}

.figure-anaro-flip {
  width: clamp(50px, 5.75vw, 85px);
  --duration: 88s;
  --delay: -18s;
  animation-name: figure-glide-b;
}

.figure-anchor {
  width: clamp(76px, 8.5vw, 126px);
  --peak-opacity: 0.88;
  --duration: 28s;
  --delay: -20s;
  animation-name: figure-anchor-drift;
}

.figure-sana-sleep {
  width: clamp(50px, 5.75vw, 85px);
  --duration: 88s;
  --delay: -13s;
  animation-name: figure-sleep-drift;
}

.figure-sana-star-hearts-a {
  --duration: 124s;
  --delay: -12s;
  animation-name: sana-rise;
}

.figure-sana-star-hearts-b {
  --duration: 138s;
  --delay: -76s;
  animation-name: sana-descend;
}

.figure-sana-star {
  --duration: 132s;
  --delay: -42s;
  animation-name: sana-cross;
}

.figure-sana-heart {
  --duration: 144s;
  --delay: -104s;
  animation-name: sana-cross-back;
}

.figure-sana-superhero {
  --duration: 152s;
  --delay: -28s;
  animation-name: sana-slow-spin;
}

.figure-sana-walking {
  --duration: 136s;
  --delay: -96s;
  animation-name: sana-rise-center;
}

.figure-sana-glasses {
  --duration: 148s;
  --delay: -58s;
  animation-name: sana-fall-diagonal;
}

.figure-academy-logo {
  width: clamp(42px, 4.7vw, 70px);
  --peak-opacity: 0.72;
  --duration: 168s;
  --delay: -84s;
  animation-name: academy-logo-drift;
  filter: drop-shadow(0 0 12px rgba(255, 235, 190, 0.42)) drop-shadow(0 10px 20px rgba(7, 1, 15, 0.25));
}

@keyframes academy-logo-drift {
  0%, 100% { opacity: 0; transform: translate3d(-12vw, 74vh, 0) rotate(-10deg) scale(.72); }
  9% { opacity: var(--peak-opacity); }
  38% { opacity: var(--peak-opacity); transform: translate3d(34vw, 20vh, 0) rotate(7deg) scale(.9); }
  66% { opacity: var(--peak-opacity); transform: translate3d(72vw, 62vh, 0) rotate(355deg) scale(1); }
  86% { opacity: 0; transform: translate3d(112vw, 30vh, 0) rotate(372deg) scale(.78); }
}

/* Safari/iPadOS can restore a page from memory with frozen compositor layers.
   JavaScript briefly applies this class after loading, rotation and tab return. */
.motion-reset .floating-figure,
.motion-reset .academy-float,
.motion-reset .shooting-star {
  animation-name: none !important;
}

.shooting-star {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(110px, 15vw, 230px);
  height: 3px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 139, 75, 0.12) 18%, rgba(255, 205, 116, 0.58) 63%, #fff5ca 88%, #fff 100%);
  box-shadow: 0 0 10px rgba(255, 226, 161, 0.9), 0 0 24px rgba(255, 154, 95, 0.55);
  transform-origin: right center;
  animation: shooting-star-arrival 16s cubic-bezier(0.22, 0.78, 0.28, 1) infinite;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.shooting-star::before {
  position: absolute;
  top: 50%;
  right: 0;
  width: 44%;
  height: 11px;
  content: "";
  transform: translateY(-50%);
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 112, 54, 0.2), rgba(255, 223, 144, 0.72));
  filter: blur(4px);
}

.shooting-star::after {
  position: absolute;
  top: 50%;
  right: -5px;
  width: 16px;
  height: 9px;
  content: "";
  transform: translateY(-50%);
  border-radius: 70% 45% 45% 70%;
  background: radial-gradient(ellipse at 72% 50%, #fff 0 18%, #fff4bf 30%, #ffbd62 55%, rgba(255, 101, 49, 0.48) 73%, transparent 76%);
  box-shadow: 0 0 14px 5px rgba(255, 216, 129, 0.68), 0 0 28px 10px rgba(255, 111, 62, 0.27);
}

.shooting-star-two {
  animation-duration: 23s;
  animation-delay: -7s;
}

@keyframes starfield-breathe {
  from { opacity: 0.31; transform: scale(1); background-position: 0 0, 0 0, 0 0, 0 0; }
  to { opacity: 0.5; transform: scale(1.012); background-position: 16px -12px, -21px 18px, 12px 20px, -15px -18px; }
}

@keyframes quiet-stars {
  from { transform: translate3d(0, 0, 0); opacity: 0.38; }
  to { transform: translate3d(28px, -46px, 0); opacity: 0.6; }
}

@keyframes planet-drift {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(0.96); }
  to { transform: translate3d(var(--travel-x), var(--travel-y), 0) rotate(var(--turn)) scale(1.04); }
}

@keyframes shooting-star-arrival {
  0% {
    opacity: 0;
    transform: translate3d(-24vw, -18vh, 0) rotate(34deg) scale(0.28);
    transform: translate3d(-24dvw, -18dvh, 0) rotate(34deg) scale(0.28);
  }
  2% { opacity: 0.92; }
  9% {
    opacity: 1;
    transform: translate3d(62vw, 50vh, 0) rotate(34deg) scale(1.15);
    transform: translate3d(62dvw, 50dvh, 0) rotate(34deg) scale(1.15);
  }
  15%, 100% {
    opacity: 0;
    transform: translate3d(142vw, 114vh, 0) rotate(34deg) scale(2.35);
    transform: translate3d(142dvw, 114dvh, 0) rotate(34deg) scale(2.35);
  }
}

@keyframes heart-flies-by {
  0% {
    opacity: 0;
    transform: translate3d(-24vw, 92vh, 0) rotate(-10deg) scale(0.58);
    transform: translate3d(-24dvw, 92dvh, 0) rotate(-10deg) scale(0.58);
  }
  2% { opacity: 0.94; }
  9% {
    opacity: 1;
    transform: translate3d(28vw, 68vh, 0) rotate(-3deg) scale(0.72);
    transform: translate3d(28dvw, 68dvh, 0) rotate(-3deg) scale(0.72);
  }
  18% {
    opacity: 1;
    transform: translate3d(62vw, 43vh, 0) rotate(5deg) scale(0.9);
    transform: translate3d(62dvw, 43dvh, 0) rotate(5deg) scale(0.9);
  }
  27% {
    opacity: 0.9;
    transform: translate3d(100vw, 18vh, 0) rotate(10deg) scale(0.72);
    transform: translate3d(100dvw, 18dvh, 0) rotate(10deg) scale(0.72);
  }
  32%, 100% {
    opacity: 0;
    transform: translate3d(128vw, -12vh, 0) rotate(13deg) scale(0.56);
    transform: translate3d(128dvw, -12dvh, 0) rotate(13deg) scale(0.56);
  }
}

@keyframes figure-glide-a {
  0% {
    opacity: 0;
    transform: translate3d(-18vw, 18vh, 0) rotate(-8deg) scale(0.72);
    transform: translate3d(-18dvw, 18dvh, 0) rotate(-8deg) scale(0.72);
  }
  5% { opacity: var(--peak-opacity); }
  30% {
    opacity: var(--peak-opacity);
    transform: translate3d(22vw, 32vh, 0) rotate(2deg) scale(0.9);
    transform: translate3d(22dvw, 32dvh, 0) rotate(2deg) scale(0.9);
  }
  58% {
    opacity: var(--peak-opacity);
    transform: translate3d(63vw, 15vh, 0) rotate(8deg) scale(1.04);
    transform: translate3d(63dvw, 15dvh, 0) rotate(8deg) scale(1.04);
  }
  79% {
    opacity: 0;
    transform: translate3d(114vw, 39vh, 0) rotate(14deg) scale(0.8);
    transform: translate3d(114dvw, 39dvh, 0) rotate(14deg) scale(0.8);
  }
  100% { opacity: 0; transform: translate3d(114vw, 39vh, 0) rotate(14deg) scale(0.8); }
}

@keyframes figure-glide-b {
  0% {
    opacity: 0;
    transform: translate3d(112vw, 8vh, 0) rotate(7deg) scale(0.68);
    transform: translate3d(112dvw, 8dvh, 0) rotate(7deg) scale(0.68);
  }
  5% { opacity: var(--peak-opacity); }
  34% {
    opacity: var(--peak-opacity);
    transform: translate3d(66vw, 28vh, 0) rotate(-4deg) scale(0.98);
    transform: translate3d(66dvw, 28dvh, 0) rotate(-4deg) scale(0.98);
  }
  62% {
    opacity: var(--peak-opacity);
    transform: translate3d(26vw, 12vh, 0) rotate(4deg) scale(0.86);
    transform: translate3d(26dvw, 12dvh, 0) rotate(4deg) scale(0.86);
  }
  80% {
    opacity: 0;
    transform: translate3d(-18vw, 38vh, 0) rotate(-8deg) scale(0.66);
    transform: translate3d(-18dvw, 38dvh, 0) rotate(-8deg) scale(0.66);
  }
  100% { opacity: 0; transform: translate3d(-18vw, 38vh, 0) rotate(-8deg) scale(0.66); }
}

@keyframes figure-hop {
  0% {
    opacity: 0;
    transform: translate3d(-20vw, 76vh, 0) rotate(-4deg) scale(0.68);
    transform: translate3d(-20dvw, 76dvh, 0) rotate(-4deg) scale(0.68);
  }
  5% { opacity: var(--peak-opacity); }
  19% {
    opacity: var(--peak-opacity);
    transform: translate3d(10vw, 68vh, 0) rotate(2deg) scale(0.86);
    transform: translate3d(10dvw, 68dvh, 0) rotate(2deg) scale(0.86);
  }
  31% {
    opacity: var(--peak-opacity);
    transform: translate3d(30vw, 48vh, 0) rotate(-5deg) scale(0.94);
    transform: translate3d(30dvw, 48dvh, 0) rotate(-5deg) scale(0.94);
  }
  43% {
    opacity: var(--peak-opacity);
    transform: translate3d(48vw, 70vh, 0) rotate(3deg) scale(1.02);
    transform: translate3d(48dvw, 70dvh, 0) rotate(3deg) scale(1.02);
  }
  57% {
    opacity: var(--peak-opacity);
    transform: translate3d(70vw, 50vh, 0) rotate(-3deg) scale(0.92);
    transform: translate3d(70dvw, 50dvh, 0) rotate(-3deg) scale(0.92);
  }
  72% {
    opacity: var(--peak-opacity);
    transform: translate3d(94vw, 69vh, 0) rotate(5deg) scale(0.82);
    transform: translate3d(94dvw, 69dvh, 0) rotate(5deg) scale(0.82);
  }
  82% {
    opacity: 0;
    transform: translate3d(116vw, 57vh, 0) rotate(8deg) scale(0.7);
    transform: translate3d(116dvw, 57dvh, 0) rotate(8deg) scale(0.7);
  }
  100% { opacity: 0; transform: translate3d(116vw, 57vh, 0) rotate(8deg) scale(0.7); }
}

@keyframes figure-wander {
  0% {
    opacity: 0;
    transform: translate3d(108vw, 82vh, 0) rotate(5deg) scale(0.7);
    transform: translate3d(108dvw, 82dvh, 0) rotate(5deg) scale(0.7);
  }
  5% { opacity: var(--peak-opacity); }
  29% {
    opacity: var(--peak-opacity);
    transform: translate3d(77vw, 64vh, 0) rotate(-4deg) scale(0.91);
    transform: translate3d(77dvw, 64dvh, 0) rotate(-4deg) scale(0.91);
  }
  48% {
    opacity: var(--peak-opacity);
    transform: translate3d(51vw, 77vh, 0) rotate(4deg) scale(1);
    transform: translate3d(51dvw, 77dvh, 0) rotate(4deg) scale(1);
  }
  67% {
    opacity: var(--peak-opacity);
    transform: translate3d(24vw, 56vh, 0) rotate(-5deg) scale(0.87);
    transform: translate3d(24dvw, 56dvh, 0) rotate(-5deg) scale(0.87);
  }
  82% {
    opacity: 0;
    transform: translate3d(-17vw, 72vh, 0) rotate(-10deg) scale(0.66);
    transform: translate3d(-17dvw, 72dvh, 0) rotate(-10deg) scale(0.66);
  }
  100% { opacity: 0; transform: translate3d(-17vw, 72vh, 0) rotate(-10deg) scale(0.66); }
}

@keyframes figure-anchor-drift {
  0% {
    opacity: 0;
    transform: translate3d(-14vw, 45vh, 0) rotate(-7deg) scale(0.7);
    transform: translate3d(-14dvw, 45dvh, 0) rotate(-7deg) scale(0.7);
  }
  7% { opacity: var(--peak-opacity); }
  32% {
    opacity: var(--peak-opacity);
    transform: translate3d(26vw, 26vh, 0) rotate(4deg) scale(0.9);
    transform: translate3d(26dvw, 26dvh, 0) rotate(4deg) scale(0.9);
  }
  58% {
    opacity: var(--peak-opacity);
    transform: translate3d(61vw, 41vh, 0) rotate(-4deg) scale(1);
    transform: translate3d(61dvw, 41dvh, 0) rotate(-4deg) scale(1);
  }
  79% {
    opacity: 0;
    transform: translate3d(111vw, 20vh, 0) rotate(7deg) scale(0.72);
    transform: translate3d(111dvw, 20dvh, 0) rotate(7deg) scale(0.72);
  }
  100% { opacity: 0; transform: translate3d(111vw, 20vh, 0) rotate(7deg) scale(0.72); }
}

@keyframes figure-sleep-drift {
  0% {
    opacity: 0;
    transform: translate3d(105vw, 43vh, 0) rotate(4deg) scale(0.72);
    transform: translate3d(105dvw, 43dvh, 0) rotate(4deg) scale(0.72);
  }
  6% { opacity: var(--peak-opacity); }
  31% {
    opacity: var(--peak-opacity);
    transform: translate3d(70vw, 21vh, 0) rotate(-3deg) scale(0.92);
    transform: translate3d(70dvw, 21dvh, 0) rotate(-3deg) scale(0.92);
  }
  57% {
    opacity: var(--peak-opacity);
    transform: translate3d(36vw, 38vh, 0) rotate(3deg) scale(1);
    transform: translate3d(36dvw, 38dvh, 0) rotate(3deg) scale(1);
  }
  80% {
    opacity: 0;
    transform: translate3d(-18vw, 18vh, 0) rotate(-6deg) scale(0.68);
    transform: translate3d(-18dvw, 18dvh, 0) rotate(-6deg) scale(0.68);
  }
  100% { opacity: 0; transform: translate3d(-18vw, 18vh, 0) rotate(-6deg) scale(0.68); }
}

@keyframes sana-rise {
  0% {
    opacity: 0;
    transform: translate3d(6vw, 114vh, 0) rotate(-9deg) scale(0.78);
    transform: translate3d(6dvw, 114dvh, 0) rotate(-9deg) scale(0.78);
  }
  8% {
    opacity: var(--peak-opacity);
    transform: translate3d(15vw, 94vh, 0) rotate(-5deg) scale(0.86);
    transform: translate3d(15dvw, 94dvh, 0) rotate(-5deg) scale(0.86);
  }
  28% {
    opacity: var(--peak-opacity);
    transform: translate3d(37vw, 55vh, 0) rotate(3deg) scale(1);
    transform: translate3d(37dvw, 55dvh, 0) rotate(3deg) scale(1);
  }
  48% {
    opacity: var(--peak-opacity);
    transform: translate3d(64vw, 17vh, 0) rotate(11deg) scale(0.9);
    transform: translate3d(64dvw, 17dvh, 0) rotate(11deg) scale(0.9);
  }
  60%, 100% {
    opacity: 0;
    transform: translate3d(84vw, -18vh, 0) rotate(17deg) scale(0.76);
    transform: translate3d(84dvw, -18dvh, 0) rotate(17deg) scale(0.76);
  }
}

@keyframes sana-descend {
  0% {
    opacity: 0;
    transform: translate3d(78vw, -20vh, 0) rotate(14deg) scale(0.76);
    transform: translate3d(78dvw, -20dvh, 0) rotate(14deg) scale(0.76);
  }
  8% {
    opacity: var(--peak-opacity);
    transform: translate3d(68vw, 12vh, 0) rotate(9deg) scale(0.88);
    transform: translate3d(68dvw, 12dvh, 0) rotate(9deg) scale(0.88);
  }
  28% {
    opacity: var(--peak-opacity);
    transform: translate3d(45vw, 49vh, 0) rotate(1deg) scale(1);
    transform: translate3d(45dvw, 49dvh, 0) rotate(1deg) scale(1);
  }
  48% {
    opacity: var(--peak-opacity);
    transform: translate3d(22vw, 88vh, 0) rotate(-8deg) scale(0.88);
    transform: translate3d(22dvw, 88dvh, 0) rotate(-8deg) scale(0.88);
  }
  60%, 100% {
    opacity: 0;
    transform: translate3d(9vw, 116vh, 0) rotate(-14deg) scale(0.74);
    transform: translate3d(9dvw, 116dvh, 0) rotate(-14deg) scale(0.74);
  }
}

@keyframes sana-cross {
  0% {
    opacity: 0;
    transform: translate3d(-18vw, 61vh, 0) rotate(-10deg) scale(0.76);
    transform: translate3d(-18dvw, 61dvh, 0) rotate(-10deg) scale(0.76);
  }
  8% {
    opacity: var(--peak-opacity);
    transform: translate3d(-4vw, 55vh, 0) rotate(-6deg) scale(0.86);
    transform: translate3d(-4dvw, 55dvh, 0) rotate(-6deg) scale(0.86);
  }
  28% {
    opacity: var(--peak-opacity);
    transform: translate3d(41vw, 31vh, 0) rotate(4deg) scale(1);
    transform: translate3d(41dvw, 31dvh, 0) rotate(4deg) scale(1);
  }
  48% {
    opacity: var(--peak-opacity);
    transform: translate3d(82vw, 61vh, 0) rotate(12deg) scale(0.9);
    transform: translate3d(82dvw, 61dvh, 0) rotate(12deg) scale(0.9);
  }
  60%, 100% {
    opacity: 0;
    transform: translate3d(116vw, 40vh, 0) rotate(18deg) scale(0.76);
    transform: translate3d(116dvw, 40dvh, 0) rotate(18deg) scale(0.76);
  }
}

@keyframes sana-cross-back {
  0% {
    opacity: 0;
    transform: translate3d(116vw, 22vh, 0) rotate(12deg) scale(0.76);
    transform: translate3d(116dvw, 22dvh, 0) rotate(12deg) scale(0.76);
  }
  8% {
    opacity: var(--peak-opacity);
    transform: translate3d(101vw, 31vh, 0) rotate(8deg) scale(0.88);
    transform: translate3d(101dvw, 31dvh, 0) rotate(8deg) scale(0.88);
  }
  28% {
    opacity: var(--peak-opacity);
    transform: translate3d(59vw, 51vh, 0) rotate(-2deg) scale(1);
    transform: translate3d(59dvw, 51dvh, 0) rotate(-2deg) scale(1);
  }
  48% {
    opacity: var(--peak-opacity);
    transform: translate3d(18vw, 27vh, 0) rotate(-12deg) scale(0.9);
    transform: translate3d(18dvw, 27dvh, 0) rotate(-12deg) scale(0.9);
  }
  60%, 100% {
    opacity: 0;
    transform: translate3d(-18vw, 66vh, 0) rotate(-18deg) scale(0.76);
    transform: translate3d(-18dvw, 66dvh, 0) rotate(-18deg) scale(0.76);
  }
}

@keyframes sana-slow-spin {
  0% {
    opacity: 0;
    transform: translate3d(-16vw, 102vh, 0) rotate(-18deg) scale(0.75);
    transform: translate3d(-16dvw, 102dvh, 0) rotate(-18deg) scale(0.75);
  }
  8% {
    opacity: var(--peak-opacity);
    transform: translate3d(4vw, 87vh, 0) rotate(0deg) scale(0.86);
    transform: translate3d(4dvw, 87dvh, 0) rotate(0deg) scale(0.86);
  }
  28% {
    opacity: var(--peak-opacity);
    transform: translate3d(45vw, 47vh, 0) rotate(180deg) scale(1);
    transform: translate3d(45dvw, 47dvh, 0) rotate(180deg) scale(1);
  }
  48% {
    opacity: var(--peak-opacity);
    transform: translate3d(82vw, 13vh, 0) rotate(342deg) scale(0.88);
    transform: translate3d(82dvw, 13dvh, 0) rotate(342deg) scale(0.88);
  }
  60%, 100% {
    opacity: 0;
    transform: translate3d(112vw, -17vh, 0) rotate(378deg) scale(0.74);
    transform: translate3d(112dvw, -17dvh, 0) rotate(378deg) scale(0.74);
  }
}

@keyframes sana-rise-center {
  0% {
    opacity: 0;
    transform: translate3d(48vw, 115vh, 0) rotate(-5deg) scale(0.76);
    transform: translate3d(48dvw, 115dvh, 0) rotate(-5deg) scale(0.76);
  }
  8% {
    opacity: var(--peak-opacity);
    transform: translate3d(43vw, 94vh, 0) rotate(-2deg) scale(0.86);
    transform: translate3d(43dvw, 94dvh, 0) rotate(-2deg) scale(0.86);
  }
  28% {
    opacity: var(--peak-opacity);
    transform: translate3d(24vw, 57vh, 0) rotate(5deg) scale(1);
    transform: translate3d(24dvw, 57dvh, 0) rotate(5deg) scale(1);
  }
  48% {
    opacity: var(--peak-opacity);
    transform: translate3d(58vw, 19vh, 0) rotate(10deg) scale(0.9);
    transform: translate3d(58dvw, 19dvh, 0) rotate(10deg) scale(0.9);
  }
  60%, 100% {
    opacity: 0;
    transform: translate3d(76vw, -18vh, 0) rotate(15deg) scale(0.76);
    transform: translate3d(76dvw, -18dvh, 0) rotate(15deg) scale(0.76);
  }
}

@keyframes sana-fall-diagonal {
  0% {
    opacity: 0;
    transform: translate3d(22vw, -20vh, 0) rotate(-8deg) scale(0.76);
    transform: translate3d(22dvw, -20dvh, 0) rotate(-8deg) scale(0.76);
  }
  8% {
    opacity: var(--peak-opacity);
    transform: translate3d(31vw, 10vh, 0) rotate(-4deg) scale(0.86);
    transform: translate3d(31dvw, 10dvh, 0) rotate(-4deg) scale(0.86);
  }
  28% {
    opacity: var(--peak-opacity);
    transform: translate3d(55vw, 45vh, 0) rotate(7deg) scale(1);
    transform: translate3d(55dvw, 45dvh, 0) rotate(7deg) scale(1);
  }
  48% {
    opacity: var(--peak-opacity);
    transform: translate3d(81vw, 83vh, 0) rotate(18deg) scale(0.9);
    transform: translate3d(81dvw, 83dvh, 0) rotate(18deg) scale(0.9);
  }
  60%, 100% {
    opacity: 0;
    transform: translate3d(107vw, 112vh, 0) rotate(25deg) scale(0.76);
    transform: translate3d(107dvw, 112dvh, 0) rotate(25deg) scale(0.76);
  }
}

img { display: block; width: 100%; max-width: 100%; height: auto; }
a { color: inherit; }

a,
button { touch-action: manipulation; }

main section[id],
footer[id] { scroll-margin-top: var(--header-clearance, 10rem); }

.hero > *,
.manifesto > *,
.intro > *,
.story > *,
.sana-section > *,
.luminosana-section > *,
.footer > * { min-width: 0; }

.skip-link {
  position: fixed;
  top: -4rem;
  left: 1rem;
  z-index: 1000;
  padding: 0.7rem 1rem;
  color: #20102e;
  background: #fff;
  border-radius: 0.5rem;
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: fixed;
  top: 1rem;
  left: 50%;
  z-index: 100;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.55rem 0.75rem;
  width: min(1180px, calc(100% - 2rem));
  min-height: 68px;
  padding: 0.65rem max(0.85rem, env(safe-area-inset-right)) 0.65rem max(1rem, env(safe-area-inset-left));
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1.25rem;
  background: rgba(18, 6, 34, 0.62);
  box-shadow: 0 16px 42px rgba(7, 1, 15, 0.22);
  backdrop-filter: blur(18px) saturate(125%);
}

.brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  letter-spacing: 0.13em;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #4c213c;
  background: linear-gradient(145deg, #fff8d5, #ffc85d 62%, #ee8b3f);
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 50%;
  box-shadow: 0 0 26px rgba(255, 198, 84, 0.36);
}

.brand strong,
.footer-brand strong {
  display: block;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
}

.brand small,
.footer-brand small {
  display: block;
  margin-top: 0.25rem;
  color: #c8bed5;
  font-size: 0.68rem;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-header > .brand { grid-column: 1; grid-row: 1; }
.site-header > .menu-button { grid-column: 2; grid-row: 1; justify-self: end; }
.site-header > .navigation { grid-column: 2; grid-row: 1; }

/* Unterkategorien bleiben auch bei geschlossenem Handy-Menü sichtbar. */
.category-navigation {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  padding: 0.75rem 0.3rem 0.3rem;
  border-top: 1px solid rgba(255, 229, 161, 0.22);
}

.category-link {
  --category-start: #633080;
  --category-middle: #9c337d;
  --category-end: #985322;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-width: 0;
  min-height: 62px;
  padding: 0.65rem 1.15rem;
  border: 1px solid rgba(255, 224, 139, 0.9);
  border-radius: 44% 56% 48% 52% / 58% 44% 56% 42%;
  color: #fffaf0;
  background:
    radial-gradient(ellipse at 16% 10%, rgba(255, 220, 139, 0.26), transparent 48%),
    linear-gradient(130deg, var(--category-start), var(--category-middle) 58%, var(--category-end));
  box-shadow: 0 0 0 2px rgba(255, 248, 224, 0.66),
    0 0 0 4px rgba(180, 110, 179, 0.28),
    0 6px 16px rgba(6, 1, 14, 0.24);
  font-family: var(--heading);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: transform 180ms ease;
}

.category-link--luminosana {
  --category-start: #275b89;
  --category-middle: #65418d;
  --category-end: #92572c;
  border-radius: 52% 48% 56% 44% / 44% 56% 42% 58%;
}

.category-link--academy {
  --category-start: #24635f;
  --category-middle: #347363;
  --category-end: #92572c;
  border-radius: 48% 52% 42% 58% / 56% 44% 58% 42%;
}

.category-link::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 244, 209, 0.34);
  border-radius: inherit;
  pointer-events: none;
}

.category-link::after {
  content: "\2727";
  position: absolute;
  top: 0.35rem;
  right: 12%;
  color: var(--gold-bright);
  font: 0.85rem/1 var(--serif);
  pointer-events: none;
}

.category-link-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid #fff0c4;
  border-radius: 50%;
  color: #71316f;
  background: radial-gradient(circle at 32% 24%, #fffdf3, #ffe29b 66%, #eeb06c);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16);
}

.category-link-icon svg { width: 20px; height: 20px; }
.category-link-label { position: relative; text-shadow: 0 1px 2px rgba(20, 4, 34, 0.45); }

.category-link.active,
.category-link:focus-visible {
  border-color: #fff6d6;
  box-shadow: 0 0 0 2px #ffe5a1,
    0 0 0 5px rgba(255, 217, 130, 0.22),
    0 4px 18px rgba(255, 195, 95, 0.2);
}

.category-link.active .category-link-label::after {
  content: "";
  position: absolute;
  right: 22%;
  bottom: -0.3rem;
  left: 22%;
  height: 2px;
  border-radius: 50%;
  background: var(--gold-bright);
}

@media (hover: hover) {
  .category-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 2px #fff0c4,
      0 0 0 4px rgba(255, 217, 130, 0.25),
      0 7px 20px rgba(239, 158, 85, 0.22);
  }
}

.category-link:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 7px;
}

@media (max-width: 600px) {
  .category-navigation { gap: 0.65rem; padding-right: 0; padding-left: 0; }
  .category-link {
    flex-direction: column;
    gap: 0.35rem;
    min-height: 78px;
    padding: 0.6rem 0.2rem 0.75rem;
    border-radius: 36% 42% 38% 40% / 44% 40% 48% 42%;
    font-size: clamp(0.7rem, 3.35vw, 0.95rem);
    overflow-wrap: anywhere;
  }
  .category-link-icon { width: 27px; height: 27px; }
  .category-link-icon svg { width: 16px; height: 16px; }
  .category-link::after { top: 0.65rem; right: 13%; font-size: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .category-link { transition: none; }
  .category-link:hover { transform: none; }
}

.navigation { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.2rem; min-width: 0; }

.navigation a {
  padding: 0.65rem 0.72rem;
  color: #ddd5e7;
  border-radius: 0.7rem;
  font-size: 0.875rem;
  white-space: nowrap;
  font-weight: 550;
  text-decoration: none;
  transition: color 180ms ease, background 180ms ease;
}

.navigation a:hover,
.navigation a:focus-visible,
.navigation a.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
}

.menu-button { display: none; }

.menu-button:focus-visible,
.navigation a:focus-visible,
.button:focus-visible,
.text-link:focus-visible,
.brand:focus-visible,
.scroll-cue:focus-visible,
.footer a:focus-visible {
  outline: 3px solid rgba(255, 229, 161, 0.95);
  outline-offset: 3px;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
  width: min(1360px, 100%);
  min-height: 100svh;
  margin: 0 auto;
  padding: 6.75rem clamp(1.5rem, 5vw, 5rem) 2.75rem;
}

.hero::before {
  position: absolute;
  top: 9%;
  left: 3%;
  width: 38%;
  height: 64%;
  pointer-events: none;
  content: "";
  background: radial-gradient(ellipse, rgba(116, 54, 153, 0.22), transparent 70%);
  filter: blur(12px);
}

.hero-glow {
  position: absolute;
  top: 11%;
  right: -7%;
  width: 68%;
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 183, 74, 0.2), rgba(187, 54, 141, 0.1) 34%, transparent 68%);
  filter: blur(22px);
}

.hero-copy { position: relative; z-index: 2; }

.hero-copy .eyebrow { margin-bottom: 0.75rem; }

.hero-copy h1 {
  margin-bottom: 1rem;
  font-size: clamp(3rem, 5.2vw, 5.7rem);
  line-height: 1.06;
}

.eyebrow {
  margin: 0 0 1.1rem;
  color: var(--gold-bright);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.eyebrow::before {
  display: inline-block;
  width: 2rem;
  height: 1px;
  margin-right: 0.65rem;
  vertical-align: middle;
  content: "";
  background: linear-gradient(90deg, transparent, var(--gold));
}

h1, h2, h3, p { margin-top: 0; }

h1,
h2 {
  margin-bottom: 1.4rem;
  font-family: var(--heading);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.12;
}

h3 { font-family: var(--heading); }

h1 { font-size: clamp(3.2rem, 6vw, 6.7rem); }
h2 { font-size: clamp(2.4rem, 4.5vw, 4.8rem); }

h1 em {
  color: var(--gold-bright);
  font-weight: 400;
  text-shadow: 0 0 32px rgba(255, 196, 94, 0.2);
}

.hero-subline {
  max-width: 33rem;
  margin-bottom: 0.65rem;
  color: #fff8e8;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.35;
}

.hero-text {
  max-width: 33rem;
  margin-bottom: 1.35rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.button:hover,
.button:focus-visible { transform: translateY(-2px); }

.button-primary {
  color: #27112a;
  background: linear-gradient(135deg, #fff1bd, #ffca63 58%, #ed9048);
  box-shadow: 0 12px 32px rgba(255, 177, 69, 0.24);
}

.button-primary:hover,
.button-primary:focus-visible { box-shadow: 0 16px 38px rgba(255, 177, 69, 0.34); }

.button-quiet {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.065);
  backdrop-filter: blur(10px);
}

.hero-visual {
  position: relative;
  z-index: 1;
  margin: 0;
  justify-self: end;
  width: min(100%, clamp(440px, 39vw, 520px));
}

.image-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 238, 204, 0.27);
  border-radius: clamp(1.7rem, 3vw, 3.3rem);
  box-shadow: var(--shadow);
}

.image-frame::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: inherit;
  box-shadow: inset 0 0 70px rgba(33, 7, 50, 0.2);
}

.image-frame img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 44%; }

.hero-visual figcaption {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  color: #fff7e9;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(22, 7, 37, 0.62);
  font-size: 0.83rem;
  font-weight: 650;
  backdrop-filter: blur(14px);
}

.caption-star { color: var(--gold); }

.scroll-cue {
  position: absolute;
  bottom: 1.5rem;
  left: clamp(1.5rem, 5vw, 5rem);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #aea2bd;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-decoration: none;
  text-transform: uppercase;
}

.scroll-cue i { position: relative; width: 48px; height: 1px; background: rgba(255, 255, 255, 0.26); }
.scroll-cue i::after { position: absolute; top: -2px; right: 0; width: 5px; height: 5px; content: ""; background: var(--gold); border-radius: 50%; }

.section { width: min(1180px, calc(100% - 3rem)); margin: 0 auto; }

.manifesto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
  padding: 9rem 0 5rem;
}

.manifesto-image {
  overflow: hidden;
  border: 1px solid rgba(255, 237, 189, 0.3);
  border-radius: clamp(1.7rem, 3vw, 3rem);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: var(--shadow);
}

.manifesto-image img { aspect-ratio: 1; object-fit: cover; }

.manifesto-copy h2 {
  max-width: 580px;
  color: var(--gold-bright);
  font-size: clamp(2.4rem, 4.3vw, 4.5rem);
}

.manifesto-copy > p:not(.eyebrow) {
  max-width: 34rem;
  color: var(--ink-soft);
  font-size: 1.08rem;
}

.manifesto-copy .manifesto-lead {
  margin-bottom: 0.65rem;
  color: #fff8e8;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.4;
}

.intro {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
  padding: 9rem 0 5rem;
}

.intro h2 { max-width: 690px; margin-bottom: 0; }
.intro-image { margin-top: clamp(2rem, 4vw, 3.5rem); }
.intro-copy { padding-bottom: 0.4rem; color: var(--ink-soft); font-size: 1.08rem; }
.intro-copy p { margin-bottom: 1.5rem; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--gold-bright);
  font-weight: 700;
  text-decoration: none;
}
.text-link span { transition: transform 180ms ease; }
.text-link:hover span,
.text-link:focus-visible span { transform: translateX(4px); }

.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-bottom: 9rem;
}

.value-card {
  min-height: 280px;
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025));
  box-shadow: 0 18px 54px rgba(7, 1, 15, 0.16);
}

.value-number { color: rgba(255, 229, 161, 0.58); font-family: var(--serif); font-size: 0.86rem; }
.value-card h3 { margin: 4rem 0 0.8rem; font-size: 2rem; font-weight: 400; }
.value-card p { max-width: 18rem; margin: 0; color: var(--ink-soft); }

.story,
.sana-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
  padding: 7rem 0;
}

.story-image,
.sana-image { overflow: hidden; border: 1px solid var(--line); border-radius: 2rem; box-shadow: var(--shadow); }
.story-image img,
.sana-image img { aspect-ratio: 1; object-fit: cover; transition: transform 700ms ease; }
.story-image:hover img,
.sana-image:hover img { transform: scale(1.025); }

.image-frame,
.manifesto-image,
.intro-image,
.story-image,
.sana-image,
.luminosana-sana-image,
.about-image {
  --frame-a: rgba(255, 210, 112, 0.38);
  --frame-b: rgba(92, 184, 255, 0.32);
  --frame-c: rgba(223, 102, 191, 0.23);
  --frame-spark-a: rgba(255, 230, 156, 0.9);
  --frame-spark-b: rgba(129, 215, 255, 0.9);
  --frame-spark-c: rgba(232, 159, 255, 0.82);
  --frame-tilt: -1.3deg;
  --frame-counter-tilt: 1deg;
  --frame-radius: 43% 57% 38% 62% / 51% 39% 61% 49%;
  --frame-glow-radius: 39% 61% 45% 55% / 58% 42% 58% 42%;
  --image-radius: 42% 58% 37% 63% / 49% 41% 59% 51%;
  position: relative;
  isolation: isolate;
  overflow: visible;
  padding: clamp(0.45rem, 1.1vw, 0.85rem);
  border: 0;
  border-radius: var(--frame-radius);
  background: transparent;
  box-shadow: none;
}

.image-frame {
  --frame-a: rgba(255, 199, 92, 0.42);
  --frame-b: rgba(239, 117, 190, 0.3);
  --frame-c: rgba(136, 92, 211, 0.27);
  --frame-spark-b: rgba(255, 173, 219, 0.9);
  --frame-tilt: -0.8deg;
  --frame-counter-tilt: 0.65deg;
  --frame-radius: 48% 52% 42% 58% / 43% 57% 46% 54%;
  --image-radius: 47% 53% 40% 60% / 45% 55% 48% 52%;
}

.manifesto-image {
  --frame-a: rgba(255, 205, 103, 0.4);
  --frame-b: rgba(195, 112, 255, 0.33);
  --frame-c: rgba(255, 100, 182, 0.24);
  --frame-spark-b: rgba(220, 170, 255, 0.92);
  --frame-tilt: 1.1deg;
  --frame-counter-tilt: -0.9deg;
  --frame-radius: 39% 61% 47% 53% / 55% 43% 57% 45%;
  --image-radius: 38% 62% 45% 55% / 53% 45% 55% 47%;
}

.sana-image {
  --frame-a: rgba(255, 186, 93, 0.36);
  --frame-b: rgba(71, 173, 255, 0.36);
  --frame-c: rgba(156, 92, 222, 0.28);
  --frame-spark-a: rgba(255, 218, 137, 0.92);
  --frame-spark-c: rgba(168, 196, 255, 0.86);
  --frame-tilt: 0.9deg;
  --frame-counter-tilt: -0.7deg;
  --frame-radius: 56% 44% 59% 41% / 45% 58% 42% 55%;
  --image-radius: 54% 46% 57% 43% / 47% 56% 44% 53%;
}

.luminosana-sana-image {
  --frame-a: rgba(255, 206, 92, 0.82);
  --frame-b: rgba(190, 118, 234, 0.7);
  --frame-c: rgba(255, 224, 139, 0.72);
  --frame-spark-a: rgba(255, 239, 181, 1);
  --frame-spark-b: rgba(221, 170, 255, 1);
  --frame-spark-c: rgba(255, 211, 103, 0.98);
  --frame-tilt: -1.4deg;
  --frame-counter-tilt: 1.1deg;
  --frame-radius: 46% 54% 42% 58% / 55% 43% 57% 45%;
  --image-radius: 44% 56% 40% 60% / 53% 45% 55% 47%;
}

.image-frame::before,
.manifesto-image::before,
.intro-image::before,
.story-image::before,
.sana-image::before,
.luminosana-sana-image::before,
.about-image::before {
  position: absolute;
  inset: -5%;
  z-index: -2;
  pointer-events: none;
  content: "";
  opacity: 0.82;
  border-radius: var(--frame-glow-radius);
  background:
    radial-gradient(circle at 8% 26%, var(--frame-spark-a) 0 2px, transparent 3px),
    radial-gradient(circle at 92% 18%, var(--frame-spark-b) 0 2px, transparent 3px),
    radial-gradient(circle at 94% 75%, var(--frame-spark-a) 0 2.5px, transparent 4px),
    radial-gradient(circle at 14% 86%, var(--frame-spark-c) 0 2px, transparent 3.5px),
    conic-gradient(from 205deg, transparent, var(--frame-b), var(--frame-c), var(--frame-a), transparent);
  filter: blur(12px);
  transform: rotate(var(--frame-tilt));
}

.image-frame::after,
.manifesto-image::after,
.intro-image::after,
.story-image::after,
.sana-image::after,
.luminosana-sana-image::after,
.about-image::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  pointer-events: none;
  content: "";
  opacity: 0.68;
  border: 0;
  border-radius: var(--frame-radius);
  background: radial-gradient(ellipse at 48% 50%, var(--frame-a), var(--frame-b) 48%, transparent 73%);
  box-shadow: 0 0 34px var(--frame-b), 0 0 56px var(--frame-a);
  transform: rotate(var(--frame-counter-tilt)) scale(1.035);
}

.image-frame img,
.manifesto-image img,
.intro-image img,
.story-image img,
.sana-image img,
.luminosana-sana-image img,
.about-image img {
  border-radius: var(--image-radius);
  filter: saturate(1.05) drop-shadow(0 24px 46px rgba(4, 1, 13, 0.34)) drop-shadow(0 0 20px var(--frame-a));
  -webkit-mask-image: radial-gradient(ellipse 100% 96% at 48% 50%, #000 54%, rgba(0, 0, 0, 0.98) 68%, rgba(0, 0, 0, 0.62) 82%, transparent 100%);
  mask-image: radial-gradient(ellipse 100% 96% at 48% 50%, #000 54%, rgba(0, 0, 0, 0.98) 68%, rgba(0, 0, 0, 0.62) 82%, transparent 100%);
}

.intro-image {
  --frame-a: rgba(255, 205, 105, 0.44);
  --frame-b: rgba(94, 184, 255, 0.3);
  --frame-c: rgba(225, 112, 194, 0.24);
  --frame-tilt: -0.9deg;
  --frame-counter-tilt: 0.8deg;
  --frame-radius: 48% 52% 43% 57% / 46% 55% 45% 54%;
  --image-radius: 47% 53% 42% 58% / 48% 53% 47% 52%;
}

.intro-image img {
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center;
}

.story-image {
  --frame-a: rgba(255, 210, 112, 0.38);
  --frame-b: rgba(92, 184, 255, 0.32);
  --frame-c: rgba(223, 102, 191, 0.23);
  --frame-tilt: -1.6deg;
  --frame-counter-tilt: 1.3deg;
}

.story-image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 48% center;
}

.story-copy p,
.sana-copy p { max-width: 33rem; color: var(--ink-soft); }
.story-highlight { margin: 2rem 0; padding-left: 1.25rem; color: #fff3cf !important; border-left: 1px solid var(--gold); font-family: var(--serif); font-size: 1.3rem; font-style: italic; }

.little-stories {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: clamp(1.5rem, 4vw, 4rem);
  padding-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid rgba(255, 229, 161, 0.18);
}

.little-stories-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
  column-gap: clamp(2rem, 7vw, 6rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}

.little-stories-heading .eyebrow { grid-column: 1 / -1; }
.little-stories-heading h3 {
  max-width: 720px;
  margin: 0;
  font-family: var(--heading);
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: 400;
  line-height: 1.18;
}
.little-stories-heading > p:last-child {
  max-width: 31rem;
  margin: 0 0 0.35rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.little-story-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 218, 137, 0.32);
  border-radius: 2rem 3.4rem 2.3rem 3rem;
  background:
    radial-gradient(circle at 12% 15%, rgba(255, 208, 101, 0.18), transparent 18rem),
    radial-gradient(circle at 89% 90%, rgba(217, 78, 156, 0.16), transparent 22rem),
    linear-gradient(145deg, rgba(74, 31, 104, 0.78), rgba(26, 10, 49, 0.92));
  box-shadow: 0 28px 80px rgba(6, 1, 14, 0.34), inset 0 1px rgba(255, 255, 255, 0.08);
}

.little-story-category {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.little-story-category:hover,
.little-story-category:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(255, 229, 161, 0.62);
  box-shadow: 0 34px 90px rgba(6, 1, 14, 0.44), 0 0 34px rgba(217, 78, 156, 0.13);
}
.little-story-category:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 5px; }
.little-story-card-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
  min-height: 210px;
  padding: clamp(1.5rem, 4vw, 3rem);
}

.little-story-card::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 9% 30%, #ffe5a1 0 1px, transparent 2px),
    radial-gradient(circle at 72% 17%, #ffffff 0 1px, transparent 2px),
    radial-gradient(circle at 91% 64%, #f7a8dc 0 1px, transparent 2px),
    radial-gradient(circle at 42% 88%, #ffe5a1 0 1px, transparent 2px);
}

.little-story-card summary {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: center;
  min-height: 210px;
  padding: clamp(1.5rem, 4vw, 3rem);
  cursor: pointer;
  list-style: none;
}
.little-story-card summary::-webkit-details-marker { display: none; }
.little-story-card summary:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -5px; }

.little-story-symbol {
  display: grid;
  width: clamp(62px, 8vw, 96px);
  aspect-ratio: 1;
  place-items: center;
  color: #fff4cc;
  border: 1px solid rgba(255, 229, 161, 0.45);
  border-radius: 42% 58% 54% 46% / 56% 43% 57% 44%;
  background: radial-gradient(circle, rgba(255, 215, 118, 0.38), rgba(217, 78, 156, 0.16) 58%, transparent 70%);
  box-shadow: 0 0 38px rgba(255, 204, 101, 0.22);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
}

.little-story-summary { display: grid; gap: 0.45rem; }
.little-story-summary small {
  color: var(--gold-bright);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.little-story-summary strong {
  font-family: var(--heading);
  font-size: clamp(1.65rem, 3vw, 2.75rem);
  font-weight: 400;
  line-height: 1.25;
}
.little-story-summary > span { color: var(--ink-soft); font-size: 1rem; }

.little-story-action {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  color: var(--gold-bright);
  font-weight: 750;
  white-space: nowrap;
}
.little-story-action i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(255, 229, 161, 0.4);
  border-radius: 50%;
  font-style: normal;
  transition: transform 250ms ease;
}
.little-story-card[open] .little-story-action i { transform: rotate(180deg); }
.little-story-card .read-close { display: none; }
.little-story-card[open] .read-open { display: none; }
.little-story-card[open] .read-close { display: inline; }

.little-story-reader {
  position: relative;
  z-index: 1;
  width: min(100% - 2rem, 720px);
  margin: 0 auto clamp(1rem, 3vw, 2.5rem);
  padding: clamp(2rem, 5vw, 4rem);
  color: #281236;
  border-radius: 1.4rem 2.6rem 1.8rem 2.2rem;
  background:
    linear-gradient(rgba(255, 252, 240, 0.94), rgba(255, 247, 224, 0.96)),
    #fffaf0;
  box-shadow: 0 24px 60px rgba(5, 0, 12, 0.3);
  font-family: var(--serif);
  font-size: clamp(1.08rem, 1.8vw, 1.25rem);
  line-height: 1.78;
}
.little-story-reader p { margin: 0 0 1.65em; }
.little-story-reader p:last-child { margin-bottom: 0; }
.story-direction,
.story-pause {
  color: #775e7e;
  font-style: italic;
}
.story-direction { padding-bottom: 1.25rem; border-bottom: 1px solid rgba(109, 43, 143, 0.18); }
.story-pause { font-size: 0.95rem; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }
.story-pause::before,
.story-pause::after { content: " ✦ "; color: #b47080; }
.story-light-line {
  color: #7c2868;
  font-size: clamp(1.35rem, 2.5vw, 1.8rem);
  text-align: center;
}

.story-listen {
  display: grid;
  justify-items: center;
  margin: -1.25rem auto clamp(2.8rem, 7vw, 4.6rem);
  text-align: center;
}
.story-listen-button {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .9rem;
  align-items: center;
  min-width: min(100%, 330px);
  padding: .85rem 1.05rem .85rem .85rem;
  overflow: hidden;
  color: #fffaf0;
  border: 1px solid rgba(255, 224, 139, .78);
  border-radius: 44% 56% 48% 52% / 58% 44% 56% 42%;
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 214, 105, .34), transparent 35%),
    linear-gradient(135deg, #7b2d91 0%, #c7479a 54%, #ef9e55 100%);
  box-shadow:
    0 14px 30px rgba(77, 31, 91, .28),
    0 0 0 6px rgba(255, 255, 255, .62),
    0 0 0 8px rgba(164, 84, 173, .22),
    0 0 30px rgba(244, 190, 82, .42);
  font-family: var(--sans);
  text-decoration: none;
  transform: rotate(-.35deg);
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}
.story-listen-button::before,
.story-listen-button::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}
.story-listen-button::before {
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, .36);
  border-radius: inherit;
}
.story-listen-button::after {
  inset: -40% -15%;
  background: linear-gradient(108deg, transparent 37%, rgba(255, 255, 255, .34) 50%, transparent 63%);
  transform: translateX(-70%) rotate(6deg);
  animation: story-listen-shimmer 4.8s ease-in-out infinite;
}
.story-listen-button:not(:disabled):hover,
.story-listen-button:not(:disabled):focus-visible {
  filter: saturate(1.1) brightness(1.05);
  box-shadow:
    0 18px 38px rgba(77, 31, 91, .34),
    0 0 0 6px rgba(255, 255, 255, .76),
    0 0 0 9px rgba(164, 84, 173, .32),
    0 0 42px rgba(255, 201, 88, .6);
  transform: translateY(-3px) rotate(.25deg) scale(1.02);
}
.story-listen-button:disabled { cursor: default; opacity: 1; }
.story-listen-button:focus-visible { outline: 3px solid #67317d; outline-offset: 8px; }
.story-listen-icon {
  display: grid;
  width: 52px;
  aspect-ratio: 1;
  place-items: center;
  padding-left: 3px;
  color: #7a2a78;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fffdf3, #ffe29b 62%, #f3a868);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .28), 0 0 22px rgba(255, 225, 133, .76);
  font-size: 1.15rem;
}
.story-listen-copy { display: grid; gap: .12rem; min-width: 0; text-align: left; }
.story-listen-copy strong {
  font-family: var(--heading);
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  font-weight: 400;
  line-height: 1.2;
}
.story-listen-copy small { color: #fff2cf; font-size: .78rem; font-weight: 800; letter-spacing: .04em; }
.story-listen-spark {
  color: #fff4bd;
  font-size: 1.35rem;
  filter: drop-shadow(0 0 7px #fff0a5);
  animation: story-listen-sparkle 2.2s ease-in-out infinite alternate;
}
.story-listen-glow {
  position: absolute;
  inset: 15% 20%;
  z-index: -2;
  border-radius: 50%;
  background: rgba(255, 212, 112, .32);
  filter: blur(18px);
}
.story-listen-feelings .story-listen-button {
  background: radial-gradient(circle at 16% 20%, rgba(255, 223, 151, .38), transparent 35%), linear-gradient(135deg, #933c99, #df519e 58%, #f5a760);
}
.story-listen-onion .story-listen-button {
  background: radial-gradient(circle at 16% 20%, rgba(255, 241, 157, .35), transparent 35%), linear-gradient(135deg, #657b45, #9a507e 55%, #d79254);
}
.story-listen-crystals .story-listen-button {
  background: radial-gradient(circle at 16% 20%, rgba(216, 247, 255, .42), transparent 35%), linear-gradient(135deg, #326bb0, #6c4bb4 56%, #d89f4d);
}
.story-listen-star-family .story-listen-button {
  background: radial-gradient(circle at 16% 20%, rgba(255, 238, 152, .42), transparent 35%), linear-gradient(135deg, #315fbe, #7548b1 55%, #e0a540);
}
.story-listen-heart .story-listen-button {
  background: radial-gradient(circle at 16% 20%, rgba(255, 235, 156, .42), transparent 35%), linear-gradient(135deg, #6e51b9, #c7499d 56%, #efaa4f);
}
.story-listen-thought-sparks .story-listen-button {
  background: radial-gradient(circle at 16% 20%, rgba(255, 244, 173, .46), transparent 35%), linear-gradient(135deg, #1f7f78, #2e9e8c 48%, #e28b61 100%);
}
@keyframes story-listen-shimmer {
  0%, 58% { transform: translateX(-75%) rotate(6deg); }
  82%, 100% { transform: translateX(75%) rotate(6deg); }
}
@keyframes story-listen-sparkle {
  from { opacity: .65; transform: scale(.88) rotate(-8deg); }
  to { opacity: 1; transform: scale(1.12) rotate(8deg); }
}

.stories-subpage {
  min-height: 100vh;
  padding: clamp(7.5rem, 11vw, 10rem) 0 5rem;
}
.stories-subpage-header {
  width: min(100% - 3rem, 920px);
  margin: 0 auto clamp(3rem, 6vw, 5rem);
  text-align: center;
}
.stories-subpage-header h1 {
  max-width: 880px;
  margin: 0 auto 1.25rem;
  font-size: clamp(2.8rem, 7vw, 6.2rem);
}
.stories-subpage-header > p:last-child {
  max-width: 680px;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}
.stories-breadcrumb {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  margin-bottom: 1.4rem;
  color: var(--gold-bright);
  font-weight: 750;
  text-decoration: none;
}
.stories-breadcrumb:hover,
.stories-breadcrumb:focus-visible { text-decoration: underline; text-underline-offset: 0.25rem; }
.stories-list {
  width: min(100% - 3rem, 1040px);
  margin: 0 auto;
}
.stories-list .little-story-card { margin-bottom: 1.5rem; }
.stories-list .little-story-card summary { min-height: 230px; }
.story-card-heart-universe {
  border-color: rgba(255, 205, 115, 0.48);
  background:
    radial-gradient(circle at 12% 15%, rgba(255, 173, 222, 0.24), transparent 19rem),
    radial-gradient(circle at 88% 88%, rgba(92, 176, 255, 0.2), transparent 22rem),
    linear-gradient(145deg, rgba(76, 37, 112, 0.9), rgba(24, 9, 51, 0.96));
}
.story-card-heart-universe .little-story-symbol {
  color: #ffe2f2;
  background: radial-gradient(circle, rgba(239, 104, 181, 0.42), rgba(255, 211, 102, 0.2) 58%, transparent 72%);
  box-shadow: 0 0 42px rgba(242, 132, 196, 0.3);
}
.story-card-feelings {
  border-color: rgba(244, 150, 211, 0.38);
  background:
    radial-gradient(circle at 12% 15%, rgba(255, 168, 221, 0.22), transparent 18rem),
    radial-gradient(circle at 89% 90%, rgba(255, 207, 107, 0.15), transparent 22rem),
    linear-gradient(145deg, rgba(82, 28, 91, 0.82), rgba(28, 8, 48, 0.94));
}
.story-card-feelings .little-story-symbol {
  color: #ffd1ec;
  background: radial-gradient(circle, rgba(241, 110, 190, 0.4), rgba(255, 206, 105, 0.16) 58%, transparent 70%);
  box-shadow: 0 0 38px rgba(236, 99, 179, 0.25);
}
.story-card-dream-crystals {
  border-color: rgba(116, 210, 255, 0.46);
  background:
    radial-gradient(circle at 12% 16%, rgba(73, 198, 255, 0.24), transparent 19rem),
    radial-gradient(circle at 88% 88%, rgba(255, 196, 81, 0.19), transparent 22rem),
    linear-gradient(145deg, rgba(38, 57, 109, 0.88), rgba(33, 10, 59, 0.96));
}
.story-card-dream-crystals .little-story-symbol {
  color: #b9efff;
  background: radial-gradient(circle, rgba(68, 196, 255, 0.42), rgba(255, 205, 94, 0.18) 58%, transparent 72%);
  box-shadow: 0 0 40px rgba(78, 201, 255, 0.32);
}
.story-card-star-family {
  border-color: rgba(255, 222, 119, 0.48);
  background:
    radial-gradient(circle at 13% 14%, rgba(80, 155, 255, 0.26), transparent 19rem),
    radial-gradient(circle at 87% 88%, rgba(255, 208, 83, 0.2), transparent 22rem),
    linear-gradient(145deg, rgba(36, 55, 123, 0.9), rgba(36, 10, 67, 0.96));
}
.story-card-star-family .little-story-symbol {
  color: #fff0a8;
  background: radial-gradient(circle, rgba(255, 217, 95, 0.46), rgba(79, 151, 255, 0.2) 58%, transparent 72%);
  box-shadow: 0 0 42px rgba(255, 218, 105, 0.3);
}
.story-card-onion-fear {
  border-color: rgba(220, 196, 100, 0.42);
  background:
    radial-gradient(circle at 14% 18%, rgba(173, 202, 98, 0.22), transparent 19rem),
    radial-gradient(circle at 86% 86%, rgba(190, 82, 181, 0.18), transparent 22rem),
    linear-gradient(145deg, rgba(55, 67, 48, 0.82), rgba(30, 11, 50, 0.95));
}
.story-card-onion-fear .little-story-symbol {
  color: #fff0a8;
  background: radial-gradient(circle, rgba(187, 211, 106, 0.38), rgba(157, 68, 170, 0.2) 60%, transparent 72%);
  box-shadow: 0 0 38px rgba(203, 214, 113, 0.24);
}
.story-card-thought-sparks {
  border-color: rgba(109, 224, 191, 0.46);
  background:
    radial-gradient(circle at 12% 15%, rgba(95, 220, 191, 0.24), transparent 19rem),
    radial-gradient(circle at 88% 88%, rgba(255, 176, 104, 0.2), transparent 22rem),
    linear-gradient(145deg, rgba(25, 91, 91, 0.9), rgba(25, 12, 53, 0.96));
}
.story-card-thought-sparks .little-story-symbol {
  color: #fff1ad;
  background: radial-gradient(circle, rgba(255, 222, 112, 0.45), rgba(79, 204, 177, 0.22) 58%, transparent 72%);
  box-shadow: 0 0 42px rgba(92, 222, 190, 0.3);
}

.story-card-quantum-cube {
  scroll-margin-top: var(--header-clearance, 10rem);
  border-color: rgba(255, 209, 104, .58);
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 201, 86, .3), transparent 19rem),
    radial-gradient(circle at 87% 86%, rgba(174, 120, 255, .22), transparent 22rem),
    linear-gradient(145deg, #664524, #311747 70%, #200f39);
}
.story-card-quantum-cube .little-story-symbol {
  color: #fff2b4;
  background: radial-gradient(circle, rgba(255, 213, 105, .5), rgba(185, 118, 232, .22) 58%, transparent 72%);
  box-shadow: 0 0 42px rgba(255, 212, 107, .34);
}
.story-card-quantum-cube .quantum-cube-portrait {
  width: 100%;
  min-height: 0;
  gap: 1.3rem;
  padding: clamp(1.5rem, 5vw, 2.5rem) clamp(1rem, 4vw, 2rem) 1.8rem;
  background:
    radial-gradient(circle at 50% 42%, #fffde1, transparent 64%),
    radial-gradient(circle at 84% 18%, rgba(250, 213, 116, .6), transparent 35%),
    linear-gradient(145deg, #fff2ce, #ecdef7);
}
.story-card-quantum-cube .onion-fear-image-wrap {
  width: min(100%, 430px);
  min-width: 0;
  border-radius: 43% 57% 47% 53% / 40% 44% 56% 60%;
  background: radial-gradient(ellipse at 50% 50%, rgba(169, 104, 226, .38) 58%, rgba(255, 214, 111, .24) 82%, transparent);
  filter: drop-shadow(0 0 18px rgba(255, 210, 109, .48)) drop-shadow(0 12px 22px rgba(96, 48, 130, .3));
}
.story-card-quantum-cube .onion-fear-image-wrap::before {
  position: absolute;
  z-index: -1;
  inset: -7px -4px;
  content: "";
  pointer-events: none;
  border: 2px solid rgba(239, 195, 102, .78);
  border-radius: 49% 51% 55% 45% / 43% 38% 62% 57%;
  box-shadow: 0 0 15px rgba(255, 207, 107, .28), inset 0 0 18px rgba(177, 115, 223, .2);
  transform: rotate(-4deg);
}
.story-card-quantum-cube .onion-fear-image-wrap img {
  border-radius: inherit;
  -webkit-mask-image: radial-gradient(ellipse 61% 56% at 50% 50%, #000 65%, rgba(0, 0, 0, .96) 74%, transparent 98%);
  mask-image: radial-gradient(ellipse 61% 56% at 50% 50%, #000 65%, rgba(0, 0, 0, .96) 74%, transparent 98%);
}
.story-card-quantum-cube .quantum-cube-portrait figcaption {
  position: relative;
  inset: auto;
  width: 100%;
  color: #69407e;
  font-size: clamp(1.05rem, 3vw, 1.6rem);
  line-height: 1.3;
}
.story-listen-quantum-cube .story-listen-button {
  min-width: 0;
  max-width: 100%;
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 237, 156, .46), transparent 35%),
    linear-gradient(135deg, #69407e, #98622d 62%, #bb8036);
}

.story-card-onion-play {
  --onion-accent: 96, 213, 148;
  --onion-dark: #174b3b;
  --onion-light: #e0f1d9;
  --onion-ink: #28523b;
}
.story-card-onion-blot {
  --onion-accent: 109, 180, 255;
  --onion-dark: #243c78;
  --onion-light: #dceaff;
  --onion-ink: #304b85;
}
.story-card-onion-moment {
  --onion-accent: 247, 158, 137;
  --onion-dark: #71384c;
  --onion-light: #f8e0df;
  --onion-ink: #773d58;
}
.story-card-onion-short {
  border-color: rgba(var(--onion-accent), .5);
  scroll-margin-top: var(--header-clearance, 10rem);
  background:
    radial-gradient(circle at 12% 15%, rgba(var(--onion-accent), .24), transparent 19rem),
    radial-gradient(circle at 88% 88%, rgba(255, 208, 101, .16), transparent 22rem),
    linear-gradient(145deg, var(--onion-dark), #1e0b32);
}
.story-card-onion-short .little-story-symbol {
  color: #fff0bd;
  background: radial-gradient(circle, rgba(var(--onion-accent), .42), rgba(255, 211, 102, .16) 58%, transparent 72%);
  box-shadow: 0 0 40px rgba(var(--onion-accent), .28);
}
.story-card-onion-short .onion-fear-portrait {
  min-height: 0;
  gap: 1.2rem;
  padding: clamp(1.7rem, 5vw, 2.8rem) clamp(1.2rem, 4vw, 2rem) 1.8rem;
  background:
    radial-gradient(circle at 50% 40%, #fffce0, transparent 64%),
    linear-gradient(145deg, #fff5de, var(--onion-light));
}
.story-card-onion-short .onion-fear-image-wrap {
  width: min(100%, 320px);
  min-width: 0;
}
.story-card-onion-short .onion-fear-portrait figcaption {
  position: relative;
  inset: auto;
  width: 100%;
  color: var(--onion-ink);
  font-size: clamp(1rem, 3vw, 1.45rem);
  line-height: 1.3;
}
.story-card-onion-short .story-listen-button {
  min-width: 0;
  max-width: 100%;
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 241, 157, .35), transparent 35%),
    linear-gradient(135deg, var(--onion-dark), var(--onion-ink) 60%, #a2694d);
}
.story-card-onion-short .story-light-line { color: var(--onion-ink); }

.onion-fear-portrait {
  position: relative;
  display: grid;
  width: min(100%, 410px);
  min-height: 420px;
  place-items: center;
  margin: 0 auto clamp(2.5rem, 6vw, 4rem);
  padding: clamp(2.4rem, 6vw, 4.2rem) clamp(2rem, 6vw, 4rem) clamp(3.6rem, 7vw, 4.8rem);
  isolation: isolate;
  border: 1px solid rgba(126, 79, 145, 0.32);
  border-radius: 43% 57% 47% 53% / 51% 42% 58% 49%;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 251, 216, 0.96) 0 25%, rgba(220, 229, 166, 0.58) 43%, transparent 67%),
    radial-gradient(circle at 16% 16%, rgba(255, 216, 112, 0.58), transparent 30%),
    radial-gradient(circle at 84% 82%, rgba(198, 89, 177, 0.3), transparent 34%),
    linear-gradient(145deg, rgba(247, 239, 196, 0.92), rgba(233, 216, 246, 0.9));
  box-shadow:
    0 26px 50px rgba(58, 28, 62, 0.2),
    0 0 0 8px rgba(255, 255, 255, 0.5),
    0 0 0 10px rgba(155, 91, 166, 0.22),
    0 0 42px rgba(226, 177, 77, 0.28),
    inset 0 0 35px rgba(255, 255, 255, 0.65);
}
.onion-fear-portrait::before,
.onion-fear-portrait::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}
.onion-fear-portrait::before {
  inset: -14px -10px -12px -15px;
  border: 2px solid rgba(239, 194, 87, 0.62);
  border-radius: 48% 52% 42% 58% / 57% 44% 56% 43%;
  filter: drop-shadow(0 0 12px rgba(255, 211, 104, 0.34));
  transform: rotate(-2.2deg);
}
.onion-fear-portrait::after {
  inset: -23px -20px -19px -17px;
  border: 1px solid rgba(168, 88, 181, 0.38);
  border-radius: 54% 46% 57% 43% / 43% 56% 44% 57%;
  transform: rotate(2.6deg);
}
.onion-fear-image-wrap {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(75vw, 260px);
  place-items: center;
  filter: drop-shadow(0 16px 15px rgba(65, 55, 30, 0.23)) drop-shadow(0 0 16px rgba(244, 224, 131, 0.35));
}
.onion-fear-image-wrap img {
  display: block;
  width: 100%;
  height: auto;
}
.decision-light-portrait .onion-fear-image-wrap {
  width: min(88vw, 340px);
}
.heart-universe-portrait {
  background:
    radial-gradient(circle at 50% 43%, rgba(255, 252, 225, 0.98) 0 25%, rgba(247, 196, 226, 0.5) 43%, transparent 68%),
    radial-gradient(circle at 16% 16%, rgba(255, 216, 112, 0.58), transparent 30%),
    radial-gradient(circle at 84% 82%, rgba(98, 169, 235, 0.35), transparent 34%),
    linear-gradient(145deg, rgba(248, 229, 241, 0.94), rgba(217, 229, 250, 0.92));
}
.heart-universe-portrait .onion-fear-image-wrap {
  width: min(78vw, 290px);
}
.heart-universe-portrait figcaption {
  font-size: clamp(1.02rem, 3vw, 1.5rem);
}
.onion-fear-portrait figcaption {
  position: absolute;
  z-index: 3;
  right: 2rem;
  bottom: 1rem;
  left: 2rem;
  color: #6e2a69;
  font-family: var(--heading);
  font-size: clamp(1.35rem, 4vw, 2rem);
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.8);
}
.decision-light-portrait figcaption {
  font-size: clamp(1.05rem, 3.2vw, 1.55rem);
}
.feelings-wings-portrait figcaption {
  font-size: clamp(1.05rem, 3.2vw, 1.55rem);
}
.dream-crystal-portrait {
  width: min(100%, 680px);
  min-height: clamp(400px, 65vw, 560px);
  padding: clamp(2.1rem, 5vw, 3.3rem) clamp(1.4rem, 5vw, 3rem) clamp(4rem, 7vw, 5rem);
  background:
    radial-gradient(circle at 80% 24%, rgba(113, 221, 255, 0.58), transparent 29%),
    radial-gradient(circle at 18% 82%, rgba(255, 198, 84, 0.43), transparent 35%),
    linear-gradient(145deg, rgba(245, 251, 255, 0.98), rgba(220, 232, 255, 0.94) 52%, rgba(247, 224, 248, 0.95));
  box-shadow:
    0 28px 58px rgba(31, 46, 100, 0.24),
    0 0 0 8px rgba(255, 255, 255, 0.58),
    0 0 0 10px rgba(80, 177, 220, 0.3),
    0 0 52px rgba(83, 205, 255, 0.4),
    inset 0 0 40px rgba(255, 255, 255, 0.7);
}
.dream-crystal-portrait .onion-fear-image-wrap {
  width: min(92vw, 570px);
  overflow: hidden;
  border-radius: 42% 58% 46% 54% / 50% 43% 57% 50%;
  filter: drop-shadow(0 18px 20px rgba(29, 65, 112, 0.24)) drop-shadow(0 0 22px rgba(70, 204, 255, 0.42));
}
.dream-crystal-portrait .onion-fear-image-wrap img {
  border-radius: inherit;
}
.dream-crystal-portrait figcaption {
  color: #315a91;
  font-size: clamp(1.05rem, 3.2vw, 1.65rem);
  text-shadow: 0 1px rgba(255, 255, 255, 0.9), 0 0 12px rgba(121, 220, 255, 0.45);
}
.star-family-portrait {
  width: min(100%, 680px);
  min-height: clamp(390px, 62vw, 540px);
  padding: clamp(2.1rem, 5vw, 3.2rem) clamp(1.4rem, 5vw, 3rem) clamp(4rem, 7vw, 5rem);
  background:
    radial-gradient(circle at 78% 22%, rgba(255, 228, 123, 0.52), transparent 28%),
    radial-gradient(circle at 17% 84%, rgba(105, 183, 255, 0.44), transparent 34%),
    linear-gradient(145deg, rgba(239, 248, 255, 0.98), rgba(220, 231, 255, 0.95) 52%, rgba(242, 220, 250, 0.96));
  box-shadow:
    0 28px 58px rgba(31, 46, 100, 0.24),
    0 0 0 8px rgba(255, 255, 255, 0.58),
    0 0 0 10px rgba(95, 135, 220, 0.32),
    0 0 54px rgba(255, 214, 103, 0.38),
    inset 0 0 40px rgba(255, 255, 255, 0.7);
}
.star-family-portrait .onion-fear-image-wrap {
  width: min(92vw, 570px);
  overflow: hidden;
  border-radius: 42% 58% 46% 54% / 50% 43% 57% 50%;
  filter: drop-shadow(0 18px 20px rgba(26, 55, 116, 0.25)) drop-shadow(0 0 24px rgba(255, 216, 106, 0.38));
}
.star-family-portrait .onion-fear-image-wrap img { border-radius: inherit; }
.star-family-portrait figcaption {
  color: #3d4e9a;
  font-size: clamp(1.05rem, 3.2vw, 1.65rem);
  text-shadow: 0 1px rgba(255, 255, 255, 0.92), 0 0 12px rgba(255, 218, 111, 0.45);
}
.dentist-courage-portrait {
  width: min(100%, 680px);
  min-height: clamp(390px, 62vw, 540px);
  padding: clamp(2.1rem, 5vw, 3.2rem) clamp(1.4rem, 5vw, 3rem) clamp(4rem, 7vw, 5rem);
  background:
    radial-gradient(circle at 17% 20%, rgba(255, 221, 102, 0.42), transparent 30%),
    radial-gradient(circle at 84% 78%, rgba(91, 174, 255, 0.42), transparent 35%),
    linear-gradient(145deg, rgba(255, 247, 211, 0.98), rgba(232, 235, 255, 0.95) 52%, rgba(247, 220, 244, 0.96));
  box-shadow:
    0 28px 58px rgba(47, 38, 86, 0.24),
    0 0 0 8px rgba(255, 255, 255, 0.58),
    0 0 0 10px rgba(229, 174, 74, 0.3),
    0 0 54px rgba(104, 185, 255, 0.34),
    inset 0 0 40px rgba(255, 255, 255, 0.7);
}
.dentist-courage-portrait .onion-fear-image-wrap {
  width: min(92vw, 580px);
  overflow: hidden;
  border-radius: 43% 57% 47% 53% / 51% 44% 56% 49%;
  filter: drop-shadow(0 18px 20px rgba(44, 42, 73, 0.24)) drop-shadow(0 0 22px rgba(255, 213, 96, 0.35));
}
.dentist-courage-portrait .onion-fear-image-wrap img {
  border-radius: inherit;
}
.dentist-courage-portrait figcaption {
  color: #6f3d78;
  font-size: clamp(1.05rem, 3.2vw, 1.65rem);
  text-shadow: 0 1px rgba(255, 255, 255, 0.92), 0 0 12px rgba(255, 218, 111, 0.42);
}
.thought-sparks-portrait {
  width: min(100%, 620px);
  min-height: clamp(430px, 66vw, 610px);
  padding: clamp(2.1rem, 5vw, 3.2rem) clamp(1.4rem, 5vw, 3rem) clamp(4rem, 7vw, 5rem);
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 218, 111, 0.48), transparent 30%),
    radial-gradient(circle at 84% 78%, rgba(84, 202, 180, 0.42), transparent 35%),
    linear-gradient(145deg, rgba(255, 248, 217, 0.98), rgba(221, 244, 232, 0.95) 52%, rgba(244, 224, 249, 0.96));
  box-shadow:
    0 28px 58px rgba(30, 76, 73, 0.24),
    0 0 0 8px rgba(255, 255, 255, 0.58),
    0 0 0 10px rgba(69, 171, 151, 0.3),
    0 0 54px rgba(255, 193, 99, 0.36),
    inset 0 0 40px rgba(255, 255, 255, 0.7);
}
.thought-sparks-portrait .onion-fear-image-wrap {
  width: min(82vw, 480px);
  filter: drop-shadow(0 18px 20px rgba(32, 69, 61, 0.24)) drop-shadow(0 0 24px rgba(255, 210, 102, 0.4));
}
.thought-sparks-portrait figcaption {
  color: #286d69;
  font-size: clamp(1.05rem, 3.2vw, 1.65rem);
  text-shadow: 0 1px rgba(255, 255, 255, 0.92), 0 0 12px rgba(255, 211, 102, 0.45);
}
.onion-fear-orbit {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  border: 1px solid rgba(129, 90, 151, 0.24);
  border-radius: 50%;
}
.onion-fear-orbit-one {
  width: 88%;
  height: 44%;
  transform: rotate(-19deg);
}
.onion-fear-orbit-two {
  width: 72%;
  height: 78%;
  border-color: rgba(218, 172, 66, 0.28);
  transform: rotate(23deg);
}
.onion-fear-spark {
  position: absolute;
  z-index: 3;
  color: #a04f96;
  line-height: 1;
  text-shadow: 0 0 12px rgba(255, 218, 113, 0.8);
}
.spark-one { top: 13%; left: 12%; color: #c28b29; font-size: 1.55rem; }
.spark-two { top: 20%; right: 11%; font-size: 1.25rem; }
.spark-three { right: 12%; bottom: 19%; color: #c28b29; font-size: 1.1rem; }
.stories-coming-note {
  margin: 2rem auto 0;
  color: var(--ink-soft);
  text-align: center;
}

.sana-section { padding-top: 4rem; }
.sana-copy { padding-left: clamp(0rem, 3vw, 2.5rem); }

.luminosana-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(360px, 0.94fr) minmax(0, 1.06fr);
  column-gap: clamp(2.5rem, 7vw, 7rem);
  row-gap: clamp(3.5rem, 6vw, 5.5rem);
  align-items: center;
  padding: 8rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.luminosana-copy h2 {
  max-width: 760px;
  font-size: clamp(2.35rem, 4.3vw, 4.5rem);
}

.luminosana-visual-column {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  justify-items: center;
  align-content: center;
  align-self: start;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.luminosana-sana-image {
  position: relative;
  z-index: 1;
  width: min(100%, 470px);
  margin: 0;
  isolation: isolate;
}

.luminosana-sana-image::before {
  inset: -9%;
  opacity: 1;
  filter: blur(15px) drop-shadow(0 0 22px rgba(255, 210, 105, 0.74));
}

.luminosana-sana-image::after {
  opacity: 0.96;
  box-shadow:
    0 0 38px rgba(203, 132, 244, 0.76),
    0 0 72px rgba(255, 204, 92, 0.7),
    0 0 118px rgba(173, 91, 220, 0.38);
  transform: rotate(var(--frame-counter-tilt)) scale(1.075);
}

.luminosana-sana-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 44%;
}

.luminosana-intro {
  max-width: 920px;
  color: #eee7f4;
  font-size: 1.08rem;
}

.luminosana-copy {
  grid-column: 1 / -1;
  grid-row: 2;
  padding-top: clamp(1rem, 2vw, 2rem);
  border-top: 1px solid rgba(255, 226, 158, 0.18);
}

.resonance-visual {
  position: relative;
  width: min(100%, 390px);
  aspect-ratio: 1;
  margin: 0 auto;
  filter: drop-shadow(0 24px 60px rgba(6, 1, 15, 0.36));
}

.resonance-visual::before {
  position: absolute;
  inset: 18%;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 247, 211, 0.98), rgba(255, 197, 86, 0.64) 24%, rgba(190, 76, 165, 0.28) 52%, transparent 72%);
  box-shadow: 0 0 65px rgba(255, 199, 88, 0.42), 0 0 110px rgba(130, 73, 203, 0.26);
}

.resonance-orbit {
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(255, 229, 161, 0.48);
  border-radius: 50%;
  box-shadow: inset 0 0 25px rgba(255, 207, 111, 0.1), 0 0 25px rgba(255, 203, 101, 0.12);
}

.resonance-orbit-outer { transform: rotate(18deg) scaleY(0.5); }
.resonance-orbit-middle { inset: 18%; transform: rotate(-48deg) scaleY(0.55); border-color: rgba(210, 151, 246, 0.62); }
.resonance-orbit-inner { inset: 25%; transform: rotate(68deg) scaleY(0.64); border-color: rgba(244, 145, 214, 0.52); }

.resonance-heart {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #4d174d;
  font-size: clamp(4rem, 9vw, 7rem);
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.42);
}

.resonance-star { position: absolute; color: #ffe7a4; text-shadow: 0 0 14px rgba(255, 224, 143, 0.9); }
.resonance-star-one { top: 5%; left: 48%; font-size: 1.5rem; }
.resonance-star-two { right: 4%; bottom: 27%; font-size: 1rem; }
.resonance-star-three { bottom: 7%; left: 16%; font-size: 0.8rem; }

.resonance-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.resonance-points article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.055);
}

.resonance-points article:nth-child(1) {
  border-color: rgba(255, 206, 104, 0.3);
  background: linear-gradient(135deg, rgba(255, 193, 76, 0.12), rgba(255, 255, 255, 0.045));
}

.resonance-points article:nth-child(2) {
  border-color: rgba(107, 195, 255, 0.3);
  background: linear-gradient(135deg, rgba(71, 171, 255, 0.12), rgba(255, 255, 255, 0.045));
}

.resonance-points article:nth-child(3) {
  border-color: rgba(205, 125, 255, 0.3);
  background: linear-gradient(135deg, rgba(166, 91, 225, 0.13), rgba(255, 255, 255, 0.045));
}

.resonance-points article:nth-child(4) {
  border-color: rgba(245, 128, 200, 0.3);
  background: linear-gradient(135deg, rgba(229, 95, 177, 0.12), rgba(255, 255, 255, 0.045));
}

.resonance-points article > span {
  padding-top: 0.16rem;
  color: rgba(255, 229, 161, 0.68);
  font-family: var(--serif);
  font-size: 0.8rem;
}

.resonance-points h3 { margin: 0 0 0.25rem; color: #fff8e8; font-size: 1.25rem; font-weight: 500; }
.resonance-points p { margin: 0; color: var(--ink-soft); font-size: 0.96rem; }

.luminosana-link { gap: 0.55rem; margin-bottom: 1.5rem; }

.transparency-note {
  max-width: 760px;
  padding: 1.1rem 1.25rem;
  color: #dcd2e5;
  border-left: 2px solid rgba(255, 211, 120, 0.72);
  background: rgba(11, 3, 23, 0.24);
  font-size: 0.88rem;
}

.transparency-note strong { display: block; margin-bottom: 0.35rem; color: #fff0c7; font-size: 0.92rem; }
.transparency-note p { margin: 0; }

.sana-origin-story {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  overflow: visible;
  width: 100%;
  padding: clamp(1rem, 2vw, 2rem) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.sana-origin-story::before,
.sana-origin-story::after { content: none; }

.sana-origin-story .eyebrow,
.sana-origin-story h3,
.sana-origin-text { position: relative; z-index: 1; }

.sana-origin-story h3 {
  max-width: 860px;
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  color: #fff8e8;
  font-family: var(--heading);
  font-size: clamp(2.1rem, 3.8vw, 3.5rem);
  font-weight: 400;
  line-height: 1.08;
}

.sana-origin-story > .eyebrow {
  color: #e5b7ff;
  font-family: var(--heading);
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  letter-spacing: 0.06em;
  text-transform: none;
  text-shadow: 0 0 18px rgba(201, 127, 242, 0.68), 0 0 28px rgba(158, 78, 205, 0.46);
}

.sana-origin-text {
  column-count: 2;
  column-gap: clamp(2.5rem, 6vw, 5rem);
  column-rule: 1px solid rgba(255, 226, 158, 0.16);
  color: #eee7f4;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.64;
}

.sana-origin-text p {
  break-inside: avoid;
  margin: 0 0 1.35rem;
}

.sana-origin-text strong { color: #fff2c8; font-weight: 650; }
.sana-origin-text q { color: #fff2c8; font-style: italic; }
.sana-origin-final { font-size: 1.16em; line-height: 1.5; }

.parents { padding: 7rem 0; }

.parents-card {
  position: relative;
  overflow: hidden;
  max-width: 1060px;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 6.5rem);
  border: 1px solid rgba(255, 237, 189, 0.3);
  border-radius: 2.5rem;
  background:
    radial-gradient(circle at 87% 27%, rgba(255, 216, 124, 0.22), transparent 16rem),
    linear-gradient(135deg, rgba(109, 43, 143, 0.72), rgba(46, 17, 76, 0.84));
  box-shadow: var(--shadow);
}

.parents-card::after {
  position: absolute;
  top: -4rem;
  right: -3rem;
  width: 18rem;
  height: 18rem;
  content: "✦";
  color: rgba(255, 229, 161, 0.16);
  font-family: var(--serif);
  font-size: 14rem;
  line-height: 1;
}

.parents-card h2,
.parents-card p,
.parents-card a { position: relative; z-index: 1; }
.parents-card h2 { max-width: 760px; }
.parents-card p { max-width: 620px; color: #eee7f4; font-size: 1.06rem; }

.button-light { color: #32123e; background: #fff8e5; }

.about { padding: 8rem 0 10rem; text-align: center; }
.about .eyebrow::before { display: none; }
.about h2 { max-width: 970px; margin-right: auto; margin-left: auto; }
.about-image {
  --frame-a: rgba(255, 204, 101, 0.46);
  --frame-b: rgba(122, 93, 231, 0.34);
  --frame-c: rgba(238, 95, 183, 0.3);
  --frame-spark-a: rgba(255, 229, 151, 0.96);
  --frame-spark-b: rgba(164, 191, 255, 0.92);
  --frame-spark-c: rgba(249, 159, 224, 0.88);
  --frame-tilt: 0.8deg;
  --frame-counter-tilt: -0.65deg;
  --frame-radius: 44% 56% 47% 53% / 51% 43% 57% 49%;
  --image-radius: 43% 57% 46% 54% / 50% 44% 56% 50%;
  width: min(900px, 100%);
  margin: clamp(2.5rem, 5vw, 4.5rem) auto 0;
}

.about-image img {
  aspect-ratio: 1334 / 1179;
  object-fit: cover;
  object-position: center;
}

.heart-team {
  width: min(820px, 100%);
  margin: clamp(2rem, 5vw, 4rem) auto 0;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid rgba(255, 232, 174, .22);
  border-radius: 2rem;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: 0 24px 60px rgba(6, 1, 14, .2);
}
.heart-team .eyebrow { margin-bottom: .65rem; }
.heart-team h3 { margin: 0; color: #fff8e8; font-family: var(--serif); font-size: clamp(1.7rem, 4vw, 2.8rem); font-weight: 400; }
.heart-team > p:last-of-type { margin: .7rem 0 0; color: var(--gold-bright); font-weight: 750; }
.heart-team-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 1.6rem; margin-top: 1.4rem; }

.footer {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 2rem;
  align-items: center;
  width: min(1180px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 2.5rem 0;
  color: #bfb4cc;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.88rem;
}
.footer p { margin: 0; }
.footer > a { color: #fff0c7; text-decoration: none; }
.footer > small { grid-column: 1 / -1; color: #786d85; }

#background-music { display: none; }

.music-toggle {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 90;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 1rem 0.55rem 0.55rem;
  color: #fff8e8;
  border: 1px solid rgba(255, 229, 161, 0.42);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(42, 15, 66, 0.9), rgba(91, 31, 105, 0.84));
  box-shadow: 0 12px 34px rgba(7, 1, 15, 0.4), 0 0 24px rgba(255, 196, 94, 0.14);
  font: 700 0.88rem/1 var(--sans);
  letter-spacing: 0.02em;
  cursor: pointer;
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.music-toggle:hover { transform: translateY(-2px); }

.music-toggle:focus-visible {
  outline: 3px solid rgba(255, 229, 161, 0.95);
  outline-offset: 3px;
}

.music-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  color: #46203e;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: linear-gradient(145deg, #fff7d2, #ffc65f 62%, #ec8b4a);
  box-shadow: 0 0 18px rgba(255, 198, 84, 0.32);
  font-family: var(--serif);
  font-size: 1.05rem;
}

.music-toggle.is-playing {
  border-color: rgba(255, 229, 161, 0.72);
  background: linear-gradient(135deg, rgba(73, 24, 91, 0.94), rgba(133, 39, 114, 0.88));
  box-shadow: 0 14px 38px rgba(7, 1, 15, 0.44), 0 0 30px rgba(255, 196, 94, 0.22);
}

.music-toggle.is-playing .music-icon { animation: music-glow 1.8s ease-in-out infinite alternate; }

@keyframes music-glow {
  from { transform: scale(0.96); box-shadow: 0 0 14px rgba(255, 198, 84, 0.26); }
  to { transform: scale(1.04); box-shadow: 0 0 24px rgba(255, 198, 84, 0.56); }
}

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms ease, transform 700ms ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1060px) {
  .site-header > .navigation { grid-area: auto; }
  .navigation {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    display: none;
    justify-content: stretch;
    width: min(330px, calc(100vw - 2rem));
    padding: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 1rem;
    background: rgba(18, 6, 34, 0.96);
    box-shadow: var(--shadow);
    max-height: calc(100dvh - var(--header-clearance, 10rem) - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .navigation.open { display: grid; }
  .navigation a { padding: 0.85rem 1rem; }

  .menu-button {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 10px;
    place-content: center;
    gap: 5px;
    color: inherit;
    border: 0;
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
  }
  .menu-button span:not(.sr-only) { display: block; width: 20px; height: 1.5px; background: #fff; border-radius: 2px; }

  .menu-button span:not(.sr-only) { transition: transform 180ms ease, opacity 180ms ease; }
  .menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .hero { grid-template-columns: minmax(0, 0.85fr) minmax(390px, 1.15fr); gap: 2rem; padding-right: 2rem; padding-left: 2rem; }
  h1 { font-size: clamp(3rem, 6vw, 5rem); }
}

/* Hochformat-Tablets: großzügige, ruhige Einspalten-Darstellung. */
@media (max-width: 1100px) and (orientation: portrait) {
  .hero {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    width: min(820px, 100%);
    padding: 7.5rem clamp(1.5rem, 5vw, 3rem) 3.5rem;
  }

  .hero-copy {
    width: min(100%, 720px);
    margin: 0 auto;
    text-align: center;
  }

  .hero-copy .eyebrow::before { display: none; }
  .hero-subline,
  .hero-text { margin-right: auto; margin-left: auto; }
  .hero-actions { justify-content: center; }
  .hero-visual { width: min(100%, 620px); justify-self: center; }
  .scroll-cue { display: none; }

  .manifesto,
  .intro,
  .story,
  .sana-section,
  .luminosana-section { grid-template-columns: 1fr; }

  .manifesto,
  .intro { gap: 2.5rem; }
  .story-copy { order: -1; }
  .little-stories-heading { grid-template-columns: 1fr; row-gap: 1rem; }
  .sana-copy { padding-left: 0; }
  .resonance-visual { width: min(72vw, 360px); }
  .luminosana-visual-column,
  .sana-origin-story,
  .luminosana-copy { grid-column: 1; grid-row: auto; }
  .luminosana-visual-column { order: 1; }
  .sana-origin-story { order: 2; }
  .luminosana-copy { order: 3; }
  .sana-origin-text { column-count: 1; column-rule: 0; }
  .resonance-points { grid-template-columns: 1fr; }
}

/* Querformat-Tablets und kleine Notebooks. */
@media (min-width: 801px) and (max-width: 1100px) and (orientation: landscape) {
  .hero {
    grid-template-columns: minmax(0, 0.95fr) minmax(330px, 1.05fr);
    gap: clamp(1.5rem, 3vw, 2.5rem);
    min-height: auto;
    padding: 7rem max(2rem, env(safe-area-inset-right)) 4rem max(2rem, env(safe-area-inset-left));
  }

  .hero-visual { width: min(100%, 430px); }
  .image-frame img { aspect-ratio: 4 / 5; }
  .scroll-cue { display: none; }
  .section,
  .footer { width: min(100% - 4rem, 960px); }
  .manifesto,
  .intro,
  .story,
  .sana-section { gap: clamp(2rem, 4vw, 3.5rem); }
  .luminosana-section { gap: 2.5rem; padding: 5rem 0; }
}

@media (max-width: 800px) {
  .site-header { top: max(0.65rem, env(safe-area-inset-top)); width: calc(100% - 1.2rem); }
  .hero {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 7.25rem 1.5rem 3.5rem;
  }
  .hero-copy { text-align: center; }
  .hero-copy .eyebrow::before { display: none; }
  .hero-subline,
  .hero-text { margin-right: auto; margin-left: auto; }
  .hero-actions { justify-content: center; }
  .hero-visual { width: 100%; max-width: 560px; justify-self: center; }
  .scroll-cue { display: none; }

  .section { width: min(100% - 2rem, 680px); }
  .intro,
  .manifesto,
  .story,
  .sana-section,
  .luminosana-section { grid-template-columns: 1fr; }
  .manifesto { gap: 2.5rem; padding-top: 7rem; }
  .intro { gap: 1.5rem; padding-top: 7rem; }
  .values { grid-template-columns: 1fr; }
  .value-card { min-height: 220px; }
  .value-card h3 { margin-top: 2.8rem; }
  .story-copy { order: -1; }
  .little-stories-heading { grid-template-columns: 1fr; row-gap: 1rem; }
  .sana-copy { padding-left: 0; }
  .luminosana-section { padding: 4.5rem 0; }
  .resonance-visual { width: min(72vw, 330px); }
  .luminosana-visual-column,
  .sana-origin-story,
  .luminosana-copy { grid-column: 1; grid-row: auto; }
  .luminosana-visual-column { order: 1; }
  .sana-origin-story { order: 2; }
  .luminosana-copy { order: 3; }
  .sana-origin-text { column-count: 1; column-rule: 0; }
  .resonance-points { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .footer > small { grid-column: auto; }
}

@media (max-width: 520px) {
  body { line-height: 1.58; }
  .site-header { min-height: 60px; }
  .brand { gap: 0.5rem; }
  .brand-mark { width: 34px; height: 34px; }
  .menu-button { width: 46px; height: 46px; }
  .navigation { width: calc(100vw - 1.2rem); }

  .hero-copy h1 { font-size: clamp(2.45rem, 12.8vw, 3.65rem); line-height: 1.08; }
  h2 { font-size: clamp(2.05rem, 10.5vw, 3.15rem); line-height: 1.14; }
  .hero {
    gap: 1.75rem;
    min-height: auto;
    padding: 7rem max(1rem, env(safe-area-inset-right)) 3.5rem max(1rem, env(safe-area-inset-left));
  }
  .hero-subline { font-size: clamp(1.2rem, 5.8vw, 1.5rem); }
  .hero-text { font-size: 1rem; }
  .hero-actions { display: grid; }
  .hero-actions .button { width: 100%; }
  .hero-visual figcaption {
    right: 0.7rem;
    bottom: 0.7rem;
    left: 0.7rem;
    justify-content: center;
    padding: 0.7rem 0.8rem;
    font-size: 0.78rem;
    text-align: center;
  }

  .section { width: calc(100% - 2rem); }
  .manifesto { padding: 5rem 0 3rem; }
  .intro { padding: 5rem 0 3rem; }
  .values { gap: 0.85rem; padding-bottom: 4rem; }
  .value-card { min-height: 0; padding: 1.5rem; }
  .value-card h3 { margin-top: 2rem; }
  .story,
  .sana-section { gap: 2rem; padding: 4rem 0; }
  .luminosana-section { gap: 1.75rem; padding: 3rem 0; }
  .resonance-visual { width: min(74vw, 270px); }
  .luminosana-intro { font-size: 1rem; }
  .resonance-points article { gap: 0.75rem; padding: 1rem; }
  .transparency-note { padding: 1rem; }
  .story-highlight { margin: 1.5rem 0; font-size: 1.2rem; }
  .little-stories { margin-top: 1rem; padding-top: 3rem; }
  .little-story-card { border-radius: 1.35rem 2.2rem 1.6rem 2rem; }
  .little-story-card summary {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 0;
    padding: 1.35rem;
  }
  .little-story-card-inner {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 0;
    padding: 1.35rem;
  }
  .little-story-card-inner .little-story-action { grid-column: 1 / -1; justify-content: flex-end; }
  .little-story-symbol { width: 58px; }
  .little-story-action { grid-column: 1 / -1; justify-content: flex-end; }
  .little-story-reader { width: calc(100% - 1rem); padding: 1.5rem 1.25rem; }
  .onion-fear-portrait {
    width: calc(100% - 0.5rem);
    min-height: 340px;
    margin-bottom: 2.5rem;
    padding: 2rem 1.5rem 3.5rem;
  }
  .onion-fear-image-wrap { width: min(62vw, 220px); }
  .dream-crystal-portrait { min-height: 0; padding: 2rem 1rem 3.8rem; }
  .dream-crystal-portrait .onion-fear-image-wrap { width: 100%; }
  .dentist-courage-portrait { min-height: 0; padding: 2rem 1rem 3.8rem; }
  .dentist-courage-portrait .onion-fear-image-wrap { width: 100%; }
  .thought-sparks-portrait { min-height: 0; padding: 2rem 1rem 3.8rem; }
  .thought-sparks-portrait .onion-fear-image-wrap { width: min(82vw, 360px); }
  .parents { padding: 4rem 0; }
  .parents-card { padding: 2rem 1.4rem; border-radius: 1.5rem; }
  .parents-card::after { right: -6rem; }
  .about { padding: 5rem 0 6rem; }
  .footer {
    width: calc(100% - 2rem);
    padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
  }

  .music-toggle {
    right: max(0.7rem, env(safe-area-inset-right));
    bottom: max(0.7rem, env(safe-area-inset-bottom));
    min-height: 46px;
    padding: 0.45rem 0.8rem 0.45rem 0.45rem;
    font-size: 0.82rem;
  }

  .music-icon { width: 32px; height: 32px; flex-basis: 32px; }

  .cosmic-planet { opacity: 0.24; }
  .planet-violet { left: 48%; }
  .planet-crystal { left: -8%; }
  .planet-marble { left: 52%; }
  .planet-ringed { left: 4%; }
  .floating-figure {
    --peak-opacity: 0.82;
    width: clamp(37px, 11.5vw, 54px);
    filter: drop-shadow(0 0 10px rgba(255, 203, 101, 0.34)) drop-shadow(0 8px 16px rgba(7, 1, 15, 0.24));
  }
  .figure-academy-logo {
    width: clamp(36px, 9vw, 48px);
    --peak-opacity: 0.62;
  }
  .figure-anchor {
    width: clamp(58px, 17vw, 82px);
    --peak-opacity: 0.7;
  }
}

/* iPads and other tablets: all floating figures share the same compact size. */
@media (min-width: 521px) and (max-width: 1180px) {
  .floating-figure { width: clamp(55px, 7vw, 79px); }
  .figure-academy-logo { width: clamp(42px, 5vw, 62px); }

  .figure-anchor { width: clamp(82px, 10.5vw, 118px); }
}

@media (max-width: 360px) {
  .brand small { display: none; }
  h1 { font-size: clamp(2.2rem, 12.5vw, 2.75rem); }
  h2 { font-size: clamp(1.9rem, 10.2vw, 2.5rem); }
  .hero { padding-right: 0.85rem; padding-left: 0.85rem; }
  .section,
  .footer { width: calc(100% - 1.5rem); }
}

/* Smartphones im Querformat bleiben kompakt und ohne abgeschnittene Inhalte. */
@media (max-width: 950px) and (max-height: 520px) and (orientation: landscape) {
  .site-header {
    top: max(0.4rem, env(safe-area-inset-top));
    width: calc(100% - 1rem);
    min-height: 56px;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.85fr);
    gap: 1.5rem;
    width: min(900px, 100%);
    min-height: auto;
    padding: 6rem max(1.5rem, env(safe-area-inset-right)) 3rem max(1.5rem, env(safe-area-inset-left));
  }

  .hero-copy { text-align: left; }
  .hero-copy .eyebrow::before { display: inline-block; }
  .hero-actions { display: flex; justify-content: flex-start; }
  .hero-actions .button { width: auto; }
  .hero-visual { width: min(100%, 300px); }
  .image-frame img { aspect-ratio: 4 / 5; }
  h1 { font-size: clamp(2.25rem, 6.5vw, 3.2rem); }
  .hero-subline { font-size: 1.15rem; }
  .hero-text { margin-bottom: 1.25rem; font-size: 0.95rem; }
}

@media (hover: none) {
  .button:hover,
  .button:focus-visible,
  .story-image:hover img,
  .sana-image:hover img { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  body::before,
  .cosmic-canvas::before,
  .cosmic-planet { animation: none !important; }
  .music-toggle.is-playing .music-icon { animation: none; }
}