/*
 * assets/css/omgx-vfx.css
 * OMGX AI — shared VFX layer + site-wide layout safety.
 * Loaded on every page. Mobile-first.
 *
 * Contains:
 *   1. Ambient canvas layer styles (particles, all pages)
 *   2. Layout safety — nothing escapes the viewport, ever
 *   3. Mobile polish — safe-area insets, touch targets, focus rings
 *
 * Deliberately additive: no existing selector is overridden except
 * where it fixes an overflow or touch-target bug.
 */

/* ═══════════════════════════════════════════════════════════
   1. AMBIENT CANVAS LAYER  (all pages)

   z-index:-1 keeps the canvas behind every in-flow element, so it
   can never paint over text. body::before / body::after also sit at
   -1; the canvas is appended last so it layers just above those
   gradient washes and just below the content.
═══════════════════════════════════════════════════════════ */
.omgx-vfx-ambient {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.omgx-vfx-ambient.is-live { opacity: 1; }

/* Container-scoped layers (chat video + chat panel) */
.omgx-vfx-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .9s ease;
}
.omgx-vfx-layer.is-live { opacity: 1; }

/* Any element hosting a scoped layer must establish a containing block */
.omgx-vfx-host { position: relative; }

/* ═══════════════════════════════════════════════════════════
   2. LAYOUT SAFETY — nothing goes out of view

   These are the guards that stop horizontal scroll and clipped
   content on narrow screens. They are intentionally broad because
   overflow bugs are almost always caused by one of these five things.
═══════════════════════════════════════════════════════════ */

/* Never allow sideways scroll from a stray wide child */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  /* iOS: stop rubber-band horizontal drift */
  overscroll-behavior-x: none;
}

/* Media can never exceed its column */
img, svg, video, canvas, iframe {
  max-width: 100%;
}

/* Long unbroken strings (URLs, emails, IDs) must wrap, not overflow */
p, li, h1, h2, h3, h4, td, dd,
.bubble, .sub, .tag, .line, .card p, footer {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Grid and flex children default to min-width:auto, which is the #1
   cause of blown-out layouts. Let them shrink. */
.cards > *,
.benefits > *,
.hero-merged-grid > *,
.chat-stage > *,
.hero-ctas > * {
  min-width: 0;
}

/* Form controls must respect their container */
input, textarea, select, button {
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   3. MOBILE POLISH
═══════════════════════════════════════════════════════════ */

/* ── Header nav: never let it overflow or wrap awkwardly ── */
@media (max-width: 899px) {
  header {
    /* respect notch / rounded corners */
    padding-left: max(.6rem, env(safe-area-inset-left));
    padding-right: max(.6rem, env(safe-area-inset-right));
    flex-wrap: nowrap;
    gap: .4rem;
  }
  .wordmark {
    flex: 0 0 auto;
    font-size: .82rem;
    letter-spacing: .08em;
  }
  /* Nav becomes a quiet horizontal scroller instead of overflowing.
     Scrollbar hidden — it still swipes. */
  nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    gap: .1rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  nav::-webkit-scrollbar { display: none; }
  nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0 .34rem;
    font-size: .8rem;
  }
}

/* Under 430px the "@omgxai" wordmark in the nav is the first thing to
   sacrifice — keep the X glyph and the verified tick, drop the text. */
@media (max-width: 430px) {
  nav a[href*="x.com"] {
    font-size: 0;          /* hides the text node */
    gap: 0;
    padding: 0 .3rem;
  }
  nav a[href*="x.com"] svg {
    font-size: 1rem;       /* restores normal sizing context */
    margin: 0 !important;
  }
}

/* ── Safe-area padding for the page shell ── */
@media (max-width: 899px) {
  .stage,
  .chat-stage,
  section {
    padding-left:  max(.7rem, env(safe-area-inset-left));
    padding-right: max(.7rem, env(safe-area-inset-right));
  }
  footer {
    padding-left:   max(1rem, env(safe-area-inset-left));
    padding-right:  max(1rem, env(safe-area-inset-right));
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  }
}

/* ── Touch targets: 44px minimum, always ── */
@media (max-width: 899px) {
  nav a,
  .btn,
  .icon-send,
  .fab {
    min-height: 44px;
  }
  /* .audio-toggle is deliberately excluded — it sits over video artwork,
     so it stays visually small and gets its touch area from an invisible
     expanded hit box instead. See omgx-brand.css. */
}

/* Kill the grey flash on tap, keep it feeling native */
a, button, input, textarea, .fab, .audio-toggle, .icon-send {
  -webkit-tap-highlight-color: transparent;
}

/* ── Visible keyboard focus (accessibility + polish) ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgba(61, 107, 255, .8);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Don't show the ring on mouse clicks */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* ── iOS: stop auto-zoom when focusing an input ──
   Any font-size below 16px triggers a zoom on focus. */
@media (max-width: 899px) {
  input, textarea, select {
    font-size: 16px;
  }
}

/* ── Cards and panels: consistent breathing room on phones ── */
@media (max-width: 639px) {
  .card { padding: 1rem; }
  .cards { gap: .8rem; }
  .benefits div { padding: .6rem .55rem; }
}

/* ── Video blocks never crop or bleed on mobile ── */
@media (max-width: 899px) {
  .hero-video-inner video,
  .hero-video-wrap video,
  .video-portrait video {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* ── Reduced motion: no canvas at all ── */
@media (prefers-reduced-motion: reduce) {
  .omgx-vfx-ambient,
  .omgx-vfx-layer {
    display: none !important;
  }
}