/* Songbound teaser: the layouts per screen shape, and the entrance.
   The art's free space decides each layout: the sky on the left (wide screens), the sky
   above and the grass below (upright), and the sky on both sides (short landscape). */

/* Large screens: the kit at three times. */
@media (min-width: 1100px) and (min-height: 700px) {
  :root { --px: 3px; }
}

/* Landscape: wider than 16:9 crops the art top and bottom, so keep the feet in frame;
   narrower crops the sides, so push the art right, clear of the words. */
@media (orientation: landscape) { :root { --focus-y: 70%; } }
@media (orientation: landscape) and (max-aspect-ratio: 16/9) { :root { --focus-x: 22%; } }

/* Short landscape phones: the title on the left with the Discord button under it,
   and X in the bottom-right corner, past the creature. */
@media (orientation: landscape) and (max-height: 520px) {
  .veil {
    background:
      linear-gradient(90deg, rgb(26 30 54 / 0.84) 0%, rgb(26 30 54 / 0.5) 26%, transparent 50%),
      linear-gradient(0deg, rgb(26 30 54 / 0.8) 0%, transparent 30%);
  }
  .title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr auto;
    align-items: start;
    gap: 8px 0;
    max-width: none;
    padding-top: max(14px, env(safe-area-inset-top));
  }
  .logo { width: min(32vw, 230px, 44svh); }
  .gem { display: none; }
  .logo, .words { grid-column: 1; max-width: min(44vw, 400px); }
  .line { font-size: var(--text); }
  .soon { font-size: 21px; }
  .menu { display: contents; }
  .menu > .btn { grid-column: 1; grid-row: 4; justify-self: start; min-width: 240px; }
  .menu > .night { grid-column: 2; justify-self: end; min-width: 0; }
  .night { padding: 0 18px 3px; font-size: 24px; }
  .night:active { padding: 6px 18px 0; }
  .foot { padding: 4px var(--edge-r) max(10px, env(safe-area-inset-bottom)); text-align: right; }
  .corner { bottom: auto; top: max(14px, env(safe-area-inset-top)); }
}

@media (orientation: landscape) and (max-height: 380px) { .line { font-size: 24px; } }

/* Upright phones and tablets: the logo and words in the sky above the hero, the menu
   on the grass below, the copyright line on the left and the corner controls on the right. */
@media (orientation: portrait) {
  /* The art sits low, so the creature's face stays above the menu on short screens. */
  :root { --focus-y: 100%; }
  .stage { min-height: max(100svh, 600px); }
  .backdrop { background-image: url("/assets/img/poster_port.webp"); }
  .veil {
    background:
      linear-gradient(180deg, rgb(26 30 54 / 0.86) 0%, rgb(26 30 54 / 0.62) 30%, transparent 50%),
      linear-gradient(0deg, rgb(26 30 54 / 0.92) 0%, rgb(26 30 54 / 0.6) 16%, transparent 30%);
  }
  .title {
    align-items: center;
    max-width: none;
    padding: var(--edge-t) var(--edge-r) 0 var(--edge-l);
    text-align: center;
  }
  .logo { margin: 0; width: min(78vw, 460px, 36svh); }
  .words { align-items: center; }
  .soon { justify-content: center; }
  .menu { align-items: center; gap: 8px; margin-top: auto; }
  .pill { min-width: 66%; }
  /* Tall enough that the corner controls sit beside the copyright line, under the menu. */
  .foot { padding: 22px var(--edge-r) var(--edge-b) var(--edge-l); min-height: 70px; }
}

/* Upright phones: "Coming soon" fits on one line between its gems. */
@media (orientation: portrait) and (max-width: 480px) { .soon { font-size: 24px; } }

/* Short upright screens (phones with the browser's bars): smaller words, so they end
   above the hero's hood and the menu starts below the creature's face. */
@media (orientation: portrait) and (max-height: 760px) {
  .title { gap: 8px; }
  .line { font-size: var(--text); }
  .soon { font-size: 21px; }
}

/* One orchestrated entrance: the logo, then the words, then the menu. */
@media (prefers-reduced-motion: no-preference) {
  .logo, .words, .menu > .btn { animation: rise 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .words { animation-delay: 0.35s; }
  .menu > .btn { animation-delay: 0.7s; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } }
}

@media (prefers-reduced-motion: reduce) {
  .btn::before { animation: none; }
  .loop { transition: none; }
}