/* =============================================
   3d.css — 3D Animations & Depth Effects
   Drop this after your other CSS files
   ============================================= */

/* === Global 3D perspective layer === */
body {
  perspective: 1200px;
  perspective-origin: 50% 40%;
}

/* === Floating orbs / ambient depth === */
body::after {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 15% 20%, var(--accent-glow), transparent 70%),
    radial-gradient(ellipse 400px 500px at 85% 75%, var(--gold-glow), transparent 70%),
    radial-gradient(ellipse 300px 300px at 60% 10%, rgba(100,98,212,0.06), transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: ambientShift 18s ease-in-out infinite alternate;
}
[data-theme='dark'] body::after {
  background:
    radial-gradient(ellipse 600px 400px at 15% 20%, rgba(143,141,240,0.10), transparent 70%),
    radial-gradient(ellipse 400px 500px at 85% 75%, rgba(212,160,23,0.08), transparent 70%),
    radial-gradient(ellipse 300px 300px at 60% 10%, rgba(100,98,212,0.07), transparent 60%);
}
@keyframes ambientShift {
  0%   { opacity: 0.6; transform: scale(1) translate(0, 0); }
  50%  { opacity: 0.9; transform: scale(1.06) translate(1%, 1.5%); }
  100% { opacity: 0.7; transform: scale(1.02) translate(-1%, -1%); }
}

/* === Hero section 3D tilt === */
.page-hero {
  transform-style: preserve-3d;
  position: relative;
}
.hero-name {
  transform: translateZ(28px);
  will-change: transform;
  transition: transform var(--t-slow) var(--ease-out);
  text-shadow: 0 6px 24px var(--accent-glow);
}
.hero-role {
  transform: translateZ(16px);
  transition: transform var(--t-slow) var(--ease-out);
}
.hero-award-strip {
  transform: translateZ(10px);
  transition: transform var(--t-slow) var(--ease-out);
}
.hero-cta-row {
  transform: translateZ(20px);
  transition: transform var(--t-slow) var(--ease-out);
}
.hero-meta {
  transform: translateZ(6px);
  transition: transform var(--t-slow) var(--ease-out);
}

/* === Hero cursor parallax tilt === */
.page-hero.tilted {
  transition: transform 0.08s linear;
}

/* === 3D Card lift on hover === */
.about-card,
.skill-card,
.overview-card,
.achievement-card {
  transform-style: preserve-3d;
  transform: perspective(600px) translateZ(0) rotateX(0) rotateY(0);
  transition:
    transform 0.22s var(--ease-out),
    box-shadow var(--t-med),
    border-color var(--t-med);
  will-change: transform;
  backface-visibility: hidden;
}
.about-card:hover,
.skill-card:hover,
.overview-card:hover,
.achievement-card:hover {
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-3), 0 20px 60px var(--accent-glow);
  border-color: var(--border-3);
}

/* Card inner elements pop forward on hover */
.about-card:hover .about-card-icon,
.skill-card:hover .skill-icon {
  transform: translateZ(12px) scale(1.12);
  transition: transform 0.3s var(--ease-spring);
}
.about-card-icon,
.skill-icon {
  transition: transform 0.3s var(--ease-spring);
  display: inline-block;
}

/* === Project cards 3D depth === */
.project-card {
  transform-style: preserve-3d;
  transform: perspective(700px) translateZ(0);
  transition: transform 0.22s var(--ease-out), box-shadow var(--t-med), border-color var(--t-med);
  will-change: transform;
}
.project-card:hover {
  box-shadow: var(--shadow-lg), 0 24px 60px var(--accent-glow);
  border-color: var(--border-3);
}

/* === Timeline items slide in with depth === */
.tl-item {
  transform: perspective(800px) translateZ(0) rotateY(0);
  transition: transform 0.4s var(--ease-out);
}
.tl-item:hover .tl-card {
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-3);
  transform: perspective(700px) translateY(-4px) translateZ(10px);
}
.tl-card {
  transition: transform 0.3s var(--ease-out), box-shadow var(--t-med);
}

/* === Overview avatar 3D bounce === */
.avatar-ring {
  animation: floatAvatar 5s ease-in-out infinite;
}
@keyframes floatAvatar {
  0%, 100% { transform: translateY(0) rotateY(0deg); }
  25%  { transform: translateY(-5px) rotateY(3deg); }
  75%  { transform: translateY(-3px) rotateY(-3deg); }
}
.avatar-ring:hover {
  animation: none;
  transform: scale(1.06) rotateY(8deg);
  box-shadow: -8px 8px 24px var(--accent-glow), 0 0 0 4px var(--accent-3);
}

/* === Award badge float === */
.award-badge {
  animation: badgeFloat 3.5s ease-in-out infinite;
  display: inline-flex;
}
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50%  { transform: translateY(-3px); }
}

/* === Scroll-reveal now enters with 3D depth === */
.reveal {
  opacity: 0;
  transform: translateY(32px) translateZ(-30px) rotateX(4deg);
  transition:
    opacity  0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0) translateZ(0) rotateX(0);
}

/* === Page-progress glow === */
#page-progress {
  box-shadow: 0 0 12px var(--accent-glow), 0 0 4px var(--accent);
}

/* === Buttons 3D press feel === */
.btn-primary,
.btn-ghost,
.btn-send {
  transform-style: preserve-3d;
  transition:
    background var(--t-fast),
    transform 0.18s var(--ease-spring),
    box-shadow var(--t-med);
}
.btn-primary:hover  { transform: translateY(-3px) translateZ(4px); }
.btn-ghost:hover    { transform: translateY(-3px) translateZ(4px); }
.btn-primary:active { transform: translateY(1px) translateZ(0) scale(0.97); }
.btn-ghost:active   { transform: translateY(1px) translateZ(0) scale(0.97); }

/* === Hero kicker line animation === */
.hero-kicker {
  position: relative;
  overflow: visible;
}
.hero-kicker::before {
  animation: linePulse 2.5s ease-in-out 1.5s infinite;
}
@keyframes linePulse {
  0%, 100% { width: 2rem; opacity: 1; }
  50%  { width: 3rem; opacity: 0.6; }
}

/* === Section head divider animate === */
.divider {
  animation: dividerGrow 0.9s var(--ease-out) 0.3s both;
  transform-origin: left;
}
@keyframes dividerGrow {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* === Contact channel 3D slide === */
.contact-channel {
  transform-style: preserve-3d;
  transform: perspective(600px) translateX(0) rotateY(0);
  transition: transform 0.22s var(--ease-out), box-shadow var(--t-med), border-color var(--t-med);
}
.contact-channel:hover {
  transform: perspective(600px) translateX(6px) rotateY(-2deg);
  box-shadow: var(--shadow-md), -4px 4px 16px var(--accent-glow);
}

/* === Footer social buttons 3D pop === */
.footer-social a {
  transition:
    background var(--t-fast),
    color var(--t-fast),
    border-color var(--t-fast),
    transform 0.22s var(--ease-spring),
    box-shadow 0.22s var(--ease-out);
}
.footer-social a:hover {
  transform: translateY(-4px) rotateZ(-8deg) scale(1.12);
  box-shadow: 0 8px 20px var(--accent-glow);
}

/* === 404 error number 3D depth === */
.error-num {
  display: block;
  animation: errorFloat 6s ease-in-out infinite;
  text-shadow:
    4px 8px 0 var(--border-3),
    8px 16px 0 rgba(59,56,168,0.07);
}
@keyframes errorFloat {
  0%, 100% { transform: translateY(0) rotateX(0); }
  50% { transform: translateY(-10px) rotateX(4deg); }
}

/* === Pill tags hover 3D === */
.pill {
  transition:
    border-color var(--t-fast),
    color var(--t-fast),
    background var(--t-fast),
    transform 0.18s var(--ease-spring),
    box-shadow 0.18s;
}
.pill:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 12px var(--accent-glow);
}

/* === Skill tags === */
.skill-tag {
  transition: transform 0.18s var(--ease-spring), background var(--t-fast), color var(--t-fast);
}
.skill-card:hover .skill-tag {
  transform: translateY(-1px);
}

/* === Scroll hint line shimmer === */
.scroll-line {
  animation: scrollPulse 2s ease-in-out 1.5s infinite, shimmer 3s ease-in-out 2s infinite;
}
@keyframes shimmer {
  0%, 100% { background: linear-gradient(180deg, var(--accent) 0%, transparent 100%); }
  50%       { background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 60%, transparent 100%); }
}

/* === Overview cards stagger animate === */
.overview-card:nth-child(1) { animation-delay: 0.05s; }
.overview-card:nth-child(2) { animation-delay: 0.12s; }
.overview-card:nth-child(3) { animation-delay: 0.19s; }
.overview-card:nth-child(4) { animation-delay: 0.26s; }

/* === Achievement featured card depth === */
.achievement-featured {
  transform-style: preserve-3d;
  transition: transform 0.3s var(--ease-out), box-shadow var(--t-med);
}
.achievement-featured:hover {
  transform: perspective(900px) translateZ(8px) translateY(-4px);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(184,134,11,0.25), 0 20px 60px var(--gold-glow);
}

/* === Theme toggle spin === */
#theme-toggle:hover {
  transform: rotate(25deg) scale(1.1) translateZ(4px);
}

/* === Nav link 3D underline === */
.nav-links a::after {
  transform-origin: center;
  transition: transform 0.3s var(--ease-spring), opacity 0.2s;
}

/* === Reduced motion — turn off 3D extras === */
@media (prefers-reduced-motion: reduce) {
  body { perspective: none; }
  body::after { animation: none; }
  .avatar-ring { animation: none; }
  .award-badge { animation: none; }
  .error-num   { animation: none; }
  .hero-kicker::before { animation: none; }
  .divider { animation: none; }
  .scroll-line { animation: none; }
  .about-card, .skill-card, .project-card,
  .overview-card, .achievement-card,
  .contact-channel, .tl-card {
    transform: none !important;
    transition: box-shadow var(--t-med), border-color var(--t-med) !important;
  }
}