/* SIGNAL//47 — Intro cinématique V2
   Animation visible : zoom caméra, radar, glitch, flash et verrouillage du signal. */
.intro-v2-page{background:#000!important;overflow:hidden!important}
.intro-v2{background:#000!important;opacity:1!important}
.intro-v2 .progress-cinematic-bg{
  background:
    radial-gradient(circle at 50% 48%,rgba(52,255,92,.20),transparent 34%),
    radial-gradient(circle at 50% 50%,#06150b 0,#010302 50%,#000 80%);
  animation:introBgBreath 1.8s ease-in-out infinite!important;
}
.intro-v2 .progress-frame-stack{z-index:1;transform:translateZ(0)}
.intro-v2 .progress-frame{
  inset:-3%;width:106%;height:106%;object-fit:cover;
  opacity:0;transition:none!important;
  transform-origin:50% 50%;will-change:transform,opacity,filter;
}
.intro-v2[data-stage="1"] .progress-frame-1{
  opacity:1;
  animation:introFrameBoot 2.65s cubic-bezier(.15,.75,.18,1) both!important;
}
.intro-v2[data-stage="2"] .progress-frame-1{opacity:0;animation:introOldFrameOut .45s ease both!important}
.intro-v2[data-stage="2"] .progress-frame-2{
  opacity:1;
  animation:introFrameLock 4.0s cubic-bezier(.13,.78,.16,1) both!important;
}
.intro-v2 .progress-cinematic-scan{z-index:5;opacity:.55;animation:introScan 1.15s linear infinite!important}
.intro-v2 .progress-cinematic-hud{z-index:12;bottom:5.5vh}
.intro-v2 .progress-cinematic-hud span{font-size:clamp(.78rem,1.8vw,1.25rem)}
.intro-v2 .progress-cinematic-bar i{animation:introBar 6.25s linear forwards!important}
.intro-radar{position:absolute;z-index:4;left:50%;top:48%;width:min(76vw,76vh);height:min(76vw,76vh);transform:translate(-50%,-50%);border:1px solid rgba(96,255,115,.28);border-radius:50%;box-shadow:0 0 42px rgba(57,255,86,.09),inset 0 0 42px rgba(57,255,86,.05);pointer-events:none;opacity:.74}
.intro-radar:before,.intro-radar:after{content:"";position:absolute;inset:15%;border:1px solid rgba(96,255,115,.20);border-radius:50%}
.intro-radar:after{inset:31%}
.intro-radar i:nth-child(1){position:absolute;left:50%;top:50%;width:50%;height:1px;background:linear-gradient(90deg,rgba(89,255,106,.95),transparent);transform-origin:left center;animation:introRadarSpin 2.6s linear infinite;box-shadow:0 0 12px #54ff65}
.intro-radar i:nth-child(2){position:absolute;left:50%;top:0;width:1px;height:100%;background:linear-gradient(transparent,rgba(89,255,106,.32),transparent)}
.intro-radar i:nth-child(3){position:absolute;left:0;top:50%;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(89,255,106,.32),transparent)}
.intro-glitch-bars{position:absolute;z-index:8;inset:0;pointer-events:none;opacity:.30;background:repeating-linear-gradient(to bottom,transparent 0 7px,rgba(103,255,120,.09) 8px,transparent 10px);mix-blend-mode:screen;animation:introGlitchField .42s steps(2,end) infinite}
.intro-center-text{position:absolute;z-index:10;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;text-shadow:0 0 18px rgba(80,255,95,.9);pointer-events:none;width:min(880px,88vw);opacity:0}
.intro-center-text strong{display:block;font-size:clamp(2.2rem,8vw,7.2rem);letter-spacing:.06em;color:#f3fff1;line-height:.9;filter:drop-shadow(0 0 18px rgba(61,255,84,.5))}
.intro-center-text span{display:block;margin-top:18px;font-size:clamp(.75rem,2vw,1.35rem);letter-spacing:.28em;color:#9dff9a;text-transform:uppercase}
.intro-v2.show-title .intro-center-text{animation:introTitleIn .85s cubic-bezier(.14,.85,.19,1) both}
.intro-v2.detected .intro-center-text strong{animation:introTitleGlitch .34s steps(2,end) 2}
.intro-v2.detected .intro-center-text span{color:#dcffd9}
.intro-vignette{position:absolute;z-index:9;inset:0;pointer-events:none;background:radial-gradient(circle at center,transparent 38%,rgba(0,0,0,.35) 68%,rgba(0,0,0,.83) 100%)}
.intro-flash{position:absolute;z-index:20;inset:0;pointer-events:none;background:radial-gradient(circle at center,#eaffea 0,rgba(89,255,100,.86) 14%,rgba(35,255,73,.18) 43%,transparent 70%);opacity:0;mix-blend-mode:screen}
.intro-v2.impact .intro-flash{animation:introFlash .62s ease-out both}
.intro-v2.impact .progress-frame-stack{animation:introCameraImpact .46s cubic-bezier(.12,.7,.2,1)}
.intro-v2.leaving{animation:introLeave .52s ease forwards!important}
@keyframes introFrameBoot{0%{opacity:0;transform:scale(1.30) rotate(-.7deg);filter:blur(18px) brightness(.32) saturate(.75)}16%{opacity:1;filter:blur(5px) brightness(1.35) saturate(1.25)}55%{transform:scale(1.11) rotate(.15deg);filter:blur(0) brightness(.84) saturate(1.05)}100%{opacity:1;transform:scale(1.045);filter:blur(0) brightness(.93) saturate(1.08)}}
@keyframes introOldFrameOut{0%{opacity:1;transform:scale(1.045)}100%{opacity:0;transform:scale(.96);filter:blur(7px) brightness(1.6)}}
@keyframes introFrameLock{0%{opacity:0;transform:scale(1.42) rotate(.85deg);filter:blur(16px) brightness(.30) saturate(1.35)}10%{opacity:1;filter:blur(3px) brightness(1.75)}28%{transform:scale(1.12) rotate(-.15deg);filter:blur(0) brightness(.90) saturate(1.15)}65%{transform:scale(1.055)}100%{opacity:1;transform:scale(1.015);filter:blur(0) brightness(1.02) saturate(1.10)}}
@keyframes introTitleIn{0%{opacity:0;transform:translate(-50%,-45%) scale(.82);filter:blur(12px)}50%{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1.025)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes introTitleGlitch{0%,100%{transform:translate(0);filter:none}25%{transform:translate(-4px,1px);filter:drop-shadow(5px 0 #36ff57)}50%{transform:translate(5px,-2px);filter:drop-shadow(-5px 0 #00eaff)}75%{transform:translate(-2px,2px)}}
@keyframes introRadarSpin{to{transform:rotate(360deg)}}
@keyframes introScan{0%{transform:translateY(-5%)}100%{transform:translateY(5%)}}
@keyframes introGlitchField{0%{transform:translate(0)}25%{transform:translate(0,3px)}50%{transform:translate(2px,-2px)}75%{transform:translate(-2px,1px)}100%{transform:translate(0)}}
@keyframes introBgBreath{0%,100%{filter:brightness(.72)}50%{filter:brightness(1.13)}}
@keyframes introFlash{0%{opacity:0}10%{opacity:1}28%{opacity:.28}100%{opacity:0}}
@keyframes introCameraImpact{0%{transform:none}18%{transform:translate(-8px,4px) scale(1.012)}38%{transform:translate(6px,-3px) scale(1.006)}62%{transform:translate(-2px,2px)}100%{transform:none}}
@keyframes introBar{from{width:0}to{width:100%}}
@keyframes introLeave{from{opacity:1;filter:brightness(1)}to{opacity:0;filter:brightness(2.2)}}
@media(max-width:700px){.intro-v2 .progress-frame{object-fit:cover}.intro-center-text{top:46%}.intro-radar{width:86vw;height:86vw}.intro-v2 .progress-cinematic-hud{bottom:34px}}


/* SIGNAL//47 — choix du canal après la cinématique */
.intro-channel-choice[hidden]{display:none!important}
.intro-channel-choice{
  position:absolute;
  inset:0;
  z-index:40;
  display:grid;
  place-items:center;
  padding:24px;
  box-sizing:border-box;
  opacity:0;
  background:rgba(0,3,1,.58);
  backdrop-filter:blur(8px) brightness(.62);
  transition:opacity .55s ease;
  pointer-events:none;
}
.intro-channel-choice.visible{opacity:1;pointer-events:auto}
.intro-channel-card{
  width:min(720px,92vw);
  box-sizing:border-box;
  padding:clamp(28px,5vw,52px);
  border:1px solid rgba(126,255,137,.58);
  background:
    linear-gradient(180deg,rgba(6,27,11,.90),rgba(1,8,4,.96)),
    #010302;
  box-shadow:
    0 0 0 1px rgba(130,255,140,.06) inset,
    0 0 42px rgba(67,255,83,.18),
    0 0 120px rgba(0,0,0,.75);
  text-align:center;
  transform:translateY(24px) scale(.965);
  filter:blur(3px);
  transition:transform .65s cubic-bezier(.16,.8,.2,1),filter .65s ease;
}
.intro-channel-choice.visible .intro-channel-card{transform:none;filter:none}
.intro-channel-kicker{
  color:#8cff87;
  letter-spacing:.34em;
  font-weight:800;
  font-size:.82rem;
  text-shadow:0 0 12px rgba(94,255,104,.72);
}
.intro-channel-card h2{
  margin:18px 0 10px;
  color:#f0fff0;
  font-size:clamp(1.65rem,5vw,3.2rem);
  letter-spacing:.035em;
  text-shadow:0 0 22px rgba(93,255,105,.28);
}
.intro-channel-card p{
  margin:0 0 26px;
  color:#9fbea5;
  letter-spacing:.08em;
}
.intro-channel-buttons{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.intro-channel-btn{
  position:relative;
  display:block;
  padding:17px 18px;
  border:1px solid rgba(140,255,135,.55);
  background:rgba(6,31,11,.82);
  color:#eaffea;
  text-decoration:none;
  font-weight:900;
  letter-spacing:.18em;
  text-shadow:0 0 10px rgba(108,255,119,.48);
  box-shadow:inset 0 0 18px rgba(79,255,94,.04),0 0 18px rgba(0,0,0,.3);
  overflow:hidden;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;
}
.intro-channel-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,transparent,rgba(185,255,191,.18),transparent);
  transform:translateX(-120%);
  transition:transform .45s ease;
}
.intro-channel-btn:hover,
.intro-channel-btn:focus-visible{
  outline:none;
  border-color:#d8ffd5;
  background:rgba(16,55,22,.96);
  box-shadow:0 0 26px rgba(79,255,94,.24),inset 0 0 22px rgba(79,255,94,.08);
  transform:translateY(-2px);
}
.intro-channel-btn:hover::before,
.intro-channel-btn:focus-visible::before{transform:translateX(120%)}
.intro-channel-card small{
  display:block;
  margin-top:20px;
  color:#638069;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.intro-v2.choice-ready .intro-center-text,
.intro-v2.choice-ready .progress-cinematic-hud{opacity:.12;transition:opacity .45s ease}

@media(max-width:620px){
  .intro-channel-buttons{grid-template-columns:1fr}
  .intro-channel-card{padding:28px 20px}
  .intro-channel-btn{padding:16px}
}