/* Geometry and reveal timing measured against the Royal Gateway reference. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  min-height: 100svh;
  max-height: none;
  margin-top: 0;
  padding: 80px 0 0;
  overflow: hidden;
  background: #fbd9a8;
  text-align: center;
}
.hero::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(to bottom, transparent 45%, #f7b98e 70%, #fbd9a8);
  pointer-events: none;
}
.hero-art {
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: 72%;
  background: url('assets/reference/hero-sky-1920.webp') center 80% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
  filter: none;
  transform: none;
  animation: royal-sky 40s ease-in-out infinite alternate;
}
.hero-rays {
  position: absolute;
  z-index: 0;
  inset: auto;
  width: 220vmax;
  height: 220vmax;
  left: 50%;
  top: 70%;
  background: repeating-conic-gradient(from 0deg, rgba(255,236,190,.55) 0deg 4deg, transparent 4deg 13deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 45%);
  mask-image: radial-gradient(circle, #000 0, transparent 45%);
  mix-blend-mode: soft-light;
  opacity: .6;
  transform: translate(-50%,-50%);
  animation: royal-rays 240s linear infinite;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(ellipse 55% 42% at 50% 24%, rgba(255,228,179,.62), transparent 75%);
  pointer-events: none;
}
.hero-copy {
  position: relative;
  z-index: 2;
  padding: 0 16px;
  opacity: 1;
  transform: translateY(0);
  transition: transform 1s cubic-bezier(.22,1,.36,1) .3s, opacity 1s .3s;
}
.hero-copy>.script {
  font: 400 36px/40px var(--script);
  color: #b16f23;
  margin: 0;
}
.hero-copy h2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0;
  font: 700 96px/1 var(--serif);
  text-transform: none;
  color: #9e141e;
  letter-spacing: 0;
}
.hero-copy h2>span:not(.ampersand) {
  display: block;
  max-width: 100%;
  line-height: 1;
  letter-spacing: .05em;
  transition: letter-spacing 1.8s cubic-bezier(.22,1,.36,1);
}
.hero-copy h2>span:last-child { transition-delay: .4s; }
.hero-copy h2>.ampersand {
  display: block;
  padding: 0;
  font: 400 72px/1 var(--script);
  color: #b16f23;
  opacity: 1;
  transform: scale(1);
  transition: opacity 1s .8s, transform 1s cubic-bezier(.22,1,.36,1) .8s;
}
.palace-cutout {
  position: relative;
  z-index: 1;
  display: block;
  flex: none;
  width: 112%;
  max-width: none;
  height: auto;
  left: 0;
  top: auto;
  margin: auto 0 0;
  filter: none;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: transform 2.6s cubic-bezier(.22,1,.36,1) .3s, opacity 2.6s .3s;
}
.gate-locked .hero-copy { opacity: 0; transform: translateY(-20px); }
.gate-locked .hero-copy h2>span:not(.ampersand) { letter-spacing: .4em; }
.gate-locked .hero-copy h2>.ampersand { opacity: 0; transform: scale(.5); }
.gate-locked .palace-cutout { opacity: 0; transform: translateY(300px) scale(1.06); }
@keyframes royal-sky {
  0% { transform: scale(1.25); filter: blur(10px) brightness(.8); animation-timing-function: ease-in-out; }
  8% { transform: scale(1.1); filter: blur(0) brightness(1); }
  100% { transform: scale(1.18) translateX(-2.5%); filter: blur(0) brightness(1); }
}
@keyframes royal-rays {
  to { transform: translate(-50%,-50%) rotate(360deg); }
}
@media (max-width: 767px) {
  .hero { height: auto; min-height: 100svh; padding-top: 80px; }
  .hero-art { height: 80%; }
  .hero-copy { padding: 0 16px; }
  .hero-copy>.script { font-size: 30px; line-height: 36px; }
  .hero-copy h2 { font-size: clamp(40px,12.31vw,48px); line-height: 1; }
  .hero-copy h2>.ampersand { font-size: 48px; line-height: 1; }
  .palace-cutout { position: relative; width: 150%; left: 0; top: auto; margin: auto 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art, .hero-rays { animation: none; filter: none; transform: none; }
  .hero-copy, .palace-cutout, .hero-copy h2>span { transition: none; }
  .gate-locked .hero-copy { opacity: 1; transform: none; }
  .gate-locked .palace-cutout { opacity: 1; transform: none; }
}