/*
Theme Name: evlong-future-paint
Text Domain: evlong-future-paint
Version: 0.2.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Author: Abdul & Team
Description: Futuristic cyberpunk/neomorphism theme for auto paint shop with AI/n8n hooks.
License: GNU GPL v2 or later
*/

:root{
  --bg:#0D0D15;
  --fg:#E0E0E0;
  --muted:#A2A6B3;
  --blue:#00E6FF;
  --silver:#E0E0E0;
  --magenta:#FF0066;
  --card: rgba(255,255,255,0.04);
  --glass: rgba(255,255,255,0.08);
  --br: 14px;
}

html, body{background:var(--bg); color:var(--fg); font-family:'Exo 2', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}
h1,h2,h3,h4{font-family:'Orbitron', sans-serif; letter-spacing:.02em}
img{max-width:100%; height:auto; display:block}

a{color:var(--blue); text-decoration:none; transition:opacity .2s ease}
a:hover{opacity:.85}

.btn, .wp-block-button__link{
  display:inline-block; padding:.9rem 1.2rem; border-radius:12px;
  background: linear-gradient(135deg, rgba(0,230,255,.15), rgba(255,0,102,.15));
  color:var(--fg); border:1px solid var(--glass);
  backdrop-filter: blur(8px);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  will-change: transform, box-shadow, opacity;
}
.btn:hover, .wp-block-button__link:hover{
  transform: scale(1.05);
  box-shadow: 0 0 15px var(--blue);
}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:rgba(13,13,21,.7); backdrop-filter: blur(8px); border-bottom:1px solid var(--glass)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:12px 20px}
.site-title a{font-family:'Orbitron', sans-serif; color:var(--silver); font-weight:700; letter-spacing:.04em}
.site-nav ul{list-style:none; display:flex; gap:18px; margin:0; padding:0}
.site-nav a{color:var(--silver)}

/* Footer */
.site-footer{border-top:1px solid var(--glass); padding:24px; text-align:center; color:var(--muted)}

/* Grid gallery */
.evlong-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.evlong-card{
  position:relative; overflow:hidden; border-radius:var(--br);
  background:var(--card); border:1px solid var(--glass); backdrop-filter: blur(10px);
  transition: transform .2s ease, box-shadow .2s ease; will-change: transform, box-shadow;
}
.evlong-card:hover{ transform: translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.35) }
.evlong-card .evlong-img{display:block; width:100%; height:auto}
.evlong-card .evlong-img.before{position:absolute; inset:0; opacity:0; transition:opacity .35s ease}
.evlong-card:hover .evlong-img.before{opacity:1}
.evlong-card .evlong-title{
  position:absolute; left:12px; bottom:10px; font:600 13px/1 'Orbitron', sans-serif;
  color:var(--silver); text-shadow:0 0 12px rgba(0,230,255,.45);
}

/* Hero video */
.hero{position:relative; min-height:70vh; display:grid; place-items:center; overflow:hidden}
.hero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.1) contrast(1.05)}
.hero .overlay{position:absolute; inset:0; background:rgba(13,13,21,.7)}
.hero .content{position:relative; text-align:center; padding:40px; z-index:2}
.hero .content h1{font-size:clamp(28px,5vw,64px); margin:0 0 10px 0}
.hero .content p{color:var(--muted); max-width:720px; margin:0 auto 14px}

/* Before/After component */
.ba-wrap{position:relative; max-width:980px; margin:20px auto; border-radius:12px; overflow:hidden; border:1px solid var(--glass); background:var(--card)}
.ba-inner{position:relative}
.ba-inner img{display:block; width:100%; height:auto}
.ba-after{position:absolute; inset:0; overflow:hidden}
.ba-after img{width:100%; height:100%; object-fit:cover}
.ba-handle{position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--blue); box-shadow:0 0 8px var(--blue)}
.ba-range{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); width:min(90%,640px)}
.ba-range input[type="range"]{width:100%}

/* Pagination */
.pagination{display:flex; gap:10px; justify-content:center; padding:20px}
.pagination a, .pagination span{padding:8px 12px; border:1px solid var(--glass); border-radius:10px; background:var(--card)}