*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #12143a; overflow: hidden; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #fff6e6; }

.gate { position: fixed; inset: 0; }
#scene { width: 100%; height: 100%; display: block; cursor: default; -webkit-tap-highlight-color: transparent; }

/* sky slowly warms */
.dawn-wash { opacity: 0; animation: dawn 22s ease-out forwards; }
@keyframes dawn { to { opacity: 1; } }

.stars circle { fill: #fffbe8; opacity: var(--o); animation: twinkle 4.5s ease-in-out infinite alternate, fade-stars 26s ease-in forwards; }
@keyframes twinkle { 0% { opacity: var(--o); } 100% { opacity: calc(var(--o) * 0.25); } }
@keyframes fade-stars { to { fill-opacity: 0.25; } }

.moon { opacity: 0.5; transition: opacity 1.2s ease, filter 1.2s ease; }
.moon.lit { opacity: 1; filter: drop-shadow(0 0 14px #fff2c8); }

.sun-rise { transform: translateY(120px); animation: rise 16s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes rise { to { transform: translateY(0); } }

/* 5.5 s in, 5.5 s out — the coherent breathing rhythm */
.breath-halo { transform-origin: 800px 640px; transform-box: view-box; animation: breathe 11s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(0.72); opacity: 0.55; } 50% { transform: scale(1.12); opacity: 1; } }

.glints rect { fill: #ffe3b0; opacity: 0; animation: glint 3.8s ease-in-out infinite; }
@keyframes glint { 0%, 100% { opacity: 0; } 45% { opacity: 0.85; } }

.wave { stroke: #ffd9b8; stroke-opacity: 0.18; }
.w1 { stroke-width: 2;   animation: drift 14s linear infinite; }
.w2 { stroke-width: 2.5; stroke-opacity: 0.13; animation: drift2 19s linear infinite; }
.w3 { stroke-width: 3;   stroke-opacity: 0.09; animation: drift3 25s linear infinite; }
@keyframes drift  { to { transform: translateX(200px); } }
@keyframes drift2 { to { transform: translateX(280px); } }
@keyframes drift3 { to { transform: translateX(360px); } }

.bird { fill: none; stroke: #1d1733; stroke-width: 2.4; stroke-linecap: round; }
.b1 { animation: fly1 38s linear infinite; }
.b2 { animation: fly2 44s linear infinite 6s; }
.b3 { animation: fly3 51s linear infinite 11s; }
@keyframes fly1 { from { transform: translate(-80px, 330px); } to { transform: translate(1700px, 250px); } }
@keyframes fly2 { from { transform: translate(-80px, 300px); } to { transform: translate(1700px, 360px); } }
@keyframes fly3 { from { transform: translate(-80px, 360px); } to { transform: translate(1700px, 280px); } }

.yogi { animation: sway 11s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes sway { 0%, 100% { transform: translate(655px, 772px) rotate(-0.6deg); } 50% { transform: translate(655px, 772px) rotate(0.6deg); } }

.ripple { fill: none; stroke: #fff3da; stroke-width: 2; opacity: 0.8; transform-box: fill-box; transform-origin: center; animation: ripple 1.4s ease-out forwards; }
@keyframes ripple { from { transform: scale(0.2); opacity: 0.9; } to { transform: scale(3.2); opacity: 0; } }

.flash { opacity: 0; pointer-events: none; transition: opacity 1.1s ease; }
.flash.on { opacity: 1; }

.title { position: fixed; left: 0; right: 0; top: 13vh; text-align: center; pointer-events: none; }
.title h1 {
  margin: 0; font-family: "Fraunces", Georgia, serif; font-weight: 300; letter-spacing: 0.06em;
  font-size: clamp(2.4rem, 7vw, 5.2rem); color: #fff4e2; text-shadow: 0 2px 30px rgba(20, 10, 50, 0.45);
  opacity: 0; animation: appear 3.5s ease 1.2s forwards;
}
.breath { margin: 0.6rem 0 0; font-size: clamp(0.8rem, 2vw, 1rem); letter-spacing: 0.4em; text-transform: lowercase; color: #ffe6c8; opacity: 0; animation: appear 3s ease 3.2s forwards; }
#breathWord { transition: opacity 1.4s ease; }
@keyframes appear { to { opacity: 0.92; } }

.whisper {
  position: fixed; left: 50%; bottom: 7vh; transform: translateX(-50%); margin: 0; max-width: min(90vw, 34rem);
  text-align: center; font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 1.05rem;
  color: #fff1dc; opacity: 0; transition: opacity 0.9s ease; pointer-events: none; text-shadow: 0 1px 12px #000a;
}
.whisper.show { opacity: 0.95; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; }
  .breath-halo { animation: none; }
}