/* Animations. All timings come from theme.css.
   The "js" class is added to <html> by a one-line script in each page, so if
   JavaScript is off the content simply shows without animating. */

/* ---------- Keyframes ---------- */
@keyframes ken-burns  { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1.2%, -1%); } }
@keyframes pulse      { 0%, 100% { box-shadow: 0 0 0 3px var(--color-accent-soft); } 50% { box-shadow: 0 0 0 9px rgba(201, 164, 95, 0); } }
@keyframes cue        { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes marquee    { to { transform: translateX(-50%); } }
@keyframes fade-down  { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes swap-in    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes reveal-up  { from { opacity: 0; transform: translateY(var(--reveal-distance)); } to { opacity: 1; transform: none; } }
@keyframes reveal-clip{ from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes settle     { from { transform: scale(1.25); } to { transform: scale(1); } }
@keyframes draw-line  { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- Scroll reveal ----------
   Anything with data-reveal, and every direct child of a data-stagger group,
   starts invisible and plays "reveal-up" when animations.js adds .is-in.
   (An animation is used instead of a transition so it never fights with the
   hover effects on cards and tiles.) */
.js [data-reveal]:not(.is-in),
.js [data-stagger] > :not(.is-in) { opacity: 0; }

.js [data-reveal].is-in,
.js [data-stagger] > .is-in {
  animation: reveal-up var(--speed-slow) var(--ease-out) var(--delay, 0ms) backwards;
}

/* Pictures: the frame appears, then the image is uncovered from the top while
   it settles to full size. (The clip is on the <img>, not the frame, so the
   scroll observer can still see the frame.) */
.js [data-reveal="image"]:not(.is-in) { opacity: 1; }
.js [data-reveal="image"]:not(.is-in) img { clip-path: inset(0 0 100% 0); }
.js [data-reveal="image"].is-in { animation: none; }
.js [data-reveal="image"].is-in img {
  animation: reveal-clip 1.3s var(--ease-out) backwards, settle 1.8s var(--ease-out) backwards;
}

/* The timeline line draws downward */
.js .timeline:not(.is-in)::before { transform: scaleY(0); }
.js .timeline.is-in::before { animation: draw-line 2s var(--ease-out) backwards; }

/* ---------- Hero headline: each word rises out of a mask ---------- */
.hero h1 .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; }
.hero h1 .word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.2s var(--ease-out);
  transition-delay: calc(0.15s + var(--w, 0) * 90ms);
}
.hero.is-ready h1 .word > span { transform: none; }

.js .hero .eyebrow,
.js .hero .lead,
.js .hero-buttons,
.js .hero-notes {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.js .hero .eyebrow { transition-delay: 0.05s; }
.js .hero .lead { transition-delay: 0.7s; }
.js .hero-buttons { transition-delay: 0.9s; }
.js .hero-notes { transition-delay: 1.1s; }
.js .hero.is-ready .eyebrow,
.js .hero.is-ready .lead,
.js .hero.is-ready .hero-buttons,
.js .hero.is-ready .hero-notes { opacity: 1; transform: none; }

/* ---------- Tab content changes ---------- */
.is-swapping { animation: swap-in 0.55s var(--ease-out); }

/* ---------- Page transition ---------- */
main { transition: opacity 0.35s ease; }
body.is-leaving main { opacity: 0; }

/* ---------- Reduced motion: switch everything off ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal]:not(.is-in),
  .js [data-stagger] > :not(.is-in) { opacity: 1; transform: none; }
  .js [data-reveal="image"]:not(.is-in) img { clip-path: none; }
  .js [data-reveal].is-in,
  .js [data-stagger] > .is-in,
  .js [data-reveal="image"].is-in img,
  .js .timeline.is-in::before { animation: none; }
  .js .timeline:not(.is-in)::before { transform: none; }
  .js .hero .eyebrow, .js .hero .lead, .js .hero-buttons, .js .hero-notes,
  .hero h1 .word > span { opacity: 1; transform: none; transition: none; }
  .hero-image, .course-cover img, .marquee-track, .logo-dot, .scroll-cue { animation: none; }
}

/* 2026 refinement: compact typography and additional lightweight motion */
.hero h1 {font-size:clamp(38px,6vw,86px);font-stretch:normal;letter-spacing:-.048em;line-height:1.08}
.page-hero h1, .section-title, .section-heading {font-size:clamp(28px,3.8vw,52px);font-stretch:normal;letter-spacing:-.035em}
h1,h2,h3,h4 {font-stretch:normal;letter-spacing:-.025em}
@keyframes space-subtle-drift {0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-7px,0)}}
@keyframes space-sweep {0%{transform:translateX(-130%) rotate(18deg)}100%{transform:translateX(340%) rotate(18deg)}}
.card,.tile,.btn {transition:transform .42s cubic-bezier(.22,1,.36,1),box-shadow .42s ease,border-color .3s ease}
.card:hover {transform:translateY(-5px);box-shadow:0 18px 45px rgba(0,0,0,.22)}
.card img,.tile img {transition:transform .7s cubic-bezier(.22,1,.36,1)}
.card:hover img,.tile:hover img{scale:1.025}
.btn {position:relative;overflow:hidden}
.btn::after {content:"";position:absolute;inset:-70% auto -70% -80%;width:38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transform:translateX(-130%) rotate(18deg);pointer-events:none}
.btn:hover::after{animation:space-sweep .85s ease-out both}
@media(max-width:700px){.hero h1{font-size:clamp(34px,9vw,52px)}.page-hero h1{font-size:clamp(29px,7.5vw,44px)}}
@media(prefers-reduced-motion:reduce){.card,.tile,.btn,.card img,.tile img{transition:none!important}.btn:hover::after{animation:none!important}}

/* Updated display typography: compact and contemporary */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.036em;text-transform:none}
.hero h1{font-size:clamp(37px,5.4vw,74px);letter-spacing:-.055em;line-height:1.07}
.page-hero h1{font-size:clamp(32px,4.2vw,58px);letter-spacing:-.048em}
.section-title,.section-heading{font-size:clamp(27px,3.3vw,46px);letter-spacing:-.04em}
.logo{font-family:var(--font-display);font-weight:700;letter-spacing:.035em}
.logo-dot{display:none!important}
@media(max-width:700px){.hero h1{font-size:clamp(35px,8vw,50px)}.page-hero h1{font-size:clamp(30px,7vw,44px)}}