/* ============================================================
   Intro : ouverture de l'application (animation validée dans Docs/Intro_Reflex_V1). Tout est sous #intro.
   ============================================================ */
  #intro { position: absolute; inset: 0; z-index: 100; overflow: hidden; background: #000; color: #fff; font-family: var(--font); --u: 4px; }
  #in-cam { position: absolute; inset: 0; transform-origin: 50% 58%; will-change: transform; }
  #in-bg { position: absolute; inset: 0; transform-origin: 50% 55%; will-change: transform; }
  #intro .L { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
  #intro .C { position: absolute; opacity: 0; transform-origin: 50% 100%; will-change: transform, opacity; }
  #in-bolt { position: absolute; left: 50%; top: 34%; width: 10%; transform: translateX(-50%); opacity: 0; filter: drop-shadow(0 0 6px #19e6ff) drop-shadow(0 0 16px #19e6ff); }
  #in-glow { position: absolute; border-radius: 50%; background: radial-gradient(ellipse, rgba(60, 200, 255, .55), rgba(120, 60, 255, .25) 55%, transparent 72%); opacity: 0; }
  #intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  #intro .ov { position: absolute; inset: 0; pointer-events: none; }
  #in-vig { background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 10, .55) 100%); }
  #in-scan { background: repeating-linear-gradient(to bottom, rgba(120, 200, 255, .07) 0 1px, transparent 1px 4px); opacity: 0; mix-blend-mode: screen; }
  #in-tens { box-shadow: inset 0 0 calc(var(--u) * 24) rgba(25, 230, 255, .55), inset 0 0 calc(var(--u) * 60) rgba(120, 60, 255, .35); opacity: 0; }
  #in-flash { background: radial-gradient(circle at 50% 50%, #fff, #9ff 45%, rgba(80, 160, 255, .6) 100%); opacity: 0; }
  #in-shade { background: linear-gradient(to bottom, rgba(0, 0, 20, 0) 0%, rgba(0, 0, 25, .55) 22%, rgba(0, 0, 25, .5) 45%, rgba(0, 0, 20, 0) 70%); opacity: 0; }
  #in-go { display: grid; place-items: center; font-style: italic; font-size: calc(var(--u) * 34); color: #fff; text-shadow: 0 0 calc(var(--u) * 4) #19e6ff, 0 0 calc(var(--u) * 10) #19e6ff; opacity: 0; letter-spacing: -2px; }
  #in-title { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 11%; box-sizing: border-box; }
  #in-title b { display: block; font-style: italic; font-size: calc(var(--u) * 15.5); line-height: .98; letter-spacing: -1px; opacity: 0; text-transform: uppercase; }
  #in-title b:nth-child(1) { color: #fff; text-shadow: 0 0 calc(var(--u) * 3) #7fd8ff, 0 0 calc(var(--u) * 8) #3a7bff; }
  #in-title b:nth-child(2) { background: linear-gradient(#fff, #ff9be8 55%, #d24bff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 calc(var(--u) * 3) #ff5bd6); }
  #in-title b:nth-child(3) { background: linear-gradient(#f3ecff, #b99bff 55%, #7a4dff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 calc(var(--u) * 3) #9a6bff); }
  #in-title b:nth-child(4) { background: linear-gradient(#e9ffff, #19e6ff 60%, #2f7bff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 calc(var(--u) * 3) #19e6ff); }
  #in-start { position: absolute; left: 8%; right: 8%; bottom: 6%; padding: calc(var(--u) * 4.2) 0; border: 2px solid #7dffb0; border-radius: 99px; background: linear-gradient(#26d97a, #0f9a4f); color: #fff; font: inherit; font-style: italic; font-size: calc(var(--u) * 7); letter-spacing: 1px; box-shadow: 0 0 calc(var(--u) * 6) rgba(38, 217, 122, .8); opacity: 0; pointer-events: none; cursor: pointer; }
  #in-start.on { pointer-events: auto; animation: intro-pulse 1.6s ease-in-out infinite; }
  @keyframes intro-pulse { 50% { box-shadow: 0 0 calc(var(--u) * 11) rgba(38, 217, 122, 1); transform: scale(1.025); } }
  #intro .tiny { position: absolute; border: 0; background: rgba(0, 0, 20, .45); color: #bcd3ff; font: inherit; font-size: 13px; padding: 8px 14px; border-radius: 99px; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 3; }
  #intro .tiny.on { opacity: .85; pointer-events: auto; }
  #in-skip { top: calc(env(safe-area-inset-top) + 14px); right: 14px; } 
  #in-gate { position: absolute; inset: 0; display: grid; place-content: center; gap: 18px; text-align: center; background: #000; cursor: pointer; z-index: 5; }
  #in-gate svg { width: calc(var(--u) * 16); margin: 0 auto; filter: drop-shadow(0 0 12px #19e6ff); }
  #in-gate span { color: #8fb0ff; letter-spacing: 3px; font-size: 14px; animation: intro-blink 1.4s ease-in-out infinite; }
  @keyframes intro-blink { 50% { opacity: .35; } }