/* ============================================
   UzunYasa - Professional Animations
   Premium health platform animations
   ============================================ */

/* ===== KEYFRAMES ===== */

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

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

@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

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

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(232, 150, 62, 0.4); }
  50% { transform: scale(1.02); box-shadow: 0 0 20px 4px rgba(232, 150, 62, 0.15); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(232, 150, 62, 0.3), 0 0 0 0 rgba(232, 150, 62, 0); }
  50% { box-shadow: 0 4px 20px rgba(232, 150, 62, 0.3), 0 0 30px 8px rgba(232, 150, 62, 0.12); }
}

@keyframes float1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(3deg); }
}

@keyframes float2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(-2deg); }
}

@keyframes float3 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-22px) rotate(4deg); }
}

@keyframes float4 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-3deg); }
}

@keyframes float5 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(2deg); }
}

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

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes progressRing {
  from { stroke-dasharray: 0 283; }
}

@keyframes drawLine {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

@keyframes barGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes flipIn {
  from { transform: rotateY(90deg); opacity: 0; }
  to { transform: rotateY(0); opacity: 1; }
}

@keyframes mapPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(2.5); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

@keyframes resultReveal {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes smoothProgress {
  from { width: 0%; }
}

@keyframes rippleEffect {
  0% { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes slideInFromBottom {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideOutToBottom {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(100%); }
}

@keyframes checkmark {
  0% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 0; }
}

@keyframes navUnderlineSlide {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes pageContentFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== PAGE LOAD FADE IN ===== */
body {
  animation: pageContentFadeIn 0.3s ease-out;
}

/* ===== SMOOTH SCROLL ===== */
html {
  scroll-behavior: smooth;
}

/* ===== UTILITY CLASSES ===== */

.anim-fade-in {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.anim-fade-in.anim-visible {
  opacity: 1;
}

.anim-slide-up {
  opacity: 0;
  transform: translateY(40px);
  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);
}
.anim-slide-up.anim-visible {
  opacity: 1;
  transform: translateY(0);
}

.anim-slide-left {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.anim-slide-left.anim-visible {
  opacity: 1;
  transform: translateX(0);
}

.anim-slide-right {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.anim-slide-right.anim-visible {
  opacity: 1;
  transform: translateX(0);
}

.anim-scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.anim-scale-in.anim-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.anim-delay-1 { transition-delay: 0.1s !important; }
.anim-delay-2 { transition-delay: 0.2s !important; }
.anim-delay-3 { transition-delay: 0.3s !important; }
.anim-delay-4 { transition-delay: 0.4s !important; }
.anim-delay-5 { transition-delay: 0.5s !important; }
.anim-delay-6 { transition-delay: 0.6s !important; }
.anim-delay-7 { transition-delay: 0.7s !important; }
.anim-delay-8 { transition-delay: 0.8s !important; }

/* ===== BUTTON HOVER EFFECTS ===== */
.btn,
a.btn,
button,
.hero-btn-primary,
.hero-btn-secondary,
.cta-btn-primary,
.cta-btn-secondary,
[class*="btn-"] {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

.btn:hover,
a.btn:hover,
button:hover,
.hero-btn-primary:hover,
.hero-btn-secondary:hover,
.cta-btn-primary:hover,
.cta-btn-secondary:hover,
[class*="btn-"]:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.btn:active,
a.btn:active,
button:active,
[class*="btn-"]:active {
  transform: scale(0.98);
}

/* Ripple effect element */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  animation: rippleEffect 0.6s ease-out forwards;
  pointer-events: none;
  z-index: 1;
}

/* Arrow icon slide on hover */
.btn i.fa-arrow-right,
.btn .arrow-icon,
.btn svg.arrow,
[class*="btn-"] i.fa-arrow-right,
[class*="btn-"] .arrow-icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

.btn:hover i.fa-arrow-right,
.btn:hover .arrow-icon,
.btn:hover svg.arrow,
[class*="btn-"]:hover i.fa-arrow-right,
[class*="btn-"]:hover .arrow-icon {
  transform: translateX(4px);
}

/* ===== PULSING CTA BUTTONS ===== */
.btn-pulse {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* ===== CARD HOVER EFFECTS ===== */
.card,
.blog-card,
.feature-card,
.treatment-card,
.guide-card,
.exercise-card,
.info-card,
.stat-card,
.tool-card,
.story-card,
.category-card,
.tedavi-card,
.comparison-card,
[class*="-card"] {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.3s ease;
  border-left: 3px solid transparent;
}

.card:hover,
.blog-card:hover,
.feature-card:hover,
.treatment-card:hover,
.guide-card:hover,
.exercise-card:hover,
.info-card:hover,
.stat-card:hover,
.tool-card:hover,
.story-card:hover,
.category-card:hover,
.tedavi-card:hover,
.comparison-card:hover,
[class*="-card"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  border-left-color: #0D7377;
}

/* Image zoom inside cards */
.card img,
.blog-card img,
.feature-card img,
.treatment-card img,
.guide-card img,
[class*="-card"] img {
  transition: transform 0.4s ease;
}

.card:hover img,
.blog-card:hover img,
.feature-card:hover img,
.treatment-card:hover img,
.guide-card:hover img,
[class*="-card"]:hover img {
  transform: scale(1.05);
}

/* Card image container overflow hidden */
.card .card-image,
.blog-card .card-image,
[class*="-card"] .card-image,
.card .card-img,
[class*="-card"] .card-img {
  overflow: hidden;
}

.anim-card-hover {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.anim-card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

/* ===== STICKY HEADER WITH BACKDROP BLUR ===== */
header,
.header,
.navbar,
nav.main-nav,
.site-header {
  transition: background-color 0.4s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

header.header-scrolled,
.header.header-scrolled,
.navbar.header-scrolled,
nav.main-nav.header-scrolled,
.site-header.header-scrolled {
  background-color: rgba(13, 55, 59, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}

/* Nav item underline slide */
.nav-link,
.nav-item a,
header a,
.navbar a {
  position: relative;
}

.nav-link::after,
.nav-item a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #E8963E;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.nav-link:hover::after,
.nav-item a:hover::after,
.nav-link.active::after,
.nav-item a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ===== HERO STAGGERED ANIMATION ===== */
.hero h1,
.hero .hero-title,
.hero-content h1 {
  opacity: 0;
  animation: fadeInUp 0.7s ease forwards;
  animation-delay: 0.1s;
}

.hero h2,
.hero p,
.hero .hero-subtitle,
.hero-content p,
.hero .hero-description {
  opacity: 0;
  animation: fadeInUp 0.7s ease forwards;
  animation-delay: 0.3s;
}

.hero .hero-btn-primary,
.hero .hero-btn-secondary,
.hero .hero-buttons,
.hero .hero-cta,
.hero-content .btn {
  opacity: 0;
  animation: fadeInUp 0.7s ease forwards;
  animation-delay: 0.5s;
}

/* ===== FLOATING HEALTH ICONS ===== */
.floating-icons-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.floating-icon {
  position: absolute;
  opacity: 0.07;
  color: white;
  will-change: transform;
}

.floating-icon:nth-child(1) { animation: float1 8s ease-in-out infinite; top: 15%; left: 8%; }
.floating-icon:nth-child(2) { animation: float2 10s ease-in-out infinite; top: 25%; right: 12%; }
.floating-icon:nth-child(3) { animation: float3 7s ease-in-out infinite; top: 60%; left: 5%; }
.floating-icon:nth-child(4) { animation: float4 12s ease-in-out infinite; top: 70%; right: 8%; }
.floating-icon:nth-child(5) { animation: float5 9s ease-in-out infinite; top: 40%; left: 15%; }

/* ===== TYPEWRITER CURSOR ===== */
.typewriter-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent, #E8963E);
  margin-left: 4px;
  vertical-align: text-bottom;
  animation: cursorBlink 1s step-end infinite;
}

/* ===== ANIMATED GRADIENT BACKGROUND ===== */
.anim-gradient-bg {
  background: linear-gradient(
    135deg,
    rgba(13, 55, 59, 0.85),
    rgba(13, 115, 119, 0.82),
    rgba(20, 145, 155, 0.80),
    rgba(13, 55, 59, 0.85)
  );
  background-size: 300% 300%;
  animation: gradientShift 12s ease infinite;
}

/* ===== PROGRESS RINGS ===== */
.progress-ring-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.progress-ring-circle {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dasharray 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-ring-bg {
  fill: none;
  stroke: rgba(13, 115, 119, 0.1);
  stroke-width: 6;
}

.progress-ring-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary, #0D7377);
}

/* ===== FLIP CARDS ===== */
.flip-card {
  perspective: 1000px;
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 16px;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* ===== ANIMATED BAR CHARTS ===== */
.anim-bar {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.anim-bar.anim-visible {
  transform: scaleX(1);
}

/* ===== ANIMATED CONNECTING LINES ===== */
.anim-line {
  stroke-dasharray: 8 4;
  stroke-dashoffset: 100;
  animation: drawLine 2s linear forwards;
  animation-play-state: paused;
}

.anim-line.anim-visible {
  animation-play-state: running;
}

/* ===== MAP PULSE DOTS ===== */
.map-dot {
  position: relative;
}

.map-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: inherit;
  transform: translate(-50%, -50%);
  animation: mapPulse 2s ease-out infinite;
}

/* ===== QUIZ TRANSITIONS ===== */
.quiz-slide-enter {
  opacity: 0;
  transform: translateX(30px);
}

.quiz-slide-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.quiz-slide-exit {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.quiz-progress-bar {
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.quiz-result-reveal {
  animation: resultReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Step transition for quiz/tool pages */
.step-panel {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.step-panel.step-entering {
  opacity: 0;
  transform: translateX(30px);
}

.step-panel.step-active {
  opacity: 1;
  transform: translateX(0);
}

.step-panel.step-exiting {
  opacity: 0;
  transform: translateX(-30px);
}

/* ===== NUMBER TICKER ===== */
.number-ticker {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ===== DONUT CHART ANIMATION ===== */
.anim-donut-segment {
  transition: stroke-dasharray 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== BACK TO TOP BUTTON ===== */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0D7377;
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
  z-index: 9999;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

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

.back-to-top:hover {
  background: #0a5c5f;
  transform: translateY(-2px) scale(1.05);
}

/* ===== TOAST NOTIFICATIONS ===== */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  background: #1a1a2e;
  color: white;
  font-size: 0.9rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  animation: slideInFromBottom 0.3s ease forwards;
}

.toast.toast-exit {
  animation: slideOutToBottom 0.3s ease forwards;
}

.toast.toast-success { border-left: 3px solid #4caf50; }
.toast.toast-error { border-left: 3px solid #f44336; }
.toast.toast-info { border-left: 3px solid #0D7377; }

/* ===== CUSTOM CHECKBOX / RADIO ===== */
.custom-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.custom-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.custom-check .checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.custom-check input:checked + .checkmark {
  background: #0D7377;
  border-color: #0D7377;
  transform: scale(1.1);
}

.custom-check input:checked + .checkmark::after {
  content: '';
  display: block;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  animation: checkmark 0.2s ease forwards;
}

.custom-check input[type="radio"] + .checkmark {
  border-radius: 50%;
}

.custom-check input[type="radio"]:checked + .checkmark::after {
  width: 8px;
  height: 8px;
  border: none;
  border-radius: 50%;
  background: white;
  transform: none;
}

/* ===== FLOATING LABEL INPUTS ===== */
.float-label-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.float-label-group input,
.float-label-group textarea {
  width: 100%;
  padding: 1rem 0.75rem 0.5rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  background: transparent;
}

.float-label-group label {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #999;
  pointer-events: none;
  transition: all 0.2s ease;
}

.float-label-group input:focus,
.float-label-group textarea:focus {
  border-color: #0D7377;
  box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.1);
  outline: none;
}

.float-label-group input:focus + label,
.float-label-group input:not(:placeholder-shown) + label,
.float-label-group textarea:focus + label,
.float-label-group textarea:not(:placeholder-shown) + label {
  top: 0;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: #0D7377;
  background: white;
  padding: 0 4px;
}

/* ===== BLOG CARD STAGGER ===== */
.blog-card,
.blog-grid > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.blog-card.anim-visible,
.blog-grid > .anim-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== ACCESSIBILITY: REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto;
  }

  body {
    animation: none;
  }

  .floating-icon,
  .btn-pulse,
  .anim-gradient-bg,
  .map-dot::after,
  .typewriter-cursor {
    animation: none !important;
  }

  .anim-fade-in,
  .anim-slide-up,
  .anim-slide-left,
  .anim-slide-right,
  .anim-scale-in,
  .anim-bar,
  .blog-card,
  .blog-grid > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero h1,
  .hero h2,
  .hero p,
  .hero .hero-title,
  .hero .hero-subtitle,
  .hero .hero-description,
  .hero-content h1,
  .hero-content p,
  .hero .hero-btn-primary,
  .hero .hero-btn-secondary,
  .hero .hero-buttons,
  .hero .hero-cta,
  .hero-content .btn {
    opacity: 1 !important;
    animation: none !important;
  }

  .floating-icons-container {
    display: none;
  }

  .back-to-top {
    transition: none;
  }
}