/* Quiet accents for the public pages. Content is visible unless the observer
   explicitly opts it into motion; no reveal relies on the early .js class. */
main h1,
main .section h2,
main .invite h2,
main .contact-message-section h2,
main .contact-section h2 {
  transition: color 220ms ease;
}

.hero-copy h1 em {
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  padding-bottom: .045em;
  transition: color 220ms ease, background-size 220ms ease;
}

.facts .fact {
  position: relative;
  isolation: isolate;
}

.facts .fact::before {
  content: "";
  position: absolute;
  inset: -12px 17px;
  z-index: -1;
  border-radius: 3px;
  background: #ebe6db;
  opacity: 0;
  transition: opacity 220ms ease;
}

.facts .fact:first-child::before {
  left: -16px;
}

.facts .fact:last-child::before {
  right: -16px;
}

.facts .fact strong,
.facts .fact span {
  transition: color 220ms ease;
}

.home-courses .course-preview li,
.curriculum li {
  position: relative;
  transition: color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.home-courses .course-preview li::after,
.curriculum li::after {
  content: "";
  position: absolute;
  top: 23px;
  bottom: 23px;
  left: -12px;
  width: 2px;
  background: var(--gold);
  opacity: 0;
  transform: scaleY(.55);
  transform-origin: center;
  transition: opacity 220ms ease, transform 220ms ease;
}

.course-preview li > span,
.curriculum li::before {
  transition: color 220ms ease, transform 220ms ease;
}

.faqs summary {
  transition: color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.faqs summary::after {
  transition: color 220ms ease;
}

/* Match hover feedback for the elements that actually contain controls. */
.faqs summary:focus-visible {
  color: #795324;
  background: #f4f1ea;
  box-shadow: -10px 0 #f4f1ea, 10px 0 #f4f1ea;
}

.invite:focus-within h2,
.contact-section:focus-within h2 {
  color: #e8cc9d;
}

@media (hover: hover) and (pointer: fine) {
  main h1:hover,
  main .section h2:hover,
  main .contact-message-section h2:hover {
    color: #795324;
  }

  .hero-copy h1:hover em {
    color: #8b5c29;
    background-size: 100% 1px;
  }

  main .invite h2:hover,
  main .contact-section h2:hover {
    color: #e8cc9d;
  }

  .facts .fact:hover::before {
    opacity: .72;
  }

  .facts .fact:hover strong {
    color: #795324;
  }

  .facts .fact:hover span {
    color: #374e5b;
  }

  .home-courses .course-preview li:hover,
  .curriculum li:hover {
    color: #795324;
    background-color: #f5f2eb;
    box-shadow: -12px 0 #f5f2eb, 12px 0 #f5f2eb;
  }

  .home-courses .course-preview li:hover::after,
  .curriculum li:hover::after {
    opacity: .7;
    transform: scaleY(1);
  }

  .course-preview li:hover > span,
  .curriculum li:hover::before {
    color: #795324;
    transform: translateX(3px);
  }

  .faqs summary:hover {
    color: #795324;
    background-color: #f4f1ea;
    box-shadow: -10px 0 #f4f1ea, 10px 0 #f4f1ea;
  }

  .faqs summary:hover::after {
    color: #795324;
  }
}

/* Small, one-time entrances. JavaScript sets motion-ready only after the
   observer is attached. Hover transitions do not inherit the reveal delay. */
.motion-ready .reveal-on-scroll {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 460ms ease var(--reveal-delay, 0ms),
    transform 460ms cubic-bezier(.2, .65, .3, 1) var(--reveal-delay, 0ms),
    color 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease;
}

.motion-ready .reveal-on-scroll.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 760px) {
  .facts .fact::before,
  .facts .fact:first-child::before,
  .facts .fact:last-child::before {
    inset: 5px -10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  main *,
  main *::before,
  main *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .motion-ready .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
}