/* The six supplied images blend behind the stationary hero content. */
.hero-images {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: #fff8ec;
  transition: opacity 1.6s ease-in-out;
}

.hero-slide.is-previous {
  opacity: 1;
  z-index: 1;
  transition: none;
}

.hero-slide.is-active {
  opacity: 1;
  z-index: 2;
}

/* The five 4:3 originals fit at full height without cropping heads or props. */
.hero-slide-contained .hero-image {
  left: auto;
  right: 0;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: right center;
  mask-image: linear-gradient(to right, transparent, #000 90px);
}

.hero-slide-contained::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #fff8ec 0%, #fff8ec 25%, #fff8ec00 55%);
}

.hero-note {
  z-index: 2;
  pointer-events: none;
}

.hero-title-line {
  display: block;
  width: max-content;
  white-space: nowrap;
}

/* Letters keep their space throughout typing, so the buttons never jump. */
#hero-title.type-ready .hero-title-char {
  opacity: 0;
}

#hero-title.is-typing .hero-title-char {
  animation: hero-letter-in .05s linear var(--letter-delay) both;
}

#hero-title.type-ready .highlight::after {
  transform: rotate(-1deg) scaleX(0);
  transform-origin: left center;
}

#hero-title.is-typing .highlight::after {
  animation: hero-underline-in .4s ease-out var(--underline-delay) both;
}

@keyframes hero-letter-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hero-underline-in {
  from { transform: rotate(-1deg) scaleX(0); }
  to { transform: rotate(-1deg) scaleX(1); }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .hero-images {
    position: relative;
    inset: auto;
    order: 1;
    width: 100%;
    aspect-ratio: 1672 / 941;
    flex-shrink: 0;
  }

  .hero-scene .hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
    mask-image: none;
  }

  .hero-slide-contained::after { display: none; }
  .hero-note { display: none; }
}

@media (prefers-reduced-motion: reduce), print {
  .hero-slide { transition: none; }
  #hero-title .hero-title-char { opacity: 1 !important; animation: none; }
  #hero-title .highlight::after { transform: rotate(-1deg) !important; animation: none; }
}

/* Compact horizontal hero: copy left, artwork right. */
@media screen and (max-width:900px){.hero-scene{display:block;min-height:clamp(340px,76vw,650px);width:calc(100% - 24px)}.hero-images{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}.hero-scene .hero-image{object-fit:cover;object-position:65% center}.hero-scene .hero-slide-contained .hero-image{left:auto;right:0;width:auto;max-width:80%;object-fit:contain;object-position:right center;mask-image:linear-gradient(90deg,transparent,#000 30%)}.hero-slide-contained::after{display:block;background:linear-gradient(90deg,#fff8ec 0%,#fff8ec 22%,transparent 58%)}.hero-content{width:65%;padding:7vw 0 8vw 4vw;background:transparent}.hero-content:before{display:none}.hero h1{font-size:clamp(21px,5.2vw,46px);line-height:1.34}.hero-brand{font-size:clamp(9px,1.7vw,15px);margin-bottom:2vw}.hero-description{font-size:clamp(9px,1.65vw,14px);margin:3vw 0;line-height:1.85}.hero-description .desktop-break{display:initial}.hero .age-badge{font-size:clamp(8px,1.3vw,11px);padding:4px 7px;margin-bottom:3vw}.hero .button-group{flex-wrap:nowrap;gap:6px}.hero .button{font-size:clamp(9px,1.4vw,12px);padding:9px 8px;min-height:38px;gap:5px;white-space:nowrap}.hero .button .icon{width:12px;height:12px}.hero-note{display:none}}

@media screen and (max-width:900px){.hero-images:after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,#fff8ecf2 0%,#fff8ecdb 27%,#fff8ec66 45%,transparent 66%);pointer-events:none}.hero .pill{font-size:clamp(8px,1.3vw,11px);padding:4px 7px;margin-bottom:3vw}}