/* Global animation & interaction utilities
   - Designed to work with your Tailwind-based pages
   - Adds interactive classes that JS will toggle on events
   - Respects prefers-reduced-motion
*/
:root {
  --primary: #f20d46;
  --anim-duration: 280ms;
}

/* Force pure light mode globally */
body {
  background-color: #ffffff !important;
  color: #111827 !important;
}

@media (prefers-reduced-motion: reduce) {

  .anim-safe,
  .anim-interaction {
    animation: none !important;
    transition: none !important;
  }
}

/* Interaction helper classes toggled by JS */
.anim-interaction {
  will-change: transform, opacity, filter;
}

/* Hover / pointer interactions */
.is-hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 30px rgba(242, 13, 70, 0.12);
  transition: transform var(--anim-duration) ease, box-shadow var(--anim-duration) ease;
}

.is-press {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08) !important;
  transition: transform 120ms ease;
}

.is-click {
  animation: clickPulse 320ms ease-out;
}

.is-dblclick {
  animation: dblPulse 420ms cubic-bezier(.2, .8, .2, 1);
}

.is-move {
  transform: translateZ(0);
  filter: blur(0.2px);
}

/* Keyboard interactions */
.key-active {
  outline: 3px solid rgba(242, 13, 70, 0.12);
  box-shadow: 0 10px 25px rgba(242, 13, 70, 0.08);
  transform: translateY(-2px) scale(1.01);
}

/* Small focus ring for keyboard nav */
.keyboard-focus-visible :where(a, button, input, textarea, select) {
  outline: none;
}

.keyboard-focus-visible .focus-visible {
  outline: 3px solid rgba(34, 197, 94, 0.15);
  box-shadow: 0 6px 18px rgba(34, 197, 94, 0.08);
}

/* Animations used by JS toggles */
@keyframes clickPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  40% {
    transform: scale(0.96);
    opacity: 0.95;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes dblPulse {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(0.92);
  }

  60% {
    transform: scale(1.04);
  }

  100% {
    transform: scale(1);
  }
}

/* subtle key flash */
.key-flash {
  animation: keyFlash 280ms ease-out;
}

@keyframes keyFlash {
  0% {
    box-shadow: 0 0 0 rgba(242, 13, 70, 0);
  }

  50% {
    box-shadow: 0 6px 18px rgba(242, 13, 70, 0.12);
  }

  100% {
    box-shadow: 0 0 0 rgba(242, 13, 70, 0);
  }
}

/* utility for brief tooltip-like scale */
.scale-quick {
  transition: transform 150ms ease, opacity 150ms ease;
}

/* responsive: reduce motion on small devices */
@media (max-width: 640px) {
  .is-hover {
    transform: none;
    box-shadow: none;
  }
}

/* exposed class to opt-out elements */
[data-no-anim] {
  transition: none !important;
  animation: none !important;
}

/* --- TRANSACTIONAL EFFECTS --- */

/* 1. Page Entry Animation */
@keyframes pageFadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-enter {
  animation: pageFadeSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 2. Scroll Reveal (Handled by GSAP) */
.scroll-reveal {
  will-change: opacity, transform;
}

/* --- PREMIUM SHADOW EFFECTS --- */
.premium-layered-shadow {
  box-shadow: 
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 20px 25px -5px rgba(0, 0, 0, 0.15),
    0 25px 50px -12px rgba(8, 112, 184, 0.25);
  transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-layered-shadow:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 20px 25px -5px rgba(0, 0, 0, 0.15),
    0 25px 50px -12px rgba(0, 0, 0, 0.2),
    0 40px 60px -15px rgba(8, 112, 184, 0.35);
}

.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger delays for groups */
.delay-100 {
  transition-delay: 100ms;
}

.delay-200 {
  transition-delay: 200ms;
}

.delay-300 {
  transition-delay: 300ms;
}

.delay-400 {
  transition-delay: 400ms;
}

/* 3. Deep Hover Float (Premium Feel) */
.hover-float {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.hover-float:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 24px 48px -5px rgba(0, 0, 0, 0.2), 0 12px 24px -5px rgba(0, 0, 0, 0.12);
}

/* 4. Button Press Effect */
.btn-press:active {
  transform: scale(0.96);
}

/* 5. Ambient Blob Animation (New) */
@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }

  33% {
    transform: translate(30px, -50px) scale(1.1);
  }

  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }

  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* 6. Button Sheen (Wipe Effect) */
.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-25deg);
  transition: 0s;
  pointer-events: none;
}

.btn-shine:hover::after {
  left: 200%;
  transition: 0.7s ease-in-out;
}

/* 7. Skill Bar Fill */
.animate-fill {
  width: 0;
  transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 8. Staggered List Children */
[data-stagger-list]>* {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-stagger-list].visible>* {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays handled by JS or CSS nth-child if static */

/* 5. Ambient Blob Animation (New) */
@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }

  33% {
    transform: translate(30px, -50px) scale(1.1);
  }

  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }

  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* Glassmorphism & Premium Cards */
.glass-card, .glass-card-dark {
  position: relative;
  border-radius: 1.5rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.glass-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid transparent; 
  box-shadow: 
    0 10px 30px -10px rgba(0, 0, 0, 0.05),
    0 1px 3px rgba(0,0,0,0.02);
}

.glass-card-dark {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid transparent;
  box-shadow: 
    0 15px 35px -10px rgba(0, 0, 0, 0.3),
    0 1px 3px rgba(0,0,0,0.2);
}

.glass-card::before, .glass-card-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
  padding: 1.5px;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.glass-card::before {
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(242, 13, 70, 0.1), rgba(255,255,255,0), rgba(79, 70, 229, 0.1), rgba(255,255,255,0.5));
}

.glass-card-dark::before {
  background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(242, 13, 70, 0.2), rgba(255,255,255,0), rgba(79, 70, 229, 0.2), rgba(255,255,255,0.1));
}

.hover-card-3d {
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s ease;
  transform-style: preserve-3d;
}

.hover-card-3d:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 24px 48px -10px rgba(0, 0, 0, 0.15),
    0 15px 25px rgba(242, 13, 70, 0.06),
    0 20px 40px rgba(79, 70, 229, 0.08);
}

.dark .hover-card-3d:hover {
  box-shadow: 
    0 30px 60px -10px rgba(0, 0, 0, 0.4),
    0 15px 35px rgba(242, 13, 70, 0.15),
    0 25px 50px rgba(79, 70, 229, 0.15);
}

/* Magnetic Button (Optional utility) */
.magnetic-btn {
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- PRO UPGRADE: Custom Cursor --- */
@media (pointer: fine) {
  body {
    cursor: none; /* Hide default cursor on desktop */
  }
}

.cursor-dot,
.cursor-outline {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  z-index: 10000;
  pointer-events: none;
  mix-blend-mode: difference;
}

.cursor-dot {
  width: 8px;
  height: 8px;
  background-color: white;
  transform: translate(-50%, -50%);
}

.cursor-outline {
  width: 40px;
  height: 40px;
  border: 1px solid white;
  transform: translate(-50%, -50%);
}

body.hovering .cursor-dot {
  transform: translate(-50%, -50%) scale(0.5);
}

body.hovering .cursor-outline {
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.1);
}

/* --- PRO UPGRADE: Marquee --- */
.marquee-container {
  display: flex;
  width: max-content;
  animation: marquee 20s linear infinite;
}

.marquee-container:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- PRO UPGRADE: Noise Overlay --- */
.noise-overlay {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* --- PRO UPGRADE: Text Reveal --- */
.reveal-text {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  display: inline-block;
}
.reveal-word {
  display: inline-block;
  white-space: pre;
}

/* ==========================================================
   GLOBAL PREMIUM DESIGN SYSTEM (AI SaaS Style)
   ========================================================== */

/* 1. Global Particle Background */
#network-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Allow the tsParticles canvas to receive mouse events */
#network-background canvas {
  pointer-events: auto;
}

/* 2. Global Floating Card System & Border Glow & Soft Motion */
.card-premium {
  background: rgba(255, 255, 255, 0.65); /* ultra clear base */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 18px;
  border: 1px solid transparent; 
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.05),
    0 4px 10px -2px rgba(0, 0, 0, 0.02);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
}

.card-premium:hover {
  transform: translateY(-12px) scale(1.01) !important;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.15),
    0 15px 30px rgba(242, 13, 70, 0.08),
    0 30px 60px rgba(79, 70, 229, 0.12);
}

.card-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(242, 13, 70, 0.2) 30%,
    rgba(255, 255, 255, 0) 50%,
    rgba(79, 70, 229, 0.2) 70%,
    rgba(255, 255, 255, 0.6) 100%
  );
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.card-premium:hover::before {
  opacity: 1;
}

@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-4px); }
  100% { transform: translateY(0px); }
}

/* 3. Section Background Surface */
.section-surface {
  background: #f8fafc;
  border-radius: 28px;
  padding: 50px;
}

/* Light / Dark Mode Handling for .card-premium */
.dark .card-premium {
  background: rgba(15, 23, 42, 0.65); /* deep slate */
  box-shadow:
    0 15px 35px -5px rgba(0, 0, 0, 0.4),
    0 5px 15px rgba(0, 0, 0, 0.2);
}
.dark .card-premium:hover {
  box-shadow:
    0 35px 70px -15px rgba(0, 0, 0, 0.6),
    0 20px 40px rgba(242, 13, 70, 0.18),
    0 40px 80px rgba(79, 70, 229, 0.22);
}
.dark .card-premium::before {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(242, 13, 70, 0.3) 30%,
    rgba(255, 255, 255, 0) 50%,
    rgba(79, 70, 229, 0.3) 70%,
    rgba(255, 255, 255, 0.15) 100%
  );
}
.dark .section-surface {
  background: #0f172a; /* Tailwind slate-900 */
}

/* 4. Premium Card Glow (Cursor Spotlight) */
.card-premium-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1; 
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    600px circle at var(--mouse-x, 0) var(--mouse-y, 0),
    rgba(255, 255, 255, 0.4),
    transparent 40%
  );
  mix-blend-mode: overlay;
}
.dark .card-premium-glow {
  background: radial-gradient(
    600px circle at var(--mouse-x, 0) var(--mouse-y, 0),
    rgba(255, 255, 255, 0.1),
    transparent 40%
  );
}
.card-premium:hover > .card-premium-glow {
  opacity: 1;
}
/* --- PRO UPGRADE: Animated Gradient Text --- */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animate-gradient {
  background-size: 200% auto;
  animation: gradientShift 6s ease infinite;
}

/* --- PRO UPGRADE: Floating Tech Icons --- */
@keyframes floatIcon {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}
.float-icon {
  animation: floatIcon 8s ease-in-out infinite;
}
.float-icon-fast {
  animation: floatIcon 6s ease-in-out infinite reverse;
}
.float-icon-slow {
  animation: floatIcon 10s ease-in-out infinite;
}



/* ==========================================================
   GLOBAL AMBIENT LIGHTING — Enhanced atmospheric glow system
   Fixed orbs that sit behind all content, always visible.
   ========================================================== */

/* ── 1. Fixed ambient orb layer injected on every page ── */
body::before,
body::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  animation: ambientDrift 14s ease-in-out infinite;
}

/* Top-right: primary crimson warm orb */
body::before {
  width: 700px;
  height: 700px;
  top: -180px;
  right: -180px;
  background: radial-gradient(circle, rgba(242,13,70,0.35) 0%, rgba(255,100,130,0.20) 45%, transparent 75%);
  animation-delay: 0s;
}

/* Bottom-left: indigo/violet cool orb */
body::after {
  width: 650px;
  height: 650px;
  bottom: -160px;
  left: -160px;
  background: radial-gradient(circle, rgba(99,102,241,0.30) 0%, rgba(139,92,246,0.18) 45%, transparent 75%);
  animation-delay: -7s;
}

/* ── 2. Additional center-top emerald pulse orb (via .ambient-orb elements) ── */
.ambient-orb-center {
  position: fixed;
  top: 35%;
  left: 50%;
  translate: -50% -50%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16,185,129,0.12) 0%, rgba(52,211,153,0.06) 50%, transparent 75%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  animation: ambientDrift 18s ease-in-out infinite;
  animation-delay: -5s;
}

/* ── 3. Drift animation — slow, organic movement ── */
@keyframes ambientDrift {
  0%   { transform: translate(0px, 0px) scale(1); }
  25%  { transform: translate(30px, -40px) scale(1.06); }
  50%  { transform: translate(-20px, 30px) scale(0.95); }
  75%  { transform: translate(25px, 15px) scale(1.04); }
  100% { transform: translate(0px, 0px) scale(1); }
}

/* ── 4. Page-level ambient surface tint ── */
/* Makes white backgrounds feel "lit" rather than flat */
body {
  background-image:
    radial-gradient(ellipse 80% 60% at 90% 5%, rgba(242,13,70,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 5% 95%, rgba(99,102,241,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255,255,255,1) 0%, transparent 80%) !important;
  background-color: #f8f9fb !important;
  background-attachment: fixed;
}

/* ── 5. Boost existing .animate-blob opacity + size ── */
.animate-blob {
  opacity: 0.55 !important;
  filter: blur(60px) !important;
}

/* ── 6. Stronger ambient on scroll-revealed sections ── */
.section-surface {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.92) 0%,
    rgba(248,250,252,0.96) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.8) inset,
    0 20px 60px -15px rgba(99,102,241,0.08),
    0 10px 30px -10px rgba(242,13,70,0.05);
}

/* ── 7. Card hover ambient glow boost ── */
.card-premium:hover {
  box-shadow:
    0 0 60px -10px rgba(242,13,70,0.15),
    0 0 40px -15px rgba(99,102,241,0.12),
    0 25px 50px -12px rgba(0,0,0,0.12),
    0 15px 30px rgba(242,13,70,0.07) !important;
}

/* ── 8. Subtle edge vignette to make orbs pop ── */
body::after {
  /* We override the cool orb to also add a small top-left primary tint */
}

/* Top-left warm secondary orb via extra bg layer (no extra element needed) */
.ambient-orb-tl {
  position: fixed;
  top: -100px;
  left: -100px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,0.12) 0%, transparent 70%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
  animation: ambientDrift 20s ease-in-out infinite;
  animation-delay: -10s;
}

/* ── 9. Reduced motion fallback ── */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after,
  .ambient-orb-center, .ambient-orb-tl {
    animation: none !important;
  }
}

/* ==========================================================
   LAYERED AMBIENT CARD LIGHTING SYSTEM
   Every card gets: tinted glass background, colored edge glow,
   layered ambient box-shadows, cursor-spotlight & aurora sheen.
   Apply .card-lit to any card, or it auto-applies to .card-premium,
   .glass-card, and common patterns.
   ========================================================== */

/* ── CSS Custom Properties for ambient colours ── */
:root {
  --amb-warm:   242, 13,  70;   /* primary crimson */
  --amb-cool:    99, 102, 241;  /* indigo */
  --amb-emerald: 16, 185, 129;  /* emerald */
  --amb-gold:   251, 191,  36;  /* amber */
  --amb-violet: 139,  92, 246;  /* violet */
}

/* ── 1. Base card-lit layer ── */
.card-lit,
.card-premium,
.glass-card {
  position: relative;
  overflow: hidden;
  /* Layered tinted glass background */
  background:
    linear-gradient(135deg,
      rgba(var(--amb-warm),   0.04)   0%,
      rgba(255,255,255,0.85) 35%,
      rgba(var(--amb-cool),   0.03)  70%,
      rgba(var(--amb-violet), 0.04) 100%
    ) !important;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  /* Ambient edge glow — warm top-right, cool bottom-left */
  box-shadow:
    /* Top-right warm bleed */
    8px -8px 40px -10px  rgba(var(--amb-warm),   0.14),
    /* Bottom-left cool bleed */
    -8px 8px 40px -10px  rgba(var(--amb-cool),   0.10),
    /* Outer depth shadow */
    0 10px 30px -10px rgba(0,0,0,0.07),
    0  2px  8px -2px  rgba(0,0,0,0.04),
    /* Inner highlight rim */
    0 0 0 1px rgba(255,255,255,0.70) inset !important;
  transition:
    box-shadow 0.4s ease,
    background 0.4s ease,
    transform   0.4s cubic-bezier(0.34,1.56,0.64,1);
}

/* ── 2. Hover — brighter ambient bleed + lift ── */
.card-lit:hover,
.card-premium:hover,
.glass-card:hover {
  background:
    linear-gradient(135deg,
      rgba(var(--amb-warm),   0.07)   0%,
      rgba(255,255,255,0.92) 35%,
      rgba(var(--amb-cool),   0.05)  70%,
      rgba(var(--amb-violet), 0.07) 100%
    ) !important;
  box-shadow:
    /* Warm top-right — stronger */
    12px -12px 60px -8px  rgba(var(--amb-warm),   0.22),
    /* Cool bottom-left — stronger */
    -12px 12px 60px -8px  rgba(var(--amb-cool),   0.16),
    /* Emerald center pulse */
    0 0 50px -15px rgba(var(--amb-emerald), 0.12),
    /* Depth */
    0 20px 50px -12px rgba(0,0,0,0.12),
    0  8px 20px -5px  rgba(0,0,0,0.06),
    /* Bright inner rim */
    0 0 0 1px rgba(255,255,255,0.90) inset,
    0 1px 0  0  rgba(255,255,255,0.95) inset !important;
  transform: translateY(-6px) scale(1.012) !important;
}

/* ── 3. Gradient border (aurora ring) ── */
.card-lit::before,
.card-premium::before,
.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    rgba(var(--amb-warm),   0.50) 0%,
    rgba(255,255,255,      0.60) 25%,
    rgba(var(--amb-cool),   0.35) 50%,
    rgba(var(--amb-violet), 0.40) 75%,
    rgba(var(--amb-warm),   0.50) 100%
  );
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.35s ease;
  z-index: 1;
}

.card-lit:hover::before,
.card-premium:hover::before,
.glass-card:hover::before {
  opacity: 1;
  background: linear-gradient(
    135deg,
    rgba(var(--amb-warm),   0.80) 0%,
    rgba(255,255,255,      0.90) 20%,
    rgba(var(--amb-emerald),0.50) 40%,
    rgba(var(--amb-cool),   0.70) 60%,
    rgba(var(--amb-violet), 0.65) 80%,
    rgba(var(--amb-warm),   0.80) 100%
  );
}

/* ── 4. Inner aurora sheen layer (::after) ── */
.card-lit::after,
.card-premium::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Diagonal aurora sweep always present at low opacity */
  background: linear-gradient(
    105deg,
    rgba(var(--amb-warm),   0.06)  0%,
    rgba(255,255,255,      0.12) 30%,
    transparent                   50%,
    rgba(var(--amb-cool),   0.04) 70%,
    rgba(var(--amb-violet), 0.06) 100%
  );
  pointer-events: none;
  z-index: 2;
  opacity: 0.7;
  transition: opacity 0.35s ease, transform 0.5s ease;
}

.card-lit:hover::after,
.card-premium:hover::after {
  opacity: 1;
  /* Sweep moves on hover */
  background: linear-gradient(
    105deg,
    rgba(var(--amb-warm),   0.10)  0%,
    rgba(255,255,255,      0.30) 30%,
    rgba(var(--amb-emerald),0.06) 50%,
    rgba(var(--amb-cool),   0.08) 70%,
    rgba(var(--amb-violet), 0.10) 100%
  );
}

/* ── 5. Cursor spotlight (JS sets --card-x / --card-y) ── */
.card-lit .ambient-spotlight,
.card-premium .ambient-spotlight {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    300px circle at var(--card-x, 50%) var(--card-y, 30%),
    rgba(255,255,255, 0.22) 0%,
    rgba(var(--amb-warm), 0.06) 40%,
    transparent 70%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 3;
  mix-blend-mode: screen;
}

.card-lit:hover .ambient-spotlight,
.card-premium:hover .ambient-spotlight {
  opacity: 1;
}

/* ── 6. Colour variants for different card accents ── */
/* Use data-ambient="warm" | "cool" | "emerald" | "gold" */
[data-ambient="warm"] {
  --amb-warm:   242, 13,  70;
  --amb-cool:   251,191,  36;
}
[data-ambient="cool"] {
  --amb-warm:    99,102, 241;
  --amb-cool:   139, 92, 246;
}
[data-ambient="emerald"] {
  --amb-warm:    16,185, 129;
  --amb-cool:    99,102, 241;
}
[data-ambient="gold"] {
  --amb-warm:   251,191,  36;
  --amb-cool:   242, 13,  70;
}

/* ── 7. Flat / semantic card types — auto card-lit ── */
/* These selectors catch common tailwind card patterns */
.bg-white.rounded-2xl,
.bg-white.rounded-3xl,
.bg-white\/70.rounded-2xl,
.bg-white\/70.rounded-3xl,
.bg-white\/80.rounded-2xl,
.bg-white\/80.rounded-3xl,
.bg-white\/90.rounded-2xl,
.bg-white\/90.rounded-3xl,
.backdrop-blur-xl.rounded-2xl,
.backdrop-blur-xl.rounded-3xl {
  /* Apply same ambient glow shadow */
  box-shadow:
    8px  -8px 40px -12px rgba(var(--amb-warm),  0.10),
    -8px  8px 40px -12px rgba(var(--amb-cool),  0.08),
    0 8px 24px -6px rgba(0,0,0,0.06),
    0 0 0 1px rgba(255,255,255,0.65) inset !important;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.bg-white.rounded-2xl:hover,
.bg-white.rounded-3xl:hover,
.bg-white\/70.rounded-2xl:hover,
.bg-white\/70.rounded-3xl:hover,
.bg-white\/80.rounded-2xl:hover,
.bg-white\/80.rounded-3xl:hover,
.bg-white\/90.rounded-2xl:hover,
.bg-white\/90.rounded-3xl:hover,
.backdrop-blur-xl.rounded-2xl:hover,
.backdrop-blur-xl.rounded-3xl:hover {
  box-shadow:
    14px -14px 60px -8px  rgba(var(--amb-warm),  0.18),
    -14px 14px 60px -8px  rgba(var(--amb-cool),  0.14),
    0 0 50px -20px rgba(var(--amb-emerald),  0.10),
    0 20px 48px -10px rgba(0,0,0,0.10),
    0 0 0 1px rgba(255,255,255,0.88) inset !important;
  transform: translateY(-4px);
}

/* ── 8. Section / container ambient background tint ── */
section,
.section-surface,
main > div,
main > section {
  position: relative;
}

/* Subtle ambient colour leak from fixed orbs through sections */
section::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 60% 40% at 100% 0%,
      rgba(var(--amb-warm),  0.04) 0%, transparent 70%),
    radial-gradient(ellipse 50% 35% at 0%  100%,
      rgba(var(--amb-cool),  0.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}


/* ==========================================================
   AMBIENT INTENSITY REDUCTION — inside-card layers only
   Background tint/glass is UNCHANGED.
   Reduces: aurora border ring, inner sheen, cursor spotlight.
   ========================================================== */

/* ── Aurora border ring — toned down ── */
.card-lit::before,
.card-premium::before,
.glass-card::before {
  opacity: 0.20 !important;   /* was 0.60 */
}
.card-lit:hover::before,
.card-premium:hover::before,
.glass-card:hover::before {
  opacity: 0.35 !important;   /* was 1.00 */
  background: linear-gradient(
    135deg,
    rgba(var(--amb-warm),   0.40) 0%,
    rgba(255,255,255,      0.55) 25%,
    rgba(var(--amb-emerald),0.22) 50%,
    rgba(var(--amb-cool),   0.32) 75%,
    rgba(var(--amb-warm),   0.40) 100%
  );
}

/* ── Inner aurora sheen — toned down ── */
.card-lit::after,
.card-premium::after {
  opacity: 0.18 !important;   /* was 0.70 */
}
.card-lit:hover::after,
.card-premium:hover::after {
  opacity: 0.30 !important;   /* was 1.00 */
  background: linear-gradient(
    105deg,
    rgba(var(--amb-warm),   0.04)  0%,
    rgba(255,255,255,      0.12) 30%,
    rgba(var(--amb-emerald),0.02) 50%,
    rgba(var(--amb-cool),   0.03) 70%,
    rgba(var(--amb-violet), 0.04) 100%
  );
}

/* ── Cursor spotlight — softer ── */
.card-lit .ambient-spotlight,
.card-premium .ambient-spotlight {
  background: radial-gradient(
    260px circle at var(--card-x, 50%) var(--card-y, 30%),
    rgba(255,255,255, 0.10) 0%,         /* was 0.22 */
    rgba(var(--amb-warm), 0.025) 40%,   /* was 0.06 */
    transparent 65%
  ) !important;
}
.card-lit:hover .ambient-spotlight,
.card-premium:hover .ambient-spotlight {
  opacity: 0.70 !important;            /* was 1.00 */
}

/* ── Edge glow box-shadows — slightly pulled back on non-hover ── */
.card-lit,
.card-premium,
.glass-card {
  box-shadow:
    6px  -6px 32px -12px rgba(var(--amb-warm),  0.09),   /* was 0.14 */
    -6px  6px 32px -12px rgba(var(--amb-cool),  0.07),   /* was 0.10 */
    0 10px 30px -10px rgba(0,0,0,0.07),
    0  2px  8px  -2px rgba(0,0,0,0.04),
    0 0 0 1px rgba(255,255,255,0.70) inset !important;
}

/* Hover keeps a nice pop, just not as explosive */
.card-lit:hover,
.card-premium:hover,
.glass-card:hover {
  box-shadow:
    10px -10px 50px -10px rgba(var(--amb-warm),  0.14),  /* was 0.22 */
    -10px 10px 50px -10px rgba(var(--amb-cool),  0.10),  /* was 0.16 */
    0 0 40px -18px rgba(var(--amb-emerald), 0.08),        /* was 0.12 */
    0 18px 44px -12px rgba(0,0,0,0.10),
    0  6px 18px  -5px rgba(0,0,0,0.05),
    0 0 0 1px rgba(255,255,255,0.88) inset,
    0 1px 0  0  rgba(255,255,255,0.95) inset !important;
}

/* ── Same pull-back for auto-targeted Tailwind cards ── */
.bg-white.rounded-2xl,
.bg-white.rounded-3xl,
.bg-white\/70.rounded-2xl,
.bg-white\/70.rounded-3xl,
.bg-white\/80.rounded-2xl,
.bg-white\/80.rounded-3xl,
.bg-white\/90.rounded-2xl,
.bg-white\/90.rounded-3xl,
.backdrop-blur-xl.rounded-2xl,
.backdrop-blur-xl.rounded-3xl {
  box-shadow:
    6px  -6px 28px -14px rgba(var(--amb-warm),  0.07),
    -6px  6px 28px -14px rgba(var(--amb-cool),  0.05),
    0 8px 24px -6px rgba(0,0,0,0.06),
    0 0 0 1px rgba(255,255,255,0.65) inset !important;
}

.bg-white.rounded-2xl:hover,
.bg-white.rounded-3xl:hover,
.bg-white\/70.rounded-2xl:hover,
.bg-white\/70.rounded-3xl:hover,
.bg-white\/80.rounded-2xl:hover,
.bg-white\/80.rounded-3xl:hover,
.bg-white\/90.rounded-2xl:hover,
.bg-white\/90.rounded-3xl:hover,
.backdrop-blur-xl.rounded-2xl:hover,
.backdrop-blur-xl.rounded-3xl:hover {
  box-shadow:
    10px -10px 48px -10px rgba(var(--amb-warm),  0.11),
    -10px 10px 48px -10px rgba(var(--amb-cool),  0.08),
    0 0 36px -22px rgba(var(--amb-emerald),  0.07),
    0 18px 42px -12px rgba(0,0,0,0.09),
    0 0 0 1px rgba(255,255,255,0.85) inset !important;
}

/* ==========================================================
   SECTION DIVIDERS — Classic · Minimal · Premium
   Usage: <div class="section-divider" aria-hidden="true"><span class="divider-gem"></span></div>
   Variants: add  data-divider="plain" | "double" | "dots"
   ========================================================== */

.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2.5rem 0;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 56rem;   /* max-w-4xl */
  margin-inline: auto;
}

/* ── The two gradient lines either side ── */
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent                       0%,
    rgba(var(--amb-warm),  0.25)    25%,
    rgba(var(--amb-cool),  0.30)    75%,
    transparent                     100%
  );
}

.section-divider::before {
  background: linear-gradient(
    to right,
    transparent                    0%,
    rgba(var(--amb-cool), 0.18)  30%,
    rgba(var(--amb-warm), 0.35)  100%
  );
}

.section-divider::after {
  background: linear-gradient(
    to left,
    transparent                    0%,
    rgba(var(--amb-cool), 0.18)  30%,
    rgba(var(--amb-warm), 0.35)  100%
  );
}

/* ── Center gem / diamond ── */
.divider-gem {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 1.5px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #f20d46 0%, #6366f1 100%);
  box-shadow:
    0 0 10px rgba(242, 13,  70, 0.35),
    0 0  4px rgba( 99,102, 241, 0.25);
  flex-shrink: 0;
  transition: transform 0.6s ease, box-shadow 0.4s ease;
}

.section-divider:hover .divider-gem {
  transform: rotate(225deg) scale(1.25);
  box-shadow:
    0 0 18px rgba(242, 13,  70, 0.50),
    0 0  8px rgba( 99,102, 241, 0.40);
}

/* ── Variant: plain (line only, no gem) ── */
[data-divider="plain"] .divider-gem { display: none; }
[data-divider="plain"]::before {
  background: linear-gradient(
    to right,
    transparent 0%, rgba(148,163,184,0.25) 50%, transparent 100%
  );
}
[data-divider="plain"]::after {
  background: linear-gradient(
    to left,
    transparent 0%, rgba(148,163,184,0.25) 50%, transparent 100%
  );
}

/* ── Variant: dots (three-dot rule) ── */
[data-divider="dots"]::before,
[data-divider="dots"]::after { display: none; }
[data-divider="dots"] .divider-gem { display: none; }
[data-divider="dots"]::before {
  content: '· · ·';
  display: block;
  flex: none;
  font-size: 1.25rem;
  letter-spacing: 0.5em;
  color: rgba(148,163,184,0.55);
  background: none;
  height: auto;
}

/* ── Variant: double (two stacked lines) ── */
[data-divider="double"] {
  flex-direction: column;
  gap: 4px;
  padding: 2rem 0;
}
[data-divider="double"]::before,
[data-divider="double"]::after {
  flex: none;
  width: 100%;
  max-width: 40rem;
}
[data-divider="double"]::before { opacity: 1; }
[data-divider="double"]::after  { opacity: 0.35; }
[data-divider="double"] .divider-gem { display: none; }

/* ── Inside containers (narrower) ── */
.section-divider.divider-sm {
  max-width: 36rem;
  padding: 1.5rem 0;
}


/* ==========================================================
   FEATURED / TOP PROJECT CARD — Red strip + stamp badge
   ========================================================== */

/* ── Card wrapper ── */
.featured-project-card {
  position: relative;
  overflow: hidden;
  /* Red left accent border */
  border-left: 3.5px solid #f20d46 !important;
  /* Warm red ambient glow shadow */
  box-shadow:
    -4px 0 20px -4px  rgba(242, 13, 70, 0.30),   /* red left bleed */
     0   0  0   1px   rgba(242, 13, 70, 0.12),    /* full border tint */
     6px -6px 32px -10px rgba(242, 13, 70, 0.10), /* top-right warm */
     0   12px 30px -8px  rgba(0, 0, 0, 0.08)       /* depth */
     !important;
  transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}

.featured-project-card:hover {
  transform: translateY(-6px) scale(1.012) !important;
  box-shadow:
    -6px 0 30px -4px  rgba(242, 13, 70, 0.45),
     0   0  0   1px   rgba(242, 13, 70, 0.22),
     8px -8px 48px -8px  rgba(242, 13, 70, 0.14),
     0   20px 44px -10px rgba(0, 0, 0, 0.12)
     !important;
}

/* ── Red left strip (solid bar, 4px wide, full height) ── */
.feat-strip {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(
    to bottom,
    #f20d46 0%,
    #ff4d6d 50%,
    #f20d46 100%
  );
  border-radius: 0 2px 2px 0;
  box-shadow: 2px 0 12px rgba(242, 13, 70, 0.35);
}

/* ── Featured stamp badge (top-right corner) ── */
.feat-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #f20d46 0%, #ff2d55 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow:
    0 2px 10px rgba(242, 13, 70, 0.40),
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  z-index: 10;
  white-space: nowrap;
  user-select: none;
}

/* Subtle pulse glow on the badge */
.feat-badge {
  animation: featBadgePulse 2.8s ease-in-out infinite;
}

@keyframes featBadgePulse {
  0%, 100% { box-shadow: 0 2px 10px rgba(242,13,70,0.40), 0 0 0 1px rgba(255,255,255,0.15) inset; }
  50%       { box-shadow: 0 2px 18px rgba(242,13,70,0.65), 0 0 0 1px rgba(255,255,255,0.25) inset; }
}

/* ── Faint red top-edge glow inside featured cards ── */
.featured-project-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(242,13,70,0.80) 0%,
    rgba(242,13,70,0.20) 60%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 5;
}

/* ==========================================================
   AMBIENT FINE-TUNE v2 — slight further reduction, inside cards only
   Background tint layer untouched.
   ========================================================== */

/* Aurora border ring */
.card-lit::before,
.card-premium::before,
.glass-card::before    { opacity: 0.12 !important; }
.card-lit:hover::before,
.card-premium:hover::before,
.glass-card:hover::before { opacity: 0.22 !important; }

/* Inner sheen */
.card-lit::after,
.card-premium::after   { opacity: 0.10 !important; }
.card-lit:hover::after,
.card-premium:hover::after { opacity: 0.18 !important; }

/* Cursor spotlight */
.card-lit .ambient-spotlight,
.card-premium .ambient-spotlight {
  background: radial-gradient(
    220px circle at var(--card-x,50%) var(--card-y,30%),
    rgba(255,255,255,0.07)  0%,
    rgba(var(--amb-warm),0.015) 40%,
    transparent 65%
  ) !important;
}
.card-lit:hover .ambient-spotlight,
.card-premium:hover .ambient-spotlight { opacity: 0.55 !important; }

/* Edge glow box-shadows — pulled back a touch more */
.card-lit,
.card-premium,
.glass-card {
  box-shadow:
    5px  -5px 26px -14px rgba(var(--amb-warm), 0.07),
    -5px  5px 26px -14px rgba(var(--amb-cool), 0.05),
    0 8px 24px -10px rgba(0,0,0,0.06),
    0 2px  6px  -2px rgba(0,0,0,0.03),
    0 0 0 1px rgba(255,255,255,0.68) inset !important;
}
.card-lit:hover,
.card-premium:hover,
.glass-card:hover {
  box-shadow:
    8px  -8px 42px -12px rgba(var(--amb-warm), 0.11),
    -8px  8px 42px -12px rgba(var(--amb-cool), 0.08),
    0 0 34px -20px rgba(var(--amb-emerald), 0.06),
    0 16px 38px -12px rgba(0,0,0,0.09),
    0  5px 16px  -5px rgba(0,0,0,0.04),
    0 0 0 1px rgba(255,255,255,0.86) inset !important;
}

/* Tailwind auto-targeted cards */
.bg-white.rounded-2xl,  .bg-white.rounded-3xl,
.bg-white\/70.rounded-2xl, .bg-white\/70.rounded-3xl,
.bg-white\/80.rounded-2xl, .bg-white\/80.rounded-3xl,
.bg-white\/90.rounded-2xl, .bg-white\/90.rounded-3xl,
.backdrop-blur-xl.rounded-2xl, .backdrop-blur-xl.rounded-3xl {
  box-shadow:
    5px  -5px 22px -15px rgba(var(--amb-warm), 0.05),
    -5px  5px 22px -15px rgba(var(--amb-cool), 0.04),
    0 6px 20px -6px rgba(0,0,0,0.05),
    0 0 0 1px rgba(255,255,255,0.60) inset !important;
}
.bg-white.rounded-2xl:hover,  .bg-white.rounded-3xl:hover,
.bg-white\/70.rounded-2xl:hover, .bg-white\/70.rounded-3xl:hover,
.bg-white\/80.rounded-2xl:hover, .bg-white\/80.rounded-3xl:hover,
.bg-white\/90.rounded-2xl:hover, .bg-white\/90.rounded-3xl:hover,
.backdrop-blur-xl.rounded-2xl:hover, .backdrop-blur-xl.rounded-3xl:hover {
  box-shadow:
    8px  -8px 38px -12px rgba(var(--amb-warm), 0.09),
    -8px  8px 38px -12px rgba(var(--amb-cool), 0.06),
    0 14px 36px -12px rgba(0,0,0,0.08),
    0 0 0 1px rgba(255,255,255,0.82) inset !important;
}

/* ==========================================================
   HERO CARD — targeted ambient kill
   Suppress aurora ring, inner sheen, edge glows and spotlight
   for #heroPrimaryCard only. Background glass tint untouched.
   ========================================================== */

/* Inner gradient for depth — softer */
#heroPrimaryCard > div:first-child {
  opacity: 0.40 !important;
}

/* Aurora border ring — nearly invisible */
#heroPrimaryCard::before {
  opacity: 0.06 !important;
}
#heroPrimaryCard:hover::before {
  opacity: 0.10 !important;
}

/* Inner sheen — off */
#heroPrimaryCard::after {
  opacity: 0.04 !important;
}
#heroPrimaryCard:hover::after {
  opacity: 0.07 !important;
}

/* Edge glow box-shadows — flat, depth only */
#heroPrimaryCard {
  box-shadow:
    0 12px 40px -12px rgba(0,0,0,0.08),
    0  4px 12px  -4px rgba(0,0,0,0.04),
    0 0 0 1px rgba(255,255,255,0.70) inset !important;
}
#heroPrimaryCard:hover {
  box-shadow:
    0 20px 50px -16px rgba(0,0,0,0.10),
    0  6px 18px  -6px rgba(0,0,0,0.05),
    0 0 0 1px rgba(255,255,255,0.80) inset !important;
  transform: scale(1.002) !important; /* keep the subtle scale, drop coloured lift */
}

/* Cursor spotlight — off */
#heroPrimaryCard .ambient-spotlight {
  display: none !important;
}

/* ==========================================================
   HERO CARD — v2: block global ambient orb bleed-through
   ========================================================== */

/* Strengthen card background so body::before/::after orbs
   don't shine through the glass */
#heroPrimaryCard {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* First child = the white fill overlay — let it do its job */
#heroPrimaryCard > div:first-child {
  opacity: 1 !important;
}

/* ==========================================================
   PROFILE PHOTO — 3D Layered Lighting System
   Light source: top-left (≈ 10 o'clock)
   ========================================================== */

/* ── Wrapper context ── */
.profile-3d-wrap {
  position: relative;
  transform-style: preserve-3d;
}

/* ── Layer 1: Outer ambient colored ring glow ── */
.profile-glow-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(
    from 130deg,
    rgba(242, 13,  70, 0.18)  0deg,
    rgba( 99,102, 241, 0.22) 70deg,
    rgba( 99,102, 241, 0.10) 160deg,
    rgba(148,163, 184, 0.06) 220deg,
    rgba(242,  13,  70, 0.08) 300deg,
    rgba(242,  13,  70, 0.18) 360deg
  );
  filter: blur(12px);
  z-index: 0;
  opacity: 0.85;
  transition: opacity 0.5s ease, filter 0.5s ease;
}
.profile-3d-wrap:hover .profile-glow-ring {
  opacity: 1;
  filter: blur(16px);
}

/* ── Layer 2: Gradient border ring (conic — light at top-left) ── */
.profile-border-ring {
  position: absolute;
  inset: -2.5px;
  border-radius: 50%;
  background: conic-gradient(
    from 125deg,
    rgba(255,255,255,0.95)  0deg,    /* bright highlight top-left */
    rgba(220,228,245,0.70) 60deg,
    rgba(190,200,225,0.40) 120deg,
    rgba(160,170,200,0.20) 180deg,   /* darkest — opposite light */
    rgba(185,198,225,0.35) 240deg,
    rgba(215,225,245,0.60) 300deg,
    rgba(255,255,255,0.95) 360deg    /* back to bright */
  );
  z-index: 1;
  transition: transform 0.4s ease;
}
.profile-3d-wrap:hover .profile-border-ring {
  transform: scale(1.015);
}

/* ── Layer 3: Drop shadow base — directional (top-left source) ── */
.profile-shadow-base {
  box-shadow:
    /* Primary directional shadow (light top-left → shadow bottom-right) */
    10px 18px 48px -8px  rgba(  0,  0,  0, 0.22),
    /* Secondary softer ambient */
     4px  8px 24px -6px  rgba(  0,  0,  0, 0.12),
    /* Color bleed from primary/indigo */
     0   16px 60px -20px rgba( 99,102,241, 0.18),
    /* Inner shadow — bottom-right rim (depth inside circle) */
    inset -4px -4px 10px  rgba(  0,  0,  0, 0.10),
    /* Inner light — top-left rim (lit edge) */
    inset  3px  3px  8px  rgba(255,255,255, 0.75) !important;
  transition: box-shadow 0.5s ease;
}
.profile-3d-wrap:hover .profile-shadow-base {
  box-shadow:
    14px 24px 60px -8px  rgba(  0,  0,  0, 0.28),
     6px 10px 32px -6px  rgba(  0,  0,  0, 0.14),
     0   20px 70px -18px rgba( 99,102,241, 0.24),
    inset -5px -5px 14px  rgba(  0,  0,  0, 0.12),
    inset  4px  4px 10px  rgba(255,255,255, 0.85) !important;
}

/* ── Layer 5: Soft light-hit overlay (bright top-left, dark bottom-right) ── */
.profile-light-hit {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 26% 20%,
    rgba(255,255,255,0.48)  0%,
    rgba(255,255,255,0.16) 38%,
    transparent            65%
  );
  z-index: 20;
  pointer-events: none;
  mix-blend-mode: overlay;
  transition: opacity 0.4s ease;
}
.profile-3d-wrap:hover .profile-light-hit {
  opacity: 1.2;
}

/* ── Layer 6: Specular highlight dot ── */
.profile-specular {
  position: absolute;
  top: 9%;
  left: 12%;
  width: 26%;
  height: 13%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(255,255,255,0.88)  0%,
    rgba(255,255,255,0.40) 40%,
    transparent            75%
  );
  transform: rotate(-35deg);
  z-index: 21;
  pointer-events: none;
  filter: blur(2.5px);
  transition: opacity 0.4s ease;
}
.profile-3d-wrap:hover .profile-specular {
  opacity: 0.70; /* slightly back on hover so photo is visible */
}

/* Kill all photo glow layers — user preference */
.profile-glow-ring,
.profile-light-hit,
.profile-specular { display: none !important; }