/* Cheese — Home page (assets/css/home.css) */
/* =====================
   RESET
   ===================== */

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

/* =====================
   BODY
   ===================== */
/* Shared visual identity: the SAME background image as the Analysis and
   Opening Explorer pages (custom_bg1.png), cover-sized and fixed. */

body {
    height: 100vh;
    overflow: auto;
    /* Relative to THIS stylesheet (assets/css/), not to index.html — a css
       url() always resolves against the stylesheet's own location. Matches
       auth.css, which sets the same background from this folder. */
    background-image: url("../backgrounds/custom_bg1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: Arial, sans-serif;
    color: white;
}

/* =====================
   LEFT NAVIGATION SIDEBAR  (unchanged)
   ===================== */

.left-nav {
    position: fixed;
    left: 0;
    top: 0;
    width: 220px;
    height: 100vh;
    background: rgba(12, 16, 28, 0.72);
    backdrop-filter: blur(28px) saturate(135%);
    -webkit-backdrop-filter: blur(28px) saturate(135%);
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    display: flex;
    flex-direction: column;
    z-index: 100;
    box-shadow: 6px 0 34px rgba(0, 0, 0, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.05),
                inset -1px 0 0 rgba(255, 255, 255, 0.04);
    padding: 0 0 24px 0;
}

/* LOGO */

a.left-nav-logo,
a.left-nav-item {
    text-decoration: none;
    color: inherit;
    display: flex;
}

a.left-nav-logo {
    cursor: pointer;
}

a.left-nav-logo:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Wrapper li for navigable items — no list styling */
.left-nav-items > li:has(a.left-nav-item-link) {
    list-style: none;
}

/* Navigable (non-active, non-disabled) nav item hover */
a.left-nav-item-link {
    cursor: pointer;
    width: 100%;
}

a.left-nav-item-link:hover {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.85);
    transform: translateX(3px);
}

.left-nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 26px 20px 22px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    margin-bottom: 16px;
}

.left-nav-logo-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.left-nav-logo-text {
    font-size: 22px;
    font-weight: 800;
    color: white;
    letter-spacing: 0.5px;
    font-family: Arial, sans-serif;
}

/* NAV LIST */

.left-nav-items {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 12px;
    flex: 1;
}

/* NAV ITEM */

.left-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 15px;
    font-weight: 500;
    font-family: Arial, sans-serif;
    cursor: default;
    transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
    position: relative;
    user-select: none;
}

/* ACTIVE */

.left-nav-active {
    background: rgba(255, 255, 255, 0.10);
    color: white;
    cursor: default;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}

/* ACTIVE accent bar */

.left-nav-active::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 0 3px 3px 0;
}

/* ICON */

.left-nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.85;
}

/* AUTH BUTTONS — duplicated from assets/css/nav.css because the Home page
   does not load that shared file (it keeps its own full copy of the nav
   rules above, predating nav.css's extraction). This copy is REQUIRED, not
   leftover: deleting it leaves the Home page's Sign Up / Log In buttons
   unstyled. Keep both copies in sync if this block changes.
   These are the signed-out buttons; assets/js/clerk-client.js replaces the
   block's contents with the account row once Clerk confirms a session. */

.left-nav-auth {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 12px 0 12px;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    /* Hidden until assets/js/clerk-client.js knows the real auth state and
       calls reveal() — otherwise every full-page navigation (this is a
       multi-page static site, so every nav is a real reload) would paint
       the signed-out buttons first and only correct it after Clerk.load()
       resolves, flashing the wrong state for signed-in users. */
    opacity: 0;
    transition: opacity 0.15s ease;
}

.left-nav-auth.left-nav-auth-ready {
    opacity: 1;
}

.left-nav-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Explicit width/box-sizing rather than relying on flex-stretch alone —
       this is also used on a <button> (Sign Out), and button intrinsic
       sizing/box-sizing defaults are inconsistent enough across browsers
       to not leave to chance. */
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: Arial, sans-serif;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    transition: transform 0.18s ease, background 0.18s ease,
                border-color 0.18s ease, box-shadow 0.18s ease;
}

.left-nav-auth-btn-primary {
    background: rgba(244, 247, 253, 0.95);
    color: #0c1018;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.left-nav-auth-btn-primary:hover {
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.38);
}

.left-nav-auth-btn-ghost {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.14);
}

.left-nav-auth-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

/* SIGNED-IN ACCOUNT ROW — duplicated from assets/css/nav.css because Home
   doesn't load that shared file; keep both in sync. Square avatar, not
   circular — corrected after an earlier circular preview. */

.left-nav-account {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    margin-bottom: 4px;
}

.left-nav-account-avatar {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    flex-shrink: 0;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.08);
}

/* Default avatar — shown instead of Clerk's own generated placeholder
   (a colourful gradient tile) when the user hasn't uploaded a real photo.
   Duplicated from assets/css/nav.css because Home doesn't load that
   shared file; keep both in sync. */
.left-nav-account-avatar-default {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(6px) saturate(130%);
    -webkit-backdrop-filter: blur(6px) saturate(130%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 700;
    font-family: Arial, sans-serif;
    user-select: none;
}

.left-nav-account-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =====================
   HOME CONTENT AREA
   ===================== */

.home-container {
    margin-left: 220px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 84px 60px 88px 60px;
}

.home-inner {
    width: 100%;
    max-width: 1080px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* =====================
   HERO
   ===================== */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
    margin-bottom: 78px;
}

/* Soft dark scrim behind the hero so text reads clearly over the bright
   background. Purely visual — does not affect layout or spacing.
   Low opacity + blur + a gradient that fades out well inside the box, so it
   reads as a natural vignette with no visible circular edge. */
.hero::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 185%;
    height: 215%;
    background: radial-gradient(ellipse at center,
                rgba(6, 9, 16, 0.30) 0%,
                rgba(6, 9, 16, 0.22) 30%,
                rgba(6, 9, 16, 0.10) 50%,
                rgba(6, 9, 16, 0.0) 70%);
    filter: blur(30px);
    z-index: -1;
    pointer-events: none;
}

/* Cheese logo — stands alone inside its own circular border */
.hero-icon {
    width: 92px;
    height: 92px;
    opacity: 0.96;
    filter: drop-shadow(0 6px 22px rgba(0, 0, 0, 0.4));
}

/* Off-white title for readability on the bright background, with a soft
   shadow for separation. */
.hero-title {
    font-size: 68px;
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 1.04;
    color: #eef1f8;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.hero-subtitle {
    font-size: 20px;
    font-weight: 600;
    color: rgba(244, 247, 253, 0.92);
    letter-spacing: 0.3px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

.hero-desc {
    margin-top: 4px;
    max-width: 540px;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(233, 238, 246, 0.82);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hero-tagline {
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: rgba(233, 238, 246, 0.58);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* HERO BUTTONS */

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 16px;
}

/* Second row holding the fourth button, centered beneath the first three */
.hero-actions-secondary {
    margin-top: 14px;
}

.home-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 700;
    font-family: Arial, sans-serif;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
                box-shadow 0.2s ease,
                background 0.2s ease,
                border-color 0.2s ease;
}

.home-btn svg {
    width: 18px;
    height: 18px;
}

/* Primary — the clear place to begin */
.home-btn-primary {
    background: rgba(244, 247, 253, 0.95);
    color: #0c1018;
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.home-btn-primary:hover {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
}

.home-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* Secondary — dark glass */
.home-btn-ghost {
    background: rgba(13, 16, 22, 0.62);
    color: #eaeef7;
    border-color: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
}

.home-btn-ghost:hover {
    background: rgba(20, 25, 33, 0.74);
    border-color: rgba(255, 255, 255, 0.32);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42);
}

.home-btn-ghost:active {
    transform: translateY(0);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* =====================
   FEATURES
   ===================== */

.features {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.features-heading {
    font-size: 23px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8),
                 0 2px 14px rgba(0, 0, 0, 0.5);
    margin-bottom: 30px;
}

.feature-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

/* FEATURE CARD — strong dark glass panel */
.feature-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 24px;
    border-radius: 16px;
    background: rgba(13, 16, 22, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
                border-color 0.22s ease,
                box-shadow 0.22s ease,
                background 0.22s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.20);
    background: rgba(18, 23, 32, 0.9);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.52),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.feature-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    transition: background 0.22s ease, border-color 0.22s ease;
}

.feature-card-icon svg {
    width: 21px;
    height: 21px;
    color: rgba(255, 255, 255, 0.82);
}

.feature-card:hover .feature-card-icon {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.18);
}

.feature-card-title {
    font-size: 16.5px;
    font-weight: 700;
    color: #f2f5fb;
}

.feature-card-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
}

/* =====================
   MOTION — tasteful, on-load only
   ===================== */

@keyframes homeRise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hero fades up in a gentle cascade */
.hero-icon     { animation: homeRise 0.6s ease-out 0.02s both; }
.hero-title    { animation: homeRise 0.6s ease-out 0.10s both; }
.hero-subtitle { animation: homeRise 0.6s ease-out 0.18s both; }
.hero-desc     { animation: homeRise 0.6s ease-out 0.26s both; }
.hero-tagline  { animation: homeRise 0.6s ease-out 0.30s both; }
.hero-actions  { animation: homeRise 0.6s ease-out 0.34s both; }

.features-heading { animation: homeRise 0.6s ease-out 0.42s both; }

/* Feature cards settle in just after the hero, lightly staggered */
.feature-card { animation: homeRise 0.55s ease-out both; }
.feature-card:nth-child(1) { animation-delay: 0.48s; }
.feature-card:nth-child(2) { animation-delay: 0.55s; }
.feature-card:nth-child(3) { animation-delay: 0.62s; }
.feature-card:nth-child(4) { animation-delay: 0.69s; }
.feature-card:nth-child(5) { animation-delay: 0.76s; }
.feature-card:nth-child(6) { animation-delay: 0.83s; }

/* =====================
   RESPONSIVE
   ===================== */

@media (max-width: 1100px) {
    .hero-title { font-size: 60px; }
}

@media (max-width: 900px) {
    .home-container { padding: 64px 40px 72px 40px; }
    .hero { margin-bottom: 60px; }
    .hero-title { font-size: 52px; }
}

@media (max-width: 560px) {
    .home-container { padding: 48px 22px 60px 22px; }
    .hero-title { font-size: 42px; }
    .hero-subtitle { font-size: 17px; }
    .hero-actions { width: 100%; flex-direction: column; }
    .home-btn { width: 100%; justify-content: center; }
    .feature-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =====================
   REDUCED MOTION
   ===================== */

@media (prefers-reduced-motion: reduce) {
    .hero-icon,
    .hero-title,
    .hero-subtitle,
    .hero-desc,
    .hero-tagline,
    .hero-actions,
    .features-heading,
    .feature-card,
    .home-btn {
        animation: none !important;
        transition: none !important;
    }
    .feature-card:hover,
    .home-btn:hover {
        transform: none;
    }
}