:root {
    --gn-trainingInProgress: #0064ED;       /* brand blue */
    --gn-trainingInProgress-dark: #0B2A66;  /* dark accent */
    --gn-trainingInProgress-accent: #00B5D8;/* cyan accent */
  }
  
  /* Container */
  .gn-diamond-orbit {
    position: relative;
    width: 88px;
    height: 88px;
  }
  
  /* Diamond core */
  .gn-diamond-orbit .diamond {
    position: absolute;
    inset: 0;
    display: grid;/*display: inline-block;*/
    place-items: center;
  }
  .gn-diamond-orbit .diamond::before {
    content: "";
    width: 52px;
    height: 52px;
    border: 6px solid var(--gn-trainingInProgress);
    border-radius: 6px;
    transform: rotate(45deg);
    box-shadow: 0 0 14px rgba(0, 100, 237, 0.25);
    animation: gn-breathe 1.9s ease-in-out infinite;
  }
  
  /* Orbit ring */
  .gn-diamond-orbit .ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(0, 100, 237, 0.18);
    animation: gn-spin 2.2s linear infinite;
  }
  
  /* Dots on orbit */
  .gn-diamond-orbit .dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 999px;
  }
  
  .gn-diamond-orbit .d1 {
    background: var(--gn-trainingInProgress);
    transform: rotate(0deg) translate(34px);
  }
  .gn-diamond-orbit .d2 {
    background: var(--gn-trainingInProgress-dark);
    transform: rotate(120deg) translate(26px);
  }
  .gn-diamond-orbit .d3 {
    background: var(--gn-trainingInProgress-accent);
    transform: rotate(240deg) translate(20px);
  }
  
  /* Animations */
  @keyframes gn-spin {
    to { transform: rotate(360deg); }
  }
  @keyframes gn-breathe {
    0%,100% { transform: rotate(45deg) scale(1); }
    50% { transform: rotate(45deg) scale(1.08); }
  }
  
  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .gn-diamond-orbit .diamond::before,
    .gn-diamond-orbit .ring {
      animation: none;
    }
  }


/* message typewriting effect */

.message {
    transition: opacity 1s ease-in-out; /* Smooth transition */
    opacity: 1; /* Fully visible */
}
  
.fade2 {
    opacity: 0; /* Make it fade out */
}

.typewriter-text {
    overflow: hidden;
    border-right: .15em solid orange; /* Cursor effect */
    white-space: nowrap;
    letter-spacing: .15em; /* Space between letters */
    animation: typing 3.5s steps(30, end), blink-caret .75s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange; }
}