/* Motion layer: entrance, reveal and hover animations. Visitors who prefer reduced motion get the still page. */
@media (prefers-reduced-motion:no-preference){

/* Hero: the photo fades up once decoded (.photo-ready) and the introduction rises once the type has loaded
   (.intro-ready), both set by app.js. Only opacity and transform animate, so nothing reflows mid-entrance. */
@keyframes rise{from{opacity:0;transform:translate3d(0,18px,0)}}
.js .landscape-slide:first-child img{opacity:0;transition:opacity 1s ease,transform 8s linear}
.photo-ready .landscape-slide:first-child img{opacity:1}
.js:not(.intro-ready) .park-hero .hero-profile>*,.js:not(.intro-ready) .park-hero .landscape-panel,.js:not(.intro-ready) .hero-bottom-line{opacity:0}
.intro-ready .park-hero .hero-profile>*,.intro-ready .park-hero .landscape-panel,.intro-ready .hero-bottom-line{animation:rise .9s var(--ease) backwards}
.intro-ready .park-hero .hero-profile>:nth-child(1){animation-delay:.15s}
.intro-ready .park-hero .hero-profile>:nth-child(2){animation-delay:.25s}
.intro-ready .park-hero .hero-profile>:nth-child(3){animation-delay:.35s}
.intro-ready .park-hero .hero-profile>:nth-child(4){animation-delay:.43s}
.intro-ready .park-hero .hero-profile>:nth-child(5){animation-delay:.51s}
.intro-ready .park-hero .landscape-panel{animation-delay:.6s}
.intro-ready .hero-bottom-line{animation-delay:.7s}
@keyframes nudge{50%{transform:translateY(3px)}}
.intro-ready .hero-enter span{display:inline-block;animation:nudge 2.4s ease-in-out 1.6s infinite}

/* The active slide marker fills while the slideshow counts down and freezes while it is paused. */
@keyframes slide-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.landscape-dots span{position:relative;overflow:hidden}
.park-hero.is-counting .landscape-dots [aria-pressed="true"] span{background:rgba(225,201,158,.38)}
.park-hero.is-counting .landscape-dots [aria-pressed="true"] span::after{content:"";position:absolute;inset:0;background:#e1c99e;transform-origin:left center;animation:slide-progress var(--slide-ms,7s) linear both paused}
.park-hero.is-counting.is-playing .landscape-dots [aria-pressed="true"] span::after{animation-play-state:running}

/* Navigation: the portrait tilts and links draw an underline on hover. */
.mark-avatar{transition:transform .5s cubic-bezier(.2,.8,.2,1.3)}
.mark:hover .mark-avatar{transform:rotate(-10deg) scale(1.08)}
.links a:not(.pill){background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-block:5px;transition:background-size .35s var(--ease),color .2s}
.links a:not(.pill):hover{background-size:100% 1px}

/* Trailhead: the park emblem is drawn in when it scrolls into view, and the sun rises last. */
.js .park-emblem path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.45,.05,.25,1)}
.js .park-emblem path:last-child{transition-delay:.5s}
.js .park-emblem circle{opacity:0;transform:translateY(10px);transform-box:fill-box;transition:opacity .8s ease 1.2s,transform 1.2s var(--ease) 1.2s}
.js .trailhead-board.in .park-emblem path{stroke-dashoffset:0}
.js .trailhead-board.in .park-emblem circle{opacity:1;transform:none}

/* Experience: each illustration follows its card in, and the credentials settle one by one. */
.js .stop .experience-art img{opacity:0;transform:translateY(22px) scale(.96);transition:opacity 1.1s var(--ease) .25s,transform 1.4s var(--ease) .25s,translate .6s var(--ease)}
.js .stop.in .experience-art img{opacity:1;transform:none}
.stop:hover .experience-art img{translate:0 -6px}
.js .stop .creds li{opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .stop.in .creds li{opacity:1;transform:none;transition-delay:.45s}
.js .stop.in .creds li:nth-child(2){transition-delay:.53s}
.js .stop.in .creds li:nth-child(3){transition-delay:.61s}
.js .stop.in .creds li:nth-child(4){transition-delay:.69s}
.js .stop.in .creds li:nth-child(5){transition-delay:.77s}

/* Points of interest: badges are pressed onto the page in a short cascade and lift when hovered. */
@keyframes badge-in{from{opacity:0;transform:translateY(26px) rotate(-7deg) scale(.9)}}
.poi:nth-child(3n+2){--stagger:.12s}
.poi:nth-child(3n){--stagger:.24s}
.js .poi .wild-badge{opacity:0}
.js .poi.in .wild-badge{opacity:1;animation:badge-in 1.1s cubic-bezier(.2,.8,.2,1.12) var(--stagger,0s) backwards}
.js .poi h3,.js .poi p,.js .poi .go{opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .poi.in h3,.js .poi.in p,.js .poi.in .go{opacity:1;transform:none;transition-delay:calc(var(--stagger,0s) + .25s)}
.wild-badge{transition:translate .5s cubic-bezier(.2,.8,.2,1.25),rotate .5s cubic-bezier(.2,.8,.2,1.25)}
.poi:hover .wild-badge{translate:0 -6px;rotate:-4deg}
@media(max-width:900px){
 .poi:nth-child(n){--stagger:0s}
 .poi:nth-child(even){--stagger:.12s}
}

/* Summit divider: the trail lines run in toward the marker. */
.js .summit-divider .sd-line{transform:scaleX(0);transition:transform 1.2s var(--ease)}
.js .summit-divider .sd-line:first-child{transform-origin:left}
.js .summit-divider .sd-line:last-child{transform-origin:right}
.js .summit-divider .sd-mark{opacity:0;transform:translateY(8px);transition:opacity .7s ease .5s,transform .9s var(--ease) .5s}
.js .summit-divider.in .sd-line{transform:none}
.js .summit-divider.in .sd-mark{opacity:1;transform:none}

/* Waypoint field cards rise in, the illustration is stamped on and the products follow in turn. */
@keyframes wd-in{from{opacity:0;transform:translateY(26px) scale(.96)}}
@keyframes wd-out{to{opacity:0;transform:translateY(14px) scale(.97)}}
@keyframes wd-fade{from{opacity:0}}
@keyframes wd-stamp{from{opacity:0;transform:rotate(-16deg) scale(1.45)}}
@keyframes wd-row{from{opacity:0;transform:translateX(-12px)}}
dialog.wd[open] .wd-card{animation:wd-in .5s cubic-bezier(.2,.8,.2,1.08) both}
dialog.wd[open]::backdrop{animation:wd-fade .3s ease both}
dialog.wd.closing .wd-card{animation:wd-out .22s ease-in both}
dialog.wd.closing::backdrop{animation:wd-fade .22s ease-in reverse both}
dialog.wd[open] .wd-head img{animation:wd-stamp .65s cubic-bezier(.3,1.5,.5,1) .12s both}
dialog.wd[open] .wd-list li{animation:wd-row .5s var(--ease) .22s both}
dialog.wd[open] .wd-list li:nth-child(2){animation-delay:.3s}
dialog.wd[open] .wd-list li:nth-child(3){animation-delay:.38s}
.wd-go{transition:transform .3s var(--ease)}
.wd-list a:hover .wd-go{transform:translateX(3px)}

/* Closing note: the signature is written out once the note is in view. */
.js .end .personal-signature{width:fit-content;clip-path:inset(-12px 100% -12px -12px);transition:clip-path 1.6s var(--ease) .6s}
.js .end.in .personal-signature{clip-path:inset(-12px -16px -12px -12px)}

/* Badges keep drifting gently after they land, each on its own beat, and spring up when their card is hovered. */
@keyframes badge-drift{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-5px) rotate(1.2deg)}70%{transform:translateY(3px) rotate(-1deg)}}
.poi:nth-child(2){--drift:7.4s}
.poi:nth-child(3){--drift:6.6s}
.poi:nth-child(4){--drift:7.8s}
.poi:nth-child(5){--drift:6.9s}
.poi:nth-child(6){--drift:7.2s}
.js .poi.in .wild-badge{animation:badge-in 1.1s cubic-bezier(.2,.8,.2,1.12) var(--stagger,0s) backwards,badge-drift var(--drift,7s) ease-in-out calc(var(--stagger,0s) + 1.1s) infinite}
.poi .wild-badge{transition:translate .5s cubic-bezier(.2,.8,.2,1.25),rotate .5s cubic-bezier(.2,.8,.2,1.25),scale .5s cubic-bezier(.2,.8,.2,1.25),filter .5s}
.poi:hover .wild-badge{translate:0 -10px;rotate:-6deg;scale:1.06;filter:drop-shadow(0 12px 10px rgba(40,34,28,.14))}
}