/* =========================================================
   BINTANG TEKNIK COMPANY PROFILE
   File: assets/css/animation.css
   Purpose: Animation, Parallax, Micro Interaction
========================================================= */

/* =========================
   KEYFRAMES
========================= */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(34px);
  }

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

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }

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

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(34px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(-34px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-16px);
  }
}

@keyframes floatX {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(14px);
  }
}

@keyframes floatRotate {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-12px) rotate(4deg);
  }
}

@keyframes pulseGlow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(24, 183, 216, 0.22);
  }

  50% {
    box-shadow: 0 0 0 12px rgba(24, 183, 216, 0);
  }
}

@keyframes softSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes brandMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes lineSlide {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 96px 96px;
  }
}

@keyframes loaderPulse {
  0% {
    transform: scale(0.92) rotate(0deg);
    border-radius: 26px;
  }

  50% {
    transform: scale(1.04) rotate(4deg);
    border-radius: 32px;
  }

  100% {
    transform: scale(0.92) rotate(0deg);
    border-radius: 26px;
  }
}

@keyframes shineMove {
  0% {
    transform: translateX(-130%) skewX(-18deg);
  }

  100% {
    transform: translateX(130%) skewX(-18deg);
  }
}

/* =========================
   PAGE ENTRANCE
========================= */
body {
  animation: pageFade 520ms ease both;
}

@keyframes pageFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.site-header {
  animation: fadeDown 720ms ease both;
}

.hero-content .kicker,
.page-hero .kicker {
  animation: fadeUp 760ms ease both 80ms;
}

.hero-title,
.page-title {
  animation: fadeUp 780ms ease both 160ms;
}

.hero-desc,
.page-desc {
  animation: fadeUp 780ms ease both 260ms;
}

.hero-actions,
.breadcrumb {
  animation: fadeUp 780ms ease both 360ms;
}

.hero-meta {
  animation: fadeUp 780ms ease both 460ms;
}

.hero-visual {
  animation: scaleIn 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both 280ms;
}

/* =========================
   REVEAL ON SCROLL
========================= */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 720ms ease,
    transform 720ms ease;
  will-change: opacity, transform;
}

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

.reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition:
    opacity 760ms ease,
    transform 760ms ease;
  will-change: opacity, transform;
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition:
    opacity 760ms ease,
    transform 760ms ease;
  will-change: opacity, transform;
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 760ms ease,
    transform 760ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Delay helper */
.delay-1 {
  transition-delay: 80ms;
}

.delay-2 {
  transition-delay: 160ms;
}

.delay-3 {
  transition-delay: 240ms;
}

.delay-4 {
  transition-delay: 320ms;
}

.delay-5 {
  transition-delay: 400ms;
}

/* =========================
   PARALLAX HELPERS
========================= */
.parallax-layer {
  will-change: transform;
  transition: transform 80ms linear;
}

.parallax-slow {
  transform: translate3d(0, var(--parallax-y, 0), 0);
}

.parallax-medium {
  transform: translate3d(0, calc(var(--parallax-y, 0) * 1.35), 0);
}

.parallax-fast {
  transform: translate3d(0, calc(var(--parallax-y, 0) * 1.75), 0);
}

/* =========================
   HERO FLOATING OBJECTS
========================= */
@media (min-width: 621px) {
  .hero-orbit {
    animation: floatY 7s ease-in-out infinite;
  }

  .hero-device {
    animation: floatY 6s ease-in-out infinite reverse;
  }
}

.card-top {
  animation: floatY 5.4s ease-in-out infinite;
}

.card-right {
  animation: floatX 5.8s ease-in-out infinite;
}

.card-bottom {
  animation: floatY 6.2s ease-in-out infinite reverse;
}

.shape-1 {
  animation: floatRotate 8s ease-in-out infinite;
}

.shape-2 {
  animation: floatRotate 7s ease-in-out infinite reverse;
}

.meta-dot,
.kicker::before {
  animation: pulseGlow 2.4s ease-in-out infinite;
}

.map-pin {
  animation: pulseGlow 2.1s ease-in-out infinite;
}

/* =========================
   BACKGROUND MOTION
========================= */
.grid-bg::before {
  animation: lineSlide 24s linear infinite;
}

.hero-orbit::before,
.about-photo-card::before,
.cta-box::before {
  animation: lineSlide 30s linear infinite;
}

/* =========================
   BRAND MARQUEE
========================= */
.brand-track {
  animation: brandMarquee 26s linear infinite;
}

.brand-marquee:hover .brand-track {
  animation-play-state: paused;
}

/* =========================
   BUTTON SHINE
========================= */
.btn-primary::before,
.btn-light::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 46%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.34),
    transparent
  );
  opacity: 0;
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}

.btn-primary:hover::before,
.btn-light:hover::before {
  opacity: 1;
  animation: shineMove 760ms ease;
}

/* =========================
   CARD MICRO INTERACTION
========================= */
.card,
.product-card,
.contact-card,
.faq-item,
.stat-card,
.brand-chip {
  will-change: transform;
}

.card:hover .card-icon,
.product-card:hover .product-tag,
.contact-card:hover .contact-card-icon {
  animation: pulseGlow 1.8s ease-in-out infinite;
}

.product-card:hover::before {
  transform: scale(1.2);
  opacity: 0.8;
}

.product-card::before {
  transition:
    transform 620ms ease,
    opacity 620ms ease;
}

/* =========================
   FAQ ANIMATION
========================= */
.faq-answer {
  opacity: 0;
}

.faq-item.is-open .faq-answer {
  opacity: 1;
  transition:
    max-height 480ms ease,
    opacity 420ms ease 80ms;
}

.faq-question:hover .faq-icon {
  transform: rotate(12deg);
}

.faq-item.is-open .faq-question:hover .faq-icon {
  transform: rotate(45deg) scale(1.06);
}

/* =========================
   FORM ANIMATION
========================= */
.form-control::placeholder {
  color: rgba(113, 131, 143, 0.72);
}

.form-group {
  position: relative;
}

.form-group::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary-ocean), var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.form-group:focus-within::after {
  transform: scaleX(1);
}

.form-status {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--cyan-soft);
  color: var(--primary-ocean);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.6;
  display: none;
}

.form-status.is-visible {
  display: block;
  animation: fadeUp 420ms ease both;
}

.form-status.is-error {
  background: #fff1f1;
  color: #b42318;
}

/* =========================
   LOADER
========================= */
.loader-mark {
  animation: loaderPulse 1.4s ease-in-out infinite;
}

.loader-mark::before {
  animation: softSpin 2.4s linear infinite;
}

.loader-mark::after {
  animation: softSpin 1.8s linear infinite reverse;
}

/* =========================
   NAV MOBILE MOTION
========================= */
.nav-menu .nav-link {
  transform: translateY(0);
}

.nav-menu.is-open .nav-link {
  animation: fadeUp 420ms ease both;
}

.nav-menu.is-open .nav-link:nth-child(1) {
  animation-delay: 40ms;
}

.nav-menu.is-open .nav-link:nth-child(2) {
  animation-delay: 80ms;
}

.nav-menu.is-open .nav-link:nth-child(3) {
  animation-delay: 120ms;
}

.nav-menu.is-open .nav-link:nth-child(4) {
  animation-delay: 160ms;
}

.nav-menu.is-open .nav-link:nth-child(5) {
  animation-delay: 200ms;
}

/* =========================
   SCROLL TOP
========================= */
.scroll-top {
  overflow: hidden;
}

.scroll-top::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 0;
  background: linear-gradient(135deg, var(--primary-ocean), var(--cyan));
  transition: height var(--transition);
  z-index: -1;
}

.scroll-top:hover::before {
  height: 100%;
}

/* =========================
   INDUSTRIAL LINE DECORATION
========================= */
.line-decor {
  position: absolute;
  pointer-events: none;
  opacity: 0.52;
}

.line-decor.line-1 {
  width: 220px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  right: 8%;
  top: 22%;
  animation: floatX 8s ease-in-out infinite;
}

.line-decor.line-2 {
  width: 1px;
  height: 190px;
  background: linear-gradient(180deg, transparent, var(--primary-ocean), transparent);
  left: 7%;
  bottom: 18%;
  animation: floatY 9s ease-in-out infinite reverse;
}

/* =========================
   HOVER LIFT GROUP
========================= */
.hover-lift {
  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

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

/* =========================
   PAGE TRANSITION SUPPORT
========================= */
.page-transition {
  opacity: 1;
  transition: opacity 240ms ease;
}

.page-transition.is-leaving {
  opacity: 0;
}

/* =========================
   REDUCED MOTION
========================= */
@media (prefers-reduced-motion: reduce) {
  body,
  .site-header,
  .hero-content .kicker,
  .page-hero .kicker,
  .hero-title,
  .page-title,
  .hero-desc,
  .page-desc,
  .hero-actions,
  .breadcrumb,
  .hero-meta,
  .hero-visual,
  .hero-orbit,
  .hero-device,
  .card-top,
  .card-right,
  .card-bottom,
  .shape-1,
  .shape-2,
  .meta-dot,
  .kicker::before,
  .map-pin,
  .grid-bg::before,
  .hero-orbit::before,
  .about-photo-card::before,
  .cta-box::before,
  .brand-track,
  .loader-mark,
  .loader-mark::before,
  .loader-mark::after,
  .line-decor {
    animation: none !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .parallax-layer,
  .parallax-slow,
  .parallax-medium,
  .parallax-fast {
    transform: none !important;
  }
}