/* ── GLOBAL CSS — Trionn-inspired ── */
:root {
  --bg: #09090b;
  --bg-light: #f5f5f0;
  --text: #d8d8d8;
  --text-dark: #0a0a0a;
  --white: #ffffff;
  --line: rgba(255,255,255,0.06);
  --glass: rgba(255,255,255,0.03);
  --accent: #c0392b;
  --accent-glow: rgba(192,57,43,0.35);
  --red: #c0392b;
  --red-dim: #7b241c;
  --ease: cubic-bezier(.22,1,.36,1);

  --f-head: 'Familjen Grotesk', sans-serif;
  --f-mono: 'Space Mono', monospace;
  --f-disp: 'Bebas Neue', sans-serif;
}

/* AMBIENT GLOW & FLARES */
.ambient-glow {
  position:fixed; top:-50%; left:-50%; width:200%; height:200%;
  background:radial-gradient(circle at 50% 50%, rgba(20, 25, 40, 0.15) 0%, transparent 60%);
  z-index:0; pointer-events:none;
  animation:breathe 15s infinite alternate ease-in-out;
}
@keyframes breathe {
  0% { transform:scale(0.8) translate(5%, 5%); opacity:0.6; }
  100% { transform:scale(1.1) translate(-5%, -5%); opacity:1; }
}

.flare {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  animation: drift 25s infinite alternate ease-in-out;
}
.flare-1 {
  width: 500px; height: 500px;
  background: rgba(192, 57, 43, 0.10);
  top: 5%; left: -10%;
  animation-delay: 0s;
}
.flare-2 {
  width: 600px; height: 600px;
  background: rgba(192, 57, 43, 0.06);
  bottom: -10%; right: -5%;
  animation-delay: -5s;
}
.flare-3 {
  width: 350px; height: 350px;
  background: rgba(160, 30, 30, 0.07);
  top: 50%; left: 60%;
  animation-delay: -10s;
}
@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(8vw, 6vh) scale(1.1); }
  66% { transform: translate(-4vw, -4vh) scale(0.95); }
  100% { transform: translate(2vw, -8vh) scale(1.05); }
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-head);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:none;
}
@media (hover: none) {
  body { cursor:auto; }
  a { cursor:auto; }
}
a { text-decoration:none; color:inherit; cursor:none; }
.mono { font-family:var(--f-mono); }

/* scrollbar */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--line); }

/* CURSOR */
#cursor-dot {
  position:fixed; top:0; left:0;
  width:6px; height:6px;
  background:var(--white);
  border-radius:50%;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  transition:transform .1s, width .3s, height .3s, opacity .3s;
  mix-blend-mode:difference;
}
#cursor-ring {
  position:fixed; top:0; left:0;
  width:32px; height:32px;
  border:1px solid rgba(255,255,255,0.4);
  border-radius:50%;
  pointer-events:none;
  z-index:9998;
  transform:translate(-50%,-50%);
  transition:transform .5s var(--ease), width .3s, height .3s;
  mix-blend-mode:difference;
}
.cursor-grow #cursor-dot { width:10px; height:10px; }
.cursor-grow #cursor-ring { width:52px; height:52px; border-color:rgba(255,255,255,.7); }

/* NAV */
nav {
  position:fixed; top:0; width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:2rem 4rem;
  z-index:100;
  mix-blend-mode:difference;
}
.nav-logo {
  font-family:var(--f-head);
  font-size:1.4rem; font-weight:700;
  letter-spacing:-.02em;
  color:var(--white);
}
.nav-logo .dot { color: var(--red); }
.nav-links {
  display:flex; gap:2.5rem; list-style:none;
}
.nav-links a {
  font-family:var(--f-mono);
  font-size:.65rem; letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--white);
  transition:opacity .3s;
}
.nav-links a:hover { opacity:.5; }
.nav-cta {
  font-family:var(--f-mono);
  font-size:.65rem; letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--white);
  padding:.6rem 1.4rem;
  border:1px solid rgba(255,255,255,.4);
  transition:all .3s;
}
.nav-cta:hover { background:var(--white); color:var(--bg); }
.nav-cta .arr { display:inline-block; transition:transform .3s; }
.nav-cta:hover .arr { transform:translateX(4px); }

/* HAMBURGER (mobile) */
.nav-hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:4px;
  z-index:200;
}
.nav-hamburger span {
  display:block;
  width:24px; height:1.5px;
  background:var(--white);
  transition:transform .4s var(--ease), opacity .3s;
  transform-origin:center;
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* MOBILE MENU OVERLAY */
.nav-mobile-overlay {
  display:none;
  position:fixed; inset:0;
  background:rgba(4,5,8,0.97);
  backdrop-filter:blur(20px);
  z-index:150;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2.5rem;
  opacity:0;
  transform:translateY(-10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events:none;
}
.nav-mobile-overlay.open {
  display:flex;
  opacity:1;
  transform:none;
  pointer-events:all;
}
.nav-mobile-overlay a {
  font-family:var(--f-head);
  font-size:clamp(2rem,10vw,3.5rem);
  font-weight:700;
  letter-spacing:-.03em;
  color:rgba(255,255,255,0.8);
  transition:color .3s;
}
.nav-mobile-overlay a:hover { color:var(--white); }

/* SECTION LABEL */
.section-label {
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red);
  opacity: .7;
  margin-bottom: 3rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.section-label::before {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1px;
  background: var(--red);
  box-shadow: 0 0 6px rgba(192,57,43,.5);
}

/* REVEAL TEXT ANIMATION */
.reveal-text {
  overflow:hidden;
}
.reveal-text .word {
  display:inline-block;
  transform:translateY(110%);
  transition:transform .9s var(--ease);
}
.reveal-text.visible .word { transform:translateY(0); }

/* BUTTONS */
.btn-outline, .btn-primary, .btn-cv {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .8rem 1.8rem;
  transition: all .4s var(--ease);
  cursor: none;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.btn-outline {
  color: var(--red);
  border: 1px solid rgba(192,57,43,.45);
  background: rgba(192,57,43,.07);
}
.btn-outline:hover {
  background: rgba(192,57,43,.18);
  border-color: var(--red);
  box-shadow: 0 0 18px rgba(192,57,43,.3);
}
.btn-primary {
  background: var(--red);
  color: var(--white);
  border: 1px solid var(--red);
  font-weight: 700;
  box-shadow: 0 0 12px rgba(192,57,43,.4);
}
.btn-primary:hover {
  background: var(--red-dim);
  box-shadow: 0 0 24px rgba(192,57,43,.6);
  transform: translateY(-2px);
}
.btn-cv {
  color: rgba(192,57,43,.8);
  border: 1px dashed rgba(192,57,43,.4);
  background: transparent;
}
.btn-cv:hover {
  color: var(--red);
  border-color: var(--red);
  background: rgba(192,57,43,.08);
  box-shadow: 0 0 14px rgba(192,57,43,.25);
  transform: translateY(-2px);
}

/* TAGS */
.proj-tags { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.tag {
  font-family:var(--f-mono);
  font-size:.65rem; letter-spacing:.05em;
  padding:.35rem .8rem;
  background:rgba(192,57,43,.12);
  color:var(--red);
  text-transform:uppercase;
  border-radius:100px;
  backdrop-filter:blur(4px);
  border:1px solid rgba(192,57,43,.3);
}

/* FOOTER */
footer {
  padding:2rem 4rem;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between;
  font-size:.65rem; letter-spacing:.1em;
  color:rgba(216,216,216,.3);
}

/* SCROLL FADE UP UTIL */
.fade-up {
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.fade-up.in { opacity:1; transform:none; }
.fade-up[data-d="1"] { transition-delay:.1s; }
.fade-up[data-d="2"] { transition-delay:.2s; }
.fade-up[data-d="3"] { transition-delay:.3s; }
.fade-up[data-d="4"] { transition-delay:.4s; }
.fade-up[data-d="5"] { transition-delay:.5s; }

/* ── RESPONSIVE ── */
@media(max-width:768px) {
  /* Hide cursor elements on touch devices */
  #cursor-dot, #cursor-ring { display:none; }

  /* Nav */
  nav { padding:1.2rem 1.5rem; }
  .nav-links { display:none; }
  .nav-cta { display:none; }
  .nav-hamburger { display:flex; }

  /* Buttons */
  .btn-outline, .btn-primary, .btn-cv { cursor:pointer; }

  /* Footer */
  footer { flex-direction:column; gap:.5rem; padding:1.5rem; }

  /* Section label */
  .section-label { margin-bottom:2rem; }
}