/* Etherii shared design system: tokens, the ribbon signature motif, and scroll motion. */

:root {
    --mist: #F5F4FB;
    --skyglass: #9FD3EF;
    --violet: #6A63E3;
    --bloom: #EFA0CB;
    --ink: #1E1B29;
}

/* --- The ribbon: an oversized, blurred echo of the logo's flowing mark, used as hero atmosphere --- */

.ribbon-field {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.ribbon-ambient {
    position: absolute;
    filter: blur(48px);
    opacity: 0.6;
    animation: ribbon-drift 24s ease-in-out infinite alternate;
    will-change: transform;
}

.ribbon-ambient--secondary {
    animation-duration: 30s;
    animation-delay: -6s;
    opacity: 0.35;
}

@keyframes ribbon-drift {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(2%, -3%, 0) rotate(5deg) scale(1.06); }
    100% { transform: translate3d(-3%, 2%, 0) rotate(-4deg) scale(0.98); }
}

/* --- The thread: a thin gradient line that draws itself in as it enters view, stitching sections together --- */

.thread-line path {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.thread-line.is-visible path {
    stroke-dashoffset: 0;
}

/* --- Scroll reveal --- */

[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    transition-delay: var(--reveal-delay, 0s);
    /* Fail-safe: force visible after 3s even if site.js never runs (blocked, slow network, script error),
       so real content is never permanently hidden behind a JS dependency. */
    animation: force-reveal 0s 3s forwards;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes force-reveal {
    to {
        opacity: 1;
        transform: none;
    }
}

/* --- Ritual step connector: fills in as each step is reached --- */

.step-node {
    transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease;
}

.step-node.is-visible {
    background-color: var(--violet);
    border-color: var(--violet);
    color: #fff;
}

.step-connector {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.8s ease;
}

.step-connector.is-visible {
    transform: scaleY(1);
}

/* --- Card lift --- */

.lift-on-hover {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.lift-on-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -20px rgba(106, 99, 227, 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .ribbon-ambient,
    .thread-line path,
    [data-reveal],
    .step-node,
    .step-connector,
    .lift-on-hover {
        animation: none !important;
        transition: none !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }

    .thread-line path {
        stroke-dashoffset: 0;
    }
}