/* =========================================================
   TANA — WOW MOTION LAYER
   Lightweight: only transform/translate/scale/opacity during scroll.
========================================================= */

/* Stronger but short hero intro: the blur exists only during load. */
@keyframes heroReveal {
  from {
    opacity: 0;
    transform: translateY(45px) scale(1.06);
    filter: blur(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.hero-title,
.hero-line {
  will-change: transform, opacity;
}

.fonts-ready .hero-line {
  transform-origin: center center;
}

/* =========================================================
   COMING SOON — CINEMATIC REVEAL
========================================================= */

.coming-title {
  overflow: hidden;
}

.coming-title span {
  transition:
    translate 1.15s cubic-bezier(.16, 1, .3, 1),
    opacity .8s ease;
}

.coming:not(.coming-visible) .coming-title span:first-child {
  translate: -7vw 0;
  opacity: 0;
}

.coming:not(.coming-visible) .coming-title span:last-child {
  translate: 7vw 0;
  opacity: 0;
}

.coming.coming-visible .coming-title span {
  translate: 0 0;
  opacity: 1;
}

/* =========================================================
   EMAIL MICRO-INTERACTION
========================================================= */

.email span:last-child {
  transition: translate .45s cubic-bezier(.16, 1, .3, 1);
}

.email:hover span:last-child {
  translate: 4px -4px;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {
  .coming:not(.coming-visible) .coming-title span:first-child {
    translate: -28px 0;
  }

  .coming:not(.coming-visible) .coming-title span:last-child {
    translate: 28px 0;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .hero-title,
  .hero-line,
  .coming-title span,
  .email span:last-child {
    will-change: auto;
    translate: none !important;
    scale: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}