/* ==========================================================================
   CINEMATIC, FUTURISTIC WEBSITE ANIMATION SYSTEM
   Multi-Million-Euro Digital Product Motion Language
   ========================================================================== */

:root {
    --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 01. TYPING CURSOR */
.cinematic-cursor {
    display: inline-block;
    width: 3px;
    height: 1.05em;
    background: #4CAF50;
    box-shadow: 0 0 8px #4CAF50, 0 0 16px rgba(76, 175, 80, 0.8);
    vertical-align: -0.1em;
    margin-left: 4px;
    border-radius: 2px;
    animation: cinematicCursorBlink 0.8s infinite cubic-bezier(0.4, 0, 0.6, 1);
    transition: opacity 0.5s ease;
}
.cinematic-cursor.dissolve {
    opacity: 0 !important;
    transform: scaleY(0);
}
@keyframes cinematicCursorBlink {
    0%, 45% { opacity: 1; }
    50%, 95% { opacity: 0; }
    100% { opacity: 1; }
}

/* 02. HERO SUPPORTING TEXT MATERIALIZATION */
.hero-materialize-init {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(12px) scale(0.99);
    transition: opacity 0.9s var(--ease-cinematic), filter 0.9s var(--ease-cinematic), transform 0.9s var(--ease-cinematic);
}
.hero-materialize-in {
    opacity: 1 !important;
    filter: blur(0px) !important;
    transform: translateY(0) scale(1) !important;
}

/* 03. SECTION TITLES KINETIC ENTRANCE */
.title-kinetic-wrap {
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
}
.title-kinetic-mask {
    opacity: 0;
    transform: translateY(105%) rotateX(-10deg);
    transform-origin: bottom center;
    transition: transform 0.9s var(--ease-cinematic), opacity 0.9s var(--ease-cinematic);
    will-change: transform, opacity;
}
.title-kinetic-mask.revealed {
    opacity: 1 !important;
    transform: translateY(0) rotateX(0deg) !important;
}

.title-tracking-expand {
    opacity: 0;
    letter-spacing: 5px;
    filter: blur(6px);
    transition: letter-spacing 1s var(--ease-cinematic), filter 1s var(--ease-cinematic), opacity 1s var(--ease-cinematic);
}
.title-tracking-expand.revealed {
    opacity: 1 !important;
    letter-spacing: normal !important;
    filter: blur(0px) !important;
}

/* 04. LAYERED STAGGERED REVEALS */
.stagger-layer {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.75s var(--ease-cinematic), transform 0.75s var(--ease-cinematic);
    will-change: opacity, transform;
}
.stagger-layer.in-view {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 05. 3D MAGNETIC CARDS & GLASS REFLECTIONS */
.magnetic-card-wrap {
    perspective: 1200px;
    transform-style: preserve-3d;
}
.magnetic-card {
    transition: transform 0.25s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth), border-color 0.3s var(--ease-smooth);
    will-change: transform, box-shadow;
    position: relative;
}
.magnetic-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.08), transparent 45%);
    opacity: 0;
    transition: opacity 0.35s var(--ease-smooth);
    pointer-events: none;
    z-index: 3;
    border-radius: inherit;
}
.magnetic-card:hover::after {
    opacity: 1;
}

/* 06. 3D CERTIFICATES & CREDENTIALS ENVIRONMENT */
.hero-press-slider-box {
    perspective: 1000px;
}
.hero-press-logo-img {
    transition: transform 0.35s var(--ease-cinematic), filter 0.35s var(--ease-cinematic);
    transform-style: preserve-3d;
}
.hero-press-logo-img:hover {
    transform: scale(1.12) translateZ(15px);
    filter: drop-shadow(0 6px 15px rgba(255, 215, 0, 0.45));
}

/* 07. NUMERICAL DATA COUNT-UP & MICRO-GLOW CONFIRMATION */
.number-lock-glow {
    animation: numberLockGlowAnim 0.7s var(--ease-cinematic);
}
@keyframes numberLockGlowAnim {
    0% { transform: scale(1); filter: brightness(1); }
    35% { transform: scale(1.06); filter: brightness(1.35) drop-shadow(0 0 10px rgba(76, 175, 80, 0.7)); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* 08. CINEMATIC LENS FOCUS IMAGE REVEAL */
.lens-focus-image {
    opacity: 0;
    transform: scale(1.05);
    filter: blur(10px);
    transition: opacity 1.1s var(--ease-cinematic), transform 1.1s var(--ease-cinematic), filter 1.1s var(--ease-cinematic);
    will-change: opacity, transform, filter;
}
.lens-focus-image.focused {
    opacity: 1 !important;
    transform: scale(1) !important;
    filter: blur(0px) !important;
}

/* 09. CALL TO ACTION MAGNETIC & LIGHT SWEEP */
.btn-green, .nav-cta-btn, .btn-news-action {
    position: relative;
    overflow: hidden;
    transition: transform 0.22s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth);
}
.btn-green::before, .nav-cta-btn::before, .btn-news-action::before {
    content: '';
    position: absolute;
    top: 0; left: -160%;
    width: 80%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
    transform: skewX(-25deg);
    transition: left 0.75s var(--ease-cinematic);
    pointer-events: none;
}
.btn-green:hover::before, .nav-cta-btn:hover::before, .btn-news-action:hover::before {
    left: 180%;
}

/* 10. INTELLIGENT FORM INTERACTION & TACTILE SUBMIT */
.form-group input,
.form-group textarea,
.form-group select {
    transition: transform 0.22s var(--ease-cinematic), border-color 0.22s var(--ease-cinematic), box-shadow 0.22s var(--ease-cinematic), background 0.22s var(--ease-cinematic);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.25), 0 0 0 1.5px rgba(76, 175, 80, 0.5) !important;
}
.btn-green:active, button[type="submit"]:active {
    transform: scale(0.97);
}

/* 11. NAVIGATION SEQUENTIAL REVEAL & COMPACT FLOATING */
.mobile-cta-text { display: none !important; }
.desktop-cta-text { display: inline !important; }

@media (max-width: 768px) {
    .mobile-cta-text { display: inline !important; }
    .desktop-cta-text { display: none !important; }
}

.top-nav {
    transition: padding 0.35s var(--ease-cinematic), background 0.35s var(--ease-cinematic), box-shadow 0.35s var(--ease-cinematic), border-color 0.35s var(--ease-cinematic);
}
.top-nav.nav-compact {
    padding: 7px 0 !important;
    background: rgba(10, 14, 26, 0.96) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    border-bottom-color: rgba(76, 175, 80, 0.25) !important;
}
body.theme-white .top-nav.nav-compact,
[data-theme="white"] .top-nav.nav-compact {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-bottom-color: rgba(0, 164, 239, 0.3) !important;
}

/* 12. ACCESSIBILITY / REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        transition-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
    }
    .cinematic-cursor { display: none !important; }
}