/* =========================================================
   LMA HOMEPAGE INTERACTIVITY  (index.html only)
   1. Hero zoom on scroll
   2. Pinned "slant reveal" section  (Connecting Libraries...)
   3. Simple fade-up reveals for Find Out More + News
   Everything is gated behind html.ix (added by interactive.js).
   Without JS / with reduced motion the page shows normally.
========================================================= */

/* ---------- Static fallback (no JS / reduced motion) ---------- */
.reveal-photo, .reveal-write, .reveal-hint { display: none; }
.banner-fallback {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    /* the slant, programmed: 25% inset top-left / bottom-right */
    clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
}

/* ---------- 1. Hero zoom ---------- */
.ix .refined-hero .hero-container { overflow: hidden; }
.ix .hero-slideshow {
    transform: translate3d(0, calc(var(--hp, 0) * 60px), 0) scale(calc(1 + var(--hp, 0) * 0.2));
    transform-origin: 50% 100%;   /* bottom anchored so the zoom never exposes a gap at the top */
    will-change: transform;
}
.ix .hero-text-box {
    transform: translate3d(0, calc(-50% - var(--hp, 0) * 50px), 0);
    opacity: calc(1 - var(--hp, 0) * 1.1);
}
.ix .hero-text-box p { animation: ix-wipe 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ix .hero-text-box p:nth-child(2) { animation-delay: 0.18s; }
.ix-wait .hero-text-box p { animation-play-state: paused; }
@keyframes ix-wipe {
    from { clip-path: inset(0 100% 0 0); opacity: 0; }
    to   { clip-path: inset(0 0 0 0);    opacity: 1; }
}

/* ---------- 2. Pinned slant reveal ---------- */
.ix .reveal-pin {
    position: relative;
    height: 400vh;               /* 100vh stage + 300vh of scrolling while pinned */
}
.ix .reveal-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    /* transparent + click-through: the stage is pulled up under the hero/guest banner
       (see GAP in interactive.js) and must never hide or block them */
    background: transparent;
    pointer-events: none;
}
.ix .reveal-pin { pointer-events: none; }
.ix .reveal-stage .airport-banner-section { background: transparent; }   /* its own white bg was covering the hero */
.ix .reveal-stage .banner-container { pointer-events: auto; }

/* the original text block sits centred in the stage, under the photo */
.ix .reveal-stage .airport-banner-section {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    z-index: 1;
}
.ix .reveal-stage .banner-container { width: 100%; }

/* empty placeholder: tells the script where the photo window starts */
.ix .reveal-stage .banner-graphic {
    display: block;
    aspect-ratio: 4 / 3;
    max-height: 500px;
    visibility: hidden;
}
.ix .banner-fallback { display: none; }

.ix .reveal-photo {
    display: block;
    position: absolute;
    z-index: 2;
    left: 0; top: 0; width: 0; height: 0;
    will-change: left, top, width, height, clip-path;
}
.ix .reveal-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 12%;
    display: block;
}
.ix .reveal-photo::after {          /* darkens photo so white text reads */
    content: "";
    position: absolute;
    inset: 0;
    background: #0b1f3f;
    opacity: var(--shade, 0);
}

.ix .reveal-write {
    display: block;
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: min(66vw, 800px);
    transform: translate(-50%, -50%);
    pointer-events: none;
    overflow: visible;
}
.reveal-write path {
    fill: #fff;
    fill-opacity: 0;
    stroke: #fff;
    stroke-width: 5;
    stroke-linejoin: round;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    stroke-opacity: 0;
}

.ix .reveal-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    color: #fff;
    font-family: "Raleway", "Inter", sans-serif;
    font-size: 1.05rem;
    letter-spacing: 3px;
    text-shadow: 0 2px 10px rgba(0,0,0,.6);
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.ix .reveal-hint.show { opacity: 1; }
.reveal-hint i {
    width: 14px;
    height: 14px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    animation: ix-nudge 1.6s ease-in-out infinite;
}
@keyframes ix-nudge {
    0%, 100% { transform: translateY(0) rotate(45deg); opacity: .5; }
    50%      { transform: translateY(8px) rotate(45deg); opacity: 1; }
}

/* mobile: text on top, photo window underneath */
@media (max-width: 768px) {
    .ix .reveal-stage .airport-banner-section { align-items: flex-start; padding-top: 28px; }
    .ix .reveal-stage .banner-container { padding: 0 24px; }
    .ix .reveal-stage .banner-title { font-size: 2.3rem; margin-bottom: 14px; }
    .ix .reveal-stage .banner-description { font-size: 0.95rem; margin-bottom: 18px; }
    .ix .reveal-stage .banner-graphic {
        margin-top: 18px;
        aspect-ratio: 16 / 9;
        max-height: 26vh;
        width: 100%;
    }
    .ix .reveal-write { width: 88vw; }
}

/* ---------- 3. Simple reveals (Find Out More, News) ---------- */
.ix [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--ix-delay, 0ms);
}
.ix [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .ix [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Spacing tweaks ---------- */
/* The pinned stage is 100vh with centred content; the script pulls it up under
   the guest banner so the gap above "Working with LMA" is a tidy fixed size. */
.ix .guest-info-banner { position: relative; z-index: 6; margin-bottom: 0; }

/* tighter gap between Find Out More and News (desktop) */
.find-out-more.container { padding-bottom: 20px; }
.lma-news-section.container { padding-top: 40px; padding-bottom: 100px; }

@media (max-width: 768px) {
    /* no slant on mobile: plain rectangle */
    .banner-fallback { clip-path: none; }
    /* Find Out More is hidden on mobile, so News follows the photo directly */
    .lma-news-section.container { padding-top: 80px; padding-bottom: 110px; }
}

/* ---------- Footer slant ---------- */
/* The original footer slant was a clip-path on the footer itself (a fixed 36px drop).
   Browsers can drop/redraw clip-paths on big composited pages, which made the slant
   randomly "snap" flat. It's now a plain gradient wedge sitting above the footer:
   no clip-path, so it can't flicker. The drop scales with screen width (36px -> 80px). */
.main-footer {
    --footer-slant: clamp(36px, 4vw, 80px);
    clip-path: none;
    padding-top: 32px;
}
.main-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--footer-slant));
    height: calc(var(--footer-slant) + 1px);   /* +1px overlap = no hairline seam */
    background: linear-gradient(to bottom right, transparent 50%, #2E4C8F calc(50% + 0.5px));
    pointer-events: none;
}