/* AM Nusantara - Motion
 * Restrained, purposeful movement. Everything here is skipped when the
 * visitor prefers reduced motion, and hidden states only apply once
 * motion.js has marked the page (html.motion), so content never stays hidden.
 */

@media (prefers-reduced-motion: no-preference) {

    /* ---------- Scroll reveal ---------- */
    html.motion .reveal {
        opacity: 0;
        transform: translateY(18px);
        transition:
            opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--reveal-delay, 0ms);
    }

    html.motion .reveal.is-visible {
        opacity: 1;
        transform: none;
    }

    /* ---------- Sunburst horizon ---------- */
    html.motion .sunburst-bg path {
        stroke-dasharray: 4000;
        stroke-dashoffset: 4000;
    }

    html.motion .sunburst-bg circle { opacity: 0; }

    html.motion .is-lit .sunburst-bg path {
        animation: nv-draw 2.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    }

    /* Rays first, from the centre outwards; then the horizon lines */
    html.motion .is-lit .sunburst-bg path:nth-child(-n + 25) {
        animation-delay: calc(var(--ray, 0) * 40ms);
    }

    html.motion .is-lit .sunburst-bg path:nth-child(n + 26) {
        animation-duration: 1.6s;
        animation-delay: calc(500ms + var(--line, 0) * 70ms);
    }

    html.motion .is-lit .sunburst-bg circle {
        animation: nv-fade 0.8s ease-out 0.2s forwards;
        transform-box: fill-box;
        transform-origin: center;
    }

    html.motion .is-lit .sunburst-bg circle:last-of-type {
        animation:
            nv-fade 0.8s ease-out 0.2s forwards,
            nv-breathe 5s ease-in-out 1.2s infinite;
    }

    @keyframes nv-draw { to { stroke-dashoffset: 0; } }
    @keyframes nv-fade { to { opacity: 1; } }
    @keyframes nv-breathe {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.35); opacity: 0.35; }
    }

    /* ---------- Hover ---------- */
    .card,
    .process-card,
    .principle-card,
    .value-card,
    .team-card,
    .stat-card,
    .insight-card,
    .vision-card,
    .approval-card,
    .contact-card {
        transition:
            transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
            border-color 0.35s,
            box-shadow 0.35s,
            background-color 0.3s,
            color 0.3s,
            opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .card:hover,
    .process-card:hover,
    .principle-card:hover,
    .value-card:hover,
    .team-card:hover,
    .stat-card:hover,
    .insight-card:hover,
    .vision-card:hover,
    .approval-card:hover,
    .contact-card:hover {
        transform: translateY(-3px);
        border-color: rgba(233, 168, 32, 0.45);
        box-shadow: 0 14px 32px -18px rgba(0, 0, 0, 0.6);
    }

    [data-theme="light"] .card:hover,
    [data-theme="light"] .process-card:hover,
    [data-theme="light"] .principle-card:hover,
    [data-theme="light"] .value-card:hover,
    [data-theme="light"] .team-card:hover,
    [data-theme="light"] .stat-card:hover,
    [data-theme="light"] .insight-card:hover,
    [data-theme="light"] .vision-card:hover,
    [data-theme="light"] .approval-card:hover,
    [data-theme="light"] .contact-card:hover {
        box-shadow: 0 14px 32px -20px rgba(60, 45, 10, 0.28);
    }

    /* Arrows lean forward on hover */
    a svg[viewBox="0 0 22 10"],
    button svg[viewBox="0 0 22 10"] {
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }

    a:hover svg[viewBox="0 0 22 10"],
    button:hover svg[viewBox="0 0 22 10"] {
        transform: translateX(5px);
    }

    /* Underlined links draw their line from the left */
    .link-underline {
        border-bottom-color: transparent;
        background: linear-gradient(var(--accent-gold), var(--accent-gold)) left bottom / 100% 1px no-repeat;
        transition: background-size 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s;
    }

    .link-underline:hover {
        background-size: 35% 1px;
        color: var(--accent-gold);
    }

    /* ---------- Live data ---------- */
    .chart-line.is-drawing,
    .chart-line-compare.is-drawing {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: nv-draw 1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    }

    .chart-area-fill.is-drawing { animation: nv-area 1s ease-out forwards; }

    @keyframes nv-area { from { opacity: 0; } to { opacity: 1; } }

    .value-flash { animation: nv-flash 1.4s ease-out; }

    @keyframes nv-flash {
        0% { color: var(--accent-gold); text-shadow: 0 0 18px rgba(233, 168, 32, 0.45); }
        100% { text-shadow: 0 0 0 transparent; }
    }
}

/* ---------- Reading progress (legal pages) ---------- */
.read-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 2px;
    background: var(--accent-gold);
    transform: scaleX(var(--progress, 0));
    transform-origin: left;
    pointer-events: none;
}

/* ============================================
   Hover: cards and rows
   Cards draw a gold line across the top and warm up from it; their number or
   icon steps forward. List rows slide right behind a gold bar.
   ============================================ */
.value-card, .vision-card, .principle-card, .approval-card, .card, .stat-card,
.market-card, .yield-card, .currency-card, .commodity-card, .signal-card, .pillar,
.regulatory-item, .arch-item, .shariah-item, .status-item, .thread-item,
.principle-item, .point-item, .factor-item, .process-step-item {
    position: relative;
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    /* ---------- Cards ---------- */
    .value-card::before, .vision-card::before, .principle-card::before, .approval-card::before,
    .card::before, .stat-card::before, .market-card::before, .yield-card::before,
    .currency-card::before, .commodity-card::before, .signal-card::before {
        content: ""; position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(180deg, rgba(233, 168, 32, .09) 0%, rgba(233, 168, 32, 0) 65%);
        opacity: 0; transition: opacity .45s ease;
    }
    .value-card::after, .vision-card::after, .principle-card::after, .approval-card::after,
    .card::after, .stat-card::after, .market-card::after, .yield-card::after,
    .currency-card::after, .commodity-card::after, .signal-card::after {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; pointer-events: none;
        background: var(--accent-gold);
        transform: scaleX(0); transform-origin: left center;
        transition: transform .55s cubic-bezier(.22, 1, .36, 1);
    }
    .value-card:hover::before, .vision-card:hover::before, .principle-card:hover::before, .approval-card:hover::before,
    .card:hover::before, .stat-card:hover::before, .market-card:hover::before, .yield-card:hover::before,
    .currency-card:hover::before, .commodity-card:hover::before, .signal-card:hover::before { opacity: 1; }
    .value-card:hover::after, .vision-card:hover::after, .principle-card:hover::after, .approval-card:hover::after,
    .card:hover::after, .stat-card:hover::after, .market-card:hover::after, .yield-card:hover::after,
    .currency-card:hover::after, .commodity-card:hover::after, .signal-card:hover::after { transform: scaleX(1); }

    /* Numbers and icons step forward */
    .value-number, .principle-number, .card-number, .vision-card svg, .pillar-icon {
        display: inline-block;
        transition: transform .45s cubic-bezier(.22, 1, .36, 1), color .3s;
    }
    .value-card:hover .value-number,
    .principle-card:hover .principle-number,
    .card:hover .card-number { transform: translateX(6px); color: var(--accent-gold); }
    .vision-card:hover svg { transform: rotate(-12deg) scale(1.08); }

    /* Market cells: the figure lifts slightly */
    .market-card > *, .yield-card > *, .currency-card > *, .commodity-card > * { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
    .market-card:hover > *, .yield-card:hover > *, .currency-card:hover > *, .commodity-card:hover > * { transform: translateY(-2px); }

    /* Insights pillars (in the hero) */
    .pillar-label { transition: color .3s; }
    .pillar:hover .pillar-icon { transform: translateY(-4px); }
    .pillar:hover .pillar-label { color: var(--accent-gold); }

    /* ---------- Rows ---------- */
    .regulatory-item::before, .arch-item::before, .shariah-item::before, .status-item::before, .thread-item::before,
    .principle-item::before, .point-item::before, .factor-item::before, .process-step-item::before {
        content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 2px; pointer-events: none;
        background: var(--accent-gold);
        transform: scaleY(0); transition: transform .45s cubic-bezier(.22, 1, .36, 1);
    }
    .regulatory-item > *, .arch-item > *, .shariah-item > *, .status-item > *, .thread-item > *,
    .principle-item > *, .point-item > *, .factor-item > *, .process-step-item > * {
        transition: transform .45s cubic-bezier(.22, 1, .36, 1), color .3s;
    }
    .regulatory-item, .arch-item, .shariah-item, .status-item, .thread-item,
    .principle-item, .point-item, .factor-item, .process-step-item {
        transition: background-color .4s ease;
    }
    .regulatory-item:hover, .arch-item:hover, .shariah-item:hover, .status-item:hover, .thread-item:hover,
    .principle-item:hover, .point-item:hover, .factor-item:hover, .process-step-item:hover {
        background-color: rgba(233, 168, 32, .04);
    }
    .regulatory-item:hover::before, .arch-item:hover::before, .shariah-item:hover::before, .status-item:hover::before, .thread-item:hover::before,
    .principle-item:hover::before, .point-item:hover::before, .factor-item:hover::before, .process-step-item:hover::before {
        transform: scaleY(1);
    }
    .regulatory-item:hover > *, .arch-item:hover > *, .shariah-item:hover > *, .status-item:hover > *, .thread-item:hover > *,
    .principle-item:hover > *, .point-item:hover > *, .factor-item:hover > *, .process-step-item:hover > * {
        transform: translateX(14px);
    }
    .process-step-item:hover .step-number { color: var(--accent-gold); }
}