/* ===========================================================
   CONNECT PAGE — ANIMATION LAYER
   Reusable reveal system. Works with assets/js/animation.js
   (IntersectionObserver toggles ".active" on .reveal/.reveal-left/
   .reveal-right/.stagger; auto-stagger sets per-child delays).

   Only opacity + transform are animated (no layout thrashing).
   Respects prefers-reduced-motion.
=========================================================== */

:root {
    --ease-smooth: cubic-bezier(.22, 1, .36, 1);
}

/* -----------------------------------------------------------
   HERO ENTRANCE (runs once on load, not scroll-triggered)
----------------------------------------------------------- */

.hero-badge,
.hero-heading,
.hero-highlight,
.hero-paragraph {
    opacity: 0;
    animation: heroFadeUp .7s var(--ease-smooth) forwards;
}

.hero-badge { animation-delay: .05s; }
.hero-heading { animation-delay: .18s; }
.hero-highlight { animation-delay: .22s; }
.hero-paragraph { animation-delay: .38s; }

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

/* -----------------------------------------------------------
   SCROLL REVEAL (base) — triggered by IntersectionObserver
----------------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s var(--ease-smooth), transform .8s var(--ease-smooth);
    will-change: opacity, transform;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Left / right column entrance */

.reveal-left {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity .8s var(--ease-smooth), transform .8s var(--ease-smooth);
}

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

.reveal-right {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity .8s var(--ease-smooth), transform .8s var(--ease-smooth);
}

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

/* Generic delay helpers (stagger left/right, cards, sections) */

.reveal-delay-1 { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .28s; }
.reveal-delay-4 { transition-delay: .36s; }
.reveal-delay-5 { transition-delay: .44s; }

/* -----------------------------------------------------------
   STAGGER CONTAINERS — children fade up individually.
   animation.js (AUTO STAGGER) sets each child's transition-delay
   to index * .12s, and the IntersectionObserver adds ".active"
   to the .stagger container once it enters the viewport.
----------------------------------------------------------- */

.stagger > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s var(--ease-smooth), transform .6s var(--ease-smooth);
}

.stagger.active > * {
    opacity: 1;
    transform: translateY(0);
}

/* -----------------------------------------------------------
   CONTACT FORM CARD — fade + lift + soft scale
----------------------------------------------------------- */

.form-reveal {
    opacity: 0;
    transform: translateY(28px) scale(.98);
    transition: opacity .85s var(--ease-smooth), transform .85s var(--ease-smooth);
}

.form-reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* -----------------------------------------------------------
   HOVER REFINEMENT — buttons / cards
----------------------------------------------------------- */

.btn-lift,
.card-lift {
    transition: transform .25s ease, box-shadow .25s ease;
}

/* .btn-lift:hover {
    transform: translateY(-2px);
} */
.btn-lift{
    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s cubic-bezier(.22,1,.36,1);
}

.btn-lift:hover{
    transform: translateY(-6px) scale(1.03);
    box-shadow:
        0 18px 40px rgba(0,0,0,.18),
        0 8px 20px rgba(205,163,73,.18);
} 

.card-lift:hover {
    transform: translateY(-4px);
}

/* -----------------------------------------------------------
   FOOTER — intentionally left static (no reveal animation).
   footer.php's own script still tags reveal-item/is-revealed,
   but with no matching CSS here it has no visual effect,
   so the footer just stays visible as normal.
----------------------------------------------------------- */

/* -----------------------------------------------------------
   REDUCED MOTION — show everything immediately, no movement
----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .hero-badge,
    .hero-heading,
    .hero-highlight,
    .hero-paragraph,
    .reveal,
    .reveal-left,
    .reveal-right,
    .stagger > *,
    .form-reveal {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}
[data-ocid="connect.social_links"] a{
    transition:
        transform .3s cubic-bezier(.22,1,.36,1),
        box-shadow .3s cubic-bezier(.22,1,.36,1);
}

[data-ocid="connect.social_links"] a:hover{
    transform: translateY(-8px) scale(1.1);
    box-shadow:0 20px 40px rgba(0,0,0,.25);
}