/* ============================================
   Page Transitions — Awwwards-quality
   Arabesque overlay with staggered content reveal
   ============================================ */

/* Pre-paint flash prevention:
   html.is-transitioning is set by an inline <script> in <head>
   BEFORE the browser paints, so content stays hidden until the
   overlay is created by JS and takes over. */
html.is-transitioning {
  background: var(--color-primary-dark);
}

html.is-transitioning body {
  opacity: 0;
}

/* Transition Overlay */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}

.page-transition__layer {
  position: absolute;
  inset: 0;
  background: var(--color-primary-dark);
  transform: translateY(100%);
  will-change: transform;
}

.page-transition__layer--accent {
  background: var(--color-primary);
}

/* Arabesque SVG pattern overlay */
.page-transition__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23C0D78B' stroke-width='0.8'%3E%3Cpath d='M40 0 L80 40 L40 80 L0 40Z'/%3E%3Cpath d='M40 10 L70 40 L40 70 L10 40Z'/%3E%3Cpath d='M40 20 L60 40 L40 60 L20 40Z'/%3E%3Ccircle cx='40' cy='40' r='8'/%3E%3Cpath d='M0 0 L40 40 M80 0 L40 40 M0 80 L40 40 M80 80 L40 40'/%3E%3Cpath d='M40 0 L40 80 M0 40 L80 40'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
}

/* Logo mark centered during transition */
.page-transition__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  opacity: 0;
  width: 48px;
  height: 48px;
  will-change: opacity, transform;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.page-transition__mark svg {
  width: 100%;
  height: 100%;
}

/* ---- Animations ---- */

/* Enter: overlay slides UP to cover page */
.page-transition--entering .page-transition__layer {
  animation: overlayEnter 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.page-transition--entering .page-transition__layer--accent {
  animation: overlayEnter 0.6s cubic-bezier(0.77, 0, 0.175, 1) 0.06s forwards;
}

.page-transition--entering .page-transition__mark {
  animation: markFadeIn 0.3s ease 0.35s forwards;
}

/* Exit: overlay slides UP to reveal page */
.page-transition--exiting .page-transition__layer {
  transform: translateY(0);
  animation: overlayExit 0.6s cubic-bezier(0.77, 0, 0.175, 1) 0.15s forwards;
}

.page-transition--exiting .page-transition__layer--accent {
  transform: translateY(0);
  animation: overlayExit 0.6s cubic-bezier(0.77, 0, 0.175, 1) 0.08s forwards;
}

.page-transition--exiting .page-transition__mark {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: markFadeOut 0.2s ease forwards;
}

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

@keyframes overlayExit {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

@keyframes markFadeIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes markFadeOut {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* ============================================
   Content Entrance Animations
   Staggered reveal for page content
   ============================================ */

/* Elements start hidden, animate in */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* Stagger delays for child elements */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 0.4s; }
.reveal-stagger > .reveal:nth-child(7) { transition-delay: 0.48s; }
.reveal-stagger > .reveal:nth-child(8) { transition-delay: 0.56s; }
.reveal-stagger > .reveal:nth-child(9) { transition-delay: 0.64s; }

/* Hero / Page Header specific entrance */
.hero-content,
.page-header-content,
.page-header .container {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s,
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}

.page-ready .hero-content,
.page-ready .page-header-content,
.page-ready .page-header .container {
  opacity: 1;
  transform: translateY(0);
}

/* Disable transitions for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .page-transition__layer,
  .page-transition__mark,
  .reveal,
  .hero-content,
  .page-header-content,
  .page-header .container,
  .navbar {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
