/* ===========================
   Global / Base
   =========================== */

   :root {
    --bg: #090909;
    --fg: #FFD700;
    --hint-opacity: .95;
    --transition-fast: .2s ease;
    --transition-med: .35s ease;
  
    --font-primary: "dharma-gothic-e", sans-serif;
    --font-secondary: "dulcinea", serif;
  
    /* Known nav heights */
    --nav-h: 86px;          /* desktop default */
  }
  
  @media (max-width: 768px) {
    :root { --nav-h: 63px; } /* mobile */
  }
  
  *,
  *::before,
  *::after { box-sizing: border-box; }
  
  html, body { height: 100%; }
  
  body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* ===========================
     Boot splash (hide content until ATF is ready)
     =========================== */
  #bootSplash {
    position: fixed;
    inset: 0;
    height: 100dvh;                 /* dynamic viewport height */
    background: var(--bg);
    z-index: 10000;
  }
  .is-booting { overflow: hidden; }
  

  /* ===========================
     HERO / ATF SECTION
     - Height = dynamic viewport - known nav height
     =========================== */
  #hero {
    position: relative;
    width: 100%;
    height: calc(100dvh - var(--nav-h));
    /* IMPORTANT: no min-height here, or subtraction gets blocked */
    overflow: hidden;
    background: var(--bg);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  
  /* Fallback if dvh unsupported */
  @supports not (height: 100dvh) {
    #hero { height: calc(100vh - var(--nav-h)); }
    #bootSplash { height: 100vh; }
  }
  
  /* Ensure the p5 canvas fills the hero area it’s parented into */
  #hero canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* ===========================
     Mobile Permission Gate (scoped to hero)
     =========================== */
  .gate {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--bg);
    z-index: 5;
    transition: opacity var(--transition-med);
  }
  .gate.hidden { display: none; }
  .gate.fade   { opacity: 0; pointer-events: none; }
  
  .gate-btn {
    background: transparent;
    color: var(--fg);
    border: 2px solid var(--fg);
    border-radius: 999px;
    padding: 14px 28px;
    font: 700 16px/1.1 var(--font-primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .05s ease, opacity var(--transition-fast);
  }
  .gate-btn:active { transform: translateY(1px); }
  .gate-btn:focus-visible {
    outline: 2px dashed var(--fg);
    outline-offset: 4px;
  }
  
  /* ===========================
     Hints (scoped to hero)
     =========================== */
  .hidden { display: none !important; }
  
  .hint {
    position: absolute;  /* important: lives inside hero */
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-med);
    -webkit-user-drag: none;
    user-select: none;
    image-rendering: -webkit-optimize-contrast;
  }
  .hint.hint--visible { opacity: var(--hint-opacity); }
  .hint.fade         { opacity: 0; }
  
  #mobileHint {
    left: 50%;
    bottom: 2%;
    transform: translateX(-50%);
    width: 64px;
    height: auto;
  }
  #desktopHint {
    left: 50%;
    bottom: 2%;
    transform: translateX(-50%);
    width: 72px;
    height: auto;
  }
  /* Perfect horizontal center on phones & everywhere */
  #arrowHint {
    right: 0;
    left: 0;
    margin-inline: auto;
    bottom: 3%;
    width: 36px;
    height: auto;
  }
 
  /* ===========================
     Accessibility
     =========================== */
  @media (prefers-reduced-motion: reduce) {
    .hint,
    .gate { transition: none !important; }
  }
  
  /* ===========================
     Responsive
     =========================== */
  @media (max-width: 360px) {
    #mobileHint { width: 56px; }
    #desktopHint { width: 64px; }
    #arrowHint { width: 32px; }
  }
  @media (min-width: 768px) {
    #desktopHint { width: 80px; }
  }
  @media (min-width: 1280px) {
    #desktopHint { width: 88px; }
    #arrowHint   { width: 40px; }
  }