/* Keyframes сцены и оверлеев. Перенесено из frontend_prototype/Погода Керчь.html
 * без переименований — имена должны совпадать с тем, что вызывает scene-layers.css
 * и scene/index.js. */

@keyframes starTwinkle {
  0%, 100% { opacity: var(--o, 0.8); transform: scale(1); }
  50%      { opacity: 0.15;          transform: scale(0.7); }
}

@keyframes starDrift {
  0%   { margin-left: 0; }
  100% { margin-left: -4px; }
}

@keyframes shootingStar {
  0%, 85% { transform: translate(-10vw, 0) rotate(20deg); opacity: 0; }
  87%     { opacity: 1; }
  100%    { transform: translate(130vw, 40vw) rotate(20deg); opacity: 0; }
}

@keyframes cloudDrift {
  0%   { transform: translateX(-8vw); }
  50%  { transform: translateX(8vw); }
  100% { transform: translateX(-8vw); }
}

/* Луч маяка — ВАРИАНТ C: исходит вниз от фонаря, качается над водой
 * между rotate(-90°) и rotate(90°). Обратный ход — невидимый
 * (opacity 0 c 50% до 100%). Совпадает с прототипом (scene.jsx:115). */
@keyframes lighthouseSpinDown {
  0%   { transform: translate(-50%, 0) rotate(-90deg); opacity: 0; }
  10%  { transform: translate(-50%, 0) rotate(-60deg); opacity: 0.4; }
  25%  { transform: translate(-50%, 0) rotate(0deg);   opacity: 1; }
  40%  { transform: translate(-50%, 0) rotate(60deg);  opacity: 0.4; }
  50%  { transform: translate(-50%, 0) rotate(90deg);  opacity: 0; }
  60%  { transform: translate(-50%, 0) rotate(90deg);  opacity: 0; }
  100% { transform: translate(-50%, 0) rotate(270deg); opacity: 0; }
}

/* Lens flare — ореол на фонаре, синхронизирован с моментом, когда луч
 * направлен на зрителя. Та же длительность, что у lighthouseSpinDown (10s). */
@keyframes lighthouseFlare {
  0%, 50%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  22%           { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  25%           { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  28%           { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
}

/* Дорожка от маяка на воде, видна в момент, когда луч направлен к зрителю. */
@keyframes seaGlimmer {
  0%, 15%, 40%, 100% { opacity: 0; }
  20%                { opacity: 0.35; }
  25%                { opacity: 1; }
  30%                { opacity: 0.35; }
}

@keyframes glimmerDash {
  0%, 100% { transform: scaleX(1);    filter: blur(1px); }
  40%      { transform: scaleX(0.5);  filter: blur(2px); }
  60%      { transform: scaleX(1.15); filter: blur(0.6px); }
}

/* Вспышка по тапу на маяке. */
@keyframes lighthousePulse {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* Рябь от тапа по морю. */
@keyframes rippleExpand {
  0%   { width: 0;     height: 0;     opacity: 1; border-width: 2px; }
  100% { width: 180px; height: 180px; opacity: 0; border-width: 0.5px; }
}

@keyframes rainfall {
  0%   { transform: translate(0, -20px);     opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(-20px, 110vh); opacity: 0; }
}

@keyframes snowfall {
  0%   { transform: translateY(-20px);  opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(110vh); opacity: 1; }
}

@keyframes snowSway {
  0%, 100% { margin-left: 0; }
  50%      { margin-left: var(--sway, 15px); }
}

@keyframes windBlow {
  0%   { transform: translateX(0);     opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(130vw); opacity: 0; }
}

@keyframes lightningFlash {
  0%, 88%, 100% { opacity: 0; }
  89% { opacity: 0.8; }
  90% { opacity: 0.05; }
  91% { opacity: 0.75; }
  92% { opacity: 0; }
  95% { opacity: 0.45; }
  96% { opacity: 0; }
}

@keyframes slideUpIn {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Мерцание окон городка — оригинал в прототипе делал это через SVG <animate>;
 * в нашей версии окна тоже SVG-rect, но проще управлять через CSS-анимацию,
 * поэтому добавляем общий keyframe. */
@keyframes windowFlicker {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.85; }
}

/* Мерцание фонаря маяка — спокойное (без pulse) и резкое (с pulse, см. JS). */
@keyframes lanternIdle {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}