/* ==========================================================================
   kp-dark-design-system.css
   Shared CSS for all dark Concept C templates — kharypenebaker.com
   Loaded via wp_enqueue_style through kp-dark-theme-assets.php MU-plugin.
   Page-specific CSS stays inline in each template file.
   Last updated: 2026-04-10
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Backgrounds */
  --bg-base:     #0A0A0F;
  --bg-surface:  #14141A;
  --bg-elevated: #1E1E26;

  /* Brand colors */
  --gold:      #E8A43A;
  --gold-dark: #C8882A;
  --blue:      #3B82F6;
  --coral:     #FF6347;
  --green:     #22C55E;

  /* Text */
  --text-primary:   #F5F3EF;
  --text-secondary: #8B8B92;

  /* Borders */
  --border:       rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.15);

  /* Glows */
  --glow-gold: rgba(232, 164, 58, 0.4);
  --glow-blue: rgba(59, 130, 246, 0.3);

  /* Easing */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-expo:   cubic-bezier(0.19, 1, 0.22, 1);
  --ease-snappy: cubic-bezier(0.16, 1, 0.3, 1);

  /* Type scale */
  --type-hero:  clamp(2.8rem, 5.5vw, 6rem);
  --type-h2:    clamp(2rem, 4.5vw, 4.5rem);
  --type-body:  clamp(1rem, 1.5vw, 1.125rem);
  --type-label: clamp(0.6875rem, 0.9vw, 0.8125rem);

  /* Layout */
  --nav-h: 72px;
}


/* ==========================================================================
   2. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:       0.01ms;
    animation-iteration-count: 1;
    transition-duration:      0.01ms;
    scroll-behavior:          auto;
  }
}


/* ==========================================================================
   3. RESET
   ========================================================================== */

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

html {
  scroll-behavior: auto;
}


/* ==========================================================================
   4. BODY
   ========================================================================== */

body {
  font-family:      "Source Sans 3", "Source Sans Pro", sans-serif;
  background-color: var(--bg-base);
  color:            var(--text-primary);
  overflow-x:       hidden;
  cursor:           none;
}

@media (hover: none) {
  body {
    cursor: auto;
  }
}


/* ==========================================================================
   5. BASE ELEMENTS
   ========================================================================== */

a {
  text-decoration: none;
  color:           inherit;
}

ul {
  list-style: none;
}


/* ==========================================================================
   6. NOISE TEXTURE OVERLAY
   ========================================================================== */

body::before {
  content:         "";
  position:        fixed;
  inset:           0;
  z-index:         9998;
  pointer-events:  none;
  opacity:         0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}


/* ==========================================================================
   7. LIQUID GLASS SYSTEM
   ========================================================================== */

/* Level 1: Subtle — nav, filter bars */
.glass-subtle {
  background:         rgba(255, 255, 255, 0.03);
  backdrop-filter:    blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border:             1px solid rgba(255, 255, 255, 0.06);
}

/* Level 2: Standard — cards, panels */
.glass {
  background:         rgba(255, 255, 255, 0.05);
  backdrop-filter:    blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border:             1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

/* Level 3: Heavy — hero panels, featured cards */
.glass-heavy {
  background:         rgba(255, 255, 255, 0.08);
  backdrop-filter:    blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border:             1px solid rgba(255, 255, 255, 0.15);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 24px 64px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.10) inset;
}

/* Gold-tinted glass */
.glass-gold {
  background:         rgba(232, 164, 58, 0.08);
  backdrop-filter:    blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border:             1px solid rgba(232, 164, 58, 0.20);
  box-shadow:         0 4px 24px rgba(232, 164, 58, 0.10);
}

/* Blue-tinted glass */
.glass-blue {
  background:         rgba(59, 130, 246, 0.08);
  backdrop-filter:    blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border:             1px solid rgba(59, 130, 246, 0.20);
  box-shadow:         0 4px 24px rgba(59, 130, 246, 0.10);
}

/* Standard glass hover enhancement */
.glass:hover {
  background:  rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.10) inset;
}

/* Top-edge light streak */
.glass-refraction::before {
  content:    "";
  position:   absolute;
  top:        0;
  left:       10%;
  right:      10%;
  height:     1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25) 50%,
    transparent
  );
  pointer-events: none;
}

/* Conic glow on hover — requires @property support */
@property --angle {
  syntax:         "<angle>";
  initial-value:  0deg;
  inherits:       false;
}

@keyframes glowRotate {
  to { --angle: 360deg; }
}

.glass-glow {
  position: relative;
}

.glass-glow::after {
  content:         "";
  position:        absolute;
  inset:           -1px;
  border-radius:   inherit;
  background:      conic-gradient(
    from var(--angle),
    transparent 0deg,
    var(--gold) 60deg,
    transparent 120deg
  );
  opacity:         0;
  z-index:         -1;
  transition:      opacity 0.4s var(--ease-snappy);
  pointer-events:  none;
}

.glass-glow:hover::after {
  opacity:   0.6;
  animation: glowRotate 3s linear infinite;
}


/* ==========================================================================
   8. SCROLL PROGRESS BAR
   ========================================================================== */

#scroll-progress {
  position:   fixed;
  top:        0;
  left:       0;
  width:      0%;
  height:     3px;
  background: var(--gold);
  z-index:    10000;
  box-shadow: 0 0 8px var(--glow-gold);
  transition: width 0.05s linear;
}


/* ==========================================================================
   9. CUSTOM CURSOR
   ========================================================================== */

.cursor-ring {
  position:         fixed;
  top:              0;
  left:             0;
  width:            40px;
  height:           40px;
  border-radius:    50%;
  background:       rgba(255, 255, 255, 0.04);
  backdrop-filter:  blur(8px);
  border:           1.5px solid rgba(255, 255, 255, 0.20);
  pointer-events:   none;
  z-index:          99999;
  will-change:      transform;
  mix-blend-mode:   normal;
  transform:        translate(-50%, -50%);
  transition:
    width  0.3s var(--ease-snappy),
    height 0.3s var(--ease-snappy),
    border-color 0.3s var(--ease-snappy),
    background   0.3s var(--ease-snappy),
    backdrop-filter 0.3s var(--ease-snappy);
}

.cursor-dot {
  position:       fixed;
  top:            0;
  left:           0;
  width:          5px;
  height:         5px;
  border-radius:  50%;
  background:     var(--gold);
  pointer-events: none;
  z-index:        100000;
  will-change:    transform;
  transform:      translate(-50%, -50%);
}

/* Ghost trail elements */
.cursor-ghost {
  position:        fixed;
  top:             0;
  left:            0;
  width:           20px;
  height:          20px;
  border-radius:   50%;
  background:      rgba(232, 164, 58, 0.06);
  backdrop-filter: blur(4px);
  border:          1px solid rgba(232, 164, 58, 0.12);
  pointer-events:  none;
  z-index:         99990;
  will-change:     transform;
  transform:       translate(-50%, -50%);
}

/* Hover state — enlarged with gold glow */
.cursor-ring.is-hovering {
  width:           80px;
  height:          80px;
  border-color:    var(--gold);
  background:      rgba(232, 164, 58, 0.06);
  backdrop-filter: none;
  box-shadow:      0 0 20px var(--glow-gold);
}

/* Text cursor — thin bar */
.cursor-ring.is-text {
  width:      2px;
  height:     24px;
  border-radius: 1px;
  border-color: var(--text-primary);
}

/* Click state */
.cursor-ring.is-clicking {
  transform: translate(-50%, -50%) scale(0.75);
}

/* Hide all cursor elements on touch devices */
@media (hover: none) {
  .cursor-ring,
  .cursor-dot,
  .cursor-ghost {
    display: none;
  }
}


/* ==========================================================================
   10. NAVIGATION
   ========================================================================== */

.site-nav {
  position:         fixed;
  top:              0;
  left:             0;
  right:            0;
  z-index:          9000;
  height:           var(--nav-h);
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          0 clamp(1.5rem, 4vw, 3rem);
  transition:
    background   0.4s var(--ease-snappy),
    border-color 0.4s var(--ease-snappy),
    box-shadow   0.4s var(--ease-snappy);
}

.site-nav.scrolled {
  background:      rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom:   1px solid var(--border);
  box-shadow:      0 4px 24px rgba(0, 0, 0, 0.4);
}

.nav-logo {
  font-family:    "Playfair Display", Georgia, serif;
  font-weight:    900;
  font-size:      1.1rem;
  letter-spacing: 0.02em;
  color:          var(--text-primary);
}

.nav-links {
  display:     flex;
  align-items: center;
  gap:         2rem;
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
}

.nav-links a {
  font-family:    "Source Sans 3", sans-serif;
  font-size:      0.85rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--text-secondary);
  transition:     color 0.25s var(--ease-snappy);
}

.nav-links a:hover {
  color: var(--gold);
}

.nav-cta {
  display:        inline-flex;
  align-items:    center;
  padding:        0.5rem 1.25rem;
  font-family:    "Source Sans 3", sans-serif;
  font-size:      0.8rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--gold);
  background:     rgba(232, 164, 58, 0.12);
  border:         1px solid rgba(232, 164, 58, 0.35);
  border-radius:  4px;
  transition:
    background   0.25s var(--ease-snappy),
    border-color 0.25s var(--ease-snappy),
    box-shadow   0.25s var(--ease-snappy);
}

.nav-cta:hover {
  background:   rgba(232, 164, 58, 0.22);
  border-color: rgba(232, 164, 58, 0.60);
  box-shadow:   0 0 12px rgba(232, 164, 58, 0.20);
  color:        var(--gold);
}

/* Mobile hamburger */
.nav-hamburger {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  gap:             5px;
  width:           44px;
  height:          44px;
  background:      none;
  border:          none;
  cursor:          none;
  padding:         10px;
}

@media (max-width: 768px) {
  .nav-hamburger {
    display: flex;
  }
}

.nav-hamburger span {
  display:          block;
  width:            24px;
  height:           1.5px;
  background:       var(--text-primary);
  border-radius:    1px;
  transition:       transform 0.3s var(--ease-snappy), opacity 0.3s;
  transform-origin: center;
}

.nav-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}


/* ==========================================================================
   11. FLOATING SOCIAL ICONS
   ========================================================================== */

.social-float {
  position:       fixed;
  left:           20px;
  top:            50%;
  transform:      translateY(-50%);
  z-index:        500;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            8px;
  padding:        12px 6px;
  background:     rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border:         1px solid rgba(255, 255, 255, 0.08);
  border-radius:  40px;
}

.social-float a {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   50%;
  background:      rgba(255, 255, 255, 0.05);
  border:          1px solid rgba(255, 255, 255, 0.06);
  color:           var(--text-secondary);
  transition:
    background   0.25s var(--ease-snappy),
    border-color 0.25s var(--ease-snappy),
    color        0.25s var(--ease-snappy),
    transform    0.25s var(--ease-spring);
}

.social-float a:hover {
  background:   rgba(232, 164, 58, 0.12);
  border-color: rgba(232, 164, 58, 0.30);
  color:        var(--gold);
  transform:    scale(1.15);
}

.social-float svg {
  width:  16px;
  height: 16px;
  fill:   currentColor;
}

@media (max-width: 768px) {
  .social-float {
    display: none;
  }
}


/* ==========================================================================
   12. VERTICAL MARQUEE
   ========================================================================== */

.v-marquee {
  position:     fixed;
  right:        12px;
  top:          0;
  bottom:       0;
  width:        16px;
  z-index:      80;
  overflow:     hidden;
  display:      flex;
  align-items:  center;
  pointer-events: none;
}

.v-marquee-track {
  writing-mode:     vertical-rl;
  text-orientation: mixed;
  font-size:        0.625rem;
  font-weight:      600;
  text-transform:   uppercase;
  letter-spacing:   0.15em;
  color:            rgba(255, 255, 255, 0.08);
  white-space:      nowrap;
  animation:        vMarqueeScroll 30s linear infinite;
}

@keyframes vMarqueeScroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

@media (max-width: 768px) {
  .v-marquee {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v-marquee {
    display: none;
  }
}


/* ==========================================================================
   13. BUTTON SYSTEM
   ========================================================================== */

@property --btn-angle {
  syntax:        "<angle>";
  initial-value: 0deg;
  inherits:      false;
}

@keyframes btnGlowRotate {
  to { --btn-angle: 360deg; }
}

.btn-primary,
.btn-ghost,
.btn-text {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  font-family:     "Source Sans 3", sans-serif;
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  0.08em;
  border-radius:   4px;
  cursor:          none;
  transition:
    background   0.3s var(--ease-snappy),
    box-shadow   0.3s var(--ease-snappy),
    border-color 0.3s var(--ease-snappy),
    transform    0.2s var(--ease-spring);
}

.btn-primary,
.btn-ghost {
  padding: 0.875rem 2rem;
  font-size: 0.875rem;
}

.btn-text {
  padding:   0;
  font-size: 0.875rem;
}

/* Primary — gold fill, dark text */
.btn-primary {
  background:   var(--gold);
  color:        #0A0A0F;
  border:       1px solid transparent;
  position:     relative;
  overflow:     hidden;
}

.btn-primary::after {
  content:    "";
  position:   absolute;
  inset:      -1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--btn-angle),
    transparent 0deg,
    rgba(255, 255, 255, 0.5) 60deg,
    transparent 120deg
  );
  opacity:    0;
  z-index:    -1;
  transition: opacity 0.3s;
}

.btn-primary:hover {
  background:  var(--gold-dark);
  box-shadow:  0 0 24px rgba(232, 164, 58, 0.35);
  transform:   translateY(-2px);
}

.btn-primary:hover::after {
  opacity:   0.5;
  animation: btnGlowRotate 2s linear infinite;
}

/* Ghost — transparent, gold border */
.btn-ghost {
  background:   transparent;
  color:        var(--gold);
  border:       1px solid rgba(232, 164, 58, 0.45);
}

.btn-ghost:hover {
  background:   rgba(232, 164, 58, 0.10);
  border-color: rgba(232, 164, 58, 0.70);
  box-shadow:   0 0 16px rgba(232, 164, 58, 0.20);
  transform:    translateY(-2px);
}

/* Text — no border, arrow indicator */
.btn-text {
  background:   transparent;
  color:        var(--gold);
  border:       none;
}

.btn-text::after {
  content:    " →";
  transition: transform 0.25s var(--ease-snappy);
  display:    inline-block;
}

.btn-text:hover::after {
  transform: translateX(4px);
}

/* Active press state for all buttons */
.btn-primary:active,
.btn-ghost:active,
.btn-text:active {
  transform: translateY(0) scale(0.97);
}


/* ==========================================================================
   14. FOCUS VISIBLE
   ========================================================================== */

:focus-visible {
  outline:        2px solid var(--gold);
  outline-offset: 3px;
  border-radius:  2px;
}

/* Remove default focus outline when focus-visible is supported */
:focus:not(:focus-visible) {
  outline: none;
}


/* ==========================================================================
   15. SKIP NAV
   ========================================================================== */

.skip-nav {
  position:   absolute;
  top:        -100%;
  left:       1rem;
  z-index:    100001;
  padding:    0.75rem 1.5rem;
  background: var(--gold);
  color:      #0A0A0F;
  font-weight: 700;
  font-size:  0.875rem;
  border-radius: 0 0 4px 4px;
  transition: top 0.2s var(--ease-snappy);
}

.skip-nav:focus {
  top: 0;
}


/* ==========================================================================
   16. ACCESSIBILITY AND MAIN LANDMARK
   ========================================================================== */

main {
  display: block;
  outline: none;
}

/* Visually hidden utility (screen reader only) */
.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}

/* Ensure ARIA-hidden elements are truly hidden */
[aria-hidden="true"] {
  display: none;
}

/* Respect reduced motion for cursor elements */
@media (prefers-reduced-motion: reduce) {
  .cursor-ring,
  .cursor-dot,
  .cursor-ghost {
    display: none;
  }

  .btn-primary::after,
  .glass-glow::after {
    animation: none;
  }

  .v-marquee-track {
    animation: none;
  }
}