/* ============================================
   EDWARD OBI ACCESS TERMINAL – style.css
   Pixel-perfect copy of Preloader layout & logic
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Figtree:wght@400;500;600;700&display=swap');

@font-face {
    font-family: "Chakra Petch";
    src: url("../assets/fonts/Chakra_Petch/ChakraPetch-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Chakra Petch";
    src: url("../assets/fonts/Chakra_Petch/ChakraPetch-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Chakra Petch";
    src: url("../assets/fonts/Chakra_Petch/ChakraPetch-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Chakra Petch";
    src: url("../assets/fonts/Chakra_Petch/ChakraPetch-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Figtree";
    src: url("../assets/fonts/Figtree/static/Figtree-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Figtree";
    src: url("../assets/fonts/Figtree/static/Figtree-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Figtree";
    src: url("../assets/fonts/Figtree/static/Figtree-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Figtree";
    src: url("../assets/fonts/Figtree/static/Figtree-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --shiny-cta-bg: #07020d;
    --shiny-cta-bg-subtle: #180634;
    --shiny-cta-fg: #ffffff;
    --shiny-cta-highlight: #7A2CEF;
    --shiny-cta-highlight-subtle: #9B5DF8;
}

@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --gradient-angle-offset {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --gradient-percent {
    syntax: "<percentage>";
    initial-value: 16%;
    inherits: false;
}

@property --gradient-shine {
    syntax: "<color>";
    initial-value: #CAA9FB;
    inherits: false;
}

/* ── Reset ── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000000;
    color: #ffffff;
    font-family: "Chakra Petch", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.terminal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: 9999;
    font-family: "Chakra Petch", sans-serif;
    color: #ffffff;
    overflow: hidden;
    pointer-events: auto;
    visibility: visible;
    opacity: 0;
    animation: terminalFadeIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes terminalFadeIn {
    from {
        opacity: 0;
        filter: blur(15px);
        transform: scale(1.04);
    }
    to {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}

/* ── Vertical Rails (Exact match to preloader) ── */
.rail {
    position: absolute;
    z-index: 10;
    width: 33px;
    top: 6%;
    bottom: 6%;
    display: flex;
    flex-direction: column;
    opacity: 0.3;
}
.rail--left {
    left: 3.13%;
}
.rail--right {
    right: 4.03%;
}

.rail-bg {
    fill: #000000;
    pointer-events: none;
}

.rail-middle::after {
    content: '';
    position: absolute;
    top: -1px;
    bottom: -1px;
    background: #000000;
    pointer-events: none;
    z-index: -1;
}

.rail--left .rail-middle::after {
    left: 0;
    right: 3.413%; /* 100% - 96.587% */
}

.rail--right .rail-middle::after {
    left: 1.984%;
    right: 0;
}

.rail-top {
    flex-shrink: 1;
    width: 100%;
    height: clamp(80px, 30svh, 354px);
    max-height: 42%;
    display: block;
    min-height: 0;
}
.rail-bottom {
    flex-shrink: 1;
    width: 100%;
    height: clamp(80px, 30svh, 354px);
    max-height: 42%;
    display: block;
    min-height: 0;
}
.rail-middle {
    flex: 1;
    position: relative;
    min-height: 0;
}

.rail--left .rail-middle::before {
    content: '';
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 96.587%;
    transform: translateX(-50%);
    width: 1.1px;
    background: white;
}
.rail--right .rail-middle::before {
    content: '';
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 1.984%;
    transform: translateX(-50%);
    width: 1.1px;
    background: white;
}

.rail-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffffff;
    opacity: 1 !important;
    transform: translate(-50%, -50%);
}
.rail--left .rail-dot {
    left: calc(50% - 2px);
}
.rail--right .rail-dot {
    left: calc(50% + 2px);
}
.rail-dot--1 {
    top: 25%;
}
.rail-dot--2 {
    top: 74%;
}
.rail-top--mobile {
    display: none !important;
}

/* ── Info Panels (Exact match to preloader hud panels) ── */
.info-panel {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
}

.info-panel--signal {
    top: clamp(20px, 13svh, 120px);
    left: 8.92%;
}

.info-panel--close {
    top: clamp(20px, 13svh, 120px);
    right: 8.4%;
}

.bracket-slashes {
    display: flex;
    align-items: center;
    gap: 2px;
    transform: translateY(-0.5px);
}
.bracket-slashes svg {
    width: 5px;
    height: 8.5px;
    display: block;
}

.panel-label {
    font-weight: 500;
    font-size: 11px;
    line-height: 1;
    color: #ffffff;
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Blinking status dot (Identical to preloader signal dot) ── */
.status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #7A2CEF;
    box-shadow: 0px 0px 72px 12px rgba(155, 93, 248, 0.7);
    flex-shrink: 0;
    animation: statusBlink 1.5s infinite ease-in-out;
}

@keyframes statusBlink {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

/* Close Button positioning inside top right panel */
.close-btn {
    width: 16px;
    height: 16px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.close-btn:hover {
    opacity: 1;
}
.close-btn img {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Scalable wrapper: HUD + auth + socials as one unit (rails stay outside) ── */
.terminal-scalable {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    pointer-events: none;
}
.terminal-scalable > * {
    pointer-events: auto;
}

/* ── Terminal Main: flex column ── */
.terminal-main {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* vmin responds to BOTH width and height — the smaller dimension drives the value */
    padding-top: clamp(40px, 18vmin, 180px);
    padding-bottom: clamp(140px, 22svh, 200px);
    pointer-events: none;
    overflow: hidden;
}
.terminal-main > * {
    pointer-events: auto;
}

/* ── Center Progress Section ── */
.progress-section {
    flex: 1;
    min-height: 0;
    position: relative;
    width: clamp(300px, min(46vw, 56vmin), 560px);
    max-width: 85vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 2svh, 28px);
    padding-bottom: clamp(24px, 6svh, 50px);
}

/* Auth text titles */
.auth-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 2svh, 20px);
}

.auth-title {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    color: #ffffff;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.05em;
}

.auth-subtitle {
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 1.2;
    color: #ffffff;
    opacity: 0.8;
    text-align: center;
}

/* Form section inputs */
.form-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(2px, 0.8svh, 8px);
    margin-top: 10px !important;
}

.input-group, .btn-group {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 450 / 61;
    margin: 0 auto;
}

.input-group .union-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    object-fit: contain;
    opacity: 0.5;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.btn-group .union-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    object-fit: contain;
}

.input-group:hover .union-bg,
.input-group:focus-within .union-bg {
    opacity: 0.8;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.4));
}

.input-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-family: 'Chakra Petch', sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 1;
    opacity: 0.5;
    /* Left-aligned: left padding for text start, right padding to avoid overlap with eye icon */
    padding: 0 16% 0 9%;
    text-align: left;
    text-transform: uppercase;
    transition: opacity 0.2s ease;
}
.input-field::placeholder {
    color: #ffffff;
    opacity: 1;
}
.input-field:focus {
    opacity: 1;
}
.input-field:focus::placeholder {
    opacity: 0.5;
}

.eye-toggle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 8.66%;
    width: 14px;
    height: 14px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}
.eye-toggle:hover {
    opacity: 1;
}
.eye-toggle img {
    width: 100%;
    height: 100%;
    display: block;
}

.btn-group {
    cursor: pointer;
    opacity: 0.9;
    transition: transform 0.18s ease-in-out, filter 0.3s ease, opacity 0.3s ease;
}
.btn-group:hover {
    opacity: 1;
    filter: brightness(1.12);
}
.btn-group:active {
    transform: scale(0.96);
}
.btn-group:hover .btn-arrow {
    transform: translateY(-50%) translateX(5px);
}

/* Shiny CTA Container & Layers */
.shiny-cta-container {
    --animation: gradient-angle linear infinite;
    --duration: 15s;
    --shadow-size: 2px;
    isolation: isolate;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 61" preserveAspectRatio="none"><path d="M419.048 60.5L433.902 46.1406L449.25 30.2979V0.5H0.5V30.2979L15.8477 46.1406L30.7021 60.5H419.048Z" fill="black"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 61" preserveAspectRatio="none"><path d="M419.048 60.5L433.902 46.1406L449.25 30.2979V0.5H0.5V30.2979L15.8477 46.1406L30.7021 60.5H419.048Z" fill="black"/></svg>');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
        conic-gradient(
            from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
            transparent 0%,
            var(--shiny-cta-highlight) calc(var(--gradient-percent) * 0.8),
            var(--gradient-shine) calc(var(--gradient-percent) * 2),
            var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3.2),
            transparent calc(var(--gradient-percent) * 4.5)
        ) border-box;
    box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);
    --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);
    transition: var(--transition);
    transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine;
}

.shiny-cta-container::before,
.shiny-cta-container::after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* Dots pattern (particles hidden on primary state, revealed on hover under torchlight) */
.shiny-cta-container::before {
    --size: calc(100% - var(--shadow-size) * 3);
    --position: 2px;
    --space: calc(var(--position) * 2);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(
        circle at var(--position) var(--position),
        white calc(var(--position) / 4),
        transparent 0
    ) padding-box;
    background-size: var(--space) var(--space);
    background-repeat: space;
    -webkit-mask-image: radial-gradient(circle 75px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, rgba(0, 0, 0, 0.3) 55%, transparent 100%);
    mask-image: radial-gradient(circle 75px at var(--mouse-x, 50%) var(--mouse-y, 50%), black 0%, rgba(0, 0, 0, 0.3) 55%, transparent 100%);
    opacity: 0;
    z-index: 1;
    transition: opacity 0.35s ease, -webkit-mask-image 0.35s ease, mask-image 0.35s ease;
}

/* Inner shimmer */
.shiny-cta-container::after {
    --animation: shimmer linear infinite;
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(
        -50deg,
        transparent,
        var(--shiny-cta-highlight),
        transparent
    );
    -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, black);
    mask-image: radial-gradient(circle at bottom, transparent 40%, black);
    opacity: 0.6;
    z-index: 2;
}

/* Hover Glow (smooth bottom-shifted glow seamlessly fading to black towards top) */
.shiny-cta-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    background: radial-gradient(ellipse at 50% 175%, var(--shiny-cta-highlight) 0%, rgba(122, 44, 239, 0.35) 45%, transparent 75%);
    box-shadow: inset 0 -10px 24px -2px var(--shiny-cta-highlight);
    transition: opacity var(--transition, 800ms);
    -webkit-animation: calc(var(--duration, 7s) * 1.5) breathe linear infinite;
    animation: calc(var(--duration, 7s) * 1.5) breathe linear infinite;
}

.shiny-cta-container,
.shiny-cta-container::before,
.shiny-cta-container::after {
    animation: var(--animation) var(--duration),
        var(--animation) calc(var(--duration) / 0.4) reverse paused;
    animation-composition: add;
}

.btn-group:is(:hover, :focus-visible) .shiny-cta-container {
    --gradient-percent: 25%;
    --gradient-angle-offset: 95deg;
    --gradient-shine: var(--shiny-cta-highlight-subtle);
}

.btn-group:is(:hover, :focus-visible) .shiny-cta-container,
.btn-group:is(:hover, :focus-visible) .shiny-cta-container::before,
.btn-group:is(:hover, :focus-visible) .shiny-cta-container::after {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.btn-group:is(:hover, :focus-visible) .shiny-cta-container::before {
    opacity: 0.85;
}

.btn-group:is(:hover, :focus-visible) .shiny-cta-glow {
    opacity: 0.85;
}

.btn-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 500;
    font-size: 11px;
    color: #ffffff;
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
    text-align: center;
    z-index: 4;
}

.btn-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 22.56%;
    width: 5px;
    height: 10px;
    pointer-events: none;
    transition: transform 0.3s ease;
    z-index: 2;
}

/* Shiny CTA Keyframes */
@-webkit-keyframes gradient-angle {
    to {
        --gradient-angle: 360deg;
    }
}
@keyframes gradient-angle {
    to {
        --gradient-angle: 360deg;
    }
}

@-webkit-keyframes shimmer {
    to {
        transform: rotate(360deg);
    }
}
@keyframes shimmer {
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes breathe {
    from, to {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}
@keyframes breathe {
    from, to {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* Divider & Request Access Link (inside center group) */
.divider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: clamp(12px, 2.5svh, 31px);
    width: 72.4%;
    margin: clamp(0px, 1svh, 12px) auto 0 auto;
    max-width: 100%;
}

.divider-graphic {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
    opacity: 0.6;
}

/* Revert divider graphic to primary static state on interactive states (hover/active/focus) */
.divider-graphic.paused .hexagon-pulse,
.progress-section:has(.input-group:is(:hover, :focus-within), .btn-group:is(:hover, :focus-visible, :active), .request-link:is(:hover, :focus-visible, :active)) .divider-graphic .hexagon-pulse {
    opacity: 0 !important;
    animation: none !important;
}

.divider-graphic.paused .divider-path-left,
.divider-graphic.paused .divider-path-right,
.progress-section:has(.input-group:is(:hover, :focus-within), .btn-group:is(:hover, :focus-visible, :active), .request-link:is(:hover, :focus-visible, :active)) .divider-graphic .divider-path-left,
.progress-section:has(.input-group:is(:hover, :focus-within), .btn-group:is(:hover, :focus-visible, :active), .request-link:is(:hover, :focus-visible, :active)) .divider-graphic .divider-path-right {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
}

.hexagon-base {
    transform-origin: 163px 11.5px;
}

.hexagon-pulse {
    transform-origin: 163px 11.5px;
    animation: hexagon-ghost-pulse 3.0s infinite cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
}

@keyframes hexagon-ghost-pulse {
    0% {
        transform: scale(1);
        opacity: 0.95;
        stroke-width: 1.4px;
    }
    45% {
        opacity: 0.2;
    }
    65% {
        transform: scale(2.4);
        opacity: 0;
        stroke-width: 0.2px;
    }
    100% {
        transform: scale(2.6);
        opacity: 0;
    }
}

.divider-path-left {
    transform-origin: 140.631px 11.3702px;
    animation: fill-line-left 3.0s infinite cubic-bezier(0.25, 1, 0.5, 1);
}

.divider-path-right {
    transform-origin: 185.369px 11.8703px;
    animation: fill-line-right 3.0s infinite cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes fill-line-left {
    0% {
        transform: scaleX(0);
        opacity: 1;
    }
    65% {
        transform: scaleX(1);
        opacity: 0.85;
    }
    100% {
        transform: scaleX(1);
        opacity: 0;
    }
}

@keyframes fill-line-right {
    0% {
        transform: scaleX(0);
        opacity: 1;
    }
    65% {
        transform: scaleX(1);
        opacity: 0.85;
    }
    100% {
        transform: scaleX(1);
        opacity: 0;
    }
}

.request-link {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
    margin-top: -3px;
    min-height: 16px;
}
.request-link:hover {
    opacity: 0.9;
}

.request-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 500;
    font-size: 11px;
    color: #CAA9FB;
    opacity: 0.7;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.request-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc(50% + 54px);
    width: 5px;
    height: 10px;
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
    opacity: 0.7;
}

.request-link:hover .request-label {
    color: #ffffff;
    opacity: 1;
}

.request-link:hover .request-arrow {
    transform: translateY(-50%) translateX(4px);
    filter: brightness(0) invert(1);
    opacity: 1;
}

.bottom-section {
    position: absolute;
    bottom: clamp(24px, 6svh, 60px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 600px;
    padding: 0 20px;
}

.logos-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Tagline label with fluid gradient */
.tagline {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 220px !important;
    height: 14px;
    margin: 0 auto 6px auto !important;
    opacity: 0.85;
    transform: translateY(-2px);
}

.tagline-svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Social Row (matches .date-text positioning at very bottom) */
.proto-links {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 8px;
}

.proto-anchor {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}
.proto-anchor:hover {
    opacity: 0.85;
}

.proto-glyph {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

#ln-handle .proto-glyph {
    transform: scale(1.1);
}

.proto-text {
    font-weight: 500;
    font-size: 15px;
    color: #ffffff;
    opacity: 0.7;
    text-transform: uppercase;
    text-align: center;
}

.proto-divider {
    width: 1px;
    height: 28px;
    background: #ffffff;
    opacity: 0.6;
    flex-shrink: 0;
}

/* Decorative Edge markers */
.edge-markers {
    position: absolute;
    right: clamp(20px, 5.5vw, 80px);
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 101px;
    pointer-events: none;
    opacity: 0.4;
}

/* ══════════════════════════════════════════
   RESPONSIVE – MOBILE (max-width: 480px)
   ══════════════════════════════════════════ */
@media (max-width: 480px) {
    .rail {
        width: 20px;
        top: 4%;
        bottom: 3%;
    }
    .rail--left { left: 3%; }
    .rail--right { right: 3%; }
    .rail-top--desktop {
        display: none !important;
    }
    .rail-top--mobile {
        display: block !important;
    }
    
    .rail-top,
    .rail-bottom {
        height: clamp(80px, 38svh, 354px);
        max-height: 45%;
    }

    .edge-markers {
        display: none;
    }

    /* Stacked HUD panels on mobile – X on top, Quantum Link below (matches reference) */
    .info-panel--close {
        top: clamp(14px, 8svh, 70px);
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
    }

    .info-panel--signal {
        top: clamp(36px, 17svh, 140px);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    .bracket-slashes svg {
        width: 6.5px;
        height: 11.5px;
    }
    .panel-label {
        font-size: 14px;
    }
    .status-dot {
        width: 7px;
        height: 7px;
    }
    
    .close-btn {
        width: 14px;
        height: 14px;
    }

    /* Center container mobile (scaled down further) */
    .terminal-main {
        /* svh = viewport HEIGHT – stacked HUD needs more room */
        padding-top: clamp(40px, 15svh, 140px);
        padding-bottom: clamp(16px, 4svh, 50px);
    }
    .progress-section {
        width: clamp(220px, 65vw, 340px);
        max-width: 85vw;
        gap: clamp(10px, 2svh, 16px);
        margin-top: -5px;
    }

    .auth-section {
        gap: 5px;
    }
    .auth-title {
        font-size: clamp(15px, 3.2vw, 20px);
    }
    .auth-subtitle {
        font-size: clamp(11px, 2.2vw, 14px);
        transform: translateY(4px);
    }

    /* Form elements mobile */
    .input-field {
        font-size: clamp(10.5px, 2.1vw, 13.5px);
        padding: 0 16% 0 9%;
    }
    .input-field::placeholder {
        font-size: clamp(10.5px, 2.1vw, 13.5px);
    }

    .btn-label, .request-label {
        font-size: clamp(10.5px, 2.1vw, 13.5px);
    }
    .eye-toggle {
        width: clamp(12px, 2.4vw, 16px);
        height: clamp(12px, 2.4vw, 16px);
    }
    .btn-arrow {
        width: clamp(6px, 1.2vw, 8px);
        height: clamp(9px, 1.8vw, 12px);
    }
    .request-arrow {
        width: clamp(6px, 1.2vw, 8px);
        height: clamp(9px, 1.8vw, 12px);
        left: calc(50% + 54px) !important;
    }

    /* Divider Mobile */
    .divider-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: clamp(12px, 2.5svh, 31px);
        width: 100%;
        margin: clamp(0px, 1svh, 12px) auto 0 auto;
        max-width: 100%;
    }

    /* Bottom section mobile */
    .bottom-section {
        gap: 0;
    }


 
     .proto-links {
         gap: 12px;
         margin-top: 6px;
     }
    .proto-glyph {
        width: 38px !important;
        height: 38px !important;
    }
    .proto-text {
        display: none !important;
    }
    .proto-divider {
        height: 16px;
    }
    .tagline {
        height: 13px !important;
        max-width: 204px !important;
    }
}

/* ── Large Phones (481px – 600px) ── */
@media (min-width: 481px) and (max-width: 600px) {
    .rail {
        width: 22px;
        top: 5%;
        bottom: 4%;
    }
    .rail--left { left: 2.5%; }
    .rail--right { right: 2.5%; }
    .rail-top--desktop {
        display: none !important;
    }
    .rail-top--mobile {
        display: block !important;
    }
    
    /* Stacked HUD panels on large phone – X on top, Quantum Link below */
    .info-panel--close {
        top: clamp(14px, 8svh, 70px);
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
    }
    
    .info-panel--signal {
        top: clamp(36px, 17svh, 140px);
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    .bracket-slashes svg {
        width: 6.5px;
        height: 11.5px;
    }
    .panel-label {
        font-size: 14px;
    }
    .status-dot {
        width: 7px;
        height: 7px;
    }
    
    .close-btn {
        width: 14px;
        height: 14px;
    }

    .terminal-main {
        padding-top: clamp(40px, 15svh, 140px);
        padding-bottom: clamp(16px, 4svh, 50px);
    }
    .progress-section {
        width: clamp(240px, 65vw, 340px);
        max-width: 85vw;
        margin-top: -5px;
    }
    
    .bottom-section {
        gap: 0;
    }

    .proto-links {
        gap: 12px;
        margin-top: 6px;
    }
    .proto-glyph {
        width: 38px !important;
        height: 38px !important;
    }
    .proto-text {
        display: none !important;
    }
    .proto-divider {
        height: 16px;
    }
    .tagline {
        height: 13px !important;
        max-width: 204px !important;
    }

    .rail-top,
    .rail-bottom {
        height: clamp(80px, 38svh, 354px);
        max-height: 45%;
    }
}

/* ── Tablet (601px – 1024px) ── */
@media (min-width: 601px) and (max-width: 1024px) {
    .rail {
        width: 26px;
        top: 6%;
        bottom: 5%;
    }
    .rail--left { left: 1.8%; }
    .rail--right { right: 1.8%; }

    .info-panel--signal {
        top: 10%;
        left: calc(6% + 4px);
    }
    .info-panel--close {
        top: 10%;
        right: calc(6% + 4px);
    }
    
    .bracket-slashes svg {
        width: 6.5px;
        height: 11.5px;
    }
    .panel-label {
        font-size: 14px;
    }
    .status-dot {
        width: 7px;
        height: 7px;
    }

    .terminal-main {
        padding: 9% 0 5%;
    }
    .progress-section {
        width: 380px;
        margin-top: 25px;
    }


    .auth-title {
        font-size: 18px;
    }
    .auth-subtitle {
        font-size: 14px;
    }
    .input-field,
    .btn-label,
    .request-label {
        font-size: 13px;
    }
    .eye-toggle {
        width: 16px;
        height: 16px;
    }
    .btn-arrow {
        width: 7px;
        height: 12px;
    }
    .request-arrow {
        width: 7px;
        height: 12px;
        left: calc(50% + 64px) !important;
    }


    .proto-glyph {
        width: 40px !important;
        height: 40px !important;
    }
    .tagline {
        height: 13px !important;
        max-width: 204px !important;
    }

    .rail-top,
    .rail-bottom {
        height: clamp(80px, 38svh, 354px);
        max-height: 45%;
    }
}

/* ────────────────────────────────────────────────
   HEIGHT BREAKPOINTS – Progressive scaling
   Everything shrinks proportionally as screen height reduces
   ──────────────────────────────────────────────── */

/* Short screens – 700px and below, DESKTOP ONLY (side-by-side panel layout) */
@media (max-height: 700px) and (min-width: 601px) {
    .t    .auth-subtitle {
        /* shrink, never hide */
        font-size: 12px;
    }
    .input-field, .btn-label, .request-label {
        font-size: 11px;
    }
    .proto-glyph {
        width: clamp(30px, 4.5svh, 48px);
        height: clamp(30px, 4.5svh, 48px);
    }
    .proto-text {
        font-size: clamp(12px, 1.6svh, 16px);
    }
    .proto-divider {
        height: clamp(20px, 3.2svh, 32px);
    }

    .proto-links {
        gap: clamp(14px, 2.5svh, 26px);
        margin-top: clamp(4px, 0.8svh, 10px);
    }
    /* Rails: keep top/bottom position proportional, do NOT change height */
    .rail {
        top: 4%;
        bottom: 4%;
    }
}

/* Very short screens – 450px and below (all screens: content scaling) */
@media (max-height: 450px) {
    .terminal-main {
        padding-top: clamp(16px, 6svh, 45px);
        padding-bottom: clamp(8px, 2.5svh, 25px);
    }
}
/* Very short screens – 450px and below, DESKTOP ONLY (side-by-side panel layout) */
@media (max-height: 450px) and (min-width: 601px) {
    .info-panel--signal,
    .info-panel--close {
        top: clamp(10px, 7svh, 50px);
    }
}
/* Very short screens – 450px and below (content shrinking, all screens) */
@media (max-height: 450px) {
    .progress-section {
        gap: clamp(12px, 2.5svh, 27px);
        padding-bottom: 0;
    }
    .auth-section {
        gap: clamp(10px, 3svh, 28px);
    }
    .auth-title {
        font-size: 14px;
    }
    .auth-subtitle {
        /* shrink, never hide */
        font-size: 11px;
    }
    .input-field, .btn-label, .request-label {
        font-size: 10px;
    }
    .proto-glyph {
        width: clamp(18px, 3svh, 30px);
        height: clamp(18px, 3svh, 30px);
    }
    .proto-text { display: none; }
    .proto-divider {
        height: clamp(12px, 2svh, 20px);
    }
    .proto-links {
        gap: clamp(10px, 1.5svh, 18px);
        margin-top: clamp(2px, 0.5svh, 6px);
    }
 
    .panel-label { font-size: 9px; }
    .status-dot { width: 4px; height: 4px; }
    .close-btn { width: 11px; height: 11px; }
    /* Rails: do NOT override height – let base styles govern */
    .rail {
        top: 3%;
        bottom: 3%;
    }
}
 
 
/* Ultra short – 300px and below, DESKTOP (panels side-by-side, tight padding ok) */
@media (max-height: 300px) and (min-width: 601px) {
    .terminal-main {
        padding-top: clamp(16px, 8svh, 40px);
        padding-bottom: clamp(6px, 2svh, 14px);
        overflow-y: auto;
    }
}
 
/* Ultra short – 300px and below, MOBILE (stacked panels need HUD clearance) */
@media (max-height: 300px) and (max-width: 600px) {
    .terminal-main {
        /* Must stay large enough to clear X + Quantum Link stacked above */
        padding-top: clamp(40px, 18svh, 110px);
        padding-bottom: clamp(6px, 2svh, 14px);
        overflow-y: auto;
    }
}
 
/* Mobile & Small Screens Landscape Mode / Short Heights (Fix overlap & proportions) */
@media (max-height: 550px) and (max-width: 600px) {
    .terminal-main {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-top: clamp(24px, 8svh, 60px) !important;
        padding-bottom: clamp(80px, 16svh, 110px) !important;
    }
}
@media (max-height: 550px) and (min-width: 601px) {
    .terminal-main {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-top: clamp(30px, 8svh, 60px) !important;
        padding-bottom: clamp(30px, 8svh, 60px) !important;
    }
}
@media (max-height: 550px) {
    .progress-section {
        width: clamp(220px, 48vw, 290px) !important;
        padding-bottom: clamp(16px, 4svh, 32px) !important;
        gap: clamp(8px, 1.8svh, 14px) !important;
        margin-top: 0 !important;
    }
    .auth-title {
        font-size: 14px !important;
    }
    .auth-subtitle {
        font-size: 11px !important;
    }
    .input-field,
    .btn-label,
    .request-label {
        font-size: 10px !important;
    }
    .eye-toggle {
        width: 12px !important;
        height: 12px !important;
    }
    .btn-arrow,
    .request-arrow {
        width: 5px !important;
        height: 9px !important;
    }
    .bottom-section {
        position: absolute !important;
        bottom: clamp(20px, 5svh, 36px) !important;
        left: 50% !important;
        transform: translateX(-50%);
    }
}
@media (max-height: 550px) and (max-width: 950px) {
    .proto-glyph {
        width: 36px !important;
        height: 36px !important;
    }
}
 
/* Ultra-short screen heights (400px and below): scale entire group down proportionally so it never goes beyond screen */
@media (max-height: 400px) and (max-width: 600px) {
    .terminal-main {
        padding-top: clamp(5px, 2.5svh, 16px) !important;
        padding-bottom: clamp(70px, 18svh, 95px) !important;
    }
}
@media (max-height: 400px) and (min-width: 601px) {
    .terminal-main {
        padding-top: clamp(20px, 5svh, 40px) !important;
        padding-bottom: clamp(20px, 5svh, 40px) !important;
    }
}
@media (max-height: 400px) {
    .progress-section {
        width: clamp(180px, 40vw, 240px) !important;
        gap: clamp(4px, 1.2svh, 8px) !important;
        padding-bottom: clamp(12px, 3.5svh, 24px) !important;
    }
    .auth-section {
        gap: 2px !important;
    }
    .auth-title {
        font-size: 12px !important;
    }
    .auth-subtitle {
        font-size: 9.5px !important;
    }
    .input-field,
    .btn-label,
    .request-label {
        font-size: 8.5px !important;
    }
    .eye-toggle {
        width: 10px !important;
        height: 10px !important;
    }
    .btn-arrow,
    .request-arrow {
        width: 4px !important;
        height: 7px !important;
    }
    .bottom-section {
        bottom: clamp(16px, 4.5svh, 28px) !important;
    }
    .proto-glyph {
        width: 28px !important;
        height: 28px !important;
    }
}

/* Ultra-short screen heights (300px and below): scale down further with scroll safety */
@media (max-height: 300px) and (max-width: 600px) {
    .terminal-main {
        padding-top: clamp(5px, 2.5svh, 16px) !important;
        padding-bottom: clamp(55px, 20svh, 80px) !important;
    }
}
@media (max-height: 300px) and (min-width: 601px) {
    .terminal-main {
        padding-top: clamp(10px, 4svh, 20px) !important;
        padding-bottom: clamp(10px, 4svh, 20px) !important;
    }
}
@media (max-height: 300px) {
    .progress-section {
        width: clamp(150px, 50svh, 195px) !important;
        gap: 4px !important;
        padding-bottom: clamp(8px, 3svh, 16px) !important;
    }
    .auth-section {
        gap: 1px !important;
    }
    .auth-title {
        font-size: 10.5px !important;
    }
    .auth-subtitle {
        font-size: 8.5px !important;
    }
    .input-field,
    .btn-label,
    .request-label {
        font-size: 7.5px !important;
    }
    .eye-toggle {
        width: 9px !important;
        height: 9px !important;
    }
    .btn-arrow,
    .request-arrow {
        width: 3px !important;
        height: 6px !important;
    }
    .bottom-section {
        bottom: clamp(12px, 4svh, 20px) !important;
    }
    .proto-glyph {
        width: 20px !important;
        height: 20px !important;
    }
    .proto-divider {
        height: 10px !important;
    }
    .proto-text {
        display: none !important;
    }
}

@media (max-height: 300px) and (max-width: 600px) {
    .terminal-main {
        padding-top: 70px !important;
    }
}
@media (max-height: 400px) and (max-width: 600px) {
    .terminal-main {
        padding-top: 75px !important;
    }
}
@media (max-height: 550px) and (max-width: 600px) {
    .terminal-main {
        padding-top: 80px !important;
    }
}

/* Desktop screens (1025px and above): Lock exact proportional relationship between SVGs and text matching Image One */
@media (min-width: 1025px) {
    .progress-section {
        width: 350px !important;
        max-width: 85vw;
    }
    .auth-title {
        font-size: 16px !important;
    }
    .auth-subtitle {
        font-size: 12px !important;
    }
    .input-field,
    .btn-label,
    .request-label {
        font-size: 11px !important;
    }
    .eye-toggle {
        width: 14px !important;
        height: 14px !important;
    }
    .btn-arrow,
    .request-arrow {
        width: 5px !important;
        height: 10px !important;
    }
    .rail-top,
    .rail-bottom {
        height: clamp(100px, 35svh, 390px);
        max-height: 45.5%;
    }
    .divider-container {
        width: 66% !important;
    }

}

/* ── HUD Panel CSS scaling (panels outside JS scaler — CSS handles size reduction) ── */

/* DESKTOP only (601px+): scale from corners so they never go inward */
@media (max-height: 450px) and (min-width: 601px) {
    .info-panel--signal {
        transform-origin: top left;
        transform: scale(clamp(0.65, calc(100svh / 450px), 1));
    }
    .info-panel--close {
        transform-origin: top right;
        transform: scale(clamp(0.65, calc(100svh / 450px), 1));
    }
}
@media (max-height: 200px) and (min-width: 601px) {
    .info-panel--signal {
        transform-origin: top left;
        transform: scale(clamp(0.4, calc(100svh / 350px), 0.65));
    }
    .info-panel--close {
        transform-origin: top right;
        transform: scale(clamp(0.4, calc(100svh / 350px), 0.65));
    }
}

/* MOBILE (max-width 600px): keep translateX(-50%) centering, add scale on top */
@media (max-height: 450px) and (max-width: 600px) {
    .info-panel--signal {
        transform-origin: top center;
        transform: translateX(-50%) scale(clamp(0.65, calc(100svh / 450px), 1));
    }
    .info-panel--close {
        transform-origin: top center;
        transform: translateX(-50%) scale(clamp(0.65, calc(100svh / 450px), 1));
    }
}
@media (max-height: 200px) and (max-width: 600px) {
    .info-panel--signal {
        transform-origin: top center;
        transform: translateX(-50%) scale(clamp(0.4, calc(100svh / 350px), 0.65));
    }
    .info-panel--close {
        transform-origin: top center;
        transform: translateX(-50%) scale(clamp(0.4, calc(100svh / 350px), 0.65));
    }
}

/* ── Bottom Section CSS scaling (outside JS scaler — CSS handles size reduction) ── */
@media (max-height: 450px) {
    .bottom-section {
        transform-origin: bottom center;
        transform: translateX(-50%) scale(clamp(0.65, calc(100svh / 450px), 1));
    }
}
@media (max-height: 200px) {
    .bottom-section {
        transform-origin: bottom center;
        transform: translateX(-50%) scale(clamp(0.4, calc(100svh / 350px), 0.65));
    }
}

/* Mobile screens (<601px): Shift request access arrow 2px closer to the centered text */
@media (max-width: 600px) {
    .request-arrow {
        left: calc(50% + 54px) !important;
    }
}