/* Base layer: document defaults, the keyframe library the design uses, the
   theme filter and the reduced-motion escape hatch. Component rules live in
   site.css. */

html { scroll-behavior: smooth; background: var(--bg-0a0812); scroll-padding-top: 88px; }
body { margin: 0; background: var(--bg-0a0812); color: var(--inkece8f2); font-family: "EB Garamond", Georgia, serif; }
::selection { background: var(--gold); color: var(--ink-on-gold); }
a { color: var(--inkece8f2); text-decoration: none; }
a:hover { color: var(--gold-ink-lit); }
*:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
@keyframes petalFall { 0% { transform: translate3d(0,-10vh,0) rotate(0deg); } 100% { transform: translate3d(0,112vh,0) rotate(420deg); } }
@keyframes petalSway { 0%,100% { transform: translateX(-22px) rotate(-14deg); } 50% { transform: translateX(22px) rotate(16deg); } }
@keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes toastIn { 0% { transform: translateY(30px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: none; } }
@keyframes fireflyDrift { 0% { transform: translate3d(0,0,0); } 25% { transform: translate3d(46px,-38px,0); } 50% { transform: translate3d(-28px,-72px,0); } 75% { transform: translate3d(38px,-26px,0); } 100% { transform: translate3d(-16px,12px,0); } }
@keyframes fireflyPulse { 0% { opacity: .12; } 45% { opacity: .95; } 100% { opacity: .2; } }
@keyframes lamp { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes kMarquee { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-50%,0,0); } }
@keyframes sunrise { 0% { transform: translateY(150px) scale(.92); opacity: .1; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes climbIn { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } }
@keyframes climbOut { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } }
@keyframes lantern { 0%,100% { opacity: .72; } 30% { opacity: 1; } 55% { opacity: .6; } 78% { opacity: .95; } }
@keyframes haze { 0% { transform: translateX(-4%); } 100% { transform: translateX(4%); } }
@keyframes sway { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes eyes { 0%,94% { opacity: 0; } 96%,97.5% { opacity: .8; } 99%,100% { opacity: 0; } }
@keyframes floatTop { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(2px,-7px,0) rotate(-1.2deg); } }
@keyframes floatMid { 0%,100% { transform: rotate(3deg) translate3d(0,0,0); } 50% { transform: rotate(4.6deg) translate3d(-3px,4px,0); } }
@keyframes floatBack { 0%,100% { transform: rotate(-5deg) translate3d(0,0,0); } 50% { transform: rotate(-6.8deg) translate3d(3px,5px,0); } }
/* the mockup bars grow by scaleX, not width, so the loops never touch layout;
   each bar is laid out at its keyframe max and scaled down from the left */
@keyframes barPulse { 0%,100% { transform: scaleX(.707); opacity: .75; } 50% { transform: none; opacity: 1; } }
@keyframes barPulseB { 0%,100% { transform: scaleX(.804); } 50% { transform: none; } }
@keyframes swatch { 0%,100% { border-color: var(--line2a2442); } 40% { border-color: #c9982f88; } }
@keyframes sheen { 0% { transform: translateX(-140%) skewX(-18deg); } 100% { transform: translateX(320%) skewX(-18deg); } }
@keyframes dust { 0% { transform: translate3d(0,0,0); opacity: 0; } 15% { opacity: .55; } 100% { transform: translate3d(-14px, 300px, 0); opacity: 0; } }
@keyframes logFloat { 0% { transform: translate3d(0,0,0) rotate(-1.4deg); } 30% { transform: translate3d(4px,-7px,0) rotate(1.1deg); } 62% { transform: translate3d(-3px,-3px,0) rotate(1.8deg); } 100% { transform: translate3d(0,0,0) rotate(-1.4deg); } }
@keyframes frameSweep { 0%, 62% { transform: rotate(14deg) translateX(-160%); } 88%, 100% { transform: rotate(14deg) translateX(420%); } }
@keyframes recBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes playhead { 0% { transform: scaleX(.395); } 100% { transform: none; } }
@keyframes wordGlow { 0%, 100% { text-shadow: 0 0 6px #e8b84b33; } 50% { text-shadow: 0 0 16px #e8b84b66; } }
@keyframes tipFloat { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } }
@keyframes lavaDrip { 0% { transform: translateY(0) scaleY(.7); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(320px) scaleY(1.8); opacity: 0; } }
@keyframes flow { 0% { transform: translateX(-2%); } 100% { transform: translateX(2%); } }
@keyframes leakR { 0% { transform: perspective(600px) rotateX(6deg) skewX(11deg) scaleY(.97) translateX(4px); opacity: .6; } 100% { transform: perspective(600px) rotateX(6deg) skewX(8deg) scaleY(1.05) translateX(-4px); opacity: .95; } }
@keyframes leak { 0% { transform: perspective(600px) rotateX(6deg) skewX(-5deg) scaleY(.97) translateX(-4px); opacity: .6; } 100% { transform: perspective(600px) rotateX(6deg) skewX(-2deg) scaleY(1.05) translateX(4px); opacity: .95; } }
@keyframes levitate { 0% { transform: translate3d(0,-14px,0) rotate(-2.5deg); } 100% { transform: translate3d(0,16px,0) rotate(2.5deg); } }
@keyframes orbitCW { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes orbitCCW { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }
@keyframes ringSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes relicPop { 0% { opacity: 0; transform: translate3d(-18px, 22px, 0) scale(.5) rotate(-22deg); } 100% { opacity: 1; transform: none; } }
@keyframes answerIn { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: none; } }
@keyframes pillGlow { 0%,84% { border-color: var(--line2a2442); } 90%,94% { border-color: #c9982f88; } 100% { border-color: var(--line2a2442); } }
@keyframes flagWave { 0%, 100% { transform: skewY(0deg) scaleX(1); } 30% { transform: skewY(1.6deg) scaleX(.965); } 60% { transform: skewY(-1.2deg) scaleX(.99); } 80% { transform: skewY(.8deg) scaleX(.975); } }
@keyframes flagPulse { 0%,100% { box-shadow: 0 0 0 #c9982f00; } 50% { box-shadow: 0 0 20px #c9982f7a; } }
@keyframes markPulse { 0%,100% { filter: drop-shadow(0 0 0 #c9982f00); } 50% { filter: drop-shadow(0 0 12px #c9982f66); } }
@keyframes squareBlink { 0%,72% { opacity: 0; } 82%,88% { opacity: 1; } 96%,100% { opacity: 0; } }
@keyframes pieceStep { 0%,54% { transform: translate3d(0,0,0) rotate(0deg); } 66% { transform: translate3d(14px,-6px,0) rotate(4deg); } 78%,100% { transform: translate3d(0,0,0) rotate(0deg); } }
@keyframes pieceFall { 0%,60% { transform: translate3d(0,0,0) rotate(0deg); opacity: .5; } 74% { transform: translate3d(10px,10px,0) rotate(18deg); opacity: .2; } 86%,100% { transform: translate3d(0,0,0) rotate(0deg); opacity: .5; } }
@keyframes clash { 0%,58% { transform: scale(1); opacity: .7; } 68% { transform: scale(1.5); opacity: 1; } 80%,100% { transform: scale(1); opacity: .7; } }
@keyframes logLine { 0%,100% { opacity: .55; transform: translateX(0); } 50% { opacity: 1; transform: translateX(3px); } }
@keyframes subsTilt { 0% { transform: rotate(-1.8deg) translate3d(0,0,0); } 35% { transform: rotate(1.2deg) translate3d(-3px,-5px,0); } 70% { transform: rotate(2deg) translate3d(2px,3px,0); } 100% { transform: rotate(-1.8deg) translate3d(0,0,0); } }
@keyframes swatchLift { 0%,100% { transform: translateY(0); border-color: var(--line2a2442); } 40% { transform: translateY(-4px); border-color: #c9982f88; } }
@keyframes proseOut { 0%,72% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes bubble { 0% { transform: translateY(20px) scale(.5); opacity: 0; } 25% { opacity: .95; } 100% { transform: translateY(-150px) scale(1.25); opacity: 0; } }
@keyframes ember { 0% { transform: translate3d(0,20px,0) scale(1); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate3d(26px,-220px,0) scale(.5); opacity: 0; } }
@keyframes crust { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-7px) rotate(1.5deg); } }
@keyframes blossom { 0% { transform: translate3d(0,-12%,0) rotate(0deg); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate3d(-70px,120%,0) rotate(340deg); opacity: 0; } }
@keyframes cloud { 0% { transform: translateX(-6%); } 100% { transform: translateX(8%); } }
@keyframes curtain { 0%,100% { transform: skewX(0deg) scaleY(1); } 50% { transform: skewX(2.5deg) scaleY(1.02); } }
@keyframes skyWake { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes beacon { 0%,100% { opacity: .35; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes rays { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes twinkle { 0%,100% { opacity: .15; } 50% { opacity: .9; } }
/* The theme is a palette now (css/theme.css), not a filter over the document.
   The images are left alone on purpose: the roses and the portrait are the
   same objects in either theme. The fireflies are gold sparks meant for a dark
   sky, so they thin out over parchment rather than disappear. */
html { transition: background-color .5s, color .5s; }
html[data-theme="light"] #fx-fireflies,
html:has([data-theme="light"]) #fx-fireflies { opacity: .5 !important; mix-blend-mode: multiply; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } }