.reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(10px);
  transition:
    opacity 800ms ease,
    transform 800ms ease,
    filter 800ms ease;
  transition-delay: var(--delay, 0ms);
  will-change: transform, opacity, filter;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.fade-in {
  animation: fadeIn 900ms ease forwards;
}

.hover-lift {
  transition: transform 260ms ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
}

.hover-glow {
  transition: box-shadow 260ms ease, border-color 260ms ease;
}

.hover-glow:hover {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  border-color: rgba(215, 185, 142, 0.26);
}

.blur-enter {
  animation: blurEnter 850ms ease forwards;
}

.hero-title .line {
  display: block;
}

.hero-title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(26px) scale(1.06) rotate(-2deg);
  filter: blur(16px);
  will-change: transform, filter, opacity;
  animation: charClarify 1500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-title .c1  { animation-delay: 0.10s; }
.hero-title .c2  { animation-delay: 0.32s; }
.hero-title .c3  { animation-delay: 0.18s; }
.hero-title .c4  { animation-delay: 0.41s; }

.hero-title .c5  { animation-delay: 0.27s; }
.hero-title .c6  { animation-delay: 0.52s; }
.hero-title .c7  { animation-delay: 0.22s; }
.hero-title .c8  { animation-delay: 0.63s; }
.hero-title .c9  { animation-delay: 0.36s; }
.hero-title .c10 { animation-delay: 0.74s; }
.hero-title .c11 { animation-delay: 0.48s; }

.hero-title .c2,
.hero-title .c6,
.hero-title .c9 {
  transform: translateY(30px) scale(1.08) rotate(2deg);
}

.hero-title .c4,
.hero-title .c8,
.hero-title .c11 {
  transform: translateY(20px) scale(1.04) rotate(-3deg);
}

.hero-titles span,
.hero-actions .btn {
  opacity: 0;
  transform: translateY(18px);
  animation: fadeUp 650ms ease forwards;
}

.hero-titles span:nth-child(1) { animation-delay: 350ms; }
.hero-titles span:nth-child(2) { animation-delay: 430ms; }
.hero-titles span:nth-child(3) { animation-delay: 510ms; }
.hero-titles span:nth-child(4) { animation-delay: 590ms; }

.hero-actions .btn:first-child { animation-delay: 700ms; }
.hero-actions .btn:last-child { animation-delay: 790ms; }

.hero-text,
.eyebrow {
  animation: softAppear 900ms ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes blurEnter {
  from {
    opacity: 0;
    filter: blur(16px);
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes lineReveal {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes softAppear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes charClarify {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(1.06) rotate(-2deg);
    filter: blur(18px);
  }

  55% {
    opacity: 1;
    filter: blur(6px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0);
  }
}

.hero-copy,
.hero-visual,
.profile-frame,
.noise {
  transition:
    transform 220ms ease,
    opacity 220ms ease;
}

.hero-titles span {
  transition:
    transform 240ms ease,
    background 240ms ease,
    border-color 240ms ease;
}

.hero-titles span:hover {
  transform: translateY(-3px);
  background: rgba(215, 185, 142, 0.14);
  border-color: rgba(215, 185, 142, 0.34);
}

/* === Gradient Glow System === */

.glow-item {
  position: relative;
  overflow: hidden;
  transition:
    transform 260ms ease,
    border-color 260ms ease,
    background 260ms ease,
    box-shadow 260ms ease;
}

.glow-item::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%),
      rgba(215, 185, 142, 0.35),
      transparent 60%);
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
  z-index: 0;
}

.glow-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(120deg,
      rgba(215, 185, 142, 0.15),
      rgba(255, 255, 255, 0.05),
      rgba(215, 185, 142, 0.15));
  opacity: 0;
  transition: opacity 260ms ease;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

.glow-item > * {
  position: relative;
  z-index: 1;
}

.glow-item:hover {
  transform: translateY(-3px);
  border-color: rgba(215, 185, 142, 0.35);
  background: rgba(215, 185, 142, 0.08);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}

.glow-item:hover::before,
.glow-item:hover::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }
}