/* ═══════════════════════════════════════════════════════════════
   RS Portfolio · Premium v4.0 — Full Override CSS
   Beats kumexweb · Editorial luxury · 3D integrated · Bug-fixed
   ═══════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ── */
:root {
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans : 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono : 'Space Mono', 'Courier New', monospace;
  --ease-out  : cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast : .18s;
  --t-mid  : .32s;
  --t-slow : .55s;
}

/* ══════════════════════════════════════════════
   1. GLOBAL TYPOGRAPHY
   ══════════════════════════════════════════════ */
body { font-family: var(--font-sans); }
h1, h2, h3, h4 { font-family: var(--font-serif); }

/* ══════════════════════════════════════════════
   2. SECTION SPACING — generous editorial gaps
   ══════════════════════════════════════════════ */
.section { padding: 120px 0 !important; }
@media (max-width: 1023px) { .section { padding: 90px 0 !important; } }
@media (max-width: 767px)  { .section { padding: 64px 0 !important; } }

/* ══════════════════════════════════════════════
   3. LUXURY SECTION DIVIDERS
   ══════════════════════════════════════════════ */
.divider {
  height: 1px !important;
  background: linear-gradient(90deg,
    transparent 5%,
    var(--bdr) 25%,
    rgba(212,151,42,.5) 50%,
    var(--bdr) 75%,
    transparent 95%) !important;
  position: relative;
  margin: 0 !important;
}
.divider::after {
  content: '◆';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  font-size: 6px;
  color: var(--gold);
  background: var(--bg);
  padding: 0 12px;
  line-height: 1;
}

/* ══════════════════════════════════════════════
   4. HERO — clean up clutter
   ══════════════════════════════════════════════ */
#hero { padding-top: 120px !important; padding-bottom: 100px !important; }

/* Remove weather/visitor widgets */
.weather-widget, .live-stats-bar, .visitor-counter,
[class*="weather"], [class*="visitor-count"],
[id*="visitor"], [id*="weather"],
.hero-live, .hero-weather { display: none !important; }

/* ══════════════════════════════════════════════
   6. SKILLS GRID — inside split layout (2 cols)
   ══════════════════════════════════════════════ */

/* Remove neon per-card colors — unified gold */
.skill-card {
  --sk-rgb: 212, 151, 42 !important;
  --sk-glow: rgba(212,151,42,.5) !important;
  --sk-shd: rgba(212,151,42,.10) !important;
}
.skill-card:hover {
  transform: translateY(-6px) !important;
}

/* ══════════════════════════════════════════════
   8. SCROLL REVEAL
   The real .rev/.vis fade-up-blur system lives in index.html's
   inline <style> (matches the IntersectionObserver JS exactly).
   This file only needs to handle the accessibility/settings kill
   switches — it must NOT redefine .rev itself, or it fights the
   inline system and cancels the reveal animation on every load.
   ══════════════════════════════════════════════ */
html[data-anim="none"]          .rev,
html[data-scroll-anim="false"]  .rev { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ══════════════════════════════════════════════
   10. CARD HOVER POLISH
   ══════════════════════════════════════════════ */
.demo-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.7),
              0 0 0 1px var(--gold-line),
              0 0 60px var(--cglow) !important;
}
.blog-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.6),
              0 0 40px var(--cglow) !important;
}

/* ══════════════════════════════════════════════
   11. NAV REFINEMENT
   ══════════════════════════════════════════════ */
.site-header.scrolled {
  backdrop-filter: blur(32px) !important;
  -webkit-backdrop-filter: blur(32px) !important;
  box-shadow: 0 2px 40px rgba(0,0,0,.5) !important;
}
.settings-trigger { display: flex !important; }

/* ══════════════════════════════════════════════
   12. PERFORMANCE — off/normal/ultra modes
   ══════════════════════════════════════════════ */

/* ANIM OFF */
html[data-anim="none"] *,
html[data-anim="none"] *::before,
html[data-anim="none"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}
html[data-anim="none"] .aurora { display: none !important; }

/* ANIM HIGH */
html[data-anim="high"] .demo-card:hover  { transform: translateY(-12px) scale(1.02) !important; }
html[data-anim="high"] .skill-card:hover { transform: translateY(-10px) scale(1.03) !important; }

/* CURSOR OFF */
html[data-cursor="false"] #cx-dot,
html[data-cursor="false"] #cx-ring { display: none !important; }
html[data-cursor="false"] * { cursor: auto !important; }

/* SCROLL ANIM OFF */
html[data-scroll-anim="false"] .rev { opacity: 1 !important; transform: none !important; }

/* PARALLAX OFF */
html[data-parallax="false"] [data-parallax] { transform: none !important; }

/* ══════════════════════════════════════════════
   15. LIGHT / GRAY THEME ADJUSTMENTS
   ══════════════════════════════════════════════ */
[data-theme="white"] .divider::after { background: var(--bg); }

/* ══════════════════════════════════════════════
   16. PRINT STYLES
   ══════════════════════════════════════════════ */
@media print {
  .section { padding: 40px 0 !important; }
}