/* ================================================================
   THE_WORLD — Mobile Overrides
   ----------------------------------------------------------------
   Two activation paths:
     1. @media (max-width: 768px) / (hover: none) — CSS-only,
        covers viewport-width detection instantly, no FOUC
     2. html.is-mobile — JS UA-string detection (navigator.userAgent)
        catches tablets / phones with non-standard viewports
   ================================================================ */


/* ── SHARED DECLARATIONS (used in both paths below) ─────────────
   Define once as CSS custom properties so both selectors stay DRY */
:root {
  --mob-ui-pad:        1.5rem;
  --mob-hero-title:    clamp(3rem, 16vw, 7rem);
  --mob-hero-sub:      0.7rem;
  --mob-hud:           0.55rem;
  --mob-panel-title:   0.8rem;
  --mob-precision:     clamp(2.2rem, 11vw, 4.5rem);
  --mob-engineered:    clamp(1.6rem, 8vw, 3.5rem);
  --mob-presence:      clamp(1.4rem, 6vw, 2.2rem);
  --mob-follow-label:  1.6rem;
  --mob-follow-us:     5rem;
  --mob-follow-me:     1rem;
  --mob-contact:       1.6rem;
}


/* ================================================================
   PATH 1 — Viewport ≤ 768 px  (pure CSS, no JS required)
   ================================================================ */
@media (max-width: 768px) {

  /* Layout */
  .ui-layer          { padding: var(--mob-ui-pad); }
  .panels-container  { margin-bottom: 1rem; gap: 0; }

  /* Hero */
  .hero-title    { font-size: var(--mob-hero-title); }
  .hero-subtitle { font-size: var(--mob-hero-sub); letter-spacing: 0.25em; margin-top: 0.5rem; }

  /* HUD labels */
  .hud-label { font-size: var(--mob-hud); letter-spacing: 0.1em; }

  /* Panel-group base */
  .panel-group  { flex-direction: column; align-items: stretch; }
  .panel-title  { font-size: var(--mob-panel-title); margin-bottom: 0.5rem; }

  /* ── STATE 1: Identity ────────────────────────────────────── */
  #pg-1 {
    max-width: 100% !important;
    margin-left: 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  #pg-1 .text-hollow {
    padding-bottom: 1rem !important;
    font-size: 2rem !important;
  }
  #pg-1 .text-gradient { font-size: var(--mob-precision) !important; }
  #pg-1 .rigel-text    { font-size: var(--mob-engineered) !important; }

  /* ASCII DIGITAL — scale down for mobile readability */
  #digitalAscii { font-size: 0.45rem !important; }

  /* PRESENCE */
  #presenceText {
    font-size: var(--mob-presence) !important;
    letter-spacing: 0.15em !important;
    margin-top: 0.75rem !important;
  }

  /* CONTACT — touch-friendly */
  #btnContact {
    font-size: var(--mob-contact) !important;
    margin-top: 0.75rem !important;
    margin-right: 0 !important;
    align-self: flex-start !important;
    min-height: 44px;
    min-width: 44px;
  }

  /* ── STATE 2: Manifesto + Follow ─────────────────────────── */
  #pg-2          { flex-direction: column !important; gap: 1.5rem; }
  .pg2-col       { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
  .pg2-col.left  { padding-bottom: 0 !important; }
  .pg2-col.right { align-items: flex-start !important; }

  #pg-2 .pg2-poem-line { white-space: normal !important; }
  .follow-label { font-size: var(--mob-follow-label); }
  .follow-us    { font-size: var(--mob-follow-us); }
  .follow-me    { font-size: var(--mob-follow-me); }

  /* X logo — touch-friendly tap target */
  .twitter-link     { padding: 0.5rem; display: inline-block; }
  .twitter-link img { width: 72px !important; height: 72px !important; }

  /* cv-overlay face box — reposition for portrait */
  .cv-state-1 .box-1,
  .cv-state-3 .box-1 {
    left: 5% !important;
    width: 55vw !important;
  }

  /* PG1 fixed elements — adjust for small screens */
  #pg1-op-label  { right: var(--mob-ui-pad) !important; }
  #pg1-precision { right: var(--mob-ui-pad) !important; }
}


/* ================================================================
   PATH 2 — UA-string detected mobile (html.is-mobile set by JS)
   Covers phones/tablets where viewport > 768 px (landscape iPad etc.)
   ================================================================ */
html.is-mobile .ui-layer          { padding: var(--mob-ui-pad); }
html.is-mobile .panels-container  { margin-bottom: 1rem; gap: 0; }

html.is-mobile .hero-title    { font-size: var(--mob-hero-title); }
html.is-mobile .hero-subtitle { font-size: var(--mob-hero-sub); letter-spacing: 0.25em; margin-top: 0.5rem; }
html.is-mobile .hud-label     { font-size: var(--mob-hud); letter-spacing: 0.1em; }

html.is-mobile .panel-group  { flex-direction: column; align-items: stretch; }
html.is-mobile .panel-title  { font-size: var(--mob-panel-title); margin-bottom: 0.5rem; }

html.is-mobile #pg-1 {
  max-width: 100% !important;
  margin-left: 0 !important;
  align-items: flex-start !important;
  text-align: left !important;
}
html.is-mobile #pg-1 .text-hollow   { padding-bottom: 1rem !important; font-size: 2rem !important; }
html.is-mobile #pg-1 .text-gradient { font-size: var(--mob-precision) !important; }
html.is-mobile #pg-1 .rigel-text    { font-size: var(--mob-engineered) !important; }
html.is-mobile #digitalAscii        { font-size: 0.45rem !important; }

html.is-mobile #presenceText {
  font-size: var(--mob-presence) !important;
  letter-spacing: 0.15em !important;
  margin-top: 0.75rem !important;
}
html.is-mobile #btnContact {
  font-size: var(--mob-contact) !important;
  margin-top: 0.75rem !important;
  margin-right: 0 !important;
  align-self: flex-start !important;
  min-height: 44px;
  min-width: 44px;
}

html.is-mobile #pg-2         { flex-direction: column !important; gap: 1.5rem; }
html.is-mobile .pg2-col      { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
html.is-mobile .pg2-col.left { padding-bottom: 0 !important; }
html.is-mobile .pg2-col.right{ align-items: flex-start !important; }

html.is-mobile #pg-2 .pg2-poem-line { white-space: normal !important; }
html.is-mobile .follow-label { font-size: var(--mob-follow-label); }
html.is-mobile .follow-us    { font-size: var(--mob-follow-us); }
html.is-mobile .follow-me    { font-size: var(--mob-follow-me); }

html.is-mobile .twitter-link     { padding: 0.5rem; display: inline-block; }
html.is-mobile .twitter-link img { width: 72px !important; height: 72px !important; }

html.is-mobile .cv-state-1 .box-1,
html.is-mobile .cv-state-3 .box-1 {
  left: 5% !important;
  width: 55vw !important;
}

/* PG1 fixed elements — adjust for small screens */
html.is-mobile #pg1-op-label  { right: var(--mob-ui-pad) !important; }
html.is-mobile #pg1-precision  { right: var(--mob-ui-pad) !important; }


/* ================================================================
   PERFORMANCE — disable GPU-heavy filters on touch devices
   @media (hover:none) catches all touch screens via CSS
   html.is-mobile catches UA-string detected devices
   ================================================================ */
@media (hover: none) {
  .hero-title                  { filter: none; }
  #pg-1 .text-gradient         { filter: none !important; }
  #digitalAscii                { filter: none !important; }
  #pg-2 .pg2-poem-line         { filter: none !important; }
  #psCanvas                    { display: none !important; }
  .dither-overlay              { opacity: 0.15; }
}

html.is-mobile .hero-title          { filter: none; }
html.is-mobile #pg-1 .text-gradient { filter: none !important; }
html.is-mobile #digitalAscii        { filter: none !important; }
html.is-mobile #pg-2 .pg2-poem-line { filter: none !important; }
html.is-mobile #psCanvas            { display: none !important; }
html.is-mobile .dither-overlay      { opacity: 0.15; }