/* ========= Scoped dots only — no globals ========= */




[data-dots] { position: relative;
   --cell: 50px; --dot: 2px;
   --c-base:#8e5e00; --c-mid:#e59800; --c-hot:#fea900; --glow:#ffdc97; --t:140ms;
   --offset-x: 0px; --offset-y: 0px; --spread: 1; --cursor-scale: 1;
}

/* Section layout (doesn't change the whole page) */
[data-dots] .stage { position: relative; min-height: 100svh; }

/* Dot layer: fixed under your content, but won't eat clicks */
[data-dots] .dotfield {
  position: fixed; inset: 0; z-index: -1;
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--cell));
    grid-auto-rows: var(--cell);
    background: #000;
    pointer-events: none;
    transform: translate(var(--offset-x), var(--offset-y)) scale(var(--spread));
    transform-origin: center;
    transition: transform 180ms ease-out;
    will-change: transform;
}

/* Each dot cell + visible core */
[data-dots] .dot { position: relative; display:grid; place-items:center; width:var(--cell); height:var(--cell); }
[data-dots] .core {
  width: var(--dot); height: var(--dot); border-radius:50%;
  background-color: var(--c-base);
  transition: transform var(--t) linear, background-color var(--t) linear, box-shadow var(--t) linear;
  pointer-events: none;
  transform: scale(var(--cursor-scale));
}

/* Content above the dots (only inside this section) */
[data-dots] .content { position: relative; z-index: 1; padding: 4rem clamp(1rem,3vw,3rem); top: 20px; }

/* Masonry via CSS columns (scoped) */
[data-dots] .flxit { column-width: 320px; column-gap: 16px; }
[data-dots] .flxit > div { break-inside: avoid; margin-bottom: 16px; display: block; }

/* Cards/UI (scoped) */
[data-dots] .trnsblack, .trnswhite {color:#fea900; border:1px solid #8e5e00; border-radius:4px; padding: 10px 10px; margin: 0px 10px 20px 10px;}
[data-dots] .trnsblack { background: rgba(0,0,0,0.6);}
[data-dots] .trnswhite { background: rgba(255,255,255,0.2);}
[data-dots] .trnsblack:hover h1, .trnsblack:hover h2, .trnswhite:hover h1, .trnswhite:hover h2 { text-shadow: 1px 1px 8px #fea900; }
[data-dots] .ornghdl { color:#fea900; }
/* [data-dots] .orngbttn { border:0; border-radius:4px; background:#8e5e00; padding:10px; color:#000; }
[data-dots] .orngbttn:hover { box-shadow: 0 0 11px 6px rgba(0,59,100,.75); } */


/* class-driven effects (Option B) */
[data-dots] .dot.is-warm  .core { transform: scale(calc(var(--cursor-scale) * 1.4));  background-color: var(--c-mid); }
[data-dots] .dot.is-hot   .core { transform: scale(calc(var(--cursor-scale) * 1.75)); background-color: var(--c-hot); box-shadow: 2px 2px 3px var(--glow); }