/* ── reset + tokens ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:     #0a0a0e;
  --white:  #e0e0de;
  --acid:   #ffe600;
  --heat:   #ff371e;
  --dim:    #3a3a50;
  --dim2:   #555570;
  --surf:   #0e0e14;
  --border: #1e1e2a;

  --font-mono:    'Geist Mono', monospace;
  --font-jb:      'JetBrains Mono', monospace;
  --font-display: 'Big Shoulders Display', sans-serif;
  --font-serif:   'Crimson Pro', Georgia, serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* grid overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ── keyframes ───────────────────────────────────────────────────────────── */

@keyframes fade-in { from { opacity: 0 } to { opacity: 1 } }

@keyframes fade-up {
  from { opacity: 0; transform: translate3d(0, 10px, 0) }
  to   { opacity: 1; transform: translate3d(0, 0, 0) }
}

/* mark K's snap in from each side with a blur-to-sharp cinematic focus */
@keyframes mark-left {
  from { opacity: 0; transform: translate3d(-44px, 0, 0); filter: blur(8px) }
  to   { opacity: 1; transform: translate3d(0, 0, 0);     filter: blur(0) }
}
@keyframes mark-right {
  from { opacity: 0; transform: scaleX(-1) translate3d(-44px, 0, 0); filter: blur(8px) }
  to   { opacity: 1; transform: scaleX(-1) translate3d(0, 0, 0);     filter: blur(0) }
}

/* plus locks in precisely — no overshoot, just a clean snap */
@keyframes plus-land {
  from { opacity: 0; transform: translate(-50%,-50%) scale(1.4); filter: blur(4px) }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1);   filter: blur(0) }
}

@keyframes heat-pulse {
  0%,100% { opacity: .72 }
  50%      { opacity: 1; text-shadow: 0 0 20px var(--heat), 0 0 50px rgba(255,55,30,.22) }
}

@keyframes glow-breathe {
  0%,100% { opacity: .55; transform: translate(-50%,-50%) scale(.93) }
  50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.07) }
}

/* realistic neon flicker — stable for most of the cycle, double-blink once */
@keyframes plus-flicker {
  0%, 88%  { opacity: 1; color: var(--acid) }
  89%      { opacity: .06 }
  90%      { opacity: 1 }
  92%      { opacity: .32 }
  94%      { opacity: 1; color: var(--acid) }
  100%     { opacity: 1; color: var(--acid) }
}

@keyframes ticker-scroll {
  from { transform: translateX(0) }
  to   { transform: translateX(-50%) }
}

@keyframes arrow-drift {
  0%,100% { transform: translateY(0) }
  50%      { transform: translateY(4px) }
}

@keyframes scan {
  from { transform: translateY(-100%) }
  to   { transform: translateY(400%) }
}

@keyframes slide-in {
  from { opacity: 0; transform: translate3d(-8px, 0, 0) }
  to   { opacity: 1; transform: translate3d(0, 0, 0) }
}

/* urroster bracket idle pulse */
@keyframes ur-bracket-breathe {
  0%,100% { opacity: .42 }
  50%      { opacity: .68 }
}


/* ── HERO ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 32px 140px;
  z-index: 1;
  overflow: hidden;
}

/* ambient acid glow — breathes behind the mark */
.hero-glow {
  position: absolute;
  width: 80vw;
  height: 80vw;
  max-width: 960px;
  max-height: 960px;
  top: 50%;
  left: 50%;
  background: radial-gradient(circle, rgba(255,230,0,.07) 0%, transparent 62%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: glow-breathe 9s ease-in-out infinite;
}

/* registration corner marks */
.reg {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--dim);
  border-style: solid;
  opacity: .5;
  z-index: 2;
  animation: fade-in .5s ease both;
}
.reg--tl { top: 32px;    left: 32px;    border-width: 1px 0 0 1px; animation-delay: 1.42s }
.reg--tr { top: 32px;    right: 32px;   border-width: 1px 1px 0 0; animation-delay: 1.52s }
.reg--bl { bottom: 32px; left: 32px;    border-width: 0 0 1px 1px; animation-delay: 1.48s }
.reg--br { bottom: 32px; right: 32px;   border-width: 0 1px 1px 0; animation-delay: 1.58s }

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}


/* ── MIRROR MARK ─────────────────────────────────────────────────────────── */
.mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.mark-k {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(120px, 28vw, 420px);
  line-height: .82;
  display: block;
  flex-shrink: 0;
}

.mark-k--left {
  color: var(--white);
  margin-right: -0.21em;
  animation: mark-left .65s cubic-bezier(.22,1,.36,1) 0s both;
}

.mark-k--right {
  color: var(--acid);
  display: block;
  margin-left: -0.21em;
  animation: mark-right .65s cubic-bezier(.22,1,.36,1) .12s both;
}

/* heat + at collision */
.mark-plus {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-jb);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 56px);
  color: var(--heat);
  line-height: 1;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  animation:
    plus-land  .18s cubic-bezier(.22,1,.36,1) .64s both,
    heat-pulse 4s ease-in-out 1.4s infinite;
}

/* small mark variant for shirtcuterie card */
.mark--sm .mark-k        { font-size: 36px; margin-right: -0.21em }
.mark--sm .mark-k--right { margin-left: -0.21em }
.mark--sm .mark-plus     { font-size: 12px; animation: none; opacity: 1 }


/* ── HERO TEXT ───────────────────────────────────────────────────────────── */
.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.wordmark {
  font-size: clamp(28px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  animation: fade-up .5s cubic-bezier(.22,1,.36,1) .82s both;
}
.wm-ktrl  { font-family: var(--font-mono); color: var(--white) }
.wm-plus  {
  font-family: var(--font-jb); color: var(--acid);
  margin: 0 3px; display: inline-block;
  animation: plus-flicker 2.4s ease 1.1s both;
}
.wm-khaos { font-family: var(--font-display); color: var(--heat) }

.hero-tagline {
  font-family: var(--font-jb);
  font-size: clamp(12px, 1.4vw, 16px);
  letter-spacing: .08em;
  color: var(--dim2);
  opacity: 0;
  animation: fade-up .5s cubic-bezier(.22,1,.36,1) .96s both;
}

/* sub — absolute bottom of hero */
.hero-sub {
  position: absolute;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-jb);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim2);
  white-space: nowrap;
  z-index: 2;
  opacity: 0;
  animation: fade-in .5s ease 1.12s both;
}

.scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--dim);
  text-decoration: none;
  z-index: 2;
  opacity: 0;
  animation: fade-in .5s ease 1.3s both;
}
.scroll-hint svg { animation: arrow-drift 2.8s ease-in-out 2.2s infinite }
.scroll-hint:hover { color: var(--dim2) }


/* ── TICKER ──────────────────────────────────────────────────────────────── */
.ticker {
  position: relative;
  z-index: 1;
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.ticker-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: ticker-scroll 28s linear infinite;
  will-change: transform;
}

.ticker-item {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--dim2);
  padding: 0 40px;
}

.ticker-sep {
  color: var(--acid);
  font-size: 16px;
  flex-shrink: 0;
  opacity: .6;
}


/* ── ABOUT ───────────────────────────────────────────────────────────────── */
.about {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 72px 32px 0;
}

.about-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 640px;
}

.about-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.6;
  color: var(--white);
  opacity: 0;
  animation: fade-up .6s ease 1.4s both;
}

.about-rule {
  font-family: var(--font-jb);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acid);
  opacity: 0;
  animation: fade-up .5s ease 1.6s both;
}


/* ── PROJECTS ────────────────────────────────────────────────────────────── */
.projects {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px 32px 160px;
}

.section-label {
  font-family: var(--font-jb);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim2);
  margin-bottom: 28px;
  opacity: 0;
  animation: slide-in .5s cubic-bezier(.22,1,.36,1) 1.6s both;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}


/* ── CARD ────────────────────────────────────────────────────────────────── */
.card {
  position: relative;
  background: var(--surf);
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  animation: fade-up .6s ease both;
  display: block;
}

.project-grid .card:nth-child(1) { animation-delay: 1.75s }
.project-grid .card:nth-child(2) { animation-delay: 1.9s }
.project-grid .card { border-radius: 12px }

.card-inner {
  position: relative;
  z-index: 2;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  height: 100%;
}

/* ghost mirror mark in card background */
.card-bg-mark {
  position: absolute;
  right: -20px;
  bottom: -40px;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
  opacity: .04;
  transition: opacity .3s ease;
}
.cbm-k {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 260px;
  line-height: .82;
  color: var(--white);
}
.cbm-k--left  { margin-right: -50px }
.cbm-k--right { transform: scaleX(-1); color: var(--acid) }

.card--live { cursor: pointer; transition: background .2s ease }
.card--live:hover { background: #111118 }
.card--live:hover .card-bg-mark { opacity: .07 }
.card--live:hover .card-arrow { color: var(--acid); transform: translate(3px,-3px) }
.card--live:hover .card-accent { opacity: 1 }

/* scan line */
.card--live::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(255,230,0,.04) 50%, transparent 100%);
  height: 40%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 3;
}
.card--live:hover::after {
  opacity: 1;
  animation: scan 1.2s ease-in-out;
}

/* top accent line */
.card-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--heat), var(--acid));
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 4;
}

@keyframes fade-up-muted {
  from { opacity: 0;    transform: translateY(16px) }
  to   { opacity: 0.42; transform: translateY(0) }
}
.card--soon { animation: fade-up-muted .6s cubic-bezier(.22,1,.36,1) 1.9s both; cursor: default }

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.card-icon { width: 56px; height: 56px; border-radius: 12px; overflow: hidden; flex-shrink: 0 }
.card-icon--urroster { background: none }

.card-pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end }
.pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: 4px;
}
.pill--acid { background: var(--acid); color: var(--bg) }
.pill--dim  { background: #1a1a24;     color: var(--dim2) }
.pill--soon { background: #1a1a24;     color: var(--dim2); letter-spacing: .16em }

.card-body { flex: 1; display: flex; flex-direction: column; gap: 12px }

.card-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(34px, 4.5vw, 52px);
  line-height: .9;
  color: var(--white);
  letter-spacing: -.01em;
}
.card-name--muted { color: var(--dim2) }

.card-desc {
  font-family: var(--font-jb);
  font-size: 13px;
  line-height: 1.7;
  color: var(--dim2);
}
.card-desc--muted { opacity: .7 }

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.card-url {
  font-family: var(--font-jb);
  font-size: 12px;
  color: var(--acid);
  letter-spacing: .04em;
}
.card-url--muted { color: var(--dim2) }

.card-arrow {
  color: var(--dim2);
  flex-shrink: 0;
  transition: color .2s ease, transform .2s ease;
}

.card-soon-hint {
  font-family: var(--font-jb);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--dim);
  text-transform: uppercase;
}


/* ── CONTACT ─────────────────────────────────────────────────────────────── */
.contact {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 80px 32px 100px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-email {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(32px, 5vw, 72px);
  color: var(--white);
  text-decoration: none;
  line-height: 1;
  letter-spacing: -.02em;
  transition: color .2s ease;
}
.contact-email:hover { color: var(--acid) }

.contact-sub {
  font-family: var(--font-jb);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--dim2);
}


/* ── URROSTER CARD ───────────────────────────────────────────────────────── */
.card--urroster {
  background: linear-gradient(160deg, #0f0e1a 0%, #0a0a12 100%);
}
.card--urroster.card--live:hover {
  background: linear-gradient(160deg, #131224 0%, #0c0b16 100%);
}

/* rose ambient glow replaces default yellow scan line */
.card--urroster.card--live::after {
  background: linear-gradient(to bottom, transparent 0%, rgba(238,79,118,.06) 50%, transparent 100%);
}

/* hover arrow → urroster accent */
.card--urroster.card--live:hover .card-arrow { color: #ee4f76 }

/* scanning corner brackets — urroster HUD language */
.scan {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: #ee4f76;
  border-style: solid;
  border-radius: 1px;
  opacity: .45;
  z-index: 5;
  pointer-events: none;
  transition: opacity .3s ease, box-shadow .3s ease;
}
.scan--tl { top: 14px;    left: 14px;    border-width: 1.5px 0 0 1.5px; box-shadow: -2px -2px 12px rgba(238,79,118,.25); animation: ur-bracket-breathe 3.2s ease-in-out infinite }
.scan--tr { top: 14px;    right: 14px;   border-width: 1.5px 1.5px 0 0; box-shadow:  2px -2px 12px rgba(238,79,118,.25); animation: ur-bracket-breathe 3.2s ease-in-out .4s infinite }
.scan--bl { bottom: 14px; left: 14px;    border-width: 0 0 1.5px 1.5px; box-shadow: -2px  2px 12px rgba(238,79,118,.25); animation: ur-bracket-breathe 3.2s ease-in-out .2s infinite }
.scan--br { bottom: 14px; right: 14px;   border-width: 0 1.5px 1.5px 0; box-shadow:  2px  2px 12px rgba(238,79,118,.25); animation: ur-bracket-breathe 3.2s ease-in-out .6s infinite }

.card--urroster:hover .scan     { opacity: 1; animation-play-state: paused }
.card--urroster:hover .scan--tl { box-shadow: -2px -2px 18px rgba(238,79,118,.55) }
.card--urroster:hover .scan--tr { box-shadow:  2px -2px 18px rgba(238,79,118,.55) }
.card--urroster:hover .scan--bl { box-shadow: -2px  2px 18px rgba(238,79,118,.55) }
.card--urroster:hover .scan--br { box-shadow:  2px  2px 18px rgba(238,79,118,.55) }

/* icon with ambient glow */
.ur-icon-wrap {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
}
.ur-icon-glow {
  position: absolute;
  inset: -16px;
  background: radial-gradient(circle, rgba(238,79,118,.22) 0%, transparent 68%);
  filter: blur(10px);
  border-radius: 50%;
  pointer-events: none;
  transition: opacity .3s ease;
  opacity: .7;
}
.card--urroster:hover .ur-icon-glow { opacity: 1 }

/* urroster token overrides */
.ur-icon { border-radius: 18px; display: block; position: relative; z-index: 1 }
.ur-name { font-family: 'Instrument Sans', var(--font-mono); font-weight: 900; letter-spacing: -.03em }
.ur-desc { color: rgba(255,255,255,.4); font-style: normal; font-family: var(--font-mono); font-size: 13px; line-height: 1.7 }
.ur-foot { border-top-color: rgba(238,79,118,.12) }
.ur-url  { color: #ee4f76 }
.pill--ur { background: rgba(238,79,118,.12); color: #ee4f76; border: 1px solid rgba(238,79,118,.28) }


/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  padding: 64px 48px 48px;
}

.footer-top {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 48px;
}

.footer-wordmark {
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.fw-ktrl  { font-family: var(--font-mono);    color: var(--white) }
.fw-plus  { font-family: var(--font-jb);      color: var(--acid); margin: 0 2px }
.fw-khaos { font-family: var(--font-display); color: var(--heat) }

.footer-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(14px, 1.6vw, 20px);
  color: var(--dim2);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  font-family: var(--font-jb);
  font-size: 12px;
  color: var(--dim2);
}

.footer-contact { display: flex; align-items: center; gap: 24px }

.footer-link {
  color: var(--dim2);
  text-decoration: none;
  letter-spacing: .04em;
  font-size: 12px;
  transition: color .2s ease;
}
.footer-link:hover { color: var(--acid) }
.footer-social { display: flex; align-items: center }


/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .project-grid { gap: 2px; grid-template-columns: 1fr }

  .card-bg-mark { display: none }

  .hero { padding: 80px 20px 120px }
  .projects { padding: 60px 20px 100px }

  .reg { display: none }

  .footer { padding: 48px 24px 36px }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px }
}

@media (max-width: 480px) {
  .hero-sub { font-size: 10px; letter-spacing: .15em }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important }
}