/* ====================================================
   EVANN TERRIER — PORTFOLIO  |  style.css
   Variables · Reset · Typography · Global · Buttons
   ==================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Outfit:wght@300;400;500;600&display=swap');

   /* ===== DESIGN TOKENS ===== */
   :root {
     /* Backgrounds */
     --bg:     #34353a;
     --bg-2:   #3c3d42;
     --bg-3:   #2c2d32;
     --bg-4:   #45464b;
     --bg-card:#3f4045;
   
     /* Borders */
     --border:   rgba(228, 229, 231, 0.08);
     --border-2: rgba(255, 200, 107, 0.28);
     --border-3: rgba(255, 200, 107, 0.42);
   
     /* Text */
     --text:   #ffffff;
     --text-2: #e4e5e7;
     --text-3: #b7b9bf;
     --text-4: #787b84;
   
     /* Amber */
     --gold:       #ffc86b;
     --gold-light: #ffdb96;
     --gold-dim:   rgba(255, 200, 107, 0.15);
     --gold-glow:  rgba(255, 200, 107, 0.18);
   
     /* Typography */
     --font-serif: 'Cormorant Garamond', Georgia, serif;
     --font-body:  'Outfit', sans-serif;
     --font-mono:  'Space Mono', monospace;
   
     /* Misc */
     --radius:  8px;
     --radius-lg: 16px;
     --tr:      0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     --tr-slow: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
   
   /* ===== RESET ===== */
   *, *::before, *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   html {
     scroll-behavior: smooth;
     font-size: 16px;
   }
   
   body {
     background: var(--bg);
     background-image:
       radial-gradient(circle at 10% 12%, rgba(255, 200, 107, 0.07), transparent 28%),
       radial-gradient(circle at 88% 8%, rgba(255, 200, 107, 0.05), transparent 24%);
     color: var(--text);
     font-family: var(--font-body);
     font-weight: 300;
     line-height: 1.7;
     overflow-x: hidden;
     cursor: none; /* hide default cursor (custom cursor enabled) */
   }
   
   body.loading {
     overflow: hidden;
   }
   
   img { display: block; max-width: 100%; }
   a { color: inherit; text-decoration: none; }
   button { cursor: none; }
   ul, ol { list-style: none; }
   
   /* ===== TYPOGRAPHY ===== */
   h1, h2, h3, h4 {
     font-family: var(--font-serif);
     font-weight: 600;
     line-height: 1.05;
   }
   
   h1 { font-size: clamp(3.8rem, 9vw, 8rem); }
   h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
   h3 { font-size: 1.35rem; }
   h4 {
     font-size: 0.95rem;
     font-family: var(--font-body);
     font-weight: 500;
     color: var(--text);
     line-height: 1.4;
   }
   
   p {
     color: var(--text-2);
     font-size: 0.95rem;
     line-height: 1.9;
   }
   
   p.lead {
     font-size: 1.1rem;
     color: var(--text);
     font-weight: 400;
     margin-bottom: 1.2rem;
   }
   
   strong { color: var(--text); font-weight: 500; }
   
   /* Grain overlay removed: keep the dark background perfectly smooth. */
   
   /* ===== SCROLLBAR ===== */
   ::-webkit-scrollbar { width: 3px; }
   ::-webkit-scrollbar-track { background: var(--bg); }
   ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 2px; }
   ::-webkit-scrollbar-thumb:hover { background: var(--gold); }
   
   ::selection { background: var(--gold-dim); color: var(--gold-light); }
   
   /* ===== SECTION BASE ===== */
   .section {
     padding: 120px 6%;
     position: relative;
     border-top: 1px solid var(--border);
     overflow: hidden;
   }

   .section::before {
     content: '';
     position: absolute;
     width: 280px;
     height: 280px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(255, 200, 107, 0.12), transparent 62%);
     filter: blur(16px);
     top: 96px;
     right: -120px;
     pointer-events: none;
   }
   
   .section-body {
     max-width: 1220px;
     margin: 0 auto;
   }
   
   .section-num {
     position: absolute;
     top: 120px;
     right: 6%;
     font-family: var(--font-mono);
     font-size: 5.5rem;
     font-weight: 700;
     color: var(--bg-3);
     user-select: none;
     letter-spacing: -0.04em;
     line-height: 1;
     pointer-events: none;
   }
   
   .section-title {
     font-size: clamp(2rem, 3.2vw, 2.7rem);
     margin-bottom: 56px;
     position: relative;
     display: inline-block;
   }
   
   .section-title::after {
     content: '';
     position: absolute;
     bottom: -14px;
     left: 0;
     width: 32px;
     height: 2px;
     background: var(--gold);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.8s 0.3s ease;
   }
   
   .section.visible .section-title::after {
     transform: scaleX(1);
   }
   
   .section-title--sub {
     margin-top: 80px;
     font-size: clamp(1.5rem, 2.5vw, 2rem);
   }
   
   /* ===== BUTTONS ===== */
   .btn-primary {
     border-radius: 12px;
     box-shadow: 0 14px 34px -18px var(--gold);
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 15px 34px;
     background: var(--gold);
     color: var(--bg);
     font-family: var(--font-mono);
     font-size: 0.72rem;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     border: 1px solid var(--gold);
     position: relative;
     overflow: hidden;
     transition: var(--tr);
   }
   
   .btn-primary::before {
     content: '';
     position: absolute;
     inset: 0;
     background: var(--gold-light);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform var(--tr);
   }
   
   .btn-primary:hover::before { transform: scaleX(1); }
   .btn-primary span { position: relative; z-index: 1; }
   
   .btn-primary.btn-large {
     padding: 18px 48px;
     font-size: 0.78rem;
     margin-top: 48px;
   }
   
   .btn-secondary {
     border-radius: 12px;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 15px 34px;
     background: transparent;
     color: var(--text);
     font-family: var(--font-mono);
     font-size: 0.72rem;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     border: 1px solid var(--border-2);
     transition: var(--tr);
   }
   
   .btn-secondary:hover {
     border-color: var(--gold);
     color: var(--gold);
   }
   
   .btn-cv {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 9px 18px;
     border: 1px solid var(--gold);
     font-family: var(--font-mono);
     font-size: 0.7rem;
     letter-spacing: 0.1em;
     color: var(--gold);
     background: transparent;
     transition: var(--tr);
   }
   
   .btn-cv:hover {
     background: var(--gold);
     color: var(--bg);
   }
   
   /* ===== INTERESTS / TAGS ===== */
   .interests {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-top: 14px;
   }
   
   .interests span {
     font-family: var(--font-mono);
     font-size: 0.68rem;
     letter-spacing: 0.06em;
     padding: 6px 14px;
     border: 1px solid var(--border);
     color: var(--text-3);
     background: var(--bg-2);
     border-radius: var(--radius);
     transition: border-color var(--tr), color var(--tr);
   }
   
   .interests span:hover {
     border-color: var(--border-2);
     color: var(--text-2);
   }