/* ═══════════════════════════════════════════════════════════════════════
   PORTALS HOLOGRAM VIEWER — HUD aesthetic, brand-canon.
   Mirrors xrai brand.css tokens (Satoshi / JetBrains Mono / Iris glow).
   Self-contained: deploys identically at viewer.portals.app AND
   xra1.com/portals/viewer (no cross-deploy stylesheet dependency).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* Portals RN canonical palette — pure-black ground + pale-yellow Iris glow
       + periwinkle telemetry complement. Replaces the old cyan/purple gradient. */
    --bg: #000000;
    --bg-surface: #0E0E0E;
    --bg-surface-hi: #1A1A1A;

    --fg: #FFFFFF;
    --fg-dim: #CCCCCC;
    --muted-soft: #888888;
    --muted: #666666;

    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.18);

    /* Iris glow — single accent for all emphasis */
    --accent: #F7FFA8;
    --accent-hover: #FDFFCC;
    --accent-glow: rgba(247, 255, 168, 0.35);

    /* Periwinkle — scanner / telemetry cues only */
    --secondary: #A8A8FF;
    --error: #e74c3c;

    --r-sm: 2px;
    --r-md: 4px;

    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --t-fast: 0.15s;
    --t-med: 0.32s;

    --font-display: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
    background-color: var(--bg);
    color: var(--fg);
    font-family: var(--font-display);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
    font-feature-settings: 'ss01' 1;
}

.hidden { display: none !important; }

/* ── Scan-line overlay — subtle HUD texture over the whole viewport ────── */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: 50; pointer-events: none;
    background-image: repeating-linear-gradient(
        0deg, transparent 0 3px, rgba(247, 255, 168, 0.015) 3px 4px);
}
body::after {
    content: '';
    position: fixed; left: 0; right: 0; height: 2px; z-index: 50; pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--accent-glow), transparent);
    filter: blur(1px); opacity: 0.35;
    animation: scan-sweep 8s linear infinite;
}
@keyframes scan-sweep {
    0% { transform: translateY(-100vh); }
    100% { transform: translateY(100vh); }
}

/* ── Reticle cursor — desktop only ─────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    body, body * {
        cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><circle cx='12' cy='12' r='1' fill='%23F7FFA8'/><line x1='12' y1='3' x2='12' y2='8' stroke='%23F7FFA8' stroke-width='1'/><line x1='12' y1='16' x2='12' y2='21' stroke='%23F7FFA8' stroke-width='1'/><line x1='3' y1='12' x2='8' y2='12' stroke='%23F7FFA8' stroke-width='1'/><line x1='16' y1='12' x2='21' y2='12' stroke='%23F7FFA8' stroke-width='1'/></svg>") 12 12, crosshair;
    }
}

/* ── Loading state — decoding-reticle, not a generic spinner ───────────── */
.loading-container {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100vh; gap: 28px;
}

.spinner {
    position: relative;
    width: 72px; height: 72px;
}
.spinner::before,
.spinner::after {
    content: ''; position: absolute; inset: 0;
    border-radius: 50%;
    border: 1px solid transparent;
}
/* outer ring sweeps clockwise */
.spinner::before {
    border-top-color: var(--accent);
    border-right-color: var(--accent-glow);
    animation: spin 1.1s var(--ease) infinite;
}
/* inner ring sweeps counter, periwinkle telemetry */
.spinner::after {
    inset: 14px;
    border-bottom-color: var(--secondary);
    animation: spin 1.6s linear infinite reverse;
}
/* center reticle dot */
.spinner > .dot,
.loading-container .spinner i {
    position: absolute; top: 50%; left: 50%;
    width: 4px; height: 4px; margin: -2px 0 0 -2px;
    background: var(--accent); border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-glow);
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-text {
    color: var(--muted-soft);
    font-family: var(--font-mono);
    font-size: 10.5px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.22em;
}

/* ── Error state — SIGNAL LOST HUD ─────────────────────────────────────── */
.error-container {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100vh; gap: 20px; padding: 24px; text-align: center;
}
.error-icon { color: var(--error); opacity: 0.85; }
.error-message {
    color: var(--fg-dim);
    font-family: var(--font-mono);
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.18em;
}

/* ── Hologram container ────────────────────────────────────────────────── */
.hologram-container {
    display: flex; flex-direction: column;
    height: 100vh; background: var(--bg);
}

/* ── Video frame — corner-bracketed HUD viewport ───────────────────────── */
.video-wrapper {
    position: relative; flex: 1;
    display: flex; align-items: center; justify-content: center;
    background: #000; overflow: hidden;
}
/* corner brackets framing the live feed */
.video-wrapper::before,
.video-wrapper::after {
    content: ''; position: absolute; z-index: 3; pointer-events: none;
    width: 22px; height: 22px;
    border: 1.5px solid var(--accent); opacity: 0.55;
}
.video-wrapper::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.video-wrapper::after { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }

#hologram-video {
    width: 100%; height: 100%;
    object-fit: contain; background: #000;
}

/* ── Play overlay — glowing reticle trigger ────────────────────────────── */
.play-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.42);
    transition: opacity var(--t-fast) var(--ease), background var(--t-fast);
}
.play-overlay svg {
    fill: var(--accent);
    filter: drop-shadow(0 0 16px var(--accent-glow));
    transition: transform var(--t-med) var(--ease);
}
.play-overlay:hover { background: rgba(0, 0, 0, 0.28); }
.play-overlay:hover svg { transform: scale(1.08); }

/* ── Creator info — mono telemetry strip ───────────────────────────────── */
.creator-info {
    display: flex; align-items: center; justify-content: center;
    gap: 10px; padding: 13px 16px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.08em;
}
.username { color: var(--accent); font-weight: 500; }
.separator { color: var(--border-strong); }
.views {
    color: var(--secondary);
    text-transform: uppercase; letter-spacing: 0.14em; font-size: 10.5px;
}

/* ── CTA — solid Iris glow, sharp HUD button (no gradient) ─────────────── */
.cta-section {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 26px 16px;
    padding-bottom: max(26px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg) 100%);
    border-top: 1px solid var(--border);
}
.portals-logo { width: 38px; height: 38px; }
.logo-img { width: 100%; height: 100%; object-fit: contain; }
.cta-text {
    color: var(--fg-dim);
    font-family: var(--font-display); font-weight: 500;
    font-size: 15px; text-align: center; letter-spacing: -0.01em;
}
.cta-button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; max-width: 300px;
    padding: 15px 24px;
    background: var(--accent); color: #000;
    font-family: var(--font-mono); font-size: 12px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.16em;
    text-decoration: none; border: 1px solid var(--accent);
    border-radius: var(--r-sm); cursor: pointer;
    transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.cta-button:hover {
    background: var(--accent-hover); border-color: var(--accent-hover);
    box-shadow: 0 0 28px var(--accent-glow); transform: translateY(-1px);
}
.cta-button:active { transform: translateY(0); }
.made-with {
    font-family: var(--font-mono);
    color: var(--muted); font-size: 9.5px;
    text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.7;
}

/* ── Tablet / desktop — framed phone-aspect viewport ───────────────────── */
@media (min-width: 768px) {
    .hologram-container { max-width: 460px; margin: 0 auto; height: 100vh; }
    .video-wrapper { border: 1px solid var(--border); border-radius: var(--r-md); margin: 16px; flex: 1; }
    .video-wrapper::before { top: 26px; left: 26px; }
    .video-wrapper::after { bottom: 26px; right: 26px; }
    #hologram-video { border-radius: var(--r-md); }
    .cta-section { padding: 32px 24px; }
}

/* ── Embed mode ────────────────────────────────────────────────────────── */
body.embed .cta-section,
body.embed .creator-info { display: none; }
body.embed .hologram-container { height: 100vh; }
body.embed .video-wrapper { height: 100%; }

::selection { background: var(--accent); color: var(--bg); }

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .spinner::before, .spinner::after { animation: none; }
    body::after { animation: none; }
    .cta-button, .play-overlay svg { transition: none; }
}