/* ============================================================
   ANIMATIONS — Scroll reveals, Hover effects, Glassmorphism
   ============================================================ */

/* ---------- Scroll Reveal Base ---------- */
/* Elements start visible. JS adds .reveal-init to set up animation,
   then .reveal--visible triggers the transition. Without JS, everything
   is visible by default — progressive enhancement. */

.reveal-init {
  opacity: 0;
  transition:
    opacity var(--duration-premium) var(--ease-premium),
    transform var(--duration-premium) var(--ease-premium);
  will-change: opacity, transform;
}

.reveal-init.reveal-fade-up {
  transform: translateY(30px);
}

.reveal-init.reveal-scale {
  transform: scale(0.95);
}

.reveal-init.reveal-slide-left {
  transform: translateX(40px);
}

.reveal-init.reveal-slide-right {
  transform: translateX(-40px);
}

.reveal--visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Staggered delays */
.reveal-delay-1 {
  transition-delay: 100ms;
}

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

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

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

.reveal-delay-5 {
  transition-delay: 500ms;
}

.reveal-delay-6 {
  transition-delay: 600ms;
}

.reveal-delay-7 {
  transition-delay: 700ms;
}

.reveal-delay-8 {
  transition-delay: 800ms;
}

/* ---------- Glassmorphism ---------- */
.glass {
  background-color: rgba(221, 227, 231, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(172, 179, 183, 0.2);
}

.glass--heavy {
  background-color: rgba(234, 238, 241, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* ---------- Gradient Glow (CTAs) ---------- */
.gradient-glow {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dim));
  position: relative;
}

.gradient-glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dim));
  border-radius: inherit;
  filter: blur(12px);
  opacity: 0;
  z-index: -1;
  transition: opacity var(--duration-normal) var(--ease-in-out);
}

.gradient-glow:hover::before {
  opacity: 0.4;
}

/* ---------- Hero Text Entrance ---------- */
@keyframes heroSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-animate {
  animation: heroSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

.hero-animate-delay-1 {
  animation-delay: 0.1s;
}

.hero-animate-delay-2 {
  animation-delay: 0.3s;
}

.hero-animate-delay-3 {
  animation-delay: 0.5s;
}

.hero-animate-delay-4 {
  animation-delay: 0.7s;
}

/* ---------- Background Glow Pulse ---------- */
@keyframes glowPulse {

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

  50% {
    opacity: 0.12;
    transform: scale(1.05);
  }
}

.bg-glow-animate {
  animation: glowPulse 10s var(--ease-in-out) infinite;
}

/* ---------- Kinetic Background & Ambient Mesh ---------- */
.kinetic-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--color-background);
  filter: url('#liquid-filter'); /* Apply the gooey filter to the whole container */
}

.ambient-blob {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
  filter: blur(60px);
  opacity: 0.15; /* Increased opacity because the filter will reduce it */
  pointer-events: none;
  z-index: -1;
  animation: blobWarp 20s infinite alternate ease-in-out;
  mix-blend-mode: plus-lighter;
}

.ambient-blob--1 { top: -15%; left: -15%; background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%); }
.ambient-blob--2 { bottom: -15%; right: -15%; background: radial-gradient(circle, var(--color-tertiary) 0%, transparent 70%); animation-delay: -5s; animation-duration: 25s; }
.ambient-blob--3 { top: 25%; right: 15%; background: radial-gradient(circle, var(--color-primary-dim) 0%, transparent 70%); animation-delay: -12s; animation-duration: 30s; opacity: 0.1; }

@keyframes blobWarp {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
  33% { transform: translate(15%, 10%) scale(1.2) rotate(120deg); border-radius: 50% 50% 30% 70% / 50% 40% 70% 60%; }
  66% { transform: translate(-10%, 25%) scale(0.8) rotate(240deg); border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%; }
  100% { transform: translate(10%, -15%) scale(1.1) rotate(360deg); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
}

.kinetic-grid {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: 
    linear-gradient(to right, var(--color-outline-variant) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-outline-variant) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(circle at center, black, transparent 80%);
  opacity: 0.05;
  transform: perspective(1000px) rotateX(60deg);
  animation: gridPan 60s linear infinite;
  z-index: 0;
}

@keyframes gridPan {
  from { transform: perspective(1000px) rotateX(60deg) translateY(0); }
  to { transform: perspective(1000px) rotateX(60deg) translateY(80px); }
}

/* ---------- Premium Noise Texture ---------- */
.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0.03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' 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");
}

/* ---------- Dark Mode Background Adjustments ---------- */
[data-theme="dark"] .kinetic-bg {
  background-color: var(--color-background);
}

[data-theme="dark"] .ambient-blob {
  opacity: 0.1;
  mix-blend-mode: screen;
}

[data-theme="dark"] .ambient-blob--1 {
  background: radial-gradient(circle, #415aab 0%, transparent 70%);
}

[data-theme="dark"] .ambient-blob--2 {
  background: radial-gradient(circle, #006b5f 0%, transparent 70%);
}

[data-theme="dark"] .ambient-blob--3 {
  background: radial-gradient(circle, #344e9e 0%, transparent 70%);
  opacity: 0.06;
}

[data-theme="dark"] .kinetic-grid {
  opacity: 0.08;
}

/* ---------- Section Unfold Reveal ---------- */
.reveal-unfold {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--duration-premium) var(--ease-premium);
}

.reveal--visible.reveal-unfold {
  clip-path: inset(0 0 0 0);
}

/* ---------- Text Reveal (Animated Chars) ---------- */
.char-reveal {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.char-reveal__inner {
  display: inline-block;
  transform: translateY(100%);
  transition: transform var(--duration-premium) var(--ease-premium);
  transition-delay: calc(var(--char-index) * 20ms);
}

.reveal--visible .char-reveal__inner {
  transform: translateY(0);
}

/* ---------- Bento Card Shimmer ---------- */
@keyframes shimmer {
  0% {
    transform: skewX(-20deg) translateX(-180%);
  }

  100% {
    transform: skewX(-20deg) translateX(180%);
  }
}

.bento-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(110deg,
      transparent 0%,
      transparent 40%,
      rgba(225 225 225 / 38%) 50%,
      transparent 60%,
      transparent 100%);
  transform: skewX(-20deg) translateX(-180%);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  pointer-events: none;
  z-index: 1;
  /* Stay above background, below content */
}

.bento-card:hover::before {
  opacity: 1;
  animation: shimmer 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* ---------- Timeline Entry Animation ---------- */
.timeline__entry.reveal-fade-up {
  transform: translateY(20px) translateX(-10px);
}

/* ---------- Counter Animation ---------- */
.counter-animate {
  display: inline-block;
}

/* ---------- Floating Dot Decoration ---------- */
@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.float-animate {
  animation: float 3s var(--ease-in-out) infinite;
}

/* ---------- Link Underline Effect ---------- */
.link-animated {
  position: relative;
}

.link-animated::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-tertiary);
  transition: width var(--duration-normal) var(--ease-out);
}

.link-animated:hover::after {
  width: 100%;
}

/* ---------- Skill Item Glow ---------- */
.skill-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 24px rgba(65, 90, 171, 0.08);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
  pointer-events: none;
}

.skill-item {
  position: relative;
}

.skill-item:hover::after {
  opacity: 1;
}

/* ---------- Page Transition ---------- */
@keyframes pageEnter {
  from {
    opacity: 0.5;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* ---------- Tablet/Mobile: Simple Static Background ---------- */
@media (max-width: 1024px) {
  /* Hide all animated background elements */
  .kinetic-bg canvas,
  .ambient-blob,
  .kinetic-grid {
    display: none !important;
  }

  /* Remove the SVG liquid filter and apply a subtle static gradient */
  .kinetic-bg {
    filter: none;
    background:
      radial-gradient(ellipse at 15% 15%, rgba(65, 90, 171, 0.06) 0%, transparent 60%),
      radial-gradient(ellipse at 85% 80%, rgba(0, 107, 95, 0.04) 0%, transparent 50%),
      var(--color-background);
  }

  /* Dark theme static gradient */
  [data-theme="dark"] .kinetic-bg {
    background:
      radial-gradient(ellipse at 15% 15%, rgba(65, 90, 171, 0.12) 0%, transparent 60%),
      radial-gradient(ellipse at 85% 80%, rgba(0, 107, 95, 0.08) 0%, transparent 50%),
      var(--color-background);
  }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-init,
  .reveal-fade-up,
  .reveal-scale,
  .reveal-slide-left,
  .reveal-slide-right {
    opacity: 1;
    transform: none;
  }

  .hero-animate {
    animation: none;
    opacity: 1;
    transform: none;
  }
}