/* ==========================================================================
   ProjectUnite · Motion Tune-Up
   --------------------------------------------------------------------------
   Load this file LAST (end of <body>) so its rules and keyframe
   redefinitions win the cascade.

   Why this file exists:
   The site had dozens of *infinite* animations driving `filter`,
   `text-shadow`, `box-shadow`, `background-position` and even
   width/height — all of which force full repaints every frame and
   crash Chrome on mobile devices.

   Strategy (the Apple way):
   1. Redefine those keyframes as no-ops (static, elegant base styles remain).
   2. Keep/replace motion with transform + opacity ONLY — GPU compositable.
   3. Reveal content once on scroll with a gentle rise-and-fade
      (IntersectionObserver in js/motion-tuneup.js).
   4. Lite mode on phones/low-memory devices: no backdrop blur.
   5. Respect prefers-reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Neutralize expensive INFINITE keyframes.
   Empty keyframes = animation still "runs" but paints nothing (free).
   The elements keep their static base styling, so nothing disappears.
   -------------------------------------------------------------------------- */
@keyframes wordGlow {}
@keyframes wordGlowMobile {}
@keyframes heroGlow {}
@keyframes glowPulse {}
@keyframes rippleExpand {}
@keyframes separatorFlow {}
@keyframes separatorGlow {}
@keyframes gradientShift {}
@keyframes heroGradientShift {}
@keyframes backgroundShift {}
@keyframes particlesFloat {}
@keyframes videoCycleGlow {}
@keyframes projectuniteGlassShimmer {}
@keyframes projectuniteLiquidFlow {}
@keyframes breathing-pulse {}
@keyframes illuminate {}
@keyframes gradientSlide {}
@keyframes pulse {}

/* Gentle, transform-only replacement (was scale + drop-shadow filter) */
@keyframes subtle-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.015); }
}

/* Slideshow (Dare To Dream "eventshoo") — keep the Ken Burns feel,
   drop the animated `filter: blur()` which is a per-frame repaint. */
@keyframes eventshooZoomIn {
    0%   { transform: scale(1);    opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: scale(1.08); opacity: 0; }
}
@keyframes eventshooZoomOut {
    0%   { transform: scale(1.08); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: scale(1);    opacity: 0; }
}
@keyframes eventshooPan {
    0%   { transform: scale(1.05) translate3d(-2%, -1%, 0); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: scale(1.05) translate3d(3%, 2%, 0);   opacity: 0; }
}

/* --------------------------------------------------------------------------
   2. Remove purely decorative repaint layers (their only job was to run
   the killed animations above — static they are just visual noise).
   -------------------------------------------------------------------------- */
.hero-ripple-effect,
.hero-glow-effect,
.hero-background-particles::before,
.epic-hero-section::before {
    display: none !important;
}

/* Static gradient text for hero words (the shimmer used to animate
   background-position forever — now it simply looks rich and stays still). */
.hero-word::before {
    animation: none !important;
    background-position: 50% 50% !important;
}

/* --------------------------------------------------------------------------
   3. Apple-style scroll reveal.
   Elements are ONLY hidden when `html.pu-anim` is set by JS, so content
   is never invisible if JavaScript fails to load.
   -------------------------------------------------------------------------- */
html.pu-anim [data-pu-reveal] {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--pu-delay, 0s);
    will-change: opacity, transform;
}

html.pu-anim [data-pu-reveal].pu-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* --------------------------------------------------------------------------
   4. Lite mode (phones / coarse pointers / low-memory devices).
   backdrop-filter blur over large surfaces is the #1 cause of GPU
   process crashes in mobile Chrome. Translucent rgba() backgrounds
   remain, so the design degrades gracefully.
   -------------------------------------------------------------------------- */
html.pu-lite *,
html.pu-lite *::before,
html.pu-lite *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Slightly strengthen glass surfaces that relied on blur for contrast */
html.pu-lite .speed-control-btn,
html.pu-lite .volume-control {
    background: rgba(0, 0, 0, 0.75);
}

/* No hover-driven shadows/parallax on touch — taps shouldn't jiggle */
html.pu-lite .hero-word:hover {
    transform: none;
}

/* background-attachment: fixed forces per-scroll repaints on mobile */
html.pu-lite .epic-hero-section,
html.pu-lite body {
    background-attachment: scroll !important;
}

/* --------------------------------------------------------------------------
   5. Video control (Clara section) icon hardening.
   The SVGs previously depended on inherited percentage sizing; if a
   stylesheet loads late they render full-width. Pin exact sizes.
   -------------------------------------------------------------------------- */
.video-container .volume-control {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: calc(100% - 90px);   /* never collide with the speed button */
}

.video-container .volume-btn {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-container .volume-icon {
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    display: block;
}

.video-container .volume-icon.volume-off,
.video-container .volume-control.muted .volume-icon.volume-on {
    display: none;
}

.video-container .volume-control.muted .volume-icon.volume-off {
    display: block;
}

.video-container .speed-control-btn {
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;                /* comfortable touch target */
    min-height: 32px;
}

@media (max-width: 480px) {
    .video-container .volume-btn  { width: 20px; height: 20px; flex-basis: 20px; }
    .video-container .volume-icon { width: 16px; height: 16px; max-width: 16px; max-height: 16px; }
    .video-container .volume-slider-container { width: 44px; }
    .video-container .speed-control-btn { min-width: 38px; min-height: 28px; font-size: 11px; }
}

/* --------------------------------------------------------------------------
   6. Accessibility: honor the user's motion preference everywhere.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    html.pu-anim [data-pu-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}