/*
═══════════════════════════════════════════════════════════════
  HABITAT 180° — Animaciones 3D, Parallax, Scroll Reveal
═══════════════════════════════════════════════════════════════
*/

/* ═══ SCROLL REVEAL ═══ */
.reveal {
    opacity: 0; transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
    opacity: 0; transform: translateX(-60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
    opacity: 0; transform: translateX(60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
    opacity: 0; transform: scale(0.85);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Staggered children */
.stagger > * { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; }
.stagger.visible > * { opacity: 1; transform: translateY(0); }
.stagger.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.visible > *:nth-child(2) { transition-delay: 0.12s; }
.stagger.visible > *:nth-child(3) { transition-delay: 0.19s; }
.stagger.visible > *:nth-child(4) { transition-delay: 0.26s; }
.stagger.visible > *:nth-child(5) { transition-delay: 0.33s; }
.stagger.visible > *:nth-child(6) { transition-delay: 0.40s; }

/* ═══ HERO ANIMATIONS ═══ */
@keyframes heroFadeIn {
    0% { opacity: 0; transform: translateY(40px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroSlideRight {
    0% { opacity: 0; transform: translateX(80px) rotateY(-8deg); }
    100% { opacity: 1; transform: translateX(0) rotateY(0); }
}
.hero-animate { animation: heroFadeIn 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.hero-animate-delay { animation: heroSlideRight 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards; opacity: 0; }

/* ═══ TEXT SHIMMER ═══ */
@keyframes shimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ═══ GRADIENT BG SHIFT ═══ */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.gradient-bg-animated {
    background: linear-gradient(135deg, var(--sky-pale), var(--mint-pale), var(--sky-pale), white);
    background-size: 400% 400%;
    animation: gradientShift 8s ease-in-out infinite;
}

/* ═══ FLOATING ELEMENTS ═══ */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-12px) rotate(2deg); }
    75% { transform: translateY(8px) rotate(-1deg); }
}
@keyframes floatSlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
@keyframes floatReverse {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(15px) rotate(3deg); }
}
.float { animation: float 6s ease-in-out infinite; }
.float-slow { animation: floatSlow 8s ease-in-out infinite; }
.float-reverse { animation: floatReverse 7s ease-in-out infinite; }
.float-delay-1 { animation-delay: 1s; }
.float-delay-2 { animation-delay: 2s; }
.float-delay-3 { animation-delay: 3s; }

/* ═══ 3D CARD HOVER ═══ */
.card-3d-hover {
    transition: var(--transition);
    transform-style: preserve-3d;
    will-change: transform;
}
.card-3d-hover:hover {
    transform: perspective(800px) rotateX(3deg) rotateY(-3deg) translateY(-8px) scale(1.02);
    box-shadow: 15px 15px 40px rgba(14,165,233,0.12), -5px -5px 20px rgba(5,150,105,0.06);
}

/* ═══ 3D FLIP CARD ═══ */
.flip-card { perspective: 1000px; height: 280px; cursor: pointer; }
.flip-card-inner {
    position: relative; width: 100%; height: 100%;
    transition: transform 0.7s 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; inset: 0; backface-visibility: hidden;
    border-radius: var(--radius); display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 32px;
    text-align: center;
}
.flip-card-front {
    background: linear-gradient(135deg, white, var(--sky-pale));
    border: 1px solid var(--border-solid);
}
.flip-card-back {
    background: linear-gradient(135deg, var(--deep), var(--primary));
    color: white; transform: rotateY(180deg);
}

/* ═══ PARALLAX HERO BG ═══ */
.parallax-layer {
    position: absolute; inset: 0; pointer-events: none;
    will-change: transform;
}
.parallax-orb {
    position: absolute; border-radius: 50%;
    filter: blur(60px); opacity: 0.4;
}
.orb-1 {
    width: 500px; height: 500px; top: -10%; right: -10%;
    background: radial-gradient(circle, var(--sky), transparent 70%);
    animation: float 10s ease-in-out infinite;
}
.orb-2 {
    width: 400px; height: 400px; bottom: -15%; left: -5%;
    background: radial-gradient(circle, var(--mint), transparent 70%);
    animation: floatReverse 12s ease-in-out infinite;
}
.orb-3 {
    width: 300px; height: 300px; top: 40%; left: 50%;
    background: radial-gradient(circle, var(--sky-light), transparent 70%);
    animation: floatSlow 14s ease-in-out infinite;
}

/* ═══ PULSE DOT ═══ */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(14,165,233,0.4); }
    70% { box-shadow: 0 0 0 12px rgba(14,165,233,0); }
    100% { box-shadow: 0 0 0 0 rgba(14,165,233,0); }
}
.pulse-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--primary); animation: pulse 2s infinite;
    display: inline-block;
}

/* ═══ COUNTER ANIMATION ═══ */
@keyframes countUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ═══ IMAGE REVEAL ═══ */
@keyframes imageReveal {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}
.image-reveal { animation: imageReveal 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards; }

/* ═══ TYPING CURSOR ═══ */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.typing-cursor::after {
    content: '|'; animation: blink 1s step-end infinite; color: var(--primary);
}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--sky), var(--primary));
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--deep); }

/* ═══ SELECTION ═══ */
::selection { background: var(--sky-light); color: var(--deep-dark); }

/* ═══ LOADING SKELETON ═══ */
@keyframes skeletonShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--surface) 25%, var(--sky-pale) 50%, var(--surface) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    border-radius: var(--radius-xs);
}