/* ==========================================================================
   ANIMATIONS.CSS
   Subtle, premium animations for real estate template.
   Scroll-triggered reveals, micro-interactions, and polish.
   ========================================================================== */

/* ==========================================================================
   1. SCROLL-TRIGGERED REVEAL ANIMATIONS
   Elements start hidden and animate in when entering viewport.
   The .reveal class is added by JS (IntersectionObserver).
   ========================================================================== */

/* --- Fade Up (default) --- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo),
              transform 0.8s var(--ease-out-expo);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Fade Down --- */
.reveal-down {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 0.8s var(--ease-out-expo),
              transform 0.8s var(--ease-out-expo);
  will-change: opacity, transform;
}

.reveal-down.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Fade Left --- */
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s var(--ease-out-expo),
              transform 0.8s var(--ease-out-expo);
  will-change: opacity, transform;
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* --- Fade Right --- */
.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.8s var(--ease-out-expo),
              transform 0.8s var(--ease-out-expo);
  will-change: opacity, transform;
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* --- Scale Up --- */
.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s var(--ease-out-expo),
              transform 0.8s var(--ease-out-expo);
  will-change: opacity, transform;
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* --- Fade Only (no movement) --- */
.reveal-fade {
  opacity: 0;
  transition: opacity 1s var(--ease-in-out-smooth);
  will-change: opacity;
}

.reveal-fade.is-visible {
  opacity: 1;
}

/* ==========================================================================
   2. STAGGER DELAYS
   For child elements that should animate in sequence.
   Applied to individual children within a .reveal parent.
   ========================================================================== */

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }
.stagger-7 { transition-delay: 0.7s; }
.stagger-8 { transition-delay: 0.8s; }

/* Auto-stagger for grid children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-out-expo),
              transform 0.6s var(--ease-out-expo);
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.15s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.2s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.25s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.3s; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.35s; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.4s; }
.reveal-stagger.is-visible > *:nth-child(9) { transition-delay: 0.45s; }
.reveal-stagger.is-visible > *:nth-child(10) { transition-delay: 0.5s; }
.reveal-stagger.is-visible > *:nth-child(11) { transition-delay: 0.55s; }
.reveal-stagger.is-visible > *:nth-child(12) { transition-delay: 0.6s; }

/* ==========================================================================
   3. HERO ANIMATIONS
   Entrance animations that run once on page load.
   ========================================================================== */

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

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

@keyframes heroScaleIn {
  from {
    opacity: 0;
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.hero-content h1 {
  animation: heroFadeIn 1s var(--ease-out-expo) 0.3s both;
}

.hero-tagline {
  animation: heroFadeInSlow 1s var(--ease-out-expo) 0.6s both;
}

.hero-content .btn-primary {
  animation: heroFadeInSlow 1s var(--ease-out-expo) 0.9s both;
}

.hero-scroll-indicator {
  animation: heroFadeInSlow 1s var(--ease-out-expo) 1.5s both;
}

/* Subtle parallax zoom on hero background */
@keyframes heroBackgroundZoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

#hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  z-index: -1;
  animation: heroBackgroundZoom 20s ease-in-out alternate infinite;
}

/* ==========================================================================
   4. NAVIGATION ANIMATIONS
   ========================================================================== */

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

#main-nav {
  animation: navSlideDown 0.6s var(--ease-out-expo) 0.1s both;
}

/* Nav link hover ripple effect */
.nav-links a {
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   5. SECTION LINE ANIMATION
   The decorative line under section headers.
   ========================================================================== */

@keyframes lineExpand {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 60px;
    opacity: 1;
  }
}

.reveal.is-visible .section-line,
.reveal-stagger.is-visible .section-line,
.section-header.is-visible .section-line {
  animation: lineExpand 0.8s var(--ease-out-expo) 0.3s both;
}

/* ==========================================================================
   6. COUNTER / NUMBER ANIMATIONS
   ========================================================================== */

@keyframes counterPop {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(20px);
  }
  60% {
    transform: scale(1.05) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.counter-item.is-visible .counter-number {
  animation: counterPop 0.8s var(--ease-out-expo) both;
}

.counter-item:nth-child(1).is-visible .counter-number { animation-delay: 0.1s; }
.counter-item:nth-child(2).is-visible .counter-number { animation-delay: 0.2s; }
.counter-item:nth-child(3).is-visible .counter-number { animation-delay: 0.3s; }
.counter-item:nth-child(4).is-visible .counter-number { animation-delay: 0.4s; }

/* ==========================================================================
   7. CARD HOVER ANIMATIONS
   ========================================================================== */

/* Benefit card icon pulse on hover */
.benefit-card:hover .benefit-icon {
  animation: iconPulse 0.5s var(--ease-spring);
}

@keyframes iconPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Apartment card image shimmer loading effect */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.byt-card-img-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.byt-card:hover .byt-card-img-wrapper::before {
  opacity: 1;
  animation: shimmer 1.5s ease infinite;
}

/* Byt CTA button hover state */
.byt-cta {
  position: relative;
  overflow: hidden;
}

.byt-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--color-secondary);
  transition: left var(--transition-base);
  z-index: -1;
}

.byt-cta:hover::before {
  left: 0;
}

/* ==========================================================================
   8. GALLERY ANIMATIONS
   ========================================================================== */

@keyframes galleryReveal {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.galerie-item {
  animation: galleryReveal 0.6s var(--ease-out-expo) both;
}

.galerie-item:nth-child(1) { animation-delay: 0.05s; }
.galerie-item:nth-child(2) { animation-delay: 0.1s; }
.galerie-item:nth-child(3) { animation-delay: 0.15s; }
.galerie-item:nth-child(4) { animation-delay: 0.2s; }
.galerie-item:nth-child(5) { animation-delay: 0.25s; }
.galerie-item:nth-child(6) { animation-delay: 0.3s; }

/* Gallery overlay icon animation */
.galerie-overlay svg,
.galerie-overlay i {
  transform: scale(0.8);
  transition: transform var(--transition-base);
}

.galerie-item:hover .galerie-overlay svg,
.galerie-item:hover .galerie-overlay i {
  transform: scale(1);
}

/* ==========================================================================
   9. LIGHTBOX ANIMATIONS
   ========================================================================== */

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

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

#lightbox.lightbox-active {
  animation: lightboxFadeIn 0.3s ease both;
}

#lightbox.lightbox-active .lightbox-img {
  animation: lightboxImgEnter 0.4s var(--ease-out-expo) 0.1s both;
}

/* ==========================================================================
   10. TIMELINE ANIMATIONS (#financovani)
   ========================================================================== */

@keyframes timelineDotPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(200, 169, 96, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(200, 169, 96, 0);
  }
}

.timeline-step.is-visible .timeline-dot {
  animation: timelineDotPulse 2s ease-in-out 1;
}

@keyframes timelineLineGrow {
  from {
    height: 0;
  }
  to {
    height: 100%;
  }
}

.timeline.is-visible::before {
  animation: timelineLineGrow 1.2s var(--ease-out-expo) both;
}

.timeline-step {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s var(--ease-out-expo),
              transform 0.6s var(--ease-out-expo);
}

.timeline-step.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.timeline-step:nth-child(1) { transition-delay: 0.2s; }
.timeline-step:nth-child(2) { transition-delay: 0.4s; }
.timeline-step:nth-child(3) { transition-delay: 0.6s; }
.timeline-step:nth-child(4) { transition-delay: 0.8s; }

/* ==========================================================================
   11. FORM ANIMATIONS
   ========================================================================== */

/* Focus ring animation on inputs */
@keyframes focusRing {
  from {
    box-shadow: 0 0 0 0 rgba(26, 54, 93, 0.3);
  }
  to {
    box-shadow: 0 0 0 4px rgba(26, 54, 93, 0);
  }
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  animation: focusRing 0.4s ease;
}

/* Submit button loading spinner */
@keyframes btnSpin {
  to {
    transform: rotate(360deg);
  }
}

.btn-submit.loading {
  color: transparent;
}

/* Form success checkmark */
@keyframes checkmark {
  0% {
    transform: scale(0) rotate(-45deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(-45deg);
  }
  100% {
    transform: scale(1) rotate(-45deg);
    opacity: 1;
  }
}

.form-success::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 8px;
  border-left: 3px solid #166534;
  border-bottom: 3px solid #166534;
  transform: rotate(-45deg);
  margin-right: 8px;
  animation: checkmark 0.5s var(--ease-spring) both;
  vertical-align: middle;
}

/* Form error shake */
@keyframes formShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.form-error.shake {
  animation: formShake 0.5s ease;
}

/* ==========================================================================
   12. MODAL ANIMATIONS
   ========================================================================== */

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

@keyframes modalContentIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

#access-modal.modal-visible {
  animation: modalBackdropIn 0.3s ease both;
}

#access-modal.modal-visible .modal-content {
  animation: modalContentIn 0.4s var(--ease-out-expo) 0.1s both;
}

/* ==========================================================================
   13. SCROLL-TO-TOP ANIMATION
   ========================================================================== */

@keyframes scrollTopBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

#scroll-top.scroll-top-visible:hover {
  animation: scrollTopBounce 0.5s ease;
}

/* ==========================================================================
   14. POI ITEM ENTRANCE
   ========================================================================== */

.poi-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s var(--ease-out-expo),
              transform 0.5s var(--ease-out-expo);
}

.poi-item.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.poi-item:nth-child(1) { transition-delay: 0.1s; }
.poi-item:nth-child(2) { transition-delay: 0.2s; }
.poi-item:nth-child(3) { transition-delay: 0.3s; }
.poi-item:nth-child(4) { transition-delay: 0.4s; }
.poi-item:nth-child(5) { transition-delay: 0.5s; }
.poi-item:nth-child(6) { transition-delay: 0.6s; }

/* ==========================================================================
   15. COOKIE BAR ENTRANCE
   ========================================================================== */

@keyframes cookieSlideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.cookie-bar.cookie-visible {
  animation: cookieSlideUp 0.5s var(--ease-out-expo) both;
}

/* ==========================================================================
   16. FLOATING LABEL ANIMATION
   Enhances the form label float transition.
   ========================================================================== */

.form-group label {
  transition: top 0.25s var(--ease-out-expo),
              font-size 0.25s var(--ease-out-expo),
              color 0.25s var(--ease-out-expo);
}

/* ==========================================================================
   17. LOADING / SKELETON STATES
   For when content is being fetched from config.json.
   ========================================================================== */

@keyframes skeletonPulse {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-alt) 25%,
    #ede9e3 37%,
    var(--color-bg-alt) 63%
  );
  background-size: 200% 100%;
  animation: skeletonPulse 1.5s ease infinite;
  border-radius: var(--border-radius);
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
  border-radius: 4px;
}

.skeleton-text:last-child {
  width: 60%;
}

.skeleton-heading {
  height: 2em;
  width: 50%;
  margin-bottom: 1em;
  border-radius: 4px;
}

.skeleton-img {
  width: 100%;
  height: 220px;
  border-radius: var(--border-radius);
}

.skeleton-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

/* ==========================================================================
   18. MOBILE MENU LINK ANIMATIONS
   ========================================================================== */

@keyframes mobileMenuLinkEnter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

#mobile-menu.mobile-menu-open a {
  animation: mobileMenuLinkEnter 0.4s var(--ease-out-expo) both;
}

/* ==========================================================================
   19. SECTION DIVIDER ANIMATION
   ========================================================================== */

@keyframes dividerFade {
  from {
    opacity: 0;
    max-width: 0;
  }
  to {
    opacity: 1;
    max-width: 200px;
  }
}

.section-divider.is-visible {
  animation: dividerFade 1s var(--ease-out-expo) both;
}

/* ==========================================================================
   20. PARALLAX HELPERS
   Used with JS for smooth parallax scrolling.
   ========================================================================== */

.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}

.parallax-slow {
  will-change: transform;
}

.parallax-medium {
  will-change: transform;
}

.parallax-fast {
  will-change: transform;
}

/* ==========================================================================
   21. HOVER LIFT UTILITY
   Generic hover effect for any element.
   ========================================================================== */

.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.hover-lift-sm {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift-sm:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   22. IMAGE REVEAL
   Clip-path based image reveal animation.
   ========================================================================== */

.img-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--ease-out-expo);
}

.img-reveal.is-visible {
  clip-path: inset(0 0 0 0);
}

/* ==========================================================================
   23. TEXT REVEAL
   Line-by-line text reveal animation.
   ========================================================================== */

.text-reveal {
  overflow: hidden;
}

.text-reveal span {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 0.7s var(--ease-out-expo);
}

.text-reveal.is-visible span {
  transform: translateY(0);
}

/* ==========================================================================
   24. REDUCED MOTION
   Respect user preferences — disable all animations.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-down,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-fade,
  .reveal-stagger > *,
  .timeline-step,
  .poi-item,
  .img-reveal,
  .text-reveal span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    clip-path: none !important;
  }

  .hero-content h1,
  .hero-tagline,
  .hero-content .btn-primary,
  .hero-scroll-indicator,
  #main-nav,
  #lightbox.lightbox-active,
  #lightbox.lightbox-active .lightbox-img,
  #access-modal.modal-visible,
  #access-modal.modal-visible .modal-content,
  .cookie-bar.cookie-visible,
  .galerie-item,
  #mobile-menu.mobile-menu-open a,
  .section-divider.is-visible {
    animation: none !important;
  }

  .benefit-card:hover .benefit-icon,
  .byt-card:hover .byt-card-img-wrapper::before,
  #scroll-top.scroll-top-visible:hover,
  .timeline-step.is-visible .timeline-dot,
  .timeline.is-visible::before,
  .counter-item.is-visible .counter-number {
    animation: none !important;
  }

  #hero::after {
    animation: none !important;
  }

  .skeleton,
  .byt-card-img-wrapper::before {
    animation: none !important;
  }

  .form-success::before {
    animation: none !important;
    opacity: 1;
  }
}