/* =========================================================
   SMILE NEST DENTAL CLINIC
   PREMIUM MOTION & INTERACTION LAYER
   Reconciled with the current index.html + style.css
   ========================================================= */


/* =========================================================
   GLOBAL SCROLL REVEALS
   main.js adds .visible when elements enter the viewport
   ========================================================= */

.reveal,
.reveal-left,
.reveal-right,
.reveal-scale,
.stagger {
    opacity: 0;
    transition:
        opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.reveal {
    transform: translateY(30px);
}

.reveal-left {
    transform: translateX(-38px);
}

.reveal-right {
    transform: translateX(38px);
}

.reveal-scale {
    transform: scale(0.97);
}

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible,
.stagger.visible {
    opacity: 1;
    transform: none;
}


/* =========================================================
   STAGGERED CARDS
   ========================================================= */

.stagger > * {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.stagger.visible > * {
    opacity: 1;
    transform: none;
}

.stagger.visible > *:nth-child(1) { transition-delay: 70ms; }
.stagger.visible > *:nth-child(2) { transition-delay: 130ms; }
.stagger.visible > *:nth-child(3) { transition-delay: 190ms; }
.stagger.visible > *:nth-child(4) { transition-delay: 250ms; }
.stagger.visible > *:nth-child(5) { transition-delay: 310ms; }
.stagger.visible > *:nth-child(6) { transition-delay: 370ms; }


/* =========================================================
   HERO ENTRANCE
   Current HTML:
   .eyebrow
   .hero-brand
   .hero-main-title
   .hero-description
   .hero-actions
   .hero-location
   .hero-card
   ========================================================= */

.hero-section .eyebrow {
    animation: heroEyebrow 850ms 80ms both
        cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-section .hero-brand {
    animation: heroBrand 950ms 150ms both
        cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-section .hero-main-title {
    animation: heroTitle 1050ms 240ms both
        cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-section .hero-description {
    animation: heroContent 850ms 390ms both
        cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-section .hero-actions {
    animation: heroContent 850ms 490ms both
        cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-section .hero-location {
    animation: heroContent 850ms 590ms both
        cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-section .hero-card {
    animation:
        heroVisual 1200ms 260ms both
        cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

@keyframes heroTitle {
    from {
        opacity: 0;
        transform: translateY(32px);
        clip-path: inset(0 0 100% 0);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
    }
}

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

@keyframes heroVisual {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =========================================================
   HERO DECORATION
   Very subtle movement only
   ========================================================= */

.hero-background-shape {
    animation: heroShapeDrift 16s ease-in-out infinite;
}

.hero-circle {
    animation: heroCircleFloat 9s ease-in-out infinite;
}

.hero-logo-watermark {
    animation: watermarkFloat 10s ease-in-out infinite;
}

@keyframes heroShapeDrift {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -8px, 0);
    }
}

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

@keyframes watermarkFloat {
    0%, 100% {
        opacity: 0.16;
        transform: translateY(0);
    }
    50% {
        opacity: 0.21;
        transform: translateY(-5px);
    }
}


/* =========================================================
   BUTTON INTERACTION
   ========================================================= */

.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
        transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 350ms ease,
        background-color 350ms ease,
        color 350ms ease;
}

.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 65%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.18),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 700ms ease;
    pointer-events: none;
    z-index: -1;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:hover::before {
    left: 140%;
}

.btn:active {
    transform: translateY(0) scale(0.985);
}


/* =========================================================
   PATIENT NEED CARDS
   ========================================================= */

.patient-need-card {
    transition:
        transform 550ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 550ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 400ms ease,
        background-color 400ms ease;
}

.patient-need-card:hover {
    transform: translateY(-5px);
}

.patient-need-card::before {
    transition:
        transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 500ms ease;
}

.patient-need-card:hover::before {
    transform: scale(1.18);
    opacity: 0.85;
}

.patient-need-icon {
    transition:
        transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 450ms ease;
}

.patient-need-card:hover .patient-need-icon {
    transform: translateY(-3px) scale(1.03);
}


/* =========================================================
   WHY SMILE NEST CARDS
   ========================================================= */

.why-card {
    transition:
        transform 550ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

.why-card:hover {
    transform: translateY(-5px);
}

.why-card-icon {
    transition:
        transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 450ms ease;
}

.why-card:hover .why-card-icon {
    transform: translateY(-3px) scale(1.04);
}


/* =========================================================
   FOUNDER SECTION
   ========================================================= */

.founder-photo-inner {
    transition:
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 700ms ease;
}

.founder-photo-inner:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 65px rgba(8, 47, 50, 0.16);
}

.founder-photo-inner img {
    transition:
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.founder-photo-inner:hover img {
    transform: scale(1.025);
}

.founder-badge {
    animation: founderBadgeFloat 6s ease-in-out infinite;
}

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


/* =========================================================
   TRANSFORMATION CAROUSEL
   carousel.js swaps .active on each slide
   ========================================================= */

.transformation-slide {
    animation: transformationEnter 750ms
        cubic-bezier(0.22, 1, 0.36, 1);
}

.transformation-slide.active .transformation-placeholder,
.transformation-slide.active img {
    animation: transformationImage 6s
        cubic-bezier(0.22, 1, 0.36, 1) both;
}

.transformation-caption {
    animation: transformationCaption 650ms 80ms
        cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes transformationEnter {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes transformationImage {
    from {
        transform: scale(1.035);
    }
    to {
        transform: scale(1);
    }
}

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


/* =========================================================
   TRANSFORMATION CONTROLS
   ========================================================= */

.carousel-arrow {
    transition:
        transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 350ms ease,
        color 350ms ease,
        box-shadow 350ms ease;
}

.carousel-arrow:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(8, 47, 50, 0.12);
}

.carousel-dot {
    transition:
        width 350ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 300ms ease,
        opacity 300ms ease;
}


/* =========================================================
   SPECIALIST CAROUSEL
   ========================================================= */

.specialist-slide {
    animation: specialistEnter 800ms
        cubic-bezier(0.22, 1, 0.36, 1);
}

.specialist-slide.active .specialist-image {
    animation: specialistImageEnter 900ms
        cubic-bezier(0.22, 1, 0.36, 1);
}

.specialist-slide.active .specialist-information > * {
    animation: specialistTextEnter 650ms
        cubic-bezier(0.22, 1, 0.36, 1) both;
}

.specialist-slide.active .specialist-information > *:nth-child(1) {
    animation-delay: 70ms;
}

.specialist-slide.active .specialist-information > *:nth-child(2) {
    animation-delay: 130ms;
}

.specialist-slide.active .specialist-information > *:nth-child(3) {
    animation-delay: 190ms;
}

.specialist-slide.active .specialist-information > *:nth-child(4) {
    animation-delay: 250ms;
}

.specialist-slide.active .specialist-information > *:nth-child(5) {
    animation-delay: 310ms;
}

@keyframes specialistEnter {
    from {
        opacity: 0;
        transform: translateX(18px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes specialistImageEnter {
    from {
        opacity: 0;
        transform: scale(1.025);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

.specialist-arrow {
    transition:
        transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 350ms ease,
        color 350ms ease,
        box-shadow 350ms ease;
}

.specialist-arrow:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(8, 47, 50, 0.12);
}

.specialist-dot {
    transition:
        width 350ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 300ms ease,
        opacity 300ms ease;
}


/* =========================================================
   APPOINTMENT CTA
   ========================================================= */

.appointment-inner {
    transition:
        transform 650ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 650ms ease;
}

.appointment-inner:hover {
    transform: translateY(-3px);
    box-shadow: 0 28px 65px rgba(8, 47, 50, 0.16);
}


/* =========================================================
   CONTACT + MAP
   ========================================================= */

.contact-detail {
    transition:
        transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 350ms ease;
}

.contact-detail:hover {
    transform: translateX(3px);
}

.contact-icon {
    transition:
        transform 400ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 350ms ease;
}

.contact-detail:hover .contact-icon {
    transform: translateY(-2px);
}

.map-card {
    transition:
        transform 650ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 650ms ease;
}

.map-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 28px 65px rgba(8, 47, 50, 0.13);
}


/* =========================================================
   HEADER + LOGO
   ========================================================= */

.site-header {
    transition:
        background-color 450ms ease,
        box-shadow 450ms ease,
        border-color 450ms ease,
        padding 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.logo {
    transition:
        transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 300ms ease;
}

.logo:hover {
    transform: translateY(-1px);
}


/* =========================================================
   MOBILE MENU
   Current HTML uses direct <a> elements
   ========================================================= */

.mobile-navigation {
    transform-origin: top center;
}

.mobile-navigation.open {
    animation: mobileMenuEnter 350ms
        cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mobile-navigation a {
    opacity: 0;
    transform: translateY(-8px);
}

.mobile-navigation.open a {
    animation: mobileLinkEnter 350ms
        cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.mobile-navigation.open a:nth-child(1) { animation-delay: 50ms; }
.mobile-navigation.open a:nth-child(2) { animation-delay: 90ms; }
.mobile-navigation.open a:nth-child(3) { animation-delay: 130ms; }
.mobile-navigation.open a:nth-child(4) { animation-delay: 170ms; }
.mobile-navigation.open a:nth-child(5) { animation-delay: 210ms; }

@keyframes mobileMenuEnter {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes mobileLinkEnter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer-column a {
    transition:
        color 300ms ease,
        transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-column a:hover {
    transform: translateX(3px);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--rose);
    outline-offset: 4px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* =========================================================
   MOBILE MOTION
   ========================================================= */

@media (max-width: 600px) {
    .reveal,
    .reveal-left,
    .reveal-right {
        transform: translateY(20px);
    }

    .reveal-left {
        transform: translateX(-22px);
    }

    .reveal-right {
        transform: translateX(22px);
    }

    .hero-circle,
    .hero-logo-watermark {
        animation-duration: 14s;
    }

    .founder-badge {
        animation: none;
    }
}