/* Passport-photo comedy animation using the existing Pawperwork crew art.
   Exaggerated character acting timed to the original 11s photo sequence.
   No video rectangle, no captions, no image downloads. */
@media (prefers-reduced-motion: no-preference) {
  .hero-visual .mascot.is-posing .cat {
    transform-box: fill-box; transform-origin: 50% 90%;
    animation: paw-comedy-miso 11s cubic-bezier(.25,.8,.25,1) 1;
  }
  .hero-visual .mascot.is-posing .toula {
    transform-box: fill-box; transform-origin: 50% 95%;
    animation: paw-comedy-toula 11s ease-in-out 1;
  }
  .hero-visual .mascot.is-posing .c-cam {
    animation: paw-comedy-camera 11s ease-out 1;
  }
  .hero-visual .mascot.is-posing .c-flash {
    animation: paw-comedy-flash 11s linear 1;
  }
  .hero-visual .mascot.is-posing .cat-tail {
    animation: paw-comedy-tail 11s ease-in-out 1;
    transform-box: fill-box; transform-origin: 0% 90%;
  }
  @keyframes paw-comedy-toula {
    0%, 10%, 100% {transform:none}
    14% {transform:translateY(-18px) rotate(-9deg) scale(1.09)}
    18% {transform:translateY(-4px) rotate(11deg) scale(1.14)}
    23% {transform:translateY(-15px) rotate(-12deg) scale(1.16)}
    26% {transform:translateY(-7px) rotate(7deg) scale(1.13)}
    29% {transform:translateY(-12px) rotate(-8deg) scale(1.14)}
    31%, 35% {transform:translate(-8px,6px) rotate(-15deg) scale(1.05)}
    39%, 61% {transform:translate(-8px,6px) rotate(-15deg) scale(1.05)}
    66% {transform:translateY(-21px) rotate(13deg) scale(1.12)}
    71% {transform:translateY(0) rotate(-8deg)}
    76% {transform:translateY(-14px) rotate(9deg)}
    81% {transform:none}
  }
  @keyframes paw-comedy-miso {
    0%, 17%, 100% {transform:none}
    21% {transform:translateY(12px) scale(1.2,.7)}
    24% {transform:translate(8px,-42px) rotate(-17deg) scale(1.25)}
    27% {transform:translate(44px,-55px) rotate(16deg) scale(1.42)}
    29%, 33% {transform:translate(62px,25px) rotate(-12deg) scale(1.5)}
    36% {transform:translate(58px,29px) rotate(10deg) scale(1.36)}
    40%, 61% {transform:translate(56px,25px) rotate(5deg) scale(1.33)}
    65% {transform:translate(24px,-28px) rotate(-16deg) scale(1.2)}
    70% {transform:translate(-9px,5px) rotate(9deg) scale(1.08)}
    76% {transform:none}
  }
  @keyframes paw-comedy-camera {
    0%, 7% {opacity:0;transform:scale(.35)}
    10% {opacity:1;transform:scale(1.2) rotate(-7deg)}
    12%, 28% {opacity:1;transform:none}
    30% {opacity:1;transform:scale(1.18) rotate(10deg)}
    31%, 32% {opacity:1;transform:scale(.88) rotate(-8deg)}
    35% {opacity:0;transform:scale(.65)}
    100% {opacity:0}
  }
  @keyframes paw-comedy-flash {
    0%, 30.9% {opacity:0}
    31.2% {opacity:1}
    32.3% {opacity:.3}
    32.8% {opacity:.95}
    34.8%, 100% {opacity:0}
  }
  @keyframes paw-comedy-tail {
    0%, 15%, 100% {transform:none}
    20% {transform:rotate(24deg)}
    25% {transform:rotate(-35deg)}
    30% {transform:rotate(35deg)}
    35% {transform:rotate(-38deg)}
    40%, 61% {transform:rotate(24deg)}
    67% {transform:rotate(-35deg)}
    73% {transform:rotate(22deg)}
    80% {transform:none}
  }
}
/* Existing reduced-motion CSS and static SVG remain the fallback. */

/* Clear affordance for keyboard replay without adding a visual video frame. */
@media (prefers-reduced-motion: reduce) {
  .hero-visual .mascot, .hero-visual .mascot * { animation:none !important; transition:none !important; }
}

/* Dino is the director of the photo, not a static background character.
   Each cast member acts independently within the same SVG illustration. */
@media (prefers-reduced-motion: no-preference) {
  .hero-visual .mascot.is-posing .dog-head {
    transform-box: fill-box;
    transform-origin: 50% 85%;
    animation: paw-comedy-dino 11s ease-in-out 1 both;
  }
  .hero-visual .mascot.is-posing .b-specs {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: paw-comedy-glasses 11s ease-in-out 1 both;
  }
  .hero-visual .mascot.is-posing .dog-tail {
    transform-box: fill-box;
    transform-origin: 0% 50%;
    animation: paw-comedy-dino-tail 11s ease-in-out 1 both;
  }
  @keyframes paw-comedy-dino {
    0%, 5%, 100% { transform:none; }
    9% { transform:rotate(-12deg) translateY(-3px); }
    15% { transform:rotate(9deg) translateY(1px); }
    20% { transform:rotate(-6deg); }
    28% { transform:none; }
    32% { transform:translateY(9px) rotate(13deg) scale(.94); }
    38% { transform:translateY(-7px) rotate(-13deg) scale(1.08); }
    43%, 60% { transform:rotate(-8deg); }
    66% { transform:rotate(11deg) translateY(-5px); }
    73% { transform:rotate(-9deg); }
    80% { transform:none; }
  }
  @keyframes paw-comedy-glasses {
    0%, 7%, 100% { transform:none; }
    10% { transform:translateY(-4px) rotate(-8deg); }
    14% { transform:translateY(2px) rotate(4deg); }
    17% { transform:none; }
    32% { transform:translateY(6px) rotate(12deg); }
    39% { transform:translateY(-2px) rotate(-5deg); }
    44%, 100% { transform:none; }
  }
  @keyframes paw-comedy-dino-tail {
    0%, 6%, 100% { transform:none; }
    9%, 15%, 21% { transform:rotate(20deg); }
    12%, 18%, 24% { transform:rotate(-20deg); }
    29% { transform:none; }
    33% { transform:rotate(28deg); }
    40% { transform:rotate(-15deg); }
    47%, 100% { transform:none; }
  }
}

/* Replay is a real control, separate from the decorative scene. */
.hero-visual { position:relative; }
.hero-visual .mascot-replay {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  margin:.35rem auto 0; padding:.5rem .85rem;
  border:1px solid rgba(31,58,107,.22); border-radius:999px;
  background:rgba(255,255,255,.88); color:#1f3a6b;
  font:600 12px/1.2 Inter,system-ui,sans-serif;
  cursor:pointer; transition:background .2s ease,box-shadow .2s ease;
}
.hero-visual .mascot-replay:hover { background:#fff; box-shadow:0 2px 12px rgba(31,58,107,.1); }
.hero-visual .mascot-replay:focus-visible { outline:3px solid #0f6e66; outline-offset:3px; }
@media (prefers-reduced-motion:reduce) {
  .hero-visual .mascot-replay { display:none; }
}

/* Dimensional finishing: grounded shadows and soft lighting stay inside the SVG.
   The passport print enters only after the camera flash. */
.hero-visual .mascot .paw-photo-print { opacity:0; transform-box:fill-box; transform-origin:50% 50%; }
@media (prefers-reduced-motion:no-preference) {
 .hero-visual .mascot.is-posing .paw-photo-print { animation:paw-photo-reveal 11s ease-in-out 1 both; }
 @keyframes paw-photo-reveal {
   0%,52% {opacity:0;transform:translateY(-20px) rotate(-14deg) scale(.55)}
   58% {opacity:1;transform:translateY(-7px) rotate(8deg) scale(1.1)}
   65%,77% {opacity:1;transform:translateY(0) rotate(-5deg) scale(1)}
   88% {opacity:1;transform:translateY(5px) rotate(3deg) scale(.95)}
   97%,100% {opacity:0;transform:translateY(18px) rotate(9deg) scale(.8)}
 }
}
@media (prefers-reduced-motion:reduce) {
 .hero-visual .mascot .paw-photo-print {display:none}
}