/* =============================================
   NEON CAP — Neon Graduation Cap Interactive Widget
   ============================================= */

/* === CONTAINER === */
.ncap-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  animation: fr .8s ease .2s forwards;
  opacity: 0;
}

/* === SCENE === */
.ncap-scene {
  width: 300px;
  height: 300px;
  position: relative;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === BACKGROUND GLOW === */
.ncap-bg-glow {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13, 107, 78, .08) 0%, transparent 70%);
  transition: all 0.5s ease;
  z-index: 0;
}

.ncap-scene:hover .ncap-bg-glow {
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(13, 107, 78, .14) 0%, rgba(200, 164, 78, .06) 50%, transparent 70%);
}

/* === CAP SVG CONTAINER === */
.ncap-cap {
  position: relative;
  z-index: 2;
  width: 180px;
  height: 160px;
  transition: transform 0.4s cubic-bezier(.4, 0, .2, 1);
}

.ncap-scene:hover .ncap-cap {
  transform: translateY(-8px);
}

/* Cap SVG styling */
.ncap-cap svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 20px rgba(13, 107, 78, .2));
  transition: filter 0.4s ease;
}

.ncap-scene:hover .ncap-cap svg {
  filter: drop-shadow(0 8px 35px rgba(13, 107, 78, .35))
         drop-shadow(0 0 20px rgba(13, 107, 78, .15));
}

/* Neon stroke animation */
.ncap-outline {
  fill: none;
  stroke: var(--em);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: neonDraw 2s ease forwards 0.5s;
  filter: drop-shadow(0 0 3px rgba(13, 107, 78, .4));
  transition: filter 0.4s ease, stroke 0.4s ease;
}

.ncap-scene:hover .ncap-outline {
  filter: drop-shadow(0 0 8px rgba(13, 107, 78, .6))
         drop-shadow(0 0 16px rgba(13, 107, 78, .3));
  stroke: var(--em-l);
}

.ncap-fill {
  fill: rgba(13, 107, 78, .04);
  transition: fill 0.4s ease;
}

.ncap-scene:hover .ncap-fill {
  fill: rgba(13, 107, 78, .08);
}

@keyframes neonDraw {
  to { stroke-dashoffset: 0; }
}

/* === TASSEL === */
.ncap-tassel {
  position: absolute;
  top: 58px;
  right: 52px;
  z-index: 3;
  transform-origin: top center;
  animation: tasselSway 3s ease-in-out infinite;
}

.ncap-tassel-line {
  width: 2px;
  height: 50px;
  background: linear-gradient(180deg, var(--gold), var(--gold-l));
  margin: 0 auto;
  border-radius: 1px;
  box-shadow: 0 0 6px rgba(200, 164, 78, .3);
  transition: box-shadow 0.4s ease, height 0.4s ease;
}

.ncap-scene:hover .ncap-tassel-line {
  box-shadow: 0 0 12px rgba(200, 164, 78, .5);
  height: 55px;
}

.ncap-tassel-end {
  width: 10px;
  height: 14px;
  background: linear-gradient(180deg, var(--gold), var(--gold-l));
  border-radius: 0 0 5px 5px;
  margin: 0 auto;
  box-shadow: 0 0 8px rgba(200, 164, 78, .3);
  transition: box-shadow 0.4s ease;
}

.ncap-scene:hover .ncap-tassel-end {
  box-shadow: 0 0 14px rgba(200, 164, 78, .5);
}

@keyframes tasselSway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(5deg); }
}

.ncap-scene:hover .ncap-tassel {
  animation: tasselSwayActive 1.8s ease-in-out infinite;
}

@keyframes tasselSwayActive {
  0%, 100% { transform: rotate(-8deg); }
  25% { transform: rotate(10deg); }
  50% { transform: rotate(-6deg); }
  75% { transform: rotate(12deg); }
}

/* === A+ TEXT TRAIL === */
.ncap-aplus {
  position: absolute;
  z-index: 4;
  font-family: var(--fd);
  font-size: 0;
  opacity: 0;
  color: var(--gold);
  pointer-events: none;
  transition: all 0.6s cubic-bezier(.4, 0, .2, 1);
  text-shadow: 0 0 10px rgba(200, 164, 78, .4);
  right: 20px;
  top: 38px;
}

.ncap-scene:hover .ncap-aplus {
  font-size: 42px;
  opacity: 1;
  right: -10px;
  top: 20px;
  text-shadow:
    0 0 10px rgba(200, 164, 78, .5),
    0 0 30px rgba(200, 164, 78, .3),
    0 0 50px rgba(200, 164, 78, .15);
}

/* A+ afterglow */
.ncap-aplus::after {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 164, 78, .15) 0%, transparent 60%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.ncap-scene:hover .ncap-aplus::after {
  opacity: 1;
  animation: aplusPulse 2s ease-in-out infinite;
}

@keyframes aplusPulse {
  0%, 100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.3); opacity: .4; }
}

/* === BOKEH CIRCLES === */
.ncap-bokeh {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.ncap-scene:hover .ncap-bokeh {
  opacity: var(--bok-opacity, 0.3);
  animation: bokehFloat var(--bok-dur, 4s) ease-in-out var(--bok-del, 0s) infinite;
}

@keyframes bokehFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(var(--bok-dx, 8px), var(--bok-dy, -12px)) scale(1.1);
  }
  66% {
    transform: translate(calc(var(--bok-dx, 8px) * -0.5), calc(var(--bok-dy, -12px) * -0.7)) scale(0.9);
  }
}

/* === NEON RING PULSE === */
.ncap-ring {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 1.5px solid rgba(13, 107, 78, .1);
  z-index: 0;
  transition: all 0.5s ease;
}

.ncap-scene:hover .ncap-ring {
  border-color: rgba(13, 107, 78, .2);
  animation: ringPulse 2.5s ease-in-out infinite;
}

@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: .5; }
}

.ncap-ring-outer {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 1px solid rgba(200, 164, 78, .06);
  z-index: 0;
  transition: all 0.5s ease;
}

.ncap-scene:hover .ncap-ring-outer {
  border-color: rgba(200, 164, 78, .12);
  animation: ringPulse 3s ease-in-out 0.3s infinite;
}

/* === SPARKLE PARTICLES === */
.ncap-spark {
  position: absolute;
  width: var(--sp-size, 3px);
  height: var(--sp-size, 3px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.ncap-spark--em {
  background: var(--em-l);
  box-shadow: 0 0 6px rgba(17, 176, 122, .5);
}

.ncap-spark--gold {
  background: var(--gold-l);
  box-shadow: 0 0 6px rgba(232, 202, 114, .5);
}

.ncap-scene:hover .ncap-spark {
  animation: sparkBurst var(--sp-dur, 2s) ease-in-out var(--sp-del, 0s) infinite;
}

@keyframes sparkBurst {
  0% { opacity: 0; transform: translate(0, 0) scale(0); }
  20% { opacity: 1; transform: translate(var(--sp-dx, 10px), var(--sp-dy, -15px)) scale(1); }
  80% { opacity: .8; transform: translate(calc(var(--sp-dx, 10px) * 1.8), calc(var(--sp-dy, -15px) * 1.8)) scale(1.2); }
  100% { opacity: 0; transform: translate(calc(var(--sp-dx, 10px) * 2.2), calc(var(--sp-dy, -15px) * 2.2)) scale(0); }
}

/* === LIGHT TRAIL (tassel to A+) === */
.ncap-trail {
  position: absolute;
  right: 42px;
  top: 100px;
  width: 60px;
  height: 2px;
  z-index: 3;
  opacity: 0;
  transform: rotate(-45deg);
  transform-origin: left center;
  transition: opacity 0.5s ease 0.2s;
}

.ncap-trail-line {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--gold), transparent);
  border-radius: 1px;
  animation: trailShimmer 1.5s ease-in-out infinite;
}

.ncap-scene:hover .ncap-trail {
  opacity: .6;
}

@keyframes trailShimmer {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}

/* === HINT TEXT === */
.ncap-hint {
  font-size: 11px;
  color: var(--mu);
  opacity: .6;
  margin-top: -16px;
  display: flex;
  align-items: center;
  gap: 5px;
  animation: ncapHintPulse 2.5s ease-in-out infinite;
}

.ncap-hint svg {
  width: 14px;
  height: 14px;
  opacity: .5;
}

@keyframes ncapHintPulse {
  0%, 100% { opacity: .6; }
  50% { opacity: .3; }
}

.ncap-scene.interacted ~ .ncap-hint {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* === CTA BUTTON === */
.ncap-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  padding: 18px 28px;
  background: linear-gradient(135deg, var(--em) 0%, var(--em-d) 100%);
  color: var(--wh);
  border: none;
  border-radius: 14px;
  font-family: var(--fb);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .5px;
  cursor: pointer;
  transition: all .35s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 28px rgba(13, 107, 78, .25),
    0 0 0 1px rgba(13, 107, 78, .1);
  text-decoration: none;
}

.ncap-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, .1) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.ncap-cta:hover::before {
  transform: translateX(100%);
}

.ncap-cta:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 14px 40px rgba(13, 107, 78, .3),
    0 0 0 1px rgba(13, 107, 78, .15),
    0 0 30px rgba(13, 107, 78, .1);
}

.ncap-cta:active {
  transform: translateY(-1px) scale(1);
}

.ncap-cta svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.ncap-cta:hover svg {
  transform: translateX(3px);
}

/* === TRUST BADGES === */
.ncap-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: -8px;
}

.ncap-trust span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--mu);
  font-weight: 500;
}

.ncap-trust svg {
  width: 13px;
  height: 13px;
  color: var(--em-l);
  flex-shrink: 0;
}

/* === MOBILE INLINE CAP (between h1 and subtitle) === */
.ncap-mobile-inline {
  display: none;
}

/* === MOBILE === */
@media (max-width: 768px) {
  .ncap-mobile-inline {
    display: flex;
    justify-content: center;
    margin: 12px 0 8px;
  }

  .ncap-mobile-inline .ncap-scene {
    width: 200px;
    height: 180px;
  }

  .ncap-mobile-inline .ncap-cap {
    width: 120px;
    height: 108px;
  }

  .ncap-mobile-inline .ncap-tassel {
    top: 38px;
    right: 34px;
  }

  .ncap-mobile-inline .ncap-tassel-line { height: 34px; }
  .ncap-mobile-inline .ncap-tassel-end { width: 7px; height: 10px; }

  .ncap-mobile-inline .ncap-aplus { right: 12px; top: 28px; }
  .ncap-mobile-inline .ncap-scene:hover .ncap-aplus {
    font-size: 28px;
    right: -2px;
    top: 14px;
  }

  .ncap-mobile-inline .ncap-ring { width: 140px; height: 140px; }
  .ncap-mobile-inline .ncap-ring-outer { width: 170px; height: 170px; }
  .ncap-mobile-inline .ncap-bg-glow { width: 150px; height: 150px; }

  .ncap-widget {
    gap: 22px;
    opacity: 1;
    animation: none;
  }

  .ncap-scene {
    width: 240px;
    height: 240px;
  }

  .ncap-cap {
    width: 140px;
    height: 125px;
  }

  .ncap-tassel {
    top: 46px;
    right: 44px;
  }

  .ncap-tassel-line { height: 38px; }
  .ncap-tassel-end { width: 8px; height: 11px; }

  .ncap-aplus { right: 16px; top: 35px; }
  .ncap-scene:hover .ncap-aplus {
    font-size: 34px;
    right: -4px;
    top: 18px;
  }

  .ncap-ring { width: 160px; height: 160px; }
  .ncap-ring-outer { width: 200px; height: 200px; }
  .ncap-bg-glow { width: 180px; height: 180px; }

  .ncap-cta {
    font-size: 15px;
    padding: 16px 24px;
    max-width: 280px;
  }

  .ncap-hint { display: none; }

  .ncap-trust {
    gap: 12px;
  }
  .ncap-trust span {
    font-size: 10px;
  }
}

@media (max-width: 380px) {
  .ncap-mobile-inline .ncap-scene {
    width: 170px;
    height: 155px;
  }

  .ncap-mobile-inline .ncap-cap {
    width: 100px;
    height: 90px;
  }

  .ncap-scene {
    width: 210px;
    height: 210px;
  }

  .ncap-cap {
    width: 120px;
    height: 108px;
  }

  .ncap-cta {
    font-size: 14px;
    padding: 14px 20px;
    max-width: 260px;
  }
}