/* ══════════════════════════════════════════════════════════════════════
   BRAHMASTRA — CREATOR SECTION FX
   Scoped to .developer-section. Turns the card into a scanned dossier.
   Does NOT touch transform on .dev-card-inner or .dev-photo —
   those are owned by the 3D tilt in main.js.
   Load AFTER css/style.css
   ══════════════════════════════════════════════════════════════════════ */

/* ─── 1. DOSSIER GRID BACKDROP ──────────────────────────────────────── */
.dev-container { position: relative; }
.dev-container::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(168, 85, 247, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, .055) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at 22% 100%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse at 22% 100%, #000, transparent 72%);
}
.dev-visual-3d, .dev-info { position: relative; z-index: 1; }

/* ─── 2. SWEEPING SHEEN ACROSS THE WHOLE CARD ───────────────────────── */
.dev-container::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 42%;
  pointer-events: none; z-index: 2; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent, rgba(168, 85, 247, .12) 45%, rgba(255, 255, 255, .07) 55%, transparent);
  animation: devSheen 7s ease-in-out infinite;
}
@keyframes devSheen {
  0%, 68%  { transform: translateX(-160%); }
  92%, 100%{ transform: translateX(360%); }
}

/* ─── 3. ORBITAL RINGS BEHIND THE PHOTO ─────────────────────────────── */
.dev-halo {
  position: absolute; left: 50%; bottom: 8px; z-index: 0;
  width: 210px; height: 210px; margin-left: -105px;
  pointer-events: none;
}
.dev-halo span {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(168, 85, 247, .3);
}
.dev-halo span:nth-child(1) { animation: devSpinA 14s linear infinite; }
.dev-halo span:nth-child(2) { inset: 16px; border-color: rgba(236, 72, 153, .26); animation: devSpinB 10s linear infinite; }
.dev-halo span:nth-child(3) { inset: 34px; border-color: rgba(34, 211, 238, .2);  animation: devSpinA 18s linear infinite; }
.dev-halo span::after {
  content: ""; position: absolute; top: -3px; left: 50%; margin-left: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; color: #ec4899;
  box-shadow: 0 0 12px #ec4899;
}
.dev-halo span:nth-child(2)::after { color: #a855f7; box-shadow: 0 0 12px #a855f7; }
.dev-halo span:nth-child(3)::after { color: #22d3ee; box-shadow: 0 0 12px #22d3ee; }
@keyframes devSpinA { to { transform: rotate(360deg); } }
@keyframes devSpinB { to { transform: rotate(-360deg); } }

/* ─── 4. PHOTO SCANLINE ─────────────────────────────────────────────── */
.dev-scan {
  position: absolute; left: -6px; right: -6px; height: 56px; z-index: 2;
  pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(180deg, transparent, rgba(34, 211, 238, .16) 58%, rgba(255, 255, 255, .28) 74%, transparent);
  animation: devScan 4.5s ease-in-out infinite;
}
@keyframes devScan {
  0%, 100% { transform: translateY(-60px); opacity: 0; }
  15%      { opacity: 1; }
  85%      { opacity: 1; }
  55%      { transform: translateY(300px); }
}

/* ─── 5. HUD READOUT CHIPS ──────────────────────────────────────────── */
.dev-hud {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.dev-hud span {
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace; font-size: .58rem;
  letter-spacing: 1.1px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
  color: #67e8f9; background: rgba(34, 211, 238, .07);
  border: 1px solid rgba(34, 211, 238, .28);
  opacity: 0; transform: translateX(-10px);
  transition: opacity .5s ease, transform .5s ease;
}
.dev-hud span:nth-child(2) { align-self: flex-end; color: #f0abfc; background: rgba(217, 70, 239, .07); border-color: rgba(217, 70, 239, .28); transform: translateX(10px); }
.dev-hud span:nth-child(3) { align-self: flex-start; color: #86efac; background: rgba(16, 185, 129, .07); border-color: rgba(16, 185, 129, .3); }
.developer-section.dev-on .dev-hud span { opacity: 1; transform: none; }
.developer-section.dev-on .dev-hud span:nth-child(2) { transition-delay: .18s; }
.developer-section.dev-on .dev-hud span:nth-child(3) { transition-delay: .36s; }
.dev-hud b { color: #fff; font-weight: 700; }

/* ─── 6. VERIFIED STAMP ─────────────────────────────────────────────── */
.dev-stamp {
  position: absolute; right: 26px; top: 26px; z-index: 4;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  font-family: 'JetBrains Mono', monospace; font-size: .6rem;
  letter-spacing: 1.4px; text-transform: uppercase; font-weight: 700;
  color: #6ee7b7; background: rgba(16, 185, 129, .09);
  border: 1px solid rgba(16, 185, 129, .38);
  box-shadow: 0 0 22px rgba(16, 185, 129, .18);
  opacity: 0; transform: scale(1.5) rotate(-8deg);
  transition: opacity .4s ease, transform .5s cubic-bezier(.2, 1.4, .4, 1);
}
.dev-stamp::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #10b981; box-shadow: 0 0 9px #10b981;
  animation: devBlink 1.6s ease-in-out infinite;
}
@keyframes devBlink { 50% { opacity: .3; } }
.developer-section.dev-on .dev-stamp {
  opacity: 1; transform: scale(1) rotate(0deg); transition-delay: .55s;
}

/* ─── 7. NAME RGB GLITCH ON HOVER ───────────────────────────────────── */
.dev-name { cursor: default; }
.dev-name:hover { animation: devGlitch .4s steps(2) 2; }
@keyframes devGlitch {
  0%   { text-shadow: none; }
  30%  { text-shadow: -2px 0 #ef4444, 2px 0 #22d3ee; }
  60%  { text-shadow: 2px 0 #ef4444, -2px 0 #22d3ee; }
  100% { text-shadow: none; }
}

/* ─── 8. BIO WORD REVEAL ────────────────────────────────────────────── */
.dev-bio .w {
  display: inline-block; opacity: 0;
  transform: translateY(9px);
  transition: opacity .45s ease, transform .45s ease;
}
.developer-section.dev-on .dev-bio .w { opacity: 1; transform: none; }

/* ─── 9. CONTACT ITEMS — STAGGER IN + SHIMMER ───────────────────────── */
.contact-item {
  position: relative; overflow: hidden;
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease,
              background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.developer-section.dev-on .contact-item { opacity: 1; transform: none; }
.developer-section.dev-on .contact-item:nth-child(1) { transition-delay: .60s; }
.developer-section.dev-on .contact-item:nth-child(2) { transition-delay: .70s; }
.developer-section.dev-on .contact-item:nth-child(3) { transition-delay: .80s; }
.developer-section.dev-on .contact-item:hover { transform: translateY(-3px); }

.contact-item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .16) 50%, transparent 62%);
  transform: translateX(-130%);
}
.contact-item:hover::after { animation: devShimmer .75s ease-out; }
@keyframes devShimmer { to { transform: translateX(130%); } }

.contact-item:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 26px var(--accent-glow);
}
.contact-item .c-icon { transition: transform .3s cubic-bezier(.2, 1.5, .4, 1), filter .3s ease; }
.contact-item:hover .c-icon {
  transform: scale(1.22) rotate(-7deg);
  filter: drop-shadow(0 0 8px currentColor);
}

/* ─── 10. TITLE UNDERLINE DRAW ──────────────────────────────────────── */
.dev-title { position: relative; display: inline-block; }
.dev-title::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #ff9933, var(--accent), #ec4899);
  transition: width .9s cubic-bezier(.2, .8, .3, 1) .25s;
}
.developer-section.dev-on .dev-title::after { width: 100%; }

/* ─── RESPONSIVE / REDUCED MOTION ───────────────────────────────────── */
@media (max-width: 780px) {
  .dev-halo { display: none; }
  .dev-stamp { right: 16px; top: 16px; font-size: .55rem; }
  .dev-hud { position: static; flex-direction: row; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
  .dev-hud span, .dev-hud span:nth-child(2) { align-self: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .dev-container::after, .dev-halo span, .dev-scan,
  .dev-stamp::before, .contact-item:hover::after { animation: none !important; }
  .dev-container::after, .dev-scan { display: none; }
  .dev-name:hover { animation: none; }
  .dev-bio .w, .contact-item, .dev-hud span, .dev-stamp {
    opacity: 1 !important; transform: none !important;
  }
}