/* hero.css - the landing's first screen (landing.html .hero): a short looping video of Yami Yugi on the temple steps
   under the three Egyptian God cards (generated from the game's own art of Yugi and the Gods as references:
   /media/hero-v-*.mp4, its first frame /media/hero-v-*.webp as the poster), the words small at the bottom left.
   Landscape and portrait have their own cut. Under prefers-reduced-motion or Save-Data only the poster shows (hero.js). */
.hero { position: relative; }
.gate { position: relative; height: 100svh; min-height: 600px; max-height: 1200px; overflow: hidden; isolation: isolate; background: #0b0a16; }
.gate video, .gate .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.gate video { opacity: 0; transition: opacity .8s; }
.gate.playing video { opacity: 1; }
.gate .poster img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
/* shade under the words and into the page below */
.gate::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, #07070acc, #07070a66 30%, #07070a00 55%), linear-gradient(0deg, var(--bg), #07070a00 32%); }

.gate .copy { position: absolute; z-index: 2; left: 0; right: 0; top: auto; transform: none; bottom: clamp(48px, 10vh, 110px); max-width: 1680px; }
.gate h1 { max-width: 12em; margin: 0; font: 400 clamp(30px, 3.4vw, 54px)/1.02 var(--display); text-transform: uppercase; text-shadow: 0 4px 30px #000c; }
.gate h1 .hot { display: block; }
.gate .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.gate .online-now { margin-top: 18px; color: #dddae3; font-size: 13px; }

/* phones held upright: the portrait cut, the words at the bottom over a deeper shade */
@media (max-aspect-ratio: 4/5), (max-width: 759.98px) {
  .gate { min-height: 620px; max-height: none; }
  .gate video, .gate .poster img { object-position: 50% 30%; }
  .gate::after { background: linear-gradient(0deg, var(--bg) 8%, #07070ae6 30%, #07070a00 58%); }
  .gate .copy { bottom: 36px; }
  .gate h1 { font-size: clamp(28px, 8.6vw, 40px); }
  .gate .ctas { flex-wrap: nowrap; margin-top: 20px; }
  .gate .ctas .btn { flex: 1; padding: 0 12px; letter-spacing: .14em; }
}
/* phones held sideways */
@media (max-height: 560px) and (min-aspect-ratio: 4/5) and (min-width: 760px) {
  .gate { min-height: 100svh; }
  .gate .copy { bottom: 24px; }
  .gate h1 { font-size: clamp(24px, 6.4vh, 34px); }
  .gate .ctas { margin-top: 14px; }
  .gate .btn { min-height: 44px; }
}