/* 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). */

/* The corner sits low on wide screens, so its tips show above it. */
.corner { --tip-top: auto; --tip-bottom: calc(100% + 6px); }

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

/* 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: 4px 0;
    max-width: none;
    padding-top: max(14px, env(safe-area-inset-top));
  }
  .logo { width: min(32vw, 230px, 40svh); }
  .gem { display: none; }
  .logo, .words { grid-column: 1; max-width: min(40vw, 360px); }   /* the words end before the hero's hood */
  .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: 190px; }   /* one width, one right edge */
  .menu > .night ~ .night { grid-row: 3; align-self: end; }   /* the lore plate stands above X */
  .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)); --tip-top: calc(100% + 6px); --tip-bottom: auto; }
}

@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 under the
   creature's feet (the Discord pill, then X and the lore side by side), the corner controls in the top
   corners beside the logo, and the copyright line just below the first screen. */
@media (orientation: portrait) {
  /* The art sits low, so the grass is under the menu. */
  :root { --focus-y: 100%; --screen: max(100svh, 560px); }
  .stage { min-height: 0; grid-template-rows: var(--screen) auto; }
  .backdrop { bottom: auto; height: var(--screen); 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, var(--night-dark) 0%, rgb(26 30 54 / 0.6) 12%, transparent 22%);
  }
  .title {
    align-items: center;
    max-width: none;
    padding: var(--edge-t) var(--edge-r) 12px var(--edge-l);
    text-align: center;
  }
  /* Clear of the two corner buttons on either side. */
  .logo { margin: 0; width: min(78vw, 460px, 36svh, 100vw - 2 * (var(--edge-r) + 64px)); }
  .words { align-items: center; }
  .soon { justify-content: center; }
  .menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: auto;
    width: min(100%, 400px);
    min-width: 0;
  }
  .menu > .pill { grid-column: 1 / -1; justify-self: center; min-width: 78%; }
  .menu > .night { height: 44px; padding: 0 12px 3px; font-size: 24px; }
  .menu > .night:active { padding: 6px 12px 0; }
  .menu > .night::before { display: none; }   /* no cursor beside the narrow pair */
  .foot { padding: 14px var(--edge-r) var(--edge-b) var(--edge-l); text-align: center; }
  .corner { top: var(--edge-t); bottom: auto; left: var(--edge-l); right: var(--edge-r); justify-content: space-between; pointer-events: none;
    --tip-top: calc(100% + 6px); --tip-bottom: auto; }
  .corner .ctl { pointer-events: auto; }
  .corner .music { --tip-left: 0; --tip-right: auto; }
}

/* 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. */
@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; }
}