/* =========================================
   1. SAN FRANCISCO PRO FONTS
   Only weights actually used: 400, 500, 600, 700, 800, 900 (normal only)
   Italics and weights 200/300 removed — never referenced in the codebase.
   ========================================= */
@font-face { font-family: 'SF Pro Display'; src: url('https://cdn.jsdelivr.net/gh/sahibjotsaggu/San-Francisco-Pro-Fonts@master/SF-Pro-Display-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('https://cdn.jsdelivr.net/gh/sahibjotsaggu/San-Francisco-Pro-Fonts@master/SF-Pro-Display-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('https://cdn.jsdelivr.net/gh/sahibjotsaggu/San-Francisco-Pro-Fonts@master/SF-Pro-Display-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('https://cdn.jsdelivr.net/gh/sahibjotsaggu/San-Francisco-Pro-Fonts@master/SF-Pro-Display-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('https://cdn.jsdelivr.net/gh/sahibjotsaggu/San-Francisco-Pro-Fonts@master/SF-Pro-Display-Heavy.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('https://cdn.jsdelivr.net/gh/sahibjotsaggu/San-Francisco-Pro-Fonts@master/SF-Pro-Display-Black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }

@font-face { font-family: 'SF Pro Text'; src: url('https://cdn.jsdelivr.net/gh/sahibjotsaggu/San-Francisco-Pro-Fonts@master/SF-Pro-Text-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Text'; src: url('https://cdn.jsdelivr.net/gh/sahibjotsaggu/San-Francisco-Pro-Fonts@master/SF-Pro-Text-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Text'; src: url('https://cdn.jsdelivr.net/gh/sahibjotsaggu/San-Francisco-Pro-Fonts@master/SF-Pro-Text-Semibold.otf') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Text'; src: url('https://cdn.jsdelivr.net/gh/sahibjotsaggu/San-Francisco-Pro-Fonts@master/SF-Pro-Text-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Text'; src: url('https://cdn.jsdelivr.net/gh/sahibjotsaggu/San-Francisco-Pro-Fonts@master/SF-Pro-Text-Heavy.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Text'; src: url('https://cdn.jsdelivr.net/gh/sahibjotsaggu/San-Francisco-Pro-Fonts@master/SF-Pro-Text-Black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; }

/* 2. Use Local System Emojis */
@font-face {
  font-family: 'Apple Color Emoji';
  src: local('Apple Color Emoji'), local('Segoe UI Emoji'), local('Segoe UI Symbol'), local('Noto Color Emoji');
  font-display: swap; 
}

/* =========================================
   THEME ENGINE: STRICT MATHEMATICAL TOKENS
   ========================================= */
:root {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 28px;

  --color-bg-base: #0b0b0b;
  --color-success: #4ade80;
  --color-danger: #ff4757;
  
  --text-main: #f5f7fa;
  --text-muted: rgba(255, 255, 255, .78);
  
  --bg-left-grad: linear-gradient(135deg,#052e21 0%,#063826 60%,#052b1f 100%);
  --bg-right-grad: linear-gradient(135deg,#4a0707 0%,#5b0b0b 60%,#360606 100%);
  
  --card-bg: rgba(255, 255, 255, .08);
  --card-border: rgba(255, 255, 255, .15);
  
  --btn-bg: #fff;
  --btn-text: #111;
  --btn-hover: #e0e0e0;
  
  --nav-bg: rgba(255, 255, 255, .12);
  --nav-border: rgba(255, 255, 255, .25);
  --nav-text: #fff;
  
  --input-bg: rgba(0, 0, 0, .18);
  
  --terminal-green: var(--color-success);

  /* ORDERED Z-INDEX SCALE */
  --z-base: 1;
  --z-nav: 100;
  --z-context: 200;
  --z-overlay: 300;
  --z-freeze: 400;
  --z-popups: 500;
  --z-spotlight: 600;
  --z-boot: 700;

  /* PREMIUM MOTION TOKENS */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 280ms;
  --duration-mid: 450ms;

  /* ── DARK GLASS TOKEN SCALE ── */
  --glass-bg-0: rgba(255, 255, 255, 0.04);
  --glass-bg-1: rgba(255, 255, 255, 0.07);
  --glass-bg-2: rgba(255, 255, 255, 0.08);
  --glass-bg-3: rgba(255, 255, 255, 0.14);

  --glass-border-subtle: rgba(255, 255, 255, 0.08);
  --glass-border-default: rgba(255, 255, 255, 0.14);
  --glass-border-prominent: rgba(255, 255, 255, 0.22);

  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --glass-highlight-strong: inset 0 1px 0 rgba(255, 255, 255, 0.18),
                             inset 0 0 0 1px rgba(255, 255, 255, 0.05);

  --glass-blur-sm: blur(12px) saturate(140%);
  --glass-blur-md: blur(20px) saturate(160%);
  --glass-blur-lg: blur(32px) saturate(180%);

  /* ── LAYERED SHADOW SCALE ── */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25),
               0 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35),
               0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45),
               0 8px 20px rgba(0, 0, 0, 0.25);
  --shadow-xl: 0 32px 72px rgba(0, 0, 0, 0.55),
               0 12px 28px rgba(0, 0, 0, 0.3),
               0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-lg-hover: 0 28px 60px rgba(0, 0, 0, 0.55),
                     0 12px 28px rgba(0, 0, 0, 0.3),
                     0 0 40px rgba(255, 255, 255, 0.04);

  /* ── SAFE AREA TOKENS ── */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --page-pad-top: calc(var(--space-3) + var(--safe-top));
  --page-pad-bottom: calc(var(--space-3) + var(--safe-bottom));

  /* ── APPLE HIG TYPOGRAPHY SCALE ── */
  --tracking-tight: -0.022em;
  --tracking-normal: -0.015em;
  --tracking-wide: 0.02em;
}

/* =========================================
   CORE STYLES & OS DETAILS
   ========================================= */
* { 
    box-sizing: border-box; 
    -webkit-tap-highlight-color: transparent;
}

::selection { background-color: var(--terminal-green); color: var(--color-bg-base); }
::-moz-selection { background-color: var(--terminal-green); color: var(--color-bg-base); }

/* Global focus-visible for keyboard accessibility */
:focus-visible {
    outline: 2px solid var(--terminal-green);
    outline-offset: 2px;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-main);
  background: var(--color-bg-base);
  transition: color var(--duration-fast) var(--ease-premium), background var(--duration-fast) var(--ease-premium);
  letter-spacing: var(--tracking-normal);
  font-feature-settings: "cv11", "ss01", "tnum";
  -webkit-overflow-scrolling: touch;
  -webkit-touch-callout: none;
}

b, strong { font-weight: 700; }
i, em { font-style: italic; }

/* Screen-reader only (visually hidden but accessible) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip-to-content link (visible on focus) */
.skip-link:focus {
    position: fixed !important;
    left: 16px !important;
    top: 16px !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding: 12px 20px;
    background: var(--terminal-green);
    color: var(--color-bg-base);
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 14px;
    z-index: 99999 !important;
    text-decoration: none;
}

/* =========================================
   PREMIUM COMPONENT REFINEMENT
   ========================================= */

/* Subtle Hovers & Transitions */
.btn, .cta, .top-nav-btn, .shortcut-btn, .navBtn, .action-btn {
    transition: 
        transform var(--duration-fast) var(--ease-spring),
        background var(--duration-fast) var(--ease-premium),
        border-color var(--duration-fast) var(--ease-premium),
        box-shadow var(--duration-fast) var(--ease-premium),
        opacity var(--duration-fast) var(--ease-premium);
    position: relative;
    overflow: hidden;
}

.btn:hover, .cta:hover, .top-nav-btn:hover, .shortcut-btn:hover, .navBtn:hover, .action-btn:hover {
    transform: translateY(-2px) scale(1.02);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

.btn:active, .cta:active, .top-nav-btn:active, .navBtn:active, .shortcut-btn:active, .action-btn:active, .tea-btn:active, .btn-danger:active {
    transform: scale(0.94) translateY(1px) !important;
    transition: transform 120ms cubic-bezier(0.2, 0, 0, 1) !important;
    filter: brightness(0.92);
}

/* Slide from Bottom Entry Animation */
@keyframes fadeUp {
    from { 
        opacity: 0; 
        transform: translateY(24px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Active Glass Border Refinement */
.btn::before, .cta::before, .top-nav-btn::before, .shortcut-btn::before, .navBtn::before, .action-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 80px at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.15), transparent);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-premium);
    pointer-events: none;
    z-index: 1;
}

.btn:hover::before, .cta:hover::before, .top-nav-btn:hover::before, .shortcut-btn:hover::before, .navBtn:hover::before, .action-btn:hover::before {
    opacity: 1;
}

html.glow-disabled .btn::before,
html.glow-disabled .cta::before,
html.glow-disabled .top-nav-btn::before,
html.glow-disabled .shortcut-btn::before,
html.glow-disabled .navBtn::before,
html.glow-disabled .action-btn::before {
    display: none !important;
}

.bg-left, .bg-right { position: fixed; top: -15vh; bottom: -15vh; transition: background 0.5s ease; pointer-events: none;}
.bg-left { left: 0; width: 58%; z-index: -2; background: var(--bg-left-grad); }
.bg-right { right: 0; width: 52%; z-index: -1; background: var(--bg-right-grad); }
.bg-right::before { content: ""; position: absolute; left: -140px; top: -10%; width: 280px; height: 120%; background: inherit; transform: skewX(-14deg); box-shadow: -20px 0 50px rgba(0,0,0,.35); transition: background 0.5s ease; }

.card { 
    background: var(--glass-bg-2); 
    border: 1px solid var(--glass-border-default); 
    border-radius: var(--radius-xl); 
    backdrop-filter: var(--glass-blur-md); 
    -webkit-backdrop-filter: var(--glass-blur-md);
    box-shadow: var(--shadow-lg), var(--glass-highlight-strong); 
    padding: var(--space-4); 
    transition: transform var(--duration-mid) var(--ease-spring), box-shadow var(--duration-mid) var(--ease-premium), border-color var(--duration-fast) var(--ease-premium); 
    will-change: transform;
}
.card:hover { 
    transform: translateY(-6px) scale(1.008); 
    border-color: var(--glass-border-prominent); 
    box-shadow: var(--shadow-lg-hover), var(--glass-highlight-strong); 
}

input, select, textarea { width: 100%; padding: 14px var(--space-2); border-radius: var(--radius-md); margin-bottom: var(--space-2); border: 1px solid var(--card-border); background: var(--input-bg); color: var(--text-main); outline: none; font-family: inherit; font-size: 16px; transition: 0.3s cubic-bezier(0.25, 1, 0.5, 1); outline: 2px solid transparent; outline-offset: 2px; }
input:focus, select:focus, textarea:focus { border-color: var(--terminal-green); outline: 2px solid rgba(74, 222, 128, 0.3); outline-offset: 0px; box-shadow: inset 0 0 10px rgba(74, 222, 128, 0.1); background: rgba(255, 255, 255, 0.08); }

.btn { padding: 14px var(--space-3); border-radius: var(--radius-md); border: 0; background: var(--btn-bg); color: var(--btn-text); font-weight: 600; cursor: pointer; width: 100%; font-size: 16px; transition: 0.2s; font-family: inherit; }
.btn-danger { background: var(--color-danger); color: white; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); border: 0; cursor: pointer; font-weight: 600; transition: 0.2s; font-family: inherit; }

/* --- Dynamic Back Button --- */
.navBtn {
    /* SCROLLS OUT OF VIEW ON THE RIGHT SIDE */
    position: absolute; 
    top: var(--page-pad-top);
    right: calc(var(--space-3) + var(--safe-right));
    
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: var(--z-nav);
    
    padding: 12px 22px; 
    border-radius: 999px; 
    
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    backdrop-filter: blur(10px);
    transition: transform 0.15s ease, background 0.2s;
    width: fit-content;
}

/* Force Headers to use SF Pro Display */
h1, h2, h3, h4 { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif; letter-spacing: var(--tracking-tight); }
h1 { margin: 0 0 5px; font-size: 32px; font-weight: 700; line-height: 1.1; }
h2 { font-size: 28px; font-weight: 700; line-height: 1.15; }
h3 { font-size: 22px; font-weight: 600; line-height: 1.2; }
p.sub { color: var(--text-muted); margin: 0 0 var(--space-3); font-size: 15px; line-height: 1.5; letter-spacing: var(--tracking-normal); transition: color 0.3s ease; }

.heroImg img, .frame img { position: relative; z-index: 99; pointer-events: auto !important; max-width: 100%; height: auto; }
.heroImg, .frame { pointer-events: none; }

@media (max-width: 860px) {
  .bg-right::before { display: none; }
  .bg-left, .bg-right { position: fixed; height: 65vh; width: 100%; }
  .bg-left { top: -15vh; left: 0; }
  .bg-right { bottom: -15vh; top: auto; right: 0; }
}

/* =========================================
   ANIMATIONS & EFFECTS
   ========================================= */
@keyframes fadePageIn { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } }
.wrapper, .container, .desktop, .terminal-wrap, .hero-content, .shortcuts-grid > * { opacity: 0; animation: fadePageIn 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
.shortcuts-grid > *:nth-child(1) { animation-delay: 0.05s; }
.shortcuts-grid > *:nth-child(2) { animation-delay: 0.1s; }
.shortcuts-grid > *:nth-child(3) { animation-delay: 0.15s; }
.shortcuts-grid > *:nth-child(4) { animation-delay: 0.2s; }
.shortcuts-grid > *:nth-child(5) { animation-delay: 0.25s; }
.shortcuts-grid > *:nth-child(6) { animation-delay: 0.3s; }
.shortcuts-grid > *:nth-child(7) { animation-delay: 0.35s; }
.shortcuts-grid > *:nth-child(8) { animation-delay: 0.4s; }

@keyframes floatLoop { 0% { transform: translateY(0px); } 50% { transform: translateY(-12px); } 100% { transform: translateY(0px); } }

.shortcuts-grid i, .shortcuts-container i, .card i[data-lucide] { color: rgba(255, 255, 255, 0.82); transition: color 0.3s ease, transform 0.3s ease; }
.card:hover i[data-lucide] { color: rgba(255, 255, 255, 1); transform: scale(1.1); }
.navBtn i, .btn i { transition: transform 0.3s ease; }
.navBtn:hover i, .btn:hover i { transform: scale(1.1) rotate(3deg); }

/* =========================================
   CUSTOM CONTEXT MENU
   ========================================= */
#context-menu {
    position: fixed;
    z-index: var(--z-context);
    width: 220px;
    background: rgba(15, 15, 15, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    backdrop-filter: blur(20px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    padding: var(--space-1);
    display: none; 
    flex-direction: column;
    gap: 4px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    font-size: 14px;
    transform-origin: top left;
    animation: menuPop 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes menuPop {
    0% { opacity: 0; transform: scale(0.88) translateY(-6px); filter: blur(4px); }
    60% { opacity: 1; transform: scale(1.02) translateY(1px); filter: blur(0px); }
    100% { transform: scale(1) translateY(0); }
}

.context-item {
    padding: 12px var(--space-2);
    min-height: 44px;
    border-radius: 6px;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    transition: 0.2s;
}
#context-menu .context-item svg {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    margin-right: 4px;
}

.context-item i { width: 16px; height: 16px; color: var(--text-muted); }
.context-item:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.context-item:hover i { color: #fff; }
.context-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 4px 0; }

/* Custom inline emoji replacement */
.custom-emoji-inline {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.12em;
    object-fit: contain;
    user-select: none;
    transition: transform 0.15s ease;
}

.custom-emoji-inline:hover {
    transform: scale(1.08);
}

/* Morocco flag image */
.ma-flag{
  width: 1em;
  height: 1em;
  object-fit: contain;
  display: inline-block;
  vertical-align: -0.14em;
  transition: transform 0.15s ease, filter 0.15s ease;
  transform-origin: center;
}

.ma-flag:hover{
  transform: scale(1.15);
  filter: drop-shadow(0 2px 6px rgba(255,255,255,0.4));
}

.custom-emoji-inline.ma-flag{
  margin: 0 0.08em;
}

.tea-flag{
  width: 140px;
  height: 140px;
  vertical-align: middle;
  filter: drop-shadow(0 15px 25px rgba(0,0,0,0.6));
}

.tea-flag:hover{
  transform: scale(1.04);
  filter: drop-shadow(0 18px 28px rgba(0,0,0,0.65));
}

.achieve-flag{
  width: 36px;
  height: 36px;
  vertical-align: middle;
}



/* Custom Wael Scrollbar */
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: var(--color-bg-base); 
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2); 
    border-radius: 10px;
    border: 3px solid var(--color-bg-base); 
}
::-webkit-scrollbar-thumb:hover {
    background: var(--terminal-green); 
}

/* =========================================
   PREMIUM SPOTLIGHT SEARCH (Ctrl + K)
   ========================================= */
#spotlight-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    z-index: var(--z-spotlight);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

#spotlight-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

#spotlight-modal {
    width: 100%;
    max-width: 600px;
    background: rgba(15, 15, 15, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255,255,255,0.1);
    backdrop-filter: blur(20px) saturate(150%);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

#spotlight-overlay.active #spotlight-modal {
    transform: scale(1);
}

.spotlight-input-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: var(--space-2);
}

.spotlight-input-wrap svg {
    color: var(--text-muted);
    width: 22px; 
    height: 22px;
    min-width: 22px;
}

#spotlight-input {
    flex: 1;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-main);
    font-size: 18px;
    outline: none;
    margin: 0;
    padding: 0;
    font-family: inherit;
}

#spotlight-results {
    max-height: 350px;
    overflow-y: auto;
    padding: var(--space-1);
}

.spotlight-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: 0.15s;
    font-weight: 500;
}

.spotlight-item:hover, .spotlight-item.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
}

.spotlight-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
}

/* =========================================
   AMBIENT FLASHLIGHT BUTTON GLOW
   Uses ::after to avoid conflict with ::before radial gradient
   ========================================= */
.btn, .cta, .shortcut-btn {
    position: relative;
}

.btn, .cta, .top-nav-btn, .shortcut-btn, .navBtn {
    overflow: hidden;
    isolation: isolate; 
}

.btn::after, .cta::after, .top-nav-btn::after, .shortcut-btn::after, .navBtn::after {
    content: '';
    position: absolute;
    top: var(--y, 50%);
    left: var(--x, 50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle closest-side, rgba(255,255,255,0.25), transparent);
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    z-index: -1; 
}

.btn:hover::after, .cta:hover::after, .top-nav-btn:hover::after, .shortcut-btn:hover::after, .navBtn:hover::after {
    opacity: 1;
}

.btn-danger::after { background: radial-gradient(circle closest-side, rgba(255,71,87,0.4), transparent); }

/* =========================================
   SCROLL-DRIVEN REVEAL ANIMATIONS
   ========================================= */
.reveal-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s var(--ease-premium), transform 0.6s var(--ease-premium);
    will-change: opacity, transform;
}
.reveal-fade-up.is-revealed {
    opacity: 1;
    transform: translateY(0);
}
.reveal-scale-in {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s var(--ease-premium), transform 0.6s var(--ease-premium);
    will-change: opacity, transform;
}
.reveal-scale-in.is-revealed {
    opacity: 1;
    transform: scale(1);
}

/* =========================================
   MUSIC PLAYER SPECIFIC STYLES
   ========================================= */
.music-layout { display: flex; align-items: stretch; justify-content: center; gap: 30px; width: 100%; max-width: 900px; z-index: 10; animation: fadePageIn 0.6s var(--ease-premium) forwards; }
@media (max-width: 768px) { .music-layout { flex-direction: column; align-items: center; } }

.player-card, .playlist-card { background: var(--card-bg); border: 1px solid var(--glass-border-default); border-radius: 32px; width: 100%; max-width: 420px; height: 520px; box-sizing: border-box; backdrop-filter: var(--glass-blur-md); -webkit-backdrop-filter: var(--glass-blur-md); box-shadow: 0 30px 60px rgba(0,0,0,0.4); display: flex; flex-direction: column; flex: 1; transition: border-color var(--duration-fast) var(--ease-premium), transform var(--duration-fast) var(--ease-premium); }
.player-card:hover, .playlist-card:hover { border-color: var(--glass-border-prominent); }
.player-card { padding: 40px; text-align: center; align-items: center; justify-content: center; }
.playlist-card { padding: 20px 20px 20px 25px; }
.playlist-card h3 { margin: 0 0 15px 0; font-size: 18px; color: var(--text-main); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.playlist-container { flex: 1; overflow-y: auto; padding-right: 10px; display: flex; flex-direction: column; gap: 8px; }
.playlist-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid transparent; cursor: pointer; transition: var(--duration-fast); flex-shrink: 0; }
.playlist-item:hover { background: rgba(255, 255, 255, 0.08); }
.playlist-item.active { background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.3); }

.playlist-item-info { display: flex; flex-direction: column; text-align: left; overflow: hidden; width: 85%; }
.playlist-item-title { font-weight: 600; font-size: 14px; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playlist-item.active .playlist-item-title { color: #4ade80; }
.playlist-item-artist { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bars { display: none; align-items: flex-end; gap: 3px; height: 18px; }
.playlist-item.active.playing .bars { display: flex; }
.bar { width: 4px; background: #4ade80; border-radius: 2px; animation: bounce 1s var(--ease-premium) infinite; }
.bar:nth-child(1) { animation-delay: 0.0s; height: 100%; }
.bar:nth-child(2) { animation-delay: var(--duration-fast); height: 60%; }
.bar:nth-child(3) { animation-delay: 0.4s; height: 80%; }

@keyframes bounce { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }

.record-container { width: 200px; height: 200px; margin: 0 auto 30px; border-radius: 50%; position: relative; padding: 10px; background: rgba(0, 0, 0, 0.4); box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 10px 30px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.05); flex-shrink: 0; }
.record-container::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; background: #0b0b0b; border-radius: 50%; border: 2px solid #333; z-index: 5; }

#track-cover { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; animation: spin 8s var(--ease-premium) infinite; animation-play-state: paused; transition: var(--duration-fast); }
#track-cover.playing { animation-play-state: running; filter: drop-shadow(0 0 15px rgba(255,255,255,0.2)); }

@keyframes spin { 100% { transform: rotate(360deg); } }

.track-info { width: 100%; }
.title-container { width: 100%; overflow: hidden; white-space: nowrap; position: relative; margin-bottom: 5px; mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); }
.track-title { display: inline-block; font-size: 24px; font-weight: 700; letter-spacing: -0.5px; padding: 0 10px; }
.track-artist { margin: 0 0 25px; color: #4ade80; font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@keyframes marquee { 0% { transform: translateX(10%); } 100% { transform: translateX(-100%); } }
.marquee-active { animation: marquee linear infinite; }

.progress-wrapper { width: 100%; display: flex; align-items: center; gap: 12px; margin-bottom: 25px; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; font-size: 12px; color: var(--text-muted); }
input[type="range"] { flex: 1; -webkit-appearance: none; background: linear-gradient(to right, #fff var(--progress, 0%), rgba(255,255,255,0.1) var(--progress, 0%)); height: 6px; border-radius: 99px; outline: none; padding: 0; margin: 0; cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.5); transition: var(--duration-fast); }
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }

.controls { display: flex; align-items: center; justify-content: center; gap: 20px; width: 100%; }
.ctrl-btn { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; transition: var(--duration-fast) var(--ease-premium); }
.ctrl-btn:hover { background: rgba(255, 255, 255, 0.15); transform: scale(1.1); }
.ctrl-btn svg { width: 22px; height: 22px; }

.play-btn { width: 64px; height: 64px; background: #fff; color: #111; box-shadow: 0 10px 20px rgba(255,255,255,0.2); }
.play-btn:hover { background: #fff; transform: scale(1.05) translateY(-2px); box-shadow: 0 15px 25px rgba(255,255,255,0.3); }
.play-btn svg { width: 28px; height: 28px; fill: currentColor; }

.play-icon-centered { transform: translateX(2px); }

/* .navBtn duplicate removed — consolidated at line ~216 */

.download-btn { position: absolute; top: calc(25px + var(--safe-top)); left: calc(25px + var(--safe-left)); display: inline-flex; align-items: center; width: 44px; height: 44px; border-radius: 22px; padding: 0; box-sizing: border-box; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); color: #fff; cursor: pointer; transition: all var(--duration-fast) var(--ease-premium); overflow: hidden; z-index: 50; backdrop-filter: blur(10px); }
.download-btn-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.download-btn-icon svg { width: 18px; height: 18px; }
.download-btn-text { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif; font-size: 14px; font-weight: 600; opacity: 0; white-space: nowrap; transform: translateX(-5px); transition: all var(--duration-fast) var(--ease-premium); }
.download-btn:hover { width: 135px; background: rgba(255,255,255,0.2); }
.download-btn:hover .download-btn-text { opacity: 1; transform: translateX(0); }

/* =========================================
   HOME PAGE SPECIFIC STYLES
   ========================================= */
.wrap { position: relative; }
.hero-container { position: sticky; top: 0; min-height: 100vh; width: 100%; overflow: hidden; }
.hero-content, .hero-visuals { position: absolute; top: 0; bottom: 0; }
.hero-content { left: 0; width: 58%; background: var(--bg-left-grad); padding: 110px 7vw; display: flex; align-items: center; z-index: 1; }
.hero-visuals { right: 0; width: 52%; background: var(--bg-right-grad); z-index: 2; }
.hero-visuals::before { content: ""; position: absolute; left: -140px; top: -10%; width: 280px; height: 120%; background: inherit; transform: skewX(-14deg); box-shadow: -20px 0 50px rgba(0,0,0,.35); }
.top-nav-btn { position: absolute; top: calc(20px + var(--safe-top)); right: calc(20px + var(--safe-right)); z-index: 30; padding: 12px 22px; border-radius: 999px; background: var(--nav-bg); border: 1px solid var(--nav-border); backdrop-filter: blur(10px); color: var(--nav-text); font-weight: 700; text-decoration: none; transition: var(--duration-fast) var(--ease-premium); display: flex; align-items: center; gap: 6px; }
.top-nav-btn:hover { background: rgba(255,255,255,.2); }
.content { max-width: 560px; animation: fadeUp var(--duration-mid) var(--ease-premium) both; position: relative; z-index: 10; display: flex; flex-direction: column; align-items: flex-start; height: 280px; }
.hello { font-size: 26px; margin: 0 0 16px; color: var(--text-muted); }
.title { margin: 0; font-size: clamp(40px, 5vw, 72px); line-height: 1.1; }
.cursor { display: inline-block; width: 4px; height: 0.9em; background-color: var(--text-main); margin-left: 6px; vertical-align: middle; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cta { display: inline-flex; margin-top: auto; padding: 16px 28px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-text); font-weight: 800; text-decoration: none; min-width: 230px; align-items: center; justify-content: center; gap: 8px; transition: var(--duration-fast) var(--ease-premium); }

.hero-img { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 5; pointer-events: none; }
.hero-img .frame { width: 360px; height: 360px; max-width: 85%; max-height: 85%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--glass-border-default); border-radius: 28px; backdrop-filter: var(--glass-blur-md); -webkit-backdrop-filter: var(--glass-blur-md); box-shadow: 0 25px 70px rgba(0,0,0,0.45); position: relative; pointer-events: auto; transition: border-color var(--duration-fast) var(--ease-premium); }
.hero-img .frame:hover { border-color: var(--glass-border-prominent); }
.status-badge { 
    --badge-top: -10px;
    --badge-left: -10px;
    --badge-transform: none;
    position: absolute; 
    top: var(--badge-top); 
    left: var(--badge-left); 
    transform: var(--badge-transform);
    background: rgba(0, 0, 0, 0.85); 
    border: 1px solid rgba(255, 255, 255, 0.2); 
    padding: 8px 16px; 
    border-radius: 99px; 
    color: #fff; 
    font-size: 13px; 
    font-weight: 800; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    z-index: 50; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px); 
}
.status-dot-inner { position: relative; width: 10px; height: 10px; background-color: #4ade80; border-radius: 50%; }
.status-dot-inner::before, .status-dot-inner::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: 50%; background-color: #4ade80; z-index: -1; transform: translate(-50%, -50%); animation: organicPulse 3.5s cubic-bezier(0.25, 1, 0.5, 1) infinite; }
.status-dot-inner::after { animation-delay: 1.75s; }
@keyframes organicPulse { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 50% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; } }
.hero-img img { max-width: 75%; max-height: 75%; object-fit: contain; display: block; filter: drop-shadow(0 30px 60px rgba(0,0,0,.55)); pointer-events: none; -webkit-user-drag: none; }

.description-section { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 80px 5vw; background: #2b0404; text-align: center; position: relative; z-index: 5; content-visibility: auto; contain-intrinsic-size: auto 600px; }
.desc-text { font-size: clamp(32px, 5vw, 56px); font-weight: 800; line-height: 1.3; color: var(--text-main); max-width: 900px; letter-spacing: -0.5px; }
.desc-text span { display: block; color: var(--text-muted); font-size: clamp(20px, 3vw, 32px); margin-top: 15px; font-weight: 500; }
.shortcut-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 30px; padding: 12px 24px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 99px; text-decoration: none; font-size: 18px; font-weight: bold; transition: var(--duration-fast) var(--ease-premium); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.shortcut-btn:hover { background: rgba(255,255,255,.2); }
.footer-section { background: #110101; padding: 60px 20px; text-align: center; border-top: 1px solid rgba(255,255,255,.05); position: relative; z-index: 5; content-visibility: auto; contain-intrinsic-size: auto 200px; }
.footer-text { color: rgba(255,255,255,.5); font-size: 16px; line-height: 1.8; margin: 0; }
.footer-text strong { color: rgba(255,255,255,.85); font-size: 18px; }
.lucide { width: 1.2em; height: 1.2em; vertical-align: -0.125em; }
#boot-overlay { position: fixed; inset: 0; background: #0b0b0b; z-index: var(--z-boot); display: flex; align-items: center; justify-content: center; transition: opacity var(--duration-mid) var(--ease-premium), visibility var(--duration-mid), filter var(--duration-mid) var(--ease-premium), transform var(--duration-mid) var(--ease-premium); }
#boot-overlay.exiting { opacity: 0; filter: blur(10px); transform: scale(1.05); }
#boot-logo { width: 80px; height: 80px; animation: spinPulse 2s var(--ease-premium) infinite; }
@keyframes spinPulse { 0% { transform: scale(0.8) rotate(0deg); opacity: 0.5; } 50% { transform: scale(1.1) rotate(180deg); opacity: 1; } 100% { transform: scale(0.8) rotate(360deg); opacity: 0.5; } }
.desc-content-wrapper { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; }
.system-specs-card { background: var(--card-bg); border: 1px solid var(--glass-border-default); border-radius: 24px; padding: 30px; width: 100%; max-width: 480px; text-align: left; backdrop-filter: var(--glass-blur-md); -webkit-backdrop-filter: var(--glass-blur-md); box-shadow: 0 20px 40px rgba(0,0,0,0.3); transition: transform var(--duration-fast) var(--ease-premium), background var(--duration-fast) var(--ease-premium), border-color var(--duration-fast) var(--ease-premium); }
.system-specs-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.12); border-color: var(--glass-border-prominent); }
.specs-title { color: #fff; font-size: 20px; margin: 0 0 20px 0; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; font-weight: 700; }
.specs-title i { color: #4ade80; }
.specs-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.specs-list li { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 16px; }
.specs-list li i { color: #fff; opacity: 0.6; width: 18px; height: 18px; }
.specs-list li strong { color: #fff; font-weight: 500; min-width: 90px; }
@media (max-width: 860px) { 
  .hero-container { position: relative; display: flex; flex-direction: column; } 
  .hero-content, .hero-visuals { position: relative; width: 100%; z-index: 1; } 
  .hero-visuals { height: 50vh; } 
  .hero-visuals::before { display: none; } 
  .hero-content { text-align: center; justify-content: center; padding: 120px 7vw 60px; } 
  .content { margin: 0 auto; align-items: center; } 
  .hero-img { position: relative; height: 50vh; z-index: 3; } 
  .top-nav-btn { top: 15px; right: 15px; } 
  .status-badge { 
    --badge-top: 10px; 
    --badge-left: 50%; 
    --badge-transform: translateX(-50%); 
    font-size: 12px; 
  } 
  .one-line-text { white-space: normal; display: block; color: #fff; } 
}
@media (min-width: 861px) { .one-line-text { white-space: nowrap; display: inline-block; color: #fff; } }
html.skip-boot #boot-overlay { display: none !important; }

@media (prefers-reduced-transparency) {
  :root {
    --glass-blur: 0px !important;
  }
  .card, .playlist-card, .player-card, #spotlight-modal, #wael-popup-overlay, .system-specs-card, .hero-img .frame {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(15, 15, 15, 0.95) !important;
  }
}

/* --- PATCHED ORPHANS --- */
.skeleton-shimmer { background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Premium skeleton pulse — multi-layer sweep */
.skeleton-pulse { position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.04); border-radius: var(--radius-md); }
.skeleton-pulse::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.06) 45%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.06) 55%, transparent 70%); background-size: 250% 100%; animation: skeleton-sweep 1.8s ease-in-out infinite; }
@keyframes skeleton-sweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Graceful low-perf degradation */
.low-perf * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.low-perf .card, .low-perf .player-card, .low-perf .playlist-card, .low-perf #spotlight-modal, .low-perf .system-specs-card { background: rgba(15, 15, 15, 0.92) !important; box-shadow: var(--shadow-md) !important; }
.low-perf [data-tilt] { transform: none !important; }
.lucide-spin { animation: spin 2s linear infinite; }
.btn-danger-outline { background: transparent; color: #ff4757; border: 1px solid #ff4757; padding: 10px 15px; border-radius: 8px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.btn-danger-outline:hover { background: rgba(255,71,87,0.1); }

/* =========================================
   VIEW TRANSITION ANIMATIONS
   ========================================= */
::view-transition-old(root) {
    animation: 250ms var(--ease-premium) both vt-fade-out;
}
::view-transition-new(root) {
    animation: 250ms var(--ease-premium) both vt-fade-in;
}
@keyframes vt-fade-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-10px); }
}
@keyframes vt-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   ACHIEVEMENT POPUP SPRING
   ========================================= */
.achieve-popup.show {
    top: 20px;
    transition: top 500ms var(--ease-spring) !important;
}

/* --- Ripple Effect --- */
.ripple-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: ripple-anim 0.6s linear;
    pointer-events: none;
    will-change: transform, opacity;
}
@keyframes ripple-anim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* =========================================
   3D TILT CARD SYSTEM
   ========================================= */
[data-tilt] {
    transform-style: preserve-3d;
    transition: transform 0.4s var(--ease-spring);
}

.tilt-glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    transition: background 0.3s ease;
}