/* ═══════════════════════════════════════════════════════════
   FOTOEKSPERT.PL — ANIMATION.CSS
   Scroll Animations · Micro-interactions · Page Load
═══════════════════════════════════════════════════════════ */

/* ─── PAGE LOAD ──────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

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

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

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

/* ─── HERO ENTRY ANIMATIONS ──────────────────────────────── */
.hero-content {
  animation: slideUp 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.15s both;
}

.hero-visual {
  animation: slideLeft 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s both;
}

.hero-eyebrow {
  animation: fadeIn 0.6s ease 0.05s both;
}

.hero-headline {
  animation: slideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}

.hero-sub {
  animation: slideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s both;
}

.hero-actions {
  animation: slideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
}

.hero-stats {
  animation: slideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.65s both;
}

.hero-float-card {
  animation: scaleIn 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.9s both;
}

/* ─── SCROLL-TRIGGERED ANIMATIONS (AOS-like) ─────────────── */
[data-aos] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 0.75s;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-aos="fade-up"] {
  transform: translateY(28px);
}

[data-aos="fade-right"] {
  transform: translateX(-28px);
}

[data-aos="fade-left"] {
  transform: translateX(28px);
}

[data-aos="scale-in"] {
  transform: scale(0.95);
}

[data-aos].aos-animate {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Stagger delays */
[data-aos-delay="0"]   { transition-delay: 0ms; }
[data-aos-delay="60"]  { transition-delay: 60ms; }
[data-aos-delay="100"] { transition-delay: 100ms; }
[data-aos-delay="120"] { transition-delay: 120ms; }
[data-aos-delay="150"] { transition-delay: 150ms; }
[data-aos-delay="200"] { transition-delay: 200ms; }
[data-aos-delay="250"] { transition-delay: 250ms; }
[data-aos-delay="300"] { transition-delay: 300ms; }

/* ─── FADE-UP UTILITY (JS-triggered) ─────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  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);
}

.fade-right {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-left {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-up.visible,
.fade-right.visible,
.fade-left.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ─── NAVBAR SCROLL TRANSITION ───────────────────────────── */
.navbar {
  transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}

/* ─── CARD HOVER SHIMMER ─────────────────────────────────── */
.course-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 250, 246, 0.4) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0s;
  pointer-events: none;
}

.course-card:hover::before {
  transform: translateX(100%);
  transition: transform 0.7s ease;
}

/* ─── FLOAT ANIMATION (hero badge) ───────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.hero-float-card {
  animation: scaleIn 0.7s ease 0.9s both, float 5s ease-in-out 1.8s infinite;
}

/* ─── HERO BACKGROUND SHAPE DRIFT ────────────────────────── */
@keyframes shapeDrift {
  0%, 100% { transform: scale(1) translate(0, 0); }
  33%       { transform: scale(1.04) translate(1%, 1.5%); }
  66%       { transform: scale(0.97) translate(-1.5%, 0.5%); }
}

.hero-bg-shape {
  animation: shapeDrift 18s ease-in-out infinite;
}

/* ─── STAT COUNTER ANIMATION ─────────────────────────────── */
.stat-num.counting {
  animation: countUp 0.4s ease both;
}

/* ─── GALLERY ITEM STAGGER ───────────────────────────────── */
.gallery-item:nth-child(1) { transition-delay: 0ms; }
.gallery-item:nth-child(2) { transition-delay: 80ms; }
.gallery-item:nth-child(3) { transition-delay: 160ms; }
.gallery-item:nth-child(4) { transition-delay: 240ms; }
.gallery-item:nth-child(5) { transition-delay: 300ms; }
.gallery-item:nth-child(6) { transition-delay: 360ms; }

/* ─── LIGHTBOX OPEN/CLOSE ────────────────────────────────── */
@keyframes lightboxIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes lightboxOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.92); }
}

.lightbox-img {
  animation: lightboxIn 0.3s ease both;
}

/* ─── REVIEW SLIDER TRANSITION ───────────────────────────── */
.review-card {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.review-card.hidden {
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
}

/* ─── BUTTON PULSE (CTA emphasis) ────────────────────────── */
@keyframes pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(201, 150, 138, 0.35); }
  50%       { box-shadow: 0 4px 32px rgba(201, 150, 138, 0.55); }
}

.hero-actions .btn-primary {
  animation: pulse 3s ease-in-out infinite;
}

.hero-actions .btn-primary:hover {
  animation: none;
}

/* ─── SMOOTH SECTION REVEAL ──────────────────────────────── */
@keyframes revealSection {
  from {
    opacity: 0;
    clip-path: inset(0 0 8% 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0% 0);
  }
}

/* ─── FORM FIELD FOCUS GLOW ──────────────────────────────── */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  box-shadow: 0 0 0 3px rgba(226, 191, 179, 0.25);
}

/* ─── NEWSLETTER INPUT FOCUS ─────────────────────────────── */
.newsletter-input-group input:focus {
  box-shadow: 0 0 0 3px rgba(226, 191, 179, 0.25);
}

/* ─── EEAT ITEMS STAGGER ─────────────────────────────────── */
.eeat-item:nth-child(1) { transition-delay: 0ms; }
.eeat-item:nth-child(2) { transition-delay: 80ms; }
.eeat-item:nth-child(3) { transition-delay: 160ms; }
.eeat-item:nth-child(4) { transition-delay: 240ms; }

/* ─── SOCIAL LINK HOVER ──────────────────────────────────── */
.social-link svg {
  transition: transform 0.2s ease;
}
.social-link:hover svg {
  transform: scale(1.15);
}

/* ─── SKIP TO CONTENT (accessibility) ───────────────────── */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--rose-deep);
  color: var(--white);
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  z-index: 9999;
  transition: top 0.2s ease;
}

.skip-to-content:focus { top: 0; }

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

  .hero-float-card,
  .hero-bg-shape,
  .hero-actions .btn-primary {
    animation: none !important;
  }

  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .fade-up, .fade-right, .fade-left {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}