/* Home-only progressive enhancements. All copy and artwork remain available without JS. */
.astra-motion-page .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.astra-motion-page .hero-media>img{transform:none;will-change:auto}
.astra-motion-page .hero-media{overflow-anchor:none;background:#e6f6ea}
.hero-copy{isolation:isolate}
.hero-copy::before{content:'';position:absolute;z-index:-1;inset:-30px auto -44px 50%;width:calc(100% + 48px);max-width:640px;transform:translateX(-50%);pointer-events:none;background:linear-gradient(180deg,#e6f6eae8 0%,#e6f6eaf5 60%,#e6f6eae0 86%,#e6f6ea00 100%);mask-image:linear-gradient(90deg,transparent,#000 33%,#000 67%,transparent)}
@media(max-width:800px){.hero-copy::before{inset:-16px auto -32px 50%;width:calc(100% + 40px)}}
.hero-ambient-layers,.hero-leaf-mask,.hero-leaf-paint,.hero-dragon-blink{position:absolute;inset:0;pointer-events:none}
.hero-ambient-layers{z-index:2;overflow:hidden}
.hero-leaf-mask--left{mask-image:radial-gradient(ellipse var(--left-leaf-radius) at var(--left-leaf-center),#000 58%,transparent 96%)}
.hero-leaf-mask--right{mask-image:radial-gradient(ellipse var(--right-leaf-radius) at var(--right-leaf-center),#000 58%,transparent 96%)}
.hero-leaf-paint{background-image:var(--hero-artwork);background-size:var(--art-size);background-position:var(--art-position);background-repeat:no-repeat;animation-play-state:paused;will-change:transform}
.hero-leaf-mask--left .hero-leaf-paint{transform-origin:var(--left-leaf-origin);animation:hero-leaf-left 5.8s ease-in-out infinite paused}
.hero-leaf-mask--right .hero-leaf-paint{transform-origin:var(--right-leaf-origin);animation:hero-leaf-right 6.6s -.9s ease-in-out infinite paused}
.hero-ambient-layers.is-playing .hero-leaf-paint{animation-play-state:running}
.hero-dragon-blink{background:url('../images/free-astra/hero-blink.webp') var(--art-position)/var(--art-size) no-repeat;mask-image:radial-gradient(ellipse var(--dragon-eye-left-radius) at var(--dragon-eye-left),#000 80%,transparent 100%),radial-gradient(ellipse var(--dragon-eye-right-radius) at var(--dragon-eye-right),#000 80%,transparent 100%);opacity:0;animation:hero-dragon-blink 5.8s ease-in-out infinite paused}
.hero-ambient-layers.is-playing .hero-dragon-blink{animation-play-state:running}
@keyframes hero-dragon-blink{0%,94%,100%{opacity:0}95.5%,97.5%{opacity:1}99%{opacity:0}}
@keyframes hero-leaf-left{0%,100%{transform:rotate(-1.2deg) translate(-1px,0)}50%{transform:rotate(1.2deg) translate(2px,.5px)}}
@keyframes hero-leaf-right{0%,100%{transform:rotate(1deg) translate(1px,0)}50%{transform:rotate(-1.2deg) translate(-2px,.5px)}}
.child-proof-next-label{display:none}
.coloring-art.is-comparison{display:block;width:100%;max-width:450px;margin:24px auto 0;padding-bottom:48px;--color-reveal:50%;--compare-height:calc(100% - 48px)}
.coloring-art.is-comparison::after{display:none}
.is-comparison figure{position:relative;width:100%}
.is-comparison figure:first-child{position:absolute;inset:0 0 48px;z-index:2;pointer-events:none}
.is-comparison .coloring-page{border-radius:8px;border:0;box-shadow:none;transform:none}
.is-comparison .coloring-page--color{clip-path:inset(0 calc(100% - var(--color-reveal)) 0 0);border-radius:0}
.is-comparison .coloring-page--outline{box-shadow:0 20px 45px #68372016,0 0 0 1px #e2d4cd;border-radius:8px}
.is-comparison figcaption{position:absolute;bottom:-42px;padding:0;font-size:15px;line-height:24px;width:50%;pointer-events:none}
.is-comparison figure:first-child figcaption{left:0}
.is-comparison figure:nth-child(2) figcaption{right:0}
.coloring-slider{position:absolute;z-index:5;inset:0 0 48px;width:100%;height:var(--compare-height);margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.coloring-handle{position:absolute;z-index:4;top:0;bottom:48px;left:var(--color-reveal);width:3px;transform:translateX(-50%);background:#176d54;pointer-events:none;box-shadow:0 0 0 1px #ffffffb3}
.coloring-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:white;border:2px solid #176d54;box-shadow:0 4px 14px #203d3629}
.coloring-art:has(.coloring-slider:focus-visible){outline:3px solid #ac4e25;outline-offset:7px;border-radius:8px}
.story-journey{display:flex;align-items:center;gap:0;justify-content:center;margin:24px auto 0;max-width:300px}
.story-journey button{position:relative;width:44px;height:44px;flex:none;display:grid;place-items:center;border:1px solid #daca9f;border-radius:50%;background:#fffefb;color:#76501a;font-size:13px;font-weight:800;transition:background .25s,color .25s,box-shadow .25s}
.story-journey button:not(:last-child){margin-right:18px}
.story-journey button:not(:last-child)::after{content:'';position:absolute;left:calc(100% + 1px);width:18px;height:2px;background:#dfd1b4}
.story-journey button[aria-current=step]{background:#176d54;color:#fff;border-color:#176d54;box-shadow:0 0 0 5px #176d5412}
.story-step.is-current::before{background:#176d54;color:white;border-color:#176d54;box-shadow:0 0 0 5px #176d5412}
.story-step.is-current time,.story-step.is-current .story-step-title{color:#176d54}
.astra-motion-page .style-gallery .card-img{transition:box-shadow .3s,border-color .3s}
.astra-motion-page .style-gallery:focus-within .card-img{border-color:#d7eee1;box-shadow:0 20px 40px #335d7924}
.astra-motion-page .moment-card{transition:translate .28s}
.astra-motion-page .faq-item{transition:border-color .25s,background .25s}
.astra-motion-page .faq-item[open]{border-color:#8fbba7;background:#f7fcf9}
@media(hover:hover) and (pointer:fine){.astra-motion-page .moment-card:hover{translate:0 -4px}}
@media(max-width:800px){
 .astra-motion-page .child-proof-track,.astra-motion-page .child-proof-slide:not([hidden]){display:contents}
 .astra-motion-page .child-proof-visual{grid-column:1;grid-row:1}
 .astra-motion-page .child-proof-controls{grid-column:1;grid-row:2;display:grid;grid-template-columns:48px minmax(52px,1fr) auto;gap:14px;width:100%;max-width:410px;margin:0 auto 8px;padding:14px 0;border-block:1px solid #c9dee9}
 .astra-motion-page .child-proof-copy{grid-column:1;grid-row:3}
 .astra-motion-page .child-proof-dots{grid-column:1;grid-row:4}
 .child-proof-next-label{display:inline;white-space:nowrap}
 .astra-motion-page [data-child-proof-next]{width:auto;min-height:48px;display:flex;justify-content:center;gap:8px;padding:10px 12px;border-radius:999px;background:#176d54;border-color:#176d54;color:#fff;font-size:16px;font-weight:800;box-shadow:0 3px 0 #0d4c3c}
 .astra-motion-page [data-child-proof-next] .ui-icon{filter:brightness(0) invert(1)}
 .astra-motion-page [data-child-proof-next]:hover{background:#10583f}
 .coloring-art.is-comparison{position:relative;top:auto;width:100%;max-width:430px;margin:12px auto 0}
 .story-journey{margin-top:20px}
}
@media(max-width:480px){
 .coloring-art.is-comparison{width:calc(100% - 16px)}
 .story-journey button:not(:last-child){margin-right:12px}.story-journey button:not(:last-child)::after{width:12px}
}
@media(prefers-reduced-motion:reduce){
 .hero-ambient-layers{display:none}
 .story-journey button,.astra-motion-page .moment-card,.astra-motion-page .faq-item{transition:none}
}