/* =========================================================
   HOME PAGE MOTION - usta.agency timings (see usta-motion.js)
   GSAP Power4.easeOut  ~ cubic-bezier(.23, 1, .32, 1)
   GSAP power3.out      ~ cubic-bezier(.215, .61, .355, 1)
   GSAP back.in (loader) ~ cubic-bezier(.6, -.28, .735, .045)
========================================================= */

/* masked units: words / letters rise from below their own line */
.um-on .um-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding: .06em 0 .1em;
    margin: -.06em 0 -.1em;
}
.um-on .um-unit { display: inline-block; white-space: pre; }

/* ---------- hero headline: words rise 200% with a 15deg tilt, 1s each ---------- */
.um-on .hero-content h1 { animation: none !important; opacity: 1 !important; transform: none !important; }
.um-on .um-words .um-unit {
    transform: translateY(200%) rotate(15deg);
    transform-origin: 0 100%;
    transition: transform 1s cubic-bezier(.23, 1, .32, 1);
}
.um-on.um-play .um-words .um-unit { transform: none; }

/* ---------- hero subtitle: letters rise 50px with a tilt and fade, 0.5s each ---------- */
.um-on .um-chars:not(.um-scroll) .um-unit {
    opacity: 0;
    transform: translateY(50px) rotate(15deg);
    transition: transform .5s cubic-bezier(.23, 1, .32, 1), opacity .5s cubic-bezier(.23, 1, .32, 1);
}
.um-on.um-play .um-chars:not(.um-scroll) .um-unit { opacity: 1; transform: none; }

/* ---------- header contents drop in from above, 1s (the bar itself stays put) ---------- */
.um-on #siteHeader > .header-container {
    opacity: 0;
    translate: 0 -50px;
    transition: opacity 1s cubic-bezier(.23, 1, .32, 1), translate 1s cubic-bezier(.23, 1, .32, 1);
}
.um-on.um-play #siteHeader > .header-container { opacity: 1; translate: none; }

/* ---------- section headings: letters rise in on scroll, 0.5s, power3.out ---------- */
.um-on .um-scroll .um-unit {
    opacity: 0;
    transform: translateY(100%);
    transition: transform .5s cubic-bezier(.215, .61, .355, 1), opacity .5s cubic-bezier(.215, .61, .355, 1);
}
.um-on .um-scroll.um-in .um-unit { opacity: 1; transform: none; }
/* the gradient-text headings (dark theme) paint per letter, so keep the colour on the letters */
html[data-theme="dark"] .um-on .um-scroll .um-unit,
.um-on html[data-theme="dark"] .um-scroll .um-unit { -webkit-text-fill-color: currentColor; }

/* ---------- sections themselves: quicker, shorter rise (was 55px over 1.3s) ---------- */
.dm-reveal {
    transform: translateY(40px);
    transition: opacity .8s cubic-bezier(.215, .61, .355, 1), transform .8s cubic-bezier(.215, .61, .355, 1) !important;
}

/* the rotating hero word is animated in place (no mask): it also fades in */
.um-on .um-words .um-free { white-space: normal; opacity: 0; transition: transform 1s cubic-bezier(.23, 1, .32, 1), opacity .6s ease; }
.um-on.um-play .um-words .um-free { opacity: 1; }