/* Consequential homepage motion: relationship cues only; content is visible by default. */
:root { --panc-motion-ease: cubic-bezier(.22, 1, .36, 1); }

.motion-ready [data-hero-motion][data-motion-state="entering"] .immersive-copy > * {
  opacity: 1;
  transform: translateY(.35rem);
  animation: panc-hero-enter 700ms var(--panc-motion-ease) forwards;
}
.motion-ready [data-hero-motion][data-motion-state="entering"] .immersive-copy > :nth-child(2) { animation-delay: 70ms; }
.motion-ready [data-hero-motion][data-motion-state="entering"] .immersive-copy > :nth-child(3) { animation-delay: 140ms; }
.motion-ready [data-hero-motion][data-motion-state="entering"] .immersive-copy > :nth-child(4) { animation-delay: 210ms; }
.motion-ready [data-hero-motion][data-motion-state="entering"] .immersive-listening {
  opacity: 1;
  transform: translateY(.35rem);
  animation: panc-hero-enter 700ms 280ms var(--panc-motion-ease) forwards;
}
@keyframes panc-hero-enter {
  from { opacity: 1; transform: translateY(.35rem); }
  to { opacity: 1; transform: translateY(0); }
}

.instructor-editorial__quote-segment { opacity: 1; transform: none; }

[data-lesson-progression] { position: relative; padding-top: 1rem; }
.motion-ready [data-lesson-progression] .lesson-offering {
  --lesson-motion-y: 0rem;
  opacity: 1;
  transform: translateY(var(--lesson-motion-y));
}
.motion-ready [data-lesson-progression]:not(.is-visible) .lesson-offering { opacity: 1; }
.motion-ready [data-lesson-progression]:not(.is-visible) .lesson-offering:nth-child(1) { --lesson-motion-y: .55rem; }
.motion-ready [data-lesson-progression]:not(.is-visible) .lesson-offering:nth-child(2) { --lesson-motion-y: 1rem; }
.motion-ready [data-lesson-progression]:not(.is-visible) .lesson-offering:nth-child(3) { --lesson-motion-y: .7rem; }
.motion-ready [data-lesson-progression].is-visible .lesson-offering { --lesson-motion-y: 0rem; opacity: 1; transition: border-color 280ms ease, opacity 520ms ease, transform 760ms var(--panc-motion-ease); }
.motion-ready [data-lesson-progression].is-visible .lesson-offering:nth-child(2) { transition-delay: 80ms; }
.motion-ready [data-lesson-progression].is-visible .lesson-offering:nth-child(3) { transition-delay: 140ms; }
.lesson-offering[data-current-step="true"] { border-top-color: var(--exp-brass); }

.piano-salon__deck figure button {
  transition: transform 260ms var(--panc-motion-ease), opacity 260ms ease;
}
.piano-salon__status { margin: 0; color: var(--exp-ink); font-size: .72rem; font-weight: 750; line-height: 1.35; text-align: center; }
.piano-controls button { min-width: 2.75rem; min-height: 2.75rem; transition: color 150ms ease, background-color 150ms ease, transform 150ms ease; }
.piano-controls button:hover { color: #fff; background: var(--exp-ink); }
.piano-controls button:active { transform: scale(.96); }

.home-performance-stage__frame { background: #020a14 url("editorial/performances/2025-june-recital.jpg") center / cover no-repeat; }
.home-performance-stage__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid rgba(217, 191, 120, .72);
  pointer-events: none;
  transform-origin: left;
}
.home-performance-stage__caption { position: relative; }
.home-performance-stage__caption::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--exp-brass);
  transform-origin: top;
}
.motion-ready [data-performance-stage]:not(.is-visible) .home-performance-stage__frame::after { transform: scaleX(0); }
.motion-ready [data-performance-stage].is-visible .home-performance-stage__frame::after { transform: scaleX(1); transition: transform 420ms var(--panc-motion-ease); }
.motion-ready [data-performance-stage]:not(.is-visible) .home-performance-stage__caption::before { transform: scaleY(0); }
.motion-ready [data-performance-stage].is-visible .home-performance-stage__caption::before { transform: scaleY(1); transition: transform 760ms 120ms var(--panc-motion-ease); }
.home-performance-stage__loading { position: absolute; z-index: 1; inset: auto 1rem 1rem; display: none; margin: 0; padding: .7rem .8rem; color: #fff; background: rgba(2, 10, 20, .82); font-size: .72rem; letter-spacing: .04em; }
.home-performance-stage__caption .home-performance-stage__fallback { max-width: 16rem; display: none; flex-direction: column; align-items: flex-start; gap: .15rem; margin: 0; color: #c8d3dc; font-size: .78rem; }
.home-performance-stage__fallback a { min-height: 2.75rem; display: inline-flex; align-items: center; color: #fff; text-underline-offset: .2rem; }
.home-performance-stage__fallback a:focus-visible { outline: 3px solid var(--exp-brass); outline-offset: 2px; }
.home-performance-stage__frame { background: #071322 url("editorial/performances/2025-june-recital.jpg") center / cover no-repeat; }
.home-performance-stage__frame iframe { z-index: 1; background: transparent; }
.home-performance-stage[data-media-state="playable"] .home-performance-stage__loading,
.home-performance-stage[data-media-state="playable"] .home-performance-stage__fallback,
.home-performance-stage[data-media-state="presented"] .home-performance-stage__loading,
.home-performance-stage[data-media-state="presented"] .home-performance-stage__fallback { display: none; }
.home-performance-stage[data-media-state="loading"] iframe,
.home-performance-stage[data-media-state="error"] iframe,
.home-performance-stage[data-media-error="true"] iframe { display: none; }
.home-performance-stage[data-media-state="loading"] .home-performance-stage__loading { display: block; }
.home-performance-stage[data-media-state="error"] .home-performance-stage__loading,
.home-performance-stage[data-media-error="true"] .home-performance-stage__loading { display: none; }
.home-performance-stage[data-media-state="error"] .home-performance-stage__fallback,
.home-performance-stage[data-media-error="true"] .home-performance-stage__fallback { display: flex; }

.motion-ready .family-story__image {
  transition: transform 520ms var(--panc-motion-ease), opacity 520ms var(--panc-motion-ease);
  will-change: transform, opacity;
}
.motion-ready .family-story[data-story-reveal] { animation: panc-family-story-in 260ms var(--panc-motion-ease) both; }
@keyframes panc-family-story-in { from { opacity: 0; transform: translateY(.3rem); } to { opacity: 1; transform: translateY(0); } }

.publication-edition { transition: border-color 240ms ease, transform 240ms var(--panc-motion-ease); }
.publication-edition[data-recording-sample]:focus-within { transform: translateY(-.2rem); }
.publication-edition__book:focus-visible, .publication-edition__purchase:focus-visible, .publication-more:focus-visible { outline-color: var(--structure); }
.publication-edition__purchase:focus-visible, .publication-more:focus-visible { color: #fff; background: var(--exp-ink); box-shadow: 0 0 0 3px var(--structure); text-decoration-color: #fff; }

/* Section reveals enhance an already-visible document and are enabled only by JS. */
.reveal-motion-enabled :is([data-section-motion], .site-footer):not(.is-revealed) > * { opacity: 1; transform: none; }
.reveal-motion-enabled :is([data-section-motion], .site-footer) > * {
  transition: opacity 520ms var(--panc-motion-ease), transform 620ms var(--panc-motion-ease);
}
.reveal-motion-enabled :is([data-section-motion], .site-footer).is-revealed > * { opacity: 1; transform: translateY(0); }
.reveal-motion-enabled :is([data-section-motion], .site-footer) > :nth-child(2) { transition-delay: 70ms; }
.reveal-motion-enabled :is([data-section-motion], .site-footer) > :nth-child(3) { transition-delay: 130ms; }
.reveal-motion-enabled :is([data-section-motion], .site-footer) > :nth-child(4) { transition-delay: 190ms; }
.reveal-motion-enabled [data-section-motion="cards"] > :nth-child(2) { transition-delay: 90ms; }
.reveal-motion-enabled [data-section-motion="cards"] > :nth-child(3) { transition-delay: 180ms; }

/* Sparse score-wire arcs sit behind content and never create horizontal rules. */
.instructor-editorial,
.instructor-editorial__statement,
.private-lessons,
.home-pianos,
.home-publications { position: relative; isolation: isolate; overflow: hidden; }
.instructor-editorial__statement > *,
.private-lessons > *,
.home-pianos > *,
.home-publications > * { position: relative; z-index: 1; }
.private-lessons::before,
.private-lessons::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: clamp(16rem, 34vw, 32rem);
  aspect-ratio: 1.8;
  border: 1px solid rgba(23, 56, 95, .09);
  border-radius: 50%;
  pointer-events: none;
  animation: panc-score-breathe 12s ease-in-out infinite alternate;
}
.private-lessons::before { top: 5%; left: -8rem; border-color: rgba(23, 56, 95, .13); transform: rotate(9deg); box-shadow: 0 1.15rem 0 rgba(197, 165, 82, .1), 0 2.3rem 0 rgba(23, 56, 95, .055); animation-delay: -4s; }
.private-lessons::after { right: -11rem; bottom: 6%; border-color: rgba(23, 56, 95, .1); transform: rotate(-10deg); box-shadow: 0 1.15rem 0 rgba(23, 56, 95, .045), 0 2.3rem 0 rgba(197, 165, 82, .08); animation-delay: -8s; }
.home-pianos::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: clamp(1.25rem, 7vw, 7rem);
  width: 1px;
  height: clamp(4rem, 9vw, 8rem);
  background: rgba(23, 56, 95, .22);
  box-shadow: 1rem 0 0 rgba(23, 56, 95, .12), 2rem 0 0 rgba(197, 165, 82, .2), 3rem 0 0 rgba(23, 56, 95, .09), 4rem 0 0 rgba(23, 56, 95, .16);
  pointer-events: none;
}
@keyframes panc-score-breathe {
  from { translate: 0 0; }
  to { translate: .7rem -.5rem; opacity: .62; }
}

/* Dr. Pittman's statement keeps a local layer for the academy brand mark. The
   wrapper must stay positioned, or the brand mark would anchor to the body. */
.instructor-editorial__statement > .instructor-editorial__notes {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.instructor-editorial__brand-mark {
  position: absolute;
  right: clamp(1.25rem, 4vw, 4rem);
  bottom: clamp(1.25rem, 4vw, 3rem);
  width: clamp(5.5rem, 9vw, 8rem);
  height: auto;
  opacity: .09;
  filter: grayscale(1);
}
@keyframes panc-faculty-contour {
  from { translate: 0 0; opacity: .62; }
  to { translate: .75rem -.6rem; opacity: .92; }
}

[data-ambient-motion="hidden"]::before,
[data-ambient-motion="hidden"]::after {
  animation-play-state: paused !important;
}

@media (max-width: 48rem) {
  .motion-ready [data-hero-motion][data-motion-state="entering"] .immersive-copy > * { animation-duration: 520ms; transform: translateY(.55rem); }
  .motion-ready [data-hero-motion][data-motion-state="entering"] .immersive-listening { animation-duration: 520ms; animation-delay: 180ms; transform: translateY(.55rem); }
  [data-lesson-progression] { padding-top: .75rem; }
  .motion-ready [data-lesson-progression] .lesson-offering { transform: translateY(var(--lesson-motion-y)); }
  .piano-salon__deck figure[data-position="distant"] button { opacity: .16; }
  .piano-salon__deck figure[data-position="previous"] button,
  .piano-salon__deck figure[data-position="next"] button { opacity: min(var(--piano-opacity), .5); }
  .piano-salon__footer { gap: .5rem; }
  .piano-salon__status { max-width: 12rem; }
  .piano-salon__status,
  .piano-salon figcaption p,
  .publication-edition__copy p { font-size: max(.75rem, 12px); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-hero-motion] .immersive-copy > *,
  .motion-ready [data-hero-motion] .immersive-listening,
  .quote-motion-enabled .instructor-editorial__quote-segment,
  .lesson-offering,
  .piano-salon__deck figure button,
  .piano-controls button,
  .motion-ready [data-performance-stage] .home-performance-stage__frame::after,
  .motion-ready [data-performance-stage] .home-performance-stage__caption::before,
  .publication-edition,
  .family-story,
  .family-story__image,
  .family-stories__controls button,
  .reveal-motion-enabled :is([data-section-motion], .site-footer) > *,
  .private-lessons::before,
  .private-lessons::after,
  .home-pianos::after,
  .faculty-directory::before,
  .faculty-directory::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .family-story__image[data-stack-position] {
    transform: translate(var(--stack-x), var(--stack-y)) scale(var(--stack-scale)) rotate(var(--stack-rotation)) !important;
  }
}