/* ==========================================================================
   Mall Security — Homepage-specific styles (index.html only)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll-snap container
   -------------------------------------------------------------------------- */
html, body {
  height: 100%;
  overflow: hidden; /* let #snap-root do the scrolling */
}

/* #bezel stays a plain (non-scrolling) housing on the homepage —
   scroll-snap targets must be DIRECT children of the snap container,
   and .snap-section lives inside #screen, not #bezel. So #screen is
   the actual scroll container here (it also carries the CRT filter). */
#bezel {
  height: 100dvh;
  overflow: hidden;
}

/* #screen IS the scroll container on the homepage */
#screen {
  height: 100dvh;
  min-height: 0;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth; /* ease the snap between hero + menu instead of a hard jump */
  -webkit-overflow-scrolling: touch; /* smooth momentum on iOS */
}

@media (prefers-reduced-motion: reduce) {
  #screen { scroll-behavior: auto; }
  .menu-sub-wrap,
  .menu-item--has-sub,
  .menu-item-caret { transition: none !important; }
}

/* Each section snaps — now a direct child of the #screen snap container */
.snap-section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: 100dvh;
  width: 100%;
  position: relative;
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   Hero section
   -------------------------------------------------------------------------- */
#hero-section {
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Background video */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

/* Static fallback — hatched dark texture, shown when video is absent */
.hero-bg-fallback {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(255,255,255,0.015) 3px,
      rgba(255,255,255,0.015) 4px
    ),
    linear-gradient(160deg, #0a0a0a 0%, #050505 100%);
}

/* Hide video on mobile — show only static image/bg to save bandwidth */
@media (max-width: 640px) {
  .hero-bg video { display: none; }
}

/* --------------------------------------------------------------------------
   Hero header / wordmark
   -------------------------------------------------------------------------- */
.hero-header {
  position: relative;
  z-index: 10;
  padding: 1.5rem 1.5rem 0;
  width: 100%;
}

.hero-wordmark-link {
  display: block;
  width: 100%;
}

.hero-wordmark {
  display: block;
  width: 100%;
  height: auto;
  /* The SVG has dark (#231f20) paths on transparent — invert for white on dark */
  filter: invert(1) brightness(1.05);
}

/* --------------------------------------------------------------------------
   CCTV HUD overlay on hero
   -------------------------------------------------------------------------- */
.hero-hud {
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  padding: 1rem 1.25rem;

  /* Grid layout: four corners */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: start;
}

.hud-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.55);
  line-height: 1;
}

.hud-tl { justify-self: start; align-self: start; }
.hud-tr { justify-self: end;   align-self: start; }
.hud-bl { justify-self: start; align-self: end;   color: rgba(255,80,80,0.7); }
.hud-br { justify-self: end;   align-self: end;   }

/* --------------------------------------------------------------------------
   Scroll cue (bouncing chevron)
   -------------------------------------------------------------------------- */
@keyframes bounce-down {
  0%, 100% { transform: translateY(0); opacity: 0.8; }
  50%       { transform: translateY(8px); opacity: 1; }
}

.scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  animation: bounce-down 1.8s ease-in-out infinite;
  transition: color 0.15s;
}

.scroll-cue:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Menu / boot-screen section
   -------------------------------------------------------------------------- */
.menu-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4rem 1.5rem;
  background: var(--bg);
  gap: 2rem;
  position: relative;
}

/* Fine-grain background texture for menu screen */
.menu-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(255,255,255,0.012) 3px,
      rgba(255,255,255,0.012) 4px
    );
  z-index: 0;
}

/* HUD overlay for menu screen */
.menu-hud {
  position: absolute;
  inset: 0;
  padding: 1.25rem 1.5rem;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
}

.menu-hud-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* Monogram */
.menu-ident {
  position: relative;
  z-index: 2;
  opacity: 1;
}

.menu-monogram {
  height: 80px;
  width: auto;
  filter: invert(1);
}

/* Nav list — shrink-wrapped to its content's natural width so left-aligned
   text isn't stranded inside a wider centered box (which read as "off to
   the left" even though the box itself was centered).

   NOTE: this width is now measured from the top-level labels ONLY. The
   collapsed sub-menus used to count toward it, which made every row as
   wide as "YOUTUBE [COMING SOON]". See the .menu-sub-wrap width:0 /
   min-width:100% rule at the bottom of this file for how that is excluded.
   Consequence: open sub-items extend past the row's right edge instead of
   the box being pre-sized to fit them. */
.menu-nav {
  position: relative;
  z-index: 2;
  width: max-content;
  max-width: 90vw;
}

.menu-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0;
  min-height: 32px;
  font-family: var(--font-mono);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: normal;
  color: #fff;
  cursor: pointer;
  outline: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color 0.1s;
  position: relative;
  user-select: none;
}

.menu-item:first-child { border-top: 1px solid rgba(255,255,255,0.05); }

/* Items with a sub-menu (MUSIC): let the sub-wrap wrap onto its own line
   below the caret + label instead of sitting beside them as a flex sibling
   (which is what pushed it out to the right, overlapping other rows). */
.menu-item--has-sub {
  flex-wrap: wrap;
  align-items: flex-start;
  /* .menu-item's `gap` is meant as column-gap (caret ↔ label). Once this
     item wraps onto two lines (label line + sub-menu line), that same
     gap also becomes a row-gap between the lines — adding 12px even
     while the sub-menu is collapsed to 0. Zero it out here. */
  row-gap: 0;
  transition: padding-bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-item--has-sub > .menu-sub-wrap {
  flex-basis: 100%;
}

.menu-item--has-sub.is-open {
  padding-bottom: 0.75rem;
}

.menu-item-caret {
  font-size: 0.6em;
  opacity: 0;
  color: var(--accent);
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}

/* Active / focused state */
.menu-item--active,
.menu-item:hover,
.menu-item:focus-visible {
  color: var(--accent);
}

/* Direct-child selectors only. With descendant selectors, an active or
   hovered parent row (e.g. MUSIC) also matched the carets inside its own
   sub-menu, so every sub-item showed an arrow at once. */
.menu-item--active > .menu-item-caret,
.menu-item:hover > .menu-item-caret,
.menu-item:focus-visible > .menu-item-caret {
  opacity: 1;
}

/* But if a MUSIC sub-item is the thing actually being hovered/focused,
   the arrow + accent color should follow it — not stay stuck on MUSIC.
   :hover bubbles up to the parent li, so without this override both
   MUSIC and the sub-link would light up together. This wins on
   specificity (and is declared after the rules above) so it takes
   the parent back to its resting state whenever a sub-link, and not
   the parent row itself, is what's under the pointer/focus. */
.menu-item--has-sub:has(.menu-sub-link:hover),
.menu-item--has-sub:has(.menu-sub-link:focus-visible) {
  color: #fff;
}

.menu-item--has-sub:has(.menu-sub-link:hover) > .menu-item-caret,
.menu-item--has-sub:has(.menu-sub-link:focus-visible) > .menu-item-caret {
  opacity: 0;
}

/* Focus visible override — bold enough through filter */
.menu-item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* Sub-menu wrap (MUSIC platforms) — grid-rows trick animates a
   variable-height list open/closed without needing JS to measure it. */
.menu-sub-wrap {
  display: grid;
  /* minmax(0, 0fr) — NOT plain 0fr. A bare 0fr track keeps the grid's
     implicit content-based minimum, so it never actually reaches 0px
     (this was the cause of the uneven gap under MUSIC). minmax(0, ...)
     overrides that minimum explicitly. */
  grid-template-rows: minmax(0, 0fr);
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-item--has-sub.is-open > .menu-sub-wrap {
  grid-template-rows: minmax(0, 1fr);
}

.menu-sub {
  list-style: none;
  padding-left: 1.75rem;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow: hidden;
  min-height: 0;
}

.menu-sub-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: normal;
  color: #fff;
  padding: 0.2rem 0;
  min-height: 28px;
  outline: none;
  transition: color 0.12s;
}

.menu-sub-link:hover,
.menu-sub-link:focus-visible {
  color: var(--accent);
  text-decoration: none;
}

.menu-sub-link:hover .menu-item-caret,
.menu-sub-link:focus-visible .menu-item-caret {
  opacity: 1;
}

.menu-sub-link:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* Mailing list in menu section — pinned to the bottom of the viewport
   instead of sitting in the centered flex flow
   right under the nav list. */
.menu-mailing-list {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 100%;
  max-width: 420px;
  padding: 0 1.5rem;
}

.menu-mailing-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   Responsive — menu section
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .menu-screen {
    padding: 3.5rem 1.25rem 2.5rem;
    gap: 1.5rem;
  }

  .menu-ident { display: none; }

  /* On short/mobile viewports, pinning to the bottom risks overlapping
     the nav list — fall back to sitting in normal flow like it used to. */
  .menu-mailing-list {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    padding: 0;
  }
}

/* --------------------------------------------------------------------------
   "Coming soon" state for menu sub-items (currently: YouTube)
   Rendered as a <span>, not an <a>, so it is not focusable or clickable.
   Remove this rule set once every platform is live.
   -------------------------------------------------------------------------- */
.menu-sub-link--soon {
  color: rgba(255, 255, 255, 0.32);
  cursor: default;
}

.menu-sub-link--soon:hover,
.menu-sub-link--soon:focus-visible {
  color: rgba(255, 255, 255, 0.32);
  box-shadow: none;
}

.menu-sub-link--soon .menu-item-caret {
  opacity: 0;
}

.soon-tag {
  font-size: 0.72em;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.28);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Menu width
   .menu-nav is width:max-content, but a collapsed .menu-sub-wrap still
   contributes its content width to that calculation — so "APPLE MUSIC" and
   "YOUTUBE [COMING SOON]" were setting the width of every row even while
   hidden. Taking the sub-wrap out of the intrinsic width (width:0) while
   still letting it render at full row width (min-width:100%) means the rows
   size to the longest top-level label instead: CONTACT.
   -------------------------------------------------------------------------- */
.menu-item--has-sub > .menu-sub-wrap {
  width: 0;
  min-width: 100%;
}

/* Sub-items stay on one line and simply extend past the row's right edge
   while an accordion is open, rather than wrapping into ragged two-line
   entries. */
.menu-sub-link {
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Menu fixes
   -------------------------------------------------------------------------- */

/* Caret vertical centering on rows that can wrap (MUSIC, SOCIALS).
   .menu-item--has-sub sets align-items:flex-start so the sub-menu wraps
   below the label — that also pinned the caret to the top of the row.
   align-self restores centering for the caret itself only. */
.menu-item--has-sub > .menu-item-caret {
  align-self: center;
}

/* Sub-menu items must not be clipped horizontally.
   .menu-sub needs overflow:hidden for the grid-rows open/close animation,
   but that also cropped anything wider than the row. Switching to
   content-box and adding a wide right padding pushes the clipping edge far
   off to the right, while the matching negative margin keeps the element's
   layout width unchanged — so long labels simply trail off to the right
   and the menu never shifts left/right when an accordion opens. */
.menu-sub {
  box-sizing: content-box;
  padding-right: 60vw;
  margin-right: -60vw;
}