/*
Theme Name:  Kabongelo Portfolio
Theme URI:   https://www.philippekabongelo.com
Author:      Philippe Kabongelo
Author URI:  https://www.philippekabongelo.com
Description: Thème portfolio ultra-premium — Chargé de Communication · Obsidian / Cyan / Gold · Syne · Bento Grid · Curseur magnétique · Grain CSS · Canvas Particles
Version:     5.0.0
Requires at least: 6.5
Tested up to: 6.7
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: kabongelo-portfolio
Tags:        portfolio, one-page, dark, animation, bento-grid, custom-cursor
*/

/* ============================================================
   CSS CUSTOM PROPERTIES & BASE RESET
   ============================================================ */
@layer base, layout, components, animations, utilities;

@layer base {
  @property --grad-angle { syntax: '<angle>'; inherits: false; initial-value: 135deg; }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --obsidian: #07070E;
    --surface: #11111F;
    --cyan: #00F5C3;
    --gold: #FFB84D;
    --white: #F0F0FA;
    --muted: rgba(240,240,250,0.42);
    --glass: rgba(17,17,31,0.72);
    --glass-border: rgba(240,240,250,0.08);
    --font-display: 'Syne', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --font-mono: 'Space Mono', monospace;
    --ease-expo: cubic-bezier(0.19,1,0.22,1);
    --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
    --section-pad: clamp(80px, 10vw, 140px);
  }

  html { scroll-behavior: auto; background: var(--obsidian); overflow-x: hidden; }

  body {
    font-family: var(--font-body);
    color: var(--white);
    background: var(--obsidian);
    overflow-x: hidden;
    cursor: none;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    #custom-cursor, #cursor-ring { display: none; }
    body { cursor: auto; }
  }

  /* ===== HERO PORTRAIT ===== */
  .hero-right { display: flex; justify-content: flex-end; align-items: center; }

  .pk-portrait-scene {
    position: relative;
    width: clamp(300px, 34vw, 460px);
    height: clamp(350px, 40vw, 540px);
    flex-shrink: 0;
  }

  .pk-frame-svg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
    transition: filter .6s;
  }
  .pk-portrait-scene:hover .pk-frame-svg {
    filter: drop-shadow(0 0 12px rgba(0,245,195,0.2));
  }

  .pk-photo-container {
    position: absolute;
    top: 6%; left: 6%; right: 6%; bottom: 10%;
    z-index: 1;
    overflow: hidden;
  }

  .pk-photo {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    filter: grayscale(1) contrast(1.1) brightness(0.95);
    mix-blend-mode: lighten;
    transition:
      filter .8s cubic-bezier(0.19,1,0.22,1),
      transform .8s cubic-bezier(0.19,1,0.22,1);
    will-change: filter, transform;
    transform-origin: bottom center;
  }
  .pk-portrait-scene:hover .pk-photo {
    filter: grayscale(0) contrast(1.08) brightness(1.05) saturate(1.15);
    transform: scale(1.025) translateY(-6px);
  }

  .pk-photo-bw-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
      160deg,
      rgba(0,245,195,0.08) 0%,
      rgba(17,17,31,0.06) 50%,
      rgba(255,184,77,0.05) 100%
    );
    mix-blend-mode: color;
    pointer-events: none;
    transition: opacity .8s;
  }
  .pk-portrait-scene:hover .pk-photo-bw-overlay { opacity: 0; }

  .pk-photo-glow {
    position: absolute;
    bottom: -20px; left: 10%; right: 10%; height: 80px;
    background: radial-gradient(ellipse, rgba(0,245,195,0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity .8s;
    pointer-events: none;
    filter: blur(12px);
  }
  .pk-portrait-scene:hover .pk-photo-glow { opacity: 1; }

  .pk-badge {
    position: absolute;
    bottom: 12%; right: -6%;
    display: flex; align-items: center; gap: 7px;
    background: rgba(7,7,14,0.92);
    border: 1px solid rgba(0,245,195,0.25);
    padding: 8px 14px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--white);
    z-index: 3;
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    transition: border-color .4s, transform .4s var(--ease-spring);
  }
  .pk-portrait-scene:hover .pk-badge {
    border-color: rgba(0,245,195,0.6);
    transform: translateX(4px);
  }
  .pk-badge-dot {
    width: 7px; height: 7px;
    background: #00F5C3;
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulseDot 2s ease-in-out infinite;
  }
  .pk-badge-text { color: var(--muted); }

  @media (max-width: 900px) { .hero-right { display: none; } }

  ::selection { background: var(--cyan); color: var(--obsidian); }
  ::-webkit-scrollbar { width: 3px; }
  ::-webkit-scrollbar-track { background: var(--obsidian); }
  ::-webkit-scrollbar-thumb { background: var(--cyan); border-radius: 2px; }
}

@layer layout {
  .container { width: min(1320px, 92vw); margin: 0 auto; }
  section { padding: var(--section-pad) 0; position: relative; }
  .section-label {
    font-family: var(--font-mono);
    font-size: clamp(10px,1.1vw,12px);
    color: var(--cyan);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 20px;
  }
  .section-label::after { content: ''; display: block; width: 40px; height: 1px; background: var(--cyan); opacity: 0.5; }
  .section-title {
    font-family: var(--font-display);
    font-size: clamp(36px,5.5vw,72px);
    font-weight: 800; line-height: 1.0;
    letter-spacing: -0.02em;
    margin-bottom: clamp(40px,6vw,80px);
  }
}