/* Animation only: loaded exclusively by the Ring of Fire story. */
.ring-story-page{--ring-rise:20px;--ring-small-rise:8px;--ring-hero-scale:1.03;--ring-feature-scale:.97}
.ring-story-page .ring-hero-content>*,
.ring-story-page .ring-hero-photo-pair>.ring-journey-photo,
.ring-story-page .ring-gallery-button{animation:none}
.ring-story-page .ring-motion{--ring-from:translateY(var(--ring-rise));--ring-duration:800ms}
.ring-story-page .ring-motion-graphic{--ring-from:translateY(var(--ring-small-rise))}
.ring-story-page .ring-motion-frame{--ring-from:translateY(var(--ring-small-rise));--ring-duration:750ms}
.ring-story-page .ring-motion-feature{--ring-from:scale(var(--ring-feature-scale));--ring-duration:1000ms}
.ring-story-page .ring-motion-hero{--ring-from:scale(var(--ring-hero-scale));--ring-duration:1400ms}
.ring-story-page .ring-motion:not(.ring-revealed){opacity:0;transform:var(--ring-from)}
.ring-story-page .ring-motion.ring-revealed{animation:ring-cinematic-enter var(--ring-duration) cubic-bezier(.22,1,.36,1) var(--ring-delay,0ms) both}
@keyframes ring-cinematic-enter{from{opacity:0;transform:var(--ring-from)}to{opacity:1;transform:none}}
/* Keep hover on the inner image so it does not compete with the reveal. */
.ring-story-page :is(.photo-interactive-btn,.ring-climax-btn,.eclipse-frame-btn) img{transition:transform 400ms cubic-bezier(.22,1,.36,1)}
.ring-story-page :is(.photo-interactive-btn,.ring-climax-btn):hover img{transform:none}
.ring-story-page .eclipse-frame-btn:hover,
.ring-story-page .eclipse-frame-btn:focus-visible{transform:none;box-shadow:none}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .ring-story-page :is(.photo-interactive-btn,.ring-climax-btn,.eclipse-frame-btn):hover img{transform:scale(1.02)}
}
@media(max-width:800px){
 .ring-story-page{--ring-rise:6px;--ring-small-rise:4px;--ring-hero-scale:1;--ring-feature-scale:1}
 .ring-story-page :is(.ring-motion-hero,.ring-motion-feature){--ring-from:translateY(4px)}
}
@media(prefers-reduced-motion:reduce){
 .ring-story-page .ring-motion,
 .ring-story-page .ring-motion.ring-revealed{animation:none!important;opacity:1!important;transform:none!important}
 .ring-story-page :is(.photo-interactive-btn,.ring-climax-btn,.eclipse-frame-btn) img{transition:none!important;transform:none!important}
}