/* Reserve final header and media geometry before enhancement scripts run. */
.site-header {
  min-height: 124px;
  padding-top: 19px !important;
  padding-bottom: 19px !important;
}

.site-header .brand {
  flex: 0 0 275px;
  width: 275px;
  height: 86px;
  gap: 0 !important;
}

.brand-rain-logo {
  position: relative;
  display: block;
  width: 275px;
  height: 86px;
  overflow: hidden;
  color: #e6cc8e;
}

.brand-rain-logo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 7px rgba(230, 204, 142, .18));
}

.canopy-opening {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center top;
  clip-path: inset(0 49% 0 49%);
  animation: canopy-open 3.2s cubic-bezier(.22, .61, .36, 1) both;
}

.rain-wordmark-art {
  opacity: 0;
  animation: wordmark-reveal 3.2s ease-out both;
}

@keyframes canopy-open {
  0%, 12% { opacity: 1; clip-path: inset(0 49% 0 49%); }
  47%, 100% { opacity: 1; clip-path: inset(0); }
}

@keyframes wordmark-reveal {
  0%, 53% { opacity: 0; transform: translateY(3px); }
  72%, 100% { opacity: 1; transform: none; }
}

.hero-umbrella img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1618 / 972;
}

.cursor-glow {
  left: 0;
  top: 0;
  contain: strict;
  will-change: transform, opacity;
}

@media (max-width: 800px) {
  .site-header { min-height: 99px; padding-top: 15px !important; padding-bottom: 15px !important; }
  .site-header .brand { flex-basis: 220px; width: 220px; height: 69px; }
  .brand-rain-logo { width: 220px; height: 69px; }
}

@media (prefers-reduced-motion: reduce) {
  .canopy-opening { opacity: 1; clip-path: none; animation: none; }
  .rain-wordmark-art { opacity: 1; animation: none; }
}