/* High-resolution generated asset integration and final composition pass. */
.scene::after { opacity: .065; }
.hero {
  background: linear-gradient(90deg, rgba(255,253,247,.92) 0%, rgba(255,253,247,.68) 38%, rgba(255,253,247,.08) 72%),
    url('../assets/backgrounds/hero-horizon.webp') center bottom / cover no-repeat;
}
.hero-copy { width: 45%; }
.hero-character { width: min(53vw, 940px); right: 3.5vw; top: 7vh; }
.hero-character img { max-height: 75vh; filter: drop-shadow(12px 18px 10px rgba(0,0,0,.18)); }
.link-wrap { width: min(360px,28vw); bottom: 3vh; }

.important-links { filter: drop-shadow(0 10px 12px rgba(0,0,0,.15)); }
.links-title {
  display: inline-block; margin: 0 0 .38rem .9rem; padding: .28rem .55rem;
  background: var(--paper); border: 1px solid rgba(21,21,19,.25);
  font-size: .7rem; transform: rotate(-.7deg);
}
.wood-board {
  min-height: 62px; border: 0; background-color: #111;
  background-image: linear-gradient(90deg,rgba(0,0,0,.28),transparent 35%,rgba(0,0,0,.24)), url('../assets/textures/link-boards.webp');
  background-size: auto, 110% 330%; background-position: center, center 2%;
  box-shadow: 0 4px 8px rgba(0,0,0,.28);
  clip-path: polygon(1% 5%,98% 0,100% 88%,96% 100%,2% 96%,0 15%);
}
.wood-board:nth-child(3) { background-position: center, center 50%; }
.wood-board:nth-child(4) { background-position: center, center 98%; }
.wood-board b { font-size: .79rem; }
.wood-board small { font-size: .59rem; }
.board-icon { background: rgba(0,0,0,.38); border-color: #aaa; }

.rodeo {
  background: linear-gradient(90deg,rgba(16,13,10,.82) 0%,rgba(25,19,14,.34) 35%,rgba(18,14,11,.05) 67%,rgba(12,10,8,.34)),
    url('../assets/backgrounds/rodeo-arena.webp') center / cover no-repeat;
}
.ride { left: 31%; bottom: 4vh; width: min(57vw,980px); max-height: 78vh; filter: drop-shadow(16px 24px 13px rgba(0,0,0,.38)); }
.label-bird svg { transform: none; }
.ride { transform: translateX(-210px); opacity: .2; }
.rodeo.ride-active .ride { animation: moobird-arrival 2.7s cubic-bezier(.18,.72,.24,1) forwards; }
@keyframes moobird-arrival {
  0% { transform: translateX(-210px); opacity: .2; }
  28% { opacity: 1; }
  78% { transform: translateX(10px); }
  100% { transform: translateX(0); opacity: 1; }
}
.poster { right: 3vw; top: 14vh; width: min(18vw,290px); padding: 0; background: transparent; box-shadow: none; }
.poster img { width: 100%; mix-blend-mode: normal; filter: drop-shadow(10px 15px 12px rgba(0,0,0,.48)); }

.finale {
  background: linear-gradient(90deg,rgba(255,253,247,.94) 0%,rgba(255,253,247,.65) 42%,rgba(255,253,247,.12) 74%),
    url('../assets/backgrounds/final-horizon.webp') center bottom / cover no-repeat;
}
.final-character { width: min(40vw,730px); right: 8.5vw; bottom: 3vh; }
.final-character img { max-height: 78vh; filter: drop-shadow(11px 18px 10px rgba(0,0,0,.17)); }
.final-links { width: min(350px,25vw); bottom: 8vh; }

@media (max-width: 760px) {
  .hero { background-position: 36% bottom; }
  .hero-character { width: 91vw; right: -6vw; top: 35%; }
  .hero-character img { max-height: 45vh; }
  .link-wrap { width: min(350px,90vw); }
  .wood-board { min-height: 53px; }
  .ride { left: -5%; bottom: 12vh; width: 91vw; max-height: 48vh; }
  .ride { transform: translateX(-90px); }
  .rodeo.ride-active .ride { animation-name: moobird-arrival-mobile; }
  @keyframes moobird-arrival-mobile {
    0% { transform: translateX(-90px); opacity: .2; }
    28% { opacity: 1; }
    78% { transform: translateX(6px); }
    100% { transform: translateX(0); opacity: 1; }
  }
  .poster { right: -.7rem; width: 38vw; bottom: 3vh; top: auto; }
  .final-character { width: 83vw; right: -8vw; bottom: 25vh; }
  .final-character img { max-height: 43vh; }
  .final-links { width: min(350px,calc(100vw - 40px)); }
}

@media (prefers-reduced-motion: reduce) {
  .ride, .rodeo.ride-active .ride { transform: none; opacity: 1; animation: none; }
}