:root{
    --bg: #05070b;
    --bg2: #0a0f16;
    --panel: rgba(14,19,27,0.55);
    --line: #1e2733;
    --line-bright: #2c3947;
    --cyan: #5ce4ec;
    --cyan-dim: rgba(92,228,236,0.35);
    --amber: #e8a33d;
    --text: #e9edf3;
    --text-dim: #7f8b9c;
    --text-faint: #4b5563;
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; height:100%; overflow:hidden; }
  body{
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
  }

  /* ---------- Layered background ---------- */
  #stars{ position:fixed; inset:0; z-index:0; display:block; }

  .nebula{
    position: fixed; inset: 0; z-index: 1; pointer-events:none;
    background:
      radial-gradient(ellipse 46% 38% at 82% 14%, rgba(92,228,236,0.10), transparent 60%),
      radial-gradient(ellipse 50% 42% at 10% 82%, rgba(232,163,61,0.06), transparent 62%),
      radial-gradient(ellipse 60% 50% at 50% 50%, rgba(60,90,140,0.10), transparent 65%),
      radial-gradient(ellipse 100% 80% at 50% 50%, rgba(5,7,11,0) 30%, rgba(5,7,11,0.75) 100%);
  }

  .planet{
    position: fixed; z-index: 1; border-radius: 50%; pointer-events:none;
    top: -260px; right: -220px; width: 620px; height: 620px;
    background:
      radial-gradient(circle at 32% 28%, rgba(255,255,255,0.14), transparent 40%),
      radial-gradient(circle at 60% 66%, #2b4356 0%, #182631 38%, #0d151c 65%, #060a0e 100%);
    box-shadow: inset -80px -40px 120px rgba(0,0,0,0.65), 0 0 160px rgba(92,228,236,0.06);
    opacity: 0.55;
  }
  .planet-ring{
    position: fixed; z-index: 1; pointer-events:none;
    top: -90px; right: -260px; width: 880px; height: 230px;
    transform: rotate(-14deg);
    border-radius: 50%;
    border: 1px solid rgba(92,228,236,0.10);
    opacity: 0.6;
  }

  /* scanline sweep */
  .scanline{
    position: fixed; left:0; right:0; height: 140px; z-index: 2; pointer-events:none;
    background: linear-gradient(180deg, transparent, rgba(92,228,236,0.05) 45%, rgba(92,228,236,0.09) 50%, rgba(92,228,236,0.05) 55%, transparent);
    animation: sweep 9s linear infinite;
    mix-blend-mode: screen;
  }
  @keyframes sweep{
    0%{ top: -140px; }
    100%{ top: 100%; }
  }

  /* subtle grid, HUD feel */
  .hud-grid{
    position: fixed; inset:0; z-index:1; pointer-events:none; opacity:0.5;
    background-image:
      linear-gradient(rgba(92,228,236,0.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(92,228,236,0.028) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, black 40%, transparent 80%);
  }

  /* ---------- HUD corner brackets ---------- */
  .bracket{ position: fixed; width: 34px; height: 34px; z-index: 5; opacity: 0.55; pointer-events:none; }
  .bracket.tl{ top: 22px; left: 22px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
  .bracket.tr{ top: 22px; right: 22px; border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }
  .bracket.bl{ bottom: 22px; left: 22px; border-bottom: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
  .bracket.br{ bottom: 22px; right: 22px; border-bottom: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }

  /* ---------- Telemetry readouts ---------- */
  .telemetry{
    position: fixed; z-index: 5;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    line-height: 1.9;
    pointer-events: none;
  }
  .telemetry .k{ color: var(--cyan-dim); }
  .telemetry.left{ bottom: 40px; left: 40px; }
  .telemetry.right{ bottom: 40px; right: 40px; text-align: right; }

  /* ---------- Main content ---------- */
  .stage{
    position: relative; z-index: 10;
    height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: 20px;
  }

  .eyebrow{
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 22px;
    display: flex; align-items: center; gap: 10px;
    opacity: 0;
    animation: fadeUp .8s ease forwards .15s;
  }
  .eyebrow::before, .eyebrow::after{
    content:"";
    width: 26px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan-dim));
  }
  .eyebrow::after{ background: linear-gradient(90deg, var(--cyan-dim), transparent); }

  h1{
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: clamp(52px, 10vw, 108px);
    line-height: 0.95;
    letter-spacing: 0.02em;
    margin: 0;
    text-transform: uppercase;
    background: linear-gradient(180deg, #ffffff 0%, #cfe9ec 55%, #7fbfc4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 60px rgba(92,228,236,0.18);
    opacity: 0;
    animation: fadeUp .9s ease forwards .3s;
  }

  .by{
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    letter-spacing: 0.28em;
    color: var(--amber);
    text-transform: uppercase;
    margin-top: 14px;
    opacity: 0;
    animation: fadeUp .9s ease forwards .5s;
  }
  .by b{ color: var(--text); font-weight: 600; letter-spacing: 0.28em; }

  .desc{
    max-width: 520px;
    margin: 26px auto 0;
    color: var(--text-dim);
    font-size: 14.5px;
    line-height: 1.7;
    opacity: 0;
    animation: fadeUp .9s ease forwards .65s;
  }

  .enter{
    margin-top: 42px;
    opacity: 0;
    animation: fadeUp .9s ease forwards .85s;
  }
  .enter a{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--cyan);
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 3px;
    font-weight: 600;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    box-shadow: 0 0 0 rgba(92,228,236,0);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  }
  .enter a:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(92,228,236,0.28);
    background: #7defef;
  }
  .enter a .arrow{ transition: transform .18s ease; }
  .enter a:hover .arrow{ transform: translateX(4px); }

  .status{
    margin-top: 22px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    display: flex; align-items: center; gap: 8px;
    opacity: 0;
    animation: fadeUp .9s ease forwards 1s;
  }
  .status .pulse{
    width: 6px; height: 6px; border-radius: 50%;
    background: #4fbf7f;
    box-shadow: 0 0 8px #4fbf7f;
    animation: blink 1.8s ease-in-out infinite;
  }

  @keyframes fadeUp{
    from{ opacity: 0; transform: translateY(14px); }
    to{ opacity: 1; transform: translateY(0); }
  }
  @keyframes blink{
    0%,100%{ opacity: 1; }
    50%{ opacity: 0.35; }
  }

  @media (max-width: 640px){
    .telemetry{ display: none; }
    .bracket{ width: 22px; height: 22px; }
  }

  @media (prefers-reduced-motion: reduce){
    .scanline{ animation: none; display:none; }
    .eyebrow, h1, .by, .desc, .enter, .status{ animation: none; opacity: 1; }
  }

  /* ---------- Transition : pluie de billets aUEC ---------- */
  .bill-rain{
    position: fixed; inset: 0; z-index: 999;
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity .35s ease;
  }
  .bill-rain.active{ opacity: 1; }
  .bill-rain::before{
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(232,163,61,0.10), transparent 70%);
    opacity: 0;
    transition: opacity .6s ease .2s;
  }
  .bill-rain.active::before{ opacity: 1; }
  .bill{
    position: absolute;
    top: -60px;
    width: 58px;
    height: 30px;
    border-radius: 4px;
    background: linear-gradient(135deg, #16332a 0%, #0d201a 60%, #0a1814 100%);
    border: 1px solid rgba(232,163,61,0.55);
    box-shadow: 0 6px 18px -6px rgba(0,0,0,0.7), inset 0 0 10px rgba(92,228,236,0.06);
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--amber);
    animation: billFall linear forwards;
    will-change: transform;
  }
  .bill::before, .bill::after{
    content:"";
    position:absolute;
    width: 5px; height: 5px;
    border: 1px solid rgba(92,228,236,0.4);
    border-radius: 50%;
  }
  .bill::before{ left: 5px; }
  .bill::after{ right: 5px; }
  @keyframes billFall{
    0%{
      transform: translateY(-60px) translateX(0) rotate(0deg);
    }
    100%{
      transform: translateY(112vh) translateX(var(--drift, 0px)) rotate(var(--rot, 360deg));
    }
  }