/* Mascots stay inside the actual title photograph, at its lower-right edge. */
[data-hippie-story] .gallery-frame[data-gallery-panel="1"],
[data-hippie-story] .ticket-photo-open{position:relative;isolation:isolate}
.title-hippie-photo{position:relative;isolation:isolate;line-height:0}
.title-hippie-photo>img{display:block;width:100%;height:auto}
.title-hippie{position:absolute;inset:auto 0 0 auto;display:block;width:clamp(108px,28%,195px);height:auto;aspect-ratio:1;z-index:3;pointer-events:none;transform-origin:60% 100%;filter:drop-shadow(0 2px 2px #123b5820)}
.title-hippie>img{position:static!important;display:block!important;width:100%!important;height:100%!important;max-width:100%!important;object-fit:contain!important;object-position:right bottom!important;aspect-ratio:1!important;border:0!important;border-radius:0!important;background:transparent!important;margin:0!important;padding:0!important;transform:none!important}
.hippie-photo-frame{position:relative;isolation:isolate;display:block;line-height:0;overflow:hidden}
.ticket:is([data-hippie-story],.magic-scene) .ticket-photo-hint{position:static!important;display:block;inset:auto!important;margin:0;padding:9px 12px;border:0;border-radius:0;background:#fffdf2;color:#06344d;font-size:11px;line-height:1.4;text-align:left;white-space:normal}
.ticket:is([data-hippie-story],.magic-scene) .ticketno{position:static!important;display:block;inset:auto!important;margin:6px 10px;padding:5px 9px;width:fit-content}
.magic-scene:not([data-travel-direction="left-to-right"]):not(.football-scene) .magic-rider,.magic-scene.magic-catalog-card:not([data-travel-direction="left-to-right"]):not(.football-scene) .magic-rider{left:auto!important;right:0!important;bottom:0!important;z-index:3}
.magic-scene.football-scene .magic-rider{left:0!important;right:auto!important;bottom:0!important;scale:1}
.title-hippie-saphir,.title-hippie-pilot{width:clamp(132px,34%,235px);aspect-ratio:1.5}
.title-hippie-saphir>img,.title-hippie-pilot>img{aspect-ratio:1.5!important}
.ticket .title-hippie{width:clamp(88px,32%,140px)}
.ticket .title-hippie-saphir,.ticket .title-hippie-pilot{width:clamp(110px,40%,170px)}
.title-hippie-controls{margin:12px 0;padding:10px 12px;border:1px solid #b3d8e5;border-radius:14px;background:#f1faff;color:#075474;font:600 12px/1.5 system-ui}
.ticket>.title-hippie-controls{margin:0 12px 14px}
.title-hippie-controls>div{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px}
.title-hippie-controls button{font:700 12px/1.4 system-ui;border:1px solid #84b4c6;border-radius:10px;padding:8px 10px;min-height:44px;background:#fff;color:#075474;cursor:pointer}
.title-hippie-controls button:focus-visible{outline:3px solid #d85d17;outline-offset:3px}
.title-hippie-controls p{font:400 11px/1.4 system-ui!important;margin:7px 0 0!important}
.is-title-hidden .title-hippie{display:none}
.is-title-playing .title-hippie{animation:title-hippie-hop 3.2s ease-in-out 1 both}
.is-title-playing .title-hippie-saphir{animation-name:title-hippie-duel}
.is-title-playing .title-hippie-pilot{animation-name:title-hippie-flight}
.is-title-playing .title-hippie-splash{animation-name:title-hippie-splash}
@keyframes title-hippie-hop{0%,100%{translate:0 0;rotate:0deg}20%,60%{translate:0 -9px;rotate:-3deg}40%,80%{translate:0 0;rotate:3deg}}
@keyframes title-hippie-duel{0%,100%{translate:0 0;rotate:0deg}20%,65%{translate:-3px 0;rotate:4deg}40%,80%{translate:0 0;rotate:-4deg}}
@keyframes title-hippie-flight{0%,100%{translate:0 0;rotate:0deg}35%{translate:-8px -12px;rotate:-6deg}70%{translate:-3px -6px;rotate:3deg}}
@keyframes title-hippie-splash{0%,100%{translate:0 0;scale:1}22%{translate:0 -19px;scale:.96 1.04}42%{translate:0 0;scale:1.07 .93}58%{translate:0 -4px;scale:.98 1.02}76%{translate:0 0;scale:1}}
/* Tatütata is the agreed exception: bottom-right, mirrored toward the centre. */
.firefighter-scene .magic-rider,.firefighter-scene.magic-catalog-card .magic-rider{left:auto!important;right:0!important;bottom:0!important;scale:-1 1;z-index:3}
.magic-scene.firefighter-scene .firefighter-foam{left:auto;right:calc(var(--rider-size)*.72);bottom:calc(var(--rider-size)*.42);scale:1;transform-origin:100% 100%}
.magic-scene.firefighter-scene.is-magic-playing .firefighter-foam{animation:hippie-foam-left 6.4s ease-out 1 both}
@keyframes hippie-foam-left{0%,10%{opacity:0;transform:scale(.05,.3) rotate(8deg)}20%{opacity:1;transform:scale(.5,.8) rotate(8deg)}35%,55%{opacity:1;transform:scale(1) rotate(8deg)}70%{opacity:.7;transform:translateY(10px) scale(1,.8)}85%,100%{opacity:0;transform:translateY(25px) scale(1,.6)}}
.magic-scene[data-travel-direction="left-to-right"] .magic-rider{left:calc(100% - var(--rider-size));right:auto;bottom:0;z-index:3}
.magic-scene[data-travel-direction="left-to-right"].is-magic-playing .magic-rider{animation:hippie-travel-right 6.4s linear 1 both}
.magic-scene.oceanroll-scene[data-travel-direction="left-to-right"] .magic-rider{bottom:11%;translate:0 0}
.magic-scene.oceanroll-scene[data-ocean-studio][data-travel-direction="left-to-right"] .magic-rider{bottom:17%}
.magic-scene.oceanroll-scene[data-travel-direction="left-to-right"] .magic-riding-sheet{animation-duration:6.4s}
@keyframes hippie-travel-right{0%,8%{left:4%;translate:0 0}92%,100%{left:calc(100% - var(--rider-size));translate:0 0}}
.is-title-playing .title-hippie-pirate{animation-name:title-boat-bob}
@keyframes title-boat-bob{0%,100%{translate:0 0;rotate:0deg}25%{translate:0 -3px;rotate:-3deg}65%{translate:0 1px;rotate:3deg}}
.title-hippie-mushroom{overflow:hidden}
.title-hippie-mushroom>img{position:absolute!important;top:0;left:0;width:400%!important;height:200%!important;max-width:none!important;max-height:none!important;object-fit:fill!important;aspect-ratio:auto!important;translate:0 0}
.is-title-playing .title-hippie-mushroom{animation:title-mushroom-still 6.4s linear 1 both}
.is-title-playing .title-hippie-mushroom>img{animation:title-mushroom-frames 1.6s steps(1,end) 4 both}
.title-hippie-snowman{overflow:hidden;width:clamp(130px,34%,225px)}
.title-hippie-snowman>img{position:absolute!important;top:0;left:0;width:400%!important;height:200%!important;max-width:none!important;max-height:none!important;object-fit:fill!important;aspect-ratio:auto!important;translate:-75% -50%}
.is-title-playing .title-hippie-snowman{animation:title-mushroom-still 6.4s linear 1 both}
.is-title-playing .title-hippie-snowman>img{animation:title-mushroom-frames 6.4s steps(1,end) 1 both}
.is-title-playing .title-hippie-carriage{animation-name:title-boat-bob}
.title-hippie-zebra,.title-hippie-midi{overflow:hidden}
.title-hippie-zebra>img,.title-hippie-midi>img{position:absolute!important;top:0;left:0;width:400%!important;height:200%!important;max-width:none!important;max-height:none!important;object-fit:fill!important;aspect-ratio:auto!important;translate:0 0}
.title-hippie-zebra{inset:auto auto 0 100%;translate:-100% 0}
.is-title-playing .title-hippie-zebra{animation:title-zebra-ride 8s linear 1 both}
.is-title-playing .title-hippie-zebra>img{animation:title-mushroom-frames 1s steps(1,end) 8 both}
.is-title-playing .title-hippie-midi{animation:title-mushroom-still 6.4s linear 1 both}
.is-title-playing .title-hippie-midi>img{animation:title-mushroom-frames 1.6s steps(1,end) 4 both}
@keyframes title-zebra-ride{0%{left:0;translate:0 0}100%{left:100%;translate:-100% 0}}
@keyframes title-mushroom-still{0%,100%{translate:0 0}}
@keyframes title-mushroom-frames{0%{translate:0 0}12.5%{translate:-25% 0}25%{translate:-50% 0}37.5%{translate:-75% 0}50%{translate:0 -50%}62.5%{translate:-25% -50%}75%{translate:-50% -50%}87.5%,100%{translate:-75% -50%}}
@media(prefers-reduced-motion:reduce){.is-title-playing .title-hippie-mushroom>img,.is-title-playing .title-hippie-snowman>img,.is-title-playing .title-hippie-zebra>img,.is-title-playing .title-hippie-midi>img{animation:none!important}}
@media(max-width:600px){.title-hippie{width:clamp(100px,30%,145px)}.title-hippie-saphir,.title-hippie-pilot{width:clamp(122px,38%,180px)}}
@media(prefers-reduced-motion:reduce){.is-title-playing .title-hippie{animation:none!important}}

/* Cinderella: Hippie leads the pink pony rightward, and rests at the right photo edge. */
.title-hippie-pony{overflow:hidden;inset:auto auto 0 100%;translate:-100% 0;width:clamp(150px,42%,270px)}
.ticket .title-hippie-pony{width:clamp(130px,42%,190px)}
.title-hippie-pony>img{position:absolute!important;top:0;left:0;width:400%!important;height:200%!important;max-width:none!important;max-height:none!important;object-fit:fill!important;aspect-ratio:auto!important;translate:0 0}
.is-title-playing .title-hippie-pony{animation:title-zebra-ride 8s linear 1 both}
.is-title-playing .title-hippie-pony>img{animation:title-mushroom-frames 1s steps(1,end) 8 both}
@media(prefers-reduced-motion:reduce){.is-title-playing .title-hippie-pony,.is-title-playing .title-hippie-pony>img{animation:none!important}}

/* The mascot itself replaces the former scene control panel. */
.title-hippie{pointer-events:auto;cursor:pointer;touch-action:manipulation}
.title-hippie:focus-visible{outline:3px solid #075474;outline-offset:4px;border-radius:14px}

.title-hippie-titanicboat{transform-origin:50% 86%}
.is-title-playing .title-hippie-titanicboat{animation:titanic-boat-rock 8s ease-in-out 1 both}
@keyframes titanic-boat-rock{0%,100%{rotate:0deg;translate:0 0}12%,38%,62%,88%{rotate:-6deg;translate:-3px -2px}25%,50%,75%{rotate:6deg;translate:3px 1px}}

/* Fantasy: rainbow and galloping rider remain inside the title photograph. */
.title-hippie-fantasyrainbow{width:clamp(145px,45%,270px);aspect-ratio:4/3;overflow:visible}
.ticket .title-hippie-fantasyrainbow{width:clamp(120px,45%,190px)}
.fantasy-rainbow{position:absolute;left:0;bottom:0;width:100%;height:62%;overflow:visible;pointer-events:none}
.fantasy-rainbow path{fill:none;stroke-width:9;stroke-linecap:round}.fantasy-rainbow path:nth-child(1){stroke:#ff658c}.fantasy-rainbow path:nth-child(2){stroke:#ffad46}.fantasy-rainbow path:nth-child(3){stroke:#ffe266}.fantasy-rainbow path:nth-child(4){stroke:#74d981}.fantasy-rainbow path:nth-child(5){stroke:#65c8fa}.fantasy-rainbow path:nth-child(6){stroke:#bd82ef}
.fantasy-rider{display:block;position:absolute;left:45%;bottom:0;width:55%;aspect-ratio:1;overflow:hidden;pointer-events:none}
.title-hippie-fantasyrainbow .fantasy-rider>img,.title-hippie-zwergclimb>img{position:absolute!important;top:0!important;left:0!important;width:400%!important;height:200%!important;max-width:none!important;max-height:none!important;object-fit:fill!important;aspect-ratio:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;translate:0 0;transform:none!important}
.is-title-playing .fantasy-rider{animation:fantasy-rainbow-route 8s ease-in-out 1 both}.is-title-playing .fantasy-rider>img{animation:title-mushroom-frames 1s steps(1,end) 8 both}
@keyframes fantasy-rainbow-route{0%{left:0;bottom:0}25%{left:10%;bottom:24%}50%{left:23%;bottom:38%}75%{left:36%;bottom:24%}100%{left:45%;bottom:0}}
/* Align the climber's hands with the actual yellow braid in photo one. */
.title-hippie-zwergclimb{width:clamp(44px,16%,125px);aspect-ratio:1;overflow:hidden;left:83%!important;right:auto!important;top:43%;bottom:auto!important;translate:-84% 0;transform-origin:84% 25%}
.ticket .title-hippie-zwergclimb{width:clamp(38px,16%,80px)}
.is-title-playing .title-hippie-zwergclimb{animation:zwerg-climb-route 8s ease-in-out 1 both}.is-title-playing .title-hippie-zwergclimb>img{animation:title-mushroom-frames 1s steps(1,end) 8 alternate both}
@keyframes zwerg-climb-route{0%,100%{top:43%}45%,55%{top:35%}}
/* A playful knight-and-dragon duel, anchored at the lower-right edge. */
.title-hippie-knightduel{width:clamp(160px,48%,310px);aspect-ratio:3/2;transform-origin:55% 100%}
.ticket .title-hippie-knightduel{width:clamp(135px,48%,210px)}
.title-hippie-knightduel>img{aspect-ratio:3/2!important;object-fit:contain!important}
.is-title-playing .title-hippie-knightduel{animation:knight-dragon-duel 8s ease-in-out 1 both}
@keyframes knight-dragon-duel{0%,100%{translate:0 0;rotate:0deg}15%,45%,75%{translate:-3px -2px;rotate:-1.5deg}30%,60%,90%{translate:3px 0;rotate:1.5deg}}
@media(prefers-reduced-motion:reduce){.is-title-playing .fantasy-rider,.is-title-playing .fantasy-rider>img,.is-title-playing .title-hippie-zwergclimb,.is-title-playing .title-hippie-zwergclimb>img,.is-title-playing .title-hippie-knightduel{animation:none!important}}

.is-title-playing .title-hippie-fantasyrainbow{animation:none}
.title-hippie-piggyback,.title-hippie-iceskate{width:clamp(90px,26%,180px);aspect-ratio:1}
.ticket .title-hippie-piggyback,.ticket .title-hippie-iceskate{width:clamp(72px,26%,120px)}
.title-hippie-piggyback>img,.title-hippie-iceskate>img{aspect-ratio:1!important;object-fit:contain!important}
.is-title-playing .title-hippie-piggyback{animation:piggyback-effort 6s ease-in-out 1 both}
@keyframes piggyback-effort{0%,100%{transform:translateY(0) rotate(0)}15%,45%,75%{transform:translateY(4px) rotate(-3deg)}30%,60%,90%{transform:translateY(-2px) rotate(3deg)}}
.is-title-playing .title-hippie-iceskate{animation:hippie-ice-route 8s ease-in-out 1 both}
@keyframes hippie-ice-route{0%{right:72%;transform:rotate(-6deg)}25%{right:54%;transform:rotate(3deg)}50%{right:36%;transform:rotate(-4deg)}75%{right:18%;transform:rotate(3deg)}100%{right:2%;transform:rotate(0)}}
@media(prefers-reduced-motion:reduce){.is-title-playing .title-hippie-piggyback,.is-title-playing .title-hippie-iceskate{animation:none!important}}

/* Nine new articles: eight distinct poses, a single short play, then a quiet smile. */
[data-new-hippie] .title-hippie-new8{right:0!important;left:auto!important;bottom:0!important;top:auto!important;overflow:hidden;aspect-ratio:1;width:clamp(68px,24%,160px);max-width:30%;animation:none;translate:0 0}
.ticket[data-new-hippie] .title-hippie-new8{width:clamp(68px,28%,110px);max-width:30%}
.title-hippie-new8>img{position:absolute!important;top:0!important;left:0!important;width:400%!important;height:200%!important;max-width:none!important;max-height:none!important;object-fit:fill!important;aspect-ratio:auto!important;translate:-75% -50%}
.is-title-playing .title-hippie-new8{animation:new-hippie-anchor 6.4s linear 1 both}
.is-title-playing .title-hippie-new8>img{animation:new-hippie-eight-poses 6.4s steps(1,end) 1 both}
@keyframes new-hippie-anchor{0%,100%{translate:0 0}}
@keyframes new-hippie-eight-poses{0%{translate:0 0}12.5%{translate:-25% 0}25%{translate:-50% 0}37.5%{translate:-75% 0}50%{translate:0 -50%}62.5%{translate:-25% -50%}75%{translate:-50% -50%}87.5%,100%{translate:-75% -50%}}
.hippie-countdown{position:absolute;right:3%;top:3%;width:28%;aspect-ratio:1;z-index:4;pointer-events:none}
.hippie-countdown b{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:#ffdf45;color:#075474;font:900 clamp(13px,2vw,24px)/1 system-ui;opacity:0;box-shadow:0 1px 3px #07547430}
.is-title-playing .hippie-countdown b:nth-child(1){animation:hippie-count-three 6.4s steps(1,end) 1 both}
.is-title-playing .hippie-countdown b:nth-child(2){animation:hippie-count-two 6.4s steps(1,end) 1 both}
.is-title-playing .hippie-countdown b:nth-child(3){animation:hippie-count-one 6.4s steps(1,end) 1 both}
@keyframes hippie-count-three{0%,50%,100%{opacity:0}37.5%{opacity:1}}
@keyframes hippie-count-two{0%,62.5%,100%{opacity:0}50%{opacity:1}}
@keyframes hippie-count-one{0%,75%,100%{opacity:0}62.5%{opacity:1}}
@media(prefers-reduced-motion:reduce){.is-title-playing .title-hippie-new8,.is-title-playing .title-hippie-new8>img,.is-title-playing .hippie-countdown b{animation:none!important}.title-hippie-new8>img{translate:-75% -50%!important}.hippie-countdown{display:none}}
/* WebKit needs a reserved mobile photo window before lazy images decode. */
@media(max-width:760px){
 #full-cards .ticket[data-new-hippie] .hippie-photo-frame{height:auto!important;aspect-ratio:4/3}
 #full-cards .ticket[data-new-hippie][data-photo-format=wide] .hippie-photo-frame{aspect-ratio:16/9}
 #full-cards .ticket[data-new-hippie][data-photo-format=portrait] .hippie-photo-frame{aspect-ratio:3/4}
 #full-cards .ticket[data-new-hippie] .hippie-photo-frame>img{display:block;width:100%!important;height:auto!important;aspect-ratio:inherit!important;object-fit:contain!important}
}