/* Rest & Reconnect LV — Approved Motion Styles */

/* Homepage title: no gold underline. */

.brand-title {
  text-decoration: none;
  text-underline-offset: initial;
}

.title-word {
  display: inline-block;
}

/* Homepage star buttons: no upward jump. */

.retro-button:hover,
.retro-button:focus-visible {
  transform: none;
  filter: none;
}

.retro-button--star img {
  transition: filter 0.25s ease;
}

.retro-button--star:hover img,
.retro-button--star:focus-visible img {
  filter: brightness(1.12) saturate(1.35);
}

/* Homepage photograph movement. */

.gallery {
  overflow: hidden;
}

.gallery img {
  transform-origin: center;
}

/* Support UP heading interaction. */

.support-launch {
  display: inline-block;
  cursor: pointer;
  outline-offset: 5px;
}

/* Support UP disclaimer glow. */

.support-disclaimer {
  transition: box-shadow 0.6s ease;
}

html.motion-on .support-disclaimer:hover,
html.motion-on .support-disclaimer:focus-within {
  box-shadow:
    0 0 18px rgba(243, 201, 105, 0.65),
    0 0 36px rgba(113, 209, 209, 0.35);
}

/* Events heading shimmer. */

#events-expect-heading {
  position: relative;
  overflow: hidden;
}

#events-expect-heading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.65) 48%,
    rgba(243, 201, 105, 0.45) 50%,
    rgba(255, 255, 255, 0.65) 52%,
    transparent 65%
  );
  pointer-events: none;
  transform: translateX(-110%);
}

html.motion-on #events-expect-heading::after {
  animation: events-shimmer 1.2s ease-out 0.5s 1 both;
}

@keyframes events-shimmer {
  from {
    transform: translateX(-110%);
  }

  to {
    transform: translateX(110%);
  }
}

/* Events expectation pills: desktop-only floating. */

@media (min-width: 769px) {
  html.motion-on .events-expectations li {
    animation: events-float 4.5s ease-in-out infinite alternate;
  }

  html.motion-on .events-expectations li:nth-child(2) {
    animation-delay: -1.2s;
  }

  html.motion-on .events-expectations li:nth-child(3) {
    animation-delay: -2.4s;
  }

  html.motion-on .events-expectations li:nth-child(4) {
    animation-delay: -3.6s;
  }
}

@keyframes events-float {
  from {
    transform: translateY(-3px);
  }

  to {
    transform: translateY(3px);
  }
}

/* Who We Are: light-blue title highlight. */

#who-heading {
  background-image: linear-gradient(
    transparent 20%,
    rgba(172, 217, 252, 0.75) 20%,
    rgba(172, 217, 252, 0.75) 85%,
    transparent 85%
  );
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100% 100%;
}

html.motion-on #who-heading {
  animation: who-title-highlight 1s ease-out 0.25s 1 both;
}

@keyframes who-title-highlight {
  from {
    background-size: 0% 100%;
  }

  to {
    background-size: 100% 100%;
  }
}

/* Who We Are: portrait has no animation. */

.who-photo-link:focus-visible {
  outline: 3px solid #1e4fa1;
  outline-offset: 5px;
}

/* What We Do: slight overlapping sections on desktop.
   JavaScript animates each section into its final position.
   The content remains in normal document order. */

@media (min-width: 769px) {
  html.motion-on .work-section {
    position: relative;
    margin-top: -18px;
  }

  html.motion-on #connect {
    z-index: 1;
  }

  html.motion-on #advocate {
    z-index: 2;
  }

  html.motion-on #explore {
    z-index: 3;
  }

  html.motion-on #learn {
    z-index: 4;
  }
}

/* Social Media: slower, one-time downward title entrance. */

html.motion-on #social-heading {
  animation:
    social-heading-arrival 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes social-heading-arrival {
  from {
    transform: translateY(-55px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Social Media: smooth horizontal button movement.
   Keep the existing darker-blue SVG hover treatment. */

html.motion-on .social-tile {
  transition: transform 0.45s ease;
}

html.motion-on .social-tile:hover,
html.motion-on .social-tile:focus-visible {
  transform: translateX(10px);
}

/* Stop decorative CSS motion. */

html.motion-off .retro-button,
html.motion-off .retro-button--star img,
html.motion-off .diamond-button,
html.motion-off .gallery img,
html.motion-off .support-disclaimer,
html.motion-off .events-expectations li,
html.motion-off #events-expect-heading::after,
html.motion-off #who-heading,
html.motion-off #social-heading,
html.motion-off .social-tile {
  animation: none;
  transition: none;
}

html.motion-off .events-expectations li,
html.motion-off .social-tile:hover,
html.motion-off .social-tile:focus-visible {
  transform: none;
}

html.motion-off #events-expect-heading::after {
  display: none;
}

/* Honor operating-system reduced-motion preferences. */

@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) .retro-button,
  html:not(.motion-on) .retro-button--star img,
  html:not(.motion-on) .diamond-button,
  html:not(.motion-on) .gallery img,
  html:not(.motion-on) .support-disclaimer,
  html:not(.motion-on) .events-expectations li,
  html:not(.motion-on) #events-expect-heading::after,
  html:not(.motion-on) #who-heading,
  html:not(.motion-on) #social-heading,
  html:not(.motion-on) .social-tile {
    animation: none;
    transition: none;
  }

  html:not(.motion-on) .events-expectations li,
  html:not(.motion-on) .social-tile:hover,
  html:not(.motion-on) .social-tile:focus-visible {
    transform: none;
  }

  html:not(.motion-on) #events-expect-heading::after {
    display: none;
  }
}