/* =========================================================================
   CASTIGATION CHOIR — Clean Image Banner (Merged / Stable)
   - Uses a real <img> for the artwork
   - Overlayed title + YouTube button stay centered
   - Gentle cyan spotlight + subtle particles
   - A11y: reduced motion, contrast-friendly
   ========================================================================= */

/* --- Quick tuning knobs --- */
:root{
  --choir-img-bright:   1.18;  /* subject brightness */
  --choir-img-contrast: 1.10;  /* subject contrast */
  --choir-title-glow:   rgba(0,250,255,.45);
  --choir-spot:         rgba(0,240,255,.20);
  --choir-spot-mid:     rgba(0,240,255,.10);
  --choir-spot-soft:    rgba(0,240,255,.05);
  --choir-dust:         .16;   /* particle visibility */
}

/* Core section */
.cc-banner {
  position: relative;
  padding: 0;
  background: none !important;
  overflow: hidden;
  isolation: isolate;
}

/* Banner image */
.cc-banner img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  filter:
    brightness(var(--choir-img-bright))
    contrast(var(--choir-img-contrast));
}

/* Overlay content */
.cc-banner__content {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  pointer-events: none;
}

.cc-banner__content h1,
.cc-banner__content h2 {
  position: relative;
  z-index: 2;
  letter-spacing: .02em;
  text-shadow:
    0 0 14px var(--choir-title-glow),
    0 2px 0 rgba(0,0,0,.6);
}

/* Cyan sweep behind title */
.cc-banner__content h1::after,
.cc-banner__content h2::after {
  content:"";
  position:absolute; left:-12%; right:-12%; top:50%; height:1.1em;
  transform: translateY(-50%);
  z-index:-1; pointer-events:none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0,255,255,.20) 35%,
    rgba(255,255,255,.40) 50%,
    rgba(0,255,255,.20) 65%,
    transparent 100%);
  filter: blur(10px) saturate(120%);
  opacity:.7;
  animation: choirSweep 4.2s ease-in-out infinite;
}

/* Keep actions clickable */
.cc-banner__content a { pointer-events: auto; }

/* Spotlight behind subject */
.cc-banner::before {
  content:"";
  position:absolute; inset:-14% -8%;
  z-index:0; pointer-events:none;
  mix-blend-mode: screen;
  filter: blur(1.2px);
  background:
    radial-gradient(76% 58% at 50% 44%,
      var(--choir-spot) 0%,
      var(--choir-spot-mid) 30%,
      var(--choir-spot-soft) 60%,
      transparent 78%),
    radial-gradient(120% 90% at 50% 66%,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,.6) 100%);
}

/* Particles / haze */
.cc-banner::after {
  content:"";
  position:absolute; inset:0;
  z-index:1; pointer-events:none;
  opacity: var(--choir-dust);
  mix-blend-mode: screen;
  background:
    radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,.25), transparent 55%) 0 0/9px 9px,
    radial-gradient(1.5px 1.5px at 75% 70%, rgba(255,255,255,.18), transparent 55%) 0 0/8px 8px,
    radial-gradient(1px 1px at 36% 58%, rgba(255,255,255,.16), transparent 55%) 0 0/7px 7px;
  animation: choirDust 26s linear infinite;
}

/* YouTube badge (minimal transparent style) */
.cc-badge.youtube {
  background: transparent;
  border: 2px solid currentColor;
  color: #ff4c4c;
  box-shadow: none;
  padding: 9px 14px;
}
.cc-badge.youtube:hover {
  background: rgba(255,76,76,.12);
}
.cc-badge.youtube svg {
  width: 18px; height: 18px; fill: currentColor;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.55));
}

/* Animations */
@keyframes choirSweep {
  0%   { transform: translate(-28%, -50%) skewX(-8deg); opacity:0 }
  20%  { opacity:.9 }
  40%  { transform: translate(28%, -50%) skewX(-8deg); opacity:.7 }
  60%  { opacity:0 }
  100% { transform: translate(28%, -50%) skewX(-8deg); opacity:0 }
}
@keyframes choirDust {
  0%   { background-position: 0 0, 0 0, 0 0; }
  50%  { background-position: 10% -6%, -8% 4%, 6% -4%; }
  100% { background-position: 0 0, 0 0, 0 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .cc-banner::after,
  .cc-banner__content h1::after,
  .cc-banner__content h2::after{ animation:none !important; }
}
/* === Castigation Choir: Poster Layout Override === */
.cc-banner__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;   /* align from the top */
  text-align: center;
  pointer-events: none;

  padding-top: 18%;  /* positions content ~top third of banner */
}

.cc-banner__content h1,
.cc-banner__content h2,
.cc-banner__content a {
  pointer-events: auto; /* keep links/buttons interactive */
}
/* ===== Outer Dark — green CRT treatment (matches layout) ===== */
.cc-banner--outerdark { position: relative; overflow: hidden; }

/* green wash */
.cc-banner--outerdark::before{
  content:"";
  position:absolute; inset:0;
  z-index:0; pointer-events:none;
  background: rgba(0,255,160,.12);
  mix-blend-mode: screen;
}

/* faint scanlines */
.cc-banner--outerdark::after{
  content:"";
  position:absolute; inset:0;
  z-index:1; pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,255,160,.18) 0 1px,
    transparent 1px 3px
  );
  opacity:.25;
  mix-blend-mode: overlay;
  animation: odScan 7s linear infinite;
}

@keyframes odScan{
  0% { background-position-y: 0; }
  100% { background-position-y: 100%; }
}

/* title: green glow */
.cc-banner--outerdark .cc-banner__title{
  color:#baffd9;
  text-shadow:
    0 0 10px rgba(0,255,160,.55),
    0 0 22px rgba(0,255,160,.35),
    0 2px 0 rgba(0,0,0,.65);
}

/* YouTube button: green variant */
.cc-banner--outerdark .cc-badge.youtube{
  color:#baffd9;
  border-color: currentColor;
  background: rgba(0,255,160,.10);
  box-shadow:
    inset 0 0 12px rgba(0,255,160,.35),
    0 0 16px rgba(0,255,160,.25);
  transition: all .25s ease;
}
.cc-banner--outerdark .cc-badge.youtube:hover{
  background: rgba(0,255,160,.22);
  box-shadow:
    inset 0 0 16px rgba(0,255,160,.55),
    0 0 22px rgba(0,255,160,.45);
  transform: translateY(-2px);
}
/* recolor raster icon if using an <img> */
.cc-banner--outerdark .cc-badge.youtube .cc-badge__icon{
  filter: brightness(0) saturate(100%) invert(86%) sepia(7%)
          saturate(1585%) hue-rotate(94deg) brightness(105%) contrast(95%);
}

/* keep your existing reduced-motion behavior */
@media (prefers-reduced-motion: reduce){
  .cc-banner--outerdark::after{ animation: none !important; }
}
/* === Green YouTube badge (for AVFTOD banner) === */
.cc-badge.youtube-green {
  background: transparent;
  border: 2px solid #00ff88;        /* neon green border */
  color: #00ff88;                   /* text + icon green */
  box-shadow: 0 0 12px rgba(0,255,136,.4); /* subtle glow */
  padding: 9px 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  transition: all .25s ease;
}

.cc-badge.youtube-green:hover {
  background: rgba(0,255,136,.12);
  box-shadow: 0 0 14px rgba(0,255,136,.6),
              0 0 28px rgba(0,255,136,.35);
  transform: translateY(-2px);
}

.cc-badge.youtube-green svg {
  width: 18px; height: 18px;
  fill: currentColor;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.55));
}
/* === AVFTOD Banner (with oscilloscope line) === */
.cc-banner--avftod .cc-banner__content {
  justify-content: flex-start;
  padding-top: 18%;          /* lift text above the graph */
  z-index: 2;                /* ensure text is above the osc line */
}
@media (max-width: 640px){
  .cc-banner--avftod .cc-banner__content { padding-top: 18%; }
}

/* Oscilloscope line band */
.cc-banner--avftod { --av-green:#00ff88; }

.cc-banner--avftod .cc-osc {
  position: absolute;
  left: -2vw; right: -2vw;
  top: 58%;                   /* adjust vertical placement */
  height: 8vh;
  z-index: 1;                 /* sits between image and text */
  pointer-events: none;
}

.cc-banner--avftod .cc-osc svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cc-banner--avftod .cc-osc .line {
  stroke: var(--av-green);
  stroke-width: 3.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter:
    drop-shadow(0 0 6px rgba(0,255,136,.8))
    drop-shadow(0 0 16px rgba(0,255,136,.45))
    drop-shadow(0 0 28px rgba(0,255,136,.25));
  stroke-dasharray: 22 14;
  animation: avftodDash 2.4s linear infinite,
             avftodFloat 6s ease-in-out infinite;
}

/* Line shimmer + drift */
@keyframes avftodDash {
  to { stroke-dashoffset: -72; }
}
@keyframes avftodFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-2px); }
}

/* Title glow enhancement */
.cc-banner--avftod .cc-banner__content h2 {
  text-shadow:
    0 0 16px rgba(0,255,136,.35),
    0 2px 0 rgba(0,0,0,.6);
}
/* === AVFTOD: title position + thin oscilloscope line ==================== */
.cc-banner--avftod{
  /* quick knobs so you can line it up without hunting in CSS */
  --av-green:        #00ff88;

  /* waveform placement — tweak these to match the TV screen */
  --osc-top:         54%;     /* raise/lower the line band */
  --osc-height:      5.5vh;   /* band thickness (visual area the line lives in) */
  --osc-left:        6%;      /* trim from left edge if you want */
  --osc-right:       6%;      /* trim from right edge if you want */

  /* line feel */
  --osc-thickness:   1.8;     /* stroke width in px */
  --osc-dash-on:     14;      /* dash length */
  --osc-dash-off:    10;      /* dash gap */
  --osc-dash-speed:  2.8s;    /* dash travel speed */
  --osc-float:       5.2s;    /* gentle vertical drift duration */
}

.cc-banner--avftod .cc-banner__content{
  justify-content: flex-start;
  padding-top: 14%;                 /* ↑ raises title above the graph */
}
@media (max-width:640px){
  .cc-banner--avftod .cc-banner__content{ padding-top: 16%; }
}
.cc-banner--avftod .cc-banner__title{  /* optional: a touch of spacing from button */
  margin-bottom: clamp(10px, 2.2vw, 18px);
}

/* Oscilloscope band wrapper (sits between image and text) */
.cc-banner--avftod .cc-osc{
  position: absolute;
  left:  var(--osc-left);
  right: var(--osc-right);
  top:   var(--osc-top);
  height: var(--osc-height);
  z-index: 1;
  pointer-events: none;
}

/* a faint glassy highlight across the band */
.cc-banner--avftod .cc-osc::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom,
    rgba(255,255,255,.10), rgba(255,255,255,.02) 45%,
    rgba(0,0,0,0) 60%);
  mix-blend-mode: screen;
  opacity: .25;
}

/* SVG takes the full band */
.cc-banner--avftod .cc-osc svg{
  width:100%; height:100%; display:block;
}

/* THIN, subtle waveform line */
.cc-banner--avftod .cc-osc .line{
  stroke: var(--av-green);
  stroke-width: var(--osc-thickness);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .88;

  /* softer glow */
  filter:
    drop-shadow(0 0 3px rgba(0,255,136,.70))
    drop-shadow(0 0 8px rgba(0,255,136,.35));

  /* motion */
  stroke-dasharray: var(--osc-dash-on) var(--osc-dash-off);
  animation:
    avDash var(--osc-dash-speed) linear infinite,
    avFloat var(--osc-float) ease-in-out infinite;
}

/* Motion keyframes (kept gentle) */
@keyframes avDash   { to { stroke-dashoffset: -72; } }
@keyframes avFloat  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .cc-banner--avftod .cc-osc .line{ animation: none; }
}
/* === AVFTOD: Thin angular stock/crypto style waveform === */
.cc-banner--avftod{
  --av-green:        #00ff88;

  /* placement tuning knobs */
  --osc-top:         54%;   /* adjust vertically */
  --osc-height:      60px;  /* fixed pixel height for precision */
  --osc-thickness:   1.2;   /* ultra thin line */
}

.cc-banner--avftod .cc-osc{
  position: absolute;
  left:0; right:0;
  top: var(--osc-top);
  height: var(--osc-height);
  z-index: 1;
  pointer-events:none;
}

.cc-banner--avftod .cc-osc svg{
  width:100%; height:100%;
  display:block;
}

.cc-banner--avftod .cc-osc .line{
  stroke: var(--av-green);
  stroke-width: var(--osc-thickness);
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  opacity:.95;
  filter:
    drop-shadow(0 0 2px rgba(0,255,136,.7))
    drop-shadow(0 0 6px rgba(0,255,136,.35));

  stroke-dasharray: 40 20;
  animation: avDash 2.2s linear infinite;
}

@keyframes avDash{
  to { stroke-dashoffset: -60; }
}
/* AVFTOD: Thin, randomised oscilloscope/crypto style */
.cc-banner--avftod .cc-osc {
  position: absolute;
  left: 0; right: 0;
  top: 54%;            /* vertical alignment */
  height: 60px;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.cc-banner--avftod .cc-osc svg {
  width: 200%;         /* oversize for scrolling effect */
  height: 100%;
  display: block;
}

.cc-banner--avftod .cc-osc polyline {
  fill: none;
  stroke: #00ff88;
  stroke-width: 1.2;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  opacity: .95;
  filter:
    drop-shadow(0 0 2px rgba(0,255,136,.7))
    drop-shadow(0 0 6px rgba(0,255,136,.35));
  animation: lineScroll 4s linear infinite;
}

/* Scrolls the jagged line left → right */
@keyframes lineScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* AVFTOD: raise title a bit; keep button untouched */
.cc-banner--avftod .cc-banner__content{
  justify-content:flex-start;
  padding-top:14%;              /* was ~18% — lifted */
  z-index:2;
}
@media (max-width:640px){
  .cc-banner--avftod .cc-banner__content{ padding-top:16%; }
}

/* Thin, pointy, neon-green ticker */
.cc-banner--avftod{ --av-green:#00ff88; --av-osc-top:56%; } /* fine-tune with --av-osc-top */

.cc-banner--avftod .cc-osc{
  position:absolute; left:0; right:0; top:var(--av-osc-top);
  height:58px; z-index:1; pointer-events:none; overflow:hidden;
}

.cc-banner--avftod .cc-osc svg{ width:200%; height:100%; display:block; }

.cc-banner--avftod .cc-osc .line{
  fill:none;
  stroke:var(--av-green);
  stroke-width:1.25;                  /* very thin */
  stroke-linecap:butt; stroke-linejoin:miter;
  opacity:.95;
  filter:
    drop-shadow(0 0 2px rgba(0,255,136,.7))
    drop-shadow(0 0 6px rgba(0,255,136,.35));
  animation: avLineScroll 4s linear infinite;
}

/* slow leftward scroll so the waveform moves */
@keyframes avLineScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* place oscilloscope band to match the device screen height */
.cc-banner--avftod .cc-osc{ position:absolute; left:-2vw; right:-2vw; top:58%; height:7vh; z-index:1; pointer-events:none; }
.cc-banner--avftod .cc-osc svg{ width:100%; height:100%; display:block; }

.cc-banner--avftod .cc-osc .line{
  stroke:#00ff88;
  stroke-width:1.6;              /* thinner */
  fill:none;
  filter: drop-shadow(0 0 6px rgba(0,255,136,.7)) drop-shadow(0 0 10px rgba(0,255,136,.35));
  stroke-dasharray:28 18;        /* segmented “trace” look */
  animation: avftodDash 2.6s linear infinite, avftodFloat 7s ease-in-out infinite;
}
@keyframes avftodDash{ to{ stroke-dashoffset:-90; } }
@keyframes avftodFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-1.5px) } }
/* === AVFTOD Banner Overrides === */
.cc-banner--avftod .cc-banner__actions {
  margin-top: 90px;   /* lowers button beneath oscilloscope line */
}

/* Responsive tweak: reduce spacing on smaller screens */
@media (max-width: 640px) {
  .cc-banner--avftod .cc-banner__actions {
    margin-top: 36px;
  }
}
/* Add glow to the AVFTOD oscilloscope line */
.cc-banner--avftod .cc-osc .line {
  stroke: #00ff66;             /* base neon green */
  stroke-width: 2.2;           /* keep it slim */
  filter:
    drop-shadow(0 0 4px rgba(0, 255, 102, 0.8))
    drop-shadow(0 0 10px rgba(0, 255, 102, 0.5))
    drop-shadow(0 0 18px rgba(0, 255, 102, 0.3));
  transition: filter .3s ease-in-out;
}
/* === AVFTOD: ensure only ONE line is visible === */
.cc-banner--avftod .cc-osc polyline:not(.line) {
  display: none !important;   /* hide extra polylines */
}

.cc-banner--avftod .cc-osc .line {
  stroke: #00ff66;             /* main neon green */
  stroke-width: 2px;
  fill: none;
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  animation: avftodFloat 6s ease-in-out infinite; /* keep subtle motion */
  filter:
    drop-shadow(0 0 4px rgba(0,255,102,.8))
    drop-shadow(0 0 10px rgba(0,255,102,.5))
    drop-shadow(0 0 18px rgba(0,255,102,.3));
}