/* =========================================================
   Vicarion — Dashboard styles (Orbital Control Deck) · v1.2
   - Cinematic hero with SVG rings + gold orbiters
   - Glass widgets + access tiles (with Safari fallbacks)
   - Responsive, a11y-friendly, reduced-motion aware
   ========================================================= */

/* -------- Tokens -------- */
:root{
  --gold:        #ffc107;
  --gold-deep:   #ffb300;
  --gold-soft:   #ffe082;
  --ink:         #000;
  --hdr-h:       72px;

  /* Glass + elevation */
  --glass-bg:    rgba(255,255,255,.04);
  --glass-bd:    rgba(255,255,255,.10);
  --elev-1:      0 10px 24px rgba(0,0,0,.35);
  --elev-2:      0 12px 28px rgba(0,0,0,.35);
  --gold-glow:   0 0 18px rgba(255,193,7,.25);
}

/* -------- Base -------- */
body{
  background:#000;
  color:#e0e0e0;
  font-family:'Poppins',sans-serif;
  padding-top:var(--hdr-h);     /* space for fixed header */
  overflow-x:hidden;
  transition:background .3s ease, color .3s ease;
}
a{ color:inherit; text-decoration:none; }
a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* =========================================================
   HERO: Orbital Control Deck
   ========================================================= */
.dash-hero.hero--orbital{
  position:relative;
  min-height: calc(100svh - var(--hdr-h));   /* perfect first-screen fit */
  display:flex; justify-content:center; text-align:center; color:#fff;
  background:#000;
  overflow:hidden; isolation:isolate;        /* keep glows behind text */
}

/* Soft vignettes to focus eye to center & CTAs */
.dash-hero.hero--orbital::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 560px at 50% 25%, rgba(0,0,0,.35), transparent 60%),
    radial-gradient(2200px 1200px at 50% 95%, rgba(0,0,0,.82), transparent 72%);
}

/* Decorative layer: rings SVG + orbiters */
.dash-decor{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.dash-decor .rings{
  position:absolute; inset:0; width:100%; height:100%; opacity:.6;
  filter: drop-shadow(var(--gold-glow));
}

/* Ultra-slow, subtle ring rotations */
@keyframes ringSpinCW  { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes ringSpinCCW { from{transform:rotate(0)} to{transform:rotate(-360deg)} }
.rings .r2{ transform-origin:50% 50%; animation: ringSpinCW 120s linear infinite; }
.rings .r3{ transform-origin:50% 50%; animation: ringSpinCCW 160s linear infinite; }

/* Gold orbiters; tweak --r (radius) & --d (duration) to taste */
.orb{
  --r: 180px;      /* orbit radius */
  --d: 22s;        /* orbit duration */
  --size: 12px;    /* orb diameter */
  position:absolute; left:50%; top:50%;
  width:var(--size); height:var(--size); border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--gold-soft), var(--gold));
  box-shadow: 0 0 16px rgba(255,193,7,.65), 0 0 30px rgba(255,193,7,.25);
  transform: translate(-50%,-50%) rotate(0deg) translateX(var(--r));
  animation: orbit var(--d) linear infinite;
}
@keyframes orbit{
  from{ transform: translate(-50%,-50%) rotate(0deg)   translateX(var(--r)); }
  to  { transform: translate(-50%,-50%) rotate(360deg) translateX(var(--r)); }
}
/* Depth variety */
.orb-1{ --r: 180px; --d: 24s; --size: 10px; }
.orb-2{ --r: 280px; --d: 32s; --size: 12px; filter: blur(.25px); }
.orb-3{ --r: 380px; --d: 40s; --size:  9px; filter: blur(.35px); }

/* Foreground hero content placement */
.hero-content--dash{
  position:absolute; top:52%; left:50%; transform:translate(-50%,-50%);
  width:min(90%, 1100px); z-index:1;
}
.hero-content--dash .eyebrow{
  font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-soft); margin-bottom:.4rem;
}
.hero-content--dash .hero-title{
  font-family:'Cinzel', serif; line-height:1.12;
  font-size:clamp(1.9rem, 4.6vw, 3rem);
  background:linear-gradient(90deg, var(--gold-soft), var(--gold) 60%, var(--gold-deep));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 14px rgba(0,0,0,.7);
}
.hero-content--dash .hero-subtitle{
  max-width: 920px; margin: .4rem auto 0; color:#cfcfcf;
}

/* CTAs */
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.btn-get-started,
.btn-login{
  border-radius:40px; font-weight:700; padding:.85rem 1.8rem;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-get-started{
  color:#000;
  background:linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  box-shadow:0 0 12px rgba(255,193,7,.6), inset 0 0 24px rgba(255,193,7,.4);
}
.btn-login{
  color:var(--gold);
  background:rgba(255,255,255,.05);
  border:2px solid var(--gold);
  box-shadow:0 0 8px rgba(255,193,7,.7);
}
@media (hover:hover){
  .btn-get-started:hover,
  .btn-login:hover{ transform:translateY(-4px); }
}
.btn-get-started:focus-visible,
.btn-login:focus-visible{
  outline:2px solid #fff; outline-offset:3px;
  box-shadow:0 0 0 4px rgba(255,193,7,.35);
}

/* Trust chips under CTAs */
.trust li{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .7rem; border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  color:#f5f5f5; font-size:.92rem;
}
.trust i{ color:var(--gold); }

/* =========================================================
   Hero widget strip (glass mini-cards)
   ========================================================= */
.hero-widgets{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-inline:auto; max-width:1100px;
}
.widget-mock{
  position:relative; border-radius:16px; overflow:hidden;
  background: var(--glass-bg);
  border:1px solid var(--glass-bd);
  box-shadow: var(--elev-1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); /* Safari */
}
.widget-mock header{
  text-align:left; padding:10px 12px; font-weight:700; font-size:.9rem;
  letter-spacing:.04em; color:#fff; border-bottom:1px solid rgba(255,255,255,.08);
}
.widget-mock .widget-body{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; color:#fff;
}
.widget-mock svg{ width:100%; height:36px; display:block; opacity:.9; }
.widget-mock strong{ font-weight:700; color:var(--gold-soft); }

/* Pills */
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.25rem .55rem; border-radius:999px; font-weight:700; font-size:.78rem;
  border:1px solid; letter-spacing:.02em;
}
.pill-ok{   color:#b2f5ea; border-color:#2dd4bf; background:rgba(45,212,191,.10); }
.pill-warn{ color:#ffd37a; border-color:#f59e0b; background:rgba(245,158,11,.12); }
.pill-crit{ color:#ffb3b3; border-color:#ef4444; background:rgba(239,68,68,.12); }

/* Focus-visible on widgets for keyboard users */
.widget-mock:focus-within{
  outline:2px solid var(--gold); outline-offset:2px;
  box-shadow:0 0 0 4px rgba(255,193,7,.25);
}

/* =========================================================
   Access tiles (SSO / MFA / Multi-tenant)
   ========================================================= */
.access-tiles{ 
  background: linear-gradient(180deg, #060606, #0b0b0b);
  content-visibility: auto;      /* render only when in view */
  contain-intrinsic-size: 600px; /* reserve space to avoid jank */
}
.tile.glass{
  text-align:center; padding:28px; border-radius:18px; height:100%;
  background: var(--glass-bg);
  border:1px solid var(--glass-bd);
  box-shadow: var(--elev-2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
}
@media (hover:hover){
  .tile.glass:hover{
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(255,193,7,.18);
    border-color: rgba(255,193,7,.35);
    filter: brightness(1.03);
  }
}
.tile.glass:focus-visible{
  outline:2px solid #fff; outline-offset:3px;
  box-shadow:0 0 0 4px rgba(255,193,7,.35);
}
.tile.glass i{
  font-size: 2.2rem; color: var(--gold); display:block; margin-bottom:.6rem;
  filter: drop-shadow(0 0 10px rgba(255,193,7,.35));
}
.tile.glass h3{
  font-family:'Cinzel', serif; font-size:1.25rem; color:#fff; margin-bottom:.3rem;
}
.tile.glass p{ color:#d6d6d6; }

/* =========================================================
   Responsive tweaks
   ========================================================= */
@media (max-width: 1200px){
  .hero-content--dash{ top:53%; }
}
@media (max-width: 992px){
  body{ padding-top: 64px; }          /* slightly tighter header spacing on tablets */
  .hero-content--dash{ top:54%; }
  .trust li{ font-size:.88rem; }
}
@media (max-width: 576px){
  .hero-content--dash{ top:56%; }
  .tile.glass{ padding:22px; }
}

/* =========================================================
   Accessibility preferences
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .rings .r2, .rings .r3, .orb{ animation: none !important; }
  *{ transition-duration:.01ms !important; }
}
@media (prefers-contrast: more){
  .widget-mock, .tile.glass{ border-color: rgba(255,255,255,.22); }
  .trust li{ border-color: rgba(255,255,255,.28); }
}

/* =========================================================
   Light mode support (toggle .light-mode on <body>)
   ========================================================= */
body.light-mode .dash-hero.hero--orbital{ color:#0f0f0f; background:#f6f6f6; }
body.light-mode .dash-hero.hero--orbital::after{
  background:
    radial-gradient(1200px 560px at 50% 25%, rgba(0,0,0,.06), transparent 60%),
    radial-gradient(2200px 1200px at 50% 95%, rgba(0,0,0,.12), transparent 72%);
}
body.light-mode .widget-mock,
body.light-mode .tile.glass{
  background: rgba(0,0,0,.035);
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
body.light-mode .widget-mock header{ color:#0f0f0f; border-color: rgba(0,0,0,.08); }
body.light-mode .widget-mock .widget-body{ color:#0f0f0f; }
body.light-mode .tile.glass h3{ color:#111; }
body.light-mode .tile.glass p { color:#333; }