/* ===== DPS.SBS visual enhancements v1 — loads AFTER styles-v13-multipage.css ===== */

/* 1. Real condensed display font (loaded via <link> in head) */
:root{
  --display:"Barlow Condensed","Arial Narrow","Roboto Condensed",Impact,sans-serif;
}

/* 2. Pulsing LIVE tally dot in header pill */
@media (prefers-reduced-motion: no-preference){
  .live-pill i{animation:enh-tally 1.6s ease-in-out infinite}
  @keyframes enh-tally{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.35;transform:scale(.8)}
  }
}

/* 3. Timecode + REC injected into the signal card by JS */
.enh-timecode{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:8px;padding-top:8px;border-top:1px solid #2a333c;
  font:900 12px/1 var(--display);letter-spacing:.08em;color:#e8ecee;
  font-variant-numeric:tabular-nums;
}
.enh-rec{color:var(--live)}
@media (prefers-reduced-motion: no-preference){
  .enh-rec{animation:enh-blink 1.1s steps(2,start) infinite}
  @keyframes enh-blink{to{visibility:hidden}}
}
.signal-card img{transition:opacity .12s}
.signal-card.enh-take{outline:2px solid var(--accent);outline-offset:-2px}

/* 4. Hero headline: staggered line reveal + tally flicker on the accent line */
@media (prefers-reduced-motion: no-preference){
  .enh-line{display:inline-block;opacity:0;transform:translateY(.55em);
    animation:enh-line-in .6s cubic-bezier(.2,.7,.2,1) forwards;
    animation-delay:calc(var(--i)*.14s)}
  @keyframes enh-line-in{to{opacity:1;transform:none}}
  .hero h1 em,.page-hero h1 em{animation:enh-flicker 1.2s steps(1) .5s both}
  @keyframes enh-flicker{
    0%{color:var(--live)} 18%{color:var(--accent)} 30%{color:var(--live)}
    46%{color:var(--accent)} 58%{color:var(--live)} 100%{color:var(--accent)}
  }
}

/* 5. Site-wide staggered scroll reveals (JS tags elements with .enh-reveal) */
@media (prefers-reduced-motion: no-preference){
  .enh-reveal{opacity:0;transform:translateY(22px);
    transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);
    transition-delay:var(--enh-d,0s)}
  .enh-reveal.enh-visible{opacity:1;transform:none}
}

/* 6. Feature cards: cinematic hover */
.feature-card img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.feature-card:hover img{transform:scale(1.045)}
.feature-card>div{transition:transform .35s ease}
.feature-card:hover>div{transform:translateY(-6px)}
.feature-card{transition:border-color .3s}
.feature-card:hover{border-color:var(--accent)}

/* 7. Text links nudge forward */
.text-link,.section-heading a{display:inline-block;transition:transform .25s,color .25s}
.text-link:hover,.section-heading a:hover{transform:translateX(5px);color:var(--accent)}

/* 8. CTA background: slow Ken Burns */
@media (prefers-reduced-motion: no-preference){
  .cta-bg{animation:enh-kenburns 22s ease-in-out infinite alternate}
  @keyframes enh-kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
}

/* 9. Partner logos: muted until hover */
.partner-logo img{filter:grayscale(1) contrast(.9);opacity:.75;transition:filter .3s,opacity .3s}
.partner-logo:hover img{filter:none;opacity:1}

/* 10. Cross-fade page transitions (progressive enhancement, Chromium browsers) */
@view-transition{navigation:auto}
@media (prefers-reduced-motion: reduce){
  @view-transition{navigation:none}
}