.masthead {
  position: relative;
  isolation: isolate;
  height: min(100svh, 760px);
  min-height: 600px;
  overflow: hidden;
  background: #041322 url('assets/monstra-scene-02-poster.jpg') center / cover no-repeat;
  border-bottom: 1px solid rgba(226, 177, 97, .35);
}

.intro-scene,
.intro-video,
.intro-vignette {
  position: absolute;
  inset: 0;
}

.intro-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.intro-tail {
  opacity: 0;
  pointer-events: none;
  transition: opacity .75s ease;
}

.masthead.scene-old-video .intro-tail { transition-duration: .25s; }

.masthead.scene-tail-active .intro-tail { opacity: 1; }

.intro-vignette {
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 9, 20, .28), transparent 36%, transparent 80%, rgba(0, 9, 20, .12)),
              linear-gradient(180deg, rgba(0, 10, 22, .27), transparent 27%, transparent 72%, rgba(0, 10, 22, .6));
}

.scene-ambient {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
}
.masthead.scene-complete .scene-ambient { opacity: 1; }
.scene-ambient span { position: absolute; display: block; pointer-events: none; }
.masthead:not(.scene-old-video) .ambient-mist { display: none; }
.ambient-mist {
  inset: 27% 19% 5% 16%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 30% 70%, #b9e5ff45, transparent 43%),
              radial-gradient(ellipse at 70% 55%, #badcf13d, transparent 48%);
  filter: blur(24px);
  mix-blend-mode: screen;
  animation: monstra-mist-drift 13s ease-in-out infinite alternate;
}
.ambient-motes {
  inset: 14% 0 5% 29%;
  background: radial-gradient(circle at 11% 78%, #fff2c1 0 2px, transparent 4px),
              radial-gradient(circle at 32% 61%, #ffd685 0 1.5px, transparent 4px),
              radial-gradient(circle at 56% 81%, #fff2c1 0 2px, transparent 5px),
              radial-gradient(circle at 73% 52%, #ffda85 0 1.5px, transparent 4px),
              radial-gradient(circle at 89% 75%, #fff2c1 0 2px, transparent 5px);
  filter: drop-shadow(0 0 6px #ffd88b);
  animation: monstra-motes-rise 6s ease-in-out infinite alternate;
}
.ambient-glow {
  right: -7%;
  bottom: 9%;
  width: 42%;
  height: 48%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #f4b96740, #f4b9670e 45%, transparent 70%);
  filter: blur(24px);
  mix-blend-mode: screen;
  animation: monstra-glow-breathe 7s ease-in-out infinite alternate;
}
@keyframes monstra-mist-drift {
  from { transform: translate3d(-3.5%, 1%, 0); opacity: .25; }
  to { transform: translate3d(3.5%, -1%, 0); opacity: .48; }
}
@keyframes monstra-motes-rise {
  from { transform: translate3d(0, 14px, 0); opacity: .35; }
  to { transform: translate3d(1%, -20px, 0); opacity: .8; }
}
@keyframes monstra-glow-breathe {
  from { transform: scale(.88); opacity: .3; }
  to { transform: scale(1.12); opacity: .7; }
}

.masthead .site-header {
  position: relative;
  z-index: 5;
  min-height: 118px;
  border: 0;
  gap: 34px;
}

.masthead .brand {
  width: 196px;
  height: 118px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 1.25s ease, transform 1.25s ease, visibility 1.25s;
}

.masthead .brand::before {
  content: '';
  position: absolute;
  left: -13px;
  top: -6px;
  width: 208px;
  height: 195px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(2, 15, 27, .88) 0%, rgba(2, 15, 27, .68) 49%, transparent 73%);
  filter: blur(7px);
  pointer-events: none;
}

.masthead .brand img {
  width: 186px;
  height: 186px;
  top: 1px;
  filter: brightness(1.18) saturate(1.12) drop-shadow(0 8px 14px rgba(0, 0, 0, .8)) drop-shadow(0 0 15px rgba(232, 180, 90, .32));
}

.masthead.scene-logo-visible .brand,
.masthead.scene-complete .brand {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.masthead .desktop-nav,
.masthead .header-actions,
.masthead .mobile-nav {
  opacity: 0;
  visibility: hidden;
  transition: opacity .75s ease, visibility .75s;
}

.masthead.scene-complete .desktop-nav,
.masthead.scene-complete .header-actions,
.masthead.scene-complete .mobile-nav {
  opacity: 1;
  visibility: visible;
}

.masthead .desktop-nav a,
.masthead .icon-button {
  text-shadow: 0 2px 8px #000;
}

.scene-packs {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 82px;
  display: block;
  width: 460px;
  height: 360px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-50%, 42px, 0) scale(.84);
  transform-origin: center bottom;
  transition: opacity 1.5s ease, transform 2s cubic-bezier(.16, 1, .3, 1), visibility 1.5s;
}
.scene-packs::before {
  content: '';
  position: absolute;
  inset: 18% -8% -7%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, #ffc67c61, #7bd9e322 44%, transparent 70%);
  filter: blur(23px);
  pointer-events: none;
}
.scene-packs::after {
  content: '';
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 5%;
  height: 23px;
  border-radius: 50%;
  background: #000b;
  filter: blur(15px);
  pointer-events: none;
}
.scene-pack {
  position: absolute;
  bottom: 0;
  display: block;
  width: 205px;
  height: auto;
  max-width: none;
  filter: drop-shadow(0 18px 17px #000c) drop-shadow(0 0 11px #c9986280);
}
.scene-pack-core { z-index: 1; left: 6px; bottom: 7px; transform: rotate(-13deg); }
.scene-pack-founder { z-index: 3; left: 124px; bottom: 20px; width: 220px; transform: rotate(-2deg); }
.scene-pack-elements { z-index: 2; right: 6px; bottom: 7px; transform: rotate(13deg); }
.masthead.scene-card-visible .scene-packs {
  opacity: 1;
  visibility: visible;
  transform: translate3d(-50%, 0, 0) scale(1);
}
.scene-card {
  position: absolute;
  z-index: 3;
  right: clamp(46px, 10vw, 180px);
  bottom: clamp(36px, 6vh, 72px);
  width: clamp(220px, 22vw, 310px);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(70px, 24px, 0) rotate(7deg) scale(.87);
  transform-origin: center 80%;
  transition: opacity 2s ease, transform 2.25s cubic-bezier(.16, 1, .3, 1), visibility 2s;
  pointer-events: none;
}

.scene-card::before {
  content: '';
  position: absolute;
  inset: 5% -8% -5%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 179, 68, .4), rgba(255, 179, 68, .13) 42%, transparent 70%);
  filter: blur(26px);
}

.scene-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .75), 0 0 21px rgba(250, 194, 102, .55);
}

.masthead.scene-card-visible .scene-card {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) rotate(4deg) scale(1);
}

.scene-phone {
  position: absolute;
  z-index: 4;
  left: max(43px, calc((100% - 1440px) / 2));
  top: 216px;
  display: block;
  width: clamp(195px, 16vw, 220px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(22px) rotate(-4deg) scale(.94);
  transition: opacity 1.4s ease, transform 1.7s cubic-bezier(.16, 1, .3, 1), visibility 1.4s;
}

.masthead.scene-phone-visible .scene-phone {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) rotate(-4deg) scale(1);
}

.scene-phone-frame {
  position: relative;
  display: block;
  padding: 7px;
  border: 2px solid #e2bd7d;
  border-radius: 25px;
  background: linear-gradient(145deg, #e8c789, #81552e 25%, #d7b26c 63%, #6a4728);
  box-shadow: 0 18px 32px #000a, 0 0 24px #ef9d5044, inset 0 0 0 2px #2b1a12;
}

.scene-phone-notch {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 10px;
  width: 27%;
  height: 8px;
  border-radius: 0 0 7px 7px;
  background: #050d17;
  transform: translateX(-50%);
}

.scene-phone-screen {
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: #071827;
  color: #ffe9b9;
}

.scene-phone-topline {
  display: flex;
  justify-content: space-between;
  padding: 17px 10px 6px;
  color: #f5d993;
  font: 700 9px/1 Arial, sans-serif;
  letter-spacing: .08em;
}

.scene-phone-topline span { color: #8fe1e1; font-size: 7px; }

.scene-phone-visual {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #132333;
}

.scene-phone-visual video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scene-phone-details {
  display: block;
  padding: 7px 9px 10px;
  background: linear-gradient(180deg, #102a3b, #071827);
}

.scene-phone-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font: 700 18px/1.1 Georgia, serif;
  letter-spacing: .06em;
}

.scene-phone-name small { color: #a5c5ce; font: 700 7px Arial, sans-serif; letter-spacing: .05em; }

.scene-phone-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin: 8px 0;
}

.scene-phone-stats > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 3px 1px;
  border: 1px solid #cfaa6a88;
  border-radius: 4px;
  color: #ffe2a6;
  font: 700 8px Arial, sans-serif;
}

.scene-phone-stats img { width: 19px; height: 19px; }

.scene-phone-move {
  display: flex;
  justify-content: space-between;
  padding: 4px 0 3px;
  border-top: 1px solid #a6845366;
  color: #e6e8e3;
  font: 700 8px Arial, sans-serif;
  letter-spacing: .03em;
}

.scene-phone-move b { color: #ffe4a1; }

.scene-phone-link {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding: 7px 11px;
  border: 1px solid #dab774;
  border-radius: 999px;
  background: #061726cc;
  color: #ffe4ad;
  font: 700 11px Arial, sans-serif;
  box-shadow: 0 7px 20px #0008;
}

.scene-phone:hover .scene-phone-frame { box-shadow: 0 20px 38px #000c, 0 0 28px #eaa65c99; }
.scene-phone:hover .scene-phone-link { background: #cb9149; color: #061827; }

.scene-skip {
  position: absolute;
  z-index: 6;
  left: max(43px, calc((100% - 1440px) / 2));
  bottom: 44px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border: 1px solid #efcb89;
  border-radius: 999px;
  background: rgba(4, 19, 34, .82);
  box-shadow: 0 5px 24px #0009, inset 0 0 0 1px #9c754357;
  color: #ffe5ae;
  font: 700 .88rem Georgia, serif;
  letter-spacing: .02em;
  cursor: pointer;
  transition: opacity .35s ease, visibility .35s, background .2s ease, color .2s ease;
}

.scene-skip:hover,
.scene-skip:focus-visible {
  background: #e2b36a;
  color: #071827;
  outline: 2px solid #91e4ed;
  outline-offset: 3px;
}

.masthead.scene-complete .scene-skip {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.scene-actions {
  position: absolute;
  z-index: 4;
  left: max(43px, calc((100% - 1440px) / 2));
  bottom: 44px;
  display: flex;
  align-items: center;
  gap: 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .8s ease, transform .8s ease, visibility .8s;
}

.masthead.scene-complete .scene-actions {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scene-actions a {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 13px 23px;
  border: 1px solid #f1cf8b;
  border-radius: 999px;
  background: rgba(4, 19, 34, .7);
  box-shadow: 0 5px 24px #0008;
  color: #ffe5ae;
  font-weight: 700;
}

.scene-actions a:hover { background: rgba(199, 134, 55, .9); color: #091c2c; }

.scene-actions button {
  padding: 11px 0;
  border: 0;
  background: transparent;
  color: #f5ebd6;
  font-size: .9rem;
  text-shadow: 0 2px 8px #000;
}

.scene-actions button:hover { color: #f6ca7a; }

@media (max-width: 990px) {
  .masthead { height: min(90svh, 700px); min-height: 560px; }
  .masthead .site-header { min-height: 104px; }
  .masthead .brand { width: 145px; height: 104px; }
  .masthead .brand::before { width: 160px; height: 155px; left: -10px; }
  .masthead .brand img { width: 143px; height: 143px; }
  .scene-card { right: 8%; width: clamp(205px, 29vw, 270px); }
  .scene-packs { top: 174px; bottom: auto; left: calc(50% - 12px); width: 320px; height: 268px; }
  .scene-pack { width: 143px; }
  .scene-pack-core { left: 0; }
  .scene-pack-founder { left: 86px; width: 157px; }
  .scene-pack-elements { right: 0; }
  .scene-phone { left: 22px; top: 181px; width: 185px; }
  .scene-actions { left: 22px; }
  .scene-skip { left: 22px; }
}

@media (max-width: 650px) {
  .masthead { height: min(90svh, 660px); min-height: 540px; }
  .intro-video { object-position: 70% center; }
  .masthead .site-header { min-height: 92px; }
  .masthead .brand { width: 132px; height: 92px; }
  .masthead .brand::before { width: 145px; height: 140px; left: -8px; top: -4px; }
  .masthead .brand img { width: 130px; height: 130px; }
  .masthead .mobile-nav { top: 90px; }
  .scene-card { right: 7%; bottom: 84px; width: clamp(160px, 47vw, 225px); }
  .scene-packs { top: 120px; left: 72%; width: 194px; height: 174px; }
  .scene-pack { width: 90px; }
  .scene-pack-core { left: 0; bottom: 4px; }
  .scene-pack-founder { left: 52px; bottom: 11px; width: 104px; }
  .scene-pack-elements { right: 0; bottom: 4px; }
  .scene-phone { left: 15px; top: 157px; width: clamp(118px, 34vw, 145px); }
  .scene-phone-frame { padding: 4px; border-radius: 17px; }
  .scene-phone-screen { border-radius: 12px; }
  .scene-phone-notch { top: 6px; height: 5px; }
  .scene-phone-topline { padding: 11px 5px 3px; font-size: 6px; }
  .scene-phone-topline span { font-size: 5px; }
  .scene-phone-details { padding: 4px 5px 6px; }
  .scene-phone-name { font-size: 12px; }
  .scene-phone-name small { font-size: 5px; }
  .scene-phone-stats { margin: 5px 0; gap: 2px; }
  .scene-phone-stats > span { font-size: 6px; }
  .scene-phone-stats img { width: 12px; height: 12px; }
  .scene-phone-move { font-size: 6px; padding: 3px 0 2px; }
  .scene-phone-link { margin-top: 5px; padding: 5px 7px; font-size: 7px; }
  .scene-actions { bottom: 20px; left: 16px; right: 16px; gap: 14px; }
  .scene-skip { bottom: 20px; left: 16px; padding: 10px 14px; font-size: .78rem; }
  .scene-actions a { padding: 10px 14px; gap: 8px; font-size: .78rem; }
  .scene-actions button { font-size: .76rem; }
}

@media (max-width: 360px) {
  .scene-packs { left: 70%; width: 174px; }
  .scene-pack { width: 81px; }
  .scene-pack-founder { left: 45px; width: 94px; }
  .scene-phone { left: 10px; width: 112px; }
  .scene-card { right: 3%; width: 145px; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-ambient { display: none; }
  .masthead .brand,
  .masthead .desktop-nav,
  .masthead .header-actions,
  .masthead .mobile-nav,
  .scene-card,
  .scene-packs,
  .scene-phone,
  .scene-actions { transition-duration: .01ms; }
  .scene-skip { transition-duration: .01ms; }
}

/* Three approved creature cards appear together at the end of the intro. */
.scene-card-side {
  z-index: 2;
  width: clamp(180px, 14vw, 205px);
  bottom: clamp(105px, 15vh, 155px);
}
.scene-card-brumel {
  right: calc(clamp(80px, 11vw, 205px) + 240px);
  transform: translate3d(80px, 42px, 0) rotate(-17deg) scale(.82);
}
.scene-card-brumel::before {
  background: radial-gradient(ellipse, #9cc66d6b, #9cc66d25 43%, transparent 72%);
}
.scene-card-fenara {
  right: max(8px, 1vw);
  transform: translate3d(35px, 42px, 0) rotate(17deg) scale(.82);
}
.scene-card-fenara::before {
  background: radial-gradient(ellipse, #d78be46b, #d78be425 43%, transparent 72%);
}
.scene-card-flaro {
  z-index: 3;
  right: clamp(80px, 11vw, 205px);
  width: clamp(220px, 19vw, 285px);
}
.masthead.scene-card-visible .scene-card-brumel { transform: translate3d(0, 0, 0) rotate(-12deg) scale(1); }
.masthead.scene-card-visible .scene-card-fenara { transform: translate3d(0, 0, 0) rotate(13deg) scale(1); }

@media (max-width: 990px) {
  .scene-card-flaro { right: 9%; width: clamp(205px, 27vw, 260px); }
  .scene-card-side { width: clamp(150px, 19vw, 185px); bottom: 110px; }
  .scene-card-brumel { right: calc(9% + 170px); }
  .scene-card-fenara { right: 1%; }
}
@media (max-width: 650px) {
  .scene-card-flaro { right: 17%; width: clamp(150px, 42vw, 180px); }
  .scene-card-side { width: clamp(95px, 29vw, 120px); bottom: 137px; }
  .scene-card-brumel { right: calc(17% + 115px); }
  .scene-card-fenara { right: -4px; }
  .masthead.scene-card-visible .scene-card-brumel { transform: translate3d(0, 0, 0) rotate(-14deg) scale(1); }
  .masthead.scene-card-visible .scene-card-fenara { transform: translate3d(0, 0, 0) rotate(14deg) scale(1); }
}
@media (max-width: 360px) {
  .scene-card-flaro { right: 17%; width: 145px; }
  .scene-card-side { width: 91px; bottom: 132px; }
  .scene-card-brumel { right: calc(17% + 112px); }
}