/* ═══════════════════════════════════════════════════════════
   profileInteraction.css  —  v2.0  FIXED

   KEY FIXES vs v1:
   • Added transform-style: preserve-3d on .profile-card  ← was missing
   • Both webkit + standard backface-visibility on ALL 3D elements
   • .hero__profile-wrap overflow: visible !important  ← critical
   • Faces use translateZ(2px) — avoids clipping on Safari/Chrome
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   CRITICAL OVERRIDE
   ───────────────────────────────────────────── */
.hero__profile-wrap {
  overflow: visible !important;
  transform-style: preserve-3d !important;
}

/* Intermediate wrapper — receives mouse parallax from GSAP.
   Isolated so transforms here never flatten .profile-scene */
.profile-3d-wrap {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ─────────────────────────────────────────────
   SCENE — perspective container
   ───────────────────────────────────────────── */
.profile-scene {
  position:           relative;
  width:              clamp(120px, 16vw, 220px);
  height:             clamp(120px, 16vw, 220px);
  perspective:        1100px;
  perspective-origin: 50% 45%;
  cursor:             default;
  transform:          translate3d(0, 0, 0);
  will-change:        transform;
}

/* ─────────────────────────────────────────────
   CARD — THE CRITICAL ELEMENT
   transform-style: preserve-3d MUST be here.
   Without it, both faces collapse flat and the
   flip is invisible.
   ───────────────────────────────────────────── */
.profile-card {
  position:                absolute;
  inset:                   0;
  transform-style:         preserve-3d;      /* ← FIX 1 */
  -webkit-transform-style: preserve-3d;      /* ← FIX 1 webkit */
  transform-origin:        center center;
  will-change:             transform;
  border-radius:           26px;
  transform:               translate3d(0, 0, 0);
}

/* ─────────────────────────────────────────────
   FACES
   Both need backface-visibility:hidden so each
   is only seen when facing the camera.
   ───────────────────────────────────────────── */
.profile-face {
  position:                    absolute;
  inset:                       0;
  border-radius:               26px;
  overflow:                    hidden;
  backface-visibility:         hidden;       /* ← FIX 2 */
  -webkit-backface-visibility: hidden;       /* ← FIX 2 webkit */
  will-change:                 transform;
}

.profile-face--front {
  transform: translateZ(2px);
}

.profile-face--back {
  transform: rotateY(180deg) translateZ(2px);
}

/* ─────────────────────────────────────────────
   IMAGES
   ───────────────────────────────────────────── */
.profile-img-wrap {
  width:         100%;
  height:        100%;
  overflow:      hidden;
  border-radius: 26px;
}

.profile-img {
  display:         block;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center top;
  user-select:     none;
  pointer-events:  none;
  border-radius:   26px;
  filter:          contrast(1.04) saturate(1.06);
}

/* ─────────────────────────────────────────────
   GLOW
   ───────────────────────────────────────────── */
.profile-glow,
.profile-glow--outer {
  position:                    absolute;
  border-radius:               50%;
  pointer-events:              none;
  will-change:                 transform, opacity;
  transform:                   translate3d(0, 0, 0);
  backface-visibility:         hidden;
  -webkit-backface-visibility: hidden;
}

.profile-glow {
  inset:      -24px;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(100,150,255,0.28) 0%, transparent 68%);
  opacity:    0.65;
  filter:     blur(20px);
}

.profile-glow--outer {
  inset:      -60px;
  background: radial-gradient(ellipse at 50% 55%,
    rgba(220,160,80,0.16) 0%, transparent 65%);
  opacity:    0.45;
  filter:     blur(40px);
}

/* ─────────────────────────────────────────────
   ORBIT RINGS
   ───────────────────────────────────────────── */
.profile-rings {
  position:       absolute;
  inset:          0;
  pointer-events: none;
}

.profile-ring {
  position:      absolute;
  border-radius: 50%;
  border:        1px solid rgba(255,255,255,0.07);
  will-change:   transform;
}

.profile-ring--1 { inset: -22px; opacity: 0.55; animation: ring-spin 30s linear infinite; }
.profile-ring--2 { inset: -42px; opacity: 0.28; border-style: dashed; animation: ring-spin 50s linear infinite reverse; }
.profile-ring--3 { inset: -66px; opacity: 0.13; animation: none; } /* disable — barely visible */

@keyframes ring-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────
   SHIMMER
   ───────────────────────────────────────────── */
.profile-shimmer {
  position:            absolute;
  inset:               0;
  border-radius:       26px;
  pointer-events:      none;
  will-change:         opacity;
  background:          linear-gradient(125deg,
    transparent 0%, rgba(255,255,255,0) 38%,
    rgba(255,255,255,0.11) 50%,
    rgba(255,255,255,0) 62%, transparent 100%);
  background-size:     200% 200%;
  background-position: -100% -100%;
  opacity:             0;
}

@media (hover: hover) and (pointer: fine) {
  .profile-card:hover .profile-shimmer {
    opacity:   1;
    animation: shimmer-sweep 2.5s ease-in-out infinite;
  }
}

@keyframes shimmer-sweep {
  0%   { background-position: -100% -100%; }
  50%  { background-position:  200%  200%; }
  100% { background-position: -100% -100%; }
}

/* ─────────────────────────────────────────────
   EDGE LIGHT
   ───────────────────────────────────────────── */
.profile-edge-light {
  position:       absolute;
  inset:          0;
  border-radius:  26px;
  pointer-events: none;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    inset  1px 0 0 rgba(255,255,255,0.07),
    inset -1px 0 0 rgba(0,0,0,0.07);
}

/* ─────────────────────────────────────────────
   CLICK HINT
   ───────────────────────────────────────────── */
.profile-hint {
  position:       absolute;
  bottom:         -42px;
  left:           50%;
  transform:      translateX(-50%);
  display:        flex;
  align-items:    center;
  gap:            6px;
  font-size:      0.76rem;
  font-weight:    500;
  letter-spacing: 0.05em;
  color:          rgba(255,255,255,0.38);
  opacity:        0;
  pointer-events: none;
  white-space:    nowrap;
  will-change:    opacity;
}

.profile-hint.is-visible {
  animation: hint-in 0.7s cubic-bezier(0.16,1,0.3,1) forwards;
}

.profile-hint.is-hidden {
  animation: hint-out 0.3s ease forwards;
}

@keyframes hint-in {
  from { opacity: 0; transform: translateX(-50%) translateY(6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);   }
}

@keyframes hint-out {
  to { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}

.profile-hint__icon {
  width:     13px;
  height:    13px;
  animation: hint-bounce 2s ease-in-out infinite;
}

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

/* ─────────────────────────────────────────────
   STATUS BADGE
   ───────────────────────────────────────────── */
.profile-badge {
  position:               absolute;
  bottom:                 -16px;
  right:                  -16px;
  z-index:                10;
  display:                flex;
  align-items:            center;
  gap:                    6px;
  padding:                7px 13px 7px 9px;
  background:             rgba(255,255,255,0.08);
  backdrop-filter:        blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:                 1px solid rgba(255,255,255,0.13);
  border-radius:          99px;
  font-size:              0.73rem;
  font-weight:            600;
  letter-spacing:         0.03em;
  color:                  rgba(255,255,255,0.82);
  will-change:            transform, opacity;
  opacity:                0;
  transform:              translateY(10px);
}

.profile-badge__dot {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    #4ade80;
  box-shadow:    0 0 6px rgba(74,222,128,0.75);
  flex-shrink:   0;
  position:      relative;
}

.profile-badge__pulse {
  position:      absolute;
  inset:         0;
  border-radius: 50%;
  background:    rgba(74,222,128,0.4);
  animation:     badge-pulse 2.4s ease-out infinite;
}

@keyframes badge-pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(2.8); opacity: 0;   }
  100% { transform: scale(1);   opacity: 0;   }
}

/* ─────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .profile-scene { width: 260px; height: 260px; }
  .profile-ring--2, .profile-ring--3 { display: none; }
  .profile-badge { bottom: -12px; right: -8px; }
}

@media (max-width: 480px) {
  .profile-scene { width: 220px; height: 220px; }
}

/* ─────────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .profile-ring,
  .profile-hint__icon,
  .profile-badge__pulse,
  .profile-shimmer { animation: none !important; }
  .profile-badge   { opacity: 1 !important; transform: none !important; }
}