/*
 * motion.css — base / pre-animation / state styles for public/assets/motion.js
 *
 * WHY THIS FILE EXISTS (see task-6-report.md for the full story): the
 * static site's public/assets/site.css was built by scanning the crawled,
 * already-rendered HTML for literal class names (a PurgeCSS-style safelist).
 * Because a lot of the onovo theme's interaction CSS only ever appears in
 * the DOM *after* the original jQuery runs (".sticky", ".menu--open",
 * ".onovo-header.header--white", ".active" on a clicked accordion button,
 * etc.), those selectors were never seen in the static crawl and got
 * dropped from site.css even though the matching JS behaviour is very much
 * real (confirmed against the original theme's wp-content/themes/onovo/
 * style.css, preserved only as read-as-text reference, never executed, at
 * .superpowers/reference/onovo-js/ alongside the JS). This file restores
 * just the missing declarations motion.js's class-toggles need, using the
 * same values/timings as the original theme stylesheet.
 *
 * Loaded from src/layouts/Base.astro, after site.css, on every page.
 */

/* ---------------------------------------------------------------------
   0. Reduced motion: kill transitions/animations globally, instantly.
   motion.js also skips scroll/observer-driven class churn in this mode,
   but belt & suspenders here in case any class still gets toggled.
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .preloader,
  .onovo-overlay,
  .onovo-menu-overlay,
  .onovo-menu-overlay-after,
  .onovo-menu ul li,
  .onovo-header,
  .onovo-collapse-text,
  .swiper-slide,
  .lightbox-overlay {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------------------------------------------------------------------
   1. Preloader
   Markup is injected by src/layouts/Base.astro (not present in the
   crawled pages at all — see task-6-report.md). Values/keyframes below
   are ported from the original theme's .preloader / .preloader__* rules,
   using the double-bounce spinner variant (the one whose leaf class names
   — preloader__spinner / preloader__double-bounce — actually survived the
   site.css safelist, confirming this is the variant excary.com used).
--------------------------------------------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #f7fff7;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.closed {
  opacity: 0;
}

.preloader.loaded {
  visibility: hidden;
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}

.preloader__spinner {
  position: relative;
  width: 50px;
  height: 50px;
  align-self: center;
  z-index: 2;
}

.preloader__double-bounce {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: onovo-bounce 2s infinite ease-in-out;
  opacity: 1;
  border-radius: 50%;
  background-color: #113418;
}

.preloader__double-bounce--delay {
  animation-delay: -1s;
  opacity: 0.5;
}

@keyframes onovo-bounce {
  0%,
  100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}

/* No-JS fallback: if motion.js fails to load/run, don't leave the page
   permanently covered by the spinner. */
html:not(.js) .preloader {
  display: none;
}

/* ---------------------------------------------------------------------
   2. Scroll reveal — "overlay wipe" (ported 1:1 from the original theme's
   [data-onovo-overlay]/.onovo-overlay + [data-scroll="in"] system) and a
   generic .is-visible fallback for anything motion.js opts in via
   [data-onovo-scroll] that isn't an overlay-wipe target.
--------------------------------------------------------------------- */
*[data-onovo-overlay] {
  position: relative;
}

.onovo-overlay {
  position: absolute;
  inset: 0;
  background: #fff;
  transition: transform 0.6s cubic-bezier(0.3, 0, 0.3, 1);
  transform-origin: top right;
  transform: scaleX(1);
  z-index: 2;
  pointer-events: none;
}

body.animated--active [data-scroll='in'] .onovo-overlay {
  transform: scaleX(0);
}

/* Generic reveal for elements that opt in via [data-onovo-scroll] but
   have no .onovo-overlay (e.g. plain content blocks) — fade + rise. */
[data-onovo-scroll]:not([data-onovo-overlay]) {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.3, 0, 0.3, 1), transform 0.6s cubic-bezier(0.3, 0, 0.3, 1);
}

[data-onovo-scroll]:not([data-onovo-overlay])[data-scroll='in'] {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-onovo-scroll]:not([data-onovo-overlay]) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------------
   3. Sticky header + dark-intro header
--------------------------------------------------------------------- */
.onovo-header.sticky {
  position: fixed;
  background-color: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}

.header--white.onovo-header.sticky {
  background-color: #000;
}

.onovo-header.slideUp {
  position: fixed;
  top: -140px;
  left: 0;
  width: 100%;
}

.onovo-header.slideDown {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #000;
}

.onovo-header.slideUp,
.onovo-header.slideDown {
  transition: all 0.5s ease-in-out;
}

/* Default state: plain header (no color modifier) shows the dark logo
   only. Without this, both <img> tags in .onovo-logo-image render
   stacked (the crawl always captures both variants), producing a faint
   visible edge/ghost from the second image on every non-modified page. */
.onovo-logo-image img.logo--white {
  display: none;
}

.header--white .onovo-logo-image img,
.header--active .onovo-logo-image img {
  display: none;
}

.header--white .onovo-logo-image img.logo--white,
.header--active .onovo-logo-image img.logo--white {
  display: block;
}

/* ---------------------------------------------------------------------
   4. Mobile / fullscreen menu overlay
   Base (closed) state for .onovo-menu-popup / .onovo-menu-btn / the
   overlay wipe panels / .onovo-menu li stagger already ships in
   site.css (those literal classes appear in every page's static header
   markup). Only the *activated* state — reached exclusively through a
   JS class toggle — is missing, so that's all that's added here.
--------------------------------------------------------------------- */
.onovo-menu-popup.menu--visible {
  opacity: 1;
  visibility: visible;
  z-index: 0;
}

.onovo-menu-popup.menu--open .onovo-menu-overlay {
  animation: onovo-menu-overlay-open 0.6s forwards cubic-bezier(0.3, 0, 0.3, 1);
}

.onovo-menu-popup.menu--open .onovo-menu-overlay-after {
  animation: onovo-menu-overlay-open 0.6s forwards cubic-bezier(0.3, 0, 0.3, 1) 0.3s;
}

@keyframes onovo-menu-overlay-open {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

.onovo-menu-popup.menu--ready .onovo-menu ul li {
  opacity: 1;
  transform: translateY(0);
}

.onovo-menu-btn.btn--active span::before {
  top: 5px;
  transform: rotate(45deg);
}

.onovo-menu-btn.btn--active span::after {
  bottom: 5px;
  transform: rotate(-45deg);
}

.header--white .onovo-menu-btn span::before,
.header--white .onovo-menu-btn span::after,
.header--active .onovo-menu-btn span::before,
.header--active .onovo-menu-btn span::after {
  background: #fff;
}

body.onovo--noscroll {
  overflow: hidden !important;
}

/* Submenu dropdown (.menu-item-has-children) open state */
.onovo-menu li.opened > ul.sub-menu {
  max-height: 1000px;
  transition: all 1.2s cubic-bezier(0.3, 0, 0.3, 1);
}

.onovo-menu li.opened > .icon,
.onovo-menu li.opened > a > .icon {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------------
   5. Counters / circle text / showcase hovers / service-grid hover-swap
   These widgets only ship on 1–3 pages (home, hakkimizda, hizmetlerimiz)
   but their base display rules never made it into site.css either
   (literal class strings only exist inside those few pages, and the
   safelist scan that produced site.css apparently missed them). Ported
   from the original theme stylesheet.
--------------------------------------------------------------------- */
.onovo-counter {
  position: relative;
}

.onovo-counter .num,
.onovo-counter .num-after {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-size: 150px;
  font-weight: 700;
  line-height: 1;
}

.onovo-counter .num-after {
  font-size: 75px;
}

.onovo-counter .label {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

@media (max-width: 1024px) {
  .onovo-counter .num,
  .onovo-counter .num-after {
    font-size: 100px;
  }
  .onovo-counter .num-after {
    font-size: 60px;
  }
}

@media (max-width: 767px) {
  .onovo-counter .num,
  .onovo-counter .num-after {
    font-size: 80px;
  }
  .onovo-counter .num-after {
    font-size: 40px;
  }
}

.onovo-circle-text-label {
  position: absolute;
  left: 5%;
  top: 5%;
  width: 90%;
  height: 90%;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  animation: onovoRotateText 10s linear infinite;
}

.onovo-circle-text-label span {
  position: absolute;
  transform-origin: 0 111px;
}

@keyframes onovoRotateText {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .onovo-circle-text-label {
    animation: none;
  }
}

.onovo-showcase-item .title a {
  transition: color 0.4s cubic-bezier(0.3, 0, 0.3, 1);
}

.onovo-showcase-item.hover .title a {
  color: #000;
}

.onovo-services-grid-fw .onovo-service-grid-item.active::before {
  transform: scale(1);
}

/* ---------------------------------------------------------------------
   6. Accordion / FAQ (.onovo-collapse-item)
   Panels ship with a static inline `style="display:none"` in the crawled
   markup, so motion.js drives an actual height transition instead of a
   plain display toggle; this class provides the animated max-height.
--------------------------------------------------------------------- */
.onovo-collapse-item .onovo-text {
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.3, 0, 0.3, 1);
}

.onovo-collapse-btn .arrow {
  transition: transform 0.4s cubic-bezier(0.3, 0, 0.3, 1);
}

.onovo-collapse-btn.active .arrow {
  transform: rotate(180deg);
}

/* ---------------------------------------------------------------------
   7. ez-toc (table of contents) toggle
--------------------------------------------------------------------- */
#ez-toc-container.ez-toc-list-hide nav {
  display: none;
}

/* ---------------------------------------------------------------------
   8. Lightweight lightbox for [data-elementor-open-lightbox] galleries
   Elementor's own proprietary frontend.min.js normally drives this; it
   isn't shipped statically, so this is a small from-scratch overlay
   (not a port of magnific-popup.js, which isn't what fires on this
   theme's Elementor image-gallery widgets — see task-6-report.md).
--------------------------------------------------------------------- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  /* Closed (opacity 0) must not intercept clicks — without this the
     full-viewport overlay silently blocks every click/tap on the page
     once a lightbox trigger has run initLightbox() and created it. */
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox-overlay.is-open {
  pointer-events: auto;
  opacity: 1;
}

.lightbox-overlay img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.lightbox-overlay .lightbox-close,
.lightbox-overlay .lightbox-nav {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-overlay .lightbox-close:hover,
.lightbox-overlay .lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.25);
}

.lightbox-overlay .lightbox-close {
  top: 20px;
  right: 20px;
}

.lightbox-overlay .lightbox-prev {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-overlay .lightbox-next {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

/* ---------------------------------------------------------------------
   9. Swiper nav-active pill tracker (blog/history carousels)
--------------------------------------------------------------------- */
.onovo-paginations-container {
  position: relative;
}

.swiper-nav-active {
  position: absolute;
  top: 0;
  height: 100%;
  transition: left 0.3s cubic-bezier(0.3, 0, 0.3, 1), width 0.3s cubic-bezier(0.3, 0, 0.3, 1);
  pointer-events: none;
  z-index: -1;
}