/* ---------------------------------------------------------------
   RARE SIGHT — entry film

     one full-screen video -> store

   The opening is a single silent MP4 that already fades to black at
   the end, so the overlay fade below is only a safety blanket for the
   skip path.

   The earlier CRT-plate sequence — plate PNG, clips inside the keyed
   screen hole, canvas glitch, full-screen finale — is preserved
   standalone in ../raresight-tv-intro/ and is not used here.

   NOTE: store.css owns the page. Nothing here sets global html/body
   rules beyond the scroll lock, or it fights the store.
   --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body.is-locked { overflow: hidden; height: 100%; }

/* --- The store underneath ----------------------------------------------- */

.site {
  /* Re-homed from store.css's html/body rules, which had to be stripped
     so they wouldn't fight the scroll lock. */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;                 /* Helvetica Bold throughout */
  color: #000000;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease;
}
.site.is-live { opacity: 1; pointer-events: auto; }

/* --- Entry overlay --------------------------------------------------------- */

.tv {
  position: fixed; inset: 0;
  overflow: hidden;
  background: #050b06;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.9s ease;
}
.tv.is-fading, .tv.is-done { opacity: 0; }
.tv.is-done { pointer-events: none; }

/* --- The film ----------------------------------------------------------------
   Landscape fills the viewport. The master is 16:9, so on portrait it is
   letterboxed rather than cropped — a cover-crop would leave only the middle
   third of the frame, which loses the alien and the television entirely.
   Replace with a 9:16 master and switch to cover when one exists.
   ------------------------------------------------------------------------------- */

.film {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: #000000;
  pointer-events: none;
  user-select: none;
}

@media (max-aspect-ratio: 1/1) {
  .film { object-fit: contain; }
}

/* Keeps the menu legible over whatever frame is playing behind it. */
.entry__scrim {
  position: absolute; inset: 0 0 auto 0;
  height: 190px;
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.28) 45%, rgba(0,0,0,0) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.tv.is-menu .entry__scrim { opacity: 1; }

/* --- Menu overlay ------------------------------------------------------------------
   Hidden until app.js reveals it — cursor move on pointer devices, a timer on
   touch. `hidden` is removed first, then .is-on drives the fade, so there is a
   start state to animate from.
   ------------------------------------------------------------------------------------- */

.entry-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 26px;
  /* matches the store header's 56px bar so the two read as one system */
  height: 56px;
  padding: 0 22px;
  color: #ffffff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;

  /* visibility (not the hidden attribute) so it stays out of the tab order
     while still having a state to transition from — no rAF needed, which
     matters because rAF does not run in a background tab. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s linear 0.55s;
}
.entry-nav.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s;
}

.entry-nav a {
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.92;
  transition: opacity 0.18s ease;
}
.entry-nav a:hover { opacity: 0.6; }
.entry-nav a:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; }

.entry-nav__mark {
  font-size: 15px;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}

.entry-nav__links,
.entry-nav__end {
  display: flex;
  align-items: center;
}
/* categories sit to the right of the mark, utilities pinned to the edge */
.entry-nav__links { gap: 20px; margin-left: auto; }
.entry-nav__end   { gap: 14px; flex: 0 0 auto; }

/* Region pill + icon buttons, same as the store header. */
.entry-nav .region {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  cursor: pointer;
  white-space: nowrap;
  opacity: 0.92;
}
.entry-nav .region:hover { opacity: 0.6; }
.entry-nav .region__flag { font-size: 13px; line-height: 1; }
.entry-nav .region__caret {
  width: 5px; height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.entry-nav .icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  opacity: 0.92;
}
.entry-nav .icon-btn svg {
  width: 19px; height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.entry-nav .icon-btn__count {
  position: absolute;
  right: -4px; bottom: -2px;
  min-width: 14px; height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: #ffffff;
  color: #000000;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  letter-spacing: 0;
}

/* --- SHOP HERE ----------------------------------------------------------------------
   Centred over the film like the reference hero, rather than parked at the
   bottom edge. The title plate the loop ends on leaves the middle clear.
   -------------------------------------------------------------------------------------- */

.entry-cta {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  z-index: 20;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.55s ease, visibility 0s linear 0.55s;
}
.entry-cta.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.55s ease, visibility 0s;
}

.enter {
  display: block;
  padding: 15px 30px;
  background: #ffffff;
  color: #000000;
  border: 0;
  border-radius: 3px;               /* the reference's softened box */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.enter:hover { background: #000000; color: #ffffff; }
.enter:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; }

/* --- Portrait ------------------------------------------------------------------------
   The menu would not survive being squeezed onto one line, so it stacks: mark and
   utilities on the top row, categories scrolling under them.
   ------------------------------------------------------------------------------------- */

@media (max-width: 1080px), (max-aspect-ratio: 1/1) {
  .entry-nav {
    flex-wrap: wrap;
    height: auto;
    gap: 10px 18px;
    padding: 12px 16px;
  }
  .entry-nav__mark { font-size: 14px; }
  .entry-nav__end { margin-left: auto; }
  .entry-nav__links {
    order: 3;
    width: 100%;
    margin: 0;
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .entry-nav__links::-webkit-scrollbar { display: none; }

  .entry__scrim { height: 230px; }
  .enter { padding: 14px 26px; font-size: 11px; }
}

/* Small phones: the mark and the utilities share a row with no scroll
   fallback, so tighten rather than let anything clip off-screen. */
@media (max-width: 460px) {
  .entry-nav { gap: 10px 14px; padding: 12px 14px; font-size: 10px; letter-spacing: 0.06em; }
  .entry-nav__mark { font-size: 13px; }
  .entry-nav__end { gap: 10px; }
  .entry-nav__links { gap: 15px; }
  /* the label would push the icons off; the flag still says which region */
  .entry-nav .region span:not(.region__flag):not(.region__caret) { display: none; }
}

/* --- Reduced motion ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  /* app.js reveals the store immediately in this case; hiding the film too
     stops a stray first frame flashing before the overlay goes. */
  .film { display: none; }
  .tv { transition: none; }
  .site { transition: none; }
}