/*
 * KOSCA — Global Animation Layer
 * Auto-applied scroll reveals, stagger, hover micro-interactions, page transitions.
 * Works on top of the existing .reveal system in global.css.
 */

/* ============================================================
   PAGE LOAD — fade the whole page in
============================================================ */

@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  animation: pageFadeIn 0.5s ease both;
}

/* ============================================================
   AUTO-REVEAL VARIANTS
   Applied via JS by adding [data-anim] attributes.
============================================================ */

/* Gated behind html.js-anim (set before paint). If the animation layer can't
   run, [data-anim] elements never get the hidden state and stay visible. */
.js-anim [data-anim] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Fade up (default) */
[data-anim="fade-up"]    { transform: translateY(36px); }
/* Fade down */
[data-anim="fade-down"]  { transform: translateY(-36px); }
/* Fade in (no movement) */
[data-anim="fade-in"]    { transform: none; }
/* Slide from left */
[data-anim="slide-left"] { transform: translateX(-48px); }
/* Slide from right */
[data-anim="slide-right"]{ transform: translateX(48px); }
/* Scale up */
[data-anim="scale-up"]   { transform: scale(0.92); }
/* Zoom-blur entrance */
[data-anim="zoom"]       { transform: scale(1.06); }

/* Visible state — resets all transforms */
[data-anim].anim-in {
  opacity: 1;
  transform: none;
}

/* ============================================================
   STAGGER — children animate in sequence
   JS sets --anim-delay per child.
============================================================ */

[data-anim] {
  transition-delay: var(--anim-delay, 0s);
}

/* ============================================================
   HEADING UNDERLINE SWEEP (section labels)
============================================================ */

.section-label,
.page-hero__breadcrumb {
  position: relative;
}

/* ============================================================
   HOVER MICRO-INTERACTIONS
============================================================ */

/* Cards lift + shadow on hover */
.card,
.service-card,
.news-card,
.stat-card,
.mvv-card,
.timeline__content {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease;
}

/* Buttons — subtle press + glow */
.btn {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
}

/* Button sheen sweep on hover */
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  transform: skewX(-18deg);
  transition: left 0.6s ease;
  pointer-events: none;
}

.btn:hover::after {
  left: 140%;
}

/* Nav links — animated underline */
.nav__links a {
  position: relative;
}

.nav__links a::after {
  content: '';
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 4px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-deep));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav__links a:hover::after,
.nav__links a.active::after {
  transform: scaleX(1);
}

/* Links with arrows nudge on hover */
.service-card__arrow,
.news-card__link {
  transition: gap 0.25s ease, transform 0.25s ease;
}

.service-card:hover .service-card__arrow,
.news-card:hover .news-card__link {
  transform: translateX(4px);
}

/* Footer links slide */
.footer__links a {
  display: inline-block;
  transition: transform 0.2s ease, color 0.2s ease;
}

.footer__links a:hover {
  transform: translateX(4px);
}

/* Social icons pop */
.footer__social a,
.utility-bar__social a {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.25s ease, color 0.25s ease;
}

.footer__social a:hover {
  transform: translateY(-3px) scale(1.08);
}

/* Brand cards / partner tiles */
.brands-marquee__item {
  transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
}

.brands-marquee__item:hover {
  transform: scale(1.08);
}

/* Stat number subtle pulse when it lands */
@keyframes statPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.stat-card__number.anim-pop {
  animation: statPop 0.5s ease;
}

/* ============================================================
   IMAGE / MEDIA reveal
============================================================ */

.news-card__image,
.spotlight-card__photo {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.news-card:hover .news-card__image {
  transform: scale(1.05);
}

/* ============================================================
   SCROLL PROGRESS BAR (top of page)
============================================================ */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--gradient-spectrum);
  z-index: var(--z-toast);
  transition: width 0.1s linear;
  pointer-events: none;
}

/* ============================================================
   BACK TO TOP BUTTON
============================================================ */

.back-to-top {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-8);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-brand-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.8);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: var(--z-sticky);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  background: var(--color-brand-primary-dark);
  transform: translateY(-4px) scale(1.05);
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: var(--space-5);
    right: var(--space-5);
    width: 44px;
    height: 44px;
  }
}

/* ============================================================
   NAV — shrink/elevate on scroll
============================================================ */

.nav {
  transition: box-shadow 0.3s ease, background 0.3s ease, backdrop-filter 0.3s ease;
}

/* Frosted-glass nav once scrolled — translucent white + backdrop blur so the
   page content shows softly through. Falls back to near-solid white where
   backdrop-filter is unsupported. */
.nav.is-scrolled {
  box-shadow: var(--shadow-md);
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-scrolled { background: rgba(255, 255, 255, 0.97); }
}

/* ============================================================
   FORM FEEDBACK — entrance for the AJAX success/error message.
   A real state acknowledgment when the response lands, not decoration.
   The global reduced-motion rule below neutralises it.
============================================================ */

@keyframes feedbackIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.form-success,
.form-error {
  animation: feedbackIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ============================================================
   REDUCED MOTION — honour user preference
============================================================ */

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }

  [data-anim] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .btn::after,
  .scroll-progress,
  .back-to-top {
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}