/* ================================================================
   TEAM GLAM — EDITORIAL ANIMATION & TRANSITION SYSTEM
   Layer 1: Entrance Animations (preFade → fadeIn / sq-fade → is-visible)
   Layer 2: Micro-Interaction Transitions
   ================================================================ */

/* ================================================================
   LAYER 1 — ENTRANCE ANIMATIONS (Pure Opacity Fade)
   Spec:
     - transition-property: opacity only (no transform)
     - transition-duration: 1.5s
     - transition-timing-function: ease
     - transition-delay: index * ~0.0103448s (sequential DOM order)
   ================================================================ */

.sq-fade,
.preFade,
.tg-fade,
.tg-animate-reveal,
.tg-animate-heading,
.tg-animate-text,
.tg-animate-card,
.tg-animate-btn,
.tg-animate-image,
.tg-eh-wrap,
.tg-sac-wrap,
.tg-testi-wrap,
.tg-cta-wrap,
.tg-footer-wrap,
.tg-dv-wrap,
.tg-vg-wrap,
.tg-mg-wrap,
.tg-ssc-wrap,
.tg-dcb-wrap,
.tg-ec-wrap,
.tg-cs-wrap,
.tg-csf-wrap,
.tg-esh-wrap,
.tg-faq-wrap,
.tg-cf-wrap,
.tg-ecw-wrap,
.tg-acc-wrap,
.tg-hero-wrap,
.tg-journal-preview-wrap,
.tg-single-post-wrap,
.tg-journal-feed-wrap,
.tg-location-map-wrap,
.tg-logo-carousel-wrap,
.tg-lookbook-wrap,
.tg-before-after-wrap,
.tg-artists-grid-wrap,
.tg-artist-showcase-wrap,
.tg-client-stories-wrap,
.elementor-widget:not(.elementor-widget-n-menu):not(.tg-no-fade),
.elementor-section:not(.tg-no-fade),
.e-con:not(.tg-no-fade) {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 1.5s;
    transition-timing-function: ease;
    will-change: opacity;
}

/* ── Faded-In / Visible State ── */
.sq-fade.is-visible,
.sq-fade.fadeIn,
.preFade.fadeIn,
.preFade.is-visible,
.tg-fade.is-visible,
.tg-fade.fadeIn,
.is-visible.tg-eh-wrap,
.is-visible.tg-sac-wrap,
.is-visible.tg-testi-wrap,
.is-visible.tg-cta-wrap,
.is-visible.tg-footer-wrap,
.is-visible.tg-dv-wrap,
.is-visible.tg-vg-wrap,
.is-visible.tg-mg-wrap,
.is-visible.tg-ssc-wrap,
.is-visible.tg-dcb-wrap,
.is-visible.tg-ec-wrap,
.is-visible.tg-cs-wrap,
.is-visible.tg-csf-wrap,
.is-visible.tg-esh-wrap,
.is-visible.tg-faq-wrap,
.is-visible.tg-cf-wrap,
.is-visible.tg-ecw-wrap,
.is-visible.tg-acc-wrap,
.is-visible.tg-hero-wrap,
.is-visible.tg-journal-preview-wrap,
.is-visible.tg-single-post-wrap,
.is-visible.tg-journal-feed-wrap,
.is-visible.tg-location-map-wrap,
.is-visible.tg-logo-carousel-wrap,
.is-visible.tg-lookbook-wrap,
.is-visible.tg-before-after-wrap,
.is-visible.tg-artists-grid-wrap,
.is-visible.tg-artist-showcase-wrap,
.is-visible.tg-client-stories-wrap,
.is-visible.elementor-widget,
.is-visible.elementor-section,
.is-visible.e-con,
.is-visible.tg-animate-reveal,
.is-visible.tg-animate-heading,
.is-visible.tg-animate-text,
.is-visible.tg-animate-card,
.is-visible.tg-animate-btn,
.is-visible.tg-animate-image,
.is-visible,
.fadeIn {
    opacity: 1 !important;
}

/* Ensure child elements inside a visible parent fade in if nested */
.is-visible .sq-fade,
.is-visible .preFade,
.is-visible .tg-fade,
.fadeIn .sq-fade,
.fadeIn .preFade,
.fadeIn .tg-fade {
    opacity: 1 !important;
}

/* ================================================================
   LAYER 2 — MICRO-INTERACTION TRANSITIONS
   Always active, separate from scroll entrance animations
   ================================================================ */

/* 1. Buttons (all types): opacity 0.1s linear */
button,
.elementor-button,
input[type="button"],
input[type="submit"],
.elementor-widget-button a.elementor-button,
.tg-btn,
.tg-cta-btn,
.tg-hero-btn,
.tg-acc-btn,
.tg-sac-btn,
.tg-ssc-btn,
.tg-sp-btn,
.tg-lm-btn,
.tg-esh-btn,
.tg-ec-btn,
.tg-csf-card-btn,
.tg-as-view-btn {
    transition: opacity 0.1s linear, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

button:hover,
.elementor-button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.elementor-widget-button a.elementor-button:hover,
.tg-btn:hover,
.tg-cta-btn:hover,
.tg-hero-btn:hover,
.tg-acc-btn:hover,
.tg-sac-btn:hover,
.tg-ssc-btn:hover,
.tg-sp-btn:hover,
.tg-lm-btn:hover,
.tg-esh-btn:hover,
.tg-ec-btn:hover,
.tg-csf-card-btn:hover,
.tg-as-view-btn:hover {
    opacity: 0.85;
}

button:active,
.elementor-button:active,
.tg-btn:active {
    opacity: 0.7;
}

/* 2. Announcement Bar: background-color 0.6s ease */
.tg-announcement-bar,
.announcement-bar,
.tg-top-bar {
    transition: background-color 0.6s ease, opacity 0.4s ease;
}

/* 3. Skip Link: opacity 0.1s linear */
.skip-link,
.screen-reader-shortcut,
a.skip-link {
    transition: opacity 0.1s linear, top 0.15s ease;
}

/* 4. Newsletter & Form Input Focus: background, border 0.3s ease-out */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
textarea,
select,
.tg-footer-input,
.tg-input,
.wpforms-field input,
.wpforms-field textarea,
.wpcf7-form input,
.wpcf7-form textarea {
    transition: background 0.3s ease-out,
                border 0.3s ease-out,
                border-color 0.3s ease-out,
                box-shadow 0.3s ease-out,
                color 0.2s ease;
}

/* 5. Video Player Controls (Plyr & Custom Video): opacity, transform 0.4s ease-in-out */
.plyr__controls,
.tg-video-controls,
.tg-vg-controls,
.tg-dv-controls {
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out !important;
}

/* 6. Video Poster Fade: opacity 0.2s ease */
.plyr__poster,
.tg-video-poster,
.tg-video-thumbnail,
.tg-dv-poster,
.tg-vg-poster {
    transition: opacity 0.2s ease !important;
}

/* 7. Image hover smooth transition */
.tg-mg-img,
.tg-esh-img,
.tg-cf-img,
.tg-ec-card-img,
.tg-ssc-card-img,
.tg-cs-photo-bg,
.tg-single-post-hero-img {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.4s ease;
}

/* ================================================================
   ACCESSIBILITY & REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}