/*
Theme Name: phlwest
Theme URI: https://phlwest.com
Author: phlwest
Description: Custom theme for phlwest — cinematic alt-pop artist. Orange neon, grain, Futura PT, Amador.
Version: 1.0
License: Private
Text Domain: phlwest
*/

/* ============================================
   CSS VARIABLES
   ============================================ */

:root {
  --phl-orange: #FF320A;
  --phl-orange-dim: rgba(255, 50, 10, 0.6);
  --phl-orange-glow: rgba(255, 80, 30, 0.4);
  --phl-black: #0A0A0A;
  --phl-white: #F5F5F2;
  --phl-yellow: #FFD100;
  --phl-magenta-glow: rgba(255, 0, 180, 0.5);
  --phl-magenta-strong: rgba(255, 0, 180, 0.85);
  --phl-cyan: #00CDF5;
}

/* ============================================
   RESET
   ============================================ */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: "futura-pt", "Jost", -apple-system, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--phl-white);
  background: var(--phl-black);
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease, opacity 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "futura-pt-condensed", "futura-pt", sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

/* ============================================
   GLOBAL GRAIN OVERLAY
   ============================================ */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* ============================================
   GLOW UTILITIES
   ============================================ */

.phl-glow {
  text-shadow:
    0 0 4px var(--phl-orange),
    0 0 12px var(--phl-orange-glow),
    0 0 24px var(--phl-orange-glow),
    0 0 48px rgba(255, 50, 10, 0.2);
}

.phl-glow-magenta {
  text-shadow:
    0 0 4px var(--phl-magenta-glow),
    0 0 14px var(--phl-magenta-glow);
}

/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */

.font-condensed {
  font-family: "futura-pt-condensed", "futura-pt", sans-serif;
}

.font-amador {
  font-family: "amador", serif;
  font-weight: 400;
}

.font-superior {
  font-family: "superior-title", serif;
}

/* ============================================
   SELECTION
   ============================================ */

::selection {
  background: var(--phl-orange);
  color: var(--phl-black);
}

::-moz-selection {
  background: var(--phl-orange);
  color: var(--phl-black);
}