/* Shared rhythm and scroll entrances. Hero styles and animations stay intact. */
:root {
  --section-space: clamp(28px, 3.5vw, 44px);
  --content-space: clamp(20px, 2.5vw, 32px);
  --scroll-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
html { scroll-padding-top: calc(var(--header-height, 64px) + 16px); }
/* Only content sections: preserve every hero's size, artwork, and motion. */
:where(body, main) > section:not(:is(
  .hero, .about-hero, .mission-hero, .join-hero, .solar-hero, .luna-hero,
  .snf-hero, .sac-hero, .portal-hero, .officers-hero, .donate-hero, .team-banner
)) { padding-block: var(--section-space); }
:is(.proj-cards, .partners-static, .home-support, .advisor-photo-only,
    .luna-structure, .solar-structure, .solar-team, .luna-subteams, .solar-subteams,
    .snf-team, .snf-orgs, .snf-gallery, .sac-team) { padding-top: 20px; }
:is(.luna-support, .solar-support, .snf-support, .sac-support) { padding-top: 0; }
.luna-section-intro { padding-bottom: 10px; }
.join-intro, .portal-search { padding-bottom: 20px; }
.sponsor-scroll { padding-block: 28px; }
.site-footer { padding-block: var(--section-space) 24px; }
.divider { margin-top: var(--content-space); }
.statement__text { margin-bottom: var(--content-space); }
:is(.board__title, .partners__title, .schedule__date,
    .solar-section-title, .luna-section-title, .snf-section-title,
    .sac-section-title, .griffin-timeline__heading) { margin-bottom: var(--content-space); }
.griffin-timeline__item { --timeline-item-gap: clamp(28px, 4vw, 48px); padding-bottom: var(--timeline-item-gap); z-index: 1; }
.griffin-timeline__item:last-child { --timeline-item-gap: 0px; padding-bottom: 0; }
.griffin-timeline__item .griffin-timeline__placeholder { min-height: 120px; }
.guest-event .guest-event__rsvp { margin-block: 20px 24px; }
.guest-event__caption { margin-top: 20px; }
.portal-search__input { min-width: 0; }
@media (max-width: 400px) {
  .partner-flip__back p { overflow-wrap: anywhere; }
}
/* Visible by default, including when JS is disabled or unavailable. */
.reveal,
.reveal:is(.reveal--left, .reveal--right, .reveal--fade) {
  opacity: 1;
  transform: none;
  will-change: auto;
}
/* JS enrolls each element individually; nested reveals never double-move. */
.scroll-motion-ready .scroll-reveal-managed {
  --reveal-x: 0px;
  --reveal-y: 24px;
  opacity: 0;
  translate: var(--reveal-x) var(--reveal-y);
  transition: opacity 800ms var(--scroll-ease) var(--reveal-delay, 0ms),
              translate 800ms var(--scroll-ease) var(--reveal-delay, 0ms),
              transform 200ms ease, box-shadow 200ms ease, color 200ms ease,
              background-color 200ms ease, border-color 200ms ease !important;
}
.scroll-motion-ready .reveal--left.scroll-reveal-managed { --reveal-x: -20px; }
.scroll-motion-ready .reveal--right.scroll-reveal-managed { --reveal-x: 20px; }
.scroll-motion-ready .reveal--fade.scroll-reveal-managed { --reveal-y: 12px; }
.scroll-motion-ready .scroll-reveal-managed.is-visible { opacity: 1; translate: none; }
/* Homepage entrances track native scrolling, without a wheel interceptor.
   Keep the timed entrance above as the fallback for older browsers. */
@supports (animation-timeline: view()) {
  .home-page .home-scroll-linked {
    animation: home-scroll-enter linear both !important;
    animation-timeline: view() !important;
    animation-range: entry 0% entry 100% !important;
    transition: transform 200ms ease, box-shadow 200ms ease,
                color 200ms ease, background-color 200ms ease !important;
  }
  .home-page .home-scroll-linked.scroll-reveal-focused {
    animation: none !important;
    opacity: 1;
    translate: none;
  }
}
@keyframes home-scroll-enter {
  from { opacity: 0.2; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}

/* Blend the lettering against the actual backdrop, including photos.
   White lettering becomes dark over light areas and light over dark areas. */
.footer__embed.footer__signup {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
  mix-blend-mode: difference;
}
.footer__signup .footer__signup-title { color: #ffffff; font-weight: 500; }
.footer__signup :is(.footer__signup-intro, .footer__signup-msg) { color: #ffffff; }
.footer__signup-form input {
  min-width: 0;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}
.footer__signup-form input::placeholder { color: #ffffff; opacity: 1; }
.footer__signup-form input:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
.footer__signup .footer__signup-submit {
  background: transparent;
  color: #ffffff;
  border-color: #ffffff;
}
/* A brighter rail follows reading position, using the timeline's own gold. */
.griffin-timeline__list.timeline-progress-ready::before { opacity: 0.35; }
.griffin-timeline__list.timeline-progress-ready::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 28px;
  width: 2px;
  background: #e8c77e;
  transform: scaleY(var(--timeline-progress, 0));
  transform-origin: top;
  pointer-events: none;
}
@media (min-width: 760px) {
  .griffin-timeline__list.timeline-progress-ready::after { left: calc(50% - 1px); }
  .griffin-timeline__item { column-gap: clamp(80px, 8vw, 112px); }
  .griffin-timeline__year { top: calc((100% - var(--timeline-item-gap)) / 2); }
}
@media (max-width: 759px) {
  /* Long month/year labels need their own row on a narrow screen. */
  .griffin-timeline__year {
    position: relative;
    inset: auto;
    width: auto;
    text-align: left;
    padding: 0;
  }
  .griffin-timeline__year::after { left: -41px; right: auto; }
  .griffin-timeline__item { gap: 12px; }
}
@media (max-width: 768px) {
  .scroll-motion-ready .scroll-reveal-managed {
    --reveal-y: 16px;
    transition-duration: 650ms !important;
  }
  .scroll-motion-ready :is(.reveal--left, .reveal--right).scroll-reveal-managed { --reveal-x: 0px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .home-scroll-linked { animation: none !important; opacity: 1; translate: none; }
  .scroll-motion-ready .scroll-reveal-managed { opacity: 1; translate: none; transition: none !important; }
  .griffin-timeline__list.timeline-progress-ready::before { opacity: 1; }
  .griffin-timeline__list.timeline-progress-ready::after { display: none; }
}