/* ============================================================================
   IMPOSSIBLE MOMENTS — MOBILE "WOAH" EXPERIENCE LAYER
   ----------------------------------------------------------------------------
   Additive only. Loaded on BOTH the marketing site (index.html) and the
   data room (dataroom/index.html). Marketing rules are gated to <=820px, where
   the desktop nav hides; data-room rules are gated to <=768px.
   !important is used to beat the heavy inline styles on the dc-rendered markup.
   CSS alone (JS off) must still yield a complete, scrollable, readable site.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   JS-CREATED ELEMENTS — hidden by default so they never leak onto desktop or
   appear unstyled if the viewport is resized above the mobile breakpoint.
   --------------------------------------------------------------------------- */
.me-nav-toggle,
.me-progress,
.me-overlay { display: none; }

/* Reveal utility classes (added by JS only on mobile). Transform-only so a
   stranded element is at most shifted 26px, never invisible. */
.me-stagger { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.me-in { transform: none; }

/* "Lights up as you arrive" wash on a section's backdrop layer. Opacity only,
   resolves to 1, so a missed frame can never hide a background. */
@keyframes meWash { 0% { opacity: .78; } 100% { opacity: 1; } }
.me-arrive-wash { animation: meWash 1.1s ease forwards; }

/* Data-room bottom-sheet scrim (created by JS on mobile when the panel opens) */
.me-sheet-scrim {
  position: fixed; inset: 0; z-index: 150;
  background: radial-gradient(ellipse 80% 60% at 50% 80%, rgba(191,154,74,0.06), transparent 70%), rgba(6,5,4,0.62);
  opacity: 0; transition: opacity .3s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.me-sheet-scrim.open { opacity: 1; }

/* ============================================================================
   SITE — MOBILE FLIP  (<= 820px)
   ============================================================================ */
@media (max-width: 820px) {

  section[data-screen-label] {
    min-height: 100svh;
    padding: 96px 22px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  section[data-screen-label] h2,
  section[data-screen-label="Closing"] p[style*="font-size:clamp(2.1rem"] {
    font-weight: 650 !important;
  }

  #category,
  #genesis,
  #infrastructure,
  #format,
  #conviction,
  #model,
  #leadership,
  #raise {
    min-height: auto;
    justify-content: flex-start;
    padding-top: 88px !important;
    padding-bottom: 72px !important;
  }

  /* Single-column rhythm for every multi-column block */
  #category [style*="grid-template-columns"],
  #infrastructure [style*="grid-template-columns"],
  #format [style*="grid"],
  #model [style*="grid"],
  #leadership [style*="grid"],
  #raise [style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Markers wrap & center instead of clipping (replicates the 600px rule) */
  .im-marker {
    flex-wrap: wrap !important;
    justify-content: center !important;
    max-width: 100% !important;
    row-gap: 6px;
    font-size: 0.6rem !important;
    letter-spacing: 0.18em !important;
  }
  .im-marker__text { white-space: normal !important; }

  #top > div[style*="bottom:38px"] {
    left: 18px !important;
    right: 18px !important;
    bottom: 28px !important;
    row-gap: 8px !important;
  }

  /* Shrink the fixed dc header so the logo + Data Room button always survive */
  header:not(.dr-header) { padding: 12px 18px !important; }
  /* The injected hamburger owns the top-right corner on mobile — hide the
     header's Data Room button so two controls don't collide (Data Room also
     lives in the overlay menu). Keep the wordmark logo. */
  header:not(.dr-header) > *:last-child { display: none !important; }

  /* ---- BRIGHTEN-IN-PLACE ----------------------------------------------------
     The desktop pass already inserted the real z-index:0 <img> layers and the
     correct <img> src for every image section, and those render on mobile too.
     Here we ONLY re-grade the inherited image + scrim for the brighter,
     image-forward panel feel. No duplicate pseudo-backgrounds are injected. */

  /* HERO (#top) — video hero, eased vignette */
  #top > div[style*="radial-gradient"] {
    background: radial-gradient(ellipse 80% 80% at 50% 46%, rgba(10,9,8,.35) 0%, rgba(10,9,8,.7) 62%, rgba(6,6,6,.9) 100%) !important;
  }

  /* CATEGORY (#category) — ILM stage */
  #category img { filter: saturate(1.05) brightness(.9) !important; }
  #category > div:first-child > div { background: linear-gradient(rgba(10,7,6,.55), rgba(10,7,6,.78)) !important; }

  /* INFRASTRUCTURE (#infrastructure) — LED volume stage */
  #infrastructure img { filter: grayscale(.3) contrast(1.05) brightness(.9) !important; }
  #infrastructure > div:first-child > div { background: linear-gradient(rgba(10,7,6,.62), rgba(10,7,6,.85)) !important; }

  /* CONVICTION (#conviction) — crowd shot (src set by desktop pass) */
  #conviction img { opacity: .6 !important; filter: grayscale(.25) contrast(1.08) brightness(1) !important; }
  #conviction > div:first-child > div { background: linear-gradient(rgba(6,6,6,.45), rgba(6,6,6,.82)) !important; }

  /* FORMAT — keep image cards cinematic without oversized crops. */
  #format [style*="height:340px"][style*="background-image"] {
    height: auto !important;
    aspect-ratio: 1 / 0.86;
    min-height: 260px;
    background-position: center 20% !important;
  }
  #format [style*="font-size:5rem"] {
    font-size: clamp(3rem, 16vw, 4.8rem) !important;
    margin-bottom: 0.08em !important;
  }
  #format button[onclick],
  #format button[onClick] {
    min-height: 44px !important;
    padding: 0 2px !important;
    transition: color .3s var(--im-ease), opacity .3s var(--im-ease), transform .2s var(--im-ease) !important;
  }
  #format button[onclick]:focus-visible,
  #format button[onClick]:focus-visible,
  .me-nav-toggle:focus-visible {
    outline: 1px solid rgba(203,167,94,0.72);
    outline-offset: 4px;
  }
  #format button[onclick]:active,
  #format button[onClick]:active,
  .me-nav-toggle:active {
    transform: scale(0.96);
  }

  /* LOCATION / RAISE — desktop-inserted media layers; micro-lift only */
  #location > div:first-child > div,
  #raise > div:first-child > div { filter: brightness(1.05); }

  /* LOCATION — drop the redundant framed thumbnail on phones (full-bleed aerial
     + the site marker carry the section) */
  #location .im-frame { display: none !important; }
  .im-land-photo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .im-land-photo-thumb {
    width: auto;
    min-height: 44px;
    padding: 0 18px;
    background: rgba(10,9,8,0.38) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,0.32), inset 0 0 0 1px rgba(255,255,255,0.08);
  }
  .im-land-photo-thumb span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: auto;
    padding: 0;
    background: transparent;
    color: var(--im-gilt-100);
  }

  /* CLOSING — re-grade the high-res fire for portrait; clear the wordmark */
  section[data-screen-label="Closing"] video { object-position: center 30% !important; }
  section[data-screen-label="Closing"] > div[style*="radial-gradient"] {
    background: linear-gradient(180deg, rgba(10,7,6,.35) 0%, rgba(10,7,6,.5) 45%, rgba(10,7,6,.9) 100%) !important;
  }
  section[data-screen-label="Closing"] p[style*="font-serif"] {
    color: var(--im-ivory-200) !important;
    margin: 0 0 clamp(28px,9vw,56px) !important;
    font-size: 1.18rem !important;
  }
  section[data-screen-label="Closing"] .im-neon {
    font-size: clamp(3rem,19vw,5.5rem) !important;
    line-height: .9 !important;
  }

  /* ---- STAGGERED-REVEAL CASCADE (delays applied per-element by JS) ---------- */
  /* translateY lives INSIDE the breakpoint so the reveal never affects desktop */
  .me-stagger { transform: translateY(26px); transition: transform .6s cubic-bezier(.2,.7,.2,1); }

  /* ===========================================================================
     MOBILE NAV — distinct, appended to <body> (survives dc re-renders)
     Sits below #im-site-gate (2147483000); uses 2147482000.
     =========================================================================== */
  .me-progress {
    display: block;
    position: fixed; top: 0; left: 0; height: 2px; width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    z-index: 2147481000;
    background: linear-gradient(90deg, rgba(191,154,74,0.4), #BF9A4A);
    box-shadow: 0 0 10px rgba(191,154,74,0.5);
    pointer-events: none;
    transition: transform .1s linear;
  }

  .me-nav-toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px;
    position: fixed; top: 10px; right: 14px;
    width: 44px; height: 44px;
    z-index: 2147481500;
    background: rgba(10,9,8,0.5);
    border: 1px solid rgba(191,154,74,0.45);
    border-radius: 2px;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    cursor: pointer; padding: 0;
    transition: border-color .3s ease, background .3s ease, transform .2s ease, box-shadow .3s ease;
  }
  .me-nav-toggle:hover {
    background: rgba(18,15,12,0.72);
    border-color: rgba(203,167,94,0.72);
    box-shadow: 0 0 18px rgba(191,154,74,0.12);
  }
  .me-nav-toggle span {
    display: block; width: 20px; height: 1.5px;
    background: #BF9A4A;
    transition: transform .35s ease, opacity .3s ease;
  }
  .me-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .me-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .me-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .me-overlay {
    display: flex;
    position: fixed; inset: 0;
    z-index: 2147482000;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: clamp(10px, 2.8vh, 24px);
    padding: 0 max(28px, 9vw);
    background:
      radial-gradient(ellipse 90% 60% at 70% 20%, rgba(191,154,74,0.12), transparent 65%),
      rgba(10,9,8,0.97);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden;
    transition: opacity .38s ease, visibility .38s ease;
  }
  .me-overlay.open { opacity: 1; visibility: visible; }

  .me-overlay .me-overlay-kicker {
    font-family: 'Google Sans Flex', ui-sans-serif, system-ui, sans-serif;
    font-size: 0.62rem; letter-spacing: 0.34em; text-transform: uppercase;
    color: #9C9387; margin-bottom: 6px;
  }
  .me-overlay a {
    font-family: var(--im-font-display, 'Google Sans Flex'), ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(1.55rem, 9vw, 2.75rem);
    line-height: 1.02;
    letter-spacing: 0.01em;
    color: #E7DFD2;
    text-decoration: none;
    opacity: 0; transform: translateX(-14px);
    transition: opacity .42s ease, transform .42s ease, color .3s ease;
  }
  .me-overlay a:active { color: #BF9A4A; }
  .me-overlay.open a { opacity: 1; transform: none; }
  .me-overlay.open a:nth-child(2) { transition-delay: .08s; }
  .me-overlay.open a:nth-child(3) { transition-delay: .14s; }
  .me-overlay.open a:nth-child(4) { transition-delay: .20s; }
  .me-overlay.open a:nth-child(5) { transition-delay: .26s; }
  .me-overlay.open a:nth-child(6) { transition-delay: .32s; }
  .me-overlay.open a:nth-child(7) { transition-delay: .38s; }
  .me-overlay.open a:nth-child(8) { transition-delay: .44s; }
  .me-overlay.open a:nth-child(9) { transition-delay: .50s; }
  .me-overlay.open a:nth-child(10) { transition-delay: .56s; }
  .me-overlay.open a:nth-child(11) { transition-delay: .62s; }
  .me-overlay a.me-overlay-pdf { color: #EAF1F8; }
  .me-overlay a.me-overlay-dr { color: #BF9A4A; font-style: italic; }
}

/* ---- REDUCED MOTION (site): snap off, instant reveals, no wash -------------- */
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .me-stagger { transform: none !important; transition: none !important; }
  .me-arrive-wash { animation: none !important; }
  .me-overlay, .me-overlay a, .me-progress { transition: none !important; }
}

/* ============================================================================
   DATA ROOM — MOBILE FLIP  (<= 768px)
   Preserves every id, Supabase call, gate flow, the MOMENTS password (never
   printed), and all document / FAQ content. CSS-only — JS adds the sheet scrim.
   ============================================================================ */
@media (max-width: 768px) {

  /* ---- GATES (#passwordGate / #emailGate) — cinematic image backdrop -------- */
  .gate { position: fixed; inset: 0; overflow: hidden; }
  .gate::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background: url('/abba-voyage-stage.png') center/cover no-repeat;
    opacity: .32; filter: grayscale(.4) brightness(.7);
  }
  .gate::after {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background:
      radial-gradient(ellipse 70% 60% at 50% 42%, rgba(191,154,74,.12), transparent 70%),
      linear-gradient(rgba(10,9,8,.6), rgba(10,9,8,.92));
  }
  .gate-inner { position: relative; z-index: 1; }
  .gate-title { font-size: clamp(2.4rem, 13vw, 3.4rem) !important; }
  .gate-input, .gate-btn { font-size: 1.05rem !important; padding: 1rem !important; }
  .gate-input, .gate-input-email { width: min(340px, 80vw) !important; }
  .gate-btn { letter-spacing: 0.22em; }

  /* ---- HEADER (align with the data-room 768px bottom-sheet breakpoint) ------- */
  .dr-header { padding: 1rem 1rem; flex-wrap: wrap; gap: 0.5rem; }
  .dr-main { padding-top: 108px !important; }
  .dr-user-email { display: none; }
  .dr-admin-btn, .dr-logout-btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }

  /* ---- DOCUMENT CARDS — bigger, tappable ----------------------------------- */
  .dr-file-grid { grid-template-columns: 1fr; gap: 14px !important; }
  .dr-file-card {
    display: grid !important;
    grid-template-rows: auto auto;
    padding: 1.5rem !important;
    border-radius: 14px !important;
    min-height: 150px;
  }
  .dr-file-icon { width: 64px !important; height: 64px !important; font-size: 1.1rem !important; }
  .dr-file-name { font-size: 1.25rem !important; line-height: 1.2; }
  .dr-file-card:active { transform: scale(.96); }

  /* ---- PREVIEW PANEL (existing bottom-sheet) — larger, easier targets ------- */
  .dr-panel { max-height: 90svh; }
  .dr-panel-close { width: 40px !important; height: 40px !important; font-size: 1.2rem !important; }
  .dr-panel-preview { padding: 2.4rem 1.5rem !important; min-height: 300px; }
  .dr-panel-preview img { max-height: 360px !important; }
  .dr-download-btn { padding: 1.2rem 2rem !important; }

  /* ---- FAQ — readable, tappable -------------------------------------------- */
  .dr-section-title { font-size: clamp(2rem, 9vw, 2.6rem) !important; }
  .dr-faq-question { padding: 1.3rem 0 !important; font-size: 1.12rem !important; min-height: 56px; }
  .dr-faq-arrow { font-size: 1.5rem !important; }
  .dr-faq-answer { font-size: 1.02rem !important; line-height: 1.7; }
  .dr-faq-item.open .dr-faq-answer { max-height: 1400px; }
  .dr-faq-search { padding: 1rem !important; font-size: 1rem !important; }
}