/* ==================================================
   V7 — Final polish, kinetic typography, radar in hero
   Loaded LAST. Fixes cursor lag, repositions radar.
   ================================================== */

/* ---------- Fix cursor lag ---------- */
/* Remove body perspective which breaks fixed positioning */
body { perspective: none !important; }
.studio-main { transform-style: flat !important; }

/* Re-add perspective only on cards container, not body */
.skills-grid, .projects-grid, .pub-grid, .timeline, .edu-grid, .lang-grid {
  perspective: 1200px;
}

/* DISABLE custom cursor — use system cursor (more reliable, no lag) */
.cursor-dot, .cursor-ring { display: none !important; }
body, a, button, input, textarea, select, [role="button"] {
  cursor: auto !important;
}
a, button, .nav-link, [role="button"], .top-nav-link, .nav-icon, .side-icon,
.skill-card, .project-card, .pub-card, .timeline-card, .stat-card, .edu-card, .lang-card,
.hero-socials a, .footer-right a, .pill-btn, .fp-auth, .btn {
  cursor: pointer !important;
}
input, textarea { cursor: text !important; }

/* ---------- Hide noise overlay (causing perf issues + page artifacts) ---------- */
body::before { display: none !important; }

/* ---------- CLEAN PHOTO — remove ALL text overlays from photo ---------- */
.face-scan .status-overlay { display: none !important; }   /* top SCAN_ID/MODE/CONF strip */
.face-scan .stamp { display: none !important; }            /* big VERIFIED 100% stamp */
.profile-card .photo-meta-top { display: none !important; }
.profile-card .biometric-data { display: none !important; }
.profile-card .photo-plate { display: none !important; }

/* Reduce floating tags — only keep ONE prominent confirmation tag */
.face-scan .tag.t1 { display: none !important; }
.face-scan .tag.t2 { display: none !important; }
.face-scan .tag.t3 { display: none !important; }
.face-scan .tag.t4 { display: none !important; }
/* Keep t5 as the single status tag */
.face-scan .tag.t5 {
  bottom: auto !important;
  top: 50% !important;
  left: -28% !important;
  transform: translateY(-50%);
}
@media (max-width: 1024px) { .face-scan .tag.t5 { left: 0 !important; top: 4% !important; transform: none; } }

/* Keep dots/links/sweep/reticle — those are visual scan, not text */

/* ---------- RADAR + FINGERPRINT: stack next to each other under photo ---------- */
.hero { position: relative !important; }

/* Wrap fingerprint area: radar+fp in a flex row under the photo */
.profile-card { padding-bottom: 0 !important; margin-bottom: 11rem !important; }

/* Radar — place under the photo, beside the fingerprint button */
.hack-radar {
  position: absolute !important;
  bottom: -10.5rem !important;
  top: auto !important;
  left: 0 !important;
  right: auto !important;
  width: 100px !important;
  height: 100px !important;
  z-index: 30 !important;
}

/* Re-style fingerprint button: shift it next to the radar */
.fp-auth {
  bottom: -10rem !important;
  left: 110px !important;
  transform: none !important;
  right: auto !important;
}

/* Radar label */
.hack-radar .radar-label {
  bottom: -16px !important;
  font-size: .55rem !important;
  letter-spacing: .25em !important;
  color: var(--ink-soft) !important;
  font-weight: 500 !important;
}
.hack-radar .radar-label::before {
  content: '◉ ';
  color: var(--accent);
  animation: blink 1.4s infinite;
}

/* On smaller screens stack vertically */
@media (max-width: 1024px) {
  .profile-card { margin-bottom: 14rem !important; }
  .hack-radar {
    width: 88px !important; height: 88px !important;
    bottom: -8.5rem !important;
    left: 50% !important;
    transform: translateX(-100%) translateX(-12px);
  }
  .fp-auth {
    bottom: -8rem !important;
    left: 50% !important;
    transform: translateX(12px) !important;
  }
}
@media (max-width: 600px) {
  .profile-card { margin-bottom: 18rem !important; }
  .hack-radar {
    bottom: auto !important; top: calc(100% + 1rem) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .fp-auth {
    bottom: auto !important; top: calc(100% + 7rem) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}

/* ---------- Hide some heavy widgets to shorten the page feel ---------- */
.hex-stream { font-size: .55rem !important; opacity: .4; }
.hex-stream div:nth-child(n+12) { display: none; }   /* shorter stream */
.hack-feed { display: none !important; }            /* drop bottom-left feed */
.hack-coords {
  top: auto !important;
  bottom: 1.2rem !important;
  left: 1.2rem !important;
  font-size: .54rem !important;
  opacity: .5;
}

/* Terminal — make it smaller / more elegant */
.hack-terminal {
  width: 240px !important;
  top: 92px !important;
}
.hack-terminal .term-body {
  height: 100px !important;
  font-size: .55rem !important;
}

/* ==================================================
   KINETIC TYPOGRAPHY
   ================================================== */

/* Hero name reveals letter by letter with stagger */
.hero-title .gradient-text {
  display: block;
  overflow: hidden;
}
.hero-title .gradient-text > .kchar {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%) rotateX(-30deg);
  transition: opacity .9s cubic-bezier(.19,1,.22,1), transform 1s cubic-bezier(.19,1,.22,1);
}
.hero-title .gradient-text.kactive > .kchar {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}

/* "Hallo, ich bin" — slides in from left with reveal */
.hero-title [data-i18n="hero.hi"] {
  overflow: hidden; position: relative;
}
.hero-title [data-i18n="hero.hi"]::after {
  content: ''; position: absolute; inset: 0;
  background: var(--bg);
  transform-origin: right;
  animation: revealRight 1s .3s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes revealRight {
  0% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

/* Section titles — wipe up from below */
.section-title {
  overflow: hidden;
}
.section-title.kr-in > * { animation: kineticUp .9s cubic-bezier(.19,1,.22,1) forwards; }
.section-title > * {
  display: inline-block; opacity: 0;
  transform: translateY(80%);
}
@keyframes kineticUp {
  to { opacity: 1; transform: translateY(0); }
}
.section-title > *:nth-child(2) { animation-delay: .15s; }

/* Hero subtitle — typewriter cursor stays smooth */
.cursor {
  display: inline-block;
  font-weight: 200;
  margin-left: 2px;
  animation: cursorBlink 1s steps(2) infinite;
}
@keyframes cursorBlink { 50% { opacity: 0; } }

/* Marquee — rotate keywords with kinetic burst */
.marquee {
  position: relative;
  overflow: hidden;
}
.marquee-track { animation-duration: 40s !important; }

/* Add a giant rotating accent word floating behind hero — KINETIC */
.hero::after {
  content: 'IDENTITY';
  position: absolute;
  bottom: 5%;
  right: -8%;
  font-family: 'Inter Tight', sans-serif;
  font-size: clamp(8rem, 22vw, 22rem);
  font-weight: 200;
  letter-spacing: -.07em;
  color: var(--ink);
  opacity: .025;
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
  animation: hugeShift 14s ease-in-out infinite;
}
[data-theme="light"] .hero::after { opacity: .04; }
@keyframes hugeShift {
  0%,100% { transform: translateX(0) rotate(0deg); }
  50%     { transform: translateX(-6%) rotate(-1deg); }
}

/* Hero CTA buttons — kinetic underline / arrow trail on hover */
.hero-actions .btn { position: relative; overflow: hidden; }
.hero-actions .btn span { transition: transform .4s cubic-bezier(.65,0,.35,1); }
.hero-actions .btn:hover span { transform: translateX(2px); }
.hero-actions .btn::before {
  content: '→'; position: absolute; right: 1.2rem; top: 50%;
  transform: translateY(-50%) translateX(-30px);
  opacity: 0;
  transition: all .4s cubic-bezier(.65,0,.35,1);
  font-size: .9rem;
}
.hero-actions .btn:hover::before {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

/* Stat numbers — count-up scale animation when visible */
.stat-number {
  display: inline-block;
  transition: transform .6s cubic-bezier(.19,1,.22,1);
}
.stat-card:hover .stat-number {
  transform: translateY(-4px) scale(1.04);
}

/* Skill cards — left edge bar fills on hover */
.skill-card { position: relative; overflow: hidden; }
.skill-card::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--ink);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .5s cubic-bezier(.19,1,.22,1);
}
.skill-card:hover::after { transform: scaleY(1); transform-origin: top; }

/* Project / Pub cards — shimmer line on hover */
.project-card::before, .pub-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink), transparent);
  transform: translateX(-100%);
  transition: transform .8s cubic-bezier(.65,0,.35,1);
  pointer-events: none;
  z-index: 2;
}
.project-card:hover::before, .pub-card:hover::before {
  transform: translateX(100%);
}

/* Timeline dot grow on hover */
.timeline-item:hover .timeline-dot {
  transform: scale(1.4);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.timeline-dot { transition: transform .3s; }

/* Rolling text — for sections that have a rotating list */
.k-roll {
  display: inline-block; vertical-align: bottom;
  overflow: hidden;
  height: 1.2em;
  position: relative;
}
.k-roll-list {
  display: inline-flex; flex-direction: column;
  animation: kRoll 8s steps(4) infinite;
}
@keyframes kRoll {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-1.2em); }
  50%  { transform: translateY(-2.4em); }
  75%  { transform: translateY(-3.6em); }
  100% { transform: translateY(0); }
}

/* ---------- Footer kinetic ---------- */
.footer-left .logo-mark { transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.footer-left:hover .logo-mark { transform: rotate(-8deg) scale(1.05); }

/* ---------- Hero socials micro-bounce ---------- */
.hero-socials a { transition: transform .35s cubic-bezier(.34,1.56,.64,1), color .25s !important; }
.hero-socials a:hover { transform: translateY(-3px) !important; }

/* ---------- Smooth section reveals ---------- */
section[id] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(.19,1,.22,1), transform 1s cubic-bezier(.19,1,.22,1);
}
section[id].in-view {
  opacity: 1;
  transform: translateY(0);
}
section#home { opacity: 1; transform: none; }   /* hero always visible */

/* ---------- Side-effect: ensure no horizontal overflow ---------- */
html, body { overflow-x: hidden; }

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero::after { display: none; }
  .hero-title .gradient-text > .kchar,
  .section-title > * { opacity: 1; transform: none; }
  section[id] { opacity: 1; transform: none; }
}