/* ═══════════════════════════════════════════════════════════
   yr1 Bio — macOS Desktop Style v3
   Card-based social windows + premium OS effects
   ═══════════════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body {
    width:100%; height:100%; overflow:hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', sans-serif;
    background:#000; user-select:none; -webkit-user-select:none;
    -webkit-font-smoothing: antialiased;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M2 1L14.5 6L9 8L7 13.5Z' fill='%23050505' stroke='%23ffffff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 2 1, auto;
}

/* Custom cursor for clickable elements */
a, button, .dock-icon, .social-card, .menubar-item, .menubar-apple,
.win-dot, .ctx-item:not(.disabled), .spotlight-item {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M2 1L14.5 6L9 8L7 13.5Z' fill='%23050505' stroke='%23ffffff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 2 1, pointer;
}

/* Cursor ring follow effect */
.cursor-ring {
    position:fixed; width:36px; height:36px; border-radius:50%;
    border:1.5px solid rgba(255,255,255,0.25);
    pointer-events:none; z-index:9998;
    transform:translate(-50%,-50%);
    transition: width .2s ease, height .2s ease, border-color .2s ease, opacity .2s ease;
    mix-blend-mode:difference;
}
.cursor-ring.hovering {
    width:50px; height:50px;
    border-color:rgba(255,255,255,0.5);
}

/* ── Video Background ── */
.video-bg {
    position:fixed; top:0; left:0; width:100%; height:100%;
    object-fit:cover; z-index:0; opacity:0;
    transition: opacity 2s ease;
}
.video-bg.loaded { opacity:1; }

.fallback-bg {
    position:fixed; top:0; left:0; width:100%; height:100%; z-index:0;
    background: linear-gradient(135deg, #0a0a0a 0%, #0d0d18 25%, #0a0a14 50%, #0d0d0d 100%);
    background-size:400% 400%;
    animation: bgShift 20s ease infinite;
    transition: opacity 2s ease;
}
.fallback-bg::after {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(88,28,135,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(30,50,80,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(20,10,50,0.06) 0%, transparent 50%);
}
@keyframes bgShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

/* Dark overlay on video for readability */
.video-overlay {
    position:fixed; inset:0; z-index:1;
    background: rgba(0,0,0,0.25);
    pointer-events:none;
}

.scanlines {
    position:fixed; inset:0; z-index:2; pointer-events:none;
    background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.015) 2px, rgba(0,0,0,0.015) 4px);
}

/* Vignette effect */
.vignette {
    position:fixed; inset:0; z-index:2; pointer-events:none;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.4) 100%);
}

.cursor-glow {
    position:fixed; width:400px; height:400px; border-radius:50%;
    background:radial-gradient(circle, rgba(88,101,242,0.04) 0%, transparent 70%);
    pointer-events:none; z-index:3; transform:translate(-50%,-50%);
    transition: left .05s linear, top .05s linear;
}

/* ── Corner Name ── */
.corner-name {
    position:fixed; top:40px; right:25px; z-index:10;
    pointer-events:none; text-align:right;
}
.corner-name-text {
    font-family:'Bebas Neue', sans-serif;
    font-size:clamp(80px, 10vw, 160px);
    color:rgba(255,255,255,0.06);
    line-height:0.85; letter-spacing:0.08em;
    text-transform:uppercase;
    text-shadow: 0 0 60px rgba(255,255,255,0.015), 0 4px 20px rgba(0,0,0,0.5);
    animation: cornerPulse 4s ease-in-out infinite alternate;
}
@keyframes cornerPulse { 0%{opacity:.5} 100%{opacity:1} }

/* ── Boot Screen ── */
.boot-screen {
    position:fixed; inset:0; background:#000; z-index:9999;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px;
    transition: opacity .8s ease, visibility .8s ease;
}
.boot-screen.hidden { opacity:0; visibility:hidden; }
.boot-apple { width:48px; height:58px; fill:#fff; animation: logoPulse 2s ease-in-out infinite; }
@keyframes logoPulse { 0%,100%{opacity:.7} 50%{opacity:1} }
.boot-bar-wrap { width:200px; height:4px; background:rgba(255,255,255,0.1); border-radius:4px; overflow:hidden; }
.boot-bar { width:0%; height:100%; background:#fff; border-radius:4px; transition:width .3s ease; }

/* ── Enter Overlay ── */
.enter-overlay {
    position:fixed; inset:0; z-index:5000;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,0.35); cursor:pointer;
    opacity:0; transition: opacity .5s ease;
    pointer-events:none;
}
.enter-overlay.visible { opacity:1; pointer-events:auto; }
.enter-overlay.gone { display:none; }
.enter-text {
    color:rgba(255,255,255,0.65); font-size:15px; font-weight:500;
    letter-spacing:.5px; animation: pulseTxt 2s ease-in-out infinite;
}
@keyframes pulseTxt { 0%,100%{opacity:.4} 50%{opacity:1} }

/* ── Menu Bar ── */
.menubar {
    position:fixed; top:0; left:0; right:0; height:25px;
    background:rgba(30,30,30,0.72);
    backdrop-filter:blur(30px) saturate(180%);
    -webkit-backdrop-filter:blur(30px) saturate(180%);
    z-index:800; display:flex; align-items:center; justify-content:space-between;
    padding:0 12px; border-bottom:1px solid rgba(255,255,255,0.04);
}
.menubar-left, .menubar-right { display:flex; align-items:center; }
.menubar-left { gap:18px; }
.menubar-right { gap:14px; }
.menubar-apple { display:flex; align-items:center; cursor:pointer; opacity:.9; transition:opacity .2s; }
.menubar-apple:hover { opacity:1; }
.menubar-apple svg { width:13px; height:16px; fill:#fff; }
.menubar-item { font-size:13px; font-weight:400; color:rgba(255,255,255,.85); cursor:pointer; letter-spacing:-.01em; transition:color .15s; }
.menubar-item.bold { font-weight:700; }
.menubar-item:hover { color:#fff; }
.menubar-icon { color:rgba(255,255,255,.7); display:flex; align-items:center; }
.menubar-time { font-size:13px; font-weight:500; color:rgba(255,255,255,.85); letter-spacing:-.01em; }

.battery-icon { display:flex; align-items:center; gap:3px; }
.batt-pct { font-size:12px; color:rgba(255,255,255,.7); }
.batt-body { width:22px; height:10px; border:1.5px solid rgba(255,255,255,.7); border-radius:2px; display:flex; align-items:center; padding:1.5px; }
.batt-fill { width:100%; height:100%; background:rgba(255,255,255,.7); border-radius:1px; }
.batt-tip { width:2px; height:5px; background:rgba(255,255,255,.7); border-radius:0 1px 1px 0; }

/* ── DOCK ── */
.dock-wrap {
    position:fixed; bottom:6px; left:50%; transform:translateX(-50%); z-index:800;
}
.dock {
    display:flex; align-items:flex-end; gap:3px;
    padding:4px 10px;
    background:rgba(30,30,30,0.5);
    backdrop-filter:blur(30px) saturate(180%);
    -webkit-backdrop-filter:blur(30px) saturate(180%);
    border-radius:18px; border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 8px 32px rgba(0,0,0,0.3);
}
.dock-sep {
    width:1px; height:40px; background:rgba(255,255,255,0.1);
    margin:0 5px; align-self:center;
}
.dock-icon {
    position:relative; width:52px; height:52px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; border:none; background:none; padding:0;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
    border-radius:12px;
}
.dock-icon svg { width:46px; height:46px; border-radius:11px; transition:filter .2s; pointer-events:none; }
.dock-icon:hover { transform:translateY(-10px) scale(1.3); z-index:10; }
.dock-icon:hover svg { filter:brightness(1.1); }
.dock-icon:hover + .dock-icon { transform:scale(1.08); }

/* Dock bounce animation */
@keyframes dockBounce {
    0%,100% { transform:translateY(0); }
    25% { transform:translateY(-16px); }
    50% { transform:translateY(0); }
    75% { transform:translateY(-8px); }
}
.dock-icon.bouncing { animation: dockBounce .6s ease; }

/* Tooltip */
.dock-icon::before {
    content:attr(data-tooltip);
    position:absolute; top:-40px; left:50%; transform:translateX(-50%) scale(.8);
    background:rgba(30,30,30,0.92); backdrop-filter:blur(20px);
    color:#fff; padding:5px 12px; border-radius:6px;
    font-size:12px; font-weight:500; white-space:nowrap;
    pointer-events:none; opacity:0;
    transition: all .15s cubic-bezier(.34,1.56,.64,1);
    border:1px solid rgba(255,255,255,0.08);
    font-family:'Inter',sans-serif;
}
.dock-icon::after {
    content:'';
    position:absolute; top:-16px; left:50%; transform:translateX(-50%) rotate(45deg) scale(.8);
    width:8px; height:8px;
    background:rgba(30,30,30,0.92);
    border-right:1px solid rgba(255,255,255,0.08);
    border-bottom:1px solid rgba(255,255,255,0.08);
    pointer-events:none; opacity:0; transition: all .15s cubic-bezier(.34,1.56,.64,1);
}
.dock-icon:hover::before { opacity:1; transform:translateX(-50%) scale(1); }
.dock-icon:hover::after { opacity:1; transform:translateX(-50%) rotate(45deg) scale(1); }

/* Dot */
.dock-dot {
    position:absolute; bottom:-5px; left:50%; transform:translateX(-50%);
    width:4px; height:4px; border-radius:50%;
    background:rgba(255,255,255,0.5); display:none;
}
.dock-icon.has-dot .dock-dot { display:block; }
.dock-icon[data-open="true"] .dock-dot { display:block; }

/* ── macOS WINDOWS ── */
.macos-win {
    position:fixed; z-index:500;
    background:rgba(25,25,25,0.82);
    backdrop-filter:blur(40px) saturate(180%);
    -webkit-backdrop-filter:blur(40px) saturate(180%);
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:
        0 22px 70px rgba(0,0,0,0.45),
        0 0 0 .5px rgba(255,255,255,0.06),
        inset 0 .5px 0 rgba(255,255,255,0.06);
    overflow:hidden;
    transform:scale(.92); opacity:0;
    animation: winOpen .45s cubic-bezier(.16,1,.3,1) forwards;
    min-width:300px;
}
.macos-win.closing { animation: winClose .25s ease forwards; }
@keyframes winOpen { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
@keyframes winClose { from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(.92)} }

.win-header {
    display:flex; align-items:center; padding:12px 16px;
    background:rgba(40,40,40,0.5);
    border-bottom:1px solid rgba(255,255,255,0.04);
    cursor:default; position:relative;
}
.win-dots { display:flex; gap:8px; z-index:2; }
.win-dot { width:12px; height:12px; border-radius:50%; cursor:pointer; transition:filter .15s; border:none; }
.win-dot:hover { filter:brightness(1.15); }
.win-dot.red { background:#ff5f57; }
.win-dot.yellow { background:#febc2e; }
.win-dot.green { background:#28c840; }
.win-title {
    position:absolute; left:0; right:0; text-align:center;
    font-size:13px; color:rgba(255,255,255,.65); font-weight:500;
    pointer-events:none;
}
.win-body { overflow-y:auto; }



/* ── Card-Based Social Layout (like reference) ── */
.social-cards {
    display:flex; gap:12px; padding:16px;
    justify-content:center; flex-wrap:wrap;
}

.social-card {
    width:180px; padding:20px 16px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:12px;
    display:flex; flex-direction:column;
    align-items:center; gap:10px;
    cursor:pointer; transition:all .2s;
    text-decoration:none; color:inherit;
    position:relative; overflow:hidden;
}

.social-card:hover {
    background:rgba(255,255,255,0.06);
    border-color:rgba(255,255,255,0.1);
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,0.2);
}

/* Active card glow (like reference pink border) */
.social-card.active {
    border-color:rgba(88,101,242,0.3);
}
.social-card.active::before {
    content:'';
    position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, #5865F2, #eb459e, #5865F2);
    background-size:200% 100%;
    animation:cardGlow 3s linear infinite;
}
@keyframes cardGlow {
    0%{background-position:0% 0%} 100%{background-position:200% 0%}
}

.card-avatar {
    width:72px; height:72px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; flex-shrink:0;
    border:3px solid rgba(255,255,255,0.06);
    transition:border-color .2s;
}
.social-card:hover .card-avatar { border-color:rgba(255,255,255,0.12); }

.card-avatar img {
    width:100%; height:100%; object-fit:cover;
}
.card-avatar svg {
    width:36px; height:36px;
}
.card-avatar.discord-bg { background:linear-gradient(135deg, #5865F2, #4752c4); }
.card-avatar.twitch-bg { background:linear-gradient(135deg, #9146ff, #6441a5); }
.card-avatar.twitter-bg { background:linear-gradient(135deg, #1DA1F2, #0d8ed6); }
.card-avatar.tiktok-bg { background:#010101; border-color:rgba(255,255,255,0.08); }
.card-avatar.roblox-bg { background:#1a1a1a; border-color:rgba(255,255,255,0.08); }
.card-avatar.ig-bg { background:linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); }
.card-avatar.pinterest-bg { background:#E60023; }

.card-name {
    font-size:14px; font-weight:700; color:#fff;
    text-align:center; line-height:1.2;
}
.card-handle {
    font-size:11px; color:rgba(255,255,255,0.35);
    text-align:center;
}
.card-badge {
    width:20px; height:20px; border-radius:4px;
    background:rgba(255,255,255,0.05);
    display:flex; align-items:center; justify-content:center;
    margin-top:2px;
}
.card-badge svg { width:12px; height:12px; opacity:.5; }

/* ── Window: Photos ── */
.win-photos-body {
    width: 640px; max-width: 90vw;
    background: #000; display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
.win-photos-body video { 
    width: 100%; height: auto; max-height: 70vh; 
    display: block; object-fit: contain; 
}
.win-photos-placeholder {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:100%; height:100%;
    background:linear-gradient(135deg, #0a0a0a, #12121f, #0a0a0a);
    color:rgba(255,255,255,.25); gap:14px;
}
.win-photos-placeholder svg { width:44px; height:44px; opacity:.3; }
.win-photos-placeholder span { font-size:13px; font-weight:500; }
.win-photos-meta {
    display:flex; align-items:center; gap:12px;
    margin-left:auto; z-index:2;
}
.win-photos-meta span {
    font-size:12px; color:rgba(255,255,255,.4); cursor:pointer; transition:color .15s;
}
.win-photos-meta span:hover { color:rgba(255,255,255,.8); }

/* ── Notification ── */
.notif {
    position:fixed; top:35px; right:15px; width:340px;
    background:rgba(35,35,35,0.88);
    backdrop-filter:blur(30px) saturate(180%);
    -webkit-backdrop-filter:blur(30px) saturate(180%);
    border-radius:14px; border:1px solid rgba(255,255,255,0.08);
    padding:12px 14px; z-index:2000;
    box-shadow:0 10px 40px rgba(0,0,0,0.4);
    display:flex; align-items:center; gap:12px;
    transform:translateX(380px);
    transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.notif.visible { transform:translateX(0); }
.notif-icon {
    width:36px; height:36px; border-radius:8px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    background:linear-gradient(135deg, #5865F2, #4752c4);
}
.notif-body { flex:1; }
.notif-app { font-size:11px; color:rgba(255,255,255,.4); font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:1px; }
.notif-title { font-size:13px; color:#fff; font-weight:600; }
.notif-desc { font-size:12px; color:rgba(255,255,255,.45); margin-top:1px; }
.notif-time { font-size:11px; color:rgba(255,255,255,.25); align-self:flex-start; }

/* ── Spotlight Search ── */
.spotlight-overlay {
    position:fixed; inset:0; z-index:6000;
    background:rgba(0,0,0,0.4);
    display:flex; align-items:flex-start; justify-content:center;
    padding-top:18vh;
    opacity:0; visibility:hidden;
    transition:all .2s;
}
.spotlight-overlay.visible { opacity:1; visibility:visible; }

.spotlight {
    width:560px; max-width:90vw;
    background:rgba(35,35,35,0.92);
    backdrop-filter:blur(40px) saturate(180%);
    -webkit-backdrop-filter:blur(40px) saturate(180%);
    border-radius:12px; border:1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    overflow:hidden;
    transform:scale(.95);
    transition:transform .2s cubic-bezier(.16,1,.3,1);
}
.spotlight-overlay.visible .spotlight { transform:scale(1); }

.spotlight-input-wrap {
    display:flex; align-items:center; gap:10px;
    padding:14px 16px;
    border-bottom:1px solid rgba(255,255,255,0.06);
}
.spotlight-input-wrap svg { width:18px; height:18px; color:rgba(255,255,255,.4); flex-shrink:0; }
.spotlight-input {
    flex:1; background:none; border:none; outline:none;
    color:#fff; font-size:16px; font-weight:400;
    font-family:inherit;
}
.spotlight-input::placeholder { color:rgba(255,255,255,.3); }

.spotlight-results { padding:6px; max-height:300px; overflow-y:auto; }
.spotlight-item {
    display:flex; align-items:center; gap:10px;
    padding:8px 10px; border-radius:6px;
    cursor:pointer; transition:background .1s;
}
.spotlight-item:hover, .spotlight-item.selected { background:rgba(52,120,246,0.3); }
.spotlight-item-icon {
    width:28px; height:28px; border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}
.spotlight-item-icon svg { width:16px; height:16px; }
.spotlight-item-text { flex:1; }
.spotlight-item-name { font-size:13px; color:#fff; font-weight:500; }
.spotlight-item-desc { font-size:11px; color:rgba(255,255,255,.3); }
.spotlight-hint {
    padding:8px 16px; font-size:11px; color:rgba(255,255,255,.2);
    border-top:1px solid rgba(255,255,255,.04);
    text-align:center;
}

/* ── Context Menu ── */
.ctx-menu {
    position:fixed;
    background:rgba(30,30,30,0.88);
    backdrop-filter:blur(30px) saturate(180%);
    -webkit-backdrop-filter:blur(30px) saturate(180%);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:8px; padding:4px; min-width:220px; z-index:6000;
    box-shadow:0 12px 40px rgba(0,0,0,0.5);
    opacity:0; transform:scale(.95);
    transition:opacity .1s, transform .1s;
    pointer-events:none;
}
.ctx-menu.visible { opacity:1; transform:scale(1); pointer-events:auto; }
.ctx-item {
    padding:5px 12px; font-size:13px; color:rgba(255,255,255,.85);
    border-radius:4px; cursor:default;
    display:flex; align-items:center; justify-content:space-between;
    transition:background .1s;
}
.ctx-item:hover { background:#3478f6; color:#fff; }
.ctx-item:hover .ctx-key { color:rgba(255,255,255,.7); }
.ctx-item.disabled { color:rgba(255,255,255,.2)!important; pointer-events:none; }
.ctx-sep { height:1px; background:rgba(255,255,255,0.06); margin:4px 0; }
.ctx-key { color:rgba(255,255,255,.35); font-size:12px; }

/* ── Ambient particles ── */
.particles-canvas {
    position:fixed; inset:0; z-index:3; pointer-events:none;
}

/* ── Responsive ── */
@media (max-width:768px) {
    .menubar { height:22px; padding:0 8px; }
    .menubar-left { gap:12px; }
    .menubar-item { font-size:11px; }
    .dock-icon { width:42px; height:42px; }
    .dock-icon svg { width:38px; height:38px; }
    .dock { gap:2px; padding:3px 8px; }
    .dock-sep { height:32px; }
    .notif { width:300px; right:10px; }
    .corner-name { top:30px; right:14px; }
    .social-card { width:140px; padding:14px 10px; }
    .card-avatar { width:56px; height:56px; }
}

@media (max-width:480px) {
    .menubar-left .menubar-item:not(.bold):not(:first-of-type):nth-of-type(n+4) { display:none; }
    .dock-icon { width:36px; height:36px; }
    .dock-icon svg { width:32px; height:32px; }
    .social-card { width:120px; padding:12px 8px; }
    .card-avatar { width:48px; height:48px; }
}