/* Cenário lofi compartilhado (tela de bloqueio, popup e configurações).
   A cena muda pelo horário em body[data-time]: dawn, day, afternoon e night (padrão).
   scene.js escolhe a cena; cada página só inclui <div class="sky"> com as camadas. */
:root {
  --sky-top: #1f1b2e;
  --sky-mid: #3b2f4f;
  --sky-low: #7a5a78;
  --horizon: #e6a77f;
  --hill-far: #2a2338;
  --hill-near: #1a1624;
  --text: #f6ece4;
  --muted: #cbbcc9;
  --accent: #f2c4a0;
  --glass: rgba(255, 255, 255, 0.06);
  --orb-top: 12%;
  --orb-left: auto;
  --orb-right: 14%;
  --orb-size: 72px;
  --orb-core: #fff6e8;
  --orb-edge: #e8c4a4;
  --orb-glow: rgba(255, 226, 196, 0.18);
  --orb-blur: 0px;
  --stars: 1;
  --rain: 0.12;
  --clouds: 0;
  --cloud-color: 255, 255, 255;
  --button-fg: #2a2035;
  --danger: #ffb4a8;
  --field: rgba(255, 255, 255, 0.1);
  --field-border: rgba(255, 255, 255, 0.18);
}

/* Amanhecer nublado: céu cinza-rosado, sol pálido atrás das nuvens, névoa nas colinas. */
body[data-time="dawn"] {
  --sky-top: #7f8aa3;
  --sky-mid: #b3adbf;
  --sky-low: #e3c6c0;
  --horizon: #f6d9c2;
  --hill-far: #8a8aa0;
  --hill-near: #61647c;
  --text: #fffaf5;
  --muted: #f3e8ec;
  --accent: #ffe1c4;
  --glass: rgba(50, 48, 72, 0.3);
  --orb-top: 52%;
  --orb-left: 18%;
  --orb-right: auto;
  --orb-size: 90px;
  --orb-core: #fff4e2;
  --orb-edge: #f8d6bd;
  --orb-glow: rgba(255, 236, 214, 0.35);
  --orb-blur: 3px;
  --stars: 0;
  --rain: 0.05;
  --clouds: 0.85;
  --cloud-color: 236, 232, 240;
}

/* Dia: céu azul, sol alto, nuvens leves passando, colinas verdes. */
body[data-time="day"] {
  --sky-top: #4f93cf;
  --sky-mid: #82bbe6;
  --sky-low: #bfe0f2;
  --horizon: #e6f2e6;
  --hill-far: #79a284;
  --hill-near: #4e7a5e;
  --text: #ffffff;
  --muted: #eef6fb;
  --accent: #ffe08a;
  --glass: rgba(24, 52, 86, 0.3);
  --orb-top: 11%;
  --orb-right: 16%;
  --orb-size: 78px;
  --orb-core: #fffbe6;
  --orb-edge: #ffe69a;
  --orb-glow: rgba(255, 236, 150, 0.45);
  --stars: 0;
  --rain: 0;
  --clouds: 0.95;
  --cloud-color: 255, 255, 255;
}

/* Tarde: pôr do sol dourado, sol grande perto do horizonte. */
body[data-time="afternoon"] {
  --sky-top: #3d4677;
  --sky-mid: #a5628a;
  --sky-low: #ee9568;
  --horizon: #ffcb7a;
  --hill-far: #5c3b5f;
  --hill-near: #36223d;
  --text: #fff6ec;
  --muted: #fbe1d6;
  --accent: #ffd59e;
  --glass: rgba(48, 22, 48, 0.25);
  --orb-top: 54%;
  --orb-right: 22%;
  --orb-size: 110px;
  --orb-core: #fff0c9;
  --orb-edge: #ffb067;
  --orb-glow: rgba(255, 176, 103, 0.4);
  --stars: 0;
  --rain: 0;
  --clouds: 0.45;
  --cloud-color: 255, 205, 180;
}

/* ---------- Cenário ---------- */

.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 45%, var(--sky-low) 72%, var(--horizon) 100%);
}

/* Granulado suave, como foto de filme. */
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.orb {
  position: absolute;
  top: var(--orb-top);
  left: var(--orb-left);
  right: var(--orb-right);
  width: var(--orb-size);
  height: var(--orb-size);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--orb-core), var(--orb-edge));
  box-shadow: 0 0 70px 24px var(--orb-glow);
  filter: blur(var(--orb-blur));
}

.clouds {
  position: absolute;
  inset: 0 -50% 30% 0;
  opacity: var(--clouds);
  background-image:
    radial-gradient(60px 26px at 8% 18%, rgba(var(--cloud-color), 0.9) 60%, transparent 70%),
    radial-gradient(90px 34px at 13% 16%, rgba(var(--cloud-color), 0.8) 60%, transparent 70%),
    radial-gradient(120px 40px at 34% 32%, rgba(var(--cloud-color), 0.75) 60%, transparent 70%),
    radial-gradient(80px 28px at 40% 29%, rgba(var(--cloud-color), 0.85) 60%, transparent 70%),
    radial-gradient(110px 36px at 58% 12%, rgba(var(--cloud-color), 0.7) 60%, transparent 70%),
    radial-gradient(140px 44px at 76% 40%, rgba(var(--cloud-color), 0.65) 60%, transparent 70%),
    radial-gradient(70px 24px at 82% 37%, rgba(var(--cloud-color), 0.8) 60%, transparent 70%),
    radial-gradient(100px 32px at 94% 20%, rgba(var(--cloud-color), 0.7) 60%, transparent 70%);
  filter: blur(4px);
  animation: drift 140s linear infinite alternate;
}

.stars {
  position: absolute;
  inset: 0 0 45% 0;
  opacity: var(--stars);
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff9 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 12%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 30%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 8%, #fff9 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 34%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 40%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 44%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 18%, #fff7 50%, transparent 51%);
  animation: twinkle 6s ease-in-out infinite alternate;
}
body:not([data-time="night"]) .stars { display: none; }

/* Amanhecer nublado: mais nuvens, garoa leve e névoa sobre as colinas. */
body[data-time="dawn"] .clouds { background-size: 45% 100%; filter: blur(7px); }
body[data-time="dawn"] .hills { filter: blur(1.5px); }
body[data-time="dawn"] .sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(200, 200, 215, 0.35), transparent 55%, rgba(255, 240, 235, 0.25) 85%);
}

.rain {
  position: absolute;
  inset: -100px 0 0 0;
  opacity: var(--rain);
  background-image: repeating-linear-gradient(105deg, transparent 0 18px, rgba(255, 255, 255, 0.5) 18px 19px, transparent 19px 46px);
  background-size: 100% 220px;
  animation: rain 1.6s linear infinite;
}

.hills {
  position: absolute;
  inset: auto 0 0 0;
  height: 28%;
  background:
    radial-gradient(120% 90% at 20% 100%, var(--hill-near) 60%, transparent 61%),
    radial-gradient(110% 80% at 85% 100%, var(--hill-near) 55%, transparent 56%),
    radial-gradient(140% 100% at 55% 100%, var(--hill-far) 62%, transparent 63%);
}

@keyframes rain {
  to { transform: translateY(220px); }
}

@keyframes drift {
  to { transform: translateX(-30%); }
}

@keyframes twinkle {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .rain, .stars, .clouds { animation: none; }
}