/* ── TPC Interactive Hero Banner ────────────────────────────────── */

.tpc-ihb-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ── Main display ─────────────────────────────────────────────── */
.tpc-ihb-main-display {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.tpc-ihb-main-display img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* ── Thumbnail Lottie (injected by JS) ────────────────────────── */
.tpc-ihb-thumb-lottie {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.tpc-ihb-thumb-lottie svg {
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
}

/* ── Slot visibility ──────────────────────────────────────────── */
.tpc-ihb-slot-hidden {
    display: none !important;
}

/* ── Rocket launch keyframes ──────────────────────────────────── */

/* Exit: curves to upper-left, shrinks away */
@keyframes tpc-ihb-fly-out {
    0%   { transform: translate(0,      0)      scale(1);    opacity: 1;   }
    20%  { transform: translate(-5%,   -25vh)   scale(0.55); opacity: 0.7; }
    45%  { transform: translate(-28%,  -55vh)   scale(0.22); opacity: 0.35;}
    70%  { transform: translate(-70%,  -85vh)   scale(0.06); opacity: 0.1; }
    100% { transform: translate(-145%, -130vh)  scale(0.01); opacity: 0;   }
}

/* Enter: rises from below, slight overshoot, settles */
@keyframes tpc-ihb-fly-in {
    0%   { transform: translateY(160%) scale(0.15); opacity: 0;   }
    35%  { transform: translateY(15%)  scale(0.88); opacity: 1;   }
    62%  { transform: translateY(-8%)  scale(1.04); opacity: 1;   }
    80%  { transform: translateY(3%)   scale(0.98); opacity: 1;   }
    100% { transform: translateY(0)    scale(1);    opacity: 1;   }
}

/* ── Text animation keyframes ─────────────────────────────────── */
@keyframes tpc-ihb-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes tpc-ihb-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes tpc-ihb-slide-up-in {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes tpc-ihb-slide-up-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-24px); }
}

@keyframes tpc-ihb-slide-down-in {
    from { opacity: 0; transform: translateY(-24px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes tpc-ihb-slide-down-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(24px); }
}
