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

:root {
    --anim-duration: 0.35s;
    --anim-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --logistics-glow: rgba(37, 99, 235, 0.15);
    --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;
}

/* --- Creative section entrance on nav click --- */
.hero.section-transition-in,
.section.section-transition-in {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.5s var(--anim-ease), transform 0.5s var(--anim-ease);
}

.hero.section-transition-in.section-transition-in--visible,
.section.section-transition-in.section-transition-in--visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   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.12);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 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: 1px dashed rgba(37, 99, 235, 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;
    }
}

/* ============================================
   Theme layer: route bg + slow logistics icons (decorative only)
   ============================================ */

.theme-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

body > *:not(.theme-layer) {
    position: relative;
    z-index: 1;
}

/* Very subtle route background (light theme) */
.theme-route-bg {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background: repeating-linear-gradient(
        105deg,
        transparent,
        transparent 48px,
        rgba(30, 58, 95, 0.08) 48px,
        rgba(30, 58, 95, 0.08) 49px
    );
    background-size: 200% 100%;
    animation: theme-route-drift 40s linear infinite;
}

@keyframes theme-route-drift {
    0% { background-position: 0 0; }
    100% { background-position: 100% 0; }
}

/* Slow-moving logistics icons (ship, plane, truck) */
.theme-logistics-icons {
    position: absolute;
    inset: 0;
}

.theme-icon {
    position: absolute;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: rgba(30, 58, 95, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-icon--ship {
    top: 18%;
    left: 8%;
    animation: theme-float-ship 35s ease-in-out infinite;
}

.theme-icon--plane {
    top: 55%;
    right: 12%;
    animation: theme-float-plane 40s ease-in-out infinite 5s;
}

.theme-icon--truck {
    bottom: 22%;
    left: 15%;
    animation: theme-float-truck 32s ease-in-out infinite 2s;
}

@keyframes theme-float-ship {
    0%, 100% { transform: translate(0, 0) rotate(-2deg); }
    25% { transform: translate(20px, -15px) rotate(1deg); }
    50% { transform: translate(-10px, 10px) rotate(-1deg); }
    75% { transform: translate(15px, 5px) rotate(2deg); }
}

@keyframes theme-float-plane {
    0%, 100% { transform: translate(0, 0) rotate(2deg); }
    33% { transform: translate(-25px, 10px) rotate(-1deg); }
    66% { transform: translate(-10px, -20px) rotate(1deg); }
}

@keyframes theme-float-truck {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(30px, -8px); }
}

@media (prefers-reduced-motion: reduce) {
    .theme-route-bg { animation: none; }
    .theme-icon { animation: none !important; }
}

/* ============================================
   Smooth scroll-based section transitions (content fade-in)
   ============================================ */

.hero .container {
    /* no scroll transition on hero */
}

.section .container {
    transition: opacity 0.5s var(--anim-ease), transform 0.5s var(--anim-ease);
}

.section[data-in-view="false"] .container {
    opacity: 0;
    transform: translateY(14px);
}

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

/* ============================================
   Card hover micro-interactions (refined)
   ============================================ */

.stat-card,
.flow-step {
    transition: transform var(--anim-duration) var(--anim-ease),
                box-shadow var(--anim-duration) var(--anim-ease),
                border-color var(--anim-duration) var(--anim-ease);
}

.stat-card:hover,
.flow-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px var(--logistics-glow);
}

.skill-card:hover,
.cert-card:hover,
.award-card:hover,
.volunteer-card:hover,
.education-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px var(--logistics-glow);
}

.contact-form {
    transition: box-shadow var(--anim-duration) var(--anim-ease),
                border-color var(--anim-duration) var(--anim-ease);
}

.contact-form:focus-within {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

/* ============================================
   Minimal conveyor / warehouse motion (subtle stripe)
   ============================================ */

.about,
.supply-chain-flow,
#skills {
    position: relative;
    overflow: hidden;
}

.about::after,
.supply-chain-flow::after,
#skills::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 50%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(37, 99, 235, 0.12),
        transparent
    );
    opacity: 0.5;
    animation: theme-conveyor 18s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.supply-chain-flow::after {
    animation-duration: 15s;
    animation-delay: 1s;
}

#skills::after {
    animation-duration: 14s;
    animation-delay: 2s;
}

@keyframes theme-conveyor {
    0% { left: -50%; }
    100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .about::after,
    .supply-chain-flow::after,
    #skills::after {
        animation: none;
        opacity: 0;
    }
}