/* =========================================================================
   animations.css — drop-in motion layer for Kalyan-Web
   Add this AFTER style.css:
     <link rel="stylesheet" href="style.css?v=20260720-2">
     <link rel="stylesheet" href="animations.css">
   Everything here is additive: it only styles new classes/attributes this
   file introduces (kw-*), so it won't fight with your existing CSS.
   ========================================================================= */

:root {
  --kw-accent-1: #4f9dff;
  --kw-accent-2: #00d4ff;
  --kw-ease: cubic-bezier(.16,.84,.44,1);
}

/* Respect reduced-motion first: everything below is skipped/neutralised. */
@media (prefers-reduced-motion: reduce) {
  .kw-reveal, .kw-reveal * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .kw-aurora, .kw-kenburns, .kw-marquee-pause { animation: none !important; }
}

/* -------------------------------------------------------------------------
   1. Scroll reveal — applied by animations.js to headings, paragraphs,
      timeline items, project/achievement/gallery cards, skill chips, etc.
   ------------------------------------------------------------------------- */
.kw-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--kw-ease), transform .7s var(--kw-ease);
  will-change: opacity, transform;
}
.kw-reveal.kw-in {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------------------------------
   2. Card hover lift — direct children of grid/list containers
   ------------------------------------------------------------------------- */
#project-list > *,
#achievement-grid > *,
#gallery-grid > *,
#experience-list > *,
.certificate-list > * {
  transition: transform .35s var(--kw-ease), box-shadow .35s var(--kw-ease);
}
#project-list > *:hover,
#achievement-grid > *:hover,
#gallery-grid > *:hover,
.certificate-list > *:hover {
  transform: translateY(-7px);
  box-shadow: 0 18px 40px -18px rgba(79, 157, 255, .45);
}
#experience-list > *:hover {
  transform: translateX(4px);
}

/* Skill chips: small tactile bounce */
#technical-skill-cloud > *,
#soft-skill-cloud > * {
  transition: transform .25s var(--kw-ease), color .25s var(--kw-ease), border-color .25s var(--kw-ease);
}
#technical-skill-cloud > *:hover,
#technical-skill-cloud > *:focus-visible,
#soft-skill-cloud > *:hover,
#soft-skill-cloud > *:focus-visible {
  transform: translateY(-3px) scale(1.05);
  color: var(--kw-accent-2);
}
#technical-skill-cloud > *:active,
#soft-skill-cloud > *:active {
  transform: translateY(-1px) scale(.97);
}

/* -------------------------------------------------------------------------
   3. Buttons & links — soft lift + ripple target
   ------------------------------------------------------------------------- */
.button, .portfolio-intro-enter, .portfolio-intro-sound, .menu-button {
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--kw-ease), box-shadow .25s var(--kw-ease);
}
.button:hover, .portfolio-intro-enter:hover, .portfolio-intro-sound:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(79, 157, 255, .55);
}
.button:active, .portfolio-intro-enter:active, .portfolio-intro-sound:active {
  transform: translateY(0);
}

.kw-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  transform: scale(0);
  animation: kw-ripple-anim .6s var(--kw-ease);
  pointer-events: none;
}
@keyframes kw-ripple-anim {
  to { transform: scale(1); opacity: 0; }
}

/* Nav links: grow-in underline */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--kw-accent-1), var(--kw-accent-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--kw-ease);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  transform: scaleX(1);
}

/* Smooth in-page scrolling, offset for the sticky header */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 88px; }

/* -------------------------------------------------------------------------
   4. Marquee — pause + gentle speed-up on hover
   ------------------------------------------------------------------------- */
.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* -------------------------------------------------------------------------
   5. Hero ambient glow ("aurora") — a soft moving light behind the hero,
      injected by animations.js as a single <div class="kw-aurora">.
   ------------------------------------------------------------------------- */
.kw-aurora {
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 70%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(38% 55% at 25% 30%, rgba(79,157,255,.22), transparent 70%),
    radial-gradient(32% 45% at 75% 25%, rgba(0,212,255,.16), transparent 70%);
  filter: blur(10px);
  animation: kw-aurora-drift 14s ease-in-out infinite alternate;
}
@keyframes kw-aurora-drift {
  from { transform: translate(-2%, -1%) scale(1); }
  to   { transform: translate(2%, 2%) scale(1.06); }
}
.hero { position: relative; }
.hero > * { position: relative; z-index: 1; }

/* -------------------------------------------------------------------------
   6. Slow Ken Burns zoom for the splash intro's motion image
   ------------------------------------------------------------------------- */
.kw-kenburns {
  animation: kw-kenburns-anim 9s var(--kw-ease) forwards;
}
@keyframes kw-kenburns-anim {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* -------------------------------------------------------------------------
   7. Orbit dots — gentle continuous pulse (adds life without touching any
      rotation your existing CSS may already apply to .orbit)
   ------------------------------------------------------------------------- */
.orbit .dot {
  animation: kw-dot-pulse 2.4s ease-in-out infinite;
}
.orbit .dot.d2 { animation-delay: .3s; }
.orbit .dot.d3 { animation-delay: .6s; }
@keyframes kw-dot-pulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50%      { filter: brightness(1.4); transform: scale(1.18); }
}