#intro{
    position:fixed; inset:0; z-index:999;
    background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; overflow:hidden;
    transition:opacity .6s ease, visibility .6s ease;
  }
  #intro.hide{opacity:0; visibility:hidden; pointer-events:none;}

  .gate-text{
    color:var(--ink-soft); font-family:'Space Grotesk',sans-serif; font-size:13px;
    letter-spacing:.14em; text-transform:uppercase;
    display:flex; flex-direction:column; align-items:center; gap:18px;
  }
  .gate-ring{
    width:52px; height:52px; border-radius:50%; border:1.5px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    animation:pulse 2s ease-in-out infinite;
  }
  .gate-ring svg{width:18px;height:18px;}
  @keyframes pulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.08);} }

  #stage{ display:none; position:relative; width:min(520px,92vw); height:190px; }
  #stage.active{ display:block; }

  
  #fbGroup{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    display:flex; align-items:center; gap:15px; white-space:nowrap;
    animation:fbGroupOut .28s ease 1.44s both;
  }
  @keyframes fbGroupOut{ to{ opacity:0; } }

  #fbWord{
    display:flex; font-family:'Inter',sans-serif; font-weight:400;
    font-size:clamp(13px,3.6vw,20px); letter-spacing:.09em; color:var(--ink);
  }
  #fbWord span{ display:inline-block; animation:letterOut .3s ease both; }
  @keyframes letterOut{ from{opacity:1;} to{ opacity:0; filter:blur(2.5px); transform:translateY(-3px);} }

  #iconsWrap{ position:relative; }
  #icons{ display:flex; align-items:center; animation:iconsOut .001s linear .80s both; }
  @keyframes iconsOut{ from{opacity:1;} to{ opacity:0; } }
  #icons .ic{
    position:relative; width:22px; height:22px; flex:0 0 auto;
    border-radius:7px; overflow:hidden; margin-left:6px;
    animation:icTighten .40s cubic-bezier(.6,0,.35,1) .50s both;
  }
  #icons .ic:first-child{ margin-left:0; animation:none; }
  @keyframes icTighten{ from{margin-left:6px;} to{ margin-left:0; } }
  #icons .ic .glyph{ position:absolute; inset:0; animation:glyphOut .28s ease both; }
  #icons .ic .glyph svg{ width:100%; height:100%; display:block; }
  #icons .ic .flat{ position:absolute; inset:0; opacity:0; border-radius:7px; animation:flatIn .28s ease both; }
  @keyframes glyphOut{ from{opacity:1;} to{opacity:0;} }
  @keyframes flatIn{ from{opacity:0;} to{opacity:1;} }
  #icons .ic:nth-child(1) .glyph,#icons .ic:nth-child(1) .flat{ animation-delay:.50s; }
  #icons .ic:nth-child(2) .glyph,#icons .ic:nth-child(2) .flat{ animation-delay:.54s; }
  #icons .ic:nth-child(3) .glyph,#icons .ic:nth-child(3) .flat{ animation-delay:.58s; }
  #icons .ic:nth-child(4) .glyph,#icons .ic:nth-child(4) .flat{ animation-delay:.62s; }
  #icons .ic:nth-child(5) .glyph,#icons .ic:nth-child(5) .flat{ animation-delay:.66s; }

  
  #pill{
    position:absolute; left:0; top:0; height:22px; border-radius:11px; opacity:0;
    transform:translateY(-50%);
    background:linear-gradient(90deg,#1877f2 0%, #a033ff 26%, #f0508b 45%, #f7b32b 62%, #25d366 80%, #1c2b33 100%);
  }

  
  #logoRow{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    display:flex; align-items:center; opacity:0;
  }
  #markWrap{ width:min(180px,40vw); flex:0 0 auto; }
  #markWrap svg{ display:block; width:100%; height:auto; overflow:visible; }
  #markStroke{ fill:none; stroke:url(#drawGrad); stroke-width:16.8; stroke-linecap:round; stroke-linejoin:round; }
  #markFill{ opacity:0; }

  #drawGrad stop{ animation:gsX .68s ease 1.94s both; }
  #drawGrad stop:nth-child(1){ animation-name:gs1; }
  #drawGrad stop:nth-child(2){ animation-name:gs2; }
  #drawGrad stop:nth-child(3){ animation-name:gs3; }
  #drawGrad stop:nth-child(4){ animation-name:gs4; }
  #drawGrad stop:nth-child(5){ animation-name:gs5; }
  @keyframes gs1{ from{stop-color:#F7B32B;} to{ stop-color:#0064e0; } }
  @keyframes gs2{ from{stop-color:#F0508B;} to{ stop-color:#0070ee; } }
  @keyframes gs3{ from{stop-color:#A033FF;} to{ stop-color:#0082fb; } }
  @keyframes gs4{ from{stop-color:#1877F2;} to{ stop-color:#0082fb; } }
  @keyframes gs5{ from{stop-color:#0082FB;} to{ stop-color:#0082fb; } }

  
  #wordSlot{ position:relative; width:0; overflow:hidden; flex:0 0 auto; align-self:stretch; }
  #wordSlot span{
    position:absolute; left:16px; top:50%; transform:translateY(-50%);
    font-family:'Space Grotesk',sans-serif; font-weight:700;
    font-size:clamp(28px,6.6vw,40px); letter-spacing:-0.03em; white-space:nowrap; opacity:0;
  }
  #wMeta{ color:var(--ink-soft); animation:wMetaDark .42s ease 3s both; }
  @keyframes wMetaDark{ to{ color:var(--ink); } }
  #wPluh{ color:var(--ink); }

  #skipHint{
    position:absolute; left:50%; bottom:40px; transform:translateX(-50%);
    font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
    opacity:0; pointer-events:none;
  }