/* Boğaziçi motion: a restrained hero entrance, one-shot reveals and state feedback. */

/* Hero entrance is enabled by motion.js, so a missing script leaves content untouched. */
body.motion-hero-ready [data-motion-hero="showcase"] .wedge-red {
  animation: motion-wedge-in 680ms 80ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.motion-hero-ready [data-motion-hero="showcase"] .hero-copy {
  animation: motion-copy-in 620ms 130ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.motion-hero-ready [data-motion-hero="showcase"] .hero-stage > img {
  animation: motion-image-in 700ms 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes motion-wedge-in {
  from { opacity: 0.78; transform: translate3d(105%, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes motion-copy-in {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes motion-image-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* The wedge drifts by at most 12px as the hero scrolls away. */
body.motion-scroll-ready .dark-hero .wedge-red {
  translate: 0 var(--motion-wedge-drift, 0px);
}

/* Keep transition declarations through the pending-to-visible state change. */
body.motion-reveal-ready [data-motion-reveal] {
  transition: opacity 460ms cubic-bezier(0.16, 1, 0.3, 1),
              translate 460ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--motion-delay, 0ms);
}

/* Reveal only after an observer has been installed successfully. */
body.motion-reveal-ready [data-motion-reveal="pending"] {
  opacity: 0;
  translate: 0 14px;
}

body.motion-reveal-ready [data-motion-reveal="visible"],
body.motion-reveal-ready [data-motion-reveal="pending"]:focus-within {
  opacity: 1;
  translate: 0 0;
}

/* Scroll state and common controls acknowledge changes without moving page content. */
.site-header {
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

body.motion-has-scrolled .site-header {
  background-color: rgba(255, 255, 255, 0.985);
  border-bottom-color: var(--line-2);
  box-shadow: 0 6px 20px rgba(11, 37, 69, 0.09);
}

.btn:active,
.gallery-arrows button:active,
.floating-ai-toggle:active {
  transform: translateY(0) scale(0.985);
}

.menu-toggle {
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
  transition: background-color 160ms ease, transform 160ms ease, translate 160ms ease;
}

.menu-toggle[aria-expanded="true"] span { background: transparent; }
.menu-toggle[aria-expanded="true"] span::before { translate: 0 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after { translate: 0 0; transform: rotate(-45deg); }

.gallery-arrows button,
.thumb-row button,
.sector-tabs .tab {
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  body.motion-hero-ready [data-motion-hero="showcase"] .wedge-red,
  body.motion-hero-ready [data-motion-hero="showcase"] .hero-copy,
  body.motion-hero-ready [data-motion-hero="showcase"] .hero-stage > img {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  body.motion-reveal-ready [data-motion-reveal] {
    transition-property: opacity, translate;
    transition-duration: 0.01ms;
    transition-delay: 0ms;
  }

  body.motion-reveal-ready [data-motion-reveal="pending"] {
    opacity: 1;
    translate: 0 0;
  }

  body.motion-scroll-ready .dark-hero .wedge-red { translate: none; }

  .btn:hover,
  .btn:active,
  .feature-card:hover,
  .product-card:hover,
  .gallery-arrows button:active,
  .floating-ai-toggle:hover,
  .floating-ai-toggle:active {
    transform: none;
  }

  .floating-ai-card { transition-property: opacity; transition-duration: 80ms; }
  .floating-ai[aria-expanded="false"] .floating-ai-card { transform: none; }
  .faq-panel,
  .faq-item > button .chev { transition: none; }

  .site-header,
  .main-nav a,
  .btn,
  .menu-toggle,
  .gallery-arrows button,
  .thumb-row button,
  .sector-tabs .tab,
  .faq-item,
  .feature-card,
  .product-card,
  .floating-ai-toggle {
    transition-duration: 100ms;
    transition-delay: 0ms;
  }

  .menu-toggle span,
  .menu-toggle span::before,
  .menu-toggle span::after {
    transition-property: background-color;
    transition-duration: 100ms;
    transition-delay: 0ms;
  }
}