/* Original PicPack cutouts on a sunlit sticker playground. */
.film-hero {
  color: #243a48;
  background:
    radial-gradient(ellipse at 2% 10%, #fff4ae 0, transparent 44%),
    radial-gradient(ellipse at 97% 23%, #ffdceb 0, transparent 43%),
    radial-gradient(ellipse at 76% 90%, #d6ecff 0, transparent 45%),
    linear-gradient(115deg, #fffbed 8%, #edfaff 53%, #fff2f2 100%);
}
.film-hero:before { z-index: 0; opacity: .26; background: radial-gradient(#779cad 0.65px, transparent .8px); background-size: 22px 22px; }
.film-hero-grid { position: relative; z-index: 2; pointer-events: none; }
.film-hero-grid > * { pointer-events: auto; }
.film-copy .eyebrow { color: #586b75; }
.film-copy .dot { background: #e87992; }
.film-copy h1 > span { color: #2085ab; }
.film-description, .film-mobile-description { color: #536975; }
.film-description strong { color: #243a48; font-weight: 600; }
.film-actions .button { background: #244754; color: #fff; box-shadow: 0 6px 20px #587f821b; }
.film-actions .button:hover { background: #326575; }
.film-actions .text-link { color: #455f6c; border-color: #819aa4; }
.film-context { color: #667b86; }
.film-label, .film-label > span:last-child { color: #526e7d; }
.portrait-screen { box-shadow: 0 22px 55px #477c9133, 0 0 0 5px #ffffffd9; }
.film-controls button, .film-controls .film-expand { color: #2a4e60; }
.film-controls button:hover { background: #ffffff85; }
.film-control-panel progress, .film-control-panel progress::-webkit-progress-bar { background: #bdd6df; }
.film-control-panel progress::-webkit-progress-value { background: #348bad; }
.film-control-panel progress::-moz-progress-bar { background: #348bad; }
.film-meta { color: #536e7c; }
.output-eyebrow { color: #5d7783; }
.output-pack { box-shadow: 0 12px 30px #3d647a24; }
.film-output > p { color: #324e5c; }
.film-output > p span { color: #5e7781; }
.film-hero :focus-visible { outline-color: #176d9e; }
.hero-bottom { position: relative; z-index: 3; display: flex; align-items: center; gap: 20px; border-top: 1px solid #739bb52b; padding-inline: 56px; background: #ffffff52; }
.hero-bottom .film-scroll { flex: 1; border: 0; padding: 16px 0; color: #536e7d; }
.sticker-motion-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; min-height: 40px; background: #ffffff80; border: 1px solid #aac5ce66; border-radius: 30px; font-size: 9px; color: #486270; white-space: nowrap; }
.sticker-motion-toggle:hover { background: #fff; }
.sticker-motion-toggle > span:first-child { font: 12px/1 Arial, sans-serif; }
.sticker-motion-toggle:disabled { opacity: .7; }
/* A dedicated lane keeps the two hero cutouts between the copy and film. */
.film-hero-grid { grid-template-columns: minmax(280px, 1.05fr) minmax(130px, .5fr) minmax(230px, .9fr) minmax(180px, .72fr); gap: 30px; }
.hero-featured-pair { position: relative; width: 100%; height: 380px; pointer-events: none; }
.hero-sticker-field { position: absolute; inset: 0 0 51px; width: min(1280px, calc(100% - 96px)); margin-inline: auto; z-index: 1; pointer-events: none; }
.floating-sticker { position: absolute; left: var(--x); top: var(--y); width: var(--size); transform: translate(-50%, -50%) rotate(var(--turn, 0deg)); }
.sticker-reveal, .sticker-scroll, .sticker-drift, .sticker-react { display: block; width: 100%; }
.sticker-scroll { opacity: calc(1 - var(--sticker-exit, 0)); transform: translate3d(calc(var(--scroll-progress, 0) * var(--scroll-x, 0px)), calc(var(--scroll-progress, 0) * var(--scroll-y, 65px) - var(--sticker-exit, 0) * 24px), 0) rotate(calc(var(--scroll-progress, 0) * var(--scroll-turn, 12deg))) scale(calc(1 + var(--scroll-progress, 0) * var(--scroll-scale, .04) - var(--sticker-exit, 0) * .12)); }
.sticker-drift { animation: sticker-drift var(--period) ease-in-out var(--delay) infinite; }
.sticker-react { filter: drop-shadow(0 3px 1px #45617614) drop-shadow(0 7px 8px #45617612); }
.floating-sticker svg { display: block; width: 100%; height: auto; overflow: visible; }
.sticker-photo-point { --x: 44%; --y: 25%; --size: min(100%, 178px); --turn: -9deg; --scroll-y: 80px; --scroll-turn: 13deg; --scroll-scale: .06; }
.sticker-character-point { --x: 55%; --y: 75%; --size: min(108%, 192px); --turn: 8deg; --scroll-y: 115px; --scroll-turn: -16deg; --scroll-scale: .04; }
.sticker-bolt { --x: 10%; --y: 9%; --size: 45px; --turn: -17deg; --scroll-y: -40px; --scroll-turn: -18deg; }
.sticker-flower { --x: 28%; --y: 10%; --size: 47px; --turn: 16deg; --scroll-y: 80px; }
.sticker-star-key { --x: 35%; --y: 88%; --size: 43px; --turn: -15deg; --scroll-y: -50px; --scroll-turn: 22deg; }
.sticker-cherries { --x: 19%; --y: 87%; --size: 46px; --turn: 16deg; --scroll-y: -35px; --scroll-turn: -20deg; }
.sticker-camera { --x: 44%; --y: 10%; --size: 68px; --turn: -14deg; --scroll-y: 100px; --scroll-turn: 18deg; }
.sticker-heart { --x: 91%; --y: 13%; --size: 60px; --turn: 16deg; --scroll-y: 65px; --scroll-turn: -18deg; }
@keyframes sticker-drift {
  0%, 100% { transform: translate3d(0, 3px, 0) rotate(-2deg) scale(.99); }
  35% { transform: translate3d(calc(5px * var(--sway)), -6px, 0) rotate(2deg) scale(1.025); }
  70% { transform: translate3d(calc(-3px * var(--sway)), -1px, 0) rotate(-1deg) scale(1.005); }
}
.sticker-motion-paused .sticker-drift { animation-play-state: paused; }
@media (min-width: 1400px) {
  .intro-player { max-width: min(340px, calc((100svh - 335px) * .5625)); }
}
@media (min-width: 761px) and (max-height: 800px) {
  .intro-player { max-width: calc((100svh - 310px) * .5625); }
  .film-copy .eyebrow, .film-context { display: none; }
  .hero-featured-pair { height: 320px; }
  .sticker-photo-point { --size: min(95%, 160px); }
  .sticker-character-point { --size: min(100%, 170px); }
  .sticker-bolt, .sticker-flower, .sticker-camera { --y: 9%; }
  .sticker-cherries { --y: 91%; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .film-hero-grid { grid-template-columns: minmax(220px, 1.05fr) minmax(105px, .45fr) minmax(220px, .9fr); gap: 24px; }
  .film-copy h1 { font-size: clamp(30px, 3.8vw, 40px); }
  .hero-featured-pair { height: 330px; }
  .sticker-photo-point { --size: min(100%, 142px); }
  .sticker-character-point { --size: min(108%, 154px); }
  .sticker-flower { --x: 31%; }
  .sticker-camera { --x: 48%; }
  .sticker-heart { --x: 53%; --y: 86%; --size: 47px; }
  .sticker-star-key { --x: 33%; --y: 84%; --size: 35px; }
  .hero-bottom { padding-inline: 40px; }
}
@media (max-width: 760px) {
  .film-hero { background: radial-gradient(ellipse at 0% 12%, #fff5b5, transparent 50%), radial-gradient(ellipse at 100% 38%, #ffe1ed, transparent 55%), linear-gradient(145deg, #fffced, #e5f5ff 83%); }
  .film-hero:before { opacity: .22; background-size: 19px 19px; }
  .film-hero-grid { gap: 12px; padding-bottom: 22px; }
  .film-copy { position: relative; z-index: 2; }
  .film-mobile-description { color: #597180; }
  .hero-featured-pair { width: 230px; height: 115px; }
  .sticker-photo-point { --x: 25%; --y: 50%; --size: 109px; --turn: -8deg; --scroll-y: 35px; --scroll-turn: 10deg; --scroll-scale: .02; }
  .sticker-character-point { --x: 76%; --y: 50%; --size: 111px; --turn: 8deg; --scroll-y: 45px; --scroll-turn: -12deg; --scroll-scale: .02; }
  .portrait-screen { box-shadow: 0 14px 35px #487a952b, 0 0 0 4px #ffffffe6; }
  .hero-sticker-field { bottom: 46px; width: calc(100% - 40px); }
  .sticker-heart { --x: 91%; --y: 58%; --size: 42px; --scroll-y: 65px; }
  .sticker-flower { --x: 9%; --y: 76%; --size: 38px; --turn: -18deg; --scroll-y: 65px; }
  .sticker-camera { --x: 10%; --y: 47%; --size: 52px; --turn: -18deg; --scroll-y: 70px; }
  .sticker-star-key { --x: 90%; --y: 82%; --size: 33px; --scroll-y: 30px; }
  .sticker-bolt, .sticker-cherries { display: none; }
  .intro-player { width: min(100%, calc(clamp(280px, 100svh - 490px, 470px) * .5625)); }
  .hero-bottom { padding-inline: 20px; gap: 10px; }
  .hero-bottom .film-scroll { gap: 9px; padding-block: 13px; }
  .film-scroll > span:last-child { display: none; }
  .sticker-motion-toggle { min-height: 40px; font-size: 8px; padding: 6px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .sticker-drift { animation: none; }
  .sticker-scroll, .sticker-react { transform: none !important; }
}

/* Reveal and scroll-out have separate layers so their transforms never compete. */
.has-sticker-motion .sticker-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0) rotate(-8deg) scale(.78);
  transition: opacity .65s ease, transform .95s cubic-bezier(.2,.75,.2,1);
}
.has-sticker-motion .stickers-entered .sticker-reveal {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  transition-delay: var(--reveal-delay, 0ms);
}
.model-sticker-pair { position: relative; width: 330px; max-width: 100%; height: 195px; margin-top: 24px; pointer-events: none; }
.model-sticker-pair .sticker-photo-point { --x: 25%; --y: 52%; --size: 167px; --turn: -9deg; --scroll-y: 18px; --scroll-turn: 9deg; }
.model-sticker-pair .sticker-character-point { --x: 76%; --y: 48%; --size: 157px; --turn: 8deg; --scroll-y: 25px; --scroll-turn: -12deg; }
.model-motion-toggle { margin-top: 8px; }
.sticker-motion-disabled .sticker-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.sticker-motion-disabled .sticker-scroll { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .model-sticker-pair { width: 285px; height: 160px; margin: 24px auto 0; }
  .model-sticker-pair .sticker-photo-point { --size: 145px; }
  .model-sticker-pair .sticker-character-point { --size: 138px; }
  .model-motion-toggle { display: flex; margin: 12px auto 0; }
}
@media (prefers-reduced-motion: reduce) {
  .has-sticker-motion .sticker-reveal { opacity: 1; transform: none; transition: none; }
  .sticker-scroll { opacity: 1; }
}