/**
 * minimal-public.css
 * Modern World-Class UI for Public Pages
 * Implements: View Transitions, Scroll-Driven Animations, 3D Transforms, Glassmorphism
 */

/* ═══════════════════════════════════════════════════════
   1. NATIVE VIEW TRANSITIONS
   ═══════════════════════════════════════════════════════ */
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Subtle fade and slide for root transitions */
::view-transition-old(root) {
    animation-name: fade-out-slide-up;
}
::view-transition-new(root) {
    animation-name: fade-in-slide-up;
}

@keyframes fade-out-slide-up {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-12px); }
}
@keyframes fade-in-slide-up {
    0% { opacity: 0; transform: translateY(12px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Shared element transition for book covers */
.vt-book-cover {
    view-transition-name: book-cover-main;
    contain: layout;
}
::view-transition-old(book-cover-main),
::view-transition-new(book-cover-main) {
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ═══════════════════════════════════════════════════════
   2. GLASSMORPHISM (PREMIUM DEPTH)
   ═══════════════════════════════════════════════════════ */
.glass-nav {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .glass-nav,
.dark .glass-nav {
    background: rgba(18, 18, 18, 0.8) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* ═══════════════════════════════════════════════════════
   3. SCROLL-DRIVEN ANIMATIONS (CSS)
   ═══════════════════════════════════════════════════════ */
@supports (animation-timeline: view()) {
    .sc-tile--animated {
        animation: scale-up-fade linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 30%;
    }
    
    .cj-hero--animated {
        animation: slide-up-fade linear both;
        animation-timeline: view();
        animation-range: entry 5% cover 40%;
    }
    
    .heritage-content--animated {
        animation: parallax-fade linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 50%;
    }
}

@keyframes scale-up-fade {
    0% { opacity: 0; transform: scale(0.9) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes slide-up-fade {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes parallax-fade {
    0% { opacity: 0; transform: translateY(50px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════
   4. 3D TACTILE HOVER EFFECTS (MICRO-INTERACTIONS)
   ═══════════════════════════════════════════════════════ */
.perspective-wrap {
    perspective: 1200px;
    transform-style: preserve-3d;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.perspective-card {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transform-style: preserve-3d;
    will-change: transform;
    flex: 1;
}

.perspective-wrap:hover .perspective-card {
    transform: rotateX(4deg) rotateY(-4deg) translateY(-6px) scale(1.02);
    box-shadow: -12px 20px 40px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .perspective-wrap:hover .perspective-card,
.dark .perspective-wrap:hover .perspective-card {
    box-shadow: -12px 20px 40px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════
   5. BUTTON & PROGRESS MICRO-INTERACTIONS
   ═══════════════════════════════════════════════════════ */
.btn-spring {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, box-shadow 0.2s ease;
}
.btn-spring:active {
    transform: scale(0.94);
}

.rating-fill-animated {
    width: 0 !important;
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}