blackheart-website/src/app/styles/animations.css

/* ===== Keyframes ===== */

@keyframes hero-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-fade-in-scale {
  from {
    opacity: 0;
    transform: scale(0.8);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes gradient-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes pulse-glow {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.08);
  }
  30% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.05);
  }
  60% {
    transform: scale(1);
  }
}

@keyframes heart-float {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateY(-100vh) scale(1);
  }
}

/* ===== Hero Entrance ===== */

.hero-logo {
  opacity: 0;
  animation: hero-fade-in-scale 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

.hero-logo-heartbeat {
  animation: heartbeat 2.5s ease-in-out 1.5s infinite;
}

.hero-title {
  opacity: 0;
  animation: hero-fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

.hero-subtitle {
  opacity: 0;
  animation: hero-fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}

.hero-cta {
  opacity: 0;
  animation: hero-fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 1.1s forwards;
}

/* ===== Hero Background ===== */

.hero-bg-gradient {
  background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(201, 169, 110, 0.12), transparent),
              radial-gradient(ellipse 60% 40% at 80% 50%, rgba(201, 169, 110, 0.06), transparent),
              radial-gradient(ellipse 60% 40% at 20% 80%, rgba(201, 169, 110, 0.04), transparent);
}

.hero-glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: pulse-glow 6s ease-in-out infinite;
  pointer-events: none;
}

/* ===== Gradient Text ===== */

.gradient-text {
  background: linear-gradient(
    135deg,
    #8a6f3e 0%,
    #c9a96e 20%,
    #8a6f3e 40%,
    #c9a96e 60%,
    #6b5530 80%,
    #8a6f3e 100%
  );
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 6s ease-in-out infinite;
}

/* Light mode gradient text */
.gradient-text-light {
  background: linear-gradient(135deg, #171717 0%, #c9a96e 50%, #171717 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 6s ease-in-out infinite;
}

/* ===== Animated Border ===== */

.animated-border {
  position: relative;
}

.animated-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.3), transparent 40%, transparent 60%, rgba(201, 169, 110, 0.15));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 0.5s ease;
  opacity: 0.5;
}

.animated-border:hover::before {
  opacity: 1;
  background: linear-gradient(135deg, rgba(201, 169, 110, 0.6), transparent 40%, transparent 60%, rgba(201, 169, 110, 0.4));
}

/* ===== Glow Effect ===== */

.glow-hover {
  transition: box-shadow 0.5s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glow-hover:hover {
  box-shadow: 0 0 30px rgba(201, 169, 110, 0.1), 0 0 60px rgba(201, 169, 110, 0.05);
  transform: translateY(-4px);
}

/* ===== Scroll Reveal ===== */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Showcase ===== */

@keyframes showcase-detail-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes showcase-image-enter {
  from {
    opacity: 0;
    transform: scale(1.03);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.showcase-detail-enter {
  animation: showcase-detail-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.showcase-detail-enter img {
  animation: showcase-image-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ===== Modal ===== */

@keyframes modal-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes modal-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-overlay {
  animation: modal-overlay-in 0.3s ease-out;
}

.modal-content {
  animation: modal-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== Section Divider ===== */

.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.15), transparent);
}

/* ===== Reduced Motion ===== */

@media (prefers-reduced-motion: reduce) {
  .hero-logo,
  .hero-title,
  .hero-subtitle,
  .hero-cta {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

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

  .modal-overlay,
  .modal-content {
    animation: none !important;
  }

  .gradient-text,
  .gradient-text-light {
    animation: none !important;
  }

  .hero-glow-orb,
  .hero-logo-heartbeat {
    animation: none !important;
  }

  .showcase-detail-enter,
  .showcase-detail-enter img {
    animation: none !important;
  }

  .glow-hover:hover {
    transform: none;
  }
}