/* ==========================================================================
   VRC PROPERTIES — ANIMATIONS
   Scroll-reveal utility classes (toggled via IntersectionObserver in
   js/scroll.js) plus keyframes used across components.
   ========================================================================== */

/* ---------- Scroll reveal base states ---------- */
[data-animate] {
  opacity: 0;
  transition: opacity 0.8s var(--ease-standard), transform 0.8s var(--ease-standard);
  will-change: transform, opacity;
}

[data-animate].is-visible { opacity: 1; transform: none !important; }

[data-animate="fade-up"] { transform: translateY(36px); }
[data-animate="fade-left"] { transform: translateX(-40px); }
[data-animate="fade-right"] { transform: translateX(40px); }
[data-animate="scale"] { transform: scale(0.92); }
[data-animate="fade"] { transform: none; }

/* Stagger helper — apply data-delay="1..6" alongside data-animate */
[data-delay="1"] { transition-delay: 0.08s; }
[data-delay="2"] { transition-delay: 0.16s; }
[data-delay="3"] { transition-delay: 0.24s; }
[data-delay="4"] { transition-delay: 0.32s; }
[data-delay="5"] { transition-delay: 0.4s; }
[data-delay="6"] { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Keyframes ---------- */
@keyframes loaderZoom {
  from { transform: scale(1); }
  to { transform: scale(1.15); }
}

@keyframes drawHouse {
  0% { stroke-dashoffset: 400; }
  55% { stroke-dashoffset: 0; }
  85% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0.35; }
}

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

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  50% { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
}

.whatsapp-float { animation: pulseGlow 2.6s ease-out infinite; }

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

body { animation: fadeInPage 0.5s var(--ease-soft); }

/* Page transition overlay used by navigation.js for internal links */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--color-dark);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-soft);
}
.page-transition.is-active { opacity: 1; pointer-events: all; }

/* Hero background subtle zoom for atmosphere */
@keyframes heroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}
.hero-bg .img-placeholder { animation: heroZoom 14s ease-in-out infinite alternate; }

/* Hover lift shared by icon tiles */
.tile-icon { transition: transform var(--duration-base) var(--ease-standard); }
.tile-card:hover .tile-icon,
.value-card:hover .tile-icon { transform: translateY(-4px) rotate(-4deg); }

.tile-card{
    background:#fff;
    border:2px solid rgba(229,106,46,.18);
    border-radius:22px;
    transition:.35s ease;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.tile-card:hover{
    transform:translateY(-10px);
    border-color:#E56A2E;
    box-shadow:0 20px 45px rgba(229,106,46,.18);
}
.tile-icon{
    width:74px;
    height:74px;
    border-radius:50%;
    background:#FFF3EB;
    color:#E56A2E;
    transition:.35s;
}

.tile-card:hover .tile-icon{
    background:linear-gradient(135deg,#E56A2E,#FF8C42);
    color:#fff;
}

.tile-card h3{
    transition:.3s;
}

.tile-card:hover h3{
    color:#E56A2E;
}