
/* ---------- ZERO SPACING BEFORE/AFTER MOTION SECTIONS ---------- */
body:has(.tmk-hero),
body:has(.tmk-scroll) {
    --wp--style--block-gap: 0px !important;
}

body:has(.tmk-hero) .entry-content > *:empty,
body:has(.tmk-hero) .wp-block-post-content > *:empty,
body:has(.tmk-scroll) .entry-content > *:empty,
body:has(.tmk-scroll) .wp-block-post-content > *:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:has(.tmk-hero) .entry-content,
body:has(.tmk-hero) .wp-block-post-content,
body:has(.tmk-hero) main#wp--skip-link--target,
body:has(.tmk-hero) .wp-site-blocks > main,
body:has(.tmk-scroll) .entry-content,
body:has(.tmk-scroll) .wp-block-post-content,
body:has(.tmk-scroll) main#wp--skip-link--target,
body:has(.tmk-scroll) .wp-site-blocks > main {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.tmk-hero.tmk-layout-fullscreen {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.tmk-scroll {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ---------- AUTOMATIC GUTENBERG CONTAINER BREAKOUT & STICKY FIX ---------- */
html:has(.tmk-scroll),
body:has(.tmk-hero.tmk-layout-fullscreen),
body:has(.tmk-scroll) {
    overflow-x: clip !important;
}

body:has(.tmk-hero.tmk-layout-fullscreen) .entry-content,
body:has(.tmk-hero.tmk-layout-fullscreen) .wp-block-post-content,
body:has(.tmk-hero.tmk-layout-fullscreen) .is-layout-constrained,
body:has(.tmk-scroll) main,
body:has(.tmk-scroll) .wp-site-blocks,
body:has(.tmk-scroll) .tis-frontpage-content,
body:has(.tmk-scroll) .tis-page-content,
body:has(.tmk-scroll) .entry-content,
body:has(.tmk-scroll) .wp-block-post-content,
body:has(.tmk-scroll) .is-layout-flow,
body:has(.tmk-scroll) .is-layout-constrained,
body:has(.tmk-scroll) .wp-block-group,
body:has(.tmk-scroll) .wp-block-shortcode,
body:has(.tmk-scroll) article {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    contain: none !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
}

.tmk-hero.tmk-layout-fullscreen {
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

/* TIS Motion Kit — Front-end styles (v0.2).
 *
 * Two layout modes (selected by .tmk-layout-fullscreen / .tmk-layout-section):
 *
 *   FULLSCREEN  : 100vw × 100vh with breakout. Used for the home page.
 *                  Independent of any parent container.
 *   SECTION     : Respects the parent container's max-width and the page
 *                  content area. Used for internal pages so the hero looks
 *                  like a regular content section, not a fullscreen takeover.
 *
 * Color/typography rules use !important because block themes (and Elementor)
 * apply heavy defaults that would otherwise override our visual identity.
 */

:root {
    --tmk-text: #ffffff;
    --tmk-text-muted: rgba(255, 255, 255, 0.92);
    --tmk-accent: #00b8cf;
    --tmk-accent-hover: #2dd4e8;
    --tmk-content-max-width: var(--wp--style--global--wide-size, 1320px);
}

.tmk-hero,
.tmk-hero * {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

.tmk-hero {
    position: relative;
    color: var(--tmk-text);
    background: #0c1128;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

/* ---------- LAYOUT: FULLSCREEN ---------- */
.tmk-hero.tmk-layout-fullscreen {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
    height: 100vh;
    height: 100svh;
}

/* /* max-height removed for true fullscreen takeover */ */
/*  */
/*  */
/*  */

/* ---------- LAYOUT: SECTION ---------- */
.tmk-hero.tmk-layout-section {
    width: 100%;
    min-height: 60vh;
    max-height: 720px;
    margin: 2rem 0;
    border-radius: 1rem;
}

.tmk-hero.tmk-layout-section.tmk-aspect-16-9 { aspect-ratio: 16 / 9; }
.tmk-hero.tmk-layout-section.tmk-aspect-9-16 { aspect-ratio: 9 / 16; }
.tmk-hero.tmk-layout-section.tmk-aspect-21-9 { aspect-ratio: 21 / 9; }
.tmk-hero.tmk-layout-section.tmk-aspect-4-3  { aspect-ratio: 4 / 3; }
.tmk-hero.tmk-layout-section.tmk-aspect-1-1  { aspect-ratio: 1 / 1; }

/* ---------- MEDIA ---------- */

.tmk-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.tmk-hero-video,
.tmk-hero-poster-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Vertical framing rules for hero & motion video */
.tmk-video-align-top,
.tmk-video-align-top .tmk-hero-video,
.tmk-video-align-top .tmk-hero-poster-fallback,
.tmk-hero-video.tmk-video-align-top,
.tmk-hero-poster-fallback.tmk-video-align-top {
    object-position: center top !important;
}

.tmk-video-align-center,
.tmk-video-align-center .tmk-hero-video,
.tmk-video-align-center .tmk-hero-poster-fallback,
.tmk-hero-video.tmk-video-align-center,
.tmk-hero-poster-fallback.tmk-video-align-center {
    object-position: center center !important;
}

.tmk-video-align-bottom,
.tmk-video-align-bottom .tmk-hero-video,
.tmk-video-align-bottom .tmk-hero-poster-fallback,
.tmk-hero-video.tmk-video-align-bottom,
.tmk-hero-poster-fallback.tmk-video-align-bottom {
    object-position: center bottom !important;
}

/* Poster sits behind the video; hidden when video plays. */
.tmk-hero-video {
    z-index: 1;
}
.tmk-hero-poster-fallback {
    z-index: 0;
    transition: opacity 0.4s ease;
}
.tmk-hero.tmk-video-playing .tmk-hero-poster-fallback {
    opacity: 0;
}

/* Mouse direction control toggles currentTime directly — no visual flip. */

.tmk-hero-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    pointer-events: none;
    z-index: 1;
}

/* ---------- CONTENT ---------- */

.tmk-hero-content {
    position: absolute;
    inset-inline: 0;
    z-index: 2;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    max-width: var(--tmk-content-max-width);
    margin-inline: auto;
    width: 100%;
    box-sizing: border-box;
}

.tmk-text-pos-top    { top: 8%; }
.tmk-text-pos-center { top: 50%; transform: translateY(-50%); }
.tmk-text-pos-bottom { bottom: 8%; }

.tmk-text-align-left   { text-align: left; }
.tmk-text-align-center { text-align: center; }
.tmk-text-align-right  { text-align: right; }

.tmk-hero-headline {
    color: var(--tmk-text) !important;
    font-size: clamp(2rem, 6vw, 5rem) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
    margin: 0 0 1.25rem 0 !important;
    text-wrap: balance;
    text-shadow: 0 4px 32px rgba(0, 0, 0, 0.75), 0 2px 4px rgba(0, 0, 0, 0.6);
    text-transform: none;
}

.tmk-hero-subheadline {
    color: var(--tmk-text-muted) !important;
    font-size: clamp(1rem, 1.8vw, 1.4rem) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    margin: 0 0 2rem 0 !important;
    max-width: 44rem;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
}

.tmk-text-align-center .tmk-hero-subheadline { margin-inline: auto !important; text-align: center !important; }
.tmk-text-align-left   .tmk-hero-subheadline { margin-inline: 0 auto !important; text-align: left !important; }
.tmk-text-align-right  .tmk-hero-subheadline { margin-inline: auto 0 !important; text-align: right !important; }

.tmk-hero-ctas {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.tmk-btn {
    display: inline-block;
    padding: 1rem 2rem !important;
    border-radius: 0.75rem !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none !important;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    border: 2px solid transparent;
    line-height: 1.2 !important;
}

.tmk-btn-primary {
    background: var(--tmk-accent);
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.tmk-btn-primary:hover {
    filter: brightness(1.12);
    transform: translateY(-3px);
}

.tmk-btn-secondary {
    background: transparent !important;
    color: var(--tmk-text) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
}
.tmk-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 640px) {
    .tmk-hero.tmk-layout-fullscreen { min-height: 80vh; min-height: 80svh; }
    .tmk-hero.tmk-layout-section { min-height: 50vh; max-height: 500px; }
    .tmk-hero-content { padding: 1.25rem; }
    .tmk-hero-ctas { flex-direction: column; align-items: stretch; width: 100%; }
    .tmk-btn { text-align: center; padding: 1rem 1.5rem !important; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    .tmk-btn,
    .tmk-hero-overlay,
    .tmk-hero-video {
        transition: none !important;
        animation: none !important;
    }
    /* In reduced motion the mouse-flip JS also bails out, so no override needed */
}


/* ---------- SCROLL VIDEO SECTION ---------- */

.tmk-scroll:not(.tmk-motion) {
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--tmk-scroll-h, 300vh);
    background: #0c1128;
    color: #fff;
    box-sizing: border-box !important;
}

.tmk-motion {
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    background: #0c1128;
    color: #fff;
    box-sizing: border-box !important;
}

.tmk-scroll-sticky {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
}

.tmk-scroll-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: #0c1128;
    background-repeat: no-repeat !important;
    overflow: hidden;
    will-change: background-position, background-size;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.tmk-scroll-poster-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0 !important;
    pointer-events: none;
    transition: opacity 0.5s ease-out;
}

.tmk-scroll-stage.tmk-sprite-loaded .tmk-scroll-poster-fallback,
.tmk-scroll-stage.tmk-video-loaded .tmk-scroll-poster-fallback {
    opacity: 0 !important;
    pointer-events: none !important;
}

.tmk-scroll-stage--video {
    overflow: hidden;
}

.tmk-scroll-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    z-index: 1 !important;
}

.tmk-scroll-captions {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.tmk-scroll-caption {
    position: absolute;
    top: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.75rem, 3.5vw, 2.75rem);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-50%) scale(0.95);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    width: 90%;
    max-width: 580px;
    box-sizing: border-box;
    background: var(--tmk-cap-bg, rgba(12, 17, 40, 0.72)) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 1.25rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(11, 160, 162, 0.12);
}

.tmk-scroll-caption.tmk-caption-visible {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.tmk-scroll-caption:hover {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(11, 160, 162, 0.28);
    border-color: rgba(11, 160, 162, 0.4);
}

.tmk-scroll-caption-title {
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 0.75rem 0;
    color: var(--tmk-cap-title-color, #ffffff) !important;
    -webkit-text-fill-color: var(--tmk-cap-title-color, #ffffff) !important;
    letter-spacing: -0.02em;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.tmk-scroll-caption:hover .tmk-scroll-caption-title {
    transform: translateY(-2px) scale(1.01);
    filter: drop-shadow(0 0 12px rgba(11, 160, 162, 0.4));
}

.tmk-scroll-caption-body {
    font-size: clamp(0.95rem, 1.3vw, 1.2rem);
    color: var(--tmk-cap-body-color, rgba(255, 255, 255, 0.9)) !important;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
}

.tmk-scroll-caption[data-align="left"],
.tmk-text-align-left .tmk-scroll-caption:not([data-align]) {
    left: var(--tmk-cap-offset, 8vw) !important;
    right: auto !important;
    transform: translateY(-50%) scale(0.95);
    text-align: left !important;
    align-items: flex-start !important;
}
.tmk-scroll-caption[data-align="left"].tmk-caption-visible,
.tmk-text-align-left .tmk-scroll-caption:not([data-align]).tmk-caption-visible {
    transform: translateY(-50%) scale(1);
}

.tmk-scroll-caption[data-align="center"],
.tmk-text-align-center .tmk-scroll-caption:not([data-align]) {
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) scale(0.95);
    text-align: center !important;
    align-items: center !important;
}
.tmk-scroll-caption[data-align="center"].tmk-caption-visible,
.tmk-text-align-center .tmk-scroll-caption:not([data-align]).tmk-caption-visible {
    transform: translate(-50%, -50%) scale(1);
}

.tmk-scroll-caption[data-align="right"],
.tmk-text-align-right .tmk-scroll-caption:not([data-align]) {
    right: var(--tmk-cap-offset, 8vw) !important;
    left: auto !important;
    transform: translateY(-50%) scale(0.95);
    text-align: right !important;
    align-items: flex-end !important;
}
.tmk-scroll-caption[data-align="right"].tmk-caption-visible,
.tmk-text-align-right .tmk-scroll-caption:not([data-align]).tmk-caption-visible {
    transform: translateY(-50%) scale(1);
}

/* --- Admin sprite generator (Motion Kit Phase 2) ----------------------- */

/* --- Admin sprite generator (Motion Kit Phase 2) ----------------------- */
.tmk-sprite-box {
    margin-top: 12px;
}
.tmk-status {
    font-weight: 500;
}
.tmk-status[data-level="ok"]    { color: #008a20; }
.tmk-status[data-level="warn"]  { color: #996800; }
.tmk-status[data-level="error"] { color: #b32d2e; }
.tmk-status[data-level="info"]  { color: #50575e; }

#tmk-sprite-generator button.button-primary {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
}
#tmk-sprite-generator button.button-primary:hover {
    background: #135e96;
}
#tmk-sprite-generator button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---------- SCROLL CAPTIONS & ANIMATIONS ---------- */

.tmk-scroll-captions {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.tmk-scroll-caption {
    position: absolute;
    top: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.5rem, 3vw, 3rem);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    width: 90%;
    max-width: 560px;
    box-sizing: border-box;
}

.tmk-scroll-caption.tmk-caption-visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* --- Alignment Positioning --- */

/* LEFT Alignment */
.tmk-scroll-caption[data-align="left" i] {
    left: 8vw !important;
    right: auto !important;
    text-align: left !important;
    align-items: flex-start !important;
}

/* RIGHT Alignment */
.tmk-scroll-caption[data-align="right" i] {
    right: 8vw !important;
    left: auto !important;
    text-align: right !important;
    align-items: flex-end !important;
}

/* CENTER Alignment */
.tmk-scroll-caption[data-align="center" i],
.tmk-scroll-caption:not([data-align]) {
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    text-align: center !important;
    align-items: center !important;
}

/* ---------- TEXT MOUSE HOVER ANIMATION ---------- */
.tmk-hero-headline,
.tmk-hero-subheadline,
.tmk-scroll-caption-title,
.tmk-scroll-caption-body,
.tmk-hero-caption-title,
.tmk-hero-caption-body {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, text-shadow 0.35s ease, color 0.35s ease !important;
    cursor: pointer;
}

.tmk-hero-headline:hover,
.tmk-scroll-caption-title:hover,
.tmk-hero-caption-title:hover {
    transform: scale(1.03) translateY(-3px) !important;
    opacity: 0.95 !important;
    text-shadow: 0 10px 35px rgba(0, 184, 207, 0.7), 0 2px 10px rgba(0, 0, 0, 0.9) !important;
}

.tmk-hero-subheadline:hover,
.tmk-scroll-caption-body:hover,
.tmk-hero-caption-body:hover {
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}


/* --- ANIMATION MODES --- */

/* 0. PARALLAX ANIMATION (Desciende con el Scroll + Smooth Fade) */
[data-caption-anim="parallax"] .tmk-scroll-caption[data-align="left" i],
.tmk-scroll[data-caption-anim="parallax"] .tmk-scroll-caption[data-align="left" i],
[data-caption-anim="parallax"] .tmk-scroll-caption[data-align="right" i],
.tmk-scroll[data-caption-anim="parallax"] .tmk-scroll-caption[data-align="right" i] {
    transform: translate3d(0, calc(-50% - 70px), 0) scale(0.96);
}
[data-caption-anim="parallax"] .tmk-scroll-caption[data-align="left" i].tmk-caption-visible,
.tmk-scroll[data-caption-anim="parallax"] .tmk-scroll-caption[data-align="left" i].tmk-caption-visible,
[data-caption-anim="parallax"] .tmk-scroll-caption[data-align="right" i].tmk-caption-visible,
.tmk-scroll[data-caption-anim="parallax"] .tmk-scroll-caption[data-align="right" i].tmk-caption-visible {
    transform: translate3d(0, -50%, 0) scale(1);
}

[data-caption-anim="parallax"] .tmk-scroll-caption[data-align="center" i],
.tmk-scroll[data-caption-anim="parallax"] .tmk-scroll-caption[data-align="center" i],
[data-caption-anim="parallax"] .tmk-scroll-caption:not([data-align]),
.tmk-scroll[data-caption-anim="parallax"] .tmk-scroll-caption:not([data-align]) {
    transform: translate3d(-50%, calc(-50% - 70px), 0) scale(0.96);
}
[data-caption-anim="parallax"] .tmk-scroll-caption[data-align="center" i].tmk-caption-visible,
.tmk-scroll[data-caption-anim="parallax"] .tmk-scroll-caption[data-align="center" i].tmk-caption-visible,
[data-caption-anim="parallax"] .tmk-scroll-caption:not([data-align]).tmk-caption-visible,
.tmk-scroll[data-caption-anim="parallax"] .tmk-scroll-caption:not([data-align]).tmk-caption-visible {
    transform: translate3d(-50%, -50%, 0) scale(1);
}


/* 1. HORIZONTAL ANIMATION (Slide Lateral + Fade) */
[data-caption-anim="horizontal"] .tmk-scroll-caption[data-align="left" i],
.tmk-scroll[data-caption-anim="horizontal"] .tmk-scroll-caption[data-align="left" i] {
    transform: translate3d(-80px, -50%, 0);
}
[data-caption-anim="horizontal"] .tmk-scroll-caption[data-align="left" i].tmk-caption-visible,
.tmk-scroll[data-caption-anim="horizontal"] .tmk-scroll-caption[data-align="left" i].tmk-caption-visible {
    transform: translate3d(0, -50%, 0);
}

[data-caption-anim="horizontal"] .tmk-scroll-caption[data-align="right" i],
.tmk-scroll[data-caption-anim="horizontal"] .tmk-scroll-caption[data-align="right" i] {
    transform: translate3d(80px, -50%, 0);
}
[data-caption-anim="horizontal"] .tmk-scroll-caption[data-align="right" i].tmk-caption-visible,
.tmk-scroll[data-caption-anim="horizontal"] .tmk-scroll-caption[data-align="right" i].tmk-caption-visible {
    transform: translate3d(0, -50%, 0);
}

[data-caption-anim="horizontal"] .tmk-scroll-caption[data-align="center" i],
.tmk-scroll[data-caption-anim="horizontal"] .tmk-scroll-caption[data-align="center" i] {
    transform: translate3d(calc(-50% - 80px), -50%, 0);
}
[data-caption-anim="horizontal"] .tmk-scroll-caption[data-align="center" i].tmk-caption-visible,
.tmk-scroll[data-caption-anim="horizontal"] .tmk-scroll-caption[data-align="center" i].tmk-caption-visible {
    transform: translate3d(-50%, -50%, 0);
}


/* 2. VERTICAL ANIMATION (Slide Arriba-Abajo + Fade) */
[data-caption-anim="vertical"] .tmk-scroll-caption[data-align="left" i],
.tmk-scroll[data-caption-anim="vertical"] .tmk-scroll-caption[data-align="left" i],
[data-caption-anim="vertical"] .tmk-scroll-caption[data-align="right" i],
.tmk-scroll[data-caption-anim="vertical"] .tmk-scroll-caption[data-align="right" i] {
    transform: translate3d(0, calc(-50% + 60px), 0);
}
[data-caption-anim="vertical"] .tmk-scroll-caption[data-align="left" i].tmk-caption-visible,
.tmk-scroll[data-caption-anim="vertical"] .tmk-scroll-caption[data-align="left" i].tmk-caption-visible,
[data-caption-anim="vertical"] .tmk-scroll-caption[data-align="right" i].tmk-caption-visible,
.tmk-scroll[data-caption-anim="vertical"] .tmk-scroll-caption[data-align="right" i].tmk-caption-visible {
    transform: translate3d(0, -50%, 0);
}

[data-caption-anim="vertical"] .tmk-scroll-caption[data-align="center" i],
.tmk-scroll[data-caption-anim="vertical"] .tmk-scroll-caption[data-align="center" i] {
    transform: translate3d(-50%, calc(-50% + 60px), 0);
}
[data-caption-anim="vertical"] .tmk-scroll-caption[data-align="center" i].tmk-caption-visible,
.tmk-scroll[data-caption-anim="vertical"] .tmk-scroll-caption[data-align="center" i].tmk-caption-visible {
    transform: translate3d(-50%, -50%, 0);
}


/* 3. FADE ANIMATION (Pure Fade + Smooth Scale) */
[data-caption-anim="fade"] .tmk-scroll-caption[data-align="left" i],
.tmk-scroll[data-caption-anim="fade"] .tmk-scroll-caption[data-align="left" i],
[data-caption-anim="fade"] .tmk-scroll-caption[data-align="right" i],
.tmk-scroll[data-caption-anim="fade"] .tmk-scroll-caption[data-align="right" i] {
    transform: translate3d(0, -50%, 0) scale(0.92);
}
[data-caption-anim="fade"] .tmk-scroll-caption[data-align="left" i].tmk-caption-visible,
.tmk-scroll[data-caption-anim="fade"] .tmk-scroll-caption[data-align="left" i].tmk-caption-visible,
[data-caption-anim="fade"] .tmk-scroll-caption[data-align="right" i].tmk-caption-visible,
.tmk-scroll[data-caption-anim="fade"] .tmk-scroll-caption[data-align="right" i].tmk-caption-visible {
    transform: translate3d(0, -50%, 0) scale(1);
}

[data-caption-anim="fade"] .tmk-scroll-caption[data-align="center" i],
.tmk-scroll[data-caption-anim="fade"] .tmk-scroll-caption[data-align="center" i] {
    transform: translate3d(-50%, -50%, 0) scale(0.92);
}
[data-caption-anim="fade"] .tmk-scroll-caption[data-align="center" i].tmk-caption-visible,
.tmk-scroll[data-caption-anim="fade"] .tmk-scroll-caption[data-align="center" i].tmk-caption-visible {
    transform: translate3d(-50%, -50%, 0) scale(1);
}
/* --- Captions Offsets (Balanced between edge & center) --- */
.tmk-scroll-caption[data-align="left" i] {
    left: var(--tmk-cap-offset, 8vw) !important;
    right: auto !important;
    text-align: left !important;
    align-items: flex-start !important;
}

.tmk-scroll-caption[data-align="right" i] {
    right: var(--tmk-cap-offset, 8vw) !important;
    left: auto !important;
    text-align: right !important;
    align-items: flex-end !important;
}

/* --- CAPTION SIZE MODES --- */

/* Normal */
[data-caption-size="normal"] .tmk-scroll-caption-title {
    font-size: clamp(1.25rem, 2.5vw, 2.5rem) !important;
}
[data-caption-size="normal"] .tmk-scroll-caption-body {
    font-size: clamp(0.85rem, 1.2vw, 1.1rem) !important;
}

/* Large (Default) */
[data-caption-size="large"] .tmk-scroll-caption-title {
    font-size: clamp(1.75rem, 3.5vw, 3.5rem) !important;
}
[data-caption-size="large"] .tmk-scroll-caption-body {
    font-size: clamp(1rem, 1.5vw, 1.25rem) !important;
}

/* X-Large */
[data-caption-size="xlarge"] .tmk-scroll-caption-title {
    font-size: clamp(2.25rem, 4.5vw, 4.5rem) !important;
}
[data-caption-size="xlarge"] .tmk-scroll-caption-body {
    font-size: clamp(1.15rem, 1.8vw, 1.5rem) !important;
}


/* --- CAPTION CARD STYLES --- */

/* Glassmorphism (Default) */
[data-caption-style="glass"] .tmk-scroll-caption {
    background: var(--tmk-cap-bg, rgba(12, 17, 40, 0.6)) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 1.25rem !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
}

/* Shadow (Clean with box shadow) */
[data-caption-style="shadow"] .tmk-scroll-caption {
    background: var(--tmk-cap-bg, rgba(0, 0, 0, 0.35)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 1.25rem !important;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6) !important;
}

/* Dark (Solid Contrast Card) */
[data-caption-style="dark"] .tmk-scroll-caption {
    background: var(--tmk-cap-bg, rgba(12, 17, 40, 0.9)) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 1.25rem !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

/* None / Clean (Transparent text-only) */
[data-caption-style="none"] .tmk-scroll-caption,
[data-caption-style="clean"] .tmk-scroll-caption {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}
/* --- Caption Margins (Offset Variants) --- */
[data-caption-offset="narrow"] .tmk-scroll-caption[data-align="left" i] { left: 6vw !important; }
[data-caption-offset="narrow"] .tmk-scroll-caption[data-align="right" i] { right: 6vw !important; }

[data-caption-offset="balanced"] .tmk-scroll-caption[data-align="left" i] { left: 14vw !important; }
[data-caption-offset="balanced"] .tmk-scroll-caption[data-align="right" i] { right: 14vw !important; }

[data-caption-offset="wide"] .tmk-scroll-caption[data-align="left" i] { left: 22vw !important; }
[data-caption-offset="wide"] .tmk-scroll-caption[data-align="right" i] { right: 22vw !important; }

/* Spacing for overlay headers */
.tmk-hero.tmk-layout-fullscreen .tmk-hero-content {
    padding-top: clamp(3.5rem, 8vw, 6.5rem) !important;
}



/* ---------- ENHANCED HERO ALIGNMENT & RESPONSIVE COLUMN RULES ---------- */
/* Match theme and template containers dynamically */
.tmk-hero-content {
    max-width: var(--tmk-container-width, var(--wp--style--global--wide-size, 1200px)) !important;
    padding-inline: var(--tmk-container-padding, 1.5rem) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
}

@media (max-width: 767px) {
    .tmk-hero-content {
        padding-inline: 1rem !important;
    }
}

/* Template: Full-width / Wide (1200px, 1.5rem padding) */
body:has(.tis-container--wide) .tmk-hero-content,
body.page-template-full-width .tmk-hero-content,
body[class*="full-width"] .tmk-hero-content,
.tis-container--wide .tmk-hero-content {
    max-width: 1200px !important;
    padding-inline: 1.5rem !important;
}
@media (max-width: 767px) {
    body:has(.tis-container--wide) .tmk-hero-content,
    body.page-template-full-width .tmk-hero-content,
    body[class*="full-width"] .tmk-hero-content,
    .tis-container--wide .tmk-hero-content {
        padding-inline: 1rem !important;
    }
}

/* Template: Default / Narrow container (720px, 1.5rem padding) */
body:has(.tis-container:not(.tis-container--wide)) .tmk-hero-content,
.tis-container:not(.tis-container--wide) .tmk-hero-content {
    max-width: 720px !important;
    padding-inline: 1.5rem !important;
}
@media (max-width: 767px) {
    body:has(.tis-container:not(.tis-container--wide)) .tmk-hero-content,
    .tis-container:not(.tis-container--wide) .tmk-hero-content {
        padding-inline: 1rem !important;
    }
}

/* Text alignment: LEFT */
.tmk-text-align-left {
    text-align: left !important;
}
.tmk-text-align-left .tmk-hero-headline {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-inline: 0 auto !important;
    max-width: min(850px, 100%) !important;
}
.tmk-text-align-left .tmk-hero-subheadline {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-inline: 0 auto !important;
    max-width: min(720px, 100%) !important;
}
.tmk-text-align-left .tmk-hero-rotating-captions {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-inline: 0 auto !important;
    width: 100% !important;
    max-width: min(850px, 100%) !important;
}
.tmk-text-align-left .tmk-hero-rotating-caption,
.tmk-text-align-left .tmk-hero-caption-title,
.tmk-text-align-left .tmk-hero-caption-body {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-inline: 0 auto !important;
}
.tmk-text-align-left .tmk-hero-ctas {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-inline: 0 auto !important;
}

/* Text alignment: CENTER */
.tmk-text-align-center {
    text-align: center !important;
}
.tmk-text-align-center .tmk-hero-headline {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
    max-width: min(960px, 100%) !important;
}
.tmk-text-align-center .tmk-hero-subheadline {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
    max-width: min(720px, 100%) !important;
}
.tmk-text-align-center .tmk-hero-rotating-captions {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
    width: 100% !important;
    max-width: min(850px, 100%) !important;
}
.tmk-text-align-center .tmk-hero-rotating-caption,
.tmk-text-align-center .tmk-hero-caption-title,
.tmk-text-align-center .tmk-hero-caption-body {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
}
.tmk-text-align-center .tmk-hero-ctas {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-inline: auto !important;
}

/* Text alignment: RIGHT */
.tmk-text-align-right {
    text-align: right !important;
}
.tmk-text-align-right .tmk-hero-headline {
    text-align: right !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-inline: auto 0 !important;
    max-width: min(850px, 100%) !important;
}
.tmk-text-align-right .tmk-hero-subheadline {
    text-align: right !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-inline: auto 0 !important;
    max-width: min(720px, 100%) !important;
}
.tmk-text-align-right .tmk-hero-rotating-captions {
    text-align: right !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-inline: auto 0 !important;
    width: 100% !important;
    max-width: min(850px, 100%) !important;
}
.tmk-text-align-right .tmk-hero-rotating-caption,
.tmk-text-align-right .tmk-hero-caption-title,
.tmk-text-align-right .tmk-hero-caption-body {
    text-align: right !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-inline: auto 0 !important;
}
.tmk-text-align-right .tmk-hero-ctas {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-inline: auto 0 !important;
}

@media (max-width: 768px) {
    .tmk-text-align-left .tmk-hero-headline,
    .tmk-text-align-left .tmk-hero-subheadline,
    .tmk-text-align-left .tmk-hero-rotating-caption,
    .tmk-text-align-left .tmk-hero-caption-title,
    .tmk-text-align-left .tmk-hero-caption-body,
    .tmk-text-align-right .tmk-hero-headline,
    .tmk-text-align-right .tmk-hero-subheadline,
    .tmk-text-align-right .tmk-hero-rotating-caption,
    .tmk-text-align-right .tmk-hero-caption-title,
    .tmk-text-align-right .tmk-hero-caption-body {
        max-width: 100% !important;
    }
}
