/* ============================================================================
   Mission Caleb — Cinematic CMS-driven hero
   Dependency-free. GPU-accelerated (transform/opacity/filter/clip-path).
   Pairs with assets/js/hero.js and the .mc-hero markup in views/home.php.
   ========================================================================== */

.mc-hero {
    --mc-dur: 1200ms;                       /* keep in sync with hero.js `dur` */
    --mc-ease: cubic-bezier(.22, 1, .36, 1);
    --mc-autoplay: 6500ms;                  /* set from data-autoplay by JS     */
    --mc-px: 0px;                           /* parallax offsets (JS pointer)    */
    --mc-py: 0px;
    --mc-navy: var(--navy, #1b2748);
    --mc-gold: var(--gold, #c9a24b);

    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;                         /* correct on mobile browser chrome */
    min-height: 560px;
    overflow: hidden;
    background: #0d1428;
    isolation: isolate;
    outline: none;
}

.mc-hero__viewport { position: absolute; inset: 0; z-index: 1; }

/* ── Slide ──────────────────────────────────────────────────────────────── */
.mc-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    transition: opacity var(--mc-dur) var(--mc-ease),
                visibility 0s linear var(--mc-dur);
    will-change: opacity;
}
.mc-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 3;
    transition: opacity var(--mc-dur) var(--mc-ease), visibility 0s;
}
.mc-hero__slide.is-leaving { z-index: 2; }

/* ── Media (background image) ───────────────────────────────────────────── */
.mc-hero__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    transform: scale(1.18);
    filter: blur(16px) saturate(1.06);
    /* navy wash behind the image = graceful fallback if it fails to load */
    background:
        radial-gradient(120% 100% at 50% 0%, #26365f 0%, #131d38 60%, #0b1226 100%);
    transition: transform var(--mc-dur) var(--mc-ease),
                filter    var(--mc-dur) var(--mc-ease);
    will-change: transform, filter;
}
.mc-hero__slide.is-active .mc-hero__media {
    transform: translate(var(--mc-px), var(--mc-py)) scale(1);
    filter: blur(0) saturate(1.06);
}
/* Band mask-reveal on the incoming slide (opens vertically from the centre) */
.mc-hero__slide.is-entering .mc-hero__media {
    animation: mc-reveal var(--mc-dur) var(--mc-ease) both;
}
@keyframes mc-reveal {
    0%   { clip-path: inset(46% 0 46% 0); }
    100% { clip-path: inset(0 0 0 0); }
}

.mc-hero__img {
    position: absolute;
    inset: -3%;
    width: 106%;
    height: 106%;
    object-fit: cover;
    object-position: center;
    transform: translateZ(0);
    will-change: transform;
}
/* Slow Ken-Burns drift while a slide is active (independent of enter/parallax) */
.mc-hero__slide.is-active .mc-hero__img {
    animation: mc-kenburns 16s ease-out both;
}
@keyframes mc-kenburns {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(1.12) translate(-1.6%, -1.4%); }
}
.mc-hero__img.is-broken { display: none; }   /* fall back to navy media wash  */

/* Moving sheen during the transition */
.mc-hero__wipe {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(115deg, transparent 42%,
                rgba(255, 255, 255, .14) 50%, transparent 58%);
    transform: translateX(-60%);
}
.mc-hero__slide.is-entering .mc-hero__wipe {
    animation: mc-wipe var(--mc-dur) var(--mc-ease) both;
}
@keyframes mc-wipe {
    0%   { opacity: 0; transform: translateX(-60%); }
    28%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(60%); }
}

/* Readability scrim (fixed, tuned to hold text over any photo) */
.mc-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background:
        radial-gradient(120% 85% at 50% 32%,
            rgba(9, 14, 30, .10) 0%, rgba(9, 14, 30, .48) 62%, rgba(9, 14, 30, .74) 100%),
        linear-gradient(to top,
            rgba(9, 14, 30, .86) 0%, rgba(9, 14, 30, .18) 46%, rgba(9, 14, 30, .40) 100%);
}

/* ── Content ────────────────────────────────────────────────────────────── */
.mc-hero__content {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    text-align: center;
    padding: 0 16px;
}
.mc-hero__content .container { width: 100%; }

.mc-hero__title {
    margin: 0;
    color: #fff;
    font-weight: 900;
    letter-spacing: .01em;
    line-height: 1.1;
    font-size: clamp(30px, 5.4vw, 66px);
    text-shadow: 0 4px 30px rgba(0, 0, 0, .45);
}
/* Per-word rise (words wrapped in .mc-hero__word > span in PHP) */
.mc-hero__word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: 0 .12em .12em 0;
}
.mc-hero__word > span {
    display: inline-block;
    transform: translateY(118%) rotate(3deg);
    opacity: 0;
}
.mc-hero__slide.is-active .mc-hero__word > span {
    animation: mc-rise .95s var(--mc-ease) both;
    animation-delay: calc(260ms + var(--i, 0) * 62ms);
}
@keyframes mc-rise {
    from { transform: translateY(118%) rotate(3deg); opacity: 0; }
    to   { transform: translateY(0) rotate(0); opacity: 1; }
}

.mc-hero__text {
    max-width: 760px;
    margin: 22px auto 0;
    color: rgba(255, 255, 255, .90);
    font-size: clamp(15px, 1.7vw, 19px);
    line-height: 1.6;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .40);
    opacity: 0;
    transform: translateY(26px);
}
.mc-hero__slide.is-active .mc-hero__text {
    animation: mc-fade-up .85s var(--mc-ease) both;
    animation-delay: calc(300ms + var(--words, 4) * 62ms + 120ms);
}

.mc-hero__actions {
    margin-top: 34px;
    opacity: 0;
    transform: translateY(26px);
}
.mc-hero__slide.is-active .mc-hero__actions {
    animation: mc-fade-up .85s var(--mc-ease) both;
    animation-delay: calc(300ms + var(--words, 4) * 62ms + 300ms);
}
@keyframes mc-fade-up {
    to { opacity: 1; transform: translateY(0); }
}

.mc-hero__cta {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--mc-gold), #e7c877);
    color: #1a1205;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 10px 34px rgba(201, 162, 75, .34);
    transition: transform .25s var(--mc-ease), box-shadow .25s var(--mc-ease), filter .25s;
}
.mc-hero__cta:hover,
.mc-hero__cta:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 16px 44px rgba(201, 162, 75, .48);
    filter: brightness(1.04);
    color: #1a1205;
    text-decoration: none;
}

/* ── Controls ───────────────────────────────────────────────────────────── */
.mc-hero__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 7;
    width: 56px;
    height: 56px;
    border: 1px solid rgba(255, 255, 255, .30);
    border-radius: 50%;
    background: rgba(12, 18, 36, .28);
    backdrop-filter: blur(6px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .25s, border-color .25s, transform .25s;
}
.mc-hero__nav:hover { background: rgba(12, 18, 36, .55); border-color: var(--mc-gold); }
.mc-hero__nav--prev { left: 26px; }
.mc-hero__nav--next { right: 26px; }
.mc-hero__nav span {
    display: block;
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}
.mc-hero__nav--prev span { transform: rotate(-135deg); margin-left: 4px; }
.mc-hero__nav--next span { transform: rotate(45deg);   margin-right: 4px; }

.mc-hero__dots {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    z-index: 7;
    display: flex;
    gap: 12px;
}
.mc-hero__dot {
    position: relative;
    width: 38px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, .30);
    overflow: hidden;
    cursor: pointer;
    transition: width .3s var(--mc-ease), background .3s;
}
.mc-hero__dot:hover { background: rgba(255, 255, 255, .5); }
.mc-hero__dot.is-active { width: 60px; }
.mc-hero__dot i {
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left center;
    background: var(--mc-gold);
}
.mc-hero__dot.is-active i {
    animation: mc-progress var(--mc-autoplay) linear both;
}
.mc-hero[data-paused] .mc-hero__dot.is-active i { animation-play-state: paused; }
@keyframes mc-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Reuse the theme's scroll chevron; just ensure it sits above the hero layers */
.mc-hero .scroll_hint { z-index: 7; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .mc-hero__nav { width: 46px; height: 46px; }
    .mc-hero__nav--prev { left: 12px; }
    .mc-hero__nav--next { right: 12px; }
}
@media (max-width: 575px) {
    .mc-hero__nav { display: none; }             /* rely on swipe + dots       */
    .mc-hero__text { margin-top: 16px; }
    .mc-hero__cta { padding: 13px 30px; }
    .mc-hero__dots { bottom: 22px; }
}

/* ── Accessibility: honour reduced-motion ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mc-hero__slide,
    .mc-hero__media,
    .mc-hero__img,
    .mc-hero__wipe,
    .mc-hero__word > span,
    .mc-hero__text,
    .mc-hero__actions,
    .mc-hero__dot i {
        animation: none !important;
        transition: opacity .35s ease !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
    }
    .mc-hero__word > span,
    .mc-hero__text,
    .mc-hero__actions { opacity: 1 !important; }
    .mc-hero__dot.is-active i { transform: scaleX(1); }
}