/* ============================================
   TOM TRUMAN DANCE | Motion System v2
   Shared verbatim by all five pages — edit here,
   never per-page.
   Character: Flowing and Stillness. Breath and
   settling — slow, soft, unhurried, arriving and
   coming to rest. One easing curve, one duration
   scale. Entrances animate transform and opacity
   only; box-shadow, width, height, top and left
   are never transitioned.
   ============================================ */

:root {
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1); /* soft settle, no overshoot */
  --dur-reveal: 0.9s;    /* standard entrance */
  --dur-quote: 1.2s;     /* pull quotes arrive alone, slower */
  --dur-micro: 0.35s;    /* hover / focus, deliberate */
  --rise: 24px;          /* entrance travel */
}

@media (max-width: 600px) {
  :root { --rise: 14px; } /* reduced amplitude on phones */
}

/* ---------------------------------------------
   1. HERO (load choreography, not scroll)
   Headline is readable immediately without JS:
   the .w spans are injected at runtime only.
--------------------------------------------- */

/* Slow drift on the hero photograph */
.hero__bg {
  animation: heroDrift 36s var(--ease-settle) infinite alternate;
  will-change: transform;
}
@keyframes heroDrift {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.08) translateY(-1.5%); }
}

/* Breathing light wash */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 55% at 30% 40%, rgba(126,168,196,0.14), transparent 70%);
  animation: heroBreath 9s ease-in-out infinite alternate;
}
@keyframes heroBreath {
  from { opacity: 0.35; transform: scale(1); }
  to   { opacity: 1;    transform: scale(1.12); }
}

/* Word-by-word rise of the headline (spans injected by JS) */
.hero__title .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  animation: wordRise 1s var(--ease-settle) forwards;
  animation-delay: calc(0.35s + var(--wi) * 0.09s);
}
@keyframes wordRise {
  to { opacity: 1; transform: translateY(0); }
}

.hero__label,
.hero__subtitle,
.hero__actions {
  opacity: 0;
  animation: fadeUp var(--dur-reveal) var(--ease-settle) forwards;
}
.hero__label    { animation-delay: 0.15s; }
.hero__subtitle { animation-delay: 1.2s; }
.hero__actions  { animation-delay: 1.45s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(var(--rise)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Drifting motes (divs injected by JS) */
.mote {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196,184,158,0.5), rgba(126,168,196,0.12) 60%, transparent 75%);
  pointer-events: none;
  z-index: 1;
  animation: moteFloat linear infinite;
  will-change: transform, opacity;
}
@keyframes moteFloat {
  0%   { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  12%  { opacity: var(--mo, 0.5); }
  85%  { opacity: var(--mo, 0.5); }
  100% { transform: translate3d(var(--mx, 40px), -110vh, 0) scale(1.1); opacity: 0; }
}

/* Scroll cue */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 2;
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, transparent, var(--accent));
  overflow: hidden;
  opacity: 0;
  animation: cueFade 1s var(--ease-settle) 2.2s forwards;
}
@keyframes cueFade {
  to { opacity: 1; }
}
.scroll-cue::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: linear-gradient(to bottom, transparent, var(--text));
  transform: translateY(-100%);
  animation: cueDrop 2.6s var(--ease-settle) infinite;
}
@keyframes cueDrop {
  to { transform: translateY(100%); }
}

/* Page-header entrance on inner pages (class added by JS) */
.page-enter > * {
  opacity: 0;
  animation: fadeUp var(--dur-reveal) var(--ease-settle) forwards;
}
.page-enter > *:nth-child(1) { animation-delay: 0.1s; }
.page-enter > *:nth-child(2) { animation-delay: 0.25s; }
.page-enter > *:nth-child(3) { animation-delay: 0.4s; }

/* ---------------------------------------------
   2. SCROLL REVEALS (classes applied by JS)
   One shared IntersectionObserver. Elements
   animate in once and stay in; JS removes the
   classes after the entrance completes so hover
   states are never delayed or overridden.
--------------------------------------------- */

.rv {
  opacity: 0;
  transform: translateY(var(--rise));
  transition: opacity var(--dur-reveal) var(--ease-settle),
              transform var(--dur-reveal) var(--ease-settle);
  transition-delay: var(--rd, 0s);
}
.rv.in {
  opacity: 1;
  transform: none;
}

/* Pull quotes arrive alone: slower, later */
.rv--quote {
  transition-duration: var(--dur-quote);
}

/* Images settle from 1.03 to 1.0 with the fade */
img.rv { transform: translateY(var(--rise)) scale(1.03); }
img.rv.in { transform: none; }
.rv:not(img) img {
  transform: scale(1.03);
  transition: transform var(--dur-quote) var(--ease-settle);
  transition-delay: var(--rd, 0s);
}
.rv.in:not(img) img { transform: none; }

/* Divider lines draw themselves across */
.divider.rv {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s var(--ease-settle);
  transition-delay: var(--rd, 0s);
}
.divider.rv.in { transform: scaleX(1); }

/* Pull quotes: accent line draws down as the text settles */
.pull-quote { position: relative; }
.pull-quote.rv { border-left-color: transparent; }
.pull-quote.rv::before {
  content: '';
  position: absolute;
  left: -3px; top: 0;
  width: 3px; height: 100%;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--dur-quote) var(--ease-settle);
  transition-delay: calc(var(--rd, 0s) + 0.2s);
}
.pull-quote.rv.in::before { transform: scaleY(1); }

/* Section labels: a passing underline sweep that fades to rest */
.section-header p.label.rv { position: relative; }
.section-header p.label.rv.in::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  height: 1px;
  width: 100%;
  background: linear-gradient(to right, var(--accent), transparent);
  transform-origin: left;
  animation: sweepIn 1.6s var(--ease-settle) both;
  animation-delay: calc(var(--rd, 0s) + 0.3s);
}
@keyframes sweepIn {
  0%   { transform: scaleX(0); opacity: 1; }
  70%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* ---------------------------------------------
   3. MICRO-INTERACTIONS (interactive elements only)
   Transform, background, border — never layout,
   never animated box-shadow.
--------------------------------------------- */

/* Buttons: quiet lift */
.btn {
  transition: transform var(--dur-micro) var(--ease-settle),
              background-color var(--dur-micro) var(--ease-settle),
              border-color var(--dur-micro) var(--ease-settle),
              color var(--dur-micro) var(--ease-settle);
}
.btn--primary:hover,
.btn--outline:hover { transform: translateY(-2px); }

.btn--ghost::after {
  display: inline-block;
  transition: transform var(--dur-micro) var(--ease-settle);
}
.btn--ghost:hover::after { transform: translateX(5px); }

/* Nav links: underline slides in */
.nav__links a:not(.nav__cta) {
  position: relative;
}
.nav__links a:not(.nav__cta)::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-micro) var(--ease-settle);
}
.nav__links a:not(.nav__cta):hover::after,
.nav__links a.active:not(.nav__cta)::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Nav bar: hide on scroll down, return on scroll up.
   The shadow and background change instantly — only transform moves. */
.nav {
  transition: transform 0.45s var(--ease-settle), background-color 0.3s;
}
.nav.nav--hidden { transform: translateY(-100%); }
.nav.nav--scrolled {
  background: rgba(15, 14, 12, 0.96);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.nav__logo { transition: opacity var(--dur-micro); }
.nav__logo:hover { opacity: 0.8; }

/* Workshop cards: lift + slow image settle */
.workshop-card {
  transition: transform var(--dur-micro) var(--ease-settle),
              border-color var(--dur-micro);
}
.workshop-card:hover {
  transform: translateY(-4px);
  border-color: rgba(126, 168, 196, 0.4);
}
.workshop-card__img { transition: transform 1.2s var(--ease-settle); }
.workshop-card:hover .workshop-card__img { transform: scale(1.03); }

/* Link cards (class added by JS to <a> cards only) */
.hover-lift {
  transition: transform var(--dur-micro) var(--ease-settle),
              border-color var(--dur-micro);
}
.hover-lift:hover {
  transform: translateY(-3px);
  border-color: rgba(126, 168, 196, 0.45) !important;
}

/* Footer social: quiet lift */
.footer__social a {
  transition: transform var(--dur-micro) var(--ease-settle),
              color 0.2s, border-color 0.2s;
}
.footer__social a:hover { transform: translateY(-2px); }

/* Form fields: border transitions (style.css); the focus ring
   appears instantly — box-shadow is never animated */
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus,
.email-form input:focus {
  box-shadow: 0 0 0 3px rgba(126, 168, 196, 0.18);
}

/* Keyboard focus: clearly visible, not just a color shift */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Accent dot breathes: transform + opacity ring only */
.accent-dot { position: relative; }
.accent-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: dotRing 3.2s var(--ease-settle) infinite;
}
@keyframes dotRing {
  0%        { transform: scale(1);   opacity: 0.6; }
  70%, 100% { transform: scale(2.4); opacity: 0; }
}

/* ---------------------------------------------
   4. ACCESSIBILITY: honor reduced motion.
   Everything lands in its final state, no
   transforms, no transitions.
--------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .rv, img.rv,
  .hero__title .w, .hero__label, .hero__subtitle, .hero__actions,
  .page-enter > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .rv img { transform: none !important; }
  .divider.rv { transform: scaleX(1) !important; }
  .pull-quote.rv { border-left-color: var(--accent) !important; }
  .scroll-cue, .mote, .accent-dot::after { display: none !important; }
}