/* evo 2026-10-27 — Ruby lighthouse gale / Breakwater Point
   Base layer is a GENERATED background (image generator): evo/images/lighthouse-gale-bg.jpg, 1280x720.
   All motion is code: CSS layers here + canvases in scene.js. */
:root {
  --ruby: #ff3355;
  --teal: #3ff0e0;
  --pink: #ff4fd8;
  --glass: rgba(8, 10, 14, 0.72);
  --flash: 0;
  --px: 0px;
  --py: 0px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #070b0e; color: #f3f6f8;
  font-family: ui-sans-serif, system-ui, Segoe UI, Inter, Roboto, sans-serif;
}

.scene { position: fixed; inset: 0; overflow: hidden; background: #070b0e; }

.stage {
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, 177.7778vh);
  height: max(56.25vw, 100vh);
  background: #070b0e url("/evo/images/lighthouse-gale-bg.jpg") center / cover no-repeat;
  transform: translate(-50%, -50%) translate3d(var(--px), var(--py), 0) scale(1.05);
  will-change: transform;
}

/* teal glow breathing in the painted storm-cloud break (950,100) */
.storm-glow {
  position: absolute; left: 74%; top: 14%; width: 34%; height: 30%; pointer-events: none; mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at 50% 50%, rgba(80,255,225,.2), rgba(60,200,200,.06) 45%, transparent 70%);
  animation: stormBreath 7s ease-in-out infinite;
}
@keyframes stormBreath { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* storm clouds racing past */
.clouds { position: absolute; left: 0; top: 0; width: 100%; height: 40%; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent);
  mask-image: linear-gradient(to bottom, #000 45%, transparent); }
.clouds::before {
  content: ""; position: absolute; top: 0; left: -100%; width: 200%; height: 100%;
  background-repeat: repeat-x; background-size: 50% 100%;
  background-image:
    radial-gradient(ellipse 20% 12% at 20% 30%, rgba(120,170,170,.12), transparent 70%),
    radial-gradient(ellipse 26% 9% at 58% 20%, rgba(100,150,155,.10), transparent 70%),
    radial-gradient(ellipse 16% 8% at 86% 44%, rgba(110,160,160,.09), transparent 70%);
  animation: cloudRoll 38s linear infinite;
}
@keyframes cloudRoll { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* halo around the painted lamp room (796,146) */
.lamp-halo {
  position: absolute; left: 62.2%; top: 20.3%; width: 16%; height: 26%; pointer-events: none; mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 50% 50%, rgba(255,90,110,.35), rgba(255,40,70,.1) 40%, transparent 70%);
  animation: lampPulse 4s ease-in-out infinite;
}
@keyframes lampPulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

/* sea haze and blown spray drifting across the bay */
.sea-haze { position: absolute; left: 0; top: 44%; width: 100%; height: 30%; pointer-events: none; overflow: hidden; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 35%, #000 60%, transparent); }
.sea-haze::before {
  content: ""; position: absolute; top: 0; left: -100%; width: 200%; height: 100%;
  background-repeat: repeat-x; background-size: 50% 100%;
  background-image:
    radial-gradient(ellipse 24% 30% at 18% 55%, rgba(160,220,220,.09), transparent 70%),
    radial-gradient(ellipse 30% 26% at 58% 45%, rgba(190,230,230,.08), transparent 70%),
    radial-gradient(ellipse 20% 30% at 86% 60%, rgba(255,90,120,.04), transparent 70%);
  animation: hazeRoll 22s linear infinite;
}
@keyframes hazeRoll { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* neon reflections shivering in the promenade puddles */
.puddle-shimmer {
  position: absolute; left: 0; top: 72%; width: 58%; height: 28%; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  background:
    repeating-linear-gradient(179deg, transparent 0 7px, rgba(255,60,100,.08) 8px, transparent 11px),
    repeating-linear-gradient(1deg, transparent 0 12px, rgba(63,240,224,.06) 13px, transparent 18px);
  background-size: 100% 20px, 100% 30px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 35% 55%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 80% at 35% 55%, #000 40%, transparent 100%);
  animation: puddle 7s linear infinite;
}
@keyframes puddle { from { background-position: 0 0, 0 0; } to { background-position: 0 20px, 0 -30px; } }

/* lightning flash wash, driven from JS via --flash */
.flash { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: var(--flash);
  background: radial-gradient(ellipse 70% 60% at 78% 14%, rgba(170,255,245,.55), rgba(120,200,220,.18) 50%, transparent 80%); }

.life { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.signs { position: absolute; inset: 0; pointer-events: none; transform: translate3d(calc(var(--px) * -.4), calc(var(--py) * -.3), 0); }
.neon-sign {
  position: absolute; padding: .3rem .65rem;
  font-size: clamp(.68rem, 1.35vw, 1rem); font-weight: 650;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid currentColor; border-radius: 4px;
  background: rgba(8, 8, 12, .55);
  transition: opacity .04s linear;
  animation: hum 4.6s ease-in-out infinite alternate;
}
.sign-ruby { color: #fff0f2; border-color: rgba(255,51,85,.9);
  text-shadow: 0 0 4px #fff, 0 0 10px var(--ruby), 0 0 22px rgba(255,51,85,.8);
  box-shadow: 0 0 14px rgba(255,51,85,.42), inset 0 0 12px rgba(255,51,85,.2); }
.sign-teal { color: #effffd; border-color: rgba(63,240,224,.9);
  text-shadow: 0 0 4px #fff, 0 0 10px var(--teal), 0 0 22px rgba(63,240,224,.75);
  box-shadow: 0 0 14px rgba(63,240,224,.42), inset 0 0 12px rgba(63,240,224,.2); }
.sign-pink { color: #fff0fb; border-color: rgba(255,79,216,.85);
  text-shadow: 0 0 4px #fff, 0 0 10px var(--pink), 0 0 22px rgba(255,79,216,.7);
  box-shadow: 0 0 14px rgba(255,79,216,.35), inset 0 0 12px rgba(255,79,216,.16); }
.neon-sign.dim { opacity: .28; text-shadow: none; box-shadow: none; }
.neon-sign.half { opacity: .62; }
.neon-sign.flip { animation: flip .9s steps(2, jump-none) 3; }
@keyframes flip { 0% { filter: brightness(1.5); } 100% { filter: brightness(.7); } }
@keyframes hum { from { filter: brightness(.94); } to { filter: brightness(1.06); } }

.motes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.glass-sheen {
  position: absolute; inset: 14px; pointer-events: none;
  background: linear-gradient(115deg, rgba(220,250,250,.05) 0 7%, transparent 26%),
    linear-gradient(to bottom, transparent 62%, rgba(6,8,12,.3));
  mix-blend-mode: screen;
}
.window-frame {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 14px #070b0e, inset 0 0 0 16px #5a1f2c, inset 0 0 90px rgba(0,0,0,.6);
}

.today-card {
  position: absolute; z-index: 12; right: 1.75rem; bottom: 1.75rem;
  max-width: min(22rem, calc(100vw - 3.5rem));
  padding: .85rem 1rem; border: 1px solid rgba(255,51,85,.5); border-radius: 12px;
  background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 24px rgba(255,51,85,.2), 0 0 40px rgba(63,240,224,.1);
}
.today-card .kicker { margin: 0 0 .2rem; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: #ff7088; }
.today-card h1 { margin: 0 0 .35rem; font-size: clamp(1rem, 2.4vw, 1.35rem); line-height: 1.2; font-weight: 650; color: #fff4f6; text-shadow: 0 0 12px rgba(255,51,85,.55); }
.today-card p { margin: 0; font-size: .85rem; line-height: 1.45; color: #e6e2e6; }

@media (max-width: 640px) {
  .today-card { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; padding: .7rem .85rem; }
  .today-card p { font-size: .8rem; }
  .neon-sign { padding: .25rem .5rem; letter-spacing: .12em; }
}

@media (prefers-reduced-motion: reduce) {
  .signs { transform: none; }
  .stage { transform: translate(-50%, -50%) scale(1.05); }
  .clouds::before, .sea-haze::before, .storm-glow, .lamp-halo, .puddle-shimmer, .neon-sign { animation: none !important; }
  .storm-glow, .lamp-halo { opacity: .8; }
  .flash { opacity: 0 !important; }
  .motes { display: none; }
}