/* ============================================================
   PITHOS — Animations & Transitions
   ============================================================ */

/* ── Page Transitions ────────────────────────────────────── */
body {
  animation: page-enter 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

body.page-exit {
  animation: page-exit 0.25s cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes page-exit {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* ── Cursor blink ────────────────────────────────────────── */
.cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  margin-left: 3px;
  vertical-align: middle;
  animation: blink 1.1s ease-in-out infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ── Dot pulsation (badge available) ─────────────────────── */
@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.75);
  }
}

/* ── Glow pulse ──────────────────────────────────────────── */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(20, 36, 138, 0.12); }
  50% { box-shadow: 0 0 40px rgba(20, 36, 138, 0.25), 0 0 80px rgba(20, 36, 138, 0.08); }
}

.glow-pulse { animation: glow-pulse 3s ease-in-out infinite; }

/* ── Float ───────────────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

.float { animation: float 6s ease-in-out infinite; }

/* ── Typing effect ───────────────────────────────────────── */
.typewriter {
  overflow: hidden;
  border-right: 2px solid var(--accent);
  white-space: nowrap;
  animation:
    typing 3.5s steps(40, end),
    blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: var(--accent); }
}

/* ── Shimmer loading ─────────────────────────────────────── */
@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    var(--bg-2) 0%,
    var(--bg-3) 50%,
    var(--bg-2) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
}

/* ── Fade in up stagger ──────────────────────────────────── */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.fade-in-up {
  animation: fade-in-up 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ── Accent underline expand ─────────────────────────────── */
@keyframes underline-expand {
  from { width: 0; }
  to { width: 100%; }
}

/* ── Nav link underline active ───────────────────────────── */
.nav__link.active::after {
  animation: underline-expand 0.3s ease forwards;
}

/* ── Hero accent gradient shimmer ────────────────────────── */
.hero-title em,
.display em {
  background: linear-gradient(
    90deg,
    var(--accent),
    rgba(153, 143, 199, 0.85),
    var(--accent)
  );
  background-size: 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shimmer 4s linear infinite;
}

@keyframes gradient-shimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Filter btn active ───────────────────────────────────── */
.filter-btn {
  transition:
    background var(--t),
    border-color var(--t),
    color var(--t),
    transform 120ms ease;
}

.filter-btn:active { transform: scale(0.96); }

/* ── Card hover glow ─────────────────────────────────────── */
.project-card,
.service-card,
.card {
  transition:
    transform var(--t-slow),
    border-color var(--t-slow),
    box-shadow var(--t-slow);
}

/* ── Button press ────────────────────────────────────────── */
.btn:active { transform: scale(0.97); }

/* ── Hamburger lines ─────────────────────────────────────── */
.nav__hamburger span {
  transition:
    transform var(--t),
    opacity var(--t);
}

/* ── Scroll progress bar ─────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--green));
  z-index: 99;
  transition: width 0.1s linear;
}

/* ── Accent line (decoration) ────────────────────────────── */
.accent-line {
  width: 40px;
  height: 2px;
  background: var(--accent);
  margin-bottom: var(--sp-6);
}

/* ── Number counter animation ────────────────────────────── */
@keyframes count-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ── Mobile menu items stagger ───────────────────────────── */
.nav__mobile .nav__link {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease, color var(--t);
}

.nav__mobile.open .nav__link:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.05s; }
.nav__mobile.open .nav__link:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.1s; }
.nav__mobile.open .nav__link:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.15s; }
.nav__mobile.open .nav__link:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.2s; }
.nav__mobile.open .nav__cta { opacity: 1; transform: none; transition-delay: 0.25s; }

.nav__mobile .nav__cta {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease, background var(--t);
}

/* ── FAQ accordion ───────────────────────────────────────── */
.faq-answer {
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  opacity: 0;
}

.faq-item.open .faq-answer { opacity: 1; }

/* ── Form input focus glow ───────────────────────────────── */
.form-input,
.form-select,
.form-textarea {
  transition:
    border-color var(--t),
    background var(--t),
    box-shadow var(--t);
}

/* ── Success state ───────────────────────────────────────── */
@keyframes success-bounce {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.form-success.show .form-success__icon {
  animation: success-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Project card visual overlay ─────────────────────────── */
.project-card__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, var(--bg-2));
  opacity: 0;
  transition: opacity var(--t-slow);
}

.project-card:hover .project-card__visual::after { opacity: 1; }

/* ── Bg gradient orb (hero decoration) ──────────────────── */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.orb-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(212, 194, 252, 0.30), transparent 70%);
  top: -100px;
  right: 10%;
  animation: orb-float 8s ease-in-out infinite;
}

.orb-2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(153, 143, 199, 0.18), transparent 70%);
  bottom: 100px;
  left: 5%;
  animation: orb-float 10s ease-in-out infinite reverse;
}

@keyframes orb-float {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(20px, -30px); }
  66% { transform: translate(-15px, 20px); }
}