/* /shared/index-world.css */
/* CANON: extracted from index.html (index is the only visual reference) */

:root{
  --bg0:#020304;
  --bg1:#070b10;
  --text:#e9eef6;
  --muted:rgba(233,238,246,.78);
  --dim:rgba(233,238,246,.62);
  --line:rgba(255,255,255,.10);
  --red:#ff2b2b;

  --maxw: 860px;
  --pad: 22px;
  --radius: 18px;
  --shadow: 0 30px 90px rgba(0,0,0,.62);

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Garamond, Georgia, serif;
  --hero: "Cormorant Garamond", Garamond, Georgia, serif;

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

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

/* Background layers (canon) */
.world, .vignette{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ===== World: buoy photo + batcave overlays (canon) ===== */
.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 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 — REQUIRED because CSS is in /shared/) */
url("/assets/buoy_v10.png") var(--buoy-x) var(--buoy-y) / var(--buoy-size) no-repeat,    /* BUOY VISIBILITY BOOST (mobile-safe) */
    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;

}
/* Buoy brightness tuning */
.world{
  filter: brightness(1.18) contrast(1.08) saturate(1.06);
}
/* Desktop buoy scale (canon) */
@media (min-width: 900px){
  :root{
    --buoy-size: 800px auto;
    --buoy-x: 52%;
    --buoy-y: 4svh; /* lock desktop height even when size changes */
  }
}

/* Vignette (canon) */
.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);
}

/* ===== Mobile tuning — buoy height consistency ===== */
@media (max-width: 720px){
  .vignette{ opacity: var(--vignette-opacity-mobile); }
  :root{
    --buoy-size: 130% auto;
    --buoy-x: 50%;
    --buoy-y: 34svh; /* raise buoy */
  }
}

/* Smaller phones override the 720px rule */
@media (max-width: 520px){
  :root{
    --buoy-size: 118% auto;
    --buoy-x: 50%;
    --buoy-y: 22svh; /* raise buoy a bit more */
  }
}

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

}