/* Blue + red midnight treatment. This file is layered over the verified live bundle. */
:root {
  color-scheme: dark;
  --paper: #030712;
  --paper-2: #0a142b;
  --ink: #f3f6ff;
  --muted: #bdcbe8;
  --rose: #f02f4b;
  --rose-dark: #b21f3a;
  --coral: #ff586d;
  --sage: #4f7dff;
  --teal: #09172f;
  --midnight: #030712;
  --deep-blue: #0a1c3e;
  --electric-blue: #4e7fff;
  --electric-red: #f02f4b;
  --soft-red: #ff9aa7;
}
html, body, #root, .birthday-site { background-color: #030712 !important; color: #f3f6ff; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; }
::selection { background: #e92745; color: #fff; }
button:focus-visible, a:focus-visible, audio:focus-visible { outline: 3px solid #78a0ff !important; outline-offset: 4px; }
.birthday-site { background: #030712 !important; color: #f3f6ff; }
.scroll-progress { background: #071126; }
.scroll-progress span { background: linear-gradient(90deg, #3976ff, #f02f4b 52%, #80a4ff); background-size: 220% 100%; animation: red-blue-gradient 5s linear infinite; }
.site-topbar { color: #e6edff !important; }
.wordmark svg, .topbar-note svg, .footer-heart svg { color: #ff405a !important; }

/* Midnight-blue foundations with crisp red highlights. */
.hero { color: #f7f9ff; background: radial-gradient(ellipse at 50% 38%, #112754 0%, #071128 50%, #030712 100%) !important; }
.hero::after { background: linear-gradient(180deg, #03071255 0%, #07142c22 46%, #030712 100%) !important; }
.hero h1, .letter-paper h2, .wish-content h2, .sound-content > h2, .video-card h3, .voice-content > h2, .goodbye-copy h2 { color: #f7f9ff !important; }
.hero-copy p, .letter-paper p:not(.letter-signoff), .wish-content p, .goodbye-copy p { color: #d6e1f8 !important; }
.eyebrow, .section-kicker { color: #ff8291 !important; text-shadow: 0 0 13px #f02f4b45; }
.eyebrow-line { background: linear-gradient(90deg, #4e7fff, #f02f4b) !important; }
.hero-vinyl { box-shadow: 0 20px 50px #000c, 0 0 26px #f02f4b45, 0 0 44px #4e7fff35 !important; animation: vinyl-color-breathe 6.5s ease-in-out infinite alternate; }
.hero-vinyl-label { color: #f4f7ff !important; }
.hero-spark { color: #ff5369 !important; text-shadow: 0 0 12px #ff304f88, 0 0 17px #4e7fff55; }
.hero-spark-two { color: #83a7ff !important; }
.garden-firefly { color: #ff7a8a !important; text-shadow: 0 0 13px #ff304f, 0 0 20px #4e7fff; }
.garden-vine { stroke: #5d8aff !important; filter: drop-shadow(0 0 5px #4e7fff88); }
.garden-bloom .bloom-petal { fill: #f02f4b !important; stroke: #ffb0b9 !important; }
.garden-bloom--blush .bloom-petal { fill: #ff687b !important; }
.garden-bloom--cream .bloom-petal { fill: #4779ff !important; stroke: #c4d4ff !important; }
.garden-bloom--berry .bloom-petal { fill: #c51e3b !important; stroke: #ff9ca9 !important; }
.garden-bloom .bloom-inner-petal { fill: #4f7fff !important; stroke: #b9cbff !important; }
.garden-bloom .bloom-heart { fill: #f02f4b !important; stroke: #d7e2ff !important; }
.garden-bloom .bloom-glint { fill: #fff !important; }
.garden-petal { background: linear-gradient(145deg, #ffacb5, #e52644 78%) !important; filter: drop-shadow(0 2px 8px #ff304f55); }
.envelope { filter: drop-shadow(0 18px 22px #000a) drop-shadow(0 0 12px #426fff45) !important; }
.envelope-paper { background: linear-gradient(150deg, #14254b, #09142c 70%) !important; box-shadow: inset 0 0 0 1px #7395ff55 !important; }
.envelope-paper::before { color: #ff9ba7 !important; }
.envelope-flap { background: linear-gradient(135deg, #f02f4b, #aa1b35) !important; }
.envelope::before { background: #0a1732 !important; }
.envelope::after { background: #11244b !important; }
.envelope-seal { color: #fff !important; background: #ed2947 !important; box-shadow: 0 0 18px #f02f4b88 !important; }
.envelope-flower { color: #ff405a !important; text-shadow: 0 0 13px #f02f4b80 !important; }
.envelope-hint, .scroll-nudge, .hero-page-number { color: #c5d4f4 !important; }

.letter-scene { background: radial-gradient(ellipse at 50% 48%, #0b1d40, #040916 66%, #030712) !important; }
.letter-scene::after { background: radial-gradient(ellipse at 17% 20%, #12356b66, transparent 46%), radial-gradient(ellipse at 86% 76%, #6f132c50, transparent 42%), linear-gradient(145deg, #030712dd, #061128cc) !important; }
.letter-paper { color: #f3f6ff !important; border: 1px solid #f02f4b80 !important; background: linear-gradient(145deg, #101e3c, #080e20 65%, #11152c) !important; box-shadow: 0 24px 60px #000c, 0 0 28px #f02f4b2c, 0 0 35px #4e7fff22 !important; }
.letter-paper::before { border-color: #7593e75c !important; }
.letter-paper .section-kicker { color: #ff9aa6 !important; }
.letter-paper h2 { color: #f5f7ff !important; }
.letter-paper p:not(.letter-signoff) { color: #d9e3f7 !important; }
.letter-stamp { color: #ff5269 !important; border-color: #6188ff !important; }
.letter-scribble, .letter-side-note, .letter-aside { color: #b7c9f3 !important; }
.letter-side-note i, .aside-flower { color: #ff6679 !important; }
.light-index { color: #d0dcf5 !important; }

.wish-scene { background: #040918 !important; }
.wish-scene::before { background: radial-gradient(ellipse at 51% 44%, #112a5a 0%, #09142f 44%, #030712 100%) !important; background-size: 170% 170% !important; animation: blue-red-ambient 18s ease-in-out infinite alternate !important; }
.wish-content .section-kicker { color: #ff8291 !important; }
.wish-content h2 { color: #f4f7ff !important; }
.wish-content p { color: #d1dcf3 !important; }
.wish-number, .wish-signature svg { color: #ff405a !important; text-shadow: 0 0 18px #f02f4b88, 0 0 25px #4e7fff55; }
.wish-signature { color: #ffb1bb !important; }
.wish-orbit { border-color: #5d87ff66 !important; }
.orbit-two { border-color: #f24a6266 !important; }
.wish-orbit-label { background: #0a1731 !important; color: #d6e2ff !important; border: 1px solid #527bff60; }

.sound-scene { background: #030712 !important; }
.sound-scene::before { background: radial-gradient(ellipse at 16% 18%, #122e63 0%, transparent 45%), radial-gradient(ellipse at 84% 76%, #76192d 0%, transparent 43%), linear-gradient(145deg, #030712, #07142e 58%, #120915) !important; background-size: 175% 175% !important; animation: blue-red-ambient 19s ease-in-out infinite alternate !important; }
.sound-scene::after { opacity: .45 !important; background-image: radial-gradient(#ff657a99 .8px, transparent .95px), radial-gradient(#8fb0ff99 .8px, transparent .95px) !important; background-size: 89px 89px, 143px 143px !important; animation: star-drift 54s linear infinite !important; }
.sound-content > h2 { color: #f5f7ff !important; }
.music-card { border: 1px solid #ff4a60b5 !important; background: linear-gradient(135deg, #0d1935, #070d1d 55%, #170e20) !important; box-shadow: 0 17px 42px #000c, 0 0 22px #f02f4b35, 0 0 24px #4e7fff25 !important; }
.music-card::before { background: conic-gradient(from 0deg, transparent 0 24%, #f02f4b55 33%, transparent 45% 56%, #4e7fff55 67%, transparent 79%) !important; }
.music-card::after { background: radial-gradient(ellipse at 88% 8%, #f02f4b26, transparent 35%), radial-gradient(ellipse at 7% 100%, #4e7fff26, transparent 42%) !important; }
.music-card .audio-disc { border-color: #ff7283 !important; box-shadow: 0 0 16px #f02f4b88, inset 0 0 13px #4e7fff66 !important; }
.music-card .audio-disc span { background: #f02f4b !important; box-shadow: 0 0 13px #ff304f !important; }
.music-card .audio-copy strong { color: #f6f8ff !important; text-shadow: 0 0 12px #f02f4b60; }
.music-card .audio-copy > span:last-child { color: #c3d1ed !important; }
.spotify-player-shell { border-color: #ff536b99 !important; box-shadow: 0 0 0 1px #4e7fff3d, 0 0 24px #f02f4b35 !important; }
.music-link { color: #ffb1bb !important; border-color: #ff526a !important; }
.music-link:hover { color: #fff !important; border-color: #7fa1ff !important; }
.video-card { border-color: #507cff90 !important; background: linear-gradient(145deg, #0d1936, #050a18 62%, #160d20) !important; box-shadow: 0 16px 40px #000b, 0 0 25px #4e7fff28 !important; }
.video-overline { color: #ff8796 !important; }
.video-empty { background: radial-gradient(ellipse at 75% 30%, #6f153444, transparent 40%), linear-gradient(135deg, #0a1c3e, #091126 54%, #171020) !important; }
.sound-side-note { color: #ff9aa6 !important; text-shadow: 0 0 16px #f02f4b55; }
.sound-art span { color: #ff596f99 !important; text-shadow: 0 0 20px #f02f4b, 0 0 34px #4e7fff88 !important; }

.voice-scene { background: linear-gradient(135deg, #030712, #081734 53%, #170b19) !important; }
.voice-scene::before { background: radial-gradient(ellipse at 20% 43%, #f02f4b38 0%, transparent 38%), radial-gradient(ellipse at 80% 34%, #315fca66 0%, transparent 39%), linear-gradient(110deg, #030712ed, #0b1733ed 50%, #160b19ed) !important; }
.voice-content > h2 { color: #f5f7ff !important; }
.voice-note-card { border-color: #4e7fff90 !important; background: linear-gradient(140deg, #101c3a, #070d1e 63%, #170e20) !important; box-shadow: 0 16px 38px #0009, 0 0 22px #f02f4b26 !important; }
.voice-note-copy strong { color: #f3f6ff !important; }
.voice-note-copy span { color: #c6d4f0 !important; }
.voice-icon, .voice-wave { color: #ff5a70 !important; }
.voice-edit-note, .voice-notation { color: #bdcdf0 !important; }

.goodbye-scene { background: radial-gradient(ellipse at 51% 47%, #102550, #050a18 67%, #030712) !important; }
.goodbye-backdrop { background: radial-gradient(ellipse at 50% 40%, #122a5955 0%, transparent 46%), radial-gradient(ellipse at 50% 73%, #76182c40 0%, transparent 50%) !important; }
.goodbye-copy h2 { color: #f7f9ff !important; }
.goodbye-copy p { color: #d7e1f7 !important; }
.goodbye-flower, .closing-confetti { color: #ff536b !important; text-shadow: 0 0 20px #f02f4b90, 0 0 30px #4e7fff66; }
.site-footer { color: #aebfdf !important; }
.footer-mark { color: #d9e4fa !important; }
.back-to-top, .story-control { color: #f4f7ff !important; border-color: #f02f4b !important; background: linear-gradient(135deg, #0b1b3a, #101126) !important; box-shadow: 0 0 18px #f02f4b30, 0 0 20px #4e7fff22; }
.story-control-icon { color: #fff !important; background: #e92745 !important; box-shadow: 0 0 18px #f02f4b88; }
.chapter-counter { color: #d2def7 !important; }

/* Slide arrivals: each section eases in, then its text breathes between blue and red light. */
.hero-copy .eyebrow { animation: copy-rise-in .7s .08s both, label-glow 5.6s .9s ease-in-out infinite alternate; }
.hero h1 { text-shadow: 0 0 16px #4e7fff55, 0 0 28px #f02f4b35; animation: title-glow 5.4s .55s ease-in-out infinite alternate; }
.hero-copy p { text-shadow: 0 0 10px #4e7fff24; animation: body-glow 6.5s 1s ease-in-out infinite alternate; }
.hero-vinyl { }
.letter-scene.is-visible .letter-paper h2 { animation: copy-rise-in .85s .12s both, title-glow 5.3s 1s ease-in-out infinite alternate; }
.letter-scene.is-visible .letter-paper p:not(.letter-signoff) { animation: copy-rise-in .9s .28s both, body-glow 6.8s 1.2s ease-in-out infinite alternate; }
.wish-scene.is-visible .wish-content { animation: slide-content-in 1s .06s cubic-bezier(.18,.75,.2,1) both; }
.wish-scene.is-visible .wish-content .section-kicker { animation: copy-rise-in .65s .16s both, label-glow 5.8s 1s ease-in-out infinite alternate; }
.wish-scene.is-visible .wish-content h2 { animation: copy-rise-in .9s .28s both, title-glow 5.2s 1.25s ease-in-out infinite alternate; }
.wish-scene.is-visible .wish-content p { animation: copy-rise-in .9s .42s both, body-glow 6.6s 1.4s ease-in-out infinite alternate; }
.wish-scene.is-visible .wish-signature { animation: copy-rise-in .85s .58s both, label-glow 5.6s 1.6s ease-in-out infinite alternate; }
.sound-scene.is-visible .sound-content { animation: slide-content-in 1s .05s cubic-bezier(.18,.75,.2,1) both; }
.sound-scene.is-visible .sound-content > .section-kicker { animation: copy-rise-in .65s .14s both, label-glow 5.8s 1s ease-in-out infinite alternate; }
.sound-scene.is-visible .sound-content > h2 { animation: copy-rise-in .9s .26s both, title-glow 5.2s 1.2s ease-in-out infinite alternate; }
.sound-scene.is-visible .audio-copy strong { animation: body-glow 5.8s .7s ease-in-out infinite alternate; }
.sound-scene.is-visible .video-card { animation: card-rise-in .9s .48s cubic-bezier(.18,.75,.2,1) both; }
.voice-scene.is-visible .voice-content { animation: slide-content-in 1s .05s cubic-bezier(.18,.75,.2,1) both; }
.voice-scene.is-visible .voice-content > .section-kicker { animation: copy-rise-in .65s .14s both, label-glow 5.8s 1s ease-in-out infinite alternate; }
.voice-scene.is-visible .voice-content > h2 { animation: copy-rise-in .9s .26s both, title-glow 5.2s 1.2s ease-in-out infinite alternate; }
.voice-scene.is-visible .voice-note-card { animation: card-rise-in .9s .42s cubic-bezier(.18,.75,.2,1) both; }
.goodbye-scene.is-visible .goodbye-copy { animation: slide-content-in 1.05s .06s cubic-bezier(.18,.75,.2,1) both; }
.goodbye-scene.is-visible .goodbye-copy h2 { animation: copy-rise-in .9s .2s both, title-glow 5.2s 1.1s ease-in-out infinite alternate; }
.goodbye-scene.is-visible .goodbye-copy p { animation: copy-rise-in .9s .36s both, body-glow 6.6s 1.3s ease-in-out infinite alternate; }
.story-control { animation: control-breathe 4.6s ease-in-out infinite; }
.back-to-top, .music-link, .envelope { transition: color .3s ease, border-color .3s ease, box-shadow .3s ease, filter .3s ease; }
.back-to-top:hover, .music-link:hover { filter: brightness(1.15); box-shadow: 0 0 24px #f02f4b55, 0 0 20px #4e7fff35; }

@keyframes copy-rise-in { 0% { opacity: 0; transform: translateY(20px); filter: blur(3px); } 78% { opacity: 1; transform: translateY(-2px); filter: blur(0); } 100% { opacity: 1; transform: translateY(0); filter: none; } }
@keyframes slide-content-in { 0% { opacity: .4; transform: translateY(28px) scale(.985); } 70% { opacity: 1; transform: translateY(-3px) scale(1.003); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes card-rise-in { 0% { opacity: 0; transform: translateY(24px) scale(.985); } 75% { opacity: 1; transform: translateY(-3px) scale(1.008); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes title-glow { 0%, 100% { text-shadow: 0 0 10px #4e7fff49, 0 0 22px #f02f4b28; } 50% { text-shadow: 0 0 17px #4e7fff86, 0 0 31px #f02f4b67; } }
@keyframes body-glow { 0%, 100% { text-shadow: 0 0 0 #4e7fff00; } 50% { text-shadow: 0 0 9px #4e7fff32, 0 0 13px #f02f4b20; } }
@keyframes label-glow { 0%, 100% { text-shadow: 0 0 5px #f02f4b2e; } 50% { text-shadow: 0 0 13px #f02f4b99, 0 0 16px #4e7fff70; } }
@keyframes blue-red-ambient { 0% { background-position: 0% 35%; filter: saturate(1); } 100% { background-position: 100% 70%; filter: saturate(1.22); } }
@keyframes red-blue-gradient { to { background-position: 220% 0; } }
@keyframes vinyl-color-breathe { 0%, 100% { filter: drop-shadow(0 18px 24px #000b) drop-shadow(0 0 13px #4e7fff55); } 50% { filter: drop-shadow(0 18px 24px #000b) drop-shadow(0 0 20px #f02f4b88); } }
@keyframes control-breathe { 0%, 100% { box-shadow: 0 0 12px #f02f4b28, 0 0 16px #4e7fff18; } 50% { box-shadow: 0 0 22px #f02f4b55, 0 0 20px #4e7fff35; } }
@media (max-width: 760px) {
  .letter-paper { background: linear-gradient(145deg, #101e3c, #080e20 65%, #11152c) !important; }
  .music-card, .video-card, .voice-note-card { box-shadow: 0 14px 34px #000b, 0 0 18px #f02f4b25 !important; }
  .hero h1 { text-shadow: 0 0 12px #4e7fff55, 0 0 22px #f02f4b35; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero h1, .letter-paper h2, .wish-content h2, .sound-content > h2, .voice-content > h2, .goodbye-copy h2 { text-shadow: 0 0 8px #4e7fff24 !important; }
}

/* Final accent tuning: keep the blue-red pairing distinctly crimson, not rose. */
:root { --coral: #ff3c52; --soft-red: #ff4659; }
.eyebrow, .section-kicker, .letter-paper .section-kicker, .wish-content .section-kicker, .sound-content .section-kicker, .voice-content .section-kicker, .video-overline { color: #ff4054 !important; }
.hero-spark, .garden-firefly, .envelope-flower, .wish-number, .wish-signature svg, .sound-side-note, .goodbye-flower, .closing-confetti, .voice-icon, .voice-wave { color: #ff3048 !important; }
.wish-signature, .music-link, .letter-side-note i, .aside-flower { color: #ff5062 !important; }
.garden-petal { background: linear-gradient(145deg, #ff6877, #dc1530 78%) !important; }