/* ═══════════════════════════════════════════
   ADVANCED ANIMATIONS — Löffler 2026
   ═══════════════════════════════════════════ */

/* ── View Transitions API ──────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.3s ease-out slideOutLeft; }
::view-transition-new(root) { animation: 0.3s ease-in slideInRight; }
@keyframes slideOutLeft { to { opacity: 0; transform: translateX(-30px); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } }

/* ── Parallax sections ─────────────────── */
.parallax-bg {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* ── Split text reveal ─────────────────── */
.reveal-text {
    overflow: hidden;
}

.reveal-text .reveal-line {
    display: block;
    transform: translateY(105%);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-text.visible .reveal-line {
    transform: translateY(0);
}

.reveal-text.visible .reveal-line:nth-child(2) { transition-delay: 0.08s; }
.reveal-text.visible .reveal-line:nth-child(3) { transition-delay: 0.16s; }

/* ── Magnetic hover effect ─────────────── */
.magnetic {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Scroll-driven progress bar ────────── */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    z-index: 10001;
    width: 0%;
    transition: width 0.1s linear;
}

/* ── Image parallax reveal ─────────────── */
.img-reveal {
    overflow: hidden;
    position: relative;
}

.img-reveal img {
    transform: scale(1.15);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.img-reveal.visible img {
    transform: scale(1);
}

.img-reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--white);
    transform-origin: right;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.img-reveal.visible::after {
    transform: scaleX(0);
}

/* ── Gradient text shimmer ─────────────── */
.shimmer-text {
    background: linear-gradient(
        90deg,
        var(--primary) 0%,
        var(--primary-light) 40%,
        #ff6b6b 60%,
        var(--primary) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmerText 4s linear infinite;
}

@keyframes shimmerText {
    to { background-position: 200% center; }
}

/* ── Counter with glow ─────────────────── */
.glow-number {
    text-shadow: 0 0 20px rgba(204,0,0,0.3), 0 0 60px rgba(204,0,0,0.1);
}

/* ── Smooth section transitions ────────── */
.section-transition-dark {
    position: relative;
}

.section-transition-dark::before {
    content: '';
    position: absolute;
    top: -80px;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, var(--secondary));
    pointer-events: none;
    z-index: 1;
}

.section-transition-light::before {
    content: '';
    position: absolute;
    top: -80px;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, var(--white));
    pointer-events: none;
    z-index: 1;
}

/* ── Floating dots background ──────────── */
.floating-dots {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.floating-dots .dot {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(204,0,0,0.15);
    border-radius: 50%;
    animation: floatDot 15s infinite;
}

.floating-dots .dot:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; animation-duration: 12s; }
.floating-dots .dot:nth-child(2) { left: 30%; top: 60%; animation-delay: 2s; animation-duration: 18s; }
.floating-dots .dot:nth-child(3) { left: 60%; top: 30%; animation-delay: 4s; animation-duration: 14s; }
.floating-dots .dot:nth-child(4) { left: 80%; top: 70%; animation-delay: 6s; animation-duration: 16s; }
.floating-dots .dot:nth-child(5) { left: 50%; top: 10%; animation-delay: 8s; animation-duration: 20s; }
.floating-dots .dot:nth-child(6) { left: 15%; top: 80%; animation-delay: 3s; animation-duration: 13s; }

@keyframes floatDot {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    25% { transform: translate(30px, -40px) scale(1.5); opacity: 0.6; }
    50% { transform: translate(-20px, -80px) scale(1); opacity: 0.3; }
    75% { transform: translate(40px, -30px) scale(1.8); opacity: 0.5; }
}

/* ── Tilt card effect ──────────────────── */
.tilt-card {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.tilt-card:hover {
    transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}

/* ── Number count up with blur ─────────── */
.count-blur {
    filter: blur(8px);
    transition: filter 0.3s ease;
}

.count-blur.counted {
    filter: blur(0);
}

/* ── Smooth image zoom on scroll ───────── */
.scroll-zoom {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.scroll-zoom img {
    transition: transform 0.1s linear;
    will-change: transform;
}

/* ── Hover glow effect for cards ───────── */
.glow-hover {
    position: relative;
}

.glow-hover::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(204,0,0,0.2), transparent, rgba(204,0,0,0.1));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.glow-hover:hover::before {
    opacity: 1;
}

/* ── Smooth cursor follower (applied via JS) */
.cursor-glow {
    position: fixed;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(204,0,0,0.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease-out, opacity 0.3s;
    opacity: 0;
}

body:hover .cursor-glow { opacity: 1; }

/* ── Page hero enhanced ────────────────── */
.page-hero-image {
    position: relative;
    overflow: hidden;
}

.page-hero-image .hero-bg-img {
    position: absolute;
    inset: -20px;
    background-size: cover;
    background-position: center;
    will-change: transform;
    transition: transform 0.1s linear;
}

/* ── Stagger animations enhanced ───────── */
[data-animate="stagger"].visible > *:nth-child(1) { animation-delay: 0.05s; }
[data-animate="stagger"].visible > *:nth-child(2) { animation-delay: 0.12s; }
[data-animate="stagger"].visible > *:nth-child(3) { animation-delay: 0.19s; }
[data-animate="stagger"].visible > *:nth-child(4) { animation-delay: 0.26s; }
[data-animate="stagger"].visible > *:nth-child(5) { animation-delay: 0.33s; }
[data-animate="stagger"].visible > *:nth-child(6) { animation-delay: 0.40s; }

/* ── Mobile refinements ────────────────── */
@media (max-width: 768px) {
    .cursor-glow { display: none; }
    .floating-dots { display: none; }
    .scroll-progress { height: 2px; }
}