/* ========== Page Transition Overlay (v22) ==========
   Brand wipe between the five static pages: slides up to cover before
   navigation, arrives covering, then slides away. Injected by
   js/page-transition.js. States:
     (default)  hidden below the viewport
     .pt-cover  covering the screen
     .pt-leave  sliding out above the viewport
   v22: field-manual dressing — blueprint grid, scanline, corner HUD labels,
   sonar pings behind the floating logo, rising brand bubbles, destination
   readout. All pure CSS loops; pacing unchanged (280ms in / 420ms out). */

.pt-overlay {
    position: fixed;
    inset: 0;
    z-index: 10002; /* above gift overlay (10001) and navbar (10000) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 18px;
    background: #F5EFEA;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
    visibility: hidden;
    overflow: hidden;
}

[data-theme="dark"] .pt-overlay {
    background: #0C0E0D;
}

.pt-overlay.pt-cover {
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}

.pt-overlay.pt-leave {
    transform: translateY(-100%);
    transition: transform 0.42s cubic-bezier(0.65, 0, 0.35, 1);
    visibility: visible;
}

/* Instant cover on arrival (no slide-in animation) */
.pt-overlay.pt-instant {
    transition: none;
}

/* Everything inside fades as the overlay departs */
.pt-overlay > * {
    transition: opacity 0.2s ease;
}

.pt-overlay.pt-leave > * {
    opacity: 0;
}

/* --- Ambient layer: blueprint grid + travelling scanline + corner HUD --- */

.pt-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(19, 19, 18, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(19, 19, 18, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
}

[data-theme="dark"] .pt-grid {
    background-image:
        linear-gradient(rgba(242, 241, 234, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 241, 234, 0.05) 1px, transparent 1px);
}

.pt-scan {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(62, 180, 137, 0.35);
    opacity: 0.35;
    animation: ptScan 1.7s linear infinite;
}

@keyframes ptScan {
    from { transform: translateY(0); }
    to { transform: translateY(100vh); }
}

.pt-hud {
    position: absolute;
    font-family: 'Share Tech Mono', ui-monospace, 'Consolas', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    color: rgba(22, 22, 19, 0.38);
}

[data-theme="dark"] .pt-hud {
    color: rgba(242, 241, 234, 0.32);
}

.pt-hud b {
    font-weight: 400;
    color: #2E9B74;
}

[data-theme="dark"] .pt-hud b {
    color: #57D9A9;
}

.pt-hud-tl { top: 24px; left: 28px; }
.pt-hud-tr { top: 24px; right: 28px; text-align: right; }
.pt-hud-bl { bottom: 24px; left: 28px; }
.pt-hud-br { bottom: 24px; right: 28px; text-align: right; }

@media (max-width: 768px) {
    .pt-hud { display: none; }
}

/* --- Centre stage: floating logo with sonar pings, label, bar, readout --- */

.pt-logo-wrap {
    position: relative;
    width: 56px;
    height: 56px;
}

.pt-logo {
    position: relative;
    width: 56px;
    height: 56px;
    z-index: 1;
    animation: ptFloat 2.2s ease-in-out infinite;
}

@keyframes ptFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.pt-ping {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border: 1px solid rgba(62, 180, 137, 0.55);
    border-radius: 50%;
    opacity: 0;
    animation: ptPing 1.7s ease-out infinite;
}

.pt-ping.p2 {
    animation-delay: 0.85s;
}

[data-theme="dark"] .pt-ping {
    border-color: rgba(87, 217, 169, 0.5);
}

@keyframes ptPing {
    0% { transform: scale(0.9); opacity: 0.6; }
    100% { transform: scale(2.3); opacity: 0; }
}

.pt-label {
    font-family: 'Share Tech Mono', ui-monospace, 'Consolas', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    color: #161613;
}

[data-theme="dark"] .pt-label {
    color: #F2F1EA;
}

.pt-bar {
    width: 132px;
    height: 8px;
    background: repeating-linear-gradient(-45deg, #3EB489 0 8px, transparent 8px 16px);
    background-size: 23px 8px;
    animation: ptBarSlide 0.7s linear infinite;
}

[data-theme="dark"] .pt-bar {
    background: repeating-linear-gradient(-45deg, #57D9A9 0 8px, transparent 8px 16px);
    background-size: 23px 8px;
}

@keyframes ptBarSlide {
    from { background-position: 0 0; }
    to { background-position: 23px 0; }
}

.pt-dest {
    font-family: 'Share Tech Mono', ui-monospace, 'Consolas', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    color: #2E9B74;
}

[data-theme="dark"] .pt-dest {
    color: #57D9A9;
}

/* --- Brand bubbles drifting up from below the centre --- */

.pt-bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pt-bubbles i {
    position: absolute;
    bottom: -40px;
    border: 1px solid rgba(62, 180, 137, 0.55);
    border-radius: 50%;
    opacity: 0;
    animation: ptRise 3.4s linear infinite;
}

[data-theme="dark"] .pt-bubbles i {
    border-color: rgba(87, 217, 169, 0.5);
}

.pt-bubbles i::after {
    content: '';
    position: absolute;
    top: 22%;
    left: 22%;
    width: 22%;
    height: 22%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
}

.pt-bubbles i:nth-child(1) { left: 30%; width: 10px; height: 10px; animation-delay: 0s; }
.pt-bubbles i:nth-child(2) { left: 52%; width: 14px; height: 14px; animation-delay: 1.15s; }
.pt-bubbles i:nth-child(3) { left: 68%; width: 8px; height: 8px; animation-delay: 2.3s; }

@keyframes ptRise {
    0% { transform: translateY(0); opacity: 0; }
    12% { opacity: 0.5; }
    85% { opacity: 0.35; }
    100% { transform: translateY(-72vh); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pt-overlay,
    .pt-overlay.pt-leave {
        transition: none;
    }
    .pt-bar,
    .pt-scan,
    .pt-logo,
    .pt-ping,
    .pt-bubbles i {
        animation: none;
    }
    .pt-scan,
    .pt-bubbles i {
        display: none;
    }
}