/* =================== GLOBAL =================== */

html {
  scroll-behavior: smooth;
}

/* =================== KEYFRAME ANIMATIONS =================== */

@keyframes blob {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(30px,-50px) scale(1.1); }
  66%     { transform: translate(-20px,20px) scale(0.9); }
}

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

@keyframes float-slow {
  0%,100% { transform: translateY(0) rotate(12deg); }
  50%     { transform: translateY(-30px) rotate(12deg); }
}

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

@keyframes title-slide-1 {
  from { opacity: 0; transform: translateX(-100px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes title-slide-2 {
  from { opacity: 0; transform: translateY(100px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes title-slide-3 {
  from { opacity: 0; transform: translateX(100px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes gradient {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

/* =================== ANIMATION UTILITY CLASSES =================== */

.animate-blob         { animation: blob 7s infinite; }
.animate-float        { animation: float 3s ease-in-out infinite; }
.animate-float-slow   { animation: float-slow 4s ease-in-out infinite; }
.animate-float-reverse{ animation: float-reverse 3s ease-in-out infinite; }

.animate-title-slide-1 { animation: title-slide-1 0.8s ease-out both; }
.animate-title-slide-2 { animation: title-slide-2 0.8s ease-out 0.2s both; }
.animate-title-slide-3 { animation: title-slide-3 0.8s ease-out 0.4s both; }

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient 3s ease infinite;
}

.animate-fade-in-up { animation: fade-in-up 0.8s ease-out forwards; }
.animate-scale-in   { animation: scale-in  0.6s ease-out forwards; }

/* =================== ANIMATION DELAYS =================== */

.animation-delay-200  { animation-delay: 0.2s !important; }
.animation-delay-400  { animation-delay: 0.4s !important; }
.animation-delay-600  { animation-delay: 0.6s !important; }
.animation-delay-800  { animation-delay: 0.8s !important; }
.animation-delay-2000 { animation-delay: 2s   !important; }
.animation-delay-4000 { animation-delay: 4s   !important; }

/* =================== 3D / TILT HELPERS =================== */

.perspective-1000 { perspective: 1000px; }
.preserve-3d      { transform-style: preserve-3d; }
.translate-z-10   { transform: translateZ(10px); }

.preserve-3d * { transform-style: preserve-3d; }

.tilt-hover:hover      { transform: rotateY(6deg) scale(1.05); }
.tilt-more-hover:hover { transform: rotateY(12deg); }

/* =================== SCROLL REVEAL =================== */

.will-animate {
  opacity: 0;
  transform: translateY(50px);
}
.will-animate.visible {
  animation: fade-in-up 0.8s ease-out forwards;
}

/* =================== PROJECT SCROLL PREVIEW =================== */

/* Base — shared by both tall and short screenshots */
.project-scroll-img {
  width: 100%;
  object-position: top;
  display: block;
  transform: translateY(0);
  transition: transform 4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* Tall screenshots — scroll downward on hover */
.project-scroll-img:not(.no-scroll) {
  height: auto; /* natural height; overflows the h-60 container */
}
.project-card:hover .project-scroll-img:not(.no-scroll) {
  transform: translateY(var(--scroll-pct, -75%));
}

/* Short screenshots — just fill the frame, no scroll */
.project-scroll-img.no-scroll {
  height: 100%;
  object-fit: cover;
}

/* =================== SKILL CHIPS =================== */

.skill-chip {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: #d4d4d8; /* zinc-300 */
  transition: background 0.2s, border-color 0.2s;
}
.skill-chip:hover {
  background: rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.35);
  color: #fbbf24;
}

/* =================== DOT GRID BACKGROUND =================== */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(161,161,170,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* =================== CUSTOM CURSOR =================== */

#custom-cursor {
  transition: transform 0.15s ease, opacity 0.15s ease;
  mix-blend-mode: normal;
}

.hover-target { cursor: none; }