/* ==========================================================================
   MAK GSAP Slider — Frontend Styles
   ========================================================================== */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
.mak-gsap-wrapper {
    --mak-accent:    #C4A46B;
    --mak-height:    100vh;
    --ov-r:          10;
    --ov-g:          7;
    --ov-b:          5;
    --ov-strength:   0.82;
    --transition:    0.35s ease;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.mak-gsap-wrapper {
    position: relative;
    width: 100%;
    height: var(--mak-height, 100vh);
    overflow: hidden;
    perspective: 1000px;
}

/* ── Track ───────────────────────────────────────────────────────────────── */
.mak-gsap-track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ── Individual Slide ────────────────────────────────────────────────────── */
.mak-gsap-slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none; /* inactive slides must not eat clicks from the active slide below */
    background-color: #0A0705; /* fallback so empty slides don't reveal page below */
}

.mak-gsap-slide.is-active {
    pointer-events: auto;
}


/* Raw content dropped directly into a slide (not inside a layer) sits above
   the overlay automatically. Layers keep their own absolute positioning. */
.mak-gsap-slide > *:not(.mak-gsap-slide__bg):not(.mak-gsap-layer) {
    position: relative;
    z-index: 2;
}

/* ── Background image layer ──────────────────────────────────────────────── */
.mak-gsap-slide__bg {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    pointer-events: none;
    will-change: transform;
    z-index: 0;
}

/* ── Gradient overlay ────────────────────────────────────────────────────── */
.mak-gsap-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(var(--ov-r), var(--ov-g), var(--ov-b), calc(var(--ov-strength) * 1.07)) 0%,
        rgba(var(--ov-r), var(--ov-g), var(--ov-b), calc(var(--ov-strength) * 0.55)) 32%,
        rgba(var(--ov-r), var(--ov-g), var(--ov-b), calc(var(--ov-strength) * 0.13)) 62%,
        transparent 82%
    );
    pointer-events: none;
}

/* Left side shadow */
.mak-gsap-slide.has-side-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to right,
        rgba(var(--ov-r), var(--ov-g), var(--ov-b), calc(var(--ov-strength) * 0.40)) 0%,
        transparent 52%
    );
    pointer-events: none;
}

/* ── Layers ──────────────────────────────────────────────────────────────── */
.mak-gsap-layer {
    position: absolute;
    z-index: 2;
}


/* ── Dots ────────────────────────────────────────────────────────────────── */
.mak-gsap-dots {
    position: absolute;
    bottom: var(--mak-dots-bottom, 5.5vh);
    left: 50%;
    top: auto;
    width: auto;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mak-dot-gap, 7px);
}

.mak-gsap-dots .mak-gsap-dot {
    width: var(--mak-dot-w, 22px);
    height: var(--mak-dot-h, 2px);
    border-radius: 0;
    background: var(--mak-dot-color, rgba(245, 240, 234, 0.30));
    display: block;
    flex-shrink: 0;
    transition: background 0.3s, width 0.3s;
    cursor: pointer;
    border: none;
    padding: 0;
}

.mak-gsap-dots .mak-gsap-dot--active {
    background: var(--mak-dot-active-color, var(--mak-accent));
    width: var(--mak-dot-active-w, 38px);
}

/* ── Counter ─────────────────────────────────────────────────────────────── */
.mak-gsap-counter {
    position: absolute;
    top:    var(--mak-counter-top,    auto);
    right:  var(--mak-counter-right,  auto);
    bottom: var(--mak-counter-bottom, 5.5vh);
    left:   var(--mak-counter-left,   auto);
    transform: var(--mak-counter-translate, none);
    z-index: 10;
    font-size: var(--mak-counter-size, 11px);
    letter-spacing: var(--mak-counter-letter-spacing, 0.20em);
    color: var(--mak-counter-color, rgba(245, 240, 234, 0.40));
    font-weight: var(--mak-counter-weight, 300);
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 0;
}

.mak-gsap-counter__current {
    font-size: var(--mak-counter-current-size, 15px);
    color: var(--mak-counter-current-color, var(--mak-accent));
    font-weight: var(--mak-counter-current-weight, 400);
}

.mak-gsap-counter__sep {
    color: var(--mak-counter-color, rgba(245, 240, 234, 0.40));
    white-space: pre;
}

.mak-gsap-counter__total {
    color: var(--mak-counter-total-color, var(--mak-counter-color));
    font-weight: var(--mak-counter-weight, 300);
}

/* ── Counter — Vertical (stacked) ───────────────────────────────────────── */
.mak-gsap-counter[data-layout="vertical"] {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}
.mak-gsap-counter[data-layout="vertical"] .mak-gsap-counter__sep {
    /* In vertical mode the separator becomes a visual divider — strip
       inline whitespace from the user's separator and let pseudo-element
       handle spacing. */
    line-height: 1;
    padding: 2px 0;
}

/* ── Counter — Fraction (large current, small total stacked right) ───────── */
.mak-gsap-counter[data-layout="fraction"] {
    align-items: stretch;
    gap: 6px;
}
.mak-gsap-counter[data-layout="fraction"] .mak-gsap-counter__current {
    font-size: calc(var(--mak-counter-current-size, 15px) * 2);
    line-height: 1;
}
.mak-gsap-counter[data-layout="fraction"] .mak-gsap-counter__sep,
.mak-gsap-counter[data-layout="fraction"] .mak-gsap-counter__total {
    align-self: flex-end;
    line-height: 1;
}
.mak-gsap-counter[data-layout="fraction"] .mak-gsap-counter__sep {
    align-self: center;
    transform: rotate(-15deg);
    padding: 0 2px;
}

/* ── Arrows ──────────────────────────────────────────────────────────────── */
.mak-gsap-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    background: var(--mak-arrow-bg, rgba(245, 240, 234, 0.08));
    border: 1px solid var(--mak-arrow-border-color, rgba(196, 164, 107, 0.35));
    border-radius: var(--mak-arrow-radius, 0);
    color: var(--mak-arrow-color, var(--mak-accent));
    width: var(--mak-arrow-size, 48px);
    height: var(--mak-arrow-size, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--mak-arrow-icon-size, 18px);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.mak-gsap-arrow:hover {
    background: rgba(196, 164, 107, 0.18);
    border-color: var(--mak-accent);
}

.mak-gsap-arrow--prev { left: var(--mak-arrow-offset, 2.5vw); }
.mak-gsap-arrow--next { right: var(--mak-arrow-offset, 2.5vw); }

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .mak-gsap-counter { bottom: 2.5vh; right: 5vw; }
    .mak-gsap-dots { bottom: 2.5vh; }
    .mak-gsap-slide.has-side-overlay::after {
        background: linear-gradient(
            to right,
            rgba(var(--ov-r), var(--ov-g), var(--ov-b), calc(var(--ov-strength) * 0.20)) 0%,
            transparent 70%
        );
    }
    .mak-gsap-arrow { width: 40px; height: 40px; font-size: 15px; }
}

@media (max-width: 480px) {
    .mak-gsap-counter { display: none; }
}

/* ==========================================================================
   3D / Depth Utility Classes
   --------------------------------------------------------------------------
   Add any of these as a CSS class on any Bricks element (Style → CSS classes)
   to give it an embossed / engraved / glass / 3D appearance. They work
   anywhere on the page — inside a slide, in a layer, or on standalone
   elements. Tuned for dark backgrounds (typical hero context).
   ========================================================================== */

/* ── Surfaces (apply to containers, cards, dividers) ─────────────────────── */

.mak-fx-emboss {
    box-shadow:
        inset 1px 1px 0 rgba(255, 255, 255, 0.18),
        inset -1px -1px 0 rgba(0, 0, 0, 0.35),
        0 4px 14px rgba(0, 0, 0, 0.30);
}

.mak-fx-emboss-deep {
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, 0.22),
        inset -2px -2px 0 rgba(0, 0, 0, 0.45),
        0 8px 24px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(0, 0, 0, 0.12);
}

.mak-fx-engrave {
    box-shadow:
        inset 2px 2px 5px rgba(0, 0, 0, 0.45),
        inset -1px -1px 0 rgba(255, 255, 255, 0.10);
}

.mak-fx-card-3d {
    box-shadow:
        0 1px 1px  rgba(0, 0, 0, 0.18),
        0 2px 2px  rgba(0, 0, 0, 0.18),
        0 4px 4px  rgba(0, 0, 0, 0.16),
        0 8px 8px  rgba(0, 0, 0, 0.14),
        0 16px 16px rgba(0, 0, 0, 0.12),
        0 32px 32px rgba(0, 0, 0, 0.10);
}

.mak-fx-glass {
    background: rgba(245, 240, 234, 0.06);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
            backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(245, 240, 234, 0.14);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.mak-fx-glass-gold {
    background: linear-gradient(135deg,
        rgba(196, 164, 107, 0.12) 0%,
        rgba(196, 164, 107, 0.04) 100%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
            backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(196, 164, 107, 0.35);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(196, 164, 107, 0.30);
}

.mak-fx-glow-accent {
    box-shadow:
        0 0 0 1px rgba(196, 164, 107, 0.28),
        0 0 40px  rgba(196, 164, 107, 0.35),
        0 0 90px  rgba(196, 164, 107, 0.18);
}

/* ── Borders (apply to elements with a border) ───────────────────────────── */

.mak-fx-border-bevel {
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-top-color: rgba(255, 255, 255, 0.35);
    border-left-color: rgba(255, 255, 255, 0.30);
    border-right-color: rgba(0, 0, 0, 0.40);
    border-bottom-color: rgba(0, 0, 0, 0.45);
}

.mak-fx-border-inset {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-top-color: rgba(0, 0, 0, 0.45);
    border-left-color: rgba(0, 0, 0, 0.40);
    border-right-color: rgba(255, 255, 255, 0.20);
    border-bottom-color: rgba(255, 255, 255, 0.25);
}

.mak-fx-border-double-emboss {
    border: 1px solid rgba(196, 164, 107, 0.45);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 0 1px rgba(196, 164, 107, 0.15);
}

/* ── Type effects (apply to headings, text) ──────────────────────────────── */

.mak-fx-text-raised {
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25),
        0 -1px 0 rgba(0, 0, 0, 0.55);
}

.mak-fx-text-letterpress {
    color: rgba(245, 240, 234, 0.85);
    text-shadow:
        0 -1px 0 rgba(0, 0, 0, 0.65),
        0 1px 0 rgba(255, 255, 255, 0.10);
}

.mak-fx-text-3d {
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.45),
        0 2px 0 rgba(0, 0, 0, 0.40),
        0 3px 0 rgba(0, 0, 0, 0.35),
        0 4px 0 rgba(0, 0, 0, 0.30),
        0 5px 0 rgba(0, 0, 0, 0.25),
        0 6px 8px rgba(0, 0, 0, 0.55);
}

.mak-fx-text-glow-accent {
    color: var(--mak-accent, #C4A46B);
    text-shadow:
        0 0 12px rgba(196, 164, 107, 0.55),
        0 0 28px rgba(196, 164, 107, 0.35);
}

.mak-fx-text-stroke {
    -webkit-text-stroke: 1px rgba(196, 164, 107, 0.85);
    color: transparent;
}

/* ── Interactive: lift on hover ──────────────────────────────────────────── */

.mak-fx-lift {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.mak-fx-lift:hover {
    transform: translateY(-4px);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.35),
        0 4px 10px  rgba(0, 0, 0, 0.20);
}

/* ── Bricks Builder canvas — stacked, all-visible editable layout ─────────── */
.mak-gsap-wrapper.is-builder {
    height: auto !important;
    overflow: visible !important;
    perspective: none;
}

.mak-gsap-wrapper.is-builder .mak-gsap-track {
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: auto;
}

.mak-gsap-wrapper.is-builder .mak-gsap-slide {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    transform: none !important;
    height: 100vh;
    min-height: 400px;
    outline: 2px dashed rgba(196, 164, 107, 0.4);
    outline-offset: -2px;
}

/* Hide nav UI in builder — they don't function during editing anyway */
.mak-gsap-wrapper.is-builder .mak-gsap-dots,
.mak-gsap-wrapper.is-builder .mak-gsap-counter,
.mak-gsap-wrapper.is-builder .mak-gsap-arrow {
    display: none !important;
}

/* ── Slide Indicator ─────────────────────────────────────────────────────── */

/* Frontend: sits above slides, user controls position via Bricks Style tab */
.mak-gsap-indicator {
    position: absolute;
    z-index: 10;
    inset: auto;
}

.mak-gsap-indicator__item {
    transition: var( --mak-indicator-transition, none );
}

/* Builder: overlay on first slide — same position as frontend, fully styleable in context */
.mak-gsap-wrapper.is-builder .mak-gsap-indicator {
    position: absolute !important;
    z-index: 20;
}

.mak-gsap-wrapper.is-builder .mak-gsap-indicator__item {
    outline: 1px dashed rgba(196, 164, 107, 0.35);
    outline-offset: 2px;
    min-height: 48px;
}

/* ── Indicator — Active / Inactive state styling ─────────────────────────── */
/*
 * CSS vars are emitted by the element only when the user has set a value.
 * When a var is absent the declaration resolves to its CSS initial/inherited
 * value (opacity→1, transform→none, background→transparent, color→inherited),
 * so items with no configured state styling are visually unchanged.
 * SVG fill: when the color var is absent the rule is invalid-at-computed-time,
 * which means the browser falls through to the SVG presentation attribute
 * (fill="…") — the icon's own color is preserved automatically.
 */
.mak-gsap-indicator__item.is-active,
.mak-gsap-indicator__item.is-inactive {
    transition: var(--mak-indicator-transition, none);
}

.mak-gsap-indicator .mak-gsap-indicator__item:nth-child(odd),
.mak-gsap-indicator > .mak-gsap-indicator__item:nth-child(odd) {
    translate: var(--mak-nudge-odd-x, 0px) var(--mak-nudge-odd-y, 0px) !important;
}

.mak-gsap-indicator .mak-gsap-indicator__item:nth-child(even),
.mak-gsap-indicator > .mak-gsap-indicator__item:nth-child(even) {
    translate: var(--mak-nudge-even-x, 0px) var(--mak-nudge-even-y, 0px) !important;
}

/* SVG inside indicator items must not collapse to inline default 15px.
 * No !important so Bricks Style tab settings on the SVG (#brxe-XXX) can win. */
.mak-gsap-indicator .mak-gsap-indicator__item svg,
.mak-gsap-indicator > .mak-gsap-indicator__item svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Sensible default size for items that don't have explicit dimensions.
 * User can override via Bricks Style tab (which generates higher-specificity
 * #brxe-XXXXXX rules that beat these class selectors). */
.mak-gsap-indicator .mak-gsap-indicator__item,
.mak-gsap-indicator > .mak-gsap-indicator__item {
    flex-shrink: 0;
    flex-grow: 0;
    width: 32px;
    height: 32px;
}

.mak-gsap-indicator[data-item-gap="1"] .mak-gsap-indicator__item:not(:first-child),
.mak-gsap-indicator[data-item-gap="1"] > .mak-gsap-indicator__item:not(:first-child) {
    margin-left: var(--mak-item-gap-x, 0px) !important;
    margin-top:  var(--mak-item-gap-y, 0px) !important;
}