:root{
  /* global letter styling */
  --letter-vw: 4.2vw;
  --gap: .1vw;
  --spacer-vw: .9vw;

  /* vertical positions */
  --word-top: 12%;
  --of-top:   20%;
  --suit-top: 27%;

  /* horizontal offsets */
  --word-dx:  -20vw;
  --of-dx:    -18vw;
  --suit-dx:  -14vw;

  /* grain strength */
  --grain-opacity: 0.80;

  /* scrambled look tuning */
  --scramble-brightness: 0.49;
  --scramble-contrast:   .8;
  --scramble-opacity:    1;   /* how visible the jumble is when shown */
  --scramble-blur:       0 px;

  /* magnet layer look tuning */
  --magnet-brightness: .49;
  --magnet-contrast:   0.8;
  --magnet-opacity:    .62;
  --magnet-blur:       0 px;

  /* shadow */
  --magnet-shadow-x:    0px;
  --magnet-shadow-y:   -1px;
  --magnet-shadow-blur: 0 px;
  --magnet-shadow-color: rgba(0,0,0,0.7);

  /* static overlay strength */
  --static-opacity: 1;
}

/* ----------------------------------------------------------------------- */
html,body { margin:0; padding:0; background:#000; height:100%; overflow:hidden; }
#stage { position:relative; width:100vw; height:100vh; background:#000; }

#bg, #grain, #glitch, #scrambled, #static {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

/* order: bg (5) < scrambled (10) < letters (22) < static (24) < grain (30) < glitch (25) */
#bg { z-index:5; }

/* Scrambled: hidden by default; visible when .show is applied */
#scrambled{
  z-index:10;
  opacity: 0;                           /* default hidden */
  transition: opacity .35s ease-in-out; /* fade in/out */
  filter:
    brightness(var(--scramble-brightness))
    contrast(var(--scramble-contrast))
    blur(var(--scramble-blur));
}
#scrambled.show{
  opacity: var(--scramble-opacity);     /* controlled by CSS var */
}

/* Static overlay (above letters, below grain/glitch) */
#static{
  z-index:24;
  display:none;
  opacity: var(--static-opacity);
  pointer-events:none;
}

#grain  { z-index:30; mix-blend-mode:screen; opacity:var(--grain-opacity); pointer-events:none; }
#glitch { z-index:25; display:none; pointer-events:none; }

/* letter rows sit under static/grain, above jumble */
.magnet-line{
  position:absolute; z-index:22;
  left:50%; transform: translateX(-50%);
  display:flex; align-items:flex-end; gap: var(--gap);
  pointer-events:none;
}

/* vertical + horizontal placement */
#wordLayer{ top: var(--word-top);  left: calc(50% + var(--word-dx)); }
#ofLayer  { top: var(--of-top);    left: calc(50% + var(--of-dx));  }
#suitLayer{ top: var(--suit-top);  left: calc(50% + var(--suit-dx)); }

/* letter image + spacer */
.magnet {
  width: var(--letter-vw);
  max-width: 72px;
  user-select:none;
  image-rendering:auto;
  opacity: var(--magnet-opacity);
  filter:
    brightness(var(--magnet-brightness))
    contrast(var(--magnet-contrast))
    blur(var(--magnet-blur))
    drop-shadow(var(--magnet-shadow-x) var(--magnet-shadow-y) var(--magnet-shadow-blur) var(--magnet-shadow-color));
  -webkit-filter:
    brightness(var(--magnet-brightness))
    contrast(var(--magnet-contrast))
    blur(var(--magnet-blur))
    drop-shadow(var(--magnet-shadow-x) var(--magnet-shadow-y) var(--magnet-shadow-blur) var(--magnet-shadow-color));
}
.spacer { width: var(--spacer-vw); max-width: 28px; }