/* 0AIM_ // SITE-WIDE HOLO FINISH
   The sheen is a visual overlay only: pointer-events:none keeps controls usable.
   No existing backgrounds or panels are replaced, and reduced-motion is respected. */

.holo-panel {
  position: relative;
  isolation: isolate;
  --holo-tint: #2af5e7;
}
.holo-panel.about-panel { --holo-tint:#fa2bab; }
.holo-panel.discord-panel { --holo-tint:#56d5ff; }
.holo-panel.contact-panel { --holo-tint:#d578ff; }
.holo-panel.clips-empty { --holo-tint:#2af5e7; }
.holo-panel.visual-frame { --holo-tint:#fa2bab; }

/* Always-visible foil glow + a very subtle moving iridescent glint. */
.holo-panel > .site-holo-film {
  position:absolute;
  inset:0;
  display:block;
  z-index:4;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(114deg,
      transparent 0%,
      rgba(255,255,255,.015) 16%,
      rgba(248,68,182,.09) 24%,
      rgba(73,242,239,.09) 33%,
      rgba(255,255,255,.17) 38%,
      rgba(156,115,255,.10) 44%,
      transparent 53%),
    radial-gradient(ellipse 48% 55% at 95% 7%, color-mix(in srgb,var(--holo-tint),transparent 91%),transparent 100%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 1px, transparent 1px 10px);
  background-size:235% 100%,100% 100%,100% 100%;
  background-position:100% 0,0 0,0 0;
  opacity:.76;
  transition:opacity .35s ease;
  animation:aim-site-holo 18s ease-in-out infinite alternate;
}
.holo-panel:hover > .site-holo-film,
.holo-panel:focus-within > .site-holo-film {opacity:1; animation-duration:7s;}

@keyframes aim-site-holo {
  from { background-position:100% 0,0 0,0 0; }
  to { background-position:0% 0,0 0,0 0; }
}

/* Polished luminous borders; maintain original section layout and typography. */
.about-panel,.discord-panel,.contact-panel,.clips-empty,.stream-viewer,.visual-frame {
  transition:border-color .35s ease, box-shadow .35s ease;
}
.about-panel:hover,.about-panel:focus-within {
  border-color:rgba(250,73,192,.35);
  box-shadow:0 14px 50px rgba(0,0,0,.25),0 0 36px rgba(250,43,171,.09);
}
.discord-panel:hover,.discord-panel:focus-within {
  border-color:rgba(83,223,253,.43);
  box-shadow:0 22px 64px rgba(0,0,0,.3),0 0 38px rgba(42,245,231,.09);
}
.contact-panel:hover,.contact-panel:focus-within {
  border-color:rgba(232,119,249,.39);
  box-shadow:0 22px 64px rgba(0,0,0,.26),0 0 38px rgba(250,43,171,.1);
}
.visual-frame:hover {border-color:rgba(250,43,171,.33)}
.clips-empty:hover {border-color:rgba(42,245,231,.43)}

/* The clip thumbnail is a video, so only its info panel gets foil. */
.clip-card {position:relative;isolation:isolate;}
.clip-card .clip-details {
  background-image:
    linear-gradient(118deg,transparent 13%,rgba(255,139,226,.08) 31%,rgba(80,245,242,.08) 47%,transparent 68%),
    linear-gradient(135deg,rgba(42,245,231,.035),rgba(250,43,171,.035));
  background-size:210% 100%,100% 100%;
  background-position:100% 0,0 0;
  transition:background-position .7s ease;
}
.clip-card:hover .clip-details,.clip-card:focus-visible .clip-details {background-position:0% 0,0 0;}

/* Twitch player stays untouched: holo trims only around it. */
.stream-window-head,.player-footer {
  background-image:linear-gradient(104deg,rgba(250,43,171,.11),rgba(108,85,217,.06) 42%,rgba(42,245,231,.13));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.stream-viewer:hover,.stream-viewer:focus-within {border-color:rgba(42,245,231,.33);box-shadow:0 23px 60px rgba(0,0,0,.25),0 0 20px rgba(42,245,231,.075)}

/* Smaller cards in About/Setup/FAQ: permanent holographic color, stronger on hover. */
.gear-item,.faq-item {
  position:relative;
  background-image:linear-gradient(125deg,rgba(250,43,171,.06),rgba(42,245,231,.07) 56%,rgba(193,105,255,.04));
  transition:background .25s,border-color .25s,box-shadow .25s;
}
.gear-item:hover,.gear-item:focus-within {
  border-color:rgba(42,245,231,.34);
  box-shadow:inset 0 0 28px rgba(42,245,231,.045);
}
.faq-item {border-bottom-color:rgba(250,76,185,.22);}
.faq-item:hover {background-color:rgba(250,43,171,.035);}

/* Discord and business action column are part of the foil as well. */
.discord-right,.contact-action {
  background-image:
    linear-gradient(120deg,rgba(255,255,255,.045),transparent 35%,rgba(42,245,231,.055) 59%,rgba(250,43,171,.06)),
    linear-gradient(135deg,rgba(42,245,231,.035),rgba(250,43,171,.055));
}

/* Keep mobile text unobstructed by reducing the intensity of the moving gleam. */
@media(max-width:600px){
  .holo-panel > .site-holo-film {opacity:.55;animation-duration:22s;}
  .holo-panel:hover > .site-holo-film,.holo-panel:focus-within > .site-holo-film {opacity:.78;}
}
@media(prefers-reduced-motion:reduce){
  .holo-panel > .site-holo-film {animation:none!important;transition:none!important;background-position:55% 0,0 0,0 0;}
  .about-panel,.discord-panel,.contact-panel,.clips-empty,.stream-viewer,.visual-frame,.gear-item,.faq-item,.clip-card .clip-details {transition:none!important;}
}