/* ==========================================================================
   Taehyun Hyun Portfolio - Continuous & Interactive Motion System
   ========================================================================== */

/* Prevent native browser rubber-band / overscroll conflict on Windows/Chrome/Safari */
html, body {
  overscroll-behavior-y: none !important;
}

/* Hardware accelerated smooth animation keyframes */
@keyframes slideUpFade {
  0% {
    opacity: 0;
    transform: translateY(44px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes navFadeDown {
  0% {
    opacity: 0;
    transform: translateY(-24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Continuous ambient motions */
/* Golden ambient halo/glow for the badge (후광 효과) */
@keyframes badgePulseGlow {
  0%, 100% {
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.25), 0 0 28px rgba(245, 158, 11, 0.15), inset 0 0 6px rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.45);
  }
  50% {
    box-shadow: 0 0 24px rgba(245, 158, 11, 0.55), 0 0 42px rgba(245, 158, 11, 0.28), inset 0 0 12px rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.85);
  }
}

@keyframes heroBgDrift {
  0% {
    transform: scale(1.04) translate(0, 0);
  }
  50% {
    transform: scale(1.08) translate(-1%, -0.8%);
  }
  100% {
    transform: scale(1.05) translate(0.8%, 0.6%);
  }
}

/* Single spring bounce keyframes when scrolling up at top (단 1회의 부드러운 쿠션 반동) */
@keyframes scrollBounceOnce {
  0% {
    transform: translateY(0);
  }
  38% {
    transform: translateY(var(--bounce-dist, 26px));
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes bgBounceOnce {
  0% {
    transform: scale(1.04) translateY(0);
  }
  38% {
    transform: scale(1.05) translateY(6px);
  }
  100% {
    transform: scale(1.04) translateY(0);
  }
}

.scroll-bouncing {
  animation: scrollBounceOnce 0.42s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
  will-change: transform;
}

.bg-scroll-bouncing {
  animation: bgBounceOnce 0.42s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
  will-change: transform;
}

@keyframes liveDotPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.85);
  }
}

/* Staggered entry delays for hero section objects */
.hero-anim-badge {
  opacity: 0;
  animation: slideUpFade 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.12s forwards;
  will-change: transform, opacity;
}

/* Once badge finishes entrance, it remains completely stationary with only the golden halo glow (후광) */
.hero-anim-badge.ambient-active {
  opacity: 1 !important;
  transform: translateY(0) !important;
  animation: badgePulseGlow 4s ease-in-out infinite !important;
}

.hero-anim-title {
  opacity: 0;
  animation: slideUpFade 1s cubic-bezier(0.16, 1, 0.3, 1) 0.26s forwards;
  will-change: transform, opacity;
}

.hero-anim-tagline {
  opacity: 0;
  animation: slideUpFade 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.42s forwards;
  will-change: transform, opacity;
}

.hero-anim-buttons {
  opacity: 0;
  animation: slideUpFade 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.58s forwards;
  will-change: transform, opacity;
}

/* Hero CTA buttons hover emphasis & scale-up animation (마우스 호버 시 강조/확대) */
.hero-anim-buttons a,
main section:first-of-type .flex.flex-wrap.items-center.justify-center.gap-4 a {
  position: relative;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease,
              background-color 0.25s ease,
              border-color 0.25s ease,
              color 0.25s ease !important;
  will-change: transform, box-shadow;
  cursor: pointer;
}

/* Hovered button scales up prominently with an elegant glow and elevated shadow */
.hero-anim-buttons a:hover,
main section:first-of-type .flex.flex-wrap.items-center.justify-center.gap-4 a:hover {
  transform: scale(1.08) translateY(-4px) !important;
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.65), 0 0 24px rgba(245, 158, 11, 0.35) !important;
  z-index: 20;
}

/* Subtle focus on the hovered button by gently resting non-hovered siblings */
.hero-anim-buttons:hover a:not(:hover),
main section:first-of-type .flex.flex-wrap.items-center.justify-center.gap-4:hover a:not(:hover) {
  opacity: 0.72;
  transform: scale(0.98);
}

.hero-anim-buttons a:active,
main section:first-of-type .flex.flex-wrap.items-center.justify-center.gap-4 a:active {
  transform: scale(1.03) translateY(-1px) !important;
  transition-duration: 0.1s !important;
}

.hero-anim-contacts {
  opacity: 0;
  animation: slideUpFade 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.74s forwards;
  will-change: transform, opacity;
}

.nav-anim-enter {
  opacity: 0;
  animation: navFadeDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
  will-change: transform, opacity;
}

/* Navbar icons smooth hover scale */
header a, header button {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease !important;
}
header a:hover, header button:hover {
  transform: scale(1.15);
}

/* Continuous background skyline animation */
.hero-bg-animated {
  animation: heroBgDrift 28s ease-in-out infinite alternate !important;
  will-change: transform;
}

/* Live status beacon dot */
.live-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #34d399;
  box-shadow: 0 0 8px #10b981;
  margin-right: 6px;
  vertical-align: middle;
  animation: liveDotPulse 2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Scroll-triggered reveal system (REPEATABLE on scroll in / scroll out)
   -------------------------------------------------------------------------- */
.scroll-reveal {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.scroll-reveal.is-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Fast reset when element leaves viewport so re-entry animation is crisp */
.scroll-reveal:not(.is-revealed) {
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* Stagger delay helpers for grid children (cards, gallery, gear, services) */
.stagger-1 { transition-delay: 0.05s !important; }
.stagger-2 { transition-delay: 0.12s !important; }
.stagger-3 { transition-delay: 0.19s !important; }
.stagger-4 { transition-delay: 0.26s !important; }
.stagger-5 { transition-delay: 0.33s !important; }
.stagger-6 { transition-delay: 0.40s !important; }

/* Interactive continuous hover elevation */
.interactive-float {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.interactive-float:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.7), 0 0 15px rgba(245, 158, 11, 0.12);
}

/* Gap-free gallery grid enhancements */
#works .grid {
  grid-auto-flow: dense;
}

@media (min-width: 768px) {
  /* Prevent trailing gaps when filter leaves an orphan 2-col card on a new line */
  #works .grid > div.md\:col-span-2:last-child:nth-child(3n + 1) {
    grid-column: span 3 / span 3 !important;
  }
}

/* Image copy/save and drag protection */
img, picture, figure, [class*="aspect-"], .gallery-img-container {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  -khtml-user-drag: none !important;
  -moz-user-drag: none !important;
  -o-user-drag: none !important;
  user-drag: none !important;
}

/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero-anim-badge,
  .hero-anim-title,
  .hero-anim-tagline,
  .hero-anim-buttons,
  .hero-anim-contacts,
  .nav-anim-enter,
  .scroll-reveal,
  .hero-bg-animated {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}