/* ============================================
   KEPO-IH — Global Styles
   ============================================ */

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

/* ---- Variables ---- */
:root {
  --bg:        #080810;
  --surface:   #0f0f1a;
  --card:      #12121f;
  --accent:    #c8a96e;
  --accent2:   #6e8ac8;
  --accent3:   #8ac86e;
  --accent4:   #c86e8a;
  --text:      #e8e4dc;
  --muted:     #5a5760;
  --border:    rgba(200,169,110,0.12);
  --border-hover: rgba(200,169,110,0.35);
  --font-serif: 'Cormorant Garamond', serif;
  --font-mono:  'Space Mono', monospace;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-mono); overflow-x: hidden; }

/* ---- Grain overlay ---- */
body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: 0.45;
  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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

/* ---- Ambient orbs ---- */
.orb {
  position: fixed; border-radius: 50%;
  filter: blur(130px); opacity: 0.08;
  pointer-events: none;
  animation: orbDrift 22s ease-in-out infinite alternate;
  will-change: transform;
}
.orb-1 { width: 700px; height: 700px; background: var(--accent);  top: -300px; left: -200px; animation-delay: 0s; }
.orb-2 { width: 500px; height: 500px; background: var(--accent2); bottom: -200px; right: -150px; animation-delay: -8s; }
.orb-3 { width: 300px; height: 300px; background: var(--accent4); top: 50%; left: 55%; animation-delay: -14s; opacity: 0.05; }

@keyframes orbDrift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(50px, 40px) scale(1.06); }
}

/* ---- Grid background ---- */
.grid-bg {
  position: fixed; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 75%);
}

/* ---- Corner decorations ---- */
.corner {
  position: fixed; width: 50px; height: 50px;
  pointer-events: none; opacity: 0;
  animation: fadeIn 1.2s var(--ease-out) forwards 1.5s;
}
.corner-tl { top: 20px; left: 20px;   border-top: 1px solid var(--accent); border-left:  1px solid var(--accent); }
.corner-tr { top: 20px; right: 20px;  border-top: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.corner-bl { bottom: 20px; left: 20px;  border-bottom: 1px solid var(--accent); border-left:  1px solid var(--accent); }
.corner-br { bottom: 20px; right: 20px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 2px; }

/* ---- Keyframes ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 0.25; }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* ---- Utility ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }