/* ==========================================================================
   MADE BY JOWJO — design system
   Concept: camera viewfinder / recording HUD. Black canvas, electric lime
   accent, red reserved only for the REC dot. Space Grotesk + JetBrains Mono.
   ========================================================================== */

:root{
  --bg: #0a0a0b;
  --bg-alt: #111113;
  --fg: #f4f4ef;
  --fg-dim: #93938c;
  --line: rgba(244,244,239,0.14);
  --accent: #0049ff;
  --accent-dim: #0033b3;
  --rec: #ff3b30;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Space Grotesk', ui-sans-serif, sans-serif;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
body{
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  overflow-x: hidden;
  cursor: none;
}
@media (pointer: coarse){ body{ cursor: auto; } }

img,video{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2{ font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em; line-height: 0.98; }
ul{ list-style:none; }
button{ font-family: inherit; background:none; border:none; color:inherit; cursor:pointer; }

::selection{ background: var(--accent); color:#fff; }

.eyebrow{
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 14px;
}

/* ---------------------------------- grain -------------------------------- */
.grain{
  position: fixed; inset:0; z-index: 200; pointer-events:none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(4) infinite;
}
@keyframes grain{
  0%,100%{ transform: translate(0,0); } 25%{ transform: translate(-1%,1%); }
  50%{ transform: translate(1%,-1%); } 75%{ transform: translate(-1%,-1%); }
}

/* --------------------------------- cursor -------------------------------- */
.cursor-dot,.cursor-ring{
  position: fixed; top:0; left:0; z-index: 999; pointer-events:none;
  border-radius: 50%; will-change: transform;
  transition: opacity .2s;
}
.cursor-dot{ width:6px; height:6px; background: var(--accent); }
.cursor-ring{
  width:34px; height:34px; border:1px solid var(--accent);
  transition: width .2s var(--ease), height .2s var(--ease), border-color .2s, opacity .2s;
}
.cursor-ring.is-active{ width:56px; height:56px; border-color: var(--rec); }
@media (pointer: coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* ------------------------------ scroll bar ------------------------------- */
.scroll-bar{ position: fixed; top:0; left:0; width:100%; height:2px; z-index: 500; background: var(--line); }
.scroll-bar__fill{ height:100%; width:0%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }

/* --------------------------------- intro --------------------------------- */
.intro{
  position: fixed; inset:0; z-index: 1000; background:#000;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 28px;
  transition: opacity .6s var(--ease), visibility .6s;
}
.intro__iris{ position:relative; width:120px; height:120px; }
.intro__iris span{
  position:absolute; inset:0; border-radius: 50%;
  border: 2px solid var(--accent);
  animation: iris-open 1.1s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 0.05s);
  opacity: 0;
}
.intro__iris span:nth-child(1){ --i:0; } .intro__iris span:nth-child(2){ --i:1; }
.intro__iris span:nth-child(3){ --i:2; } .intro__iris span:nth-child(4){ --i:3; }
.intro__iris span:nth-child(5){ --i:4; } .intro__iris span:nth-child(6){ --i:5; }
@keyframes iris-open{
  0%{ opacity:1; transform: scale(0.2) rotate(0deg); }
  100%{ opacity:0; transform: scale(2.6) rotate(90deg); }
}
.intro__label{ font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.15em; color: var(--fg-dim); }
.intro.is-done{ opacity:0; visibility:hidden; }

/* ---------------------------------- nav ---------------------------------- */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 400;
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px clamp(20px,5vw,56px);
  background: linear-gradient(180deg, rgba(10,10,11,0.75), transparent);
  backdrop-filter: blur(6px);
}
.nav__logo{ display:flex; align-items:center; }
.nav__logo-img{
  height: 44px; width:auto; display:block;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5));
  transition: transform .3s var(--ease), filter .3s var(--ease);
}
.nav__logo:hover .nav__logo-img{ transform: scale(1.06); filter: drop-shadow(0 2px 14px rgba(0,73,255,0.45)); }
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:0.15; } }

.nav__links{ display:flex; gap: 36px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; }
.nav__links a{ position:relative; padding-bottom:4px; }
.nav__num{ color: var(--accent); margin-right:6px; }
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--fg);
  transition: width .3s var(--ease);
}
.nav__links a:hover::after{ width:100%; }

.nav__burger{ display:none; flex-direction:column; gap:6px; width:28px; z-index:401; }
.nav__burger span{ height:2px; background: var(--fg); transition: transform .3s var(--ease), opacity .3s; }
.nav__burger[aria-expanded="true"] span:first-child{ transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform: translateY(-4px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset:0; background: var(--bg); z-index:399;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap: 18px;
  padding: 0 32px;
  transform: translateY(-100%); transition: transform .5s var(--ease);
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu a{ font-size: 2.6rem; font-weight:700; display:flex; align-items:baseline; gap:12px; }
.mobile-menu a em{ font-family: var(--mono); font-style:normal; font-size:0.9rem; color: var(--accent); }

/* --------------------------------- hero ---------------------------------- */
.hero{
  position: relative; min-height: 100svh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding: 120px 24px 60px;
}
.hero__grid{
  position:absolute; inset:-20%;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(600px) rotateX(55deg);
  transform-origin: center 40%;
  opacity: 0.2;
  mask-image: radial-gradient(ellipse at center, black 10%, transparent 70%);
}
/* ---------------------------- universe backdrop --------------------------- */
.stars{ position: fixed; inset:0; z-index:-3; pointer-events:none; background: #060608; }
.nebula{ position: fixed; inset:0; overflow:hidden; pointer-events:none; z-index:-2; }
.nebula span{ position:absolute; border-radius:50%; filter: blur(110px); will-change: transform; }
.nebula span:nth-child(1){
  width: 46vw; height:46vw; max-width:560px; max-height:560px; top:-12%; left:2%; background: var(--accent); opacity:0.14;
  animation: bokeh-drift-1 34s ease-in-out infinite;
}
.nebula span:nth-child(2){
  width: 38vw; height:38vw; max-width:460px; max-height:460px; top:30%; right:0%; background: var(--rec); opacity:0.10;
  animation: bokeh-drift-2 39s ease-in-out infinite;
}
.nebula span:nth-child(3){
  width: 34vw; height:34vw; max-width:420px; max-height:420px; bottom:-8%; left:22%; background: #7c5cff; opacity:0.14;
  animation: bokeh-drift-3 31s ease-in-out infinite;
}
.nebula span:nth-child(4){
  width: 26vw; height:26vw; max-width:320px; max-height:320px; top:60%; left:52%; background: #4fd1ff; opacity:0.10;
  animation: bokeh-drift-1 42s ease-in-out infinite reverse;
}
@keyframes bokeh-drift-1{
  0%,100%{ transform: translate(0,0) scale(1); }
  33%{ transform: translate(4vw,3vh) scale(1.15); }
  66%{ transform: translate(-3vw,5vh) scale(0.9); }
}
@keyframes bokeh-drift-2{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-5vw,-4vh) scale(1.2); }
}
@keyframes bokeh-drift-3{
  0%,100%{ transform: translate(0,0) scale(1); }
  40%{ transform: translate(3vw,-4vh) scale(1.1); }
  70%{ transform: translate(-4vw,-2vh) scale(0.95); }
}

/* top inset is pushed past the fixed .nav (76px) so the top corner brackets
   don't render underneath it — the bottom two only ever needed 20px. */
.viewfinder{ position:absolute; top: 96px; left: 20px; right: 20px; bottom: 20px; pointer-events:none; }
.vf{ position:absolute; width: 34px; height: 34px; border: 2px solid var(--fg); opacity:0.5; }
.vf--tl{ top:0; left:0; border-right:none; border-bottom:none; }
.vf--tr{ top:0; right:0; border-left:none; border-bottom:none; }
.vf--bl{ bottom:0; left:0; border-right:none; border-top:none; }
.vf--br{ bottom:0; right:0; border-left:none; border-top:none; }

.hero__hud{
  position:absolute; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--fg-dim);
  display:flex; align-items:center; gap:8px;
}
.hero__hud--tl{ top: 104px; left: 44px; color: var(--fg); }
.hero__hud--tr{ top: 100px; right: 44px; text-align:right; line-height:1.6; }
.hero__hud--bl{ bottom: 40px; left: 44px; display:none; }
@media (min-width: 700px){ .hero__hud--bl{ display:flex; } }
.dot{ width:6px; height:6px; border-radius:50%; }
.dot--rec{ background: var(--rec); animation: blink 1.2s infinite; }

/* ------------------------------- aperture (lens) --------------------------- */
.aperture{
  position: relative; width: 46px; height: 46px; margin: 0 0 8px auto;
  animation: aperture-spin 16s linear infinite;
}
.aperture__blade{
  position:absolute; inset:0; margin:auto; width:46px; height:46px;
  clip-path: polygon(50% 50%, 50% 0%, 93% 25%);
  background: transparent; border-radius: 4px;
  border: 1.4px solid var(--accent);
  opacity: 0.85;
  transform-origin: 50% 50%;
  animation: aperture-breathe 3.2s ease-in-out infinite;
}
.aperture__blade:nth-child(1){ transform: rotate(0deg); }
.aperture__blade:nth-child(2){ transform: rotate(60deg); animation-delay: -0.1s; }
.aperture__blade:nth-child(3){ transform: rotate(120deg); animation-delay: -0.2s; }
.aperture__blade:nth-child(4){ transform: rotate(180deg); animation-delay: -0.3s; }
.aperture__blade:nth-child(5){ transform: rotate(240deg); animation-delay: -0.4s; }
.aperture__blade:nth-child(6){ transform: rotate(300deg); animation-delay: -0.5s; }
.aperture__dot{
  position:absolute; top:50%; left:50%; width:5px; height:5px; border-radius:50%;
  background: var(--rec); transform: translate(-50%,-50%);
  box-shadow: 0 0 6px var(--rec); animation: blink 2.4s infinite;
}
@keyframes aperture-breathe{
  0%,100%{ transform: rotate(var(--r,0deg)) scale(1); }
  50%{ transform: rotate(var(--r,0deg)) scale(0.55); }
}
.aperture__blade:nth-child(1){ --r:0deg; } .aperture__blade:nth-child(2){ --r:60deg; }
.aperture__blade:nth-child(3){ --r:120deg; } .aperture__blade:nth-child(4){ --r:180deg; }
.aperture__blade:nth-child(5){ --r:240deg; } .aperture__blade:nth-child(6){ --r:300deg; }
@keyframes aperture-spin{ to{ transform: rotate(360deg); } }

.hero__content{ position:relative; z-index:2; text-align:center; max-width: 900px; }
.hero__title{
  font-size: clamp(3rem, 12vw, 8rem);
  overflow:hidden;
}
.hero__title{ display:inline-block; }
.hero__sub{
  margin-top: 22px; font-family: var(--mono); font-size: clamp(0.85rem,1.6vw,1.05rem);
  color: var(--fg-dim); min-height: 1.6em;
  display: block; padding: 0 12px;
}
/* the blinking "cursor" is a real inline character right after the typed text
   (not a border on the whole subtitle box) so it always sits next to the last
   letter — on a wide/centered box with short text, a box-edge border ends up
   stranded far from the text instead of trailing it. */
.type-caret{
  display:inline-block; width:2px; height:1em; margin-left:3px; vertical-align:-0.15em;
  background: var(--accent); animation: caret-blink 1s step-end infinite;
}
@keyframes caret-blink{ 0%,100%{ opacity:1; } 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .type-caret{ animation: none; opacity: 1; } }
.hero__cta{ margin-top: 42px; display:flex; gap: 18px; justify-content:center; flex-wrap:wrap; }

.btn{
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em;
  padding: 16px 30px; border-radius: 999px; position:relative; overflow:hidden;
  transition: transform .25s var(--ease);
}
.btn--primary{ background: var(--accent); color:#fff; font-weight:700; }
.btn--ghost{ border: 1px solid var(--line); }
.btn:hover{ transform: translateY(-3px); }

/* -------------------------------- marquee -------------------------------- */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; padding: 14px 0; background: rgba(17,17,19,0.7); }
.marquee__track{
  display:flex; width: max-content; will-change: transform;
  animation: marquee-scroll 22s linear infinite;
}
.marquee__track span{
  font-family: var(--mono); font-size: 1rem; letter-spacing: 0.05em; color: var(--fg-dim); white-space:nowrap; padding-right: 8px;
}
@keyframes marquee-scroll{ from{ transform: translateX(0); } to{ transform: translateX(calc(-1 * var(--marquee-w, 50%))); } }

/* ---------------------------------- work ---------------------------------- */
/* anchor nav targets these sections directly; without scroll-margin-top the fixed
   .nav (76px) lands on top of the section heading and first row of content. */
.work{ padding: 140px 24px 100px; max-width: 1400px; margin:0 auto; scroll-margin-top: 90px; }
.section-head{ max-width: 640px; margin: 0 auto 60px; text-align:center; }
.section-head h2{ font-size: clamp(2.2rem,5vw,3.6rem); }
.section-head__sub{ margin-top:14px; color: var(--fg-dim); }

.filmstrip{ position:relative; padding: 28px 0; }
.filmstrip::before,.filmstrip::after{
  content:''; display:block; height: 14px; margin-bottom: 18px;
  background-image: radial-gradient(circle, var(--line) 3px, transparent 3.5px);
  background-size: 26px 14px; background-repeat: repeat-x;
}
.filmstrip::after{ margin-bottom:0; margin-top:18px; }
.filmstrip__track{
  display:flex; gap: 20px; overflow-x:auto; scroll-snap-type: x proximity; padding-bottom: 10px;
  scrollbar-width: thin; scrollbar-color: var(--accent) transparent;
}
.reel{ flex: 0 0 220px; scroll-snap-align:start; }
.reel__ghost{
  aspect-ratio: 9/16; border: 1px dashed var(--line); border-radius: 14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background: linear-gradient(160deg, var(--bg-alt), #0a0a0b);
  transition: border-color .3s, transform .4s var(--ease);
  position:relative; overflow:hidden;
}
.reel:nth-child(odd) .reel__ghost{ background: linear-gradient(200deg, #131311, #0a0a0b); }
.reel__ghost:hover{ border-color: var(--accent); transform: translateY(-8px) scale(1.02); }
.reel__play{
  width: 46px; height:46px; border-radius:50%; border:1px solid var(--fg-dim);
  display:flex; align-items:center; justify-content:center; font-size:0.8rem; color: var(--fg-dim);
  transition: color .3s, border-color .3s, transform .3s var(--ease);
}
.reel__ghost:hover .reel__play{ color: var(--accent); border-color: var(--accent); transform: scale(1.15); }
.reel__add{ font-family: var(--mono); font-size:0.68rem; letter-spacing:0.08em; color: var(--fg-dim); }
.reel__cap{ font-family: var(--mono); font-size:0.7rem; color: var(--fg-dim); margin-top:10px; text-align:center; }
.filmstrip__hint{ text-align:center; font-family: var(--mono); font-size:0.7rem; color: var(--fg-dim); margin-top: 18px; letter-spacing:0.08em; }

/* ---------------------------------- focus --------------------------------- */
.focus{
  padding: 100px 24px 140px; max-width: 1300px; margin:0 auto;
  display:grid; grid-template-columns: 300px 1fr; gap: 80px; align-items:center;
  scroll-margin-top: 90px;
}
@media (max-width: 860px){ .focus{ grid-template-columns:1fr; gap: 56px; } }

.phone{
  width: 260px; margin: 0 auto; aspect-ratio: 9/19; border-radius: 34px;
  border: 6px solid #1c1c1e; background:#000; position:relative; overflow:hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}
.phone__notch{ position:absolute; top:0; left:50%; transform: translateX(-50%); width: 90px; height: 18px; background:#1c1c1e; border-radius: 0 0 12px 12px; z-index:3; }
.phone__screen{
  position:absolute; inset:0; background: linear-gradient(160deg,#0d1533,#0a0a0b 60%);
  display:flex; align-items:center; justify-content:center;
}
.phone__photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit: cover;
  filter: grayscale(0.15) contrast(1.05);
}
.phone__scanline{
  position:absolute; left:0; right:0; height: 40%; top:-40%;
  background: linear-gradient(180deg, transparent, rgba(0,73,255,0.18), transparent);
  animation: scan 3.5s linear infinite;
}
@keyframes scan{ to{ top: 100%; } }
.phone__icons{
  position:absolute; right: 10px; bottom: 90px; display:flex; flex-direction:column; gap: 18px; align-items:center;
  font-size: 1.2rem;
}
.phone__icons span{ position:relative; transition: transform .25s var(--ease); }
.phone__icons span:hover{ transform: scale(1.25); color: var(--accent); }
.phone__icons em{
  position:absolute; right: 30px; top:2px; font-style:normal; font-family: var(--mono); font-size:0.55rem;
  color: var(--fg-dim); opacity:0; white-space:nowrap; transition: opacity .2s;
}
.phone__icons span:hover em{ opacity:1; }
.phone__caption{
  position:absolute; left:14px; right: 54px; bottom: 18px; font-size: 0.72rem;
}
.phone__caption strong{ font-family: var(--mono); }
.phone__caption p{ margin-top:6px; color: rgba(244,244,239,0.75); line-height:1.4; }
.phone__caption span{ color: var(--accent); font-family: var(--mono); font-size:0.62rem; }

.focus__text h2{ font-size: clamp(2.2rem,5vw,3.4rem); margin-bottom: 22px; }
.focus__text p{ color: var(--fg-dim); line-height:1.7; margin-bottom: 16px; max-width: 60ch; }
.focus__text strong{ color: var(--fg); }

.chips{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 28px; }
.chip{
  font-family: var(--mono); font-size:0.72rem; letter-spacing:0.05em; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--fg-dim);
  transition: border-color .3s, color .3s, transform .3s var(--ease);
}
.chip:hover{ border-color: var(--accent); color: var(--accent); transform: translateY(-3px); }

/* --------------------------------- contact -------------------------------- */
.contact{
  position: relative; padding: 140px 24px 120px; text-align:center; overflow:hidden;
  background: rgba(17,17,19,0.5); backdrop-filter: blur(3px); border-top:1px solid var(--line);
  scroll-margin-top: 90px;
}
.contact h2{ font-size: clamp(2.4rem,6vw,4.2rem); margin: 10px 0 14px; }
.contact__sub{ color: var(--fg-dim); max-width: 480px; margin: 0 auto; }

.flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:5; }
.flash.is-flashing{ animation: flash .5s ease-out; }
@keyframes flash{ 0%{ opacity:0.9; } 100%{ opacity:0; } }

.shutter{
  position:relative; display:flex; align-items:center; justify-content:center;
  width: 170px; height:170px; margin: 56px auto; border-radius:50%;
}
.shutter__ring{ position:absolute; inset:0; border-radius:50%; border: 1px solid var(--line); }
.shutter__ring--1{ inset: -18px; }
.shutter__ring--2{ inset: -36px; opacity:0.5; }
.shutter:hover .shutter__ring--1{ border-color: var(--accent); transform: scale(1.05); }
.shutter:hover .shutter__ring--2{ border-color: var(--accent); transform: scale(1.1); }
.shutter__ring{ transition: transform .4s var(--ease), border-color .4s; }

/* lens focus-ring detail: a dial of tick marks (like an aperture/focus scale) that
   spins slowly on hover, echoing the "FOCUSING…" HUD readout in the hero. */
.shutter__ticks{
  position:absolute; width:242px; height:242px; top:50%; left:50%; margin:-121px 0 0 -121px;
  pointer-events:none; transition: opacity .3s;
}
.shutter__ticks span{
  position:absolute; top:0; left:50%; width:2px; height:10px; margin-left:-1px;
  background: var(--line); transform-origin: 1px 121px; transition: background .4s;
}
.shutter__ticks span:nth-child(1){ transform: rotate(0deg); }
.shutter__ticks span:nth-child(2){ transform: rotate(30deg); }
.shutter__ticks span:nth-child(3){ transform: rotate(60deg); }
.shutter__ticks span:nth-child(4){ transform: rotate(90deg); }
.shutter__ticks span:nth-child(5){ transform: rotate(120deg); }
.shutter__ticks span:nth-child(6){ transform: rotate(150deg); }
.shutter__ticks span:nth-child(7){ transform: rotate(180deg); }
.shutter__ticks span:nth-child(8){ transform: rotate(210deg); }
.shutter__ticks span:nth-child(9){ transform: rotate(240deg); }
.shutter__ticks span:nth-child(10){ transform: rotate(270deg); }
.shutter__ticks span:nth-child(11){ transform: rotate(300deg); }
.shutter__ticks span:nth-child(12){ transform: rotate(330deg); }
.shutter:hover .shutter__ticks{ animation: ticks-spin 4s linear infinite; }
.shutter:hover .shutter__ticks span{ background: var(--accent); }
@keyframes ticks-spin{ to{ transform: rotate(360deg); } }

.shutter__core{
  width:100%; height:100%; border-radius:50%; background: var(--accent); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  font-family: var(--mono); font-weight:700;
  letter-spacing:0.12em; font-size:1.7rem; transition: transform .2s var(--ease);
}
.shutter__core em{
  font-style:normal; font-weight:400; font-size:0.6rem; letter-spacing:0.05em; opacity:0.75;
}
.shutter:active .shutter__core{ transform: scale(0.9); }

.contact__links{ display:flex; flex-direction:column; gap: 14px; align-items:center; margin-top: 20px; }
.contact__links a{ font-family: var(--mono); font-size:0.85rem; display:flex; align-items:center; gap:10px; color: var(--fg-dim); transition: color .3s; }
.contact__links a:hover{ color: var(--accent); }
.contact__icon{ display:inline-block; width:22px; text-align:center; }

/* --------------------------------- footer --------------------------------- */
.footer{ padding: 40px 24px 50px; text-align:center; color: var(--fg-dim); font-family: var(--mono); font-size:0.75rem; }
.footer__leader{ display:flex; justify-content:center; gap: 14px; margin-bottom: 20px; opacity:0.4; }
.footer__leader span{ font-size:0.9rem; }
.footer__top{ display:block; margin: 18px auto 0; letter-spacing:0.1em; color: var(--fg-dim); transition: color .3s, transform .3s var(--ease); }
.footer__top:hover{ color: var(--accent); transform: translateY(-2px); }

/* ------------------------------- reveal anim ------------------------------ */
.reveal{ opacity:0; transform: translateY(40px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* letter stagger for hero title */
.split-char{ display:inline-block; opacity:0; transform: translateY(60%) rotate(4deg); animation: char-in .7s var(--ease) forwards; }
@keyframes char-in{ to{ opacity:1; transform: translateY(0) rotate(0); } }

/* -------------------------------- responsive ------------------------------ */
@media (max-width: 860px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .hero__hud--tr{ display:none; }
}

/* lighter GPU load on phones: big blurred nebula layers are the main jank source */
@media (max-width: 700px){
  .nebula span{ filter: blur(50px); }
  .nebula span:nth-child(4){ display:none; }
  .light-leak{ opacity: 0.3; }
}

/* ------------------------------ light leak sweep --------------------------- */
.light-leak{
  position: fixed; inset: -20%; z-index: 150; pointer-events:none;
  mix-blend-mode: screen; opacity: 0.5;
  background: radial-gradient(ellipse 40% 60% at 30% 50%, rgba(0,73,255,0.2), transparent 60%),
              radial-gradient(ellipse 30% 50% at 70% 50%, rgba(255,59,48,0.10), transparent 60%);
  animation: light-leak-sweep 14s ease-in-out infinite;
}
@keyframes light-leak-sweep{
  0%{ transform: translate(-30%, -10%) rotate(-8deg); }
  50%{ transform: translate(20%, 15%) rotate(6deg); }
  100%{ transform: translate(-30%, -10%) rotate(-8deg); }
}

/* --------------------------------- glitch ---------------------------------- */
.glitch{ animation: glitch-shake .22s linear; }
.glitch::before,.glitch::after{ content: attr(data-text); }
.hero__title.glitch{ position: relative; }
.hero__title.glitch span.split-char{ animation: none; opacity:1; transform:none; }
.hero__title.glitch{ text-shadow: 2px 0 var(--rec), -2px 0 var(--accent); }
@keyframes glitch-shake{
  0%{ transform: translate(0,0); }
  20%{ transform: translate(-2px,1px); text-shadow: 2px 0 var(--rec), -2px 0 var(--accent); }
  40%{ transform: translate(2px,-1px); text-shadow: -2px 0 var(--rec), 2px 0 var(--accent); }
  60%{ transform: translate(-1px,0); text-shadow: 1px 0 var(--rec), -1px 0 var(--accent); }
  100%{ transform: translate(0,0); text-shadow:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}