/* STUDIO 2.0 V67 — iOS-safe decorative motion.
   One CSS driver for hero waveform and reference logos; no JS timers,
   viewport observers or competing animation drivers.
   This file deliberately loads AFTER site.css and mobile-v66.css. */
@-webkit-keyframes studio67WaveHeight {
  0%,100% {height:calc(var(--h,26px) * .32);opacity:.66;}
  42% {height:calc(var(--h,26px) * 1.13);opacity:1;}
  73% {height:calc(var(--h,26px) * .60);opacity:.84;}
}
@keyframes studio67WaveHeight {
  0%,100% {height:calc(var(--h,26px) * .32);opacity:.66;}
  42% {height:calc(var(--h,26px) * 1.13);opacity:1;}
  73% {height:calc(var(--h,26px) * .60);opacity:.84;}
}
@-webkit-keyframes studio67WaveSoft {
  0%,100% {height:calc(var(--h,26px) * .65);opacity:.72;}
  50% {height:calc(var(--h,26px) * 1.02);opacity:.98;}
}
@keyframes studio67WaveSoft {
  0%,100% {height:calc(var(--h,26px) * .65);opacity:.72;}
  50% {height:calc(var(--h,26px) * 1.02);opacity:.98;}
}
@-webkit-keyframes studio67RefsForward {
  from {-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
  to {-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}
}
@keyframes studio67RefsForward {
  from {transform:translate3d(0,0,0)}
  to {transform:translate3d(-50%,0,0)}
}
@-webkit-keyframes studio67RefsReverse {
  from {-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}
  to {-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
@keyframes studio67RefsReverse {
  from {transform:translate3d(-50%,0,0)}
  to {transform:translate3d(0,0,0)}
}
/* Portrait phones AND landscape phones (including 852 x 393 on iPhone 14 Pro). */
@media (max-width:760px), (max-height:500px) and (max-width:1000px) {
  .waveform-hero[data-waveform],
  .training-hero-wave-v170[data-waveform] {
    display:flex!important;
    visibility:visible!important;
    opacity:.70!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
  }
  /* Animate HEIGHT, not transform: older rules explicitly set transform:none
     under Reduce Motion. Animating height cannot be cancelled by that rule. */
  .waveform-hero[data-waveform] > span,
  .waveform-hero[data-waveform][data-hero-wave-active] > span,
  .training-hero-wave-v170[data-waveform] > span,
  .training-hero-wave-v170[data-waveform][data-hero-wave-active] > span {
    -webkit-animation:studio67WaveHeight var(--d,2.8s) ease-in-out infinite!important;
    animation:studio67WaveHeight var(--d,2.8s) ease-in-out infinite!important;
    -webkit-animation-delay:calc(var(--i,0) * -89ms)!important;
    animation-delay:calc(var(--i,0) * -89ms)!important;
    -webkit-animation-play-state:running!important;
    animation-play-state:running!important;
    min-height:3px;
    -webkit-transform-origin:center center;
    transform-origin:center center;
  }
  .references-section .references-rails{
    -webkit-mask-image:none!important;mask-image:none!important;
  }
  .references-section .references-marquee{overflow:hidden!important;}
  /* Deliberately override the previous data-ref-motion=js state too, in case
     a cached page restored an old JS-controlled track via the back-forward cache. */
  .references-section .references-track,
  .references-section .references-track:not([data-ref-motion="js"]),
  .references-section .references-track[data-ref-motion] {
    -webkit-animation:studio67RefsForward 31s linear infinite!important;
    animation:studio67RefsForward 31s linear infinite!important;
    -webkit-animation-play-state:running!important;
    animation-play-state:running!important;
    -webkit-transition:none!important;
    transition:none!important;
    will-change:transform;
  }
  .references-section .references-track.reverse,
  .references-section .references-track.reverse:not([data-ref-motion="js"]),
  .references-section .references-track.reverse[data-ref-motion] {
    -webkit-animation:studio67RefsReverse 37s linear infinite!important;
    animation:studio67RefsReverse 37s linear infinite!important;
    -webkit-animation-play-state:running!important;
    animation-play-state:running!important;
  }
}
/* Respect reduced-motion preference with a softer amplitude and slower drift,
   consistent with the subtly animated studio logo. */
@media (max-width:760px) and (prefers-reduced-motion:reduce),
       (max-height:500px) and (max-width:1000px) and (prefers-reduced-motion:reduce) {
  .waveform-hero[data-waveform] > span,
  .waveform-hero[data-waveform][data-hero-wave-active] > span,
  .training-hero-wave-v170[data-waveform] > span,
  .training-hero-wave-v170[data-waveform][data-hero-wave-active] > span {
    -webkit-animation-name:studio67WaveSoft!important;
    animation-name:studio67WaveSoft!important;
    -webkit-animation-duration:4.8s!important;
    animation-duration:4.8s!important;
  }
  .references-section .references-track,
  .references-section .references-track:not([data-ref-motion="js"]),
  .references-section .references-track[data-ref-motion]{
    -webkit-animation-duration:75s!important;
    animation-duration:75s!important;
  }
  .references-section .references-track.reverse,
  .references-section .references-track.reverse:not([data-ref-motion="js"]),
  .references-section .references-track.reverse[data-ref-motion]{
    -webkit-animation-duration:80s!important;
    animation-duration:80s!important;
  }
}
/* iPhone landscape: keep decoration small and away from the main CTA. */
@media (max-height:500px) and (max-width:1000px) {
  .hero .waveform-hero[data-waveform],
  .training-hero-wave-v170[data-waveform] {
    right:12px!important;bottom:8px!important;
    width:126px!important;height:44px!important;
    opacity:.55!important;z-index:1!important;
  }
}