:root {
  --deep: #1d2a4d;      /* blue hour, high up */
  --dusk: #4a5d8f;
  --lilac: #b8b3d9;     /* horizon after snowfall */
  --snow: #f7f9ff;
  --halo: #f3e3b3;      /* warm light */
  --ink: #eef1fb;
  --ink-soft: rgba(238, 241, 251, 0.66);
  --gutter: clamp(16px, 4vw, 48px);
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", "Avenir Next", system-ui, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  color: var(--ink);
  background: var(--deep);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Sky ---------- */

.sky {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 40% at 50% -6%, rgba(255, 228, 170, 0.38), rgba(255, 228, 170, 0.08) 55%, transparent 75%),
    linear-gradient(180deg, var(--deep) 0%, #2f3f6e 38%, var(--dusk) 66%, var(--lilac) 100%);
}

/* Soft light falling from above, breathing very slowly. */
.rays {
  position: absolute;
  left: 50%;
  top: -20%;
  width: 160vmax;
  height: 120vh;
  transform: translateX(-50%);
  background: repeating-conic-gradient(
    from 168deg at 50% 0%,
    rgba(255, 246, 220, 0.09) 0deg 2.5deg,
    transparent 2.5deg 7deg
  );
  -webkit-mask-image: radial-gradient(ellipse 50% 80% at 50% 0%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 50% 80% at 50% 0%, #000 10%, transparent 75%);
  filter: blur(14px);
  animation: breathe 14s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

#snow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: manipulation;
}

/* ---------- Content ---------- */

.still {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:
    max(var(--gutter), env(safe-area-inset-top))
    max(var(--gutter), env(safe-area-inset-right))
    calc(max(var(--gutter), env(safe-area-inset-bottom)) + clamp(40px, 7vh, 72px))
    max(var(--gutter), env(safe-area-inset-left));
  text-align: center;
}

.title { margin-top: clamp(8px, 4vh, 48px); }

.greeting {
  margin: 0;
  font: 300 clamp(14px, 1.4vw, 17px)/1.4 var(--sans);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.name {
  margin: 0.05em 0 0;
  font: 300 clamp(40px, 6.4vw, 84px)/1 var(--serif);
  letter-spacing: 0.22em;
  padding-left: 0.22em; /* balance trailing letter-spacing */
  color: var(--snow);
  text-shadow: 0 0 28px rgba(243, 227, 179, 0.35), 0 0 2px rgba(255, 255, 255, 0.6);
}

.thought {
  margin: auto 0;
  width: min(100%, 900px);
  transition: opacity 1.2s ease, filter 1.2s ease;
}

.thought.leaving {
  opacity: 0;
  filter: blur(6px);
}

.thought blockquote { margin: 0; }

.thought p {
  font: italic 300 clamp(26px, 3.6vw, 46px)/1.32 var(--serif);
  max-width: 18em;
  margin: 0 auto;
  color: var(--snow);
  text-wrap: balance;
  text-shadow: 0 1px 18px rgba(29, 42, 77, 0.55);
}

.thought p .w {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(6px);
  animation: settle 1.6s ease forwards;
}

@keyframes settle {
  to { opacity: 1; filter: blur(0); transform: none; }
}

.thought figcaption {
  margin-top: 1.4em;
  font: 300 clamp(14px, 1.3vw, 16px)/1.5 var(--sans);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  opacity: 0;
  animation: settle 2s ease forwards;
  animation-delay: var(--cite-delay, 1.5s);
}

.thought figcaption::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  margin: 0 auto 0.9em;
  background: var(--halo);
  opacity: 0.7;
}

.thought cite { font-style: italic; }

/* ---------- Controls ---------- */

.controls {
  position: fixed;
  left: 50%;
  bottom: calc(max(var(--gutter), env(safe-area-inset-bottom)) + clamp(28px, 6vh, 64px));
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;
}

.controls button {
  pointer-events: auto;
  cursor: pointer;
  padding: 9px 18px 10px;
  font: 400 14px/1 var(--sans);
  letter-spacing: 0.06em;
  color: var(--deep);
  background: rgba(247, 249, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 24px rgba(29, 42, 77, 0.25);
  transition: background 0.3s, box-shadow 0.3s;
  white-space: nowrap;
}

.controls button:hover { background: var(--snow); box-shadow: 0 0 22px rgba(243, 227, 179, 0.55); }
.controls button:focus-visible { outline: 2px solid var(--halo); outline-offset: 3px; }
.controls button[aria-pressed="true"] { background: var(--halo); }

.back {
  pointer-events: auto;
  display: inline-block;
  margin-top: 2em;
  font: 400 15px/1 var(--sans);
  letter-spacing: 0.06em;
  color: var(--snow);
  text-decoration: none;
  border-bottom: 1px solid var(--halo);
  padding-bottom: 4px;
}

.back:focus-visible { outline: 2px solid var(--halo); outline-offset: 4px; }

@media (max-width: 560px) {
  .controls { gap: 8px; }
  .controls button { padding: 9px 14px 10px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .rays { animation: none; }
  .thought p .w, .thought figcaption { animation: none; opacity: 1; filter: none; transform: none; }
}