/* Native same-origin page transitions; normal navigation remains the fallback. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation-duration: 180ms;
  animation-timing-function: ease-out;
}

::view-transition-new(root) {
  animation-duration: 250ms;
  animation-timing-function: ease-out;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Values stay within the hero; the destination image is revealed over them. */
.chtc-value-transition {
  position: fixed;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(250,248,245,.88);
  color: var(--transition-value-colour, #184e3d);
  pointer-events: none;
  animation: chtc-value-cover 180ms cubic-bezier(.22,.61,.36,1) both;
}
.chtc-value-transition span {
  font-size: clamp(24px, 6vw, 90px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  animation: chtc-value-zoom 180ms cubic-bezier(.22,.61,.36,1) both;
}
.chtc-value-arriving .course-offering-hero,
.chtc-value-arriving .home-editorial-blocks .rpb_homehero .custom-background,
.chtc-value-arriving .hd-hero { position: relative; }
.chtc-value-arriving .course-offering-hero::after,
.chtc-value-arriving .home-editorial-blocks .rpb_homehero .custom-background::after,
.chtc-value-arriving .hd-hero::after {
  content: var(--transition-value-word, "");
  position: absolute;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #faf8f5;
  color: var(--transition-value-colour, #184e3d);
  font-size: clamp(24px, 6vw, 90px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  pointer-events: none;
  animation: chtc-hero-reveal 800ms cubic-bezier(.4,0,.2,1) both;
}
@keyframes chtc-value-cover { from { opacity: 0; } to { opacity: 1; } }
@keyframes chtc-value-zoom { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
@keyframes chtc-hero-reveal {
  0%, 8% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .chtc-value-transition,
  .chtc-value-arriving .course-offering-hero::after,
  .chtc-value-arriving .home-editorial-blocks .rpb_homehero .custom-background::after,
  .chtc-value-arriving .hd-hero::after { display: none; }
}

/* Remove existing hero overlays before introducing the value word. */
.chtc-value-departing .course-offering-hero__content,
.chtc-value-departing .home-editorial-blocks .overlay-image,
.chtc-value-departing .hd-hero-grid {
  opacity: 0 !important;
  transition: opacity 100ms ease-out;
}
.chtc-value-arriving .course-offering-hero__content,
.chtc-value-arriving .home-editorial-blocks .overlay-image,
.chtc-value-arriving .home-hero-message,
.chtc-value-arriving .hd-hero-grid {
  animation: chtc-hero-content-reveal 800ms cubic-bezier(.4,0,.2,1) both;
}
.chtc-value-transition { animation-delay: 80ms; }
.chtc-value-transition span { animation-delay: 80ms; }
@keyframes chtc-hero-content-reveal {
  0%, 18% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .chtc-value-departing .course-offering-hero__content,
  .chtc-value-departing .home-editorial-blocks .overlay-image,
    .chtc-value-departing .hd-hero-grid { opacity: 1 !important; transition: none; }
  .chtc-value-arriving .course-offering-hero__content,
  .chtc-value-arriving .home-editorial-blocks .overlay-image,
  .chtc-value-arriving .home-hero-message,
  .chtc-value-arriving .hd-hero-grid { animation: none; }
}

/* Start closing the selected menu immediately, before the value appears. */
.chtc-menu-leaving .uk-navbar-dropdown,
.chtc-menu-leaving #mobile-menu,
.chtc-menu-leaving #mobile-menu .uk-offcanvas-bar {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 60ms linear !important;
}
/* Keep the value below the replacement image, rather than fading the word
   away on top of an already-visible photograph. */
.chtc-value-arriving .course-offering-hero:has(.course-offering-hero__image)::after {
  animation: none;
}
.chtc-value-arriving .course-offering-hero__image {
  z-index: 101;
  animation: chtc-hero-content-reveal 800ms cubic-bezier(.4,0,.2,1) both;
}
.chtc-value-arriving .course-offering-hero__overlay {
  z-index: 102;
  animation: chtc-hero-content-reveal 800ms cubic-bezier(.4,0,.2,1) both;
}
.chtc-value-arriving .course-offering-hero__frame {
  position: relative;
  z-index: 103;
}
@media (prefers-reduced-motion: reduce) {
  .chtc-menu-leaving .uk-navbar-dropdown,
  .chtc-menu-leaving #mobile-menu,
  .chtc-menu-leaving #mobile-menu .uk-offcanvas-bar { transition: none !important; }
  .chtc-value-arriving .course-offering-hero__image,
  .chtc-value-arriving .course-offering-hero__overlay { animation: none; }
}
@media (max-width: 760px) {
  .chtc-value-arriving .course-offering-hero--mobile-image-hidden::after {
    animation: chtc-hero-reveal 800ms cubic-bezier(.4,0,.2,1) both;
  }
}

/* Include the fast return to the hero within the sub-second animation budget. */
.chtc-value-transition--after-scroll,
.chtc-value-transition--after-scroll span {
  animation-duration: 80ms;
  animation-delay: 30ms;
}

/* Returning home: the old photo holds steady while the bands are already in place. */
.home-transition-stage { display: none; }
.chtc-value-arriving .home-hero-composition > .home-transition-stage {
  display: block;
  grid-area: 1 / 1;
  align-self: start;
  height: var(--home-photo-height);
  position: relative;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.chtc-value-arriving .home-transition-stage::before,
.chtc-value-arriving .home-transition-stage::after {
  position: absolute;
  inset: 0;
  content: "";
}
.chtc-value-arriving .home-transition-stage::before {
  background-image: linear-gradient(rgba(250,248,245,.55),rgba(250,248,245,.55)), var(--transition-previous-image, none);
  background-color: #faf8f5;
  background-size: cover;
  background-position: var(--transition-previous-position, center);
  animation: chtc-home-photo-reveal 800ms ease-in-out both;
}
.chtc-value-arriving .home-transition-stage::after {
  content: var(--transition-value-word, "");
  display: grid;
  place-items: center;
  color: var(--transition-value-colour);
  font-size: clamp(24px,6vw,90px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  animation: chtc-home-word-out 800ms ease-in-out both;
}
.chtc-value-arriving .home-editorial-blocks .home-hero-composition .custom-background::after {
  content: "";
  animation: none;
  display: none;
}
.chtc-value-arriving .home-editorial-blocks .home-hero-message {
  opacity: 1;
  animation: none;
}
.chtc-value-arriving .home-editorial-blocks .overlay-image {
  animation: chtc-content-last-in 800ms ease-out both;
}
@keyframes chtc-home-word-out { 0%, 10% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes chtc-home-photo-reveal { 0%, 30% { opacity: 1; } 85%, 100% { opacity: 0; } }
/* Give the cloud 320ms to appear, overlapping the final word fade. */
@keyframes chtc-home-cloud-in { 0%, 60% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .chtc-value-arriving .home-hero-composition > .home-transition-stage { display: none; }
  .chtc-value-arriving .home-editorial-blocks .overlay-image { animation: none; }
}

/* Reveal the incoming photograph first; keep the value legible above it until
   the latter part of the same 800ms sequence. */
.chtc-value-arriving .course-offering-hero:has(.course-offering-hero__image)::after {
  z-index: 104;
  background: transparent;
  text-shadow: 0 0 18px #faf8f5, 0 0 4px #faf8f5;
  animation: chtc-value-late-out 800ms ease-in-out both;
}
.chtc-value-arriving .course-offering-hero__image,
.chtc-value-arriving .course-offering-hero__overlay {
  animation: chtc-photo-first-in 800ms ease-in-out both;
}
.chtc-value-arriving .course-offering-hero__content {
  animation: chtc-content-last-in 800ms ease-out both;
}
.chtc-value-arriving .home-transition-stage::before {
  animation: chtc-photo-first-out 800ms ease-in-out both;
}
.chtc-value-arriving .home-transition-stage::after {
  text-shadow: 0 0 18px #faf8f5, 0 0 4px #faf8f5;
  animation: chtc-value-late-out 800ms ease-in-out both;
}
@keyframes chtc-photo-first-in { 0% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes chtc-photo-first-out { 0% { opacity: 1; } 60%, 100% { opacity: 0; } }
/* Dissolve the lettering without changing its position or size. */
@keyframes chtc-value-late-out {
  0%, 60% { opacity: 1; filter: blur(0); }
  82% { opacity: .45; filter: blur(2px); }
  100% { opacity: 0; filter: blur(6px); }
}
@keyframes chtc-content-last-in { 0%, 70% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .chtc-value-arriving .course-offering-hero__image,
  .chtc-value-arriving .course-offering-hero__overlay,
  .chtc-value-arriving .course-offering-hero__content { animation: none; }
}

/* The outgoing word is the continuity point: it must already be visible when
   the browser captures the departing page, even on a fast cached navigation. */
.chtc-value-transition,
.chtc-value-transition span {
  animation: none;
  opacity: 1;
}

/* Let the outgoing photo remain recognisable as its cloud gives way to the value. */
.chtc-value-transition,
.chtc-value-transition--after-scroll {
  background: rgba(250,248,245,.55);
  animation: chtc-value-cover 140ms ease-out both;
}
.chtc-value-transition span,
.chtc-value-transition--after-scroll span {
  animation: chtc-value-enter 110ms ease-out 20ms both;
}
@keyframes chtc-value-enter { from { opacity: 0; } to { opacity: 1; } }

/* Crossfade cloud and value together; keep the photo wash independent so it
   cannot delay or weaken the incoming lettering. */
.chtc-value-transition,
.chtc-value-transition--after-scroll {
  background: transparent;
  animation: none;
  opacity: 1;
}
.chtc-value-transition::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(250,248,245,.55);
  animation: chtc-value-cover 140ms ease-out both;
}
.chtc-value-transition span,
.chtc-value-transition--after-scroll span {
  position: relative;
  z-index: 1;
  animation: chtc-value-enter 100ms ease-out both;
}