/* assets/css/app.css */

/* ===== VARIABLES ===== */
 :root{
      --bg-wallpaper:#000;
      --glass-material:rgba(30,30,30,0.65);
      --glass-border:rgba(255,255,255,0.12);
      --text-primary:#fff;
      --text-secondary:#86868b;
      --accent:#0A84FF;
      --ios-widget-bg:rgba(28,28,30,0.9);
      --shadow:0 30px 60px rgba(0,0,0,0.6);
      --radius-lg:24px;
      --radius-md:14px;
      --radius-sm:10px;
      --font-stack:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;
      --focus-ring: 0 0 0 3px rgba(10,132,255,0.45);
    }

    *{ margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; }
    html, body { height:100%; }

    body{
      background-color:var(--bg-wallpaper);
      color:var(--text-primary);
      font-family:var(--font-stack);
      width:100%;
      overflow:hidden; /* desktop window scroll only */
      background-image:radial-gradient(circle at 50% 30%, #1c1c1c 0%, #000 70%);
    }

    a, button{
      color:inherit;
      font:inherit;
    }
    a{ text-decoration:none; }

    /* =========================
       ACCESSIBILITY + FOCUS
       ========================= */
    :focus { outline:none; }
    :focus-visible{
      box-shadow: var(--focus-ring);
      border-radius: 10px;
    }
    .sr-only{
      position:absolute !important;
      width:1px; height:1px;
      padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0);
      white-space:nowrap; border:0;
    }

    /* =========================
       GLASSMORPH ANIM BG
       (behind finder window + header + footer)
       ========================= */
    .glass-bg{
      position:fixed;
      inset:0;
      z-index:0;            /* behind everything */
      pointer-events:none;  /* never block clicks */
      overflow:hidden;
    }

    /* Unified glass haze */
    .glass-bg::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 50% 30%, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0) 55%),
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0) 60%),
        linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.00) 50%, rgba(0,0,0,0.18));
      backdrop-filter: blur(22px) saturate(140%);
      -webkit-backdrop-filter: blur(22px) saturate(140%);
    }

    .glass-orb{
      position:absolute;
      width:min(70vmax, 920px);
      height:min(70vmax, 920px);
      border-radius:50%;
      filter: blur(40px);
      opacity:0.55;
      mix-blend-mode: screen;
      transform: translate3d(0,0,0);
      will-change: transform;
    }
    .orb-a{
      left:-18vmax; top:-22vmax;
      background: radial-gradient(circle at 30% 30%,
        rgba(10,132,255,0.95) 0%,
        rgba(10,132,255,0.25) 45%,
        rgba(10,132,255,0.00) 70%);
      animation: orbFloatA 18s ease-in-out infinite;
    }
    .orb-b{
      right:-22vmax; top:10vmax;
      background: radial-gradient(circle at 30% 30%,
        rgba(166,80,255,0.90) 0%,
        rgba(166,80,255,0.22) 48%,
        rgba(166,80,255,0.00) 72%);
      animation: orbFloatB 22s ease-in-out infinite;
    }
    .orb-c{
      left:10vmax; bottom:-26vmax;
      background: radial-gradient(circle at 30% 30%,
        rgba(48,209,88,0.65) 0%,
        rgba(48,209,88,0.18) 45%,
        rgba(48,209,88,0.00) 72%);
      animation: orbFloatC 26s ease-in-out infinite;
    }

    /* Grain for “real glass” texture */
    .glass-grain{
      position:absolute;
      inset:-30%;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
      opacity:0.08;
      mix-blend-mode: overlay;
      transform: translate3d(0,0,0);
      animation: grainDrift 8s steps(2) infinite;
    }

    /* Shimmer sweep */
    .glass-shimmer{
      position:absolute;
      inset:-40%;
      background: linear-gradient(120deg,
        rgba(255,255,255,0.00) 40%,
        rgba(255,255,255,0.06) 50%,
        rgba(255,255,255,0.00) 60%);
      transform: translateX(-20%);
      opacity:0.45;
      animation: shimmerSweep 10s ease-in-out infinite;
      mix-blend-mode: overlay;
    }

    @keyframes orbFloatA{
      0%   { transform: translate(0,0) scale(1.00); }
      50%  { transform: translate(8vmax, 6vmax) scale(1.06); }
      100% { transform: translate(0,0) scale(1.00); }
    }
    @keyframes orbFloatB{
      0%   { transform: translate(0,0) scale(1.02); }
      50%  { transform: translate(-10vmax, 4vmax) scale(1.08); }
      100% { transform: translate(0,0) scale(1.02); }
    }
    @keyframes orbFloatC{
      0%   { transform: translate(0,0) scale(0.98); }
      50%  { transform: translate(6vmax, -8vmax) scale(1.06); }
      100% { transform: translate(0,0) scale(0.98); }
    }
    @keyframes shimmerSweep{
      0%   { transform: translateX(-25%) rotate(0.001deg); }
      50%  { transform: translateX(25%)  rotate(0.001deg); }
      100% { transform: translateX(-25%) rotate(0.001deg); }
    }
    @keyframes grainDrift{
      0%   { transform: translate(0,0); }
      25%  { transform: translate(-2%, 1%); }
      50%  { transform: translate(-1%, -2%); }
      75%  { transform: translate(2%, 2%); }
      100% { transform: translate(0,0); }
    }

    /* Keep UI layers above animated background */
    .macos-menubar,
    .finder-window,
    .macos-dock,
    .ios-header,
    .ios-dock-container{
      position:relative;
      z-index:2;
    }

    /* =========================
       DESKTOP LAYER
       ========================= */
    .desktop-only{ display:block; }

    .macos-menubar{
      position:fixed; top:0; left:0; right:0; height:30px;
      background:rgba(255,255,255,0.02);
      backdrop-filter:blur(20px);
      display:flex; justify-content:space-between; align-items:center;
      padding:0 16px;
      font-size:13px; font-weight:500;
      z-index:1000;
      border-bottom:1px solid rgba(255,255,255,0.05);
      user-select:none;
    }
    .menubar-left,.menubar-right{ display:flex; gap:18px; align-items:center; }

/* ===== MENUBAR HOVER/CLICK EFFECTS (FORCED) ===== */
.macos-menubar .menubar-left,
.macos-menubar .menubar-right{
  display:flex;
  gap:18px;
  align-items:center;
}

.macos-menubar a.menubar-link{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 22px !important;
}
    /* NEW: Brand mark replaces  */
    .brand-mark{
      width:16px;
      height:16px;
      display:inline-block;
      object-fit:contain;
      opacity:0.95;
      /* If your SVG is dark, uncomment the next line to force it white-ish:
         filter: invert(1) brightness(1.2);
      */
    }

    .finder-window{
      position:absolute;
      top:50%; left:50%;
      transform:translate(-50%,-50%) scale(0.98);
      width:min(1100px, 90vw);
      height:min(80vh, 820px);
      background:rgba(20,20,20,0.85);
      backdrop-filter:blur(50px);
      -webkit-backdrop-filter:blur(50px);
      border:1px solid var(--glass-border);
      border-radius:12px;
      box-shadow:var(--shadow);
      display:flex; flex-direction:column;
      overflow:hidden;
      animation:bootUp 0.6s cubic-bezier(0.2,0.8,0.2,1) forwards 0.15s;
      opacity:0;
    }

    /* Premium “light catch” over the window */
    .finder-window::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      background: radial-gradient(circle at 20% 0%,
        rgba(255,255,255,0.12),
        rgba(255,255,255,0.00) 45%);
      opacity:0.35;
    }

    .window-header{
      height:52px;
      background:rgba(40,40,40,0.3);
      border-bottom:1px solid var(--glass-border);
      display:flex; align-items:center;
      padding:0 16px;
      flex-shrink:0;
      position:relative;
      z-index:1;
    }
    .traffic-lights{ display:flex; gap:8px; }
    .light{ width:12px; height:12px; border-radius:50%; }
    .close{ background:#FF5F57; border:1px solid #E0443E; }
    .min{ background:#FEBC2E; border:1px solid #D89E24; }
    .max{ background:#28C840; border:1px solid #1AAB29; }

    .window-title{
      position:absolute; left:50%; transform:translateX(-50%);
      display:flex; align-items:center; gap:8px;
      color:var(--text-secondary);
      font-size:13px; font-weight:600;
      pointer-events:none;
    }

    .window-body{ display:flex; height:100%; overflow:hidden; position:relative; z-index:1; }

    .sidebar{
      width:220px;
      background:rgba(0,0,0,0.2);
      border-right:1px solid var(--glass-border);
      padding:18px 10px;
      display:flex; flex-direction:column;
      gap:4px;
    }
    .sidebar-header{
      font-size:11px;
      color:var(--text-secondary);
      font-weight:700;
      margin:14px 10px 6px;
      letter-spacing:0.06em;
    }

    .sidebar-link{
      display:flex; align-items:center; gap:10px;
      width:100%;
      padding:7px 10px;
      border-radius:8px;
      font-size:13px;
      cursor:pointer;
      background:transparent;
      border:1px solid transparent;
    }
    .sidebar-link:hover{
      background:rgba(255,255,255,0.06);
    }
    .sidebar-link.active{
      background:rgba(255,255,255,0.10);
      border-color:rgba(255,255,255,0.08);
    }

    /* Content scroll container */
    .content-view{
      flex:1;
      overflow-y:auto;
      scroll-behavior:smooth;
    }

    /* Subtle, discoverable scrollbar */
    .content-view{
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.25) transparent;
    }
    .content-view::-webkit-scrollbar{ width:10px; }
    .content-view::-webkit-scrollbar-track{ background:transparent; }
    .content-view::-webkit-scrollbar-thumb{
      background:rgba(255,255,255,0.18);
      border-radius:999px;
      border:3px solid transparent;
      background-clip:content-box;
    }
    .content-view::-webkit-scrollbar-thumb:hover{
      background:rgba(255,255,255,0.28);
      border:3px solid transparent;
      background-clip:content-box;
    }

    /* Landing sections (normal landing page, OS-skinned) */
    .section{
      padding:72px 40px;
      border-bottom:1px solid var(--glass-border);
    }
    .section:last-child{ border-bottom:none; }

    .hero{
      padding-top:84px;
      text-align:center;
      background:linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
    }
    .hero h1{
      font-size:3rem;
      letter-spacing:-0.05em;
      margin-bottom:10px;
    }
    .hero p{
      color:var(--text-secondary);
      font-size:1.15rem;
      max-width:560px;
      margin:0 auto;
      line-height:1.45;
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-top:18px;
      font-size:0.82rem;
      color:#b8b8bf;
      border:1px solid rgba(255,255,255,0.12);
      padding:6px 12px;
      border-radius:999px;
      background:rgba(0,0,0,0.18);
    }
    .cta-row{
      margin-top:20px;
      display:flex;
      justify-content:center;
      gap:12px;
      flex-wrap:wrap;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:10px 14px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,0.12);
      background:rgba(255,255,255,0.06);
      cursor:pointer;
      transition:transform 0.15s ease, background 0.15s ease;
    }
    .btn:hover{ background:rgba(255,255,255,0.10); transform:translateY(-1px); }
    .btn.primary{
      background:rgba(10,132,255,0.25);
      border-color:rgba(10,132,255,0.35);
    }

    .section-title{
      font-size:0.9rem;
      color:#a0a0a8;
      text-transform:uppercase;
      letter-spacing:0.12em;
      margin-bottom:14px;
    }

    .grid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
      gap:16px;
      margin-top:10px;
    }
    .card{
      background:rgba(255,255,255,0.03);
      border:1px solid var(--glass-border);
      border-radius:12px;
      padding:18px;
      transition:transform 0.15s ease, background 0.15s ease;
    }
    .card:hover{ background:rgba(255,255,255,0.08); transform:translateY(-2px); }
    .card h3{
      font-size:1rem;
      margin:10px 0 6px;
    }
    .card p{
      color:var(--text-secondary);
      font-size:0.92rem;
      line-height:1.45;
    }
    .icon{
      font-size:22px;
      display:inline-flex;
      width:34px; height:34px;
      align-items:center; justify-content:center;
      border-radius:10px;
      background:rgba(255,255,255,0.06);
      border:1px solid rgba(255,255,255,0.10);
    }

    /* “File cards” become real links */
    .file-grid{
      padding:28px 40px 56px;
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
      gap:18px;
    }
    .file-link{
      display:block;
      background:rgba(255,255,255,0.03);
      border:1px solid var(--glass-border);
      border-radius:12px;
      padding:18px;
      transition:transform 0.15s ease, background 0.15s ease;
    }
    .file-link:hover{ background:rgba(255,255,255,0.08); transform:translateY(-2px); }
    .file-name{ font-weight:650; font-size:14px; margin-top:10px; }
    .file-meta{ font-size:12px; color:var(--text-secondary); margin-top:4px; }

    .footer-note{
      padding:26px 40px 44px;
      text-align:center;
      color:#56565f;
      font-size:0.85rem;
    }

    /* Desktop Dock */
    .macos-dock{
      position:fixed;
      bottom:20px; left:50%;
      transform:translateX(-50%);
      height:64px;
      background:rgba(255,255,255,0.10);
      backdrop-filter:blur(20px);
      border:1px solid rgba(255,255,255,0.10);
      border-radius:20px;
      display:flex; align-items:center;
      padding:0 12px;
      gap:12px;
      box-shadow:0 20px 40px rgba(0,0,0,0.4);
      z-index:1000;
    }
    .dock-btn{
      width:48px; height:48px;
      border-radius:12px;
      display:flex; align-items:center; justify-content:center;
      font-size:22px;
      cursor:pointer;
      transition:transform 0.2s cubic-bezier(0.2,2,0.4,1);
      position:relative;
      border:1px solid rgba(255,255,255,0.12);
      background:#222;
    }
    .dock-btn:hover{ transform:scale(1.18) translateY(-10px); }
    .dock-dot{
      width:4px; height:4px;
      background:rgba(255,255,255,0.55);
      border-radius:50%;
      position:absolute;
      bottom:-7px;
    }
    .dock-sep{ width:1px; height:30px; background:rgba(255,255,255,0.2); }

    .dock-mail{ background:rgba(10,132,255,0.55); }
    .dock-x{ background:#000; }
    .dock-discord{ background:#5865F2; }
    .dock-gear{ background:#333; }

    /* =========================
       MOBILE LAYER
       ========================= */
    .mobile-only{ display:none; }

    @media (max-width: 768px){
      body{
        overflow:auto; /* normal page scroll on mobile */
        padding:
          calc(44px + env(safe-area-inset-top, 0px))
          20px
          calc(96px + env(safe-area-inset-bottom, 0px))
          20px;
      }
      
      .menu-dropdown{ min-width:200px; }

      .desktop-only{ display:none !important; }
      .mobile-only{ display:block; }

      .ios-header{
        position:fixed;
        top:0; left:0; right:0;
        height:44px;
        padding:0 24px;
        display:flex;
        justify-content:space-between;
        align-items:center;
        font-weight:700;
        font-size:14px;
        z-index:100;
        color:#fff;
        background:linear-gradient(180deg, rgba(0,0,0,0.45), transparent);
        backdrop-filter: blur(10px);
      }

      .ios-container{
        display:flex;
        flex-direction:column;
        gap:18px;
        animation:fadeUp 0.6s ease forwards;
      }

      .ios-widget-large{
        background:var(--ios-widget-bg);
        backdrop-filter:blur(30px);
        border-radius:var(--radius-lg);
        padding:22px;
        min-height:200px;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        box-shadow:0 10px 30px rgba(0,0,0,0.3);
        border:1px solid rgba(255,255,255,0.10);
      }
      .ios-kicker{
        font-size:12px;
        color:#a0a0a8;
        text-transform:uppercase;
        font-weight:800;
        letter-spacing:0.12em;
      }
      .ios-hero-title{
        font-size:28px;
        font-weight:800;
        line-height:1.08;
        margin-top:10px;
      }
      .ios-hero-sub{
        font-size:14px;
        color:#cfcfd6;
        line-height:1.45;
      }

      .ios-widget-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:14px;
      }
      .ios-widget-medium{
        background:var(--ios-widget-bg);
        border-radius:20px;
        aspect-ratio:1/1;
        padding:16px;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
        border:1px solid rgba(255,255,255,0.10);
      }
      .ios-widget-verified{
        background:linear-gradient(135deg, rgba(10,132,255,0.85), rgba(13,94,160,0.85));
      }

      .library-title{
        margin-top:6px;
        margin-left:4px;
        font-size:20px;
        font-weight:800;
      }

      .ios-app-grid{
        display:grid;
        grid-template-columns:repeat(4, 1fr);
        gap:18px 10px;
        margin-top:10px;
      }

      .ios-app{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:8px;
      }

      .app-link{
        width:60px; height:60px;
        border-radius:14px;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:26px;
        border:1px solid rgba(255,255,255,0.10);
        background:linear-gradient(135deg, #333, #111);
      }
      .app-name{
        font-size:11px;
        color:#fff;
        text-align:center;
      }

      .ios-dock-container{
        position:fixed;
        left:20px; right:20px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        height:86px;
        background:rgba(255,255,255,0.15);
        backdrop-filter:blur(40px);
        border-radius:30px;
        display:flex;
        align-items:center;
        justify-content:space-around;
        z-index:100;
        padding:0 10px;
        border:1px solid rgba(255,255,255,0.10);
      }
      .dock-icon-mobile{
        width:56px; height:56px;
        border-radius:14px;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:28px;
        border:1px solid rgba(255,255,255,0.10);
      }
    }

    /* =========================
       MOTION SAFETY
       ========================= */
    @keyframes bootUp { to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
    @keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

    @media (prefers-reduced-motion: reduce){
      *{ scroll-behavior:auto !important; }
      .finder-window{ animation:none !important; opacity:1 !important; transform:translate(-50%,-50%) scale(1) !important; }
      .ios-container{ animation:none !important; }
      .btn, .card, .file-link, .dock-btn{ transition:none !important; }
      .glass-orb, .glass-grain, .glass-shimmer{ animation:none !important; }
    }