/* =============================================
   HOMETEST — White hero with parallax aircraft
   ============================================= */

*, *::before, *::after { box-sizing: border-box; }

body.ht-page {
    background: #fff;
    color: #1a3a52;
    margin: 0;
    overflow-x: hidden;
}

/* ── HERO ────────────────────────────────────── */
.ht-hero {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 54px; /* nav height */
}

/* ── PARALLAX LAYERS ─────────────────────────── */
.ht-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    will-change: transform;
    z-index: 1;
}

.ht-layer--cards {
    pointer-events: none;
    z-index: 5;
}

/* ── GHOST AIRCRAFT (decorative depth) ────────── */
.ht-ghost {
    position: absolute;
    overflow: hidden;
}

.ht-ghost img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: grayscale(15%);
}

/* sizes + opacity per depth tier */
.ht-ghost--xs {
    width: 120px;
    height: 75px;
    opacity: 0.04;
}

.ht-ghost--tiny {
    width: 170px;
    height: 108px;
    opacity: 0.07;
}

.ht-ghost--sm {
    width: 230px;
    height: 144px;
    opacity: 0.13;
}

/* positions with rotation baked into the float keyframes */
/* — far layer — */
.ht-pos-fc1 { top: 16%; left:  38%; --rot: -3deg; animation: htFloat 17s ease-in-out infinite 0.4s; }
.ht-pos-fc2 { top: 22%; right: 34%; --rot:  8deg; animation: htFloat 19s ease-in-out infinite 2.1s; }
.ht-pos-fc3 { top: 80%; left:  44%; --rot: -6deg; animation: htFloat 15s ease-in-out infinite 1.3s; }
.ht-pos-fc4 { top: 50%; left:  24%; --rot: 13deg; animation: htFloat 20s ease-in-out infinite 3.5s; }
.ht-pos-fc5 { top: 46%; right: 26%; --rot: -9deg; animation: htFloat 18s ease-in-out infinite 0.9s; }
.ht-pos-fc6 { top: 33%; left:  14%; --rot:  5deg; animation: htFloat 16s ease-in-out infinite 4.0s; }

/* — deep layer — */
.ht-pos-tl  { top:  9%; left:  4%;  --rot: -7deg; animation: htFloat 10s ease-in-out infinite; }
.ht-pos-tr  { top: 11%; right: 9%;  --rot:  5deg; animation: htFloat 13s ease-in-out infinite 1.5s; }
.ht-pos-bl  { top: 64%; left: 11%;  --rot:-11deg; animation: htFloat 11s ease-in-out infinite 3s; }
.ht-pos-br  { top: 66%; right: 5%;  --rot:  9deg; animation: htFloat  9s ease-in-out infinite 0.8s; }
.ht-pos-cr  { top: 40%; right: 2%;  --rot: -4deg; animation: htFloat 14s ease-in-out infinite 2.2s; }
.ht-pos-ml  { top: 26%; left: 20%;  --rot: -5deg; animation: htFloat 12s ease-in-out infinite 0.6s; }
.ht-pos-bmr { top: 74%; left: 32%;  --rot: 10deg; animation: htFloat 11s ease-in-out infinite 2.7s; }
.ht-pos-mr  { top: 30%; right: 28%; --rot:  6deg; animation: htFloat 13s ease-in-out infinite 1.1s; }

/* — mid layer — */
.ht-pos-cml { top: 36%; left:  7%;  --rot:-12deg; animation: htFloat 10s ease-in-out infinite 1.8s; }
.ht-pos-cmr { top: 76%; right: 16%; --rot:  7deg; animation: htFloat 12s ease-in-out infinite 0.5s; }
.ht-pos-bmc { top: 85%; left:  52%; --rot: -5deg; animation: htFloat 14s ease-in-out infinite 3.2s; }

/* ── FEATURED CARDS ──────────────────────────── */
.ht-card {
    position: absolute;
    width: 400px;
    background: #ffffff;
    box-shadow:
        0 6px 24px rgba(26, 58, 82, 0.09),
        0 1px 5px  rgba(26, 58, 82, 0.05);
    pointer-events: auto;
    cursor: pointer;
    /* rotation comes from --card-rot per card */
    transform: rotate(var(--card-rot, 0deg));
    transition: box-shadow 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ht-card:hover {
    box-shadow:
        0 14px 40px rgba(26, 58, 82, 0.14),
        0 3px  10px rgba(26, 58, 82, 0.07);
    transform: rotate(var(--card-rot, 0deg)) translateY(-8px) scale(1.03);
}

/* Scattered, rotated — like pinned sketches on a board */
.ht-card--1 {
    top: 13%; left: 6%;
    --card-rot: -5deg;
}
.ht-card--2 {
    top: 7%; right: 7%;
    --card-rot: 4deg;
}
.ht-card--3 {
    top: 55%; left: 3%;
    --card-rot: 7deg;
}
.ht-card--4 {
    top: 44%; right: 5%;
    --card-rot: -6deg;
}
.ht-card--5 {
    top: 62%; left: calc(34% - 60px);
    --card-rot: -3deg;
}

.ht-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    display: block;
    padding: 10px;
}

.ht-card-label {
    padding: 0.45rem 0.75rem 0.55rem;
    border-top: 1px solid rgba(26, 58, 82, 0.07);
}

.ht-card-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: #1a3a52;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ht-card-meta {
    font-size: 0.62rem;
    color: rgba(26, 58, 82, 0.42);
    letter-spacing: 0.02em;
    margin-top: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── HERO CONTENT ────────────────────────────── */
.ht-content {
    position: relative; /* needed for z-index in non-flex-child browsers */
    z-index: 10;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 2rem 1.5rem;
    margin-top: -18vh; /* pull up from flex center toward the top third */
    opacity: 0;
    animation: htFadeUp 0.85s 0.15s forwards;
    /* subtle frosted backdrop so text is readable over ghost aircraft */
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 2px;
    max-width: 480px;
    width: calc(100% - 600px); /* leave room for cards on sides */
    min-width: 280px;
}

.ht-signature {
    font-family: 'Marck Script', cursive;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    color: #1a3a52;
    margin: 0;
    line-height: 1.1;
    letter-spacing: 0;
}

.ht-eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(26, 58, 82, 0.38);
    margin: 0;
}

.ht-title {
    font-size: clamp(1.45rem, 2.8vw, 2.2rem);
    font-weight: 700;
    font-style: normal;
    color: #1a3a52;
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.ht-sub {
    font-size: 0.83rem;
    color: rgba(26, 58, 82, 0.52);
    margin: 0;
    max-width: 34ch;
    line-height: 1.55;
}

.ht-btn {
    display: inline-block;
    margin-top: 0.4rem;
    padding: 0.52rem 1.8rem;
    border: 1px solid rgba(26, 58, 82, 0.32);
    color: #1a3a52;
    text-decoration: none;
    font-size: 0.70rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    transition: background 0.22s, border-color 0.22s, color 0.22s;
}

.ht-btn:hover {
    background: #1a3a52;
    color: #fff;
    border-color: #1a3a52;
}

/* ── FOOTER ──────────────────────────────────── */
.ht-footer {
    background: #fff;
    border-top: 1px solid rgba(26, 58, 82, 0.07);
    padding: 0.75rem 0;
}

.ht-footer .container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ht-footer__copy {
    font-size: 0.72rem;
    color: rgba(26, 58, 82, 0.28);
    letter-spacing: 0.04em;
}

/* ── ANIMATIONS ──────────────────────────────── */
@keyframes htFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ghost aircraft gentle float — rotation via CSS custom property */
@keyframes htFloat {
    0%, 100% { transform: translateY(0)    rotate(var(--rot, 0deg)); }
    50%       { transform: translateY(-11px) rotate(var(--rot, 0deg)); }
}

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width: 1300px) {
    .ht-card { width: 300px; }
    .ht-card--5 { left: calc(33% - 40px); }
    .ht-content { width: calc(100% - 660px); }
}

@media (max-width: 1100px) {
    .ht-card { width: 240px; }
    .ht-card--5 { left: calc(32% - 30px); top: 65%; }
    .ht-content { width: calc(100% - 520px); }
}

@media (max-width: 820px) {
    .ht-card { width: 180px; }
    .ht-card--5 { left: calc(31%); top: 67%; }
    .ht-content { width: calc(100% - 390px); }
    .ht-ghost--xs   { width:  85px; height: 54px; }
    .ht-ghost--tiny { width: 120px; height: 76px; }
    .ht-ghost--sm   { width: 165px; height: 104px; }
}

@media (max-width: 620px) {
    .ht-card  { display: none; }
    .ht-ghost { display: none; }
    .ht-content {
        width: auto;
        max-width: 90%;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}