/* The "No" branch weather (js/storm.js) and its end screen (js/nobranch.js).
   Layers on the stage: garland 4, title 5 < shade, back rain, clouds < couple 6 < front rain,
   flash 7 < Sí/No 8 < mute 9 < end screen 10. body[data-storm] = on | dusk. */
.storm-shade, .rain, .storm-clouds, .storm-flash { position: absolute; pointer-events: none; }

.storm-shade {
  z-index: 5; inset: 0; background: rgb(18, 20, 28); opacity: 0;
  transition: opacity 1.5s ease;
}
[data-storm="on"] .storm-shade { opacity: 0.5; }
[data-storm="dusk"] .storm-shade { opacity: 0.8; transition-duration: 3s; }

.rain { inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; }
.rain-back { z-index: 5; }
.rain-front { z-index: 7; }
[data-storm] .rain { opacity: 1; }
[data-storm="dusk"] .rain-front { opacity: 0.6; transition-duration: 3s; }

/* the guest's name slips away under the clouds instead of being half covered by them */
[data-storm] .title { opacity: 0; transition: opacity 1.2s ease; }

/* the couple darkens a little (still readable), then fades down with the stage */
.rig { transition: filter 1.5s ease; }
[data-storm="on"] .rig { filter: brightness(0.78) saturate(0.82); }
[data-storm="dusk"] .rig { filter: brightness(0.32) saturate(0.6); transition-duration: 3s; }

/* cloud banks roll down over the rose garland and drift */
.storm-clouds {
  z-index: 5; left: -25%; right: -25%; top: 0; height: calc(var(--safe-t) + 36cqw);
  transform: translateY(-115%); opacity: 0;
  transition: transform 1.6s cubic-bezier(.2, .7, .2, 1), opacity 1s ease;
}
[data-storm] .storm-clouds { transform: none; opacity: 1; }
.storm-clouds .cloud { position: absolute; left: 0; width: 100%; }
.cloud.c3 { top: 0; height: 100%; animation: drift 19s ease-in-out infinite alternate; }
.cloud.c2 { top: 0; height: 82%; animation: drift 14s ease-in-out -5s infinite alternate-reverse; }
.cloud.c1 { top: 0; height: 62%; animation: drift 11s ease-in-out -3s infinite alternate; }
@keyframes drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }

/* one soft lightning flash shortly after the clouds arrive */
.storm-flash { z-index: 7; inset: 0; background: #eef2ff; opacity: 0; }
.storm-flash.on { animation: lightning 0.9s ease-out 0.45s both; }
@keyframes lightning {
  0% { opacity: 0; } 8% { opacity: 0.55; } 18% { opacity: 0.05; } 26% { opacity: 0.32; } 100% { opacity: 0; }
}

/* ---------- end screen ---------- */
.no-end {
  position: absolute; z-index: 10; left: 0; right: 0; bottom: calc(var(--safe-b) + 12cqh);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: 0 calc(var(--space-3) + var(--safe-r)) 0 calc(var(--space-3) + var(--safe-l));
  text-align: center; color: var(--paper); animation: rise 1.2s var(--ease-out) both;
}
.no-end[hidden] { display: none; }
.no-end-text {
  margin: 0; max-width: 22ch; font: italic 500 clamp(1.5rem, 7cqw, 2rem)/1.3 var(--serif);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); text-wrap: balance;
}
.no-end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.ghost {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 132px;
  padding: 0 var(--space-3) 0 calc(var(--space-3) + 0.2em); border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 253, 248, 0.7); background: rgba(255, 253, 248, 0.08); color: var(--paper);
  font: 700 var(--text-sm)/1 var(--serif); letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
@media (hover: hover) { .ghost:hover { background: rgba(255, 253, 248, 0.2); } }
.ghost:focus-visible { outline-color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .storm-clouds { transform: none; transition: opacity 1.5s ease; }
  .storm-clouds .cloud { animation: none; }
  .storm-flash.on { animation: lightning 0.9s ease-out 0.45s both; animation-name: lightning-soft; }
  @keyframes lightning-soft { 0% { opacity: 0; } 20% { opacity: 0.18; } 100% { opacity: 0; } }
  .no-end { animation: none; }
}