/*
Theme Name: Aurora Vault
Theme URI: https://example.com
Author: Tim Paul
Author URI: https://example.com
Description: Flashy, modern promo theme for showcasing paid WordPress themes and a filterable “Driver Vault” powered by Easy Digital Downloads (EDD).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aurora-vault
Tags: custom-background, custom-logo, one-column, two-columns, theme-options, e-commerce
*/

/* ---------- Base ---------- */
:root{
  --av-bg-0:#070913;
  --av-bg-1:#0b1230;
  --av-fg:#eef3ff;
  --av-muted: rgba(238,243,255,.72);
  --av-card: rgba(255,255,255,.06);
  --av-card2: rgba(255,255,255,.10);
  --av-border: rgba(255,255,255,.12);
  --av-accent:#8b5cf6;
  --av-accent2:#22d3ee;
  --av-accent3:#34d399;
  --av-shadow: 0 18px 60px rgba(0,0,0,.45);
  --av-radius: 22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--av-fg);
  background: radial-gradient(1200px 800px at 20% 20%, rgba(139,92,246,.25), transparent 60%),
              radial-gradient(1000px 700px at 80% 30%, rgba(34,211,238,.20), transparent 55%),
              radial-gradient(1100px 800px at 60% 90%, rgba(52,211,153,.18), transparent 50%),
              linear-gradient(180deg, var(--av-bg-0), var(--av-bg-1));
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
}

/* Aurora animated gradient overlay */
.av-aurora{
  position:fixed; inset:-20%;
  z-index:-2;
  background:
    radial-gradient(closest-side at 20% 30%, rgba(139,92,246,.55), transparent 60%),
    radial-gradient(closest-side at 70% 20%, rgba(34,211,238,.45), transparent 60%),
    radial-gradient(closest-side at 60% 80%, rgba(52,211,153,.40), transparent 60%),
    radial-gradient(closest-side at 30% 75%, rgba(251,191,36,.25), transparent 60%);
  filter: blur(32px) saturate(140%);
  animation: avAurora 18s ease-in-out infinite alternate;
  opacity:.8;
}
@keyframes avAurora{
  0%{ transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1.05); }
  50%{ transform: translate3d(2%, 3%, 0) rotate(6deg) scale(1.10); }
  100%{ transform: translate3d(4%, -2%, 0) rotate(-4deg) scale(1.12); }
}

/* Grain */
.av-grain{
  position:fixed; inset:0; z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.35;
  pointer-events:none;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.95}
img{max-width:100%; height:auto}
.container{width:min(1180px, 92vw); margin-inline:auto}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(16px);
  background: linear-gradient(180deg, rgba(10,12,24,.72), rgba(10,12,24,.35));
  border-bottom:1px solid rgba(255,255,255,.10);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{
  width:40px; height:40px; border-radius:14px;
  background: conic-gradient(from 180deg, var(--av-accent), var(--av-accent2), var(--av-accent3), var(--av-accent));
  box-shadow: 0 10px 30px rgba(139,92,246,.25);
}
.brand-title{font-weight:750; letter-spacing:.2px}
.nav{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.nav a{color:var(--av-muted); font-weight:600; font-size:14px}
.nav a:hover{color:var(--av-fg)}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:999px;
  border:1px solid var(--av-border);
  background: rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.20);
  font-weight:700; font-size:14px;
}
.btn.primary{
  border-color: rgba(139,92,246,.45);
  background: linear-gradient(135deg, rgba(139,92,246,.35), rgba(34,211,238,.22));
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding: 64px 0 28px;
}
.hero-grid{
  display:grid; gap:22px;
  grid-template-columns: 1.1fr .9fr;
  align-items:stretch;
}
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
}
.hero-card{
  position:relative;
  border-radius: var(--av-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--av-shadow);
  overflow:hidden;
}
.hero-left{padding:26px 26px 22px}
.kicker{
  display:inline-flex; gap:10px; align-items:center;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,12,24,.35);
  color:var(--av-muted);
  font-weight:650; font-size:13px;
}
.kicker-dot{width:8px; height:8px; border-radius:99px; background: var(--av-accent2); box-shadow: 0 0 18px rgba(34,211,238,.6)}
.hero h1{margin:14px 0 10px; font-size: clamp(32px, 4vw, 52px); line-height:1.02; letter-spacing:-.6px}
.hero p{margin:0 0 18px; color:var(--av-muted); font-size:16px; line-height:1.55; max-width:60ch}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.badge{
  padding:9px 12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color:var(--av-muted);
  font-size:13px; font-weight:650;
}

.hero-right{padding:18px}
.mini-title{font-size:14px; color:var(--av-muted); font-weight:700; margin:4px 0 10px}
.carousel{
  position:relative;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  overflow:hidden;
}
.carousel-track{display:flex; transition: transform .5s ease}
.carousel-slide{min-width:100%; padding:18px}
.slide-card{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,12,24,.35);
  padding:16px;
}
.slide-title{font-weight:800; margin:0 0 6px; letter-spacing:-.2px}
.slide-meta{margin:0; color:var(--av-muted); font-size:14px; line-height:1.45}
.carousel-controls{
  position:absolute; inset:auto 10px 10px 10px;
  display:flex; justify-content:space-between; align-items:center;
}
.iconbtn{
  width:40px; height:40px; border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:grid; place-items:center;
}
.dots{display:flex; gap:6px}
.dot{
  width:8px; height:8px; border-radius:999px;
  background: rgba(255,255,255,.18);
}
.dot.active{background: rgba(34,211,238,.75)}

/* Particles canvas sits behind text in hero-left */
#avParticles{
  position:absolute; inset:0;
  z-index:0;
  opacity:.55;
}
.hero-left > *{position:relative; z-index:1}

/* ---------- Sections ---------- */
.section{padding: 22px 0 50px}
.section h2{margin:0 0 14px; letter-spacing:-.3px; font-size:22px}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
@media (max-width: 980px){ .grid-3{grid-template-columns:1fr} }
.card{
  border-radius: var(--av-radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
  padding:16px;
}
.card h3{margin:0 0 6px}
.card p{margin:0; color:var(--av-muted); line-height:1.5}

/* ---------- Driver Vault ---------- */
.vault-filters{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:10px;
  margin-bottom: 14px;
}
@media (max-width: 980px){ .vault-filters{grid-template-columns:1fr 1fr} }
@media (max-width: 560px){ .vault-filters{grid-template-columns:1fr} }
.vault-filters label{display:block; font-size:12px; color:var(--av-muted); margin:0 0 6px; font-weight:700}
.select, .search{
  width:100%;
  padding:11px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,12,24,.35);
  color:var(--av-fg);
  outline:none;
}
.vault-results{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
@media (max-width: 980px){ .vault-results{grid-template-columns:1fr} }
.vault-item h3{margin:0 0 6px}
.vault-item .meta{color:var(--av-muted); font-size:13px; line-height:1.45}
.vault-item .price{margin-top:10px; font-weight:850}
.note{
  margin-top:12px;
  color: rgba(238,243,255,.68);
  font-size:13px;
}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid rgba(255,255,255,.10);
  background: rgba(10,12,24,.35);
  padding: 26px 0;
  color: var(--av-muted);
  font-size: 13px;
}