/* ======================================================
   BASE — Document + Global Page Surface
   ------------------------------------------------------
   01. HTML defaults
   02. Safe-area tokens
   03. Boot gating (splash / prepaint protection)
   04. Body background + typography
   05. Ambient pulse overlay
   06. Element defaults
   ====================================================== */

@layer base{

    /* ======================================================
     01. HTML defaults
     ====================================================== */

  html{
    scrollbar-gutter: stable;
    overflow-anchor: none;
  }

    /* ======================================================
     02. Safe-area tokens (iOS notch / home bar)
     ====================================================== */
  
       :root{
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }


   /* ======================================================
     03. Boot gating (splash / prevent bg image behind splash)
     ------------------------------------------------------
     WHY: Avoid background-image painting behind splash during
          initial boot, preventing flashes / mismatched layers.
     ====================================================== */


  html.is-booting body{
    background-image: none !important;

    /* Provide a stable fallback color (doesn't affect your final bg image) */
    background-color: #0b0f1a !important;
  }

  html.is-booting body::after{
    /* Optional: hide ambient pulse during boot */
    animation: none !important;
    opacity: 0 !important;
  }

   /* ======================================================
     04. Body background + typography
     ====================================================== */

  body{
    margin: 0;
    min-height: 100svh;
    overflow-x: hidden;
    background-color: #0b0f1a;

    /*app background image*/

    background:
      url("../assets/CCNclean.png") center 60%/cover no-repeat fixed;

    background-attachment: scroll;
    /*background-blend-mode: multiply;*/

    color: var(--text);
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

    /* ======================================================
     05. Ambient pulse overlay
     ====================================================== */

  body::after {
      content: "";
      position: fixed;
      inset: 0;
      background: radial-gradient(circle at 50% 42%, rgba(255,255,200,0.05), transparent 70%);
      animation: ambientPulse 8s ease-in-out infinite;
      pointer-events: none;
  }

    /* ======================================================
     06. Element defaults
     ====================================================== */

  img{ max-width:100%; display:block }
  button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

}