/*
Theme Name:   YOUSSIF Portfolio
Theme URI:    https://www.5alal.com
Author:       YOUSSIF
Author URI:   https://www.5alal.com
Description:  Arabic-First Luxury Portfolio — Royal Deep Purple · Matte Gold · Aurora · Glitch · Glass Cards · Scramble Text · Custom Cursor · 3D Tilt
Version:      2.0.0
Requires at least: 6.3
Tested up to: 6.6
Requires PHP: 8.1
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  youssif
Tags:         portfolio, dark, one-page, rtl-ready, arabic, luxury, animation, custom-cursor, full-width-template
*/

/* ═══════════════════════════════════════════════════════════════
   YOUSSIF — Brand Identity System v2
   Royal Deep Purple · Matte Gold · Arabic-First Luxury · 2025
═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts loaded via functions.php ── */

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
img  { display:block; object-fit:cover; }
a    { color:inherit; text-decoration:none; }
button { cursor:none; }

/* ── Hide default cursor ── */
*, *::before, *::after { cursor: none !important; }

/* ═══ DESIGN TOKENS ═══════════════════════════════════════════ */
:root {
  /* Brand */
  --brand-primary:      #271460;
  --brand-primary-l:    #3D1F8A;
  --brand-primary-d:    #160B40;
  --brand-accent:       #B8860B;
  --brand-accent-l:     #D4A827;
  --brand-accent-d:     #8A6208;
  --brand-accent-muted: rgba(184,134,11,0.10);

  /* Semantic */
  --color-success: #1A7A4A;
  --color-warning: #D4A827;
  --color-error:   #C1383B;
  --color-info:    #6B3FE4;

  /* Surfaces */
  --surface-bg:      #0A0907;
  --surface-base:    #110D1A;
  --surface-raised:  #1A1328;
  --surface-border:  #271460;
  --surface-divider: #1E1535;
  --surface-overlay: rgba(10,9,7,0.92);

  /* Nav */
  --nav-bg-scrolled: rgba(10,9,7,0.97);
  --nav-bg-top:      rgba(10,9,7,0.12);

  /* Text */
  --text-primary:   #FAF9F7;
  --text-secondary: #C9C0A8;
  --text-tertiary:  #7A7060;
  --text-disabled:  #3D3828;
  --text-inverse:   #0A0907;
  --text-gold:      #B8860B;

  /* Typography */
  --font-display:   'Playfair Display', Georgia, serif;
  --font-arabic:    'Noto Kufi Arabic', 'Cairo', sans-serif;
  --font-mono:      'DM Mono', monospace;
  --font-unbounded: 'Unbounded', sans-serif;
  --font-ui:        'Rajdhani', sans-serif;

  /* Spacing (8px baseline) */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px;
  --s6:40px; --s7:48px; --s8:64px; --s9:80px; --s10:96px;

  /* Border Radius */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:9999px;

  /* Motion */
  --dur-fast:  160ms;
  --dur-base:  280ms;
  --dur-slow:  480ms;
  --dur-reveal:720ms;
  --ease-luxury: cubic-bezier(0.22,1,0.36,1);
  --ease-smooth: cubic-bezier(0.4,0,0.2,1);

  /* Effects */
  --c-accent1: #b3ffc8;
  --c-accent2: #ff6ef7;
  --c-accent3: #5eadff;
}

/* ═══ BASE ═══════════════════════════════════════════════════ */
body {
  background: var(--surface-bg);
  color: var(--text-primary);
  font-family: var(--font-ui);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background: var(--surface-bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--brand-primary), var(--brand-accent));
  border-radius: var(--r-full);
}

/* ═══ KEYFRAMES ══════════════════════════════════════════════ */
@keyframes fadeDown   { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeUp     { from{opacity:0;transform:translateY(32px)}  to{opacity:1;transform:translateY(0)} }
@keyframes floatY     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes shimmerGold {
  0%   { background-position: -300% center; }
  100% { background-position:  300% center; }
}
@keyframes shimmerPurple {
  0%   { background-position: -300% center; }
  100% { background-position:  300% center; }
}
@keyframes aurora-drift {
  0%   { transform:translate(0,0) scale(1); }
  33%  { transform:translate(6vw,-4vh) scale(1.08); }
  66%  { transform:translate(-4vw,5vh) scale(0.95); }
  100% { transform:translate(3vw,2vh) scale(1.05); }
}
@keyframes particleRise {
  0%   { transform:translateY(0);      opacity:0; }
  8%   { opacity:0.8; }
  92%  { opacity:0.5; }
  100% { transform:translateY(-100vh) translateX(12px); opacity:0; }
}
@keyframes marquee-scroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
@keyframes scanDown {
  0%   { transform:translateY(-100%); opacity:.4; }
  100% { transform:translateY(700%);  opacity:0;  }
}
@keyframes slTxtUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes glitch-main {
  0%,94%,100% { transform:none; }
  95% { transform:skewX(-0.5deg); }
  96% { transform:skewX(0.8deg) translateX(-3px); }
  97% { transform:none; }
  98% { transform:translateX(3px); }
  99% { transform:skewX(-0.3deg); }
}
@keyframes glitch-before {
  0%,94%,100% { transform:none; opacity:0; }
  95% { transform:translateX(-6px); opacity:0.7; }
  96% { transform:translateX(4px) scaleY(1.02); opacity:0.7; }
  97% { transform:none; opacity:0; }
  98%,99% { transform:translateX(-3px); opacity:0.5; }
}
@keyframes glitch-after {
  0%,95%,100% { transform:none; opacity:0; }
  96% { transform:translateX(6px); opacity:0.7; }
  97% { transform:translateX(-4px); opacity:0.7; }
  98% { transform:none; opacity:0; }
  99% { transform:translateX(2px); opacity:0.4; }
}
@keyframes border-spin { to { --fx-angle:360deg; } }
@property --fx-angle { syntax:"<angle>"; initial-value:0deg; inherits:false; }
@keyframes reveal-up {
  from { transform:translateY(120%); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}
@keyframes scramble-in {
  from { opacity:0; letter-spacing:8px; }
  to   { opacity:1; letter-spacing:inherit; }
}

/* ═══ CURSOR ══════════════════════════════════════════════════ */
#cursor-dot {
  width:8px; height:8px;
  background: var(--brand-accent);
  border-radius:50%;
  position:fixed; top:0; left:0;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition: width .18s, height .18s, background .2s;
  mix-blend-mode:exclusion;
  box-shadow: 0 0 10px rgba(184,134,11,0.8);
}
#cursor-ring {
  width:36px; height:36px;
  border:1.5px solid rgba(184,134,11,0.45);
  border-radius:50%;
  position:fixed; top:0; left:0;
  pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  transition: transform .12s cubic-bezier(0.23,1,0.32,1), width .28s, height .28s, border-color .25s;
}
body:has(a:hover) #cursor-dot,
body:has(.card-fx:hover) #cursor-dot { width:16px; height:16px; background:var(--c-accent2); }
body:has(a:hover) #cursor-ring,
body:has(.card-fx:hover) #cursor-ring { width:60px; height:60px; border-color:var(--c-accent2); }

/* ═══ AURORA ══════════════════════════════════════════════════ */
.aurora {
  position:fixed; inset:0; z-index:0;
  overflow:hidden; pointer-events:none;
}
.aurora-blob {
  position:absolute; border-radius:50%;
  filter:blur(90px); opacity:.10;
  animation: aurora-drift 16s ease-in-out infinite alternate;
}
.aurora-blob:nth-child(1) {
  width:70vw; height:60vh;
  background:radial-gradient(circle,#271460 0%,transparent 70%);
  top:-20%; left:-10%; animation-duration:14s;
}
.aurora-blob:nth-child(2) {
  width:50vw; height:70vh;
  background:radial-gradient(circle,#B8860B 0%,transparent 70%);
  top:20%; right:-15%; animation-duration:18s; animation-delay:-6s; opacity:.07;
}
.aurora-blob:nth-child(3) {
  width:55vw; height:55vh;
  background:radial-gradient(circle,#3D1F8A 0%,transparent 70%);
  bottom:-10%; left:30%; animation-duration:20s; animation-delay:-3s;
}

/* ═══ NOISE ═══════════════════════════════════════════════════ */
.noise-overlay {
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}

/* ═══ PARTICLE ════════════════════════════════════════════════ */
.particle {
  position:fixed; bottom:0; border-radius:50%;
  pointer-events:none; z-index:2;
  animation: particleRise linear infinite;
}

/* ═══ NAVBAR ══════════════════════════════════════════════════ */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background: var(--nav-bg-top);
  backdrop-filter:blur(28px);
  transition: all var(--dur-slow) var(--ease-luxury);
  animation: fadeDown .7s var(--ease-luxury) both;
}
.site-header.scrolled {
  background: var(--nav-bg-scrolled);
  border-bottom: 1px solid rgba(184,134,11,0.18);
}
.site-header.scrolled::after {
  content:'';
  position:absolute; bottom:0; left:15%; right:15%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(184,134,11,0.3),transparent);
}
.header-inner {
  max-width:1100px; margin:0 auto;
  padding:14px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}

/* Logo */
.site-logo {
  display:flex; align-items:center; gap:10px;
  background:none; border:none; cursor:none;
  text-decoration:none;
}
.logo-y-icon { display:block; flex-shrink:0; }
.logo-wordmark {
  font-family: var(--font-display);
  font-size:19px; font-weight:900; letter-spacing:5px;
  color: var(--text-primary); line-height:1;
}
.logo-wordmark .logo-o {
  color: var(--brand-accent); font-style:italic;
}

/* Nav pill */
.primary-nav {
  display:flex; align-items:center; gap:4px;
  background: rgba(10,9,7,0.55);
  border: 1px solid rgba(184,134,11,0.12);
  border-radius: var(--r-full);
  padding:6px 8px;
  backdrop-filter:blur(12px);
}
.primary-nav a, .primary-nav button {
  padding:8px 18px; border-radius:var(--r-full);
  border:none; background:transparent;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size:.72rem; letter-spacing:2px; text-transform:uppercase;
  transition: all var(--dur-base) var(--ease-luxury);
  white-space:nowrap; text-decoration:none; cursor:none;
}
.primary-nav a:hover, .primary-nav button:hover,
.primary-nav .current-menu-item > a {
  color: var(--brand-accent-l);
  background: rgba(184,134,11,0.06);
}
.primary-nav .current-menu-item > a {
  background: linear-gradient(135deg,rgba(39,20,96,0.8),rgba(61,31,138,0.6));
  box-shadow: 0 0 16px rgba(39,20,96,0.4);
}

/* Sign In btn */
.btn-signin {
  padding:9px 20px;
  background:transparent;
  border:1px solid rgba(184,134,11,0.25);
  border-radius:var(--r-full); cursor:none;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:2px;
  color:var(--text-tertiary); text-transform:uppercase;
  transition:all var(--dur-base) var(--ease-luxury);
}
.btn-signin:hover {
  border-color:var(--brand-accent);
  color:var(--brand-accent-l);
  background:rgba(184,134,11,0.06);
}

/* Hamburger */
.menu-toggle {
  display:none; flex-direction:column; gap:5px; padding:4px;
  background:none; border:none; cursor:none;
}
.menu-toggle span {
  display:block; width:22px; height:1.5px;
  background:var(--brand-accent); border-radius:1px;
  transition: all var(--dur-slow) var(--ease-luxury);
}

/* ═══ MOBILE MENU ═════════════════════════════════════════════ */
.mobile-menu {
  display:none; position:fixed; inset:0; z-index:998;
  background:var(--surface-overlay); backdrop-filter:blur(24px);
  flex-direction:column; align-items:center; justify-content:center; gap:28px;
  animation: fadeUp .3s var(--ease-luxury);
}
.mobile-menu.is-open { display:flex; }
.mobile-menu .logo-wordmark { font-size:28px; letter-spacing:8px; margin-bottom:8px; }
.mobile-menu nav a {
  font-family:var(--font-mono); font-size:13px; letter-spacing:4px;
  color:var(--text-tertiary); text-transform:uppercase;
  transition:color var(--dur-base) var(--ease-luxury);
  text-decoration:none; display:block;
}
.mobile-menu nav a:hover { color:var(--brand-accent-l); }

/* ═══ BUTTONS ═════════════════════════════════════════════════ */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 30px;
  background:linear-gradient(135deg,var(--brand-primary) 0%,var(--brand-primary-l) 100%);
  border:1px solid transparent; border-radius:var(--r-full);
  color:var(--brand-accent-l);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:2px; font-weight:600;
  text-transform:uppercase; text-decoration:none; cursor:none;
  position:relative; overflow:hidden;
  transition: transform var(--dur-base) var(--ease-luxury), box-shadow var(--dur-base) var(--ease-luxury);
}
.btn-primary::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(184,134,11,0.14),transparent);
  transform:translateX(-100%); transition:transform var(--dur-slow) var(--ease-luxury);
}
.btn-primary:hover::before { transform:translateX(100%); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 0 28px rgba(39,20,96,0.6); }

.btn-gold {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 30px;
  background:linear-gradient(135deg,var(--brand-accent-d),var(--brand-accent),var(--brand-accent-l));
  border:none; border-radius:var(--r-full);
  color:var(--text-inverse);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:2px; font-weight:700;
  text-transform:uppercase; text-decoration:none; cursor:none;
  transition:all var(--dur-base) var(--ease-luxury);
}
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 0 32px rgba(184,134,11,0.45); }

.btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 30px;
  background:transparent; border:1px solid var(--surface-divider);
  border-radius:var(--r-full); color:var(--text-secondary);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:2px;
  text-transform:uppercase; text-decoration:none; cursor:none;
  transition:all var(--dur-base) var(--ease-luxury);
}
.btn-outline:hover { border-color:var(--brand-accent); color:var(--brand-accent-l); background:rgba(184,134,11,0.06); }

/* ═══ HERO SLIDER ═════════════════════════════════════════════ */
.hero-slider {
  position:relative; width:100%; height:100vh; min-height:640px;
  overflow:hidden; background:var(--surface-bg);
  display:flex; flex-direction:column; user-select:none;
}
/* Slide BG gradients */
.hero-slider .slide-bg {
  position:absolute; inset:0; z-index:0;
  opacity:0; transition:opacity 1.2s var(--ease-smooth);
}
.hero-slider .slide-bg.active { opacity:1; }

/* Grid pattern overlay */
.hero-slider .grid-pattern {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(146,112,245,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(146,112,245,0.04) 1px,transparent 1px);
  background-size:80px 80px;
}

/* Center text panel */
.hero-text-panel {
  position:absolute; inset:0; z-index:5;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; text-align:center;
  padding:120px clamp(24px,8vw,120px) 100px;
}

/* Glitch title */
.glitch-wrap { position:relative; display:inline-block; }
.glitch {
  font-family: var(--font-display);
  font-weight:900; line-height:.92; letter-spacing:14px;
  background:linear-gradient(120deg,#5a3a00 0%,var(--brand-accent) 25%,var(--brand-accent-l) 50%,var(--brand-accent) 75%,#5a3a00 100%);
  background-size:300% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation: glitch-main 5s infinite, shimmerGold 5s linear infinite;
  position:relative;
}
.glitch::before, .glitch::after {
  content:attr(data-text); position:absolute; top:0; left:0;
  font-family:inherit; font-size:inherit; font-weight:inherit;
  line-height:inherit; letter-spacing:inherit; pointer-events:none;
}
.glitch::before {
  -webkit-text-fill-color:var(--c-accent2);
  clip-path:polygon(0 30%,100% 30%,100% 50%,0 50%);
  animation:glitch-before 5s infinite; opacity:0;
}
.glitch::after {
  -webkit-text-fill-color:var(--c-accent3);
  clip-path:polygon(0 60%,100% 60%,100% 80%,0 80%);
  animation:glitch-after 5s infinite; opacity:0;
}

/* Slide divider line */
.slide-divider {
  width:80px; height:1px; margin:28px auto;
  background:linear-gradient(90deg,transparent,var(--brand-accent),transparent);
}

/* Slide content — changes per slide */
.slide-content { animation:slTxtUp .65s .08s var(--ease-luxury) both; }
.slide-category-chip {
  display:inline-flex; align-items:center; gap:10px; margin-bottom:14px;
}
.slide-category-pill {
  padding:4px 14px; border-radius:var(--r-full);
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:4px;
  text-transform:uppercase;
}
.slide-role {
  font-family:var(--font-mono); font-size:clamp(14px,2vw,20px);
  letter-spacing:8px; color:#FAF9F7; opacity:.85;
  text-transform:uppercase; margin-bottom:10px;
}
.slide-sub {
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:4px;
  text-transform:uppercase; opacity:.8; margin-bottom:10px;
}
.slide-desc {
  color:var(--text-tertiary); font-size:.875rem; line-height:1.85;
  font-family:var(--font-ui); max-width:480px; margin:0 auto 32px;
}

/* Dots navigation */
.slider-dots-wrap {
  position:absolute; bottom:36px; left:0; right:0; z-index:10;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  pointer-events:none;
}
.slider-dots { display:flex; align-items:center; gap:10px; pointer-events:auto; }
.slider-dot-btn {
  background:none; border:none; cursor:none; padding:6px;
  display:flex; align-items:center;
}
.slider-dot {
  height:8px; border-radius:100px; overflow:hidden;
  background:rgba(184,134,11,0.18);
  border:1px solid rgba(184,134,11,0.2);
  transition:width .45s cubic-bezier(0.22,1,0.36,1);
  position:relative;
}
.slider-dot.active { width:32px; border-color:rgba(184,134,11,0.45); background:rgba(184,134,11,0.25); }
.slider-dot:not(.active) { width:8px; }
.slider-dot-fill {
  position:absolute; top:0; left:0; bottom:0;
  background:linear-gradient(90deg,var(--brand-accent),var(--brand-accent-l));
  border-radius:100px; width:0; transition:width .04s linear;
}
.slider-counter {
  font-family:var(--font-mono); font-size:.55rem; letter-spacing:5px;
  color:rgba(184,134,11,0.35);
}

/* Arrow buttons */
.slider-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:8;
  width:44px; height:44px; border-radius:50%;
  background:rgba(10,9,7,0.45); border:1px solid rgba(184,134,11,0.15);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  cursor:none; color:rgba(184,134,11,0.45); font-size:18px;
  transition:all .28s var(--ease-luxury);
}
.slider-arrow:hover {
  border-color:rgba(184,134,11,0.55); color:var(--brand-accent-l);
  background:rgba(184,134,11,0.08);
}
.slider-arrow.prev { left:28px; }
.slider-arrow.next { right:28px; }

/* ═══ MARQUEE ═════════════════════════════════════════════════ */
.marquee-bar {
  width:100%; overflow:hidden;
  border-top:1px solid rgba(255,255,255,0.06);
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding:1.2rem 0;
}
.marquee-track {
  display:flex; width:max-content; gap:3rem;
  animation:marquee-scroll 22s linear infinite;
}
.marquee-bar:hover .marquee-track { animation-play-state:paused; }
.marquee-item-fx {
  font-family:var(--font-unbounded); font-size:1rem; font-weight:200;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  color:rgba(232,230,240,0.35); transition:color .3s;
}
.marquee-item-fx:hover { color:var(--brand-accent); }
.marquee-sep-fx { color:var(--c-accent2); }

/* ═══ SECTION LABELS ══════════════════════════════════════════ */
.section-label {
  display:block; font-family:var(--font-mono);
  font-size:.72rem; letter-spacing:5px; text-transform:uppercase;
  color:var(--brand-accent); margin-bottom:10px;
}
.section-title {
  font-family:var(--font-display);
  font-size:clamp(28px,4vw,48px); font-weight:900; line-height:1.1;
  margin-bottom:16px;
}
.txt-gold {
  background:linear-gradient(120deg,#5a3a00 0%,var(--brand-accent) 25%,var(--brand-accent-l) 50%,var(--brand-accent) 75%,#5a3a00 100%);
  background-size:300% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:shimmerGold 6s linear infinite;
}
.txt-purple {
  background:linear-gradient(120deg,var(--brand-primary-d) 0%,var(--brand-primary) 30%,var(--brand-primary-l) 55%,var(--brand-primary) 75%,var(--brand-primary-d) 100%);
  background-size:300% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:shimmerPurple 6s linear infinite;
}

/* ═══ GLASS CARD / CARD-FX ════════════════════════════════════ */
.card-fx {
  position:relative; border-radius:20px; padding:2rem;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(20px) saturate(1.4);
  overflow:hidden; cursor:none;
  transition:transform .4s var(--ease-luxury), box-shadow .4s;
  transform-style:preserve-3d;
}
.card-fx::before {
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,0.07) 50%,transparent 60%);
  background-size:200% 100%; background-position:-100% 0;
  transition:background-position .6s ease;
}
.card-fx:hover::before { background-position:200% 0; }
.card-fx::after {
  content:''; position:absolute; inset:-1px; border-radius:21px;
  background:conic-gradient(from var(--fx-angle,0deg),var(--brand-accent),var(--brand-primary-l),var(--c-accent3),var(--brand-accent));
  z-index:-1; opacity:0; transition:opacity .4s; animation:border-spin 4s linear infinite;
}
.card-fx:hover::after { opacity:1; }

/* ═══ WORK CARD ═══════════════════════════════════════════════ */
.work-card {
  position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--surface-border);
  background:var(--surface-raised);
  transition:all var(--dur-slow) var(--ease-luxury);
  cursor:none; display:flex; flex-direction:column; min-height:300px;
}
.work-card:hover { transform:translateY(-8px) scale(1.02); }
.work-card-img {
  flex:0 0 200px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#0e0b18,#1a1328);
  border-bottom:1px solid rgba(184,134,11,0.12);
}
.work-card-img img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; padding:24px 32px;
  transition:transform .55s var(--ease-luxury), filter .55s;
}
.work-card:hover .work-card-img img {
  transform:scale(1.08);
  filter:brightness(1.15);
}
.work-card-body { padding:18px 20px 20px; flex:1; display:flex; flex-direction:column; }
.work-card-cat {
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:4px;
  text-transform:uppercase; margin-bottom:8px; display:block;
}
.work-card-title {
  font-family:var(--font-display); font-size:1.15rem; font-weight:700;
  color:var(--text-primary); line-height:1.2; margin-bottom:14px; flex:1;
}
.work-card-tags { display:flex; gap:6px; flex-wrap:wrap; }
.work-card-tag {
  padding:3px 10px; border-radius:var(--r-full);
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:2px; text-transform:uppercase;
}

/* Scan line */
.scan-wrap { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:3; }
.scan-line {
  position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(184,134,11,0.35),transparent);
  animation:scanDown 4.5s var(--ease-smooth) infinite;
}
/* Corner accents */
.corner { position:absolute; width:14px; height:14px; z-index:4; }
.corner-tl { top:10px; left:10px; border-top:1.5px solid var(--brand-accent); border-left:1.5px solid var(--brand-accent); }
.corner-tr { top:10px; right:10px; border-top:1.5px solid var(--brand-accent); border-right:1.5px solid var(--brand-accent); }
.corner-bl { bottom:10px; left:10px; border-bottom:1.5px solid var(--brand-accent); border-left:1.5px solid var(--brand-accent); }
.corner-br { bottom:10px; right:10px; border-bottom:1.5px solid var(--brand-accent); border-right:1.5px solid var(--brand-accent); }

/* ═══ SERVICE CARD ════════════════════════════════════════════ */
.service-card {
  position:relative; overflow:hidden; border-radius:20px; padding:32px 28px;
  background:var(--surface-raised);
  border:1px solid var(--surface-border);
  transition:all .48s var(--ease-luxury); cursor:none;
}
.service-card-icon {
  width:56px; height:56px; border-radius:14px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center; font-size:22px;
  transition:all .4s var(--ease-luxury);
}
.service-card-title {
  font-family:var(--font-display); font-size:1.05rem; font-weight:700;
  color:var(--text-secondary); margin-bottom:10px; line-height:1.2;
  transition:color .3s;
}
.service-card:hover .service-card-title { color:var(--text-primary); }
.service-card-desc {
  font-family:var(--font-ui); font-size:.875rem; line-height:1.75;
  color:var(--text-disabled); margin-bottom:20px; transition:color .3s;
}
.service-card:hover .service-card-desc { color:var(--text-tertiary); }
.service-card-line {
  height:1px; margin-bottom:16px;
  transform:scaleX(0.3); transform-origin:left;
  transition:transform .5s var(--ease-luxury);
}
.service-card:hover .service-card-line { transform:scaleX(1); }
.service-card-tags { display:flex; gap:6px; flex-wrap:wrap; opacity:0; transform:translateY(8px); transition:all .4s .05s ease; }
.service-card:hover .service-card-tags { opacity:1; transform:translateY(0); }
.service-card-tag {
  padding:3px 10px; border-radius:var(--r-full);
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:2px; text-transform:uppercase;
}
.service-card-arrow {
  position:absolute; bottom:24px; right:24px;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:13px;
  transition:all .4s var(--ease-luxury);
  transform:scale(0.8); opacity:0;
}
.service-card:hover .service-card-arrow { transform:scale(1); opacity:1; }

/* ═══ STATS ═══════════════════════════════════════════════════ */
.stats-fx { display:flex; gap:4rem; flex-wrap:wrap; justify-content:center; }
.stat-item-fx { text-align:center; }
.stat-num-fx {
  font-family:var(--font-unbounded);
  font-size:clamp(2.2rem,5vw,4.5rem); font-weight:900; letter-spacing:-.06em;
  background:linear-gradient(135deg,var(--brand-accent),var(--brand-primary-l));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  display:block;
}
.stat-label-fx {
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(232,230,240,0.35); margin-top:.3rem; display:block;
  font-family:var(--font-mono);
}

/* ═══ CONTRIBUTION ════════════════════════════════════════════ */
.contrib-img-wrap { position:relative; }
.contrib-img-wrap img { width:100%; border-radius:12px; filter:brightness(.7); display:block; border:1px solid var(--surface-border); }
.contrib-badge {
  position:absolute; bottom:-14px; right:-14px;
  background:var(--surface-raised); border:1px solid rgba(39,20,96,0.4);
  border-radius:12px; padding:14px 20px; backdrop-filter:blur(16px);
  animation:floatY 4s ease-in-out infinite;
  box-shadow:0 0 30px rgba(39,20,96,0.2);
}
.contrib-badge-num { font-family:var(--font-mono); font-size:1.953rem; font-weight:500; }
.contrib-badge-label { font-family:var(--font-ui); font-size:.62rem; letter-spacing:3px; color:var(--text-disabled); margin-top:4px; }

/* ═══ ABOUT ═══════════════════════════════════════════════════ */
.about-info-card {
  background:var(--surface-raised); border:1px solid var(--surface-border);
  border-radius:var(--r-sm); padding:12px 14px;
  transition:border-color var(--dur-slow) var(--ease-luxury);
}
.about-info-card:hover { border-color:rgba(39,20,96,0.5); }
.about-info-key { font-family:var(--font-mono); font-size:7px; letter-spacing:3px; color:var(--text-disabled); margin-bottom:4px; }
.about-info-val { font-family:var(--font-ui); font-size:.875rem; color:var(--text-secondary); }

/* Skills */
.skill-wrap { margin-bottom:22px; }
.skill-head { display:flex; justify-content:space-between; margin-bottom:8px; }
.skill-label { font-family:var(--font-mono); font-size:.72rem; letter-spacing:3px; color:var(--text-secondary); text-transform:uppercase; }
.skill-pct   { font-family:var(--font-mono); font-size:.72rem; color:var(--text-tertiary); }
.skill-track { height:1.5px; background:var(--surface-divider); border-radius:var(--r-full); overflow:hidden; }
.skill-fill  {
  height:100%; border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--brand-primary),var(--brand-primary-l),var(--brand-accent));
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.5s var(--ease-luxury);
}
.skill-fill.in { transform:scaleX(1); }

/* ═══ CONTACT ═════════════════════════════════════════════════ */
.contact-card {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; padding:28px 20px; text-align:center;
  background:var(--surface-raised); border:1px solid var(--surface-border);
  border-radius:16px; text-decoration:none; cursor:none;
  transition:all var(--dur-slow) var(--ease-luxury);
}
.contact-card:hover { transform:translateY(-5px); border-color:var(--brand-accent); background:rgba(39,20,96,0.15); }
.contact-card-icon {
  width:48px; height:48px; border-radius:12px;
  background:rgba(184,134,11,0.08); border:1px solid rgba(184,134,11,0.2);
  display:flex; align-items:center; justify-content:center; color:var(--brand-accent);
}
.contact-card-key { font-family:var(--font-mono); font-size:.6rem; letter-spacing:4px; color:var(--text-disabled); text-transform:uppercase; margin-bottom:5px; }
.contact-card-val { font-family:var(--font-ui); font-size:.875rem; color:var(--text-secondary); word-break:break-all; }

/* Social icons */
.social-link {
  width:52px; height:52px; border-radius:14px;
  background:var(--surface-raised); border:1px solid var(--surface-border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-tertiary); text-decoration:none; cursor:none;
  transition:all var(--dur-slow) var(--ease-luxury);
}
.social-link:hover { transform:translateY(-4px) scale(1.08); }

/* ═══ SCROLL REVEAL ═══════════════════════════════════════════ */
.reveal {
  opacity:0; transform:translateY(32px);
  transition:opacity .8s var(--ease-luxury), transform .8s var(--ease-luxury);
}
.reveal.in-view { opacity:1; transform:none; }
.reveal:nth-child(2) { transition-delay:.1s; }
.reveal:nth-child(3) { transition-delay:.2s; }
.reveal:nth-child(4) { transition-delay:.3s; }
.reveal.from-left  { transform:translateX(-36px); }
.reveal.from-right { transform:translateX(36px); }
.reveal.from-left.in-view, .reveal.from-right.in-view { transform:none; }

/* ═══ QUOTE ═══════════════════════════════════════════════════ */
.quote-vline-top    { width:1px; height:52px; background:linear-gradient(180deg,transparent,var(--surface-divider)); margin:0 auto 32px; }
.quote-vline-bottom { width:1px; height:52px; background:linear-gradient(180deg,var(--surface-divider),transparent); margin:32px auto 0; }
.glow-pill {
  display:inline-block; padding:5px 16px; border-radius:var(--r-full);
  background:rgba(184,134,11,0.10); border:1px solid rgba(184,134,11,0.28);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:4px;
  color:var(--brand-accent); text-transform:uppercase;
}
.scramble-tagline {
  display:block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:5px;
  color:rgba(184,134,11,0.55); text-transform:uppercase; margin-bottom:24px;
  cursor:crosshair; min-height:1.2em;
}

/* ═══ FOOTER ══════════════════════════════════════════════════ */
.site-footer {
  background:var(--surface-bg); border-top:1px solid rgba(184,134,11,0.12);
  padding:64px 0 24px; text-align:center; position:relative; overflow:hidden;
}
.site-footer::before {
  content:''; position:absolute; top:0; left:20%; right:20%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(184,134,11,0.4),transparent);
}
.footer-pattern {
  position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:radial-gradient(rgba(184,134,11,0.08) 1px,transparent 1px);
  background-size:24px 24px;
}
.footer-logo {
  font-family:var(--font-display); font-size:clamp(32px,5vw,52px);
  font-weight:900; letter-spacing:14px; color:var(--brand-accent);
  display:block; margin-bottom:16px; cursor:none; background:none; border:none;
}
.footer-sep { width:60px; height:1px; margin:0 auto 16px; background:linear-gradient(90deg,transparent,rgba(184,134,11,0.35),transparent); }
.footer-copy { font-family:var(--font-mono); font-size:.72rem; letter-spacing:2px; color:var(--text-disabled); }
.footer-url  { color:var(--brand-accent); text-decoration:none; transition:color var(--dur-base); }
.footer-url:hover { color:var(--brand-accent-l); }

/* ═══ SPOTLIGHT SECTION ═══════════════════════════════════════ */
.spotlight-section { position:relative; overflow:hidden; }
#spotlight-canvas { position:absolute; inset:0; pointer-events:none; z-index:0; opacity:0; transition:opacity .4s; }
.spotlight-section:hover #spotlight-canvas { opacity:1; }

/* ═══ LAYOUT HELPERS ══════════════════════════════════════════ */
.page-wrap { position:relative; z-index:2; }
.container  { max-width:1280px; margin:0 auto; padding:0 40px; }
.container-sm { max-width:900px; margin:0 auto; padding:0 40px; }
.section-pad { padding:80px 0; }
.section-head { text-align:center; margin-bottom:48px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.grid-3 { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.grid-4 { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.divider { height:1px; background:linear-gradient(90deg,transparent,var(--surface-divider) 30%,var(--surface-divider) 70%,transparent); opacity:.35; }

/* ═══ WORDPRESS SPECIFIC ══════════════════════════════════════ */
.wp-caption { max-width:100%; }
.aligncenter { display:block; margin:0 auto; }
.alignright  { float:right; margin:0 0 16px 16px; }
.alignleft   { float:left;  margin:0 16px 16px 0; }
.screen-reader-text { clip:rect(1px,1px,1px,1px); position:absolute; height:1px; width:1px; overflow:hidden; }
.wp-block-image img { border-radius:var(--r-md); }

/* ═══ RESPONSIVE ══════════════════════════════════════════════ */
@media (max-width:900px) {
  .primary-nav { display:none; }
  .menu-toggle { display:flex; }
  .grid-2 { grid-template-columns:1fr; gap:40px; }
  .stats-fx { gap:2rem; }
  .btn-signin { display:none; }
}
@media (max-width:600px) {
  .container, .container-sm { padding:0 20px; }
  .header-inner { padding:12px 20px; }
  .grid-3, .grid-4 { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr !important; }
}