/* ==========================================================================
   BIMOCIONAL · ARMONÍA DEL ALMA | CLAUDIO PARRA DONOSO
   Design System: Motion Storytelling, Lenis Silk Scroll & Sacred Vector Luxury
   ========================================================================== */

:root {
    --bg-base: #FAF8F5;
    --bg-card: #FFFFFF;
    --text-main: #22201E;
    --text-muted: #5C5750;
    --text-soft: #8A847C;
    
    /* Ethereal Aura Palette */
    --aura-lavender: #75639E;
    --aura-lavender-light: #F0ECF9;
    --aura-rose: #BD756A;
    --aura-rose-light: #FBF0ED;
    --aura-sage: #4E786E;
    --aura-sage-light: #EBF4F0;
    --aura-amber: #B58835;
    --aura-amber-light: #FBF3E2;
}

html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

body {
    background-color: var(--bg-base);
    color: var(--text-main);
    overflow-x: hidden;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Minimal Silk Scrollbar */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #FAF8F5;
}

::-webkit-scrollbar-thumb {
    background: #D9D2C5;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #B58835;
}

/* Blurred Fade-In Base Class for GSAP Storytelling */
.gsap-blur-reveal {
    will-change: transform, opacity, filter;
}

/* Magnetic Tilt & Luminous Border */
.tilt-card {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease, border-color 0.45s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

.tilt-card:hover {
    box-shadow: 0 25px 50px -12px rgba(117, 99, 158, 0.12), 0 0 1px 1px rgba(255, 255, 255, 1) inset;
    border-color: rgba(117, 99, 158, 0.35);
}

/* Service Card Icon Badges with Ambient Glow */
.service-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.service-card:hover .service-icon-box {
    transform: scale(1.08) rotate(3deg);
}

/* 3D Oracle Deck Layout */
.oracle-deck-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
}

.oracle-card-container {
    perspective: 1000px;
    width: 270px;
    height: 380px;
    margin: 0 auto;
    position: relative;
    cursor: pointer;
}

.oracle-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
}

.oracle-card-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 20px 40px -10px rgba(90, 80, 70, 0.08), 0 0 30px -5px rgba(240, 236, 249, 0.6);
}

.oracle-card-back {
    transform: rotateY(180deg);
}

/* TRI Steps Accordion */
.tri-step {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.tri-step.active {
    background-color: #FFFFFF;
    border-color: rgba(117, 99, 158, 0.4);
    box-shadow: 0 15px 35px -10px rgba(117, 99, 158, 0.09);
}

.tri-step.active .step-icon {
    transform: rotate(180deg);
    color: var(--aura-lavender);
}

/* Heart Coherence Breathing Pulse */
.aura-breath-circle {
    transition: transform 4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 4s cubic-bezier(0.4, 0, 0.2, 1);
}

.breathing-expanding {
    transform: scale(1.4);
    box-shadow: 0 0 60px rgba(240, 236, 249, 0.9), 0 0 120px rgba(251, 240, 237, 0.8), 0 0 160px rgba(235, 244, 240, 0.6);
}

.breathing-contracting {
    transform: scale(0.85);
    box-shadow: 0 0 20px rgba(240, 236, 249, 0.3);
}

/* Footer Social Badges */
.footer-social-badge {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-social-badge:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 10px 20px -5px rgba(117, 99, 158, 0.2);
}