/* Shared, progressively enhanced motion for the public website. */
:root {
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-motion-pending="true"] {
  opacity: 0 !important;
  pointer-events: none;
}

/* Focus must never wait for an old transition: all rule to finish fading. */
[data-motion-focus="true"]:focus-within {
  opacity: 1 !important;
  transition-duration: 0s !important;
}

/* Keep the original decoration, with a short entrance instead of endless loops. */
.floating-element,
.coding-icon,
.left-section::before,
.success-icon-box,
.whatsapp-fab,
.hero::before,
.hero::after,
.hero-content h1.animated-text {
  animation-iteration-count: 1 !important;
}

@media (prefers-reduced-motion: no-preference) {
  header .logo img {
    transition: transform 280ms var(--motion-ease);
  }

  header .logo a:hover img {
    transform: rotate(-5deg) scale(1.04);
  }

  nav a::before {
    transition: width 280ms var(--motion-ease);
  }

  :is(
    .btn-primary,
    .btn-secondary,
    .submit-btn,
    .whatsapp-fab,
    .social-icons a
  ) {
    transition:
      transform 220ms var(--motion-ease),
      box-shadow 220ms ease,
      background-color 220ms ease,
      color 220ms ease,
      border-color 220ms ease;
  }

  :is(.btn-primary, .btn-secondary, .submit-btn):active {
    transform: translateY(1px) scale(0.98);
  }

  :is(.feature-card, .benefit-card, .step, [data-motion="card"]) {
    transition:
      transform 300ms var(--motion-ease),
      box-shadow 300ms ease,
      border-color 220ms ease;
  }

  :is(.feature-icon, .benefit-icon, .step-icon, .course-image img) {
    transition: transform 350ms var(--motion-ease);
  }

  .tech-icon {
    transition:
      transform 180ms ease,
      box-shadow 180ms ease;
  }

  :is(.tab-content.active, .faq-item.active .faq-answer) {
    animation: site-panel-in 260ms var(--motion-ease) both;
  }

  .floating-element {
    animation-duration: 2.4s;
  }

  .left-section::before {
    animation-duration: 1.6s;
  }

  .hero::before,
  .hero::after {
    animation-duration: 2.4s;
  }

  @media (hover: hover) and (pointer: fine) {
    :is(.feature-card, .benefit-card, .step, [data-motion="card"]):hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 36px rgb(80 32 90 / 12%);
    }

    :is(.feature-card, .benefit-card, .step):hover
      :is(.feature-icon, .benefit-icon, .step-icon) {
      transform: translateY(-3px) rotate(-5deg) scale(1.06);
    }

    /* Keep logos facing forward; 3D flips can hide the image's back face. */
    .tech-item:hover .tech-icon {
      transform: translateY(-3px);
      box-shadow: 0 12px 28px rgb(80 32 90 / 14%);
    }

    [data-motion="card"]:hover .course-image img {
      transform: scale(1.035);
    }

    .social-icons a:hover {
      transform: translateY(-3px) rotate(-5deg);
    }
  }

  @media (max-width: 1099px) {
    #primary-navigation.active {
      animation: site-menu-in 240ms var(--motion-ease) both;
    }
  }
}

@keyframes site-panel-in {
  from {
    opacity: 0.35;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes site-menu-in {
  from {
    opacity: 0;
    translate: 0 -8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce), print {
  [data-motion-pending="true"] {
    opacity: 1 !important;
  }
}