/**
 * VGT Motion Layer — section reveal, rail edge masks, tile hover chrome.
 * Tokens: --vgt-dur-*, --vgt-ease-out, --vgt-scrim-*, --vgt-radius-*, --vgt-shadow-tile,
 *         --vgt-rail-fade, --vgt-focus-ring
 */

/* --------------------------------------------------------------------------
   Section fade-in on IntersectionObserver (.is-inview)
   Only hides while html has .vgt-motion-ready (set by shell JS).
   -------------------------------------------------------------------------- */
html.vgt-motion-ready .vgt-section {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity var(--vgt-dur-3, 400ms) var(--vgt-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
        transform var(--vgt-dur-3, 400ms) var(--vgt-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

html.vgt-motion-ready .vgt-section.is-inview {
    opacity: 1;
    transform: none;
}

/* --------------------------------------------------------------------------
   Premium rail edge fade via mask-image (tokenized fade width)
   -------------------------------------------------------------------------- */
[data-vgt-rail] {
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 var(--vgt-rail-fade, 2.25rem),
        #000 calc(100% - var(--vgt-rail-fade, 2.25rem)),
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 var(--vgt-rail-fade, 2.25rem),
        #000 calc(100% - var(--vgt-rail-fade, 2.25rem)),
        transparent 100%
    );
}

/* Disable edge mask when rail does not overflow / at ends (JS toggles classes) */
[data-vgt-rail].is-at-start {
    -webkit-mask-image: linear-gradient(
        90deg,
        #000 0,
        #000 calc(100% - var(--vgt-rail-fade, 2.25rem)),
        transparent 100%
    );
    mask-image: linear-gradient(
        90deg,
        #000 0,
        #000 calc(100% - var(--vgt-rail-fade, 2.25rem)),
        transparent 100%
    );
}

[data-vgt-rail].is-at-end {
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 var(--vgt-rail-fade, 2.25rem),
        #000 100%
    );
    mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 var(--vgt-rail-fade, 2.25rem),
        #000 100%
    );
}

[data-vgt-rail].is-at-start.is-at-end,
[data-vgt-rail].is-no-overflow {
    -webkit-mask-image: none;
    mask-image: none;
}

/* --------------------------------------------------------------------------
   Tile hover play chrome — soft scrim + glass play disc
   -------------------------------------------------------------------------- */
.vgt-tile__media {
    position: relative;
}

.vgt-tile__overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    background: var(
        --vgt-scrim-tile,
        linear-gradient(0deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.22) 46%, transparent 78%)
    );
    background-color: rgba(0, 0, 0, 0.22);
    border-radius: inherit;
    transition: opacity var(--vgt-dur-2, 240ms) var(--vgt-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.vgt-tile__overlay .dashicons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    min-height: 3rem;
    font-size: 1.7rem;
    line-height: 1;
    color: #0a0a0f;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 22px var(--vgt-accent-glow, rgba(0, 243, 255, 0.22));
    transform: scale(0.88);
    transition:
        transform var(--vgt-dur-2, 240ms) var(--vgt-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
        box-shadow var(--vgt-dur-2, 240ms) var(--vgt-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.vgt-tile:hover .vgt-tile__overlay,
.vgt-tile:focus-visible .vgt-tile__overlay,
.vgt-tile.is-hover-expanded .vgt-tile__overlay {
    opacity: 1;
}

.vgt-tile:hover .vgt-tile__overlay .dashicons,
.vgt-tile:focus-visible .vgt-tile__overlay .dashicons,
.vgt-tile.is-hover-expanded .vgt-tile__overlay .dashicons {
    transform: scale(1);
}

/* Rail arrow end-states (JS toggles .is-hidden) */
.vgt-rail-arrow.is-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden;
}

.vgt-rail-arrow {
    transition:
        opacity var(--vgt-dur-2, 240ms) var(--vgt-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
        transform var(--vgt-dur-2, 240ms) var(--vgt-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
        background var(--vgt-dur-1, 120ms) var(--vgt-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
        color var(--vgt-dur-1, 120ms) var(--vgt-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
        box-shadow var(--vgt-dur-2, 240ms) var(--vgt-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
        border-color var(--vgt-dur-1, 120ms) ease,
        visibility var(--vgt-dur-2, 240ms);
}

/* Hero slide crossfade polish */
.vgt-hero__slide {
    transition: opacity var(--vgt-dur-4, 560ms) var(--vgt-ease-soft, cubic-bezier(0.33, 1, 0.68, 1));
}

.vgt-hero__dots button {
    transition:
        width var(--vgt-dur-2, 240ms) var(--vgt-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
        background var(--vgt-dur-2, 240ms) var(--vgt-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
        opacity var(--vgt-dur-1, 120ms) ease,
        box-shadow var(--vgt-dur-2, 240ms) ease;
}

/* --------------------------------------------------------------------------
   prefers-reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html.vgt-motion-ready .vgt-section {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .vgt-tile__overlay,
    .vgt-tile__overlay .dashicons,
    .vgt-rail-arrow,
    .vgt-hero__slide,
    .vgt-hero__dots button {
        transition: none;
    }

    [data-vgt-rail] {
        -webkit-mask-image: none;
        mask-image: none;
        scroll-behavior: auto;
    }
}