/* ══════════════════════════════════════════
   SCOOP OOH — HERO LANDING (home.html)
   Standalone entry point, pre-auth. Reuses splash.css's hero visual
   language (photo background/tint/glass panel, hero-eyebrow/headline/sub)
   — this file only adds what splash.css doesn't already have: the
   standalone-page min-height (splash.css's is intentionally shorter to sit
   below the app's fixed 64px nav, which doesn't exist here), the theme
   toggle button (copied from login.css — same reasoning as portal.css's
   own copy, this page has no dependency on login.css), the logo mark, and
   the three role-selector cards.
══════════════════════════════════════════ */

#homeHero.splash-hero { min-height: 100vh; }

/* ── Loading state ────────────────────── */
/* Default-hidden state for the hero/theme-toggle while home.js checks auth
   — see the JS-toggled-visibility convention (default hidden via CSS,
   revealed by an explicit classList change, never a static inline style=). */
.home-hero-hidden { display: none; }

.home-loading-overlay {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  /* Matches .splash-tint's own near-black --bg-base reference so the
     spinner reads as part of the same dark hero rather than a plain
     unrelated loading screen. */
  background: var(--bg-base);
}
.home-loading-overlay.home-loading-hide { display: none; }

.home-loading-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.2);
  border-top-color: var(--brand-500);
  animation: homeLoadingSpin 0.8s linear infinite;
}
@keyframes homeLoadingSpin { to { transform: rotate(360deg); } }

/* Redundant over this page's own photo background, same as login.css */
body::before { display: none; }

/* Match login.css's .login-headline typeface (var(--font-body)) instead of
   splash.css's shared --font-display treatment — scoped to #homeHero only
   so pages/splash.html's internal dashboard splash keeps the display font. */
#homeHero .hero-headline { font-family: var(--font-body); }

/* Drop splash.css's decorative bullet dot before the eyebrow text — scoped
   to #homeHero only so pages/splash.html's internal dashboard splash keeps it. */
#homeHero .hero-eyebrow::before { display: none; }

/* Lighter version of splash.css's .splash-tint gradient — scoped to
   #homeHero only so pages/splash.html's internal dashboard splash (which
   sits below the app's own nav/chrome, not full-bleed like this standalone
   page) keeps the darker original. */
#homeHero .splash-tint {
  background:
    linear-gradient(180deg, rgba(11,12,14,0.40) 0%, rgba(11,12,14,0.52) 45%, rgba(11,12,14,0.7) 100%);
}

/* ── Theme toggle (copied from login.css's .btn-theme) ── */
.btn-theme {
  position: fixed; top: 20px; right: 20px; z-index: 100;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border-glass);
  background: var(--bg-glass);
  color: var(--text-secondary); font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.btn-theme:hover { border-color: var(--accent-indigo); color: var(--text-primary); }
.btn-theme .material-symbols-outlined { font-size: 20px; }

/* ── Logo ─────────────────────────────── */
.home-logo-wrap {
  display: flex; justify-content: center; margin-bottom: 20px;
  position: relative; z-index: 1;
  opacity: 0; animation: fadeInUp 0.6s ease both;
}
.home-logo { height: 48px; width: auto; }

/* ── Role cards ───────────────────────── */
.home-roles {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  animation: fadeInUp 0.6s 0.3s ease both;
  position: relative; z-index: 1;
}
.home-role-card {
  display: flex; align-items: center; gap: 14px;
  width: 260px; padding: 20px 22px; border-radius: 20px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22);
  color: #fff; text-decoration: none;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.home-role-card:hover,
.home-role-card:focus-visible {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.4);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
.home-role-card:active { transform: translateY(-1px); }

.home-role-icon {
  flex: none; width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
}
.home-role-text { flex: 1; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.home-role-title { font-family: var(--font-body); font-weight: 700; font-size: 14px; }
.home-role-sub { font-size: 11.5px; color: rgba(255,255,255,0.72); line-height: 1.3; }

.home-role-card .btn-arrow {
  width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  transition: transform 0.2s; flex: none;
}
.home-role-card:hover .btn-arrow { transform: translateX(4px); }

@media (max-width: 900px) {
  .home-role-card { width: 100%; max-width: 340px; }
  .home-roles { flex-direction: column; align-items: center; }
}