/* ==========================================================================
   Christmas story: one 28s loop. See inc/story-art.php for the storyboard.
   Percentages below are positions in that loop.
   ========================================================================== */

.story{
	--T:28s;
	position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
	display:none;
}
.story svg{display:block;width:100%;height:100%;overflow:visible}
.story text{font:600 17px/1 var(--font-body)}

/* Phones & tablets: scene lives inside the home page hero. */
.story--tall{position:absolute;display:block}
/* Desktop: scene sits fixed behind the page; characters stand in the empty side areas. */
@media (min-width:900px){
	.story--wide{display:block}
	.story--tall{display:none}
}

/* Everything that rotates/scales does so around its own box. */
.st-bob,.st-sarm,.st-earm,.st-hat,.st-bub,.st-chute,.st-pop,.st-ring,.st-leg,.st-puff,.st-santa-arm,.st-nose,.st-starglow,.st-shoot{transform-box:fill-box}

/* ---- Sleigh flight ---------------------------------------------------- */
.st-fly{opacity:0;animation:st-fly var(--T) linear infinite}
.st-bob{transform-origin:50% 50%;animation:st-bob var(--T) ease-in-out infinite}
@keyframes st-fly{
	0%,5%{transform:translateX(var(--sx0));opacity:0}
	6.5%{opacity:1}
	36.5%{opacity:1}
	38%,100%{transform:translateX(var(--sx1));opacity:0}
}
@keyframes st-bob{
	0%,5%{transform:translateY(26px) rotate(-3deg)}
	16.9%{transform:translateY(0) rotate(0deg)}
	29.4%{transform:translateY(0) rotate(1.5deg)}
	38%,100%{transform:translateY(26px) rotate(3deg)}
}

/* Reindeer legs gallop, Rudolph's nose pulses, Santa waves, magic dust twinkles */
.st-leg{transform-origin:50% 0%;animation:st-gallop .42s ease-in-out infinite alternate}
.st-leg--b{animation-direction:alternate-reverse}
@keyframes st-gallop{from{transform:rotate(-26deg)}to{transform:rotate(26deg)}}
.st-nose{transform-origin:50% 50%;animation:st-nose 1.1s ease-in-out infinite alternate}
@keyframes st-nose{from{opacity:.25;transform:scale(.8)}to{opacity:.8;transform:scale(1.15)}}
.st-santa-arm{transform-origin:0% 100%;animation:st-santa-arm .7s ease-in-out infinite alternate}
@keyframes st-santa-arm{from{transform:rotate(-8deg)}to{transform:rotate(18deg)}}
.st-trail circle{animation:st-tw 1s ease-in-out infinite alternate}
.st-trail circle:nth-child(2n){animation-delay:-.4s}
.st-trail circle:nth-child(3n){animation-delay:-.7s}

/* ---- Gifts parachuting down (gift 1: elf's house, gift 2: snowman) ----- */
.st-g,.st-ring{opacity:0}
.st-g1{animation:st-g1 var(--T) linear infinite}
.st-g2{animation:st-g2 var(--T) linear infinite}
@keyframes st-g1{
	0%,16.8%{opacity:0;transform:translateY(0)}
	16.9%{opacity:1;transform:translateY(0)}
	22.4%{opacity:1;transform:translateY(var(--fall))}
	91%{opacity:1;transform:translateY(var(--fall))}
	95%{opacity:0;transform:translateY(var(--fall))}
	95.1%,100%{opacity:0;transform:translateY(0)}
}
@keyframes st-g2{
	0%,29.3%{opacity:0;transform:translateY(0)}
	29.4%{opacity:1;transform:translateY(0)}
	34.9%{opacity:1;transform:translateY(var(--fall))}
	91%{opacity:1;transform:translateY(var(--fall))}
	95%{opacity:0;transform:translateY(var(--fall))}
	95.1%,100%{opacity:0;transform:translateY(0)}
}
/* parachute opens, sways, then collapses on landing */
.st-chute{transform-origin:50% 100%}
.st-chute1{animation:st-chute1 var(--T) ease-in-out infinite}
.st-chute2{animation:st-chute2 var(--T) ease-in-out infinite}
@keyframes st-chute1{
	0%,16.8%{opacity:0;transform:scaleY(.1) rotate(0)}
	16.9%{opacity:1;transform:scaleY(.1) rotate(0)}
	18.2%{transform:scaleY(1) rotate(-5deg)}
	19.6%{transform:scaleY(1) rotate(5deg)}
	21%{transform:scaleY(1) rotate(-4deg)}
	22.3%{opacity:1;transform:scaleY(1) rotate(0)}
	23%,100%{opacity:0;transform:scaleY(.25) rotate(0)}
}
@keyframes st-chute2{
	0%,29.3%{opacity:0;transform:scaleY(.1) rotate(0)}
	29.4%{opacity:1;transform:scaleY(.1) rotate(0)}
	30.7%{transform:scaleY(1) rotate(5deg)}
	32.1%{transform:scaleY(1) rotate(-5deg)}
	33.5%{transform:scaleY(1) rotate(4deg)}
	34.8%{opacity:1;transform:scaleY(1) rotate(0)}
	35.5%,100%{opacity:0;transform:scaleY(.25) rotate(0)}
}
/* squash and stretch on landing */
.st-pop{transform-origin:50% 100%}
.st-pop1{animation:st-pop1 var(--T) ease-out infinite}
.st-pop2{animation:st-pop2 var(--T) ease-out infinite}
@keyframes st-pop1{0%,22.3%{transform:scale(1,1)}22.8%{transform:scale(1.18,.8)}23.6%{transform:scale(.94,1.12)}24.5%,100%{transform:scale(1,1)}}
@keyframes st-pop2{0%,34.8%{transform:scale(1,1)}35.3%{transform:scale(1.18,.8)}36.1%{transform:scale(.94,1.12)}37%,100%{transform:scale(1,1)}}
/* sparkle ring where the gift lands */
.st-ring{transform-origin:50% 50%}
.st-ring1{animation:st-ring1 var(--T) ease-out infinite}
.st-ring2{animation:st-ring2 var(--T) ease-out infinite}
@keyframes st-ring1{0%,22.3%{opacity:0;transform:scale(.2)}22.5%{opacity:.9;transform:scale(.4)}25.5%,100%{opacity:0;transform:scale(3.2)}}
@keyframes st-ring2{0%,34.8%{opacity:0;transform:scale(.2)}35%{opacity:.9;transform:scale(.4)}38%,100%{opacity:0;transform:scale(3.2)}}

/* ---- Characters react ------------------------------------------------- */
.st-hop{animation:st-hop var(--T) ease-out infinite}
@keyframes st-hop{
	0%,22.4%{transform:translateY(0)}
	23.2%{transform:translateY(-18px)}24%{transform:translateY(0)}
	24.8%{transform:translateY(-18px)}25.6%{transform:translateY(0)}
	55.6%{transform:translateY(0)}56.4%{transform:translateY(-14px)}57.2%,100%{transform:translateY(0)}
}
.st-earm{transform-origin:0% 100%;animation:st-earm var(--T) ease-in-out infinite}
@keyframes st-earm{
	0%,22.9%{transform:rotate(0)}
	23.8%{transform:rotate(-35deg)}25%{transform:rotate(-5deg)}26.2%{transform:rotate(-35deg)}27.4%{transform:rotate(-5deg)}28.6%{transform:rotate(-35deg)}30%,55.6%{transform:rotate(0)}
	57%{transform:rotate(-35deg)}58.4%{transform:rotate(-5deg)}59.8%{transform:rotate(-35deg)}61.2%{transform:rotate(-5deg)}62.6%{transform:rotate(-35deg)}64%{transform:rotate(-5deg)}65.4%{transform:rotate(-35deg)}67%,100%{transform:rotate(0)}
}
.st-hat{transform-origin:50% 100%;animation:st-hat var(--T) ease-in-out infinite}
@keyframes st-hat{0%,35.5%{transform:translateY(0) rotate(0)}37%{transform:translateY(-12px) rotate(-14deg)}39%,100%{transform:translateY(0) rotate(0)}}
.st-sarm{transform-origin:0% 100%;animation:st-sarm var(--T) ease-in-out infinite}
@keyframes st-sarm{
	0%,35.4%{transform:rotate(0)}
	36.2%{transform:rotate(-28deg)}37.6%{transform:rotate(-4deg)}39%{transform:rotate(-28deg)}40.4%{transform:rotate(-4deg)}
	41.8%{transform:rotate(-28deg)}43.2%{transform:rotate(-4deg)}44.6%{transform:rotate(-28deg)}46.5%,100%{transform:rotate(0)}
}

/* ---- Speech bubbles ---------------------------------------------------- */
.st-bub{opacity:0;transform-origin:50% 100%}
.st-bub--santa{animation:st-b-santa var(--T) ease-out infinite}
.st-bub--elf1{animation:st-b-elf1 var(--T) ease-out infinite}
.st-bub--snow{animation:st-b-snow var(--T) ease-out infinite}
.st-bub--elf2{animation:st-b-elf2 var(--T) ease-out infinite}
@keyframes st-b-santa{0%,12%{opacity:0;transform:scale(.6)}13%,20%{opacity:1;transform:scale(1)}21%,100%{opacity:0;transform:scale(.8)}}
@keyframes st-b-elf1{0%,23%{opacity:0;transform:scale(.6)}24%,32.5%{opacity:1;transform:scale(1)}33.5%,100%{opacity:0;transform:scale(.8)}}
@keyframes st-b-snow{0%,36%{opacity:0;transform:scale(.6)}37%,47%{opacity:1;transform:scale(1)}48%,100%{opacity:0;transform:scale(.8)}}
@keyframes st-b-elf2{0%,54.5%{opacity:0;transform:scale(.6)}55.5%,71%{opacity:1;transform:scale(1)}72%,100%{opacity:0;transform:scale(.8)}}

/* ---- Ambient: window, lights, smoke, stars, snow ----------------------- */
.st-win{opacity:0;animation:st-win var(--T) ease-in-out infinite}
@keyframes st-win{0%,22.5%{opacity:0}25%,92%{opacity:1}96%,100%{opacity:0}}
.st-tw{animation:st-tw 2.4s ease-in-out infinite alternate}
@keyframes st-tw{from{opacity:.3}to{opacity:1}}
.st-starglow{transform-origin:50% 50%;animation:st-nose 2.2s ease-in-out infinite alternate}
.st-puff{opacity:0;transform-origin:50% 50%;animation:st-puff 5.1s ease-out infinite}
@keyframes st-puff{0%{opacity:0;transform:translate(0,0) scale(.4)}15%{opacity:.7}100%{opacity:0;transform:translate(22px,-100px) scale(1.8)}}
.st-shoot{opacity:0;animation:st-shoot var(--T) ease-in infinite}
@keyframes st-shoot{0%,60%{opacity:0;transform:translate(0,0)}60.5%{opacity:1}65%{opacity:0;transform:translate(420px,200px)}100%{opacity:0;transform:translate(0,0)}}
.st-flake{fill:#fff;opacity:0;animation:st-fall linear infinite}
@keyframes st-fall{
	0%{opacity:0;transform:translate(0,0)}
	8%{opacity:.85}
	92%{opacity:.85}
	100%{opacity:0;transform:translate(var(--dx),var(--fy))}
}

/* ---- Home hero: make room for the scene on phones ---------------------- */
.hero>h1,.hero>.orn,.hero>p{position:relative;z-index:1}

/* ---- Reduced motion: a calm still frame (gifts delivered, lights on) --- */
@media (prefers-reduced-motion:reduce){
	.story *{animation:none!important}
	.st-fly,.st-flake,.st-shoot,.st-chute,.st-ring,.st-bub{display:none}
	.st-g{opacity:1;transform:translateY(var(--fall))}
	.st-win{opacity:1}
	.st-bub--elf2{display:inline;opacity:1}
}
@media print{.story{display:none!important}}