/* =====================================================
   Reborn Wings - Aviation Watch theme
   Custom CSS (built on top of Bootstrap 5)
   Author: Behram - University of Sussex 3D App Assignment 2026
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;500;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
    --bg-0: #07101a;          /* deep navy-black */
    --bg-1: #0c1620;          /* surface */
    --bg-2: #11202c;          /* raised surface */
    --bg-3: #1a2c3a;
    --line: #2c3a48;
    --line-bright: #4a6075;
    --text: #ebe1ce;          /* warm ivory, like vintage paper */
    --text-dim: #b6a98e;
    --muted: #7c8a99;
    --brass: #b8915a;         /* primary accent - aged brass */
    --brass-bright: #d4ae7a;
    --brass-deep: #8c6938;
    --gauge-glow: #d8b079;
    --radius: 2px;            /* near-square, instrument-style */
    --radius-md: 4px;
    --shadow: 0 6px 20px rgba(0,0,0,.5);
    --hair: 1px solid var(--line);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-0);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.01em;
}

a { color: var(--brass-bright); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--gauge-glow); }

/* ---------- HEADER + LOGO ---------- */
.site-header {
    background: linear-gradient(180deg, #0a1620 0%, #07101a 100%);
    border-bottom: var(--hair);
    position: sticky; top: 0; z-index: 50;
}

.navbar-brand { gap: .9rem; padding: .5rem 0; }

.logo-mark {
    display: inline-flex; align-items: center; gap: 2px;
    width: 44px; height: 30px;
    transform: translateY(2px);
    filter: drop-shadow(0 0 8px rgba(184, 145, 90, 0.25));
}
.logo-wing {
    display: block;
    width: 14px; height: 3px;
    background: linear-gradient(90deg, var(--brass), var(--brass-bright));
    border-radius: 1px;
}
.logo-wing--l { clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.logo-wing--r { clip-path: polygon(0 0, 100% 50%, 0 100%); }
.logo-body {
    display: block;
    width: 9px; height: 22px;
    background: linear-gradient(180deg, #f5ead3 0%, #b8a37e 100%);
    border-radius: 50% 50% 30% 30%;
    box-shadow: 0 2px 6px rgba(0,0,0,.5);
}

.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-text__title {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 1.35rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text);
}
.logo-text__title .accent { color: var(--brass); font-weight: 700; }
.logo-text__strap {
    font-size: .62rem;
    color: var(--text-dim);
    margin-top: 5px;
    letter-spacing: 3.5px;
    text-transform: uppercase;
}

.navbar-dark .nav-link {
    color: var(--text-dim);
    font-weight: 500;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    padding: .5rem 1rem;
    transition: color .2s ease;
}
.navbar-dark .nav-link.active { color: var(--brass-bright); }
.navbar-dark .nav-link:hover { color: var(--text); }

/* ---------- MAIN ---------- */
.app-main { min-height: calc(100vh - 130px); padding: 1.5rem !important; }

/* ---------- VIEWPORT ---------- */
.viewport-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: radial-gradient(ellipse at center, #11202c 0%, #050a10 70%);
    border: var(--hair);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: inset 0 0 60px rgba(0,0,0,.7);
}
.viewport { position: absolute; inset: 0; }
.viewport canvas { display: block; width: 100% !important; height: 100% !important; }

/* Faint vignette overlay - looks through a viewing port */
.viewport-wrap::after {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.45) 100%),
        linear-gradient(180deg, rgba(0,0,0,.15) 0%, transparent 30%, transparent 70%, rgba(0,0,0,.15) 100%);
    z-index: 5;
}

/* Crosshair markers in the corners - instrument feel */
.viewport-wrap::before {
    content: '';
    position: absolute; inset: 14px;
    pointer-events: none;
    z-index: 6;
    background:
        linear-gradient(var(--line-bright), var(--line-bright)) top left   / 14px 1px no-repeat,
        linear-gradient(var(--line-bright), var(--line-bright)) top left   / 1px 14px no-repeat,
        linear-gradient(var(--line-bright), var(--line-bright)) top right  / 14px 1px no-repeat,
        linear-gradient(var(--line-bright), var(--line-bright)) top right  / 1px 14px no-repeat,
        linear-gradient(var(--line-bright), var(--line-bright)) bottom left / 14px 1px no-repeat,
        linear-gradient(var(--line-bright), var(--line-bright)) bottom left / 1px 14px no-repeat,
        linear-gradient(var(--line-bright), var(--line-bright)) bottom right / 14px 1px no-repeat,
        linear-gradient(var(--line-bright), var(--line-bright)) bottom right / 1px 14px no-repeat;
    opacity: .5;
}

.viewport-loader {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(7,16,26,.92); backdrop-filter: blur(3px);
    z-index: 10;
    transition: opacity .5s ease;
    color: var(--brass-bright);
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: .85rem;
}
.viewport-loader.hidden { opacity: 0; pointer-events: none; }
.viewport-loader .spinner-border {
    color: var(--brass) !important;
    width: 1.5rem; height: 1.5rem;
    border-width: 2px;
}

/* ---------- HUD ---------- */
.viewport-hud {
    position: absolute;
    left: 28px; bottom: 24px;
    pointer-events: none;
    text-shadow: 0 2px 12px rgba(0,0,0,.9);
    max-width: 70%;
    z-index: 7;
}
.hud-title {
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-size: 2.6rem;
    font-weight: 500;
    letter-spacing: 6px;
    text-transform: uppercase;
    line-height: 1;
    color: var(--text);
}
.hud-title::before {
    content: '';
    display: block;
    width: 44px; height: 1px;
    background: var(--brass);
    margin-bottom: 14px;
    box-shadow: 0 0 8px var(--brass);
}
.hud-subtitle {
    margin: 12px 0 0;
    font-size: .72rem;
    color: var(--brass-bright);
    text-transform: uppercase;
    letter-spacing: 3.5px;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
}
.hud-tagline {
    margin: 14px 0 0;
    font-size: .68rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 300;
    font-style: normal;
}
.hud-hint  {
    margin: 18px 0 0;
    font-size: .65rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    opacity: .6;
    font-family: 'JetBrains Mono', monospace;
}
.hud-hint i { margin-right: 4px; }

@media (max-width: 992px) {
    .hud-title { font-size: 1.6rem; letter-spacing: 3px; }
    .hud-title::before { width: 32px; margin-bottom: 10px; }
    .hud-subtitle { font-size: .62rem; letter-spacing: 2px; }
}

/* ---------- CONTROL BAR ---------- */
.control-bar {
    background: var(--bg-1);
    border: var(--hair);
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem !important;
}

.form-label.small {
    color: var(--muted);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: .62rem !important;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
}

.btn-outline-light {
    border: var(--hair);
    color: var(--text-dim);
    background: var(--bg-2);
    font-family: 'Oswald', sans-serif;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 500;
    padding: .55rem .7rem;
    border-radius: var(--radius);
    transition: all .25s ease;
}
.btn-outline-light:hover {
    background: var(--bg-3);
    color: var(--brass-bright);
    border-color: var(--brass-deep);
}
.btn-outline-light.active,
.btn-outline-light[aria-pressed="true"] {
    background: var(--brass);
    color: #1a0f04;
    border-color: var(--brass-bright);
    font-weight: 700;
    box-shadow: 0 0 12px rgba(184, 145, 90, .4);
}

.btn-accent {
    background: linear-gradient(180deg, var(--brass) 0%, var(--brass-deep) 100%);
    color: #1a0f04;
    border: 1px solid var(--brass-bright);
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    padding: .55rem .7rem;
    border-radius: var(--radius);
}
.btn-accent:hover {
    background: linear-gradient(180deg, var(--brass-bright) 0%, var(--brass) 100%);
    color: #1a0f04;
}

.form-range::-webkit-slider-thumb { background: var(--brass); }
.form-range::-moz-range-thumb { background: var(--brass); }
.form-range::-webkit-slider-runnable-track { background: var(--bg-3); height: 2px; }

/* ---------- PANELS ---------- */
.panel {
    background: var(--bg-1);
    border: var(--hair);
    border-radius: var(--radius);
    padding: 1.4rem 1.5rem;
}
.panel-title {
    font-family: 'Oswald', sans-serif;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--muted);
    margin: 0 0 1.2rem;
    font-weight: 500;
    padding-bottom: .7rem;
    border-bottom: var(--hair);
    position: relative;
}
.panel-title::after {
    content: '';
    position: absolute;
    left: 0; bottom: -1px;
    width: 32px; height: 1px;
    background: var(--brass);
}

/* ---------- GALLERY (numbered, watch-style) ---------- */
.gallery-card {
    width: 100%;
    background: var(--bg-2);
    border: var(--hair);
    border-radius: var(--radius);
    padding: 1rem .5rem;
    color: var(--text);
    transition: all .25s ease;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    position: relative;
    overflow: hidden;
}
.gallery-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--brass-deep);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .35s ease;
}
.gallery-card:hover { border-color: var(--brass-deep); transform: translateY(-2px); }
.gallery-card:hover::before { transform: scaleX(1); }
.gallery-card.active {
    background: linear-gradient(180deg, rgba(184,145,90,.18) 0%, var(--bg-2) 100%);
    border-color: var(--brass);
    box-shadow: 0 4px 18px rgba(184,145,90,.25), inset 0 0 22px rgba(184,145,90,.08);
}
.gallery-card.active::before {
    transform: scaleX(1);
    background: var(--brass);
    box-shadow: 0 0 8px var(--brass);
}
.gallery-card__num {
    font-family: 'JetBrains Mono', monospace;
    font-size: .68rem; font-weight: 700;
    color: var(--brass);
    letter-spacing: 2px;
    margin-bottom: 2px;
}
.gallery-card__name {
    font-family: 'Oswald', sans-serif;
    font-size: .95rem; font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text);
}
.gallery-card__role {
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--text-dim);
    margin-top: 4px;
}

/* ---------- INFO ---------- */
.panel-lead {
    color: var(--text-dim);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height: 1.6;
}

.info-specs {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 1rem 0 1.2rem;
    padding: .9rem 0;
    background: transparent;
    border-top: var(--hair);
    border-bottom: var(--hair);
}
.info-specs > div {
    text-align: center;
    padding: 0 .5rem;
    position: relative;
}
.info-specs > div + div::before {
    content: '';
    position: absolute;
    left: 0; top: 10%; bottom: 10%;
    width: 1px;
    background: var(--line);
}
.info-specs dt {
    font-size: .58rem;
    text-transform: uppercase;
    color: var(--muted);
    letter-spacing: 3px;
    margin-bottom: 6px;
    font-family: 'Inter', sans-serif;
}
.info-specs dd {
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: .88rem;
    color: var(--brass-bright);
    letter-spacing: 1px;
}

/* ---------- MEDIA TABS ---------- */
#media-tabs .nav-link {
    background: var(--bg-2);
    color: var(--text-dim);
    border: var(--hair);
    font-family: 'Oswald', sans-serif;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    padding: .45rem .5rem;
    margin: 0 2px;
    border-radius: var(--radius);
}
#media-tabs .nav-link.active {
    background: var(--brass);
    color: #1a0f04;
    border-color: var(--brass-bright);
    font-weight: 600;
}

.media-stage { min-height: 110px; }
.media-pane { display: none; animation: fade .3s ease; }
.media-pane.active { display: block; }
.media-pane p {
    font-size: .82rem;
    line-height: 1.65;
    color: var(--text-dim);
}
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.media-image-placeholder {
    height: 130px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--bg-2);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
}
.media-image-placeholder i { font-size: 1.8rem; margin-bottom: 6px; color: var(--brass-deep); }

/* Reference photograph shown in the Image media tab */
.media-image {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--bg-2);
    margin-bottom: 6px;
}
.media-image[src=""] { display: none; }   /* hide before first plane loads */
.media-image__caption {
    font-size: .68rem !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* ---------- ABOUT: Process & Tools screenshots ---------- */
.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    margin: 1rem 0 1.5rem;
}
.process-figure {
    margin: 0;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .5rem;
}
.process-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}
.process-figure figcaption {
    margin-top: .6rem;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--text-dim);
    font-style: italic;
}
.process-figure figcaption code {
    font-style: normal;
}

/* ---------- FOOTER ---------- */
.site-footer {
    background: var(--bg-1);
    border-top: var(--hair);
    color: var(--muted);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
}
.site-footer a { color: var(--text-dim); }
.site-footer a:hover { color: var(--brass-bright); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
    .viewport-wrap { aspect-ratio: 4 / 3; }
    .panel { margin-top: 1rem; }
}
@media (max-width: 575px) {
    .logo-text__strap { display: none; }
    .control-bar .btn-group { display: flex; flex-wrap: wrap; }
}

/* ---------- ACCESSIBILITY ---------- */
.btn:focus-visible,
.gallery-card:focus-visible,
.nav-link:focus-visible {
    outline: 1px solid var(--brass-bright);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- PAGE LAYOUT (about / originality / etc.) ---------- */
.page-content {
    max-width: 880px;
    margin: 2rem auto;
    padding: 0 1.5rem;
}
.page-content h1 {
    color: var(--brass-bright);
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 500;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: var(--hair);
    position: relative;
}
.page-content h1::after {
    content: '';
    position: absolute;
    left: 0; bottom: -1px;
    width: 60px; height: 1px;
    background: var(--brass);
}
.page-content h2 {
    color: var(--text);
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 500;
    margin-top: 2.5rem;
    font-size: 1.05rem;
}
.page-content h2::before {
    content: '/ ';
    color: var(--brass);
}
.page-content p, .page-content li { color: var(--text-dim); line-height: 1.75; }
.page-content table {
    width: 100%;
    background: var(--bg-1);
    border: var(--hair);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 1.2rem 0;
    border-collapse: collapse;
}
.page-content th, .page-content td {
    padding: .8rem 1rem;
    border-bottom: var(--hair);
    font-size: .85rem;
}
.page-content th {
    background: var(--bg-2);
    text-align: left;
    color: var(--brass-bright);
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
}
.page-content code, .page-content pre {
    background: #050b14;
    color: var(--brass-bright);
    border: var(--hair);
    border-radius: var(--radius);
    padding: .15rem .4rem;
    font-size: .82rem;
    font-family: 'JetBrains Mono', monospace;
}
.page-content pre { padding: 1rem; overflow: auto; }


/* =====================================================
   CINEMATIC STAGE — full-bleed redesign (overrides above)
   ===================================================== */

.stage {
    position: relative;
    width: 100%;
    height: calc(100vh - 62px);   /* fill below the navbar */
    min-height: 600px;
    overflow: hidden;
    background: var(--bg-0);
}

.stage .viewport-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.stage .viewport-wrap::before { inset: 24px; opacity: .35; }
.stage .viewport-wrap::after  {
    /* stronger vignette in full-bleed mode */
    background:
        radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.55) 100%),
        linear-gradient(180deg, rgba(0,0,0,.25) 0%, transparent 25%, transparent 75%, rgba(0,0,0,.25) 100%);
}

/* HUD repositioned for full-bleed scale */
.stage .viewport-hud {
    left: clamp(24px, 6vw, 72px);
    bottom: clamp(28px, 7vh, 96px);
    max-width: 60%;
    z-index: 8;
}
.stage .hud-title {
    font-size: clamp(2.2rem, 5vw, 4.6rem);
    letter-spacing: clamp(4px, 1vw, 10px);
}
.stage .hud-title::before {
    width: clamp(36px, 6vw, 72px);
    margin-bottom: clamp(12px, 2vh, 22px);
}

/* =====================================================
   REVEAL — staggered fade-in (auto-starts on body.revealed)
   ===================================================== */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(2px);
    transition: opacity 1.1s cubic-bezier(.2,.6,.1,1),
                transform 1.1s cubic-bezier(.2,.6,.1,1),
                filter   1.1s cubic-bezier(.2,.6,.1,1);
    will-change: opacity, transform, filter;
}
body.revealed .reveal {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    transition-delay: var(--reveal-delay, 0ms);
}

/* =====================================================
   ENGAGE HINT (pulsing dot, fades on first interaction)
   ===================================================== */
.engage-hint {
    position: absolute;
    right: clamp(24px, 5vw, 64px);
    bottom: clamp(28px, 5vh, 64px);
    display: flex; align-items: center; gap: .6rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: .65rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-dim);
    z-index: 8;
    opacity: 0;
    transition: opacity .8s ease 1200ms;
}
body.revealed .engage-hint { opacity: .75; }
body.engaged .engage-hint  { opacity: 0; transition-delay: 0ms; }

.engage-hint__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--brass);
    box-shadow: 0 0 12px var(--brass);
    animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: .35; transform: scale(.85); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

/* =====================================================
   TOP PLANE STRIP (01/02/03)
   ===================================================== */
.plane-strip {
    position: absolute;
    top: clamp(20px, 4vh, 40px);
    left: 50%;
    transform: translateX(-50%) translateY(14px);    /* matches .reveal initial */
    display: flex; align-items: center; gap: 0;
    padding: .35rem .5rem;
    background: rgba(7, 16, 26, 0.5);
    border: var(--hair);
    border-radius: 2px;
    backdrop-filter: blur(8px);
    z-index: 8;
}
body.revealed .plane-strip { transform: translateX(-50%) translateY(0); }

.plane-tab {
    background: transparent;
    border: 0;
    padding: .55rem 1.1rem;
    color: var(--text-dim);
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    transition: color .3s ease;
    position: relative;
}
.plane-tab:hover { color: var(--text); }
.plane-tab.active { color: var(--text); }
.plane-tab.active::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -4px;
    width: 22px; height: 1px;
    background: var(--brass);
    transform: translateX(-50%);
    box-shadow: 0 0 6px var(--brass);
}
.plane-tab__num {
    font-family: 'JetBrains Mono', monospace;
    font-size: .58rem;
    letter-spacing: 2px;
    color: var(--brass);
    font-weight: 700;
}
.plane-tab__name {
    font-family: 'Oswald', sans-serif;
    font-size: .85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
}
.plane-strip__sep {
    width: 1px;
    height: 28px;
    background: var(--line);
    margin: 0 .15rem;
}

/* =====================================================
   BOTTOM AUTO-HIDE ACTION DOCK
   Default: hidden, only a thin brass tab peeks out.
   Mouse over the bottom area or the tab -> slides up.
   ===================================================== */

/* Invisible hot-zone at the bottom that triggers the dock */
.dock-hover-zone {
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    height: 64px;
    z-index: 7;
}

.action-dock {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) translateY(calc(100% - 6px));
    display: flex; flex-direction: row; align-items: center; gap: 0;
    padding: .55rem .8rem;
    background: rgba(7, 16, 26, 0.78);
    border: var(--hair);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    backdrop-filter: blur(12px);
    z-index: 9;
    transition: transform .55s cubic-bezier(.2,.7,.1,1);
}
/* The thin brass handle that hints the dock is there */
.action-dock::before {
    content: '';
    position: absolute;
    top: -1px; left: 50%;
    transform: translateX(-50%);
    width: 56px; height: 2px;
    background: var(--brass);
    box-shadow: 0 0 10px var(--brass);
    border-radius: 2px;
    opacity: .85;
    transition: opacity .3s ease, width .4s ease;
}
.action-dock:hover::before,
.dock-hover-zone:hover ~ .action-dock::before { opacity: 0; }

/* Hover anywhere near the bottom OR over the dock itself -> slide up */
.dock-hover-zone:hover ~ .action-dock,
.action-dock:hover,
.action-dock:focus-within,
.action-dock.open {
    transform: translateX(-50%) translateY(0);
}

/* Initially-revealed state still positions correctly */
body.revealed .action-dock { /* same transform as default */ }

.dock-btn {
    background: transparent;
    border: 0;
    padding: .5rem .7rem;
    color: var(--text-dim);
    cursor: pointer;
    display: flex; flex-direction: row; align-items: center; gap: .35rem;
    font-family: 'Oswald', sans-serif;
    font-size: .68rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 500;
    transition: color .25s ease, background .25s ease;
    border-radius: 2px;
}
.dock-btn i { font-size: .95rem; }
.dock-btn:hover { color: var(--text); background: rgba(184,145,90,.07); }
.dock-btn--toggle[aria-pressed="true"],
.dock-btn.active {
    color: var(--brass-bright);
    background: rgba(184,145,90,.15);
    box-shadow: inset 0 0 12px rgba(184,145,90,.18);
}
.dock-btn__lbl { display: inline-block; }
.dock-sep {
    width: 1px;
    height: 22px;
    background: var(--line);
    margin: 0 .25rem;
}

@media (max-width: 720px) {
    .dock-btn__lbl { display: none; }
    .dock-btn { padding: .55rem .55rem; }
    /* Keep dock open on touch devices since hover doesn't work */
    .action-dock { transform: translateX(-50%) translateY(0) !important; }
    .action-dock::before { display: none; }
}

/* =====================================================
   INFO CARD (slides in from the right)
   ===================================================== */
.info-card {
    position: absolute;
    top: 0; right: 0;
    width: min(420px, 90vw);
    height: 100%;
    padding: clamp(24px, 4vh, 48px) clamp(20px, 3vw, 36px);
    background: rgba(10, 18, 24, 0.92);
    border-left: var(--hair);
    backdrop-filter: blur(14px);
    transform: translateX(100%);
    transition: transform .6s cubic-bezier(.2,.7,.1,1);
    z-index: 20;
    overflow-y: auto;
}
.info-card.open { transform: translateX(0); }
.info-card[aria-hidden="false"] { transform: translateX(0); }

.info-card__close {
    position: absolute;
    top: 14px; right: 14px;
    background: transparent;
    border: var(--hair);
    color: var(--text-dim);
    width: 28px; height: 28px;
    border-radius: 2px;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}
.info-card__close:hover { color: var(--brass-bright); border-color: var(--brass-deep); }

.info-card__eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: .62rem;
    letter-spacing: 3px;
    color: var(--brass);
    margin: 0 0 .8rem;
    text-transform: uppercase;
}
.info-card__title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 0 .6rem;
    color: var(--text);
}
.info-card__title::after {
    content: '';
    display: block;
    width: 36px; height: 1px;
    background: var(--brass);
    margin-top: .8rem;
}
.info-card__lead {
    font-size: .85rem;
    color: var(--text-dim);
    line-height: 1.6;
    margin: 1rem 0;
}

/* =====================================================
   MORE DRAWER (slides up from the bottom)
   ===================================================== */
.more-drawer {
    position: absolute;
    left: 0; right: 0;
    bottom: 0;
    background: rgba(10, 18, 24, 0.95);
    border-top: var(--hair);
    backdrop-filter: blur(14px);
    padding: 2rem 2rem 1.4rem;
    transform: translateY(100%);
    transition: transform .55s cubic-bezier(.2,.7,.1,1);
    z-index: 19;
}
.more-drawer.open,
.more-drawer[aria-hidden="false"] { transform: translateY(0); }

.more-drawer__handle {
    position: absolute;
    top: 10px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 3px;
    background: var(--line-bright);
    border-radius: 3px;
    opacity: .5;
}
.more-drawer__close {
    position: absolute;
    top: 14px; right: 18px;
    background: transparent;
    border: var(--hair);
    color: var(--text-dim);
    width: 28px; height: 28px;
    border-radius: 2px;
    font-size: 1.1rem; line-height: 1;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
}
.more-drawer__close:hover { color: var(--brass-bright); border-color: var(--brass-deep); }

.more-drawer__inner {
    max-width: 1100px;
    margin: 0 auto;
}

.ctrl-label {
    font-family: 'Oswald', sans-serif;
    font-size: .66rem;
    letter-spacing: 3px;
    color: var(--muted);
    margin: 0 0 .5rem;
    text-transform: uppercase;
    font-weight: 500;
}

/* =====================================================
   OVERLAY BACKDROP (dims viewport when card/drawer open)
   ===================================================== */
.overlay-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease;
    z-index: 15;
}
.overlay-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

/* =====================================================
   HANGAR DOOR TRANSITION
   Two metal panels slide in from top/bottom, the plane
   swaps invisibly behind them, then the doors retract.
   ===================================================== */
.hangar-doors {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 25;
    overflow: hidden;
}
.hangar-door {
    position: absolute;
    left: 0; right: 0;
    height: 51%;
    transition: top .55s cubic-bezier(.55, 0, .2, 1),
                bottom .55s cubic-bezier(.55, 0, .2, 1);
    will-change: top, bottom;
}
.hangar-door--top {
    top: -55%;   /* fully off-screen above by default */
    background:
        repeating-linear-gradient(0deg, transparent 0, transparent 30px, rgba(255,255,255,0.018) 30px, rgba(255,255,255,0.018) 31px),
        linear-gradient(180deg, #03070b 0%, #0a1620 100%);
    border-bottom: 1px solid var(--brass);
    box-shadow: 0 6px 22px rgba(0,0,0,.75), 0 2px 18px rgba(184,145,90,.5);
}
.hangar-door--bottom {
    bottom: -55%;   /* fully off-screen below by default */
    background:
        repeating-linear-gradient(0deg, transparent 0, transparent 30px, rgba(255,255,255,0.018) 30px, rgba(255,255,255,0.018) 31px),
        linear-gradient(180deg, #0a1620 0%, #03070b 100%);
    border-top: 1px solid var(--brass);
    box-shadow: 0 -6px 22px rgba(0,0,0,.75), 0 -2px 18px rgba(184,145,90,.5);
}
.hangar-doors.closed .hangar-door--top    { top: 0; }
.hangar-doors.closed .hangar-door--bottom { bottom: 0; }

/* Brand watermark — fades in only when doors are fully closed */
.hangar-doors__brand {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Oswald', sans-serif;
    font-size: clamp(.9rem, 2vw, 1.4rem);
    letter-spacing: 10px;
    color: var(--brass);
    text-transform: uppercase;
    font-weight: 500;
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 26;
    text-shadow: 0 0 14px rgba(184,145,90,.4);
}
.hangar-doors.closed .hangar-doors__brand {
    opacity: 1;
    transition: opacity .25s ease .35s;   /* wait for doors to nearly close */
}