/*
 * Video Landing Page — landing-page.css
 * Centred brand video (same sizing as coming soon page) with click-to-shop navigation.
 */


:root {
    --vlp-video-max-width:  520px;

    /* Hint text */
    --vlp-font-family:      'Orbitron', 'Courier New', monospace;
    --vlp-hint-size:        clamp(0.55rem, 1.2vw, 0.75rem); /* fluid scaling */
    --vlp-hint-color:       rgba(0, 0, 0, 0.30);            /* dark, subtle on white bg */
    --vlp-hint-tracking:    0.35em;                          /* wide Orbitron tracking */

    /* Animation timing */
    --vlp-hint-delay:       2.5s;
    --vlp-hint-duration:    1.2s;
    --vlp-hint-fade-out:    0.4s;
    --vlp-video-appear:     1s;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

html {
    height: 100%;
}

body,
body.vlp-body {
    width:      100%;
    height:     100%;
    background: #fdfdfd;
    cursor:     pointer;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.vlp-click-overlay {
    position:        fixed;
    inset:           0;
    z-index:         10;
    display:         flex;
    flex-direction:  column;
    align-items:     center;      /* horizontal centering */
    justify-content: center;      /* vertical centering */
    min-height:      100vh;       /* fallback */
    min-height:      100svh;      /* accounts for mobile browser chrome */
    padding:         2rem 1.5rem;
    text-decoration: none;
    outline:         none;
    cursor:          pointer;
}

/* Focus ring — only on keyboard navigation, not mouse clicks */
.vlp-click-overlay:focus-visible {
    outline:        3px solid rgba(0, 0, 0, 0.45);
    outline-offset: -3px;
}

.vlp-video {
    width:          100%;
    max-width:      var(--vlp-video-max-width);
    height:         auto;
    display:        block;          /* removes inline baseline gap */
    object-fit:     contain;
    pointer-events: none;           /* pass all clicks to parent <a> */
    will-change:    opacity;
    animation:      vlp-video-appear var(--vlp-video-appear) ease-out both;
}

.vlp-hint {
    position:        absolute;
    bottom:          clamp(1.5rem, 5vh, 3rem);
    left:            50%;
    transform:       translateX(-50%);
    z-index:         2;

    font-family:     var(--vlp-font-family);
    font-size:       var(--vlp-hint-size);
    font-weight:     400;
    color:           var(--vlp-hint-color);
    letter-spacing:  var(--vlp-hint-tracking);
    text-transform:  lowercase;
    white-space:     nowrap;
    opacity:         0;
    animation:       vlp-hint-appear var(--vlp-hint-duration) ease-out var(--vlp-hint-delay) both;
    will-change:     opacity, transform;
    transition:      opacity var(--vlp-hint-fade-out) ease;

    user-select:         none;
    -webkit-user-select: none;
    pointer-events:      none;
}

.vlp-click-overlay:hover .vlp-hint,
.vlp-click-overlay:focus .vlp-hint {
    opacity: 0;
}

@keyframes vlp-video-appear {
    from {
        opacity:   0;
        transform: translateY(12px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}

@keyframes vlp-hint-appear {
    from {
        opacity:   0;
        transform: translateX(-50%) translateY(8px);
    }
    to {
        opacity:   1;
        transform: translateX(-50%) translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .vlp-video {
        animation: none;
        opacity:   1;
        transform: none;
    }

    .vlp-hint {
        animation:  none;
        opacity:    1;
        transform:  translateX(-50%) translateY(0);
        transition: none;
    }
}

.admin-bar .vlp-click-overlay {
    top:    32px;
    height: calc(100% - 32px);
}

@media screen and (max-width: 782px) {
    .admin-bar .vlp-click-overlay {
        top:    46px;
        height: calc(100% - 46px);
    }
}

@media (min-width: 1200px) {
    :root {
        --vlp-video-max-width: 580px;
    }
}

@media (max-width: 768px) {
    :root {
        --vlp-video-max-width: 380px;
    }
    .vlp-click-overlay {
        padding: 1.5rem 1rem;
    }
}

@media (max-width: 480px) {
    :root {
        --vlp-video-max-width: 280px;
    }
    .vlp-click-overlay {
        padding: 1.25rem 1rem;
    }
}