/* === Digital Screen overlay — v9 DAYLIGHT (smooth v9 baseline, variable-speed waves, daylight tint) === */
/* Drop-in. Keeps the feel of v9; slows & varies the wave pace; adds a soft daylight tint. */

.digital-screen-overlay {
  /* Global visibility */
  opacity: var(--screen-opacity, 0.9);

  /* Tint: daylight, warm but subtle */
  --scan: 230, 160, 255;  /* RGB used for all line layers */

  /* Very wide spacing between base scanlines */
  --fine-gap: 48px;   /* 1px + 47px */
  --med-gap: 72px;    /* 2px + 70px */
  --wide-gap: 112px;  /* 3px + 109px */

  /* Motion (v9 baseline, slightly slower + variable holds) */
  --scan-speed: 16s;
  --glitch-cycle: 18s;
  --holes-speed: 20s;
  --wobble-main-speed: 41s;  /* slower than v9 (32s) */
  --wobble-sub-speed: 27.5s;   /* slower than v9 (21s) */

  /* Glitch intensities */
  --glitch-alpha-soft: 0.06;
  --glitch-alpha-burst: 0.13;
  --glitch-shift-soft: 3px;
  --glitch-shift-burst: 8px;

  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);   /* Y handled in keyframes */
  width: min(104vw, 1560px);
  top: -42.5px;
  bottom: 540px;
  border-radius: 10px;
  pointer-events: none;
  z-index: 1;

  /* Base: grain + scanlines with very wide gaps (tinted) */
  background:
    /* fine lines */
    repeating-linear-gradient(
      to bottom,
      rgba(var(--scan), 0.048) 0 1px,
      transparent 1px var(--fine-gap)
    ),
    /* medium lines (phase-shifted) */
    repeating-linear-gradient(
      to bottom,
      rgba(var(--scan), 0.039) 0 2px,
      transparent 2px calc(2px + var(--med-gap))
    ),
    /* wide bands */
    repeating-linear-gradient(
      to bottom,
      rgba(var(--scan), 0.030) 0 3px,
      transparent 3px calc(3px + var(--wide-gap))
    ),
    rgba(var(--scan), var(--veil));
  background-position: 0 0, 0 0, 0 6px, 0 12px, 0 0;
  background-blend-mode: screen, screen, screen, screen, normal;
  mix-blend-mode: screen;
  backdrop-filter: brightness(1.06) contrast(1.04);

  /* Smooth drift + animated holes + long-hold wave (variable pace) */
  animation:
    screen-scan var(--scan-speed) linear infinite,
    holes-shift var(--holes-speed) ease-in-out infinite,
    wobble-main-long var(--wobble-main-speed) cubic-bezier(.4,0,.3,1) infinite;
}

/* Frames above overlay, content above frames */
.home-neon-frame { z-index: 1; }
.subtitle-box, .categories, .content { position: relative; z-index: 2; }

/* Thin over-stripes (very subtle) + fine texture — stays tinted daylight */
.digital-screen-overlay::before {
  /* subtle thin over-stripes — LOW opacity & thin thickness */
  --overA-size: 1.2px; --overA-gap: 140px; --overA-alpha: 0.06;
  --overB-size: 1.6px; --overB-gap: 200px; --overB-alpha: 0.05;
  --overC-size: 1.0px; --overC-gap: 100px; --overC-alpha: 0.04;

  /* opacity-only modulation (no thickness change) */
  --overA-gain: .60;
  --overB-gain: .55;
  --overC-gain: .65;

  --oa: calc(var(--overA-alpha) * var(--overA-gain));
  --ob: calc(var(--overB-alpha) * var(--overB-gain));
  --oc: calc(var(--overC-alpha) * var(--overC-gain));

  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background:
    /* very subtle, thin widely spaced over-stripes (tinted) */
    repeating-linear-gradient(
      to bottom,
      rgba(var(--scan), var(--oa)) 0 var(--overA-size),
      transparent var(--overA-size) calc(var(--overA-size) + var(--overA-gap))
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(var(--scan), var(--ob)) 0 var(--overB-size),
      transparent var(--overB-size) calc(var(--overB-size) + var(--overB-gap))
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(var(--scan), var(--oc)) 0 var(--overC-size),
      transparent var(--overC-size) calc(var(--overC-size) + var(--overC-gap))
    ),
    /* very fine texture below */
    repeating-linear-gradient(
      to bottom,
      rgba(var(--scan), 0.052) 0 0.5px,
      transparent 0.5px 3px
    );
  background-position: 0 0, 0 18px, 0 41px, 0 1px;
  mix-blend-mode: screen;
  transform: translateY(0);

  animation:
    wobble-sub-long var(--wobble-sub-speed) cubic-bezier(.42,0,.28,1) infinite,
    over-drift 26s linear infinite,
    over-opacity 27s cubic-bezier(.35,.02,.3,.98) infinite;
}

/* Glitch layer (tinted softly) */
.digital-screen-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(var(--scan), var(--glitch-alpha-soft)) 0 2px,
      transparent 2px 12px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(var(--scan), calc(var(--glitch-alpha-soft) * .8)) 0 1px,
      transparent 1px 7px
    );
  background-position: 0 0, 0 3px;
  mix-blend-mode: screen;
  animation: screen-glitch-hybrid var(--glitch-cycle) linear infinite;
}

/* === Keyframes (v9 spirit, but with longer holds to vary perceived speed) === */
@keyframes screen-scan {
  0%   { background-position: 0 0, 0 0, 0 6px, 0 12px, 0 0; }
  100% { background-position: 0 4px, 0 8px, 0 13px, 0 19px, 0 0; }
}

/* Main wave: extended holds (feels slower) + quicker transitions (feels faster sometimes) */
@keyframes wobble-main-long {
  0%   { transform: translate(-50%, 0px); }
  6%   { transform: translate(-50%, -0.6px); }
  12%  { transform: translate(-50%, -1.8px); }
  20%  { transform: translate(-50%, -3.4px); }
  /* long hold near bottom */
  28%  { transform: translate(-50%, -3.3px); }
  36%  { transform: translate(-50%, -3.2px); }
  43%  { transform: translate(-50%, -2.8px); }
  /* quicker climb */
  52%  { transform: translate(-50%, 0.3px); }
  60%  { transform: translate(-50%, 1.9px); }
  66%  { transform: translate(-50%, 2.7px); }
  70%  { transform: translate(-50%, 3.1px); }
  /* hold near top */
  78%  { transform: translate(-50%, 3.0px); }
  86%  { transform: translate(-50%, 2.0px); }
  94%  { transform: translate(-50%, 0.4px); }
  100% { transform: translate(-50%, 0px); }
}

/* Secondary wave with its own long/short segments (independent pace) */
@keyframes wobble-sub-long {
  0%   { transform: translateY(0px); }
  9%   { transform: translateY(1.1px); }
  18%  { transform: translateY(-0.5px); }
  29%  { transform: translateY(2.6px); }
  41%  { transform: translateY(3.0px); }   /* brief higher hold */
  53%  { transform: translateY(2.4px); }
  61%  { transform: translateY(0.8px); }
  72%  { transform: translateY(-2.4px); }
  83%  { transform: translateY(-2.9px); }  /* brief lower hold */
  92%  { transform: translateY(-1.2px); }
  100% { transform: translateY(0px); }
}

/* Glitch timing (unchanged) */
@keyframes screen-glitch-hybrid {
  0%, 9%   { opacity: 0; transform: translateX(0); }
  10%      { opacity: .30; transform: translateX(var(--glitch-shift-soft)); }
  12%      { opacity: .10; transform: translateX(0); }
  27%      { opacity: 0;   transform: translateX(0); }
  28%      { opacity: .33; transform: translateX(calc(var(--glitch-shift-soft) * -1)); }
  30%      { opacity: .1;  transform: translateX(0); }
  42%      { opacity: 0;   transform: translateX(0); }
  43%      { opacity: .31; transform: translateX(calc(var(--glitch-shift-soft) * 0.8)); }
  45%      { opacity: .12; transform: translateX(0); }
  66%      { opacity: 0;   transform: translateX(0); }
  67% { opacity: 1; transform: translateX(var(--glitch-shift-burst)); filter: contrast(1.1); }
  69% { opacity: .5; transform: translateX(calc(var(--glitch-shift-burst) * -0.6)); }
  71% { opacity: .25; transform: translateX(0); filter: none; }
  79% { opacity: .25; transform: translateX(calc(var(--glitch-shift-soft) * 0.7)); }
  81% { opacity: .08; transform: translateX(0); }
  88% { opacity: 0;   transform: translateX(0); }
  92% { opacity: .9; transform: translateX(calc(var(--glitch-shift-burst) * -0.85)); filter: contrast(1.1); }
  94% { opacity: .3; transform: translateX(0); filter: none; }
  100% { opacity: 0; transform: translateX(0); }
}

/* Animated holes (3-layer mask, unchanged shape/speed) */
@keyframes holes-shift {
  0%   { -webkit-mask-position: 0 0, 0 9px, 0 16px; mask-position: 0 0, 0 9px, 0 16px; }
  25%  { -webkit-mask-position: -0.5px 5px, 0.7px 13px, -0.3px 21px; mask-position: -0.5px 5px, 0.7px 13px, -0.3px 21px; }
  50%  { -webkit-mask-position:  0.4px 10px, -0.6px 17px, 1.2px 26px; mask-position:  0.4px 10px, -0.6px 17px, 1.2px 26px; }
  75%  { -webkit-mask-position: -0.2px 13px, 0.5px 21px, -0.8px 31px; mask-position: -0.2px 13px, 0.5px 21px, -0.8px 31px; }
  100% { -webkit-mask-position: 0 0, 0 9px, 0 16px; mask-position: 0 0, 0 9px, 0 16px; }
}

/* Over-stripes drift & opacity (tinted) */
@keyframes over-drift {
  0%   { background-position: 0 0, 0 18px, 0 41px, 0 1px; }
  100% { background-position: 0 28px, 0 16px, 0 60px, 0 1px; }
}
@keyframes over-opacity {
  0%   { --overA-gain:.55; --overB-gain:.50; --overC-gain:.60; }
  20%  { --overA-gain:.45; --overB-gain:.55; --overC-gain:.50; }
  40%  { --overA-gain:.60; --overB-gain:.52; --overC-gain:.55; }
  60%  { --overA-gain:.65; --overB-gain:.48; --overC-gain:.50; }
  80%  { --overA-gain:.58; --overB-gain:.62; --overC-gain:.56; }
  100% { --overA-gain:.60; --overB-gain:.55; --overC-gain:.65; }
}



/* Boost léger mais propre */
.digital-screen-overlay{
  /* +lumière de fond */
  --veil: 0.08; /* était ~0.06 */

  /* +luminosité/peps global */
  backdrop-filter: brightness(1.12) contrast(1.06);
}

.digital-screen-overlay::before{
  /* +lueur sur les fines stries */
  --overA-alpha: 0.08; /* était 0.06 */
  --overB-alpha: 0.07; /* était 0.05 */
  --overC-alpha: 0.06; /* était 0.04 */
}

.digital-screen-overlay::after{
  /* +glow ponctuel (glitch) — très léger */
  --glitch-alpha-soft: 0.08;  /* était 0.06 */
  --glitch-alpha-burst: 0.16; /* était 0.13 */
}