/* ═══════════════════════════════════════════════════════════════
   GSAP Hero Video — Widget Styles
   All rules scoped to .hsv to avoid Elementor conflicts.
═══════════════════════════════════════════════════════════════ */

/* ── Elementor widget container reset ───────────────────────── */
.elementor-widget-container:has(> .hsv) {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    line-height: 0;
    font-size: 0;
}

/* ── CSS Custom Properties ──────────────────────────────────────
   --bg is the only plugin-defined color. --cream and --gold are
   intentionally absent — they inherit from the site's global CSS
   so the widget blends naturally with the theme.
─────────────────────────────────────────────────────────────── */
.hsv {
    --bg: #07080b;

    /* Opacity variants — resolve from whatever --cream/--gold the site provides */
    --cream-60: color-mix(in srgb, var(--cream) 60%, transparent);
    --cream-30: color-mix(in srgb, var(--cream) 30%, transparent);
    --cream-12: color-mix(in srgb, var(--cream) 12%, transparent);
    --cream-06: color-mix(in srgb, var(--cream)  6%, transparent);
    --gold-40:  color-mix(in srgb, var(--gold)  40%, transparent);
    --gold-12:  color-mix(in srgb, var(--gold)  12%, transparent);
    --border:   color-mix(in srgb, var(--cream)  7%, transparent);

    /* Indicator — defaults to site accent, overridable per-instance */
    --indicator: var(--gold);

    /* Button colors — cascade from site vars, overridable via Elementor controls */
    --btn-fill-bg:              var(--cream);
    --btn-fill-color:           var(--bg);
    --btn-fill-bg-hover:        var(--gold);
    --btn-fill-color-hover:     var(--bg);
    --btn-fill-border-color:       transparent;
    --btn-fill-border-color-hover: transparent;
    --btn-fill-border-style:    solid;
    --btn-outline-bg:           transparent;
    --btn-outline-color:        var(--cream-60);
    --btn-outline-border:       var(--cream-12);
    --btn-outline-bg-hover:     transparent;
    --btn-outline-color-hover:  var(--gold);
    --btn-outline-border-hover: var(--gold-40);
    --btn-outline-border-style: solid;

    /* Mobile nav buttons */
    --nav-color:        var(--cream);
    --nav-bg:           var(--cream-12);
    --nav-border:       var(--cream-30);
    --nav-border-style: solid;

    /* Overlay */
    --vignette-left-w:   15%;
    --vignette-top-o:    0.50;
    --vignette-bottom-o: 0.55;

    line-height: normal;
    font-size: 16px;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

.hsv *,
.hsv *::before,
.hsv *::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

/* ════════════════════════════════════════════════════════════
   HERO SECTION
════════════════════════════════════════════════════════════ */

/* Viewport wrapper — always full screen, stays pinned while
   the user scrolls through the widget's scroll zone.
   Flex-centers the inner .hero so it appears centered in the
   viewport even when its height is less than 100dvh.
   No background here — .hero carries its own background so
   the areas above/below a smaller hero are transparent. */
.hsv .hsv__viewport {
    height: 100dvh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Inner hero — configurable height (default 100dvh = full screen).
   Centered by the viewport wrapper above.
   width: 100% so it spans the full viewport width regardless
   of the viewport's flex-centering. */
.hsv .hero {
    height: 100dvh;
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: var(--bg);
    display: flex;
}

/* ── Left column ─────────────────────────────────────────── */
.hsv .hero-left {
    position: relative;
    z-index: 1;
    width: 42%;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    border-right: 1px solid var(--border);
    overflow: hidden;
}

/* Ambient glow */
.hsv .hero-left::before {
    content: '';
    position: absolute;
    top: 40%;
    left: 50%;
    width: 480px;
    height: 480px;
    transform: translate(-40%, -50%);
    background: radial-gradient(ellipse, color-mix(in srgb, var(--gold) 7%, transparent) 0%, transparent 65%);
    pointer-events: none;
}

/* ── Vertical timeline ───────────────────────────────────── */
.hsv .v-timeline {
    position: absolute;
    left: 2.25rem;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: var(--cream-12);
    z-index: 2;
}

.hsv .v-timeline-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: var(--indicator);
    transition: height 0.08s linear;
    border-radius: 1px;
}

.hsv .v-dot {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1px solid var(--cream-30);
    transition: background 0.35s, border-color 0.35s, transform 0.35s;
}

.hsv .v-dot.is-active {
    background: var(--indicator);
    border-color: var(--indicator);
    transform: translate(-50%, -50%) scale(1.55);
    box-shadow: 0 0 10px var(--gold-40);
}

/* ── Panels ──────────────────────────────────────────────── */
.hsv .panels {
    position: relative;
    flex: 1;
}

.hsv .panel {
    position: absolute;
    inset: 0;
    padding: 0 4rem 0 5.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.hsv .panel.is-active {
    pointer-events: auto;
}

/* Panel title */
.hsv .panel .panel-title {
    font-family: inherit;
    font-weight: 400;
    line-height: 1.1;
    color: var(--cream);
}

.hsv .panel .panel-title em {
    font-style: italic;
    font-weight: 600;
}

/* Panel description */
.hsv .panel p {
    font-family: inherit;
    font-weight: 300;
    line-height: 1.7;
    color: var(--cream-60);
    max-width: 36ch;
}

/* ── Buttons ─────────────────────────────────────────────── */
.hsv .btn-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* No text-transform — button casing is the site's responsibility */
.hsv .hsv__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.65rem 1.6rem; /* overridden per-button by Elementor padding controls */
    font-family: inherit;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-decoration: none;
    transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.18s;
    cursor: pointer;
}

.hsv .hsv__btn:active {
    transform: scale(0.97);
}

.hsv .hsv__btn--primary {
    background: var(--btn-fill-bg);
    color: var(--btn-fill-color);
    border-width: 1px;
    border-style: var(--btn-fill-border-style);
    border-color: var(--btn-fill-border-color);
}

.hsv .hsv__btn--primary:hover {
    background: var(--btn-fill-bg-hover);
    color: var(--btn-fill-color-hover);
    border-color: var(--btn-fill-border-color-hover);
}

.hsv .hsv__btn--secondary {
    background: var(--btn-outline-bg);
    color: var(--btn-outline-color);
    border-width: 1px;
    border-style: var(--btn-outline-border-style);
    border-color: var(--btn-outline-border);
}

.hsv .hsv__btn--secondary:hover {
    background: var(--btn-outline-bg-hover);
    border-color: var(--btn-outline-border-hover);
    color: var(--btn-outline-color-hover);
}

/* ── Bottom progress bar ─────────────────────────────────── */
.hsv .h-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--cream-06);
    z-index: 3;
}

.hsv .h-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--indicator);
    transition: width 0.08s linear;
}

/* ── Right: inline contained video ──────────────────────── */
.hsv .hero-right {
    flex: 1;
    position: relative;
    z-index: 0;
    overflow: hidden;
    background-color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Square (1:1) video — contained and centered within the column.
   object-fit: contain shows the full frame; letterbox areas show --bg. */
.hsv .hsv__video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.hsv .hsv__video--mobile { display: none; }

/* Left-side bleed */
.hsv .hero-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: var(--vignette-left-w);
    height: 100%;
    background: linear-gradient(to right, var(--bg), transparent);
    z-index: 1;
    pointer-events: none;
}

/* Top + bottom vignettes */
.hsv .hero-right::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--bg) calc(var(--vignette-top-o) * 100%), transparent) 0%,
        transparent 18%,
        transparent 80%,
        color-mix(in srgb, var(--bg) calc(var(--vignette-bottom-o) * 100%), transparent) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* ── Video loader ────────────────────────────────────────── */
.hsv .v-loader {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
}

.hsv .v-loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.hsv .v-loader-text {
    font-family: inherit;
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--cream-30);
}

.hsv .v-loader-bar {
    width: 100px;
    height: 1px;
    position: relative;
    overflow: hidden;
    background: var(--cream-12);
}

.hsv .v-loader-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--indicator);
    animation: hsv-loader-slide 1.1s ease-in-out infinite;
}

@keyframes hsv-loader-slide {
    0%   { left: -100%; }
    100% { left: 100%; }
}

/* Apple-style spinner */
@keyframes hsv-spin {
    to { transform: rotate(360deg); }
}

.hsv .v-loader-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--cream-12);
    border-top-color: var(--cream-60);
    animation: hsv-spin 0.75s linear infinite;
}

/* ── Timecode ────────────────────────────────────────────── */
.hsv .v-time {
    position: absolute;
    bottom: 1.5rem;
    right: 1.75rem;
    z-index: 5;
    font-family: inherit;
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    color: var(--cream-30);
}

/* ── Floating icon button ────────────────────────────────── */
@keyframes hsv-bounce {
    0%, 100% { transform: translateY(0);      animation-timing-function: ease-in;  }
    50%       { transform: translateY(-6px);   animation-timing-function: ease-out; }
}

.hsv .hsv__floating-icon {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--cream);
    text-decoration: none;
    transition: color 0.22s, background-color 0.22s;
    cursor: pointer;
    animation: hsv-bounce 2.4s ease-in-out infinite;
}

.hsv .hsv__floating-icon:hover {
    color: var(--gold);
    animation-play-state: paused;
}

.hsv .hsv__floating-icon:active {
    transform: translateY(0) scale(0.93);
}

/* SVG icons emitted by Icons_Manager */
.hsv .hsv__floating-icon svg {
    width: 1em;
    height: 1em;
    display: block;
    fill: currentColor;
}

/* ════════════════════════════════════════════════════════════
   VISIBILITY MODIFIERS
════════════════════════════════════════════════════════════ */
.hsv.hsv--no-timeline .v-timeline { display: none; }
.hsv.hsv--no-progress .h-progress { display: none; }
.hsv.hsv--no-timecode .v-time      { display: none; }

.hsv.hsv--no-timeline .panel {
    padding-left: 3rem;
}

/* Nav hidden on desktop — only shown in the mobile media query */
.hsv .hsv__nav { display: none; }

/* ════════════════════════════════════════════════════════════
   MOBILE  ≤768 px
   Video fills the hero as a background (object-fit: contain),
   content panel overlays it full-size and is vertically centred.
════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    .hsv .hsv__video--desktop { display: none; }
    .hsv .hsv__video--mobile  { display: block; }

    /* Content column — fills the full hero, sits above the video */
    .hsv .hero-left {
        width: 100%;
        height: 100%;
        background: transparent;
        border-right: none;
    }

    .hsv .hero-left::before { display: none; }

    .hsv .v-timeline { display: none; }

    /* Video — absolute background behind the content */
    .hsv .hero-right {
        position: absolute;
        inset: 0;
        flex: none;
        width: 100%;
        height: 100%;
    }

    .hsv .hsv__video {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* Left-side bleed not needed — video is a centred background */
    .hsv .hero-right::before { display: none; }

    .hsv .v-time {
        bottom: auto;
        top: 1rem;
        right: 1rem;
    }

    /* ── Mobile nav arrows ───────────────────────────────── */
    .hsv .hsv__nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        bottom: 2rem;
        left: 0;
        right: 0;
        padding: 0 1.75rem;
        z-index: 10;
        pointer-events: none;
    }

    .hsv .hsv__nav-btn {
        pointer-events: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        background: var(--nav-bg);
        color: var(--nav-color);
        border-width: 1px;
        border-style: var(--nav-border-style);
        border-color: var(--nav-border);
        border-radius: 50%;
        padding: 0.6rem;
        line-height: 1;
        cursor: pointer;
        transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.18s;
        -webkit-tap-highlight-color: transparent;
        appearance: none;
        -webkit-appearance: none;
        outline: none;
    }

    .hsv .hsv__nav-btn svg {
        width: 1em;
        height: 1em;
        display: block;
        fill: currentColor;
    }

    .hsv .hsv__nav-btn:active {
        transform: scale(0.93);
    }

    .hsv .hsv__nav-btn:disabled {
        opacity: 0.3;
        cursor: default;
        pointer-events: none;
    }

    /* ── Panels: CSS-only fade, no GSAP transforms ───────── */
    .hsv .panel {
        transform: none !important;
        transition: opacity 0.4s ease;
    }

    .hsv .panel.is-active {
        opacity: 1;
    }
}