/* EliteLevel home page layout over the Shadow Realm (js/home-realm.js, js/scene-shadowrealm.js): Diablo holds the
   centre of the header on his own, close up, the grey realm around him and the torch fire at the edges of the frame.
   The logo hangs large and tilted in the top-left corner just under the top bar, and the war banner on the right is
   the one button, Play EliteLevelD3 (js/warbanner.js: the game's player banner in WebGL). The tiles under the scene
   lead to the rest of the site (the top bar has every page). */
.home-hero { padding: 0; min-height: max(640px, min(calc(100svh - var(--top) - 36px), 1500px)); }   /* the scene fills the screen; the tiles peek in under it */

/* ---------------------------------------------------------------- Diablo in the Shadow Realm
   The poster (the same shot, still) holds the header until the live scene has drawn its first frame, then the canvas
   fades in over it; the eyes sit on the upper third line in both, so the poster is placed by that line. The bottom of
   the scene fades into the page so the tiles rise out of the dark. */
.hh-realm {
  position: absolute; inset: 0; z-index: -3; outline: none;
  background: #0b0b0d url('../img/scenes/shadowrealm/poster-home.webp') 50% 33.3% / cover no-repeat;
  -webkit-mask-image: linear-gradient(#000 82%, rgba(0, 0, 0, 0.55) 92%, transparent 100%); mask-image: linear-gradient(#000 82%, rgba(0, 0, 0, 0.55) 92%, transparent 100%);
}
.hh-realm canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.9s ease; }
.sr-on .hh-realm canvas { opacity: 1; }
.hh-realm:focus-visible { box-shadow: inset 0 0 0 2px var(--gold-hi), inset 0 0 24px rgba(255, 90, 20, 0.45); }
.hh-sound {                             /* mutes his voice; appears once the scene is on */
  position: absolute; right: 18px; bottom: 18px; z-index: 4; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 50% 40%, #3a1a10, #120605 70%); box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #6b4a33, 0 0 0 1px #000, 0 4px 10px rgba(0, 0, 0, 0.7);
  opacity: 0; transition: opacity 1s ease 1s, box-shadow 0.2s;
}
.sr-on .hh-sound { opacity: 0.85; }
.hh-sound:hover, .hh-sound:focus-visible { opacity: 1; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px #c08a50, 0 0 14px rgba(255, 90, 20, 0.55), 0 4px 10px rgba(0, 0, 0, 0.7); outline: none; }
.hh-sound::before {
  content: ''; position: absolute; inset: 10px; background: var(--gold);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.hh-sound.off::before {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background: var(--ink-dim);
}

/* ---------------------------------------------------------------- the logo: large, tilted, slammed in once */
.hh-title {
  /* the tilted picture's corners are empty, so the letters' own top edge is about 0.14 x the width above its
     centre line and the picture box is 0.175 x tall, so top = 0.086 x puts the letters at the gap under the top bar */
  --tilt: -24deg; --lw: clamp(420px, 35vw, 900px); --gap: clamp(8px, 1vw, 18px);
  position: absolute; z-index: 2; left: calc(var(--lw) * 0.01); top: calc(var(--lw) * 0.086 + var(--gap)); width: var(--lw); margin: 0; line-height: 0;
  transform: rotate(var(--tilt)); transform-origin: 50% 50%; pointer-events: none;
}
.hh-title::before {                     /* a dark pool with an ember rim under the letters, so they sit in the scene */
  content: ''; position: absolute; inset: -18% -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 44% at 50% 52%, rgba(8, 2, 1, 0.7), rgba(40, 6, 2, 0.4) 55%, rgba(255, 70, 10, 0.08) 70%, transparent 78%);
  animation: hh-pool 1.3s ease-out 0.2s both;
}
.hh-title img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 0 22px rgba(255, 60, 10, 0.55)) drop-shadow(0 14px 18px rgba(0, 0, 0, 0.9));
  animation: hh-slam 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}
.hh-title::after {                      /* the flash of fire where it lands */
  content: ''; position: absolute; left: 10%; right: 10%; top: 20%; bottom: 10%; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 170, 80, 0.9), rgba(255, 70, 10, 0.5) 45%, transparent);
  mix-blend-mode: screen; opacity: 0; animation: hh-flash 1.2s ease-out 0.62s both;
}
@keyframes hh-slam {
  0% { opacity: 0; transform: scale(1.75) translateY(-6%); filter: brightness(2.6) blur(8px) drop-shadow(0 0 40px rgba(255, 90, 20, 0.9)); }
  38% { opacity: 1; }
  52% { transform: scale(0.95); filter: brightness(1.7) blur(0) drop-shadow(0 0 40px rgba(255, 90, 20, 0.9)); }
  70% { transform: scale(1.025); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 0 22px rgba(255, 60, 10, 0.55)) drop-shadow(0 14px 18px rgba(0, 0, 0, 0.9)); }
}
@keyframes hh-flash { 0% { opacity: 0; transform: scale(0.6); } 18% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes hh-pool { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------- the Play banner: the game's war banner is the button
   js/warbanner.js draws the player banner cloth on its pole crossbar in WebGL (lettering on the cloth) into a canvas
   that fills the link; until then, and without WebGL, the flat cloth picture with HTML lettering stands in. The glow
   and the keyboard ring are drop shadows, so they follow the torn cloth's own outline. */
.hh-play {
  --bw: clamp(230px, 19vw, 480px);
  position: absolute; z-index: 3; top: -6px; right: 1.2vw; width: var(--bw); aspect-ratio: 0.66;
  display: block; color: var(--gold); text-align: center; outline: none;
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 10px rgba(255, 60, 10, 0.2));
  transition: filter 0.25s ease;
}
.hh-play-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hh-play-flat {
  position: absolute; left: 19%; top: 15%; width: 62%; height: auto; transform-origin: 50% 0;
  animation: banner-sway 7s ease-in-out -3.5s infinite alternate;
}
.hh-play-text {
  position: absolute; left: 22%; right: 22%; top: 40%; display: flex; flex-direction: column; align-items: center;
  font-family: var(--title); text-transform: uppercase; line-height: 1; pointer-events: none;
}
.hh-play-text b {
  font-weight: normal; font-size: calc(var(--bw) * 0.12); letter-spacing: 0.08em; color: var(--gold-hi);
  text-shadow: 0 0 12px rgba(255, 90, 20, 0.85), 0 2px 2px #000, 0 0 2px #000;
}
.hh-play-text span {
  margin-top: calc(var(--bw) * 0.03); font-size: calc(var(--bw) * 0.04); letter-spacing: 0.1em; color: var(--gold);
  text-shadow: 0 0 8px rgba(255, 70, 10, 0.7), 0 1px 2px #000;
}
.hh-play.wb-on .hh-play-flat, .hh-play.wb-on .hh-play-text { display: none; }
.hh-play:hover, .hh-play:focus-visible {
  color: var(--gold-hi);
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 16px rgba(255, 90, 20, 0.8)) brightness(1.1);
}
.hh-play:focus-visible {                /* the keyboard ring follows the cloth's torn outline */
  filter: drop-shadow(0 0 1.5px var(--gold-hi)) drop-shadow(0 0 1.5px var(--gold-hi)) drop-shadow(0 0 16px rgba(255, 90, 20, 0.9)) brightness(1.1);
}
.hh-play:active { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.9)) brightness(0.95); }

/* ---------------------------------------------------------------- the tiles under the scene */
.cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 1060px; }

@media (max-width: 980px) {
  .hh-title { --tilt: -18deg; --lw: clamp(260px, 44vw, 420px); top: calc(var(--lw) * 0.1 + 8px); }
  .hh-play { --bw: clamp(150px, 22vw, 230px); }
}
@media (max-width: 760px) {
  .hh-realm { background-image: url('../img/scenes/shadowrealm/poster-home-phone.webp'); background-size: 100% auto; background-position: 50% 44%; }
  .hh-sound { right: 12px; bottom: 12px; width: 38px; height: 38px; }
  .hh-title { --tilt: -12deg; --lw: min(50vw, 220px); left: 6px; top: 12px; }
  .hh-title::before { inset: -26% -10%; }
  .hh-play { --bw: min(32vw, 130px); right: 2px; top: -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .hh-realm canvas { transition: none; }
  .hh-play-flat { animation: none; }
  .hh-title img, .hh-title::before { animation: none; }
  .hh-title::after { display: none; }
}