/* Texts reveal: Transitions.dev. Local integration below the original snippet. */
:root {
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Lines start translated down + blurred + invisible; .is-shown
   on the parent flips them to their resting state. The second
   line's transition-delay holds it back by --stagger-stagger
   so the eye lands on the headline first. */
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.t-stagger-line--2 { transition-delay: var(--stagger-stagger); }

.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
/* Exit decouples from the stagger: same fade for every line,
   no Y return, no blur — so the disappearance reads as a
   single quiet fade instead of a reverse reveal. */
.t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 200ms ease,
    transform 0s linear,
    filter 0s linear;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .t-stagger-line { transition: none !important; }
}

/* Swim Day: calm entry, with a readable fallback for JS failures / no motion. */
:root{--stagger-dur:800ms;--stagger-distance:100px;--stagger-blur:0px;--stagger-ease:ease}
@media(max-width:760px){:root{--stagger-distance:56px}}
html.text-motion:not(.text-motion-ready) main :is(h1,h2,h3,h4,p,blockquote):not(footer *, .fine-print *, .trial-form *, details *){opacity:0}
html:not(.text-motion) .t-stagger-line{opacity:1;transform:none;filter:none;transition:none;will-change:auto}
.t-stagger.is-shown .t-stagger-line{animation:swimday-release-layer 1ms 1s forwards}
@keyframes swimday-release-layer{to{will-change:auto}}
@media(prefers-reduced-motion:reduce){
  html.text-motion:not(.text-motion-ready) main :is(h1,h2,h3,h4,p,blockquote){opacity:1}
  .t-stagger-line{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;animation:none!important;will-change:auto!important}
}
@media print{.t-stagger-line{opacity:1!important;transform:none!important;filter:none!important}}

/* A single staged entrance. No scroll hijacking or repeated background motion. */
:root{--intro-ease:cubic-bezier(.16,1,.3,1)}
sd-title-row{display:block;overflow:hidden}
.intro-motion .hero h1{--stagger-dur:1200ms;--stagger-distance:112%;--stagger-ease:var(--intro-ease)}
.intro-motion .hero-copy>p{--stagger-dur:1000ms;--stagger-distance:36px;--stagger-ease:var(--intro-ease)}
.intro-pending .hero-image{transform:scale(1.14);opacity:.65}
.intro-pending .header-inner>.brand,.intro-pending .header-actions,.intro-pending .hero-copy .actions>.btn,.intro-pending .hero-bottom{opacity:0}
.intro-pending .site-header .floating-nav{opacity:0}
.intro-playing .hero-image{animation:swimday-photo-entry 2600ms var(--intro-ease) both;transform-origin:65% 50%}
.intro-playing .header-inner>.brand{animation:swimday-header-entry 950ms var(--intro-ease) 80ms both}
.intro-playing .header-actions{animation:swimday-header-entry 950ms var(--intro-ease) 180ms both}
.intro-playing .hero-copy .actions>.btn{animation:swimday-control-entry 950ms var(--intro-ease) 780ms both}
.intro-playing .hero-copy .actions>.btn:nth-child(2){animation-delay:930ms}
.intro-playing .hero-bottom{animation:swimday-control-entry 1000ms var(--intro-ease) 1050ms both}
.intro-playing .site-header .floating-nav{animation:swimday-nav-entry 1100ms var(--intro-ease) 1020ms both}
.intro-skipped .hero .t-stagger-line{transition:none!important;opacity:1;transform:none;filter:none}
.intro-motion .hero .actions>.btn:focus-visible{opacity:1;animation:none}
@keyframes swimday-photo-entry{from{transform:scale(1.14);opacity:.65}to{transform:scale(1);opacity:1}}
@keyframes swimday-header-entry{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:translateY(0)}}
@keyframes swimday-control-entry{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes swimday-nav-entry{from{opacity:0;transform:translate(-50%,36px) scale(.94)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@media(max-width:760px){
 .intro-playing .hero-image{animation-name:swimday-photo-entry-mobile}
 .intro-pending .hero-image{transform:scale(1.08)}
 @keyframes swimday-photo-entry-mobile{from{transform:scale(1.08);opacity:.65}to{transform:scale(1);opacity:1}}
}
@media(prefers-reduced-motion:reduce){
 .intro-motion .hero-image,.intro-motion .header-inner>.brand,.intro-motion .header-actions,.intro-motion .hero-copy .actions>.btn,.intro-motion .hero-bottom,.intro-motion .site-header .floating-nav{animation:none!important;opacity:1;transform:none}
 .intro-motion .site-header .floating-nav{transform:translateX(-50%)}
}
@media print{.intro-motion .hero-image,.intro-motion .header-inner>.brand,.intro-motion .header-actions,.intro-motion .hero-copy .actions>.btn,.intro-motion .hero-bottom{animation:none!important;opacity:1;transform:none}}
