/* ============================================================
 * STORY TIMELINE — Navapraba Wedding
 * ============================================================
 * Visual timeline untuk render story milestones di undangan.
 * 
 * STRUKTUR HTML:
 * <div class="nv-timeline theme-{name}">
 *     <div class="nv-timeline-item">
 *         <div class="nv-timeline-dot"></div>
 *         <div class="nv-timeline-content">
 *             <div class="nv-timeline-date">15 Februari 2020</div>
 *             <div class="nv-timeline-title">Pertemuan Pertama</div>
 *             <div class="nv-timeline-photo"><img></div>
 *             <div class="nv-timeline-story">...</div>
 *         </div>
 *     </div>
 * </div>
 * 
 * 4 theme variants:
 * - .theme-pure       → cream + brown
 * - .theme-atelier    → sage + dusty pink
 * - .theme-heritage   → emerald + gold
 * - .theme-nusantara  → maroon + gold (deep)
 * ============================================================ */

/* ============ BASE LAYOUT ============ */
.nv-timeline {
    position: relative;
    max-width: 420px;
    margin: 24px auto 0;
    padding-left: 36px;
}

/* Garis vertical timeline */
.nv-timeline::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    border-radius: 1px;
}

/* ============ TIMELINE ITEM ============ */
.nv-timeline-item {
    position: relative;
    margin-bottom: 32px;
    text-align: left;
}
.nv-timeline-item:last-child {
    margin-bottom: 0;
}

/* Dot di timeline */
.nv-timeline-dot {
    position: absolute;
    left: -32px;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid;
    z-index: 2;
    background: var(--nv-tl-dot-bg, #fff);
}

/* Inner pulse animation untuk dot (subtle) */
.nv-timeline-dot::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid;
    opacity: 0.35;
    animation: nv-tl-pulse 2.5s ease-in-out infinite;
}

@keyframes nv-tl-pulse {
    0%, 100% { transform: scale(1); opacity: 0.35; }
    50%      { transform: scale(1.3); opacity: 0; }
}

/* ============ CONTENT ============ */
.nv-timeline-content {
    padding: 14px 16px;
    border-radius: 10px;
    transition: transform 0.3s ease;
}
.nv-timeline-item:hover .nv-timeline-content {
    transform: translateX(2px);
}

.nv-timeline-date {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 4px;
}

.nv-timeline-title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 8px;
    line-height: 1.3;
}

.nv-timeline-photo {
    margin: 10px 0;
    border-radius: 8px;
    overflow: hidden;
    max-width: 240px;
}
.nv-timeline-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.nv-timeline-item:hover .nv-timeline-photo img {
    transform: scale(1.03);
}

.nv-timeline-story {
    font-size: 14px;
    line-height: 1.7;
    margin-top: 4px;
}

/* ============================================================
 * THEME: PURE (Standard)
 * ============================================================ */
.nv-timeline.theme-pure::before {
    background: linear-gradient(180deg, transparent 0%, #d4a574 12%, #d4a574 88%, transparent 100%);
}
.nv-timeline.theme-pure .nv-timeline-dot {
    border-color: #8b5a2b;
    background: #fdfaf5;
}
.nv-timeline.theme-pure .nv-timeline-dot::after {
    border-color: #8b5a2b;
}
.nv-timeline.theme-pure .nv-timeline-content {
    background: #fdfaf5;
    border: 1px solid rgba(212, 165, 116, 0.3);
}
.nv-timeline.theme-pure .nv-timeline-date {
    color: #8b5a2b;
}
.nv-timeline.theme-pure .nv-timeline-title {
    color: #5c3317;
    font-family: 'Cormorant Garamond', serif;
}
.nv-timeline.theme-pure .nv-timeline-story {
    color: #6b5c4a;
}

/* ============================================================
 * THEME: ATELIER (Premium)
 * ============================================================ */
.nv-timeline.theme-atelier::before {
    background: linear-gradient(180deg, transparent 0%, #9caf88 12%, #d4a5a5 50%, #c98c6b 88%, transparent 100%);
}
.nv-timeline.theme-atelier .nv-timeline-dot {
    border-color: #c98c6b;
    background: #fdfbf7;
}
.nv-timeline.theme-atelier .nv-timeline-dot::after {
    border-color: #c98c6b;
}
.nv-timeline.theme-atelier .nv-timeline-content {
    background: rgba(253, 251, 247, 0.7);
    border: 1px solid rgba(156, 175, 136, 0.3);
    border-left: 3px solid #c98c6b;
    border-radius: 4px;
}
.nv-timeline.theme-atelier .nv-timeline-date {
    color: #6b8a5f;
    font-family: 'Caveat', cursive;
    font-size: 14px;
    letter-spacing: 1px;
}
.nv-timeline.theme-atelier .nv-timeline-title {
    color: #6b8a5f;
    font-family: 'Playfair Display', serif;
    font-style: italic;
}
.nv-timeline.theme-atelier .nv-timeline-story {
    color: #8b7d6f;
}

/* ============================================================
 * THEME: HERITAGE (Spesial)
 * ============================================================ */
.nv-timeline.theme-heritage::before {
    background: linear-gradient(180deg, transparent 0%, #c5a253 12%, #c5a253 88%, transparent 100%);
}
.nv-timeline.theme-heritage .nv-timeline-dot {
    border-color: #c5a253;
    background: #1a3329;
    box-shadow: 0 0 8px rgba(197, 162, 83, 0.4);
}
.nv-timeline.theme-heritage .nv-timeline-dot::after {
    border-color: #c5a253;
}
.nv-timeline.theme-heritage .nv-timeline-content {
    background: rgba(245, 230, 200, 0.05);
    border: 1px solid rgba(197, 162, 83, 0.4);
    position: relative;
}
.nv-timeline.theme-heritage .nv-timeline-content::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(197, 162, 83, 0.3);
    pointer-events: none;
    border-radius: 8px;
}
.nv-timeline.theme-heritage .nv-timeline-date {
    color: #c5a253;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 3px;
}
.nv-timeline.theme-heritage .nv-timeline-title {
    color: #d4b86d;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
}
.nv-timeline.theme-heritage .nv-timeline-story {
    color: #f0e4c2;
    font-style: italic;
    opacity: 0.9;
}

/* ============================================================
 * THEME: NUSANTARA (Adat Jawa)
 * ============================================================ */
.nv-timeline.theme-nusantara::before {
    background: linear-gradient(180deg, transparent 0%, #C9A063 12%, #D9B57A 50%, #C9A063 88%, transparent 100%);
}
.nv-timeline.theme-nusantara .nv-timeline-dot {
    border-color: #C9A063;
    background: #3D0612;
    box-shadow: 0 0 12px rgba(201, 160, 99, 0.5);
}
.nv-timeline.theme-nusantara .nv-timeline-dot::after {
    border-color: #C9A063;
}
.nv-timeline.theme-nusantara .nv-timeline-content {
    background: rgba(201, 160, 99, 0.06);
    border: 1px solid #C9A063;
    position: relative;
}
.nv-timeline.theme-nusantara .nv-timeline-content::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(201, 160, 99, 0.3);
    pointer-events: none;
    border-radius: 8px;
}
.nv-timeline.theme-nusantara .nv-timeline-date {
    color: #C9A063;
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: 3px;
}
.nv-timeline.theme-nusantara .nv-timeline-title {
    color: #D9B57A;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
}
.nv-timeline.theme-nusantara .nv-timeline-story {
    color: #F5E6C8;
    font-style: italic;
    opacity: 0.92;
}

/* ============ MOBILE OPTIMIZATIONS ============ */
@media (max-width: 380px) {
    .nv-timeline {
        padding-left: 28px;
    }
    .nv-timeline::before {
        left: 8px;
    }
    .nv-timeline-dot {
        left: -28px;
        width: 14px;
        height: 14px;
        border-width: 2px;
    }
    .nv-timeline-title {
        font-size: 18px;
    }
    .nv-timeline-content {
        padding: 12px 14px;
    }
}

/* ============ RESPECT REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
    .nv-timeline-dot::after {
        animation: none !important;
    }
    .nv-timeline-content {
        transition: none !important;
    }
}

/* ============ PRINT ============ */
@media print {
    .nv-timeline-dot::after {
        animation: none !important;
        display: none;
    }
}