/* canon.css — GLOBAL CANON STYLES (shared across all pages) */

:root{
  --bg0:#000;
  --ink:#070b10;

  --text:#e9eef6;
  --muted:rgba(233,238,246,.78);
  --dim:rgba(233,238,246,.62);
  --line:rgba(255,255,255,.10);
  --red:#ff2b2b;

  /* buoy placement (canon) */
  --buoy-size: cover;
  --buoy-x: 50%;
  --buoy-y: 1svh;

  /* brightness tuning */
  --vignette-opacity: .86;          /* desktop/tablet */
  --vignette-opacity-mobile: .58;   /* phones */
  --buoy-bloom-a: .12;              /* red aura strength */
  --buoy-bloom-b: .08;
}

/* ===== CANON: WORLD BACKGROUND LAYERS ===== */
.world, .vignette{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* World: buoy photo + batcave overlays */
.world{
  background:
    /* red beacon bloom (subtle) */
    radial-gradient(780px 520px at 58% 62%, rgba(255,43,43,var(--buoy-bloom-a)), transparent 72%),
    radial-gradient(900px 680px at 58% 78%, rgba(255,43,43,var(--buoy-bloom-b)), transparent 74%),

    /* faint water / haze texture */
    radial-gradient(1100px 800px at 18% 20%, rgba(255,255,255,.05), transparent 62%),
    radial-gradient(1100px 800px at 82% 30%, rgba(255,255,255,.04), transparent 64%),

    /* BUOY (ABSOLUTE PATH) */
    url("/assets/buoy_v10.png") var(--buoy-x) var(--buoy-y) / var(--buoy-size) no-repeat,

    /* extra lift so buoy reads through copy */
    radial-gradient(820px 620px at 50% 44%, rgba(255,43,43,.18), transparent 70%),
    radial-gradient(700px 520px at 50% 52%, rgba(255,255,255,.06), transparent 72%),

    /* hard black base */
    linear-gradient(180deg, #000, #000);

  /* iOS Safari: DO NOT use background-attachment: fixed */
  background-attachment: scroll;
}

/* Vignette */
.vignette{
  background:
    radial-gradient(1200px 820px at 50% 8%, rgba(0,0,0,.62), transparent 58%),
    radial-gradient(1400px 980px at 50% 55%, rgba(0,0,0,.48), transparent 70%),
    radial-gradient(900px 700px at 50% 102%, rgba(0,0,0,.42), transparent 64%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0) 28%);
  opacity: var(--vignette-opacity);
}

/* Desktop buoy scale */
@media (min-width: 900px){
  :root{
    --buoy-size: 800px auto;
    --buoy-x: 52%;
    --buoy-y: -4svh;
  }
}

/* Mobile tuning — keep buoy framed (more water visible at bottom) */
@media (max-width: 720px){
  .vignette{ opacity: var(--vignette-opacity-mobile); }
  :root{
    --buoy-size: 130% auto;
    --buoy-x: 50%;
    --buoy-y: 24svh;
  }
}

@media (max-width: 520px){
  :root{
    --buoy-size: 118% auto;
    --buoy-x: 50%;
    --buoy-y: 22svh;
  }
}

/* iOS Safari: keep vignette lighter, but do NOT crush it */
@supports (-webkit-touch-callout:none){
  .vignette{ opacity: .32; }
}