@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&display=swap');

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,120,20,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,120,20,0.035) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
  }

  .scene {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    position: relative;
  }

  .halo {
    position: absolute;
    top: 44%;
    left: 50%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255,110,10,0.20) 0%, rgba(200,70,5,0.10) 45%, transparent 70%);
    animation: haloPulse 3.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
  }

  @keyframes haloPulse {
    0%,100% { opacity:0.7; transform:translate(-50%,-50%) scale(1);    }
    50%      { opacity:1;   transform:translate(-50%,-50%) scale(1.13); }
  }

  .logo-wrap {
    position: relative;
    z-index: 1;
    width: 55px;
    height: 55px;
    filter:
      drop-shadow(0 0 10px rgba(255,130,20,0.95))
      drop-shadow(0 0 28px rgba(220,90,5,0.65))
      drop-shadow(0 0 60px rgba(180,60,0,0.40));
    animation: floatLogo 4s ease-in-out infinite;
  }

  @keyframes floatLogo {
    0%,100% { transform:translateY(0px);  }
    50%      { transform:translateY(-9px); }
  }

  .shimmer-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
      transparent 25%,
      rgba(255,200,100,0.22) 50%,
      transparent 75%);
    background-size: 100% 100%;
    animation: shimmerSweep 3.8s ease-in-out 1.4s infinite;
    pointer-events: none;
    z-index: 2;
  }

  @keyframes shimmerSweep {
    0%       { background-position:-100% 0; opacity:0; }
    8%       { opacity:1; }
    55%      { background-position:220% 0;  opacity:1; }
    65%,100% { background-position:220% 0;  opacity:0; }
  }

  /* Path reveal animations */
  .slash-main {
    fill: url(#gradMain);
    animation: revealSlash 0.8s cubic-bezier(0.22,1,0.36,1) 0.15s both;
  }
  .slash-lower {
    fill: url(#gradMain);
    animation: revealSlash 0.7s cubic-bezier(0.22,1,0.36,1) 0.55s both;
  }
  .accent-dark {
    fill: url(#gradDark);
    animation: revealSlash 0.6s cubic-bezier(0.22,1,0.36,1) 0.85s both;
  }

  @keyframes revealSlash {
    0%   { opacity:0; transform:scale(0.92); }
    100% { opacity:1; transform:scale(1);    }
  }

  /* Wordmark */
  .wordmark {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    opacity: 0;
    animation: wordIn 0.8s cubic-bezier(0.22,1,0.36,1) 1.1s forwards;
  }

  @keyframes wordIn {
    0%   { opacity:0; transform:translateY(12px); }
    100% { opacity:1; transform:translateY(0);    }
  }

  .vern {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.07em;
    color: #fff;
    text-shadow:
      0 0 10px rgba(255,150,40,0.55),
      0 0 28px rgba(220,100,10,0.35);
  }

  .x-letter {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0;
    background: linear-gradient(135deg, #ffaa30 0%, #f06010 50%, #c04000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter:
      drop-shadow(0 0 8px rgba(255,130,20,0.95))
      drop-shadow(0 0 20px rgba(220,80,5,0.65));
    animation: xGlow 2.6s ease-in-out 2s infinite;
  }

  @keyframes xGlow {
    0%,100% { filter:drop-shadow(0 0 8px rgba(255,130,20,0.95)) drop-shadow(0 0 20px rgba(220,80,5,0.65)); }
    50%      { filter:drop-shadow(0 0 18px rgba(255,160,50,1))   drop-shadow(0 0 40px rgba(240,100,10,0.85)); }
  }

  .tagline {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.40em;
    text-transform: uppercase;
    color: rgba(255,130,30,0.55);
    opacity: 0;
    z-index: 1;
    position: relative;
    animation: fadeUp 0.7s ease 1.6s forwards;
  }

  @keyframes fadeUp {
    0%   { opacity:0; transform:translateY(6px); }
    100% { opacity:1; transform:translateY(0);   }
  }

  .brackets {
    position: absolute; 
    width: 60px;
    height: 60px;
    top: 0%;
    left: -10%;
    transform: translate(-50%, -55%);
    pointer-events: none;
    opacity: 0;
    animation: fadeUp 0.6s ease 1.8s forwards;
    z-index: 0;
  }
  .brackets span {
    position: absolute;
    width: 22px;
    height: 22px;
    border-color: rgba(255,120,20,0.40);
    border-style: solid;
  }
  .brackets .tl { top:0;    left:0;  border-width:2px 0 0 2px; }
  .brackets .tr { top:0;    right:0; border-width:2px 2px 0 0; }
  .brackets .br { bottom:0; right:0; border-width:0 2px 2px 0; }
  .brackets .bl { bottom:0; left:0;  border-width:0 0 2px 2px; }

  .orbit-ring {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    animation: fadeIn 1s ease 2s forwards, spinRing 14s linear 2s infinite;
  }

  @keyframes fadeIn { to { opacity:1; } }
  @keyframes spinRing {
    from { transform:translate(-50%,-55%) rotate(0deg);   }
    to   { transform:translate(-50%,-55%) rotate(360deg); }
  }

  .particle { position:absolute; border-radius:50%; }
  .p1 { width:5px;height:5px; top:0;    left:50%; transform:translateX(-50%); background:rgba(255,140,30,0.95); box-shadow:0 0 8px 3px rgba(255,110,10,0.8); }
  .p2 { width:3px;height:3px; bottom:0; left:50%; transform:translateX(-50%); background:rgba(220,90,10,0.7);   box-shadow:0 0 5px 2px rgba(200,70,5,0.6);  }
  .p3 { width:4px;height:4px; top:50%;  right:0;  transform:translateY(-50%); background:rgba(240,120,20,0.8);  box-shadow:0 0 6px 2px rgba(220,80,5,0.7);  }