/* ============================================================
   Level Up — Transitions & Motion CSS
   ============================================================ */

/* ── Easing tokens ─────────────────────────────────────────── */
:root {
  --ease-spring:   cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out:      cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in:       cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:   cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast:      250ms;
  --dur-base:      400ms;
  --dur-slow:      800ms;
  --dur-slower:    1000ms;
  --dur-reveal:    0.8s; /* Snappier duration */
}

/* ── Tornado Page Enter ────────────────────────────────────── */
@keyframes tornado-enter {
  0% {
    opacity: 0;
    transform: rotate(-6deg) scale(0.87) translateY(36px);
    filter: blur(6px);
    transform-origin: center bottom;
  }
  45% {
    opacity: 0.75;
    transform: rotate(1.5deg) scale(1.01) translateY(-6px);
    filter: blur(1px);
  }
  72% {
    transform: rotate(-0.5deg) scale(0.995) translateY(2px);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: rotate(0) scale(1) translateY(0);
    filter: blur(0);
  }
}

@keyframes tornado-exit {
  0%   { opacity: 1; transform: rotate(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: rotate(5deg) scale(1.08) translateY(-24px); filter: blur(6px); }
}

.page-enter { animation: tornado-enter var(--dur-reveal) var(--ease-out) both; }
.page-exit  { animation: tornado-exit  var(--dur-base)   var(--ease-in)  both; }

@media (prefers-reduced-motion: reduce) {
  .page-enter, .page-exit { animation: none; }
}

/* ── Scroll Reveal (Tornado Effect) ────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: perspective(1000px) translateY(50px) rotateX(10deg) rotateY(-15deg) rotateZ(-10deg) scale(0.85);
  filter: blur(5px);
  transform-origin: center center;
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out),
    filter var(--dur-reveal) var(--ease-out);
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}

[data-reveal].revealed {
  opacity: 1;
  transform: perspective(1000px) translateY(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
  filter: blur(0);
}

[data-reveal="right"] {
  transform: perspective(1000px) translateX(-50px) rotateX(5deg) rotateY(15deg) rotateZ(10deg) scale(0.85);
}

[data-reveal="left"] {
  transform: perspective(1000px) translateX(50px) rotateX(5deg) rotateY(-15deg) rotateZ(-10deg) scale(0.85);
}

[data-reveal="scale"] {
  transform: perspective(1000px) scale(0.7) rotateX(-15deg) rotateY(15deg) rotateZ(15deg);
}

[data-reveal="right"].revealed,
[data-reveal="left"].revealed,
[data-reveal="scale"].revealed {
  transform: perspective(1000px) translate(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
}

/* ── Scroll Progress Bar ───────────────────────────────────── */
.scroll-progress-bar {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--navy-900) 0%, var(--emerald-500) 100%);
  z-index: 9999;
  transition: width 0.08s linear;
  transform-origin: left;
}

/* ── Card hover morph ──────────────────────────────────────── */
.card, .service-card, .founder-card, .hero-card {
  transition:
    transform  var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.card:hover, .service-card:hover, .founder-card:hover {
  transform:    translateY(-4px);
  box-shadow:   0 16px 40px rgba(10, 31, 68, 0.14);
  border-color: rgba(16, 185, 129, 0.3);
}

/* ── Button transitions ────────────────────────────────────── */
.btn {
  transition:
    background   var(--dur-fast) var(--ease-out),
    color        var(--dur-fast) var(--ease-out),
    transform    var(--dur-fast) var(--ease-spring),
    box-shadow   var(--dur-base) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.btn:hover:not(:disabled) {
  transform: translateY(-2px);
}
.btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  transition-duration: 50ms;
}
.btn-primary:hover { box-shadow: 0 8px 24px rgba(10, 31, 68, 0.25); }
.btn-accent:hover  { box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35); }

/* ── Navbar glass scroll ───────────────────────────────────── */
.site-header {
  transition:
    background     var(--dur-base) var(--ease-out),
    box-shadow     var(--dur-base) var(--ease-out),
    backdrop-filter var(--dur-base) var(--ease-out);
}
.site-header.scrolled {
  background:       rgba(10, 31, 68, 0.88) !important;
  backdrop-filter:  blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:       0 1px 0 rgba(121, 137, 170, 0.2);
}

/* ── Nav link hover underline ──────────────────────────────── */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute; bottom: -3px; left: 50%;
  width: 0; height: 2px;
  background: var(--emerald-500);
  transform: translateX(-50%);
  transition: width var(--dur-base) var(--ease-spring);
  border-radius: 2px;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

/* ── Hero float shapes animation ──────────────────────────── */
.float-shape { animation: float-shape 8s ease-in-out infinite; }
.float-shape-1 { animation-delay: 0s; }
.float-shape-2 { animation-delay: 2.5s; animation-duration: 10s; }
.float-shape-3 { animation-delay: 5s; animation-duration: 7s; }

@keyframes float-shape {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%       { transform: translate(8px, -12px) rotate(3deg); }
  66%       { transform: translate(-6px, 6px) rotate(-2deg); }
}

/* ── Accent word flicker on load ───────────────────────────── */
.accent {
  position: relative;
  display: inline;
}
.accent::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--emerald-500);
  transform: scaleX(0);
  transform-origin: left;
  animation: accent-reveal 0.8s 0.6s var(--ease-out) forwards;
}
@keyframes accent-reveal { to { transform: scaleX(1); } }

/* ── Image lazy load fade ──────────────────────────────────── */
img.lazy { opacity: 0; transition: opacity var(--dur-slow); }
img.lazy.loaded { opacity: 1; }

/* ── Focus ring ────────────────────────────────────────────── */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--emerald-500);
}

/* ── Skeleton shimmer (لو في loading states) ──────────────── */
@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}
.skeleton {
  background: linear-gradient(90deg, var(--navy-50) 25%, var(--navy-100) 50%, var(--navy-50) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}