/* ===== Hero atmospheric motion — premium, calm ===== */

:root {
  --hero-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hero-duration: 1.05s;
  --hero-enter-y: 56px;
  --hero-enter-scale: 0.92;
  --hero-enter-blur: 14px;
}

/* --- Background blobs (slow liquid drift) --- */
@media (prefers-reduced-motion: no-preference) {
  html.js-hero-motion .hero-blob-1,
  html.js-hero-motion .hero-blob-2 {
    will-change: transform;
  }

  html.js-hero-motion .hero-blob-1 {
    animation: heroBlobDrift1 34s ease-in-out infinite;
  }

  html.js-hero-motion .hero-blob-2 {
    animation: heroBlobDrift2 28s ease-in-out infinite;
  }

  html.js-hero-motion .hero-bg::before {
    animation: heroBgBreath 40s ease-in-out infinite;
    will-change: transform, opacity;
  }

  @keyframes heroBlobDrift1 {
    0%,
    100% {
      transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
    33% {
      transform: translate3d(42px, -28px, 0) scale(1.1) rotate(2.5deg);
    }
    66% {
      transform: translate3d(-28px, 20px, 0) scale(0.94) rotate(-2deg);
    }
  }

  @keyframes heroBlobDrift2 {
    0%,
    100% {
      transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
    40% {
      transform: translate3d(-34px, 26px, 0) scale(1.08) rotate(-2deg);
    }
    70% {
      transform: translate3d(24px, -16px, 0) scale(0.94) rotate(1.5deg);
    }
  }

  @keyframes heroBgBreath {
    0%,
    100% {
      transform: scale(1) translate3d(0, 0, 0);
      opacity: 0.42;
    }
    50% {
      transform: scale(1.06) translate3d(0, -2%, 0);
      opacity: 0.52;
    }
  }

  [data-theme="dark"] html.js-hero-motion .hero-bg::before {
    animation: heroBgBreathDark 40s ease-in-out infinite;
  }

  @keyframes heroBgBreathDark {
    0%,
    100% {
      transform: scale(1) translate3d(0, 0, 0);
      opacity: 1;
    }
    50% {
      transform: scale(1.03) translate3d(0, -1%, 0);
      opacity: 1;
    }
  }
}

/* --- Title structure --- */
.hero-title-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.02em;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: 1.08;
  color: var(--navy);
}

.hero-title__line {
  display: block;
}

.hero-title__line--accent {
  color: var(--accent);
}

.hero-accent-line {
  display: block;
  width: min(14rem, 55%);
  height: 4px;
  margin-top: 1.125rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(231, 139, 123, 0.35) 18%,
    var(--accent) 50%,
    rgba(231, 139, 123, 0.35) 82%,
    transparent 100%
  );
  transform: scaleX(0);
  transform-origin: center center;
  opacity: 0.9;
}

/* --- Load reveals --- */
@media (prefers-reduced-motion: no-preference) {
  html.js-hero-motion .hero-title__line,
  html.js-hero-motion .hero-accent-line,
  html.js-hero-motion .hero-badge,
  html.js-hero-motion .hero-subtitle,
  html.js-hero-motion .search-bar,
  html.js-hero-motion .popular-tags .tag,
  html.js-hero-motion .popular-tags > span {
    opacity: 0;
    transform: translate3d(0, var(--hero-enter-y), 0) scale(var(--hero-enter-scale));
    filter: blur(var(--hero-enter-blur));
    transition:
      opacity var(--hero-duration) var(--hero-ease),
      transform var(--hero-duration) var(--hero-ease),
      filter var(--hero-duration) var(--hero-ease);
    transition-delay: var(--hero-delay, 0s);
  }

  html.js-hero-motion .hero-accent-line {
    transform: scaleX(0);
    filter: none;
    opacity: 1;
    transition: transform 1.15s var(--hero-ease);
    transition-delay: var(--hero-delay, 0s);
  }

  html.js-hero-motion .search-bar {
    filter: blur(12px);
    transform: translate3d(0, 48px, 0) scale(0.94);
  }

  html.js-hero-motion .popular-tags .tag,
  html.js-hero-motion .popular-tags > span {
    transform: translate3d(0, 32px, 0) scale(0.94);
    filter: blur(10px);
  }

  html.js-hero-motion .hero.is-hero-ready .hero-title__line,
  html.js-hero-motion .hero.is-hero-ready .hero-badge,
  html.js-hero-motion .hero.is-hero-ready .hero-subtitle,
  html.js-hero-motion .hero.is-hero-ready .search-bar,
  html.js-hero-motion .hero.is-hero-ready .popular-tags .tag,
  html.js-hero-motion .hero.is-hero-ready .popular-tags > span {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }

  html.js-hero-motion .hero.is-hero-ready .hero-accent-line {
    transform: scaleX(1);
  }

  /* Search ambient glow pulse */
  html.js-hero-motion .search-bar-inner {
    animation: heroSearchGlow 5s ease-in-out infinite;
    animation-delay: 1.2s;
  }

  @keyframes heroSearchGlow {
    0%,
    100% {
      box-shadow:
        var(--shadow-lg),
        0 0 0 1px rgba(16, 35, 62, 0.02),
        0 0 0 rgba(231, 139, 123, 0);
    }
    50% {
      box-shadow:
        var(--shadow-xl),
        0 0 0 1px rgba(231, 139, 123, 0.16),
        0 0 40px rgba(231, 139, 123, 0.22),
        0 0 80px rgba(231, 139, 123, 0.08);
    }
  }

  html.js-hero-motion .search-bar-inner:focus-within {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-accent-line {
    transform: scaleX(1);
  }
}

/* --- Navbar scroll state --- */
.header {
  transition:
    background-color 0.45s var(--hero-ease),
    backdrop-filter 0.45s var(--hero-ease),
    box-shadow 0.45s var(--hero-ease),
    border-color 0.45s var(--hero-ease);
}

.header.header--scrolled {
  background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: var(--shadow-sm);
}

/* Legacy accent underline — replaced by .hero-accent-line */
.hero h1 .accent::after,
.hero-title__line--accent::after {
  display: none;
}

/* ===== Extra hero atmosphere ===== */

.hero {
  --hero-mx: 50%;
  --hero-my: 35%;
}

/* Cursor spotlight */
.hero-spotlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    520px circle at var(--hero-mx) var(--hero-my),
    rgba(231, 139, 123, 0.18) 0%,
    rgba(231, 139, 123, 0.06) 35%,
    transparent 62%
  );
  transition: opacity 0.5s var(--hero-ease);
}

html.js-hero-motion .hero.is-hero-ready .hero-spotlight {
  opacity: 1;
}

html.js-hero-motion.hero-pointer-fine .hero-spotlight {
  opacity: 1;
}

/* Floating particles */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-particle {
  position: absolute;
  left: var(--p-x, 50%);
  top: var(--p-y, 50%);
  width: var(--p-size, 4px);
  height: var(--p-size, 4px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(231, 139, 123, 0.55) 55%, transparent 100%);
  box-shadow: 0 0 12px rgba(231, 139, 123, 0.35);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0.6);
}

html.js-hero-motion .hero.is-hero-ready .hero-particle {
  opacity: var(--p-opacity, 0.55);
  animation: heroParticleFloat var(--p-dur, 22s) ease-in-out infinite;
  animation-delay: var(--p-delay, 0s);
}

@keyframes heroParticleFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  25% {
    transform: translate3d(12px, -28px, 0) scale(1.15);
  }
  50% {
    transform: translate3d(-8px, -52px, 0) scale(0.9);
  }
  75% {
    transform: translate3d(16px, -36px, 0) scale(1.05);
  }
}

/* Bottom wave */
.hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 1;
  height: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--background);
  pointer-events: none;
  opacity: 0.85;
}

.hero-wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

html.js-hero-motion .hero-wave svg {
  animation: heroWaveSway 14s ease-in-out infinite;
}

@keyframes heroWaveSway {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scaleY(1);
  }
  50% {
    transform: translate3d(-1.5%, 2px, 0) scaleY(1.04);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Badge shine sweep */
  .hero-badge {
    position: relative;
    overflow: hidden;
  }

  html.js-hero-motion .hero.is-hero-ready .hero-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent 35%,
      rgba(255, 255, 255, 0.65) 50%,
      transparent 65%
    );
    transform: translateX(-130%);
    animation: heroBadgeShine 4.5s ease-in-out infinite;
    animation-delay: 1.5s;
    pointer-events: none;
  }

  @keyframes heroBadgeShine {
    0%,
    72%,
    100% {
      transform: translateX(-130%);
    }
    38% {
      transform: translateX(130%);
    }
  }

  /* Accent line glow pulse */
  html.js-hero-motion .hero.is-hero-ready .hero-accent-line {
    animation: heroAccentLineGlow 4s ease-in-out infinite;
    animation-delay: 1.2s;
  }

  @keyframes heroAccentLineGlow {
    0%,
    100% {
      box-shadow: 0 0 0 rgba(231, 139, 123, 0);
      filter: brightness(1);
    }
    50% {
      box-shadow: 0 0 20px rgba(231, 139, 123, 0.45);
      filter: brightness(1.08);
    }
  }

  /* Title subtle 3D tilt (desktop) */
  html.js-hero-motion.hero-pointer-fine .hero.is-hero-ready .hero-title-wrap {
    transform: perspective(900px) rotateX(var(--hero-tilt-x, 0deg)) rotateY(var(--hero-tilt-y, 0deg));
    transition: transform 0.35s var(--hero-ease);
  }

  /* Tag magnetic hover */
  html.js-hero-motion .popular-tags .tag {
    transition:
      opacity var(--hero-duration) var(--hero-ease),
      transform var(--hero-duration) var(--hero-ease),
      filter var(--hero-duration) var(--hero-ease),
      box-shadow 0.35s var(--hero-ease),
      border-color 0.35s var(--hero-ease);
  }

  html.js-hero-motion .hero.is-hero-ready .popular-tags .tag:hover {
    transform: translateY(-3px) scale(1.04);
    border-color: rgba(231, 139, 123, 0.35);
    box-shadow: 0 8px 24px rgba(231, 139, 123, 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-spotlight,
  .hero-particles,
  .hero-wave svg {
    display: none;
  }

}