/* hero-fit-v4: scene 01 Gibbles keeps his original live size and horizontal position; he is only moved so his base
   sits 72px above the viewport bottom, and layered in front of the full-size headline. */
body.animated #start .foreground-gibbles{bottom:72px;z-index:3}
@media(max-width:767px){body.animated #start .foreground-gibbles{left:-17vw}}   /* phone: same size, nudged ~31px left so his ear clears the name card */
/* v5: lift (margin-top: GSAP owns transform/translate on this layer) the whole headline block (both headline states live in .hero-copy) by up to 50px, never closer than 16px
   under the nav pill (pill bottom = 60px). Phones: no lift (the logo tag sits right above the headline). */
@media(min-width:1367px) and (min-aspect-ratio:1/1){body.animated #start .hero-copy.intro-copy{margin-top:-50px}}
@media(min-width:768px) and (max-width:1366px) and (min-aspect-ratio:1/1){body.animated #start .hero-copy.intro-copy{margin-top:calc(-1 * min(50px, max(0px, clamp(84px,12svh,112px) - 76px)))}}
@media(min-width:768px) and (max-aspect-ratio:1/1){body.animated #start .hero-copy.intro-copy{margin-top:calc(-1 * min(50px, max(0px, 11svh - 77px)))}}