.card {
    position: relative;
    left: 0; right: 0;
    top: 19%; 
    margin: auto;
    width: 320px; height: auto;
    border-radius: 16px;
    background: #191919aa;
    background: linear-gradient(
        180deg,
        #292929aa 0%,
        #191919cc 50%
    );
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: inset 0 2px 2px 0 #e7c4a088,
    inset 0 -2px 2px 0 #0003;
    
    color: #ccc;
    text-shadow: 1px 1px 3px #333a;
    padding: 24px;
    padding-right: 42px;
    display: flex; flex-direction: column; justify-content: end;
    
}
.card:hover{
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
 box-shadow: 
    0 0 15px color-mix(in srgb, var(--primary-color), transparent 30%),
    0 0 30px color-mix(in srgb, var(--accent-color), transparent 30%);
  transform: translateY(-6px) scale(1.03);
  transition: all 1s ease;
        color: black;

}
.accents {
    user-select: none;
    -webkit-user-select:none;
    pointer-events: none;
    position: sticky;
    left: 0; right: 0;
    top: 20%;

    .top-light {
        position: absolute;
        left: 0; right: 0; 
        top: -42px;
        margin: auto;
        width: 284px;
        height: 6px;
        border-radius: 10px;
        background: #fffef9;
        box-shadow: 
        0 0px 1px 1px #ffc78e,
        0 1px 2px 1px #ff942977,
        0 2px 6px 1px #e98b2d77,
        0 4px 12px 0px #ff9e3d99,
        0 12px 20px 12px #ff800044;
    }
}
/* ------------------------------ */
/* Circular Edge Glow — Smooth Slow Version */
/* ------------------------------ */
.accents .light,
.accents .light.sm {
  position: absolute;
  border-radius: 50%;
  z-index: -2;
  overflow: hidden;
}

/* Large glowing circle */
.accents .light {
  width: 190px;
  height: 260px;
  top: 264px;
  margin: auto;
  background: radial-gradient(circle at center, rgba(255,200,120,0.05) 40%, transparent 70%);
  border: 2px solid transparent;
  mask: radial-gradient(circle, transparent 60%, black 61%);
  -webkit-mask: radial-gradient(circle, transparent 60%, black 61%);
  animation: edgeFlow 6s ease-in-out infinite;
}

/* Smaller glowing circle */
.accents .light.sm {
  width: 130px;
  height: 180px;

  top: 142px;
  margin: auto;
  background: radial-gradient(circle at center, rgba(255,180,100,0.05) 40%, transparent 70%);
  border: 2px solid transparent;
  mask: radial-gradient(circle, transparent 60%, black 61%);
  -webkit-mask: radial-gradient(circle, transparent 60%, black 61%);
  animation: edgeFlowReverse 8s ease-in-out infinite;
}

/* Animated glowing edges */
.accents .light::before,
.accents .light.sm::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid;
  border-color: rgba(255, 190, 90, 0.1)
               rgba(255, 190, 90, 0.85)
               rgba(255, 190, 90, 0.15)
               rgba(255, 190, 90, 0.3);
  animation: rotateEdges 9s linear infinite;
}

/* Smaller inner edge movement */
.accents .light.sm::before {
  border-color: rgba(255, 160, 70, 0.1)
               rgba(255, 160, 70, 0.85)
               rgba(255, 160, 70, 0.15)
               rgba(255, 160, 70, 0.3);
  animation: rotateEdgesReverse 10s linear infinite;
}

/* Rotating glow movement */
@keyframes rotateEdges {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes rotateEdgesReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

/* Subtle breathing glow */
@keyframes edgeFlow {
  0%,100% { box-shadow: 0 0 18px rgba(255,190,90,0.1); }
  50% { box-shadow: 0 0 40px rgba(255,190,90,0.25); }
}
@keyframes edgeFlowReverse {
  0%,100% { box-shadow: 0 0 18px rgba(255,160,70,0.1); }
  50% { box-shadow: 0 0 40px rgba(255,160,70,0.25); }
}


@keyframes rotate360 { to { rotate: 360deg;} }
@keyframes wobble {
    0% {
        transform: translateX(10px) translateY(20px) rotate(-3deg) scale(1);
    }
    20% {
        transform: translateX(-44px) translateY(-8px) rotate(6deg) scale(1.02);
    }
    60% {
        transform: translateX(32px) translateY(18px) rotate(-8deg) scale(1);
    }
    80% {
        transform: translateX(-42px) translateY(-22px) rotate(12deg) scale(0.94);
    }
    100% {
        transform: translateX(10px) translateY(20px) rotate(-3deg) scale(1);
    }
}


.top-light {
        position: absolute;
        left: 0; right: 0; 
        margin: auto;
        width: 90%;
        height: 6px;
        border-radius: 10px;
        background: #fffef9;
        box-shadow: 
        0 0px 1px 1px #ffc78e,
        0 1px 2px 1px #ff942977,
        0 2px 6px 1px #e98b2d77,
        0 4px 12px 0px #ff9e3d99,
        0 12px 20px 12px #ff800044;
    }
    
/*  ==== animated lines ====  */

    .lines {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 100%;
      margin: auto;
      width: 90vw;
      pointer-events: none; /* safe for overlays */
    }
    
    .line {
      position: absolute;
      width: 1px;
      height: 100%;
      top: 0;
      left: 50%;
      background: rgba(255, 255, 255, 0);
      overflow: hidden;
    }

    .line::after {
      content: '';
      display: block;
      position: absolute;
      height: 15vh;
      width: 100%;
      top: -50%;
      left: 0;
      background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0) 0%, 
        #ffffff 75%, 
        #ffffff 100%);
      animation: drop 7s 0s infinite;
      animation-fill-mode: forwards;
      animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
    }
    
    .line:nth-child(1) {
      margin-left: -25%;
    }
    .line:nth-child(1)::after {
      animation-delay: 2s;
    }
    
    .line:nth-child(2) {
      margin-left: 0; /* center line */
    }
    .line:nth-child(2)::after {
      animation-delay: 1.2s;
    }
    
    .line:nth-child(3) {
      margin-left: 25%;
    }
    .line:nth-child(3)::after {
      animation-delay: 2.5s;
    }
    
    @keyframes drop {
      0% {
        top: -50%;
      }
      100% {
        top: 110%;
      }
    }

    /* Optional: Add a subtle glow for modern look */
    .line::after {
      box-shadow: 0 0 6px 1px rgb(0, 225, 255);
      background: linear-gradient(to bottom, 
        rgba(0, 255, 0, 0) 0%, 
                       rgba(255, 115, 90, 0.3)
 75%, 
        rgb(13, 161, 149) 100%);
    }