/* Home page only. Desktop keeps the hero layout from site.css. On phones the first screen is the reel
   itself: the frame fills the viewport with the headline and the hits as captions, and scrolling past it
   shrinks it away into the normal page. Cuts flash black, red, white like a splice. */

/* ---------- cut transitions (both layouts) ---------- */
.screen { position: relative; }
.screen .cut { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: #000; z-index: 5; }
/* the flash itself is driven from site.js (three inline style steps), so no animation end state can stick */
/* headings: a red slate wipes across, the words land behind it */
.wipe { position: relative; }
.wipe > * { position: relative; }
.wipe::after {
  content: ''; position: absolute; inset: -0.08em -0.12em; background: var(--red);
  transform: scaleX(0); transform-origin: left; pointer-events: none; z-index: 2;
}
.wipe.in::after { animation: slate 0.9s cubic-bezier(0.7, 0, 0.2, 1) forwards; }
@keyframes slate {
  0% { transform: scaleX(0); transform-origin: left; }
  45% { transform: scaleX(1); transform-origin: left; }
  55% { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
.wipe:not(.in) > * { opacity: 0; }
.wipe.in > * { animation: land 0.01s 0.45s both; }
@keyframes land { to { opacity: 1; } }
.wipe.in .k[data-auto] { opacity: 1; }
.wipe.done::after { display: none; }
/* the press section: a white card cut in with a red edge */
.press { position: relative; }
.press::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--red); transform: scaleX(0); transform-origin: left; }
.press.in::before { animation: edge 0.6s cubic-bezier(0.7, 0, 0.2, 1) forwards; }
@keyframes edge { to { transform: scaleX(1); } }

/* ---------- the frame ---------- */
.frame .screen { position: absolute; inset: 0; }
.frame .shot.still { opacity: 0; }
.frame .shot.still.live { opacity: 1; }
.frame .shot.still img { object-position: top; }
.frame .intro, .frame .hint { display: none; }
/* desktop: the frame sits in the middle column whatever the DOM order (phones need it first) */
@media (min-width: 1080px) {
  .hero .frame { grid-column: 2; grid-row: 1; }
  .hero .hero-l { grid-column: 1; grid-row: 1; }
  .hero .hero-r { grid-column: 3; grid-row: 1; }
}

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.8fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.about-grid p { color: var(--gray); font-size: 17px; max-width: 60ch; }
.about-grid p.lead { color: var(--white); }
.facts { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--line); }
.facts li { display: grid; grid-template-columns: 88px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.facts li b { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); padding-top: 3px; }
.facts li a { color: var(--white); }
.facts li a:hover { color: var(--red); }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

/* ---------- shot list on wide screens: four real columns, the caption wraps inside its own ---------- */
@media (min-width: 761px) {
  .shotlist .row { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .shotlist .row .cap .k { white-space: normal; }
}

/* ---------- phones and small tablets ---------- */
@media (max-width: 1079px) {
  .hero { display: block; padding: 0; min-height: 0; }
  /* the first screen is the reel: the frame fills the viewport, the screen covers it edge to edge */
  .frame {
    position: relative; width: 100%; height: 100svh; height: 100dvh;
    border-radius: 0; box-shadow: none; overflow: hidden; background: var(--black);
  }
  .frame .screen {
    position: absolute; left: 50%; top: 50%; right: auto; bottom: auto;
    width: max(100vw, calc(100dvh * 9 / 16)); aspect-ratio: 9 / 16;
    transform: translate(-50%, -50%);
    container-type: size;
  }
  .frame .foot, .frame .meta, .frame .segs { display: none; }
  /* the screen is wider than the phone, so the readouts align to the viewport, not the screen */
  .frame .meta { top: calc(52px + env(safe-area-inset-top)); left: calc(50% - 50vw + 14px); right: calc(50% - 50vw + 14px); }
  .frame .segs { top: calc(44px + env(safe-area-inset-top)); left: calc(50% - 50vw + 14px); right: calc(50% - 50vw + 14px); }
  .frame .cap { top: 60%; font-size: 8.6cqw; }
  .frame .intro .l2 { display: none; }
  /* the headline and the chips sit on the frame; the pitch follows below */
  .frame .intro {
    display: block; position: absolute; left: 16px; right: 16px; bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px)); z-index: 3;
  }
  .frame .intro .watch { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .frame .intro .chip { padding: 9px 13px 8px; font-size: 11px; background: rgba(0, 0, 0, 0.55); }
  .frame .intro .chip .n { display: none; }
  .frame .hint { display: block; margin: 0 0 16px; text-align: center; font-size: 15px; letter-spacing: 0.16em; color: var(--white); animation: bob 1.6s ease-in-out infinite; }
  @keyframes bob { 50% { transform: translateY(-4px); } }
  .frame .tap { bottom: 120px; }
  /* once the reel has been scrolled away, the page is the normal site, full height */
  .hero-l { padding: 56px var(--gutter) 0; text-align: left; max-width: none; }
  .hero-l .watch, .hero-l .tagline { display: none; }
  .hero h1 { font-size: 13vw; }
  .hero-r { padding: 14px var(--gutter) 36px; text-align: left; max-width: none; }
  .hero-r .tagline.alt, .hero-r .watch.alt { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .rail-hint { display: block; text-align: center; margin-top: 10px; }
  .human { text-align: left; }
  .human p { margin-left: 0; }
  /* the contact card is the page, not a box */
  .mailbox { border: 0; border-top: 3px solid var(--black); border-radius: 0; padding: 20px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .screen .cut.go, .wipe.in::after, .press.in::before, .frame .hint { animation: none; }
  .wipe:not(.in) > * { opacity: 1; }
  .press.in::before { transform: none; }
}

/* ---------- socials: one card per account, the name only, the brand color on hover ---------- */
.social-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.social {
  position: relative; display: grid; place-items: center; min-height: 140px;
  padding: 24px 20px; border-radius: 18px; background: var(--panel); color: var(--white); text-decoration: none;
  box-shadow: 0 0 0 1px var(--line); overflow: hidden; isolation: isolate;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s;
}
.social::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1); }
.social::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 100% 0%, var(--brand), transparent 60%); opacity: 0; transition: opacity 0.3s; z-index: -1; }
.social:hover, .social:focus-visible { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--white), 0 24px 50px rgba(0, 0, 0, 0.6); }
.social:hover::before, .social:focus-visible::before { transform: scaleX(1); }
.social:hover::after, .social:focus-visible::after { opacity: 0.35; }
.social .big { font-size: clamp(26px, 2.4vw, 34px); --stroke: 0.1em; text-align: center; }
@media (max-width: 1079px) { .social-grid { grid-template-columns: 1fr 1fr; gap: 14px; } .social { min-height: 110px; padding: 20px 12px; } .social .big { font-size: 22px; } }
@media (max-width: 400px) { .social-grid { grid-template-columns: 1fr; } }

/* suggest a game */
.suggest { display: flex; justify-content: center; margin: 32px 0 0; }
.suggest .btn { background: var(--red); border-color: var(--red); }
.suggest .btn:hover { background: var(--white); border-color: var(--white); color: var(--black); }
/* about: the text and the table start on the same line */
.about-grid > div > p:first-child { margin-top: 0; }
.facts { margin-top: 0; }
/* socials: the name centered whatever its length */
.social .big { display: block; width: 100%; text-align: center; }