/*
 * SW Homepage Hero — homepage.css  v1.1.1
 * Ported from mod_sw_homepage media/css/homepage.css
 * ALL animations use transform + opacity only (GPU-composited, zero CPU paint)
 */

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

html, body {
    height: 100%;
    background: #09090f;
    color: #fff;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
}

/* ════════════════════════════════════════════════════════════════
   BACKGROUND
════════════════════════════════════════════════════════════════ */
.metro-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center center;
    /* NO background-attachment:fixed — kills GPU compositing */
    background-repeat: no-repeat;
    will-change: transform; /* promotes to own compositor layer */
}
.metro-bg-default {
    background: radial-gradient(ellipse 120% 80% at 50% 20%,
        #1a0535 0%, #0d0718 40%, #09090f 80%);
}
.metro-bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--ov, 0.65));
}

/* ════════════════════════════════════════════════════════════════
   TOPBAR
════════════════════════════════════════════════════════════════ */
.metro-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 900;
    background: rgba(9, 9, 15, 0.92);
    border-bottom: 1px solid rgba(102, 0, 204, 0.25);
    /* Single element with modest blur */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.metro-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    height: 52px;
    gap: 12px;
}
.metro-topbar-home {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-decoration: none;
    background: linear-gradient(90deg, #a855f7, #ff6600);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
    flex-shrink: 0;
}
.metro-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Auth buttons ── */
.metro-btn-icon {
    width: 16px; height: 16px;
    vertical-align: middle;
    flex-shrink: 0;
}
.metro-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    font-size: .82rem;
    padding: 6px 12px;
    border-radius: 8px;
    transition: color .15s, background .15s;
}
.metro-login-btn:hover { color: #fff; background: rgba(255,255,255,.06); }

/* Sign Up button */
.metro-signup-wrap { position: relative; }
.metro-signup-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #6600cc, #ff6600);
    color: #fff;
    border: none;
    padding: 7px 16px;
    border-radius: 22px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
    white-space: nowrap;
}
.metro-signup-btn:hover { opacity: .85; }

/* Sign Up dropdown panel */
.metro-signup-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    background: #13131e;
    border: 1px solid rgba(102,0,204,.4);
    border-radius: 16px;
    padding: 20px;
    z-index: 1000;
    box-shadow: 0 16px 48px rgba(0,0,0,.6);
    animation: panelIn .2s ease;
}
.metro-signup-panel[hidden] { display: none; }
@keyframes panelIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.metro-signup-panel-inner { display: flex; flex-direction: column; gap: 10px; }
.metro-signup-heading {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}
.metro-signup-sub {
    font-size: .78rem;
    color: rgba(255,255,255,.45);
    margin-bottom: 6px;
}
.metro-signup-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    padding: 11px 14px;
    text-decoration: none;
    color: rgba(255,255,255,.8);
    transition: background .12s, border-color .12s;
}
.metro-signup-card:hover {
    background: rgba(102,0,204,.2);
    border-color: rgba(168,85,247,.45);
    color: #fff;
}
.metro-signup-card-icon { font-size: 1.55rem; flex-shrink: 0; line-height: 1; }
.metro-signup-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.metro-signup-card-body strong { font-size: .85rem; font-weight: 600; color: #fff; }
.metro-signup-card-body small  { font-size: .73rem; color: rgba(255,255,255,.45); }
.metro-signup-card-arrow { font-size: 1.2rem; color: rgba(255,255,255,.35); flex-shrink: 0; }
.metro-signup-already {
    font-size: .78rem;
    color: rgba(255,255,255,.4);
    text-align: center;
    margin-top: 4px;
}
.metro-signup-already a { color: #a855f7; text-decoration: none; }
.metro-signup-already a:hover { text-decoration: underline; }

/* Logged-in user widget */
.metro-user-widget { display: flex; align-items: center; gap: 8px; }
.metro-user-name {
    display: inline-flex; align-items: center; gap: 5px;
    color: rgba(255,255,255,.75); text-decoration: none;
    font-size: .82rem; transition: color .15s;
}
.metro-user-name:hover { color: #fff; }
.metro-logout-btn {
    color: rgba(255,255,255,.45);
    text-decoration: none;
    font-size: .78rem;
    padding: 4px 10px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 20px;
    transition: color .15s, border-color .15s;
}
.metro-logout-btn:hover { color: #fff; border-color: rgba(255,255,255,.35); }

/* ════════════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════════ */
.metro-home-hero {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px 60px; /* 80px top = topbar height clearance */
}
.metro-home-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 680px;
    text-align: center;
}

/* ════════════════════════════════════════════════════════════════
   ORB  (GPU-only: rotate + scale + opacity only)
════════════════════════════════════════════════════════════════ */
.metro-orb {
    position: relative;
    /* Isolate orb layer — prevents repaints from spreading to page */
    contain: layout style;
    will-change: transform;
}
.metro-orb-desktop {
    width: 240px;
    height: 240px;
}
.metro-orb-mobile {
    display: none;
    width: min(200px, 58vw);
    height: min(200px, 58vw);
}

/* Rings — rotate only (compositor-only, zero CPU) */
.orb-ring {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px solid transparent;
    will-change: transform;
}
/* orb-ring-1 = outermost */
.orb-ring-1 {
    width: 100%; height: 100%;
    margin-left: -50%; margin-top: -50%;
    border-color: rgba(168,85,247,.38) rgba(168,85,247,.06)
                  rgba(168,85,247,.38) rgba(168,85,247,.06);
    animation: orbRing 8s linear infinite;
}
/* orb-ring-2 = middle */
.orb-ring-2 {
    width: 76%; height: 76%;
    margin-left: -38%; margin-top: -38%;
    border-color: rgba(0,204,255,.24) rgba(0,204,255,.05)
                  rgba(0,204,255,.24) rgba(0,204,255,.05);
    animation: orbRing 13s linear infinite reverse;
}
/* orb-ring-3 = innermost (just hugs the sphere) */
.orb-ring-3 {
    width: 56%; height: 56%;
    margin-left: -28%; margin-top: -28%;
    border-color: rgba(255,102,0,.2) rgba(255,102,0,.04)
                  rgba(255,102,0,.2) rgba(255,102,0,.04);
    animation: orbRing 5s linear infinite;
}
@keyframes orbRing { to { transform: rotate(360deg); } }

/* Sphere */
.orb-sphere {
    position: absolute;
    top: 50%; left: 50%;
    width: 50%; height: 50%;
    margin-left: -25%; margin-top: -25%;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at 35% 32%,
        #c084fc 0%, #7c22d4 28%, #4b0d8c 55%, #1c0040 80%);
    box-shadow:
        0 0 28px rgba(102,0,204,.7),
        0 0 64px rgba(102,0,204,.28),
        inset 0 0 20px rgba(0,0,0,.55);
    animation: orbPulse 4s ease-in-out infinite;
    will-change: transform;
}
@keyframes orbPulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.06); }
}

/* Swirl — rotate only */
.orb-swirl {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        transparent 55%, rgba(0,204,255,.14) 68%, transparent 78%);
    animation: orbRing 9s linear infinite;
    will-change: transform;
}

/* Specular highlight — static, no animation (was top/left based = expensive) */
.orb-specular {
    position: absolute;
    top: 12%; left: 14%;
    width: 36%; height: 36%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.52) 0%, transparent 70%);
    animation: specularPulse 6s ease-in-out infinite alternate;
    will-change: opacity;
}
@keyframes specularPulse { from { opacity: .55; } to { opacity: 1; } }

/* Core glow — opacity only */
.orb-core {
    position: absolute;
    top: 50%; left: 50%;
    width: 40%; height: 40%;
    margin-left: -20%; margin-top: -20%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200,150,255,.6) 0%, transparent 70%);
    animation: specularPulse 3s ease-in-out infinite alternate;
    will-change: opacity;
}

/* Twinkle stars — opacity only, staggered */
.orb-twinkle {
    position: absolute;
    width: 2px; height: 2px;
    border-radius: 50%;
    background: #fff;
    will-change: opacity;
    animation: twinkle 2.5s ease-in-out infinite alternate;
}
/* 10 star positions scattered across the sphere */
.t1  { top:18%; left:22%; animation-delay:0s;    opacity:.8; }
.t2  { top:12%; left:62%; animation-delay:.35s;  opacity:.6; }
.t3  { top:38%; left:14%; animation-delay:.7s;   opacity:.5; width:3px; height:3px; }
.t4  { top:32%; left:74%; animation-delay:1.05s; opacity:.7; }
.t5  { top:58%; left:28%; animation-delay:.18s;  opacity:.4; }
.t6  { top:52%; left:68%; animation-delay:.55s;  opacity:.65; width:3px; height:3px; }
.t7  { top:72%; left:48%; animation-delay:.88s;  opacity:.5; }
.t8  { top:22%; left:82%; animation-delay:.42s;  opacity:.7; }
.t9  { top:68%; left:18%; animation-delay:.72s;  opacity:.45; }
.t10 { top:44%; left:54%; animation-delay:1.2s;  opacity:.6; width:2.5px; height:2.5px; }
@keyframes twinkle { from { opacity: .08; } to { opacity: .9; } }

/* ════════════════════════════════════════════════════════════════
   BRAND — title + tagline
════════════════════════════════════════════════════════════════ */
.metro-home-brand { display: flex; flex-direction: column; gap: 8px; }
.metro-home-title {
    font-size: clamp(1.85rem, 5vw, 3.2rem);
    font-weight: 800;
    letter-spacing: .02em;
    line-height: 1.12;
    background: linear-gradient(135deg, #fff 0%, #a855f7 50%, #ff6600 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.metro-home-tagline {
    font-size: clamp(.88rem, 2.5vw, 1.1rem);
    color: rgba(255,255,255,.5);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════
   SEARCH
════════════════════════════════════════════════════════════════ */
.metro-search-wrap { width: 100%; max-width: 500px; }
.metro-search-form { width: 100%; }
.metro-search-box {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(168,85,247,.38);
    border-radius: 44px;
    padding: 4px 4px 4px 16px;
    gap: 4px;
    transition: border-color .2s, background .2s;
}
.metro-search-box:focus-within {
    border-color: #a855f7;
    background: rgba(255,255,255,.1);
}
.metro-search-ico {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: rgba(255,255,255,.35); width: 18px; height: 18px;
}
.metro-search-ico svg { width: 16px; height: 16px; }
.metro-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: .97rem;
    padding: 8px 4px;
    min-width: 0;
}
.metro-search-input::placeholder { color: rgba(255,255,255,.22); }
/* Webkit search cancel button */
.metro-search-input::-webkit-search-cancel-button { display: none; }

.metro-search-btn {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #6600cc, #ff6600);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .15s;
    box-shadow: 0 0 12px rgba(102,0,204,.45);
}
.metro-search-btn:hover { opacity: .85; }

.metro-voice-btn {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(168,85,247,.35);
    background: rgba(102,0,204,.16);
    color: #a855f7;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .15s;
}
.metro-voice-btn:hover { opacity: .8; }
.metro-voice-btn svg { width: 18px; height: 18px; }
.metro-voice-btn.is-listening {
    background: rgba(239,68,68,.22);
    border-color: #ef4444;
    color: #ef4444;
    animation: voicePulse 1.2s ease-in-out infinite;
    will-change: opacity;
}
@keyframes voicePulse { 0%,100%{opacity:1} 50%{opacity:.45} }

.metro-voice-status {
    font-size: .73rem;
    color: rgba(255,255,255,.35);
    text-align: center;
    min-height: 1.2em;
    margin-top: 6px;
    letter-spacing: .04em;
    transition: color .2s;
}
.metro-voice-status.active    { color: rgba(168,85,247,.65); }
.metro-voice-status.listening { color: #ef4444; }

/* ════════════════════════════════════════════════════════════════
   HOME NAV
════════════════════════════════════════════════════════════════ */
.metro-home-nav { width: 100%; }
.metro-nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    gap: 4px;
    padding: 0;
}
.metro-nav-item { position: relative; }

.metro-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 16px;
    border-radius: 22px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
    text-decoration: none;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    transition: color .15s, background .15s, border-color .15s;
    cursor: pointer;
    white-space: nowrap;
}
.metro-nav-link:hover,
.metro-nav-item.is-active > .metro-nav-link {
    color: #fff;
    background: rgba(102,0,204,.25);
    border-color: rgba(168,85,247,.4);
}
.metro-nav-caret {
    font-size: .55rem;
    opacity: .55;
    transition: transform .2s;
}
.metro-nav-item.is-open .metro-nav-caret { transform: rotate(180deg); }

/* Dropdown */
.metro-nav-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #13131e;
    border: 1px solid rgba(102,0,204,.35);
    border-radius: 10px;
    padding: 6px 0;
    min-width: 160px;
    z-index: 800;
    box-shadow: 0 12px 36px rgba(0,0,0,.55);
    display: none;
    list-style: none;
    animation: dropIn .16s ease;
}
@keyframes dropIn { from{opacity:0;transform:translateX(-50%) translateY(-6px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.metro-nav-item.is-open .metro-nav-dropdown { display: block; }
.metro-nav-dropdown-item { }
.metro-nav-dropdown-link {
    display: block;
    padding: 8px 16px;
    font-size: .8rem;
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: background .12s, color .12s;
}
.metro-nav-dropdown-link:hover { background: rgba(102,0,204,.2); color: #fff; }
.metro-nav-dropdown-item.is-active .metro-nav-dropdown-link { color: #a855f7; }

/* ════════════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════════ */
.metro-footer {
    position: relative;
    z-index: 1;
    padding: 24px 20px;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(9,9,15,.8);
}
.metro-container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.metro-footer-copy { font-size: .78rem; color: rgba(255,255,255,.3); }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .metro-topbar-home { font-size: .88rem; }
    .metro-orb-desktop { display: none; }
    .metro-orb-mobile  { display: block; }
    .metro-home-hero { padding: 70px 16px 50px; }
    .metro-signup-panel { right: -60px; width: 290px; }
}

@media (max-width: 480px) {
    .metro-topbar-inner { padding: 0 14px; }
    .metro-home-inner { gap: 16px; }
    .metro-nav-link { padding: 6px 12px; font-size: .78rem; }
    .metro-signup-panel { position: fixed; top: 56px; left: 10px; right: 10px; width: auto; }
}

/* ── Reduce motion — kills ALL animations instantly ── */
@media (prefers-reduced-motion: reduce) {
    .orb-ring-1, .orb-ring-2, .orb-ring-3,
    .orb-sphere, .orb-swirl, .orb-specular,
    .orb-core, .orb-twinkle,
    .metro-voice-btn { animation: none !important; }
    .orb-specular, .orb-core { opacity: .7; }
    .orb-twinkle { opacity: .4; }
}