/* ---------- Page basics ---------- */
:root {
  --bg: #0c0f12;
  --fg: #e9e6df;
  --warm1: #ffda7a;
  --warm2: #ffc455;
  --neon: #f6f08f;
  --neon-hot: #ffd94e;
  --rain: rgba(255,255,255,.22);
  --rain2: rgba(255,255,255,.10);
  --shadow: rgba(0,0,0,.45);
}

@media (prefers-color-scheme: light) {
  :root { --bg:#faf7f2; --fg:#1f2328; }
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
}

.page { padding: clamp(1.25rem, 2vw + 1rem, 3rem); max-width: 60ch; }

/* ---------- Corner scene container ---------- */
.corner-scene {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: clamp(280px, 28vw, 420px);
  height: clamp(360px, 40vw, 560px);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px -20px var(--shadow), inset 0 0 0 1px rgba(255,255,255,.06);
  pointer-events: none; /* decorative */
  isolation: isolate;
}

/* Background image — crop to storefront (min trees), keep bottom focus */
.scene-img {
  position: absolute; inset: 0;
  background-image: url("img/cafe.jpg"); /* <- put your file here */
  background-size: cover;
  background-position: center bottom; /* shows storefront, trims trees */
  filter: contrast(1.08) saturate(1.05) brightness(.86);
  transform: translateZ(0); /* new layer for smoother anim overlays */
}

/* ---------- Rain (3 parallax layers, CSS-only) ---------- */
.rain { position: absolute; inset: -40% -20% -20% -20%; pointer-events: none; }

.rain--far {
  background-image:
    repeating-linear-gradient(170deg,
      transparent 0 34px,
      var(--rain2) 34px 36px);
  animation: rainFall 7.5s linear infinite;
  opacity: .35;
}

.rain--mid {
  background-image:
    repeating-linear-gradient(170deg,
      transparent 0 22px,
      var(--rain) 22px 24px);
  animation: rainFall 5.8s linear infinite;
  opacity: .55;
}

.rain--near {
  background-image:
    repeating-linear-gradient(170deg,
      transparent 0 16px,
      rgba(255,255,255,.28) 16px 18px);
  animation: rainFall 4.2s linear infinite;
  mix-blend-mode: screen;
  opacity: .65;
}

@keyframes rainFall {
  to { transform: translate3d(-6%, 42%, 0); }
}

/* ---------- Warm window / door glows (mix-blend to light the photo) ---------- */
.glow {
  position: absolute;
  background: radial-gradient(60% 85% at 50% 50%, var(--warm1) 0 55%, transparent 70%);
  filter: blur(6px);
  mix-blend-mode: screen;
  opacity: .85;
  animation: glowFlicker 4s ease-in-out infinite;
}

.glow--window-a {
  /* left showcase window */
  width: 92px; height: 70px;
  left: 26%; bottom: 28%;
}

.glow--window-b {
  /* right showcase window */
  width: 98px; height: 74px;
  left: 56%; bottom: 28%;
  animation-delay: .8s;
}

.glow--door {
  /* tall door pane */
  width: 40px; height: 130px;
  left: 45%; bottom: 22%;
  background: radial-gradient(40% 80% at 50% 50%, var(--warm2) 0 50%, transparent 70%);
  animation-delay: 1.6s;
}

@keyframes glowFlicker {
  0%   { opacity: .72; filter: blur(6px) brightness(1.0); }
  12%  { opacity: .92; filter: blur(7px) brightness(1.15); }
  25%  { opacity: .80; filter: blur(6px) brightness(1.0); }
  38%  { opacity: .97; filter: blur(8px) brightness(1.22); }
  46%  { opacity: .82; }
  51%  { opacity: .98; }
  63%  { opacity: .86; }
  100% { opacity: .92; }
}

/* ---------- Neon sign band (top) ---------- */
.neon {
  position: absolute;
  left: 18%; right: 18%;
  top: 28%;
  height: 18px; /* the bright strip where signs are */
  background:
    linear-gradient(0deg, transparent 15%, rgba(0,0,0,.25) 15% 85%, transparent 85%),
    linear-gradient(90deg, var(--neon), var(--neon-hot));
  opacity: .85;
  filter: blur(0.6px) drop-shadow(0 0 6px var(--neon));
  mix-blend-mode: screen;
  animation: neonPulse 2.6s infinite steps(2, end);
}

@keyframes neonPulse {
  0%, 7%   { opacity: .92; filter: drop-shadow(0 0 8px var(--neon)); }
  8%       { opacity: .55; filter: drop-shadow(0 0 1px var(--neon)); }
  9%, 28%  { opacity: .96; }
  29%      { opacity: .4; }
  30%, 100%{ opacity: .9; }
}

/* ---------- Lantern (right edge) ---------- */
.lantern {
  position: absolute;
  right: 6%;
  top: 8%;
  width: 22px; height: 22px;
  background: radial-gradient(circle at 50% 50%, #ffd68a 0 55%, transparent 65%);
  border-radius: 50%;
  filter: blur(1px) drop-shadow(0 0 10px #ffd68a);
  mix-blend-mode: screen;
  animation: glowFlicker 3.5s ease-in-out infinite;
}

/* ---------- Ground shimmer / puddle ---------- */
.puddle {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 18%;
  background:
    radial-gradient(120% 100% at 50% 100%, rgba(255,210,120,.22), transparent 60%),
    linear-gradient(90deg,
      rgba(255,255,255,.08) 0 8%,
      transparent 8% 15%,
      rgba(255,255,255,.10) 15% 22%,
      transparent 22% 30%,
      rgba(255,255,255,.08) 30% 38%,
      transparent 38% 46%,
      rgba(255,255,255,.10) 46% 54%,
      transparent 54% 62%,
      rgba(255,255,255,.08) 62% 70%,
      transparent 70% 100%);
  mix-blend-mode: screen;
  opacity: .55;
  animation: shimmer 8s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { filter: brightness(1) blur(0.2px); }
  50% { filter: brightness(1.15) blur(0.4px); }
}

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  .rain, .glow, .neon, .puddle { animation: none !important; }
}