/* ── Wave Header ──────────────────────────────────────────────────── */

/* Home page only: disable page scroll — the header fills the viewport */
body.home { overflow: hidden; }

.wave-header-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    opacity: 0.35;
    z-index: 9999;
    filter: grayscale(100%);
    /* fade out on the left so waves don't cross the logo */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 18%, black 32%, black 100%);
    mask-image: linear-gradient(to right, transparent 0%, transparent 18%, black 32%, black 100%);
}

.wave-header-svg.wave-secondary {
    left: -8%;
    width: 120%;
    opacity: 0.18;
    filter: grayscale(100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 22%, black 38%, black 100%);
    mask-image: linear-gradient(to right, transparent 0%, transparent 22%, black 38%, black 100%);
}

.wave-header-svg path {
    fill: none;
    stroke-width: 0.5px;
}

/*
 * Blocksy theme — anchor the SVGs. overflow:visible lets them bleed out.
 */
#header,
.ct-header {
    position: relative;
    overflow: visible;
}

/* ── Diana glider — two-layer animation ─────────────────────────── */

/* Outer wrapper: slow wide sweep across the header */
.diana-glider-wrap {
    position: absolute;
    top: 50%;
    left: 38%;
    z-index: 10000;
    pointer-events: none;
    animation: diana-glide 105s ease-in-out infinite;
}

/* Sky glow div — hidden (still in DOM inside glider wrap, but unused) */
.diana-glow {
    display: none;
}

/* Static sky glow — sits above sky box (z:0) and mountains (z:1), below clouds (z:3).
   Colour is animated by JS (_glowFrame) — independent palette cycling. */
.diana-glow-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
}

/* Inner canvas: Three.js 3D render — transparent bg, turbulence animation */
.diana-glider {
    display: block;
    height: 525px;
    width: 700px;
    opacity: 0;
    transition: opacity 1.0s ease;
    animation: diana-turbulence 13.5s ease-in-out infinite;
    position: relative;
    z-index: 10003;   /* above button (10002) so wings never get covered */
    pointer-events: none; /* click-through by default — never blocks nav or page content */
    cursor: default;
}
.diana-glider.interactive {
    pointer-events: auto; /* enabled only when user activates My Aircraft! drag mode */
    cursor: grab;
}

/* ── Button row: Large View / My Aircraft / Livery — anchored bottom-centre of header */
.diana-btn-row {
    position: absolute;
    bottom: 72px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10004;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
    white-space: nowrap;
}

/* "My Aircraft!" toggle button — now a flex child (no absolute position) */
.diana-aircraft-btn {
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #3a7ab5;
    background: rgba(255,255,255,0.80);
    border: 1px solid rgba(100,170,220,0.50);
    border-radius: 20px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
    user-select: none;
    line-height: 1.4;
}
.diana-aircraft-btn:hover {
    background: rgba(220,238,252,0.90);
    border-color: rgba(80,150,210,0.7);
}
.diana-aircraft-btn.active {
    background: rgba(80,160,220,0.88);
    color: #fff;
    border-color: rgba(60,130,200,0.8);
}

/* Large View toggle button */
.diana-largeview-btn {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #7b4da0;
    background: rgba(255,255,255,0.80);
    border: 1px solid rgba(140,80,180,0.50);
    border-radius: 20px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
    user-select: none;
    line-height: 1.4;
}
.diana-largeview-btn:hover {
    background: rgba(240,225,250,0.90);
    border-color: rgba(120,60,165,0.7);
}
.diana-largeview-btn.active {
    background: rgba(120,60,170,0.88);
    color: #fff;
    border-color: rgba(90,40,140,0.8);
}

/* Livery cycle button — same visual family as aircraft button */
.diana-livery-btn {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #5a8a45;
    background: rgba(255,255,255,0.80);
    border: 1px solid rgba(100,180,80,0.50);
    border-radius: 20px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
    user-select: none;
    line-height: 1.4;
}
.diana-livery-btn:hover {
    background: rgba(225,245,215,0.90);
    border-color: rgba(80,160,60,0.7);
}

/* Aircraft name label — sits just above the anchored button row.
   Click to cycle to the next aircraft. */
.diana-aircraft-name {
    position: absolute;
    bottom: 100px;   /* 72px (btn-row) + ~28px (btn height) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10004;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(40,100,160,0.75);
    white-space: nowrap;
    pointer-events: auto;
    user-select: none;
    opacity: 0;
    transition: opacity 0.6s ease, color 0.2s ease;
    cursor: pointer;
}
.diana-aircraft-name:not(:empty) {
    opacity: 1;
}
.diana-aircraft-name:hover {
    color: rgba(40,100,160,1);
}

/* Wide glide: sweeps ~120px right, ~60px left, ~18px up/down.
   Y values are offset by -40px to keep the aircraft in the upper half
   of the header, clear of the button row at the bottom. */
@keyframes diana-glide {
    0%   { transform: translate(    0px, calc(-50% + -40px)); }
    14%  { transform: translate(   90px, calc(-50% + -50px)); }
    28%  { transform: translate(  220px, calc(-50% + -46px)); }
    42%  { transform: translate(  240px, calc(-50% + -30px)); }
    56%  { transform: translate(  120px, calc(-50% + -24px)); }
    70%  { transform: translate(  -40px, calc(-50% + -32px)); }
    82%  { transform: translate( -110px, calc(-50% + -44px)); }
    92%  { transform: translate(  -50px, calc(-50% + -50px)); }
    100% { transform: translate(    0px, calc(-50% + -40px)); }
}

/* ── Clouds ─────────────────────────────────────────────────────── */

/* Drift right → left across full viewport width */
@keyframes diana-cloud-drift {
    from { transform: translateX(calc(100vw + 360px)); }
    to   { transform: translateX(-1100px); }  /* large enough for 700px-wide fg clouds to fully clear */
}

.diana-cloud {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 3;           /* behind waves (9999) and glider (10000+) */
    width: auto;
    animation-name: diana-cloud-drift;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    opacity: 0.55;        /* overridden per-instance by JS */
}

/* Subtle turbulence: ±3px, independent cycle */
@keyframes diana-turbulence {
    0%   { transform: translate(  0px,  0px); }
    18%  { transform: translate(  2px, -8px); }
    36%  { transform: translate( -3px,  4px); }
    52%  { transform: translate(  1px,  8px); }
    70%  { transform: translate( -2px, -5px); }
    85%  { transform: translate(  3px,  6px); }
    100% { transform: translate(  0px,  0px); }
}

/* ── Mountains ─────────────────────────────────────────────── */
@keyframes diana-mountain-drift {
    from { transform: translateX(calc(100vw + 900px)); }
    to   { transform: translateX(-900px); }
}

/* Applied directly to <img> — duration 90–120 s set by JS, one at a time */
.diana-mountain-wrap {
    position: absolute;
    bottom: 0;
    height: auto;
    width: auto;
    pointer-events: none;
    user-select: none;
    animation-name: diana-mountain-drift;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/* Logo — above sky box (z:0) and clouds (z:3); drop-shadow makes it pop
   against any sky background colour instead of looking faded */
#header .site-logo-container,
.ct-header .site-logo-container {
    position: relative;
    z-index: 100;
    opacity: 1 !important;
    filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.45)) drop-shadow(0 0px 6px rgba(255, 255, 255, 0.20));
}

/* Nav menu items above cloud layer (z:3) — only z-index on the nav itself,
   NOT on wrapper divs (ct-header-desktop-items / site-header-inner) as those
   are the positioning ancestors for dropdowns and adding position:relative
   there pushes the sub-menu down off the nav bar. */
#header nav, .ct-header nav,
#header .ct-main-navigation, .ct-header .ct-main-navigation {
    position: relative;
    z-index: 10;
}

/* Nav link text shadow */
#header .ct-menu a, .ct-header .ct-menu a,
#header .ct-menu a span, .ct-header .ct-menu a span {
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.85), 0 0px 2px rgba(0, 0, 0, 0.95) !important;
}

/* Elevate the desktop-items wrapper so Blocksy's sticky-mode stacking context
   (created by transform/will-change for smooth scrolling) sits above the
   cloud layer (z:3). overflow:visible keeps dropdown sub-menus visible. */
#header .ct-header-desktop-items,
.ct-header .ct-header-desktop-items {
    position: relative;
    z-index: 4;
    overflow: visible;
}

/* Elevate the desktop items wrapper so Blocksy's sticky-mode stacking context
   (created by transform/will-change) sits above the cloud layer (z:3).
   overflow:visible keeps dropdown sub-menus from being clipped. */
#header .ct-header-desktop-items,
.ct-header .ct-header-desktop-items {
    position: relative;
    z-index: 4;
    overflow: visible;
}
/* Sub-menus must stay pinned immediately below their parent nav item */
#header .ct-main-navigation .sub-menu,
.ct-header .ct-main-navigation .sub-menu {
    margin-top: 0 !important;
    top: 100% !important;
}

.diana-mountain-img {
    display: block;
}

/* Buttons in large-view top-right: slightly larger font + shadow */
.diana-btn-row[style*="position:fixed"] .diana-aircraft-btn,
.diana-btn-row[style*="position:fixed"] .diana-livery-btn,
.diana-btn-row[style*="position:fixed"] .diana-largeview-btn {
    font-size: 13px;
    padding: 8px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    backdrop-filter: blur(8px);
}

/* ─── Responsive ─────────────────────────────────────────────────── */

/* Tablet ≤1024px: shift glider wrap inward so it doesn't clip off-screen */
@media (max-width: 1024px) {
    .diana-glider-wrap    { left: 22%; }
    /* btn-row stays centered via left:50%/transform — no override needed */
}

/* ≤767px: structural mobile header fixes — header height, logo, hamburger.
   Does NOT hide the aircraft/buttons yet — canvas still renders at 600–767px. */
@media (max-width: 767px) {
    /* Clip wave SVGs so they don't bleed below the compressed mobile header */
    .wave-header-svg      { clip-path: inset(0); }
    /* Clouds stay but scale to the visible header area */
    .diana-cloud          { max-height: 120px; }

    /* Reduce the 202px desktop header row height to something phone-friendly */
    #header [data-row*="middle"],
    .ct-header [data-row*="middle"]      { --height: 68px !important; height: 68px !important; min-height: 68px !important; }

    /* Logo fills the mobile header height */
    #header .site-logo-container,
    .ct-header .site-logo-container      { height: 100% !important; display: flex !important; align-items: center !important; }
    #header .site-logo-container img,
    .ct-header .site-logo-container img  { max-height: 60px !important; height: 60px !important; width: auto !important; }

    /* Hamburger trigger — force white + shadow so it's visible on any sky colour */
    #header [data-id="trigger"],
    .ct-header [data-id="trigger"]        { color: #ffffff !important;
                                            filter: drop-shadow(0 1px 5px rgba(0,0,0,0.85)) !important; }
    #header [data-id="trigger"] svg,
    .ct-header [data-id="trigger"] svg    { fill: currentColor !important;
                                            stroke: currentColor !important; }
}

/* 600–767px (small tablets): canvas IS rendered (JS threshold ≥600px). */
@media (max-width: 767px) and (min-width: 600px) {
    .diana-glider-wrap    { left: 18%; }
    /* Keep buttons centered but nudge them up a bit in the compact header */
    .diana-btn-row        { bottom: 44px; }
    .diana-aircraft-name  { bottom: 72px; font-size: 10px; }
    /* Compact the aircraft buttons so they don't overflow on a narrow screen */
    .diana-aircraft-btn,
    .diana-livery-btn,
    .diana-largeview-btn  { font-size: 10px !important; padding: 5px 10px !important; }
}

/* <600px: JS skips canvas entirely — hide aircraft controls and clip waves */
@media (max-width: 599px) {
    .diana-glider-wrap,
    .diana-btn-row,
    .diana-aircraft-name  { display: none !important; }
}

/* Desktop (≥1025px): nav always anchored to top of header row.
   Only exception: full 4K viewport (>1920px wide AND >1080px tall) where
   Blocksy's default centre alignment has enough space to look correct. */
@media (min-width: 1025px) {
    #header [data-row*="middle"],
    .ct-header [data-row*="middle"] {
        align-items: flex-start !important;
        padding-top: 12px !important;
    }
    #header .ct-header-desktop-items,
    .ct-header .ct-header-desktop-items {
        align-self: flex-start !important;
        margin-top: 12px !important;
    }
    #header nav,
    .ct-header nav,
    #header .ct-main-navigation,
    .ct-header .ct-main-navigation {
        margin-top: 0 !important;
    }
}

/* Override: full 4K viewport — restore Blocksy centre alignment */
@media (min-width: 1921px) and (min-height: 1081px) {
    #header [data-row*="middle"],
    .ct-header [data-row*="middle"] {
        align-items: center !important;
        padding-top: 0 !important;
    }
    #header .ct-header-desktop-items,
    .ct-header .ct-header-desktop-items {
        align-self: center !important;
        margin-top: 0 !important;
    }
}