/* =========================================
   HOMEPAGE GLITCH HUD REFINEMENT
   ========================================= */

.hero-glitch-grid,
.hero-glitch-scan,
.hero-glitch-rgb,
.hero-glitch-crosshair,
.hero-glitch-hud,
.hero-glitch-blocks{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.hero-glitch-grid{
  z-index:4;
  opacity:.22;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(111, 240, 228, 0) 0 24px,
      rgba(111, 240, 228, .11) 24px 25px,
      rgba(111, 240, 228, 0) 25px 54px
    ),
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0) 0 30px,
      rgba(255,255,255,.06) 30px 31px,
      rgba(255,255,255,0) 31px 62px
    );
  mix-blend-mode:screen;
  animation:heroGridDrift 11s linear infinite;
}

.hero-glitch-scan{
  z-index:5;
  opacity:.30;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0) 0 4px,
      rgba(255,255,255,.04) 4px 5px,
      rgba(0,0,0,0) 5px 8px
    );
  mix-blend-mode:soft-light;
}

.hero-glitch-rgb{
  z-index:6;
  opacity:.34;
  background:
    linear-gradient(90deg, rgba(88, 255, 220, .12), rgba(88, 255, 220, 0) 26%),
    linear-gradient(270deg, rgba(222, 118, 255, .12), rgba(222, 118, 255, 0) 28%);
  mix-blend-mode:screen;
}

.hero-glitch-crosshair::before,
.hero-glitch-crosshair::after{
  content:"";
  position:absolute;
  background:rgba(255,255,255,.12);
}

.hero-glitch-crosshair::before{
  left:50%;
  top:16%;
  width:1px;
  height:22%;
}

.hero-glitch-crosshair::after{
  left:41%;
  top:27%;
  width:18%;
  height:1px;
}

.hero-glitch-hud{
  z-index:9;
}

.hero-hud-tag{
  position:absolute;
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(10,10,10,.20);
  color:rgba(255,255,255,.74);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:10px;
  font-weight:700;
  backdrop-filter:blur(8px);
}

.hero-hud-tag-top{
  top:24px;
  left:24px;
  color:rgba(241, 234, 117, .88);
}

.hero-hud-tag-side{
  right:24px;
  bottom:26px;
}

.hero-glitch-copy{
  position:absolute;
  left:30px;
  bottom:120px;
  display:grid;
  gap:8px;
}

.glitch-caption{
  position:relative;
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.glitch-caption::before,
.glitch-caption::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
}

.glitch-caption::before{
  color:rgba(255,80,70,.85);          /* ruby chromatic */
  transform:translate(-2px,0);
}

.glitch-caption::after{
  color:rgba(241,212,90,.85);         /* champagne-yellow chromatic */
  transform:translate(2px,0);
}

.hero-glitch-block{
  position:absolute;
  height:3px;
  background:#fff;
}

/* =========================================
   BRAND-COLORED AURORA BACKDROP
   Sits at the bottom of the showreel stack so
   transitions never expose grey page background.
   ========================================= */
.hero-backdrop{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  background:#0a0a0a;
}
.hero-backdrop-aurora{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(ellipse 65% 55% at 22% 32%, rgba(225,55,40,.85) 0%, rgba(225,55,40,0) 60%),
    radial-gradient(ellipse 55% 45% at 78% 64%, rgba(74,95,138,.65) 0%, rgba(74,95,138,0) 60%),
    radial-gradient(ellipse 50% 40% at 60% 22%, rgba(225,55,40,.55) 0%, rgba(225,55,40,0) 60%),
    radial-gradient(ellipse 45% 35% at 32% 78%, rgba(240,160,64,.45) 0%, rgba(240,160,64,0) 60%);
  filter:blur(60px) saturate(1.5);
  animation:heroBackdropDrift 22s ease-in-out infinite alternate;
}
.hero-backdrop-grain{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.18) 1px, transparent 1px);
  background-size:3px 3px, 7px 7px;
  background-position:0 0, 1px 2px;
  opacity:.35;
  mix-blend-mode:overlay;
}
@keyframes heroBackdropDrift{
  0%   { transform:translate3d(0,0,0) scale(1); }
  50%  { transform:translate3d(-3%, 2%, 0) scale(1.06); }
  100% { transform:translate3d(2%, -2%, 0) scale(1.10); }
}

/* =========================================
   TRANSITION: glitching slide must sit ABOVE the next slide
   so the chromatic glitch is felt, but never reveals grey.
   ========================================= */
.editorial-slide.is-transitioning{
  z-index:3 !important;
}

/* HUD micro-additions: REC dot + frame counter */
.hud-rec{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-left:10px;
  padding-left:9px;
  border-left:1px solid rgba(255,255,255,.15);
  color:#ff5145;
  font-size:9px;
  font-weight:800;
  letter-spacing:.18em;
  animation:hudBlink 1.4s steps(2,end) infinite;
}
@keyframes hudBlink{
  0%,55%   { opacity:1; }
  56%,100% { opacity:.35; }
}
.hero-hud-frame{
  position:absolute;
  bottom:24px;
  left:24px;             /* moved off the music·science·culture corner */
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(10,10,10,.20);
  color:rgba(255,255,255,.6);
  text-transform:uppercase;
  letter-spacing:.20em;
  font-size:10px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  backdrop-filter:blur(8px);
}

/* Mobile — keep HUD readable but quieter */
@media (max-width:640px){
  .hero-glitch-grid{ opacity:.16; }
  .hero-hud-frame{ display:none; }
  .hud-rec{ font-size:8px; margin-left:6px; padding-left:6px; }
  .hero-backdrop-aurora{ filter:blur(40px) saturate(1.3); }
}