/* Camera movement uses individual transforms, composing with the existing artwork. */
.cinema-on .hero-poster__line { translate:calc(var(--hero-drift,0px) * -1) 0; }
.cinema-on .hero-poster__line--outline { translate:var(--hero-drift,0px) 0; }
.cinema-on .hero-poster__photo { scale:var(--hero-zoom,1);translate:0 var(--hero-rise,0px);rotate:var(--hero-turn,0deg);border-radius:var(--hero-open,48%) var(--hero-open,48%) 16px 16px; }
.cinema-on .hero-poster__stamp { rotate:var(--scroll-lean,0deg); }
.cinema-on .cinema-title { translate:var(--cinema-shift,0px) 0;rotate:var(--cinema-turn,0deg);transform-origin:50% 60%; }
.cinema-on .cinema-frame { scale:var(--cinema-scale,1);rotate:var(--cinema-turn,0deg);border-radius:40px; }
.cinema-on .journey-chapter>img { scale:var(--scene-scale,1);rotate:var(--scene-rotate,0deg);translate:var(--scene-offset,0px) var(--scene-lift,0px); }
.cinema-on .journey-chapter__copy { translate:calc(var(--scene-offset,0px) * -.65) 0; }
.cinema-on .cinema-character { rotate:var(--scroll-lean,0deg); }
.cinema-on .cinema-character>img { transform:perspective(500px) rotateX(var(--look-x,0deg)) rotateY(var(--look-y,0deg));transition:transform .18s ease-out; }
.cinema-on .family-sticker>img { animation:character-breathe 3.6s ease-in-out infinite;transform-origin:50% 85%; }
.cinema-on .hero-poster__doodle--grill>img { animation:character-breathe 2.8s ease-in-out infinite;transform-origin:50% 85%; }
.cinema-on .hero-poster__doodle--ssam>img { animation:character-breathe 3.3s ease-in-out -.9s infinite;transform-origin:50% 85%; }
@keyframes character-breathe { 0%,100%{scale:1;translate:0 0;rotate:-3deg} 45%{scale:1.035 .975;translate:0 -9px;rotate:3deg} 65%{scale:.985 1.025} }
.cinema-on .cinema-character:not(.cinema-visible)>img { animation-play-state:paused; }
@media(prefers-reduced-motion:reduce) { .cinema-character>img{animation:none!important;} }

/* A scene has a rhythm: type lands, artwork floats, drawn marks answer it. */
.cinema-word { display:inline-block; }
.cinema-on .cinema-word {
  transform:translateY(calc(var(--word-entry,0) * (-18px - var(--word-i,0) * 4px)))
    rotate(calc(var(--word-entry,0) * -13deg)) scale(calc(1 - var(--word-entry,0) * .18));
  transform-origin:0 100%;
}
.journey-chapter { position:relative; isolation:isolate; }
.journey-chapter__copy,.journey-chapter>img { position:relative;z-index:1; }
.cinema-marks { display:none;position:absolute;inset:0;pointer-events:none;overflow:clip;z-index:0;color:var(--brown); }
.cinema-on .cinema-marks { display:block; }
.cinema-star { position:absolute;top:8%;right:5%;font:100px/1 Georgia,serif;color:var(--orange);-webkit-text-stroke:2px var(--brown);animation:cinema-spin 16s linear infinite; }
.cinema-star--little { top:auto;right:auto;bottom:12%;left:43%;font-size:65px;color:var(--paper);animation:cinema-spark 3s ease-in-out infinite; }
.cinema-marks svg { position:absolute;left:3%;bottom:6%;width:145px;height:90px;rotate:-12deg; }
.cinema-marks path { stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:330;animation:cinema-draw 4s ease-in-out infinite; }
.journey-chapter .cinema-marks svg { left:auto;right:3%;bottom:3%; }
.hero-poster>.cinema-marks { z-index:0; }
.hero-poster>.cinema-marks .cinema-star { top:37%;right:22%;font-size:64px; }
.hero-poster>.cinema-marks svg { left:auto;right:0;bottom:5%;rotate:-35deg; }
.cinema-on .hero-poster__heart { animation:cinema-heart 2.5s ease-in-out infinite;transform-origin:25% 50%; }
.cinema-on .hero-poster__stamp { animation:cinema-stamp 5s ease-in-out infinite; }
.cinema-on .journey-chapter.cinema-centred>img { animation:cinema-afloat 4.5s ease-in-out infinite; }
.cinema-on .cinema-character.cinema-boing { animation:cinema-boing .8s cubic-bezier(.2,.7,.2,1) both; }
.cinema-hello { display:none;position:absolute;right:8%;top:8%;z-index:2;padding:14px 22px;background:var(--paper);border:2px solid var(--brown);border-radius:50% 45% 45% 8%;box-shadow:3px 4px 0 var(--brown);font:italic 22px/1.15 Georgia,serif;rotate:8deg;pointer-events:none; }
.cinema-on .cinema-centred .cinema-hello { display:block;animation:cinema-hello 4.5s ease-in-out infinite; }
.cinema-on .hero-poster__line { animation:cinema-title-in 1s cubic-bezier(.16,1,.3,1) both; }
.cinema-on .hero-poster__line--outline { animation-delay:.13s; }
.cinema-on .hero-poster__doodle--grill>img { animation:character-breathe 2.8s ease-in-out infinite; }
.cinema-on .hero-poster__doodle--ssam>img { animation:character-breathe 3.3s ease-in-out -.9s infinite; }
@keyframes cinema-title-in { from{transform:translateY(65px) rotate(-6deg) scale(.85)} to{transform:translateY(0) rotate(0) scale(1)} }
@keyframes cinema-spin { to{transform:rotate(360deg)} }
@keyframes cinema-spark { 0%,100%{transform:scale(.7) rotate(-15deg)}50%{transform:scale(1.2) rotate(30deg)} }
@keyframes cinema-draw { 0%,10%{stroke-dashoffset:330}50%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-330} }
@keyframes cinema-heart { 0%,65%,100%{scale:1}15%{scale:1.25}30%{scale:.9}45%{scale:1.12} }
@keyframes cinema-stamp { 0%,100%{rotate:-5deg}50%{rotate:9deg} }
@keyframes cinema-afloat { 0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-18px) rotate(2deg)} }
@keyframes cinema-boing { 0%,100%{scale:1}25%{scale:1.2 .82}50%{scale:.88 1.16}75%{scale:1.06 .96} }
@keyframes cinema-hello { 0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(4deg)} }
.cinema-on :not(.cinema-in-view)>.cinema-marks * { animation-play-state:paused; }
.cinema-on .hero-poster:not(.cinema-in-view) .hero-poster__heart,
.cinema-on .hero-poster:not(.cinema-in-view) .hero-poster__stamp { animation-play-state:paused; }
.cinema-on .journey-chapter:not(.cinema-in-view)>img,
.cinema-on .journey-chapter:not(.cinema-in-view) .cinema-hello { animation-play-state:paused; }
body.cinema-sleep .cinema-marks *,body.cinema-sleep .cinema-character,
body.cinema-sleep .cinema-character>img,body.cinema-sleep .journey-chapter>img,
body.cinema-sleep .cinema-hello,body.cinema-sleep .hero-poster__heart,
body.cinema-sleep .hero-poster__stamp { animation-play-state:paused!important; }
@media(max-width:760px) {
 .cinema-on .cinema-title { translate:0 0;rotate:0deg; }
 .cinema-on .cinema-title .cinema-word { transform:translateY(calc(var(--word-entry,0) * -20px)) scale(calc(1 - var(--word-entry,0) * .12)); }
 .cinema-on .hero-poster { overflow:clip; }
 .cinema-on .hero-poster__photo { scale:min(var(--hero-zoom,1),1.12); }
 .cinema-star{font-size:55px;top:4%;right:3%}.cinema-star--little{font-size:36px;top:auto;bottom:3%;left:5%}
 .cinema-marks svg{width:75px;left:auto;right:3%;bottom:3%}
 .cinema-hello{font-size:14px;top:auto;bottom:16px;right:8%;padding:9px 14px}
 .hero-poster>.cinema-marks .cinema-star{font-size:38px;top:28%;right:4%}
}
@media(prefers-reduced-motion:reduce) {
 .cinema-marks,.cinema-hello{display:none!important}
 .cinema-word{transform:none!important}
}