/**
 * Hero Animation with Stacked Media Widget Styles
 * Pretpot Elementor Kit
 */

/* ============================================================
   FULL-BLEED FIX
   ============================================================ */
.elementor-widget-pretpot-hero-stacked-media {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: -5px !important;
    right: 0px !important;
    margin-left: -5px !important;
    margin-right: -5px !important;
}
.elementor-widget-pretpot-hero-stacked-media > .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    max-width: 100vw !important;
    width: 100vw !important;
}

/* Mobile & tablet: compensate for the left offset so right edge is flush */
@media (max-width: 1024px) {
    .elementor-widget-pretpot-hero-stacked-media {
        width: calc(100vw + 5px) !important;
        max-width: calc(100vw + 5px) !important;
        margin-right: 0 !important;
    }
    .elementor-widget-pretpot-hero-stacked-media > .elementor-widget-container {
        width: calc(100vw + 5px) !important;
        max-width: calc(100vw + 5px) !important;
    }
}

/* ============================================================
   WIDGET CONTAINER
   ============================================================ */
.pretpot-hero-stacked-media {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    box-sizing: border-box;
}

/* ============================================================
   BACKGROUND HEADING
   ============================================================ */
.pretpot-hsm-bg-heading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(3rem, 12vw, 10rem);
    font-weight: 900;
    color: rgba(255, 255, 255, 0.08);
    white-space: nowrap;
    z-index: 1;
    pointer-events: none;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1;
    transition: opacity var(--animation-duration, 1.2s) ease;
}
.pretpot-hero-stacked-media.expanded .pretpot-hsm-bg-heading {
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   PHASE 1 — STACK LAYER
   ============================================================ */
.pretpot-hsm-stack-container {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity var(--animation-duration, 1.2s) ease;
    pointer-events: auto;
}
.pretpot-hero-stacked-media.expanded .pretpot-hsm-stack-container {
    opacity: 0;
    pointer-events: none;
}

.pretpot-hsm-stack-inner {
    position: relative;
    width: var(--stack-width, 300px);
    height: var(--stack-height, 400px);
}

.pretpot-hsm-stack-item {
    position: absolute;
    inset: 0;
    border-radius: var(--item-radius, 8px);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.pretpot-hsm-stack-item img,
.pretpot-hsm-stack-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Default stacked final positions — applied after animation */
/* z-index ascends with child order: card 1 is bottom, card 4 is top.
   Each card that arrives later covers the previous one. */
.pretpot-hsm-stack-item:nth-child(1) {
    --final-transform: rotate(var(--rotate-1, -4deg)) translate(var(--translate-x-1, -8px), var(--translate-y-1, -6px));
    z-index: 1;
    transform: translateY(120%) scale(0.9);
    opacity: 0;
}
.pretpot-hsm-stack-item:nth-child(2) {
    --final-transform: rotate(var(--rotate-2, 2deg)) translate(var(--translate-x-2, 6px), var(--translate-y-2, 6px));
    z-index: 2;
    transform: translateY(120%) scale(0.9);
    opacity: 0;
}
.pretpot-hsm-stack-item:nth-child(3) {
    --final-transform: rotate(var(--rotate-3, -2deg)) translate(var(--translate-x-3, -4px), var(--translate-y-3, 10px));
    z-index: 3;
    transform: translateY(120%) scale(0.9);
    opacity: 0;
}
.pretpot-hsm-stack-item:nth-child(4) {
    --final-transform: rotate(var(--rotate-4, 3deg)) translate(var(--translate-x-4, 10px), var(--translate-y-4, -4px));
    z-index: 4;
    transform: translateY(120%) scale(0.9);
    opacity: 0;
}

/* Stacked in = card has landed in its final rotated position */
.pretpot-hsm-stack-item.stacked-in {
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                opacity   0.35s ease;
    opacity: 1;
}
.pretpot-hsm-stack-item:nth-child(1).stacked-in { transform: var(--final-transform); }
.pretpot-hsm-stack-item:nth-child(2).stacked-in { transform: var(--final-transform); }
.pretpot-hsm-stack-item:nth-child(3).stacked-in { transform: var(--final-transform); }
.pretpot-hsm-stack-item:nth-child(4).stacked-in { transform: var(--final-transform); }

/* ============================================================
   PHASE 2 — COLUMNS LAYER
   CRITICAL FIX: Columns must have explicit dimensions
   ============================================================ */
.pretpot-hsm-columns {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    margin: 0;
    padding: 0;
}

.pretpot-hsm-column {
    flex: 1 1 0%;
    min-width: 0;
    height: 100%;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--animation-duration, 1.2s) ease;
    margin: 0;
    padding: 0;
}

.pretpot-hsm-column:nth-child(1) { transition-delay: 0ms; }
.pretpot-hsm-column:nth-child(2) { transition-delay: var(--stagger-delay, 150ms); }
.pretpot-hsm-column:nth-child(3) { transition-delay: calc(var(--stagger-delay, 150ms) * 2); }
.pretpot-hsm-column:nth-child(4) { transition-delay: calc(var(--stagger-delay, 150ms) * 3); }

.pretpot-hero-stacked-media.expanded .pretpot-hsm-column {
    opacity: 1;
}

/* CRITICAL FIX: Media fills entire column - using aspect-ratio hack */
.pretpot-hsm-column img,
.pretpot-hsm-column video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    margin: 0;
    padding: 0;
    border: none;
}

/* Object Fit Variants */
.pretpot-hsm-fit-contain .pretpot-hsm-column img,
.pretpot-hsm-fit-contain .pretpot-hsm-column video {
    object-fit: contain;
    background: #000;
}
.pretpot-hsm-fit-fill .pretpot-hsm-column img,
.pretpot-hsm-fit-fill .pretpot-hsm-column video {
    object-fit: fill;
}

/* ============================================================
   DIMMED OVERLAY
   ============================================================ */
.pretpot-hsm-dimmed-overlay {
    position: absolute;
    inset: 0;
    background: var(--dimmed-color, rgba(0, 0, 0, 0.5));
    opacity: 0;
    transition: opacity var(--overlay-fade-duration, 0.8s) ease;
    z-index: 10;
    pointer-events: none;
}
.pretpot-hero-stacked-media.dimmed .pretpot-hsm-dimmed-overlay {
    opacity: 1;
}

/* ============================================================
   CONTENT OVERLAY
   ============================================================ */
.pretpot-hsm-content-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: var(--content-align, center);
    justify-content: var(--content-justify, center);
    z-index: 20;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--content-fade-duration, 0.8s) ease,
                transform var(--content-fade-duration, 0.8s) cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--content-delay, 1s);
    padding: var(--content-padding, 2rem);
    text-align: var(--content-text-align, center);
}
.pretpot-hero-stacked-media.show-content .pretpot-hsm-content-overlay {
    opacity: 1;
    transform: translateY(0);
}

.pretpot-hsm-title {
    font-size: var(--title-size, clamp(2rem, 5vw, 4rem));
    font-weight: var(--title-weight, 800);
    color: var(--title-color, #ffffff);
    margin: 0 0 var(--title-spacing, 1rem) 0;
    line-height: 1.2;
    max-width: 100%;
}

/* Typing effect variant — only when .typing-effect class is present */
.pretpot-hsm-title.typing-effect {
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid var(--title-color, #ffffff);
    animation: pretpot-hsm-typing 2s steps(30) forwards,
               pretpot-hsm-blink 0.75s step-end infinite;
    width: 0;
}
.pretpot-hero-stacked-media.show-content .pretpot-hsm-title.typing-effect {
    width: 100%;
}
/* Remove cursor after typing completes */
.pretpot-hsm-title.typing-done {
    border-right: none !important;
    animation: none !important;
}
@keyframes pretpot-hsm-typing {
    from { width: 0; }
    to   { width: 100%; }
}
@keyframes pretpot-hsm-blink {
    50% { border-color: transparent; }
}

@media (max-width: 768px) {
    .pretpot-hsm-title.typing-effect {
        white-space: normal;
        border: none;
        width: auto !important;
        animation: pretpot-hsm-fade-in 1s forwards;
    }
    @keyframes pretpot-hsm-fade-in {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

.pretpot-hsm-subtitle {
    font-size: var(--subtitle-size, clamp(1rem, 2vw, 1.5rem));
    color: var(--subtitle-color, rgba(255, 255, 255, 0.85));
    margin: 0 0 var(--subtitle-spacing, 2rem) 0;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: calc(var(--content-delay, 1s) + 0.3s);
}
.pretpot-hero-stacked-media.show-content .pretpot-hsm-subtitle {
    opacity: 1;
    transform: translateY(0);
}

.pretpot-hsm-buttons {
    display: flex;
    gap: var(--button-gap, 1rem);
    flex-wrap: wrap;
    justify-content: var(--buttons-justify, center);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: calc(var(--content-delay, 1s) + 0.6s);
}
.pretpot-hero-stacked-media.show-content .pretpot-hsm-buttons {
    opacity: 1;
    transform: translateY(0);
}

.pretpot-hsm-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--button-padding-y, 1rem) var(--button-padding-x, 2rem);
    border-radius: var(--button-radius, 50px);
    font-weight: var(--button-weight, 600);
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: var(--button-border-width, 2px) solid transparent;
    font-size: var(--button-font-size, 1rem);
    line-height: 1;
}
.pretpot-hsm-button-primary {
    background: var(--button-primary-bg, #ffffff);
    color: var(--button-primary-color, #000000);
    border-color: var(--button-primary-bg, #ffffff);
}
.pretpot-hsm-button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
    background: var(--button-primary-hover-bg, #f0f0f0);
}
.pretpot-hsm-button-secondary {
    background: var(--button-secondary-bg, transparent);
    color: var(--button-secondary-color, #ffffff);
    border-color: var(--button-secondary-border, rgba(255, 255, 255, 0.5));
}
.pretpot-hsm-button-secondary:hover {
    background: var(--button-secondary-hover-bg, rgba(255, 255, 255, 0.1));
    border-color: var(--button-secondary-color, #ffffff);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .pretpot-hsm-stack-inner {
        width: var(--stack-width-tablet, 250px);
        height: var(--stack-height-tablet, 340px);
    }
}
@media (max-width: 767px) {
    .pretpot-hsm-stack-inner {
        width: var(--stack-width-mobile, 200px);
        height: var(--stack-height-mobile, 280px);
    }
    .pretpot-hsm-title    { font-size: var(--title-size-mobile, clamp(1.5rem, 8vw, 2.5rem)); }
    .pretpot-hsm-subtitle { font-size: var(--subtitle-size-mobile, 1rem); }
    .pretpot-hsm-buttons  { flex-direction: column; align-items: stretch; }
    .pretpot-hsm-button   { width: 100%; }
}

/* ============================================================
   EDITOR MODE
   ============================================================ */
.elementor-editor-active .pretpot-hero-stacked-media {
    min-height: 600px;
}
.elementor-editor-active .pretpot-hsm-stack-item video,
.elementor-editor-active .pretpot-hsm-column video {
    pointer-events: none;
}

/* ============================================================
   ELEMENTOR FULL-WIDTH FIXES
   ============================================================ */
.elementor-section .elementor-container,
.elementor-top-section .elementor-container {
    max-width: 100% !important;
}

.elementor-section,
.elementor-top-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.elementor-column,
.elementor-top-column,
.elementor-column-gap-default > .elementor-column > .elementor-element-populated,
.elementor-column > .elementor-element-populated {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.elementor-widget-wrap,
.elementor-widget-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.e-con,
.e-con-boxed {
    padding-left: 0 !important;
    padding-right: 0 !important;
    --padding-left: 0 !important;
    --padding-right: 0 !important;
    --padding-inline-start: 0 !important;
    --padding-inline-end: 0 !important;
}

.e-con > .e-con-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.elementor-widget-pretpot-hero-stacked-media {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.elementor-widget-pretpot-hero-stacked-media .elementor-widget-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 100% !important;
}

.elementor-column-gap-default {
    --column-gap: 0 !important;
}