/* ============================================
   ValemGelsin — Animation System
   ============================================ */

/* ── Scroll Reveal ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
[data-reveal-delay="100"] { transition-delay: 100ms; }
[data-reveal-delay="200"] { transition-delay: 200ms; }
[data-reveal-delay="300"] { transition-delay: 300ms; }
[data-reveal-delay="400"] { transition-delay: 400ms; }
[data-reveal-delay="500"] { transition-delay: 500ms; }

/* ── Step Transitions ── */
.step-panel {
  display: none;
  animation-duration: 300ms;
  animation-fill-mode: forwards;
  animation-timing-function: var(--ease-out);
}

.step-panel--active {
  display: block;
  animation-name: fadeInRight;
}

.step-panel--exiting {
  display: block;
  animation-name: fadeOutLeft;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-30px);
  }
}

/* ── Counter Animation ── */
.counter[data-target] {
  font-variant-numeric: tabular-nums;
}

/* ── Map Animations ── */
.map-path {
  fill: var(--neutral-200);
  stroke: #FFFFFF;
  stroke-width: 0.5;
  transition: fill var(--duration-base) ease;
  cursor: pointer;
}

.map-path--aktif {
  fill: var(--primary-400);
}
.map-path--aktif:hover {
  fill: var(--primary-500);
}

.map-path--sinirli {
  fill: var(--primary-300);
  opacity: 0.5;
}
.map-path--sinirli:hover {
  opacity: 0.8;
}

.map-path--yakinda {
  fill: var(--neutral-200);
}
.map-path--yakinda:hover {
  fill: var(--neutral-100);
}

/* Map draw animation */
.map-svg.animating .map-path {
  fill: transparent;
  stroke: var(--primary-300);
  stroke-width: 1;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: mapDraw 1.2s var(--ease-out) forwards;
}

.map-svg.drawn .map-path {
  stroke-dashoffset: 0;
  transition: fill 0.5s ease;
}

@keyframes mapDraw {
  to {
    stroke-dashoffset: 0;
  }
}

/* ── Success Check Animation ── */
.success-check {
  width: 80px;
  height: 80px;
  margin: 0 auto;
}

.success-check__circle {
  stroke: var(--success);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 251;
  stroke-dashoffset: 251;
  animation: drawCircle 0.6s var(--ease-out) forwards;
}

.success-check__check {
  stroke: var(--success);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: drawCheck 0.3s var(--ease-out) 0.4s forwards;
}

@keyframes drawCircle {
  to { stroke-dashoffset: 0; }
}

@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}

/* ── Header Scroll ── */
.header {
  transition: background-color var(--duration-base) ease,
              box-shadow var(--duration-base) ease;
}

.header--scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}

/* ── Mobile Menu ── */
.mobile-menu {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) ease, visibility var(--duration-base) ease;
}

.mobile-menu--open {
  opacity: 1;
  visibility: visible;
}

/* ── Hover Underline ── */
.hover-underline {
  position: relative;
}
.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-600);
  transition: width var(--duration-base) var(--ease-out);
}
.hover-underline:hover::after {
  width: 100%;
}