/* ============================================
   Supply Chain & Logistics – Animated Themes
   Add-on only: no content/layout changes.
   Respects prefers-reduced-motion.
   ============================================ */

:root {
    --anim-duration: 0.4s;
    --anim-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --logistics-glow: rgba(99, 179, 237, 0.35);
    --route-dash: 8;
}

/* --- Reduced motion: disable non-essential motion --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.15s !important;
    }
}

/* ============================================
   Section transitions (flow / order → delivery)
   ============================================ */

.section {
    position: relative;
}

.section[data-in-view="false"] .section-title {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--anim-duration) var(--anim-ease),
                transform var(--anim-duration) var(--anim-ease);
}

.section[data-in-view="true"] .section-title {
    opacity: 1;
    transform: translateY(0);
}

.section[data-in-view="false"] .section-subtitle {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--anim-duration) var(--anim-ease) 0.05s,
                transform var(--anim-duration) var(--anim-ease) 0.05s;
}

.section[data-in-view="true"] .section-subtitle {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children (e.g. cards) like picking → packing → dispatch */
.section[data-in-view="true"] .fade-in.visible {
    transition: opacity var(--anim-duration) var(--anim-ease),
                transform var(--anim-duration) var(--anim-ease);
}

/* Grid overlay removed per user request */
.section::after {
    display: none;
}

/* ============================================
   Icons: scan / lift / directional (logistics)
   ============================================ */

.skill-icon,
.flow-icon,
.stat-icon,
.contact-icon,
.volunteer-icon,
.education-icon,
.award-icon {
    transition: transform var(--anim-duration) var(--anim-ease),
                box-shadow var(--anim-duration) var(--anim-ease);
}

.skill-card:hover .skill-icon,
.flow-step:hover .flow-icon,
.stat-card:hover .stat-icon,
.contact-item:hover .contact-icon,
.volunteer-card:hover .volunteer-icon,
.education-card:hover .education-icon,
.award-card:hover .award-icon {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px var(--logistics-glow);
}

/* Scan-style glow on icon hover (skill cards only; flow-icon keeps main styles shine) */
.skill-card:hover .skill-icon {
    animation: scan-pulse 1.5s ease-in-out infinite;
}

@keyframes scan-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 8px 20px var(--logistics-glow); }
    50% { opacity: 0.95; box-shadow: 0 8px 24px var(--logistics-glow); }
}

/* ============================================
   Buttons: flow / progress line / arrow movement
   ============================================ */

.btn {
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: currentColor;
    transition: width var(--anim-duration) var(--anim-ease);
}

.btn:hover::after {
    width: 100%;
}

.btn-primary::after {
    background: white;
}

/* Arrow movement on secondary button */
.btn-secondary .fa-arrow-right,
.hero-buttons .btn span {
    display: inline-block;
    transition: transform var(--anim-duration) var(--anim-ease);
}

.btn:hover .fa-arrow-right,
.hero-buttons .btn:hover span {
    transform: translateX(4px);
}

/* ============================================
   Cards: pick/place style hover
   ============================================ */

.skill-card,
.cert-card,
.award-card,
.volunteer-card,
.education-card,
.timeline-content {
    transition: transform var(--anim-duration) var(--anim-ease),
                box-shadow var(--anim-duration) var(--anim-ease),
                border-color var(--anim-duration) var(--anim-ease);
}

.skill-card:hover,
.cert-card:hover,
.award-card:hover,
.volunteer-card:hover,
.education-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(26, 54, 93, 0.12);
}

.timeline-content:hover {
    transform: translateX(6px);
    box-shadow: 0 8px 24px rgba(26, 54, 93, 0.1);
}

/* Card bottom border = “progress” line (dispatch feel) */
.skill-card::after,
.cert-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color), var(--secondary-color));
    border-radius: 0 0 12px 12px;
    transition: width var(--anim-duration) var(--anim-ease);
}

.skill-card:hover::after,
.cert-card:hover::after {
    width: 100%;
}

.skill-card,
.cert-card {
    position: relative;
}

/* ============================================
   Flow arrows: route / path movement
   ============================================ */

.flow-arrow {
    transition: transform var(--anim-duration) var(--anim-ease),
                opacity var(--anim-duration) var(--anim-ease);
}

.flow-arrow i {
    display: inline-block;
    animation: route-dash 2s ease-in-out infinite;
}

@keyframes route-dash {
    0%, 100% { opacity: 1; transform: translateX(0); }
    50% { opacity: 0.7; transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
    .flow-arrow i {
        animation: none;
    }
}

/* ============================================
   Timeline: shipment tracking style
   ============================================ */

.timeline::before {
    background: linear-gradient(
        180deg,
        var(--accent-color),
        var(--secondary-color)
    );
    opacity: 0.9;
}

.timeline-marker {
    transition: transform var(--anim-duration) var(--anim-ease),
                box-shadow var(--anim-duration) var(--anim-ease);
}

.timeline-item:hover .timeline-marker {
    transform: scale(1.15);
    box-shadow: 0 0 0 6px rgba(49, 130, 206, 0.2);
}

/* ============================================
   Language bars: loading / progress (dispatch)
   ============================================ */

.language-bar {
    overflow: hidden;
    border-radius: 10px;
}

.language-progress {
    transition: width 1s var(--anim-ease);
    position: relative;
}

/* Language bars use existing width transition in script.js */

/* ============================================
   Scroll: order → picking → packing → delivery (section order)
   ============================================ */

[data-flow-step="1"] { --flow-order: 1; }
[data-flow-step="2"] { --flow-order: 2; }
[data-flow-step="3"] { --flow-order: 3; }
[data-flow-step="4"] { --flow-order: 4; }
[data-flow-step="5"] { --flow-order: 5; }
[data-flow-step="6"] { --flow-order: 6; }
[data-flow-step="7"] { --flow-order: 7; }
[data-flow-step="8"] { --flow-order: 8; }
[data-flow-step="9"] { --flow-order: 9; }
[data-flow-step="10"] { --flow-order: 10; }

.section .fade-in {
    transition-delay: calc(var(--flow-order, 0) * 0.06s);
}

/* ============================================
   Dotted route (optional decorative)
   ============================================ */

.supply-chain-flow .flow-container {
    position: relative;
}

.supply-chain-flow .flow-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px dashed rgba(49, 130, 206, 0.2);
    margin-top: -1px;
    z-index: 0;
    max-width: 0;
    transition: max-width 1s var(--anim-ease);
}

.supply-chain-flow[data-in-view="true"] .flow-container::before {
    max-width: 100%;
}

@media (max-width: 768px) {
    .supply-chain-flow .flow-container::before {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .supply-chain-flow .flow-container::before {
        max-width: 100%;
        transition: none;
    }
}