/* Animated clouds with transparent logo */
:root{ --skyTop:#dfeaf8; --skyBottom:#ffffff; --ink:#1a1a1a; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; color:var(--ink); font-family: ui-serif, Georgia, "Times New Roman", serif;}
.stage{ position:relative; min-height:100vh; display:grid; place-items:center; overflow:hidden; background: linear-gradient(180deg, var(--skyTop), var(--skyBottom)); }
.sky{ position:absolute; inset:0; overflow:hidden; }
.clouds{ position:absolute; top:10%; left:-1200px; width:2400px; height:400px; background:url('clouds.svg') repeat-x top left / 1200px 400px; opacity:.9; }
.layer.slow{ top:18%; animation: drift 90s linear infinite; filter: blur(0.3px); opacity:.7 }
.layer.fast{ top:28%; animation: drift 50s linear infinite; opacity:.85 }
@keyframes drift{ from{ transform: translateX(0);} to{ transform: translateX(1200px);} }
.center{ position:relative; text-align:center; padding: clamp(20px, 4vw, 60px); z-index:2; }
.logo{ width:min(1100px, 88vw); height:auto; filter: drop-shadow(0 14px 36px rgba(0,0,0,.28)); }
h1{ margin: clamp(10px, 2vw, 18px) 0 0; font-size: clamp(40px, 6.5vw, 96px); letter-spacing:.04em; }
@media (prefers-color-scheme: dark){ :root{ --skyTop:#0f1720; --skyBottom:#0b0f14; --ink:#f6f7fb; } .clouds{ opacity:.6 } }