.pen-text {
    fill: none;
    stroke: #8b7b6a; /* earthy ink tone */
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
  
    animation: writeText 3s ease-in-out infinite;
  }
  
  @keyframes writeText {
    0% {
      stroke-dashoffset: 400;
    }
    40% {
      stroke-dashoffset: 0;
    }
    60% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: 400;
    }
  }

/* Orbital glow ring */
.glow-orbit {
    position: absolute;
    inset: -30%; /* extend outside for soft edges */
  
    background: conic-gradient(
      #facc15,
      #22c55e,
      #78350f,
      #facc15
    );
  
    filter: blur(12px);
    opacity: 0.8;
  
    animation: orbitSpin 3s linear infinite;
  }
  
  /* Rotation animation */
  @keyframes orbitSpin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes pulseGlow {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
  }
  
  .glow-orbit {
    animation: orbitSpin 3s linear infinite, pulseGlow 2s ease-in-out infinite;
  }
  /* Initial ignition burst */
.ignite {
    animation: igniteBurst 1.2s ease-out forwards, orbitSpin 3s linear infinite;
  }
  
  @keyframes igniteBurst {
    0% {
      transform: scale(0.3) rotate(0deg);
      opacity: 0;
      filter: blur(20px);
    }
    40% {
      transform: scale(1.5) rotate(120deg);
      opacity: 1;
      filter: blur(16px);
    }
    70% {
      transform: scale(1.2) rotate(240deg);
      filter: blur(12px);
    }
    100% {
      transform: scale(1) rotate(360deg);
      filter: blur(12px);
    }
  }
  @keyframes breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
  }
  
  .glow-orbit {
    animation: orbitSpin 3s linear infinite, breathe 4s ease-in-out infinite;
  }
  /* glowing effect */
.typing-glow {
    text-shadow:
      0 0 6px rgba(250,204,21,0.8),
      0 0 12px rgba(34,197,94,0.7),
      0 0 18px rgba(120,53,15,0.6);
  }
  
  /* typing cursor */
  #typing-text {
    border-right: 3px solid #facc15;
    padding-right: 6px;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    animation: blinkCursor 0.8s infinite;
  }
  
  @keyframes blinkCursor {
    0%, 50%, 100% { border-color: #facc15; }
    25%, 75% { border-color: transparent; }
  }