/* ══════════════════════════════════════════
   TOKENS
══════════════════════════════════════════ */
:root {
  --bg:     #030B18;
  --bg2:    #060F1E;
  --card:   #0A1628;
  --blue:   #2563EB;
  --bright: #60A5FA;
  --azure:  #93C5FD;
  --txt:    #EDF2FF;
  --txt2:   #7EA7D4;
  --muted:  #334D6E;
  --border: rgba(37,99,235,.14);
  --bh:     rgba(96,165,250,.4);
  --glow:   rgba(37,99,235,.35);
  --glows:  rgba(37,99,235,.07);
  --navbg:  rgba(3,11,24,.88);
  --scan:   rgba(0,0,0,.03);
}
[data-theme="light"] {
  --bg:     #EDF2FF;
  --bg2:    #E4ECFF;
  --card:   #FFFFFF;
  --txt:    #05101E;
  --txt2:   #1D4ED8;
  --muted:  #6B8CB5;
  --border: rgba(37,99,235,.12);
  --bh:     rgba(37,99,235,.4);
  --glow:   rgba(37,99,235,.18);
  --glows:  rgba(37,99,235,.05);
  --navbg:  rgba(237,242,255,.9);
  --scan:   rgba(255,255,255,.04);
}

/* ══════════════════════════════════════════
   RESET
══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Barlow', 'Cairo', sans-serif;
  background: var(--bg); color: var(--txt);
  line-height: 1.7; overflow-x: hidden;
  cursor: none;
  transition: background .4s, color .4s;
}
html[data-lang="ar"] body { font-family: 'Cairo', 'Barlow', sans-serif; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 2px; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, var(--scan) 0, var(--scan) 1px, transparent 1px, transparent 3px);
}
a, button { cursor: none; }

/* ══════════════════════════════════════════
   CURSOR
══════════════════════════════════════════ */
.cur-dot {
  position: fixed; width: 8px; height: 8px;
  background: var(--bright); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cur-ring {
  position: fixed; width: 36px; height: 36px;
  border: 1.5px solid rgba(96,165,250,.5); border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width .2s, height .2s, border-color .2s;
}
body.cur-hov .cur-dot  { transform: translate(-50%, -50%) scale(2.5); }
body.cur-hov .cur-ring { width: 52px; height: 52px; border-color: var(--bright); }

/* ══════════════════════════════════════════
   BACKGROUND
══════════════════════════════════════════ */
.noise {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}
[data-theme="light"] .noise { opacity: .015; }
.orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb  { position: absolute; border-radius: 50%; filter: blur(110px); }
.orb1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(29,78,216,.2) 0%, transparent 70%); top: -200px; right: -100px; animation: oaf 11s ease-in-out infinite; }
.orb2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(96,165,250,.12) 0%, transparent 70%); bottom: 10%; left: -120px; animation: oaf 9s ease-in-out 2s infinite reverse; }
.orb3 { width: 280px; height: 280px; background: radial-gradient(circle, rgba(37,99,235,.15) 0%, transparent 70%); top: 60%; right: 10%; animation: oaf 7s ease-in-out 5s infinite; }
@keyframes oaf { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-35px) scale(1.06); } }
@media (max-width: 768px) {
  .orb  { filter: blur(70px) !important; }
  .orb1 { width: 280px; height: 280px; }
  .orb2 { width: 200px; height: 200px; }
  .orb3 { display: none; }
}

/* ══════════════════════════════════════════
   NAV
══════════════════════════════════════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  padding: 1.2rem 2.5rem;
  background: var(--navbg);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  transition: padding .3s, box-shadow .3s;
}
nav.sc { padding: .7rem 2.5rem; box-shadow: 0 8px 32px rgba(0,0,0,.4); }
.ni { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.7rem; letter-spacing: .08em; color: var(--bright); text-decoration: none; }
html[data-lang="ar"] .logo { font-family: 'Cairo', sans-serif; font-weight: 900; font-size: 1.35rem; letter-spacing: 0; }
.nl { display: flex; align-items: center; gap: .2rem; list-style: none; }
.nl a { padding: .38rem .9rem; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: .82rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; transition: all .2s; }
html[data-lang="ar"] .nl a { letter-spacing: 0; text-transform: none; font-size: .88rem; }
.nl a:hover, .nl a.act { color: var(--txt); background: var(--glows); }
.nb { display: flex; align-items: center; gap: .5rem; }
.nbtn {
  display: flex; align-items: center; gap: .35rem; padding: .38rem .85rem;
  background: transparent; border: 1px solid var(--border); border-radius: 100px;
  color: var(--txt2); font-family: 'JetBrains Mono', monospace;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; cursor: none; transition: all .2s;
}
.nbtn:hover { border-color: var(--bright); color: var(--bright); background: var(--glows); }
.nbtn svg { width: 11px; height: 11px; flex-shrink: 0; }

/* ══════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════ */
main  { position: relative; z-index: 2; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 2.5rem; }
section { padding: 7rem 0; }
.snum {
  font-family: 'Bebas Neue', sans-serif; font-size: 12rem;
  color: transparent; -webkit-text-stroke: 1px var(--border);
  line-height: .85; user-select: none; pointer-events: none;
  position: absolute; right: 2.5rem; top: -1.5rem;
}
html[dir="ltr"] .snum { right: auto; left: 2.5rem; }
.sh { margin-bottom: 3.5rem; position: relative; }
.slabel {
  font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--bright);
  margin-bottom: .6rem; display: flex; align-items: center; gap: .6rem;
}
html[data-lang="ar"] .slabel { letter-spacing: .04em; }
.slabel::before { content: ''; width: 28px; height: 1.5px; background: var(--blue); flex-shrink: 0; }
html[dir="rtl"] .slabel::before { order: 1; }
.stitle {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: .04em; line-height: 1; color: var(--txt);
}
html[data-lang="ar"] .stitle { font-family: 'Cairo', sans-serif; font-weight: 900; font-size: clamp(2rem, 4.5vw, 3.2rem); letter-spacing: 0; }

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
#hero { min-height: 100vh; display: flex; align-items: center; position: relative; padding-top: 5rem; }
.hi   { max-width: 1280px; margin: 0 auto; padding: 0 2.5rem; width: 100%; }
.htag {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .32rem 1rem; margin-bottom: 1.8rem;
  background: var(--glows); border: 1px solid var(--border); border-radius: 100px;
  font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 700;
  color: var(--txt2); letter-spacing: .08em; animation: fiu .6s ease both;
}
.ldot { width: 6px; height: 6px; background: #22c55e; border-radius: 50%; flex-shrink: 0; animation: pdot 2s ease infinite; }
@keyframes pdot { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 50% { box-shadow: 0 0 0 5px rgba(34,197,94,0); } }
.htitle {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(4rem, 10vw, 9rem); line-height: .93; letter-spacing: .02em; margin-bottom: 1.4rem;
  animation: fiu .6s ease .08s both;
}
html[data-lang="ar"] .htitle { font-family: 'Cairo', sans-serif; font-weight: 900; letter-spacing: 0; font-size: clamp(3rem, 7vw, 6.5rem); line-height: 1.1; }
.hl1 { display: block; color: var(--txt2); font-size: .45em; }
.hl2 { display: block; background: linear-gradient(110deg, var(--txt) 0%, var(--bright) 55%, var(--azure) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hl3 { display: block; color: var(--txt); }
.hsub  { font-size: clamp(.9rem, 1.5vw, 1.1rem); color: var(--txt2); max-width: 520px; margin-bottom: 2.5rem; font-weight: 400; animation: fiu .6s ease .16s both; }
.hbtns { display: flex; flex-wrap: wrap; gap: .9rem; animation: fiu .6s ease .24s both; }
.btnp {
  display: inline-flex; align-items: center; gap: .5rem; padding: .78rem 1.7rem;
  background: var(--blue); color: #fff; border: 2px solid transparent; border-radius: 10px;
  text-decoration: none; font-weight: 700; font-size: .9rem; font-family: inherit; cursor: none;
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
.btnp:hover { background: var(--bright); transform: translateY(-2px); box-shadow: 0 12px 28px var(--glow); }
.btns {
  display: inline-flex; align-items: center; gap: .5rem; padding: .78rem 1.7rem;
  background: transparent; color: var(--txt2); border: 2px solid var(--border); border-radius: 10px;
  text-decoration: none; font-weight: 700; font-size: .9rem; font-family: inherit; cursor: none;
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
.btns:hover { border-color: var(--bright); color: var(--bright); background: var(--glows); transform: translateY(-2px); }
.hrule { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--border); animation: fiu .6s ease .32s both; }
.rstat { display: flex; flex-direction: column; gap: .2rem; }
.rnum  { font-family: 'Bebas Neue', sans-serif; font-size: 2.8rem; line-height: 1; color: var(--bright); letter-spacing: .05em; }
.rlbl  { font-family: 'JetBrains Mono', monospace; font-size: .65rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
html[data-lang="ar"] .rlbl { letter-spacing: .02em; font-family: 'Cairo', sans-serif; font-size: .72rem; }
.rdiv  { width: 1px; height: 44px; background: var(--border); flex-shrink: 0; }
.scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: .65rem; letter-spacing: .1em; animation: fiu .8s ease 1s both; }
.sline { width: 1px; height: 44px; background: linear-gradient(var(--bright), transparent); animation: sl 1.8s ease-in-out infinite; }
@keyframes sl { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ══════════════════════════════════════════
   ABOUT
══════════════════════════════════════════ */
#about { position: relative; background: var(--bg2); }
#about::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 0% 50%, var(--glows) 0%, transparent 55%); pointer-events: none; }
.alay { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: stretch; }
.acard { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; transition: border-color .3s; display: flex; flex-direction: column; }
.acard:hover { border-color: var(--bh); }
.acard-lbl { font-family: 'JetBrains Mono', monospace; font-size: .65rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); margin-bottom: .8rem; }
html[data-lang="ar"] .acard-lbl { letter-spacing: .04em; font-family: 'Cairo', sans-serif; }
.acard p { font-size: 1.05rem; color: var(--txt2); line-height: 2; margin-bottom: 1rem; }
.acard p:last-child { margin-bottom: 0; }
.int-grid { display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.int-chip { display: flex; align-items: center; gap: .7rem; padding: .62rem .9rem; background: var(--glows); border: 1px solid var(--border); border-radius: 10px; transition: border-color .2s, background .2s; flex: 1; }
.int-chip:hover { border-color: var(--bh); background: rgba(37,99,235,.1); }
.int-ico { font-size: 1.05rem; flex-shrink: 0; width: 1.4rem; text-align: center; }
.int-lbl { font-size: .88rem; font-weight: 600; color: var(--txt2); }

/* ══════════════════════════════════════════
   PROJECTS
══════════════════════════════════════════ */
#projects { background: var(--bg); position: relative; }
#projects::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% -10%, var(--glows) 0%, transparent 50%); pointer-events: none; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.4rem; }
.pc { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; text-decoration: none; display: block; cursor: none; transition: transform .35s cubic-bezier(.4,0,.2,1), border-color .3s, box-shadow .35s; }
.pc:hover { transform: translateY(-8px) scale(1.01); border-color: var(--bh); box-shadow: 0 24px 48px rgba(0,0,0,.35), 0 0 0 1px var(--bh); }
.pc:focus-visible { outline: 2px solid var(--bright); outline-offset: 3px; }
.pchrome { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; background: rgba(0,0,0,.25); border-bottom: 1px solid var(--border); }
.pd  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pdr { background: #ff5f57; } .pdy { background: #febc2e; } .pdg { background: #28c840; }
.ppath { flex: 1; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: .64rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parr  { font-family: 'JetBrains Mono', monospace; font-size: .7rem; color: var(--bright); flex-shrink: 0; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s; }
html[dir="rtl"] .parr { transform: translateX(6px); }
.pc:hover .parr { opacity: 1; transform: translateX(0); }
.pthumb-wrap { position: relative; overflow: hidden; height: 155px; background: var(--bg2); }
.pthumb-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 3rem; filter: drop-shadow(0 0 20px rgba(37,99,235,.5)); transition: transform .3s, filter .3s; background: linear-gradient(135deg, #060F1E 0%, #0D2044 100%); }
.pc:hover .pthumb-fallback { transform: scale(1.1); filter: drop-shadow(0 0 28px rgba(96,165,250,.7)); }
.pthumb-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; opacity: 0; transition: opacity .5s ease; position: absolute; inset: 0; }
.pthumb-img.loaded { opacity: 1; }
.pthumb-img.loaded ~ .pthumb-fallback { opacity: 0; }
.pthumb-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, var(--card) 100%); pointer-events: none; z-index: 1; }
.pbody  { padding: 1.1rem 1.2rem 1.2rem; }
.ptitle { font-weight: 700; font-size: .97rem; color: var(--txt); margin-bottom: .3rem; }
html[data-lang="ar"] .ptitle { font-family: 'Cairo', sans-serif; font-weight: 700; }
.pdesc  { font-size: .82rem; color: var(--muted); line-height: 1.65; margin-bottom: .85rem; }
.ptags  { display: flex; flex-wrap: wrap; gap: .35rem; }
.ptag   { padding: .14rem .6rem; font-family: 'JetBrains Mono', monospace; font-size: .65rem; font-weight: 700; background: var(--glows); border: 1px solid var(--border); border-radius: 100px; color: var(--bright); }

/* ══════════════════════════════════════════
   CONTACT
══════════════════════════════════════════ */
#contact { background: var(--bg2); position: relative; }
#contact::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 100% 50%, var(--glows) 0%, transparent 55%); pointer-events: none; }
.ccenter { max-width: 680px; margin: 0 auto; text-align: center; }
.cdesc   { font-size: 1rem; color: var(--txt2); margin-bottom: 2.2rem; line-height: 1.85; }
.cgrid   { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; margin-bottom: 1.1rem; }
@media (max-width: 480px) { .cgrid { grid-template-columns: repeat(2, 1fr); } }
.clink {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: 1.1rem .8rem; background: var(--card);
  border: 1px solid var(--border); border-radius: 14px;
  color: var(--txt2); text-decoration: none; font-size: .75rem; font-weight: 700;
  transition: all .3s cubic-bezier(.4,0,.2,1); cursor: none;
}
.clink:hover { border-color: var(--bh); color: var(--bright); background: var(--glows); transform: translateY(-4px); box-shadow: 0 12px 28px var(--glow); }
.clink svg { width: 22px; height: 22px; flex-shrink: 0; }
html[data-lang="ar"] .clink { font-family: 'Cairo', sans-serif; }
.echip {
  display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.4rem;
  background: var(--glows); border: 1px dashed var(--border); border-radius: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: .82rem;
  color: var(--txt2); cursor: none; transition: all .2s; user-select: none;
}
.echip:hover { border-color: var(--bright); color: var(--bright); }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
footer {
  position: relative; z-index: 2;
  padding: 1.6rem 2.5rem; border-top: 1px solid var(--border);
  text-align: center; color: var(--muted);
  font-family: 'JetBrains Mono', monospace; font-size: .68rem; letter-spacing: .06em;
}
.heart-btn {
  background: none; border: none; color: #e05577;
  font-size: .82rem; padding: 0 2px; cursor: none;
  transition: transform .2s, color .2s; display: inline;
}
.heart-btn:hover  { transform: scale(1.3); }
.heart-btn.broken { color: #a03050; }
/* repair button — hidden by default, appears after full destroy */
.repair-btn {
  background: none; border: none; font-size: .82rem;
  padding: 0 2px; cursor: none; display: none;
  transition: transform .25s;
}
.repair-btn:hover { transform: scale(1.4); }
body.destroyed .repair-btn { display: inline; animation: pulse-repair 1s ease-in-out infinite; }
@keyframes pulse-repair {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.25); }
}
.dot-sep { color: var(--muted); }

/* ══════════════════════════════════════════
   TOAST
══════════════════════════════════════════ */
.toast {
  position: fixed; bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--card); border: 1px solid var(--bh); color: var(--bright);
  padding: .65rem 1.4rem; border-radius: 100px;
  font-family: 'JetBrains Mono', monospace; font-size: .78rem; font-weight: 700;
  z-index: 9999; pointer-events: none; white-space: nowrap;
  box-shadow: 0 8px 24px var(--glow);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.toast.on { transform: translateX(-50%) translateY(0); }

/* ══════════════════════════════════════════
   KONAMI OVERLAY
══════════════════════════════════════════ */
.kov { position: fixed; inset: 0; z-index: 9100; background: rgba(3,11,24,.97); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; opacity: 0; pointer-events: none; transition: opacity .4s; }
.kov.on { opacity: 1; pointer-events: all; }
.kasc { font-family: 'JetBrains Mono', monospace; font-size: .62rem; line-height: 1.3; color: var(--bright); text-align: center; white-space: pre; animation: glitch 2s ease infinite; }
.kmsg { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; letter-spacing: .1em; color: var(--azure); text-align: center; }
html[data-lang="ar"] .kmsg { font-family: 'Cairo', sans-serif; font-weight: 900; font-size: 1.8rem; }
.kclose { padding: .5rem 1.4rem; background: var(--blue); color: #fff; border: none; border-radius: 8px; font-family: inherit; font-size: .85rem; font-weight: 700; cursor: none; transition: background .2s; }
.kclose:hover { background: var(--bright); }

/* ══════════════════════════════════════════
   HEART / CRACK EASTER EGG
══════════════════════════════════════════ */
.crack-ov { position: fixed; inset: 0; z-index: 7000; pointer-events: none; opacity: 0; transition: opacity .4s; }
.crack-ov.on { opacity: 1; }
.crack-ov svg { width: 100%; height: 100%; position: absolute; inset: 0; }

/* prevent page from shifting during destruction */
body.destroyed { overflow: hidden; }

/* phase 1: subtle tilt */
body.cracked .pc, body.cracked .acard { animation: tilt .4s ease; }
@keyframes tilt { 0% { transform: none; } 30% { transform: rotate(-1.5deg) skewX(2deg); } 60% { transform: rotate(1deg) skewX(-1.5deg); } 100% { transform: none; } }

/* phase 2: elements fall, but use will-change to keep them in-flow visually */
@keyframes fall-off {
  0%   { opacity: 1; transform: rotate(0) translate(0, 0); }
  15%  { transform: rotate(var(--rx)) translate(var(--tx), -12px); }
  100% { opacity: 0; transform: rotate(calc(var(--rx) * 3)) translate(0, 110vh); }
}
/* nav links */
body.destroyed .nl li:nth-child(1) { --rx:-8deg;  --tx:0; animation: fall-off .7s ease .05s forwards; }
body.destroyed .nl li:nth-child(2) { --rx: 6deg;  --tx:0; animation: fall-off .7s ease .12s forwards; }
body.destroyed .nl li:nth-child(3) { --rx:-10deg; --tx:0; animation: fall-off .7s ease .18s forwards; }
body.destroyed .nl li:nth-child(4) { --rx: 9deg;  --tx:0; animation: fall-off .7s ease .25s forwards; }
/* about cards */
body.destroyed .alay > div:nth-child(1) { --rx:-12deg; --tx:0; animation: fall-off .8s cubic-bezier(.4,0,1,1) .1s  forwards; }
body.destroyed .alay > div:nth-child(2) { --rx: 10deg; --tx:0; animation: fall-off .8s cubic-bezier(.4,0,1,1) .22s forwards; }
/* project cards */
body.destroyed .pc:nth-child(1) { --rx:-9deg;  --tx:0; animation: fall-off .85s cubic-bezier(.4,0,1,1) .08s forwards; }
body.destroyed .pc:nth-child(2) { --rx: 11deg; --tx:0; animation: fall-off .85s cubic-bezier(.4,0,1,1) .18s forwards; }
body.destroyed .pc:nth-child(3) { --rx:-7deg;  --tx:0; animation: fall-off .85s cubic-bezier(.4,0,1,1) .28s forwards; }
body.destroyed .pc:nth-child(4) { --rx: 13deg; --tx:0; animation: fall-off .85s cubic-bezier(.4,0,1,1) .38s forwards; }
body.destroyed .pc:nth-child(n+5) { --rx:-8deg; --tx:0; animation: fall-off .85s cubic-bezier(.4,0,1,1) .45s forwards; }
/* interest chips */
body.destroyed .int-chip:nth-child(1) { --rx:-8deg;  --tx:0; animation: fall-off .6s ease .05s forwards; }
body.destroyed .int-chip:nth-child(2) { --rx: 8deg;  --tx:0; animation: fall-off .6s ease .11s forwards; }
body.destroyed .int-chip:nth-child(3) { --rx:-10deg; --tx:0; animation: fall-off .6s ease .17s forwards; }
body.destroyed .int-chip:nth-child(4) { --rx: 7deg;  --tx:0; animation: fall-off .6s ease .23s forwards; }
body.destroyed .int-chip:nth-child(5) { --rx:-9deg;  --tx:0; animation: fall-off .6s ease .29s forwards; }
body.destroyed .int-chip:nth-child(6) { --rx: 11deg; --tx:0; animation: fall-off .6s ease .35s forwards; }
/* contact links */
body.destroyed .clink:nth-child(1) { --rx:-11deg; --tx:0; animation: fall-off .7s ease .05s forwards; }
body.destroyed .clink:nth-child(2) { --rx:  8deg; --tx:0; animation: fall-off .7s ease .14s forwards; }
body.destroyed .clink:nth-child(3) { --rx:-13deg; --tx:0; animation: fall-off .7s ease .22s forwards; }
body.destroyed .clink:nth-child(4) { --rx: 10deg; --tx:0; animation: fall-off .7s ease .30s forwards; }
body.destroyed .echip { --rx: 6deg; --tx:0; animation: fall-off .7s ease .40s forwards; }
/* hero title glitch */
body.destroyed .htitle { animation: glitch .8s ease infinite; -webkit-text-fill-color: var(--txt); background: none; }

/* ══════════════════════════════════════════
   KEYFRAMES & REVEAL
══════════════════════════════════════════ */
@keyframes fiu   { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes glitch {
  0%, 100% { text-shadow: none; transform: none; }
  2%  { text-shadow: -2px 0 #f0f, 2px 0 #0ff; transform: translate(-1px, 0); }
  4%  { text-shadow:  2px 0 #f0f,-2px 0 #0ff; transform: translate( 1px, 0); }
  6%  { text-shadow: none; transform: none; }
}
@keyframes lglt { 0% { transform: none; filter: none; } 25% { transform: skewX(8deg); filter: hue-rotate(90deg); } 60% { transform: skewX(-2deg); filter: hue-rotate(270deg); } 100% { transform: none; filter: none; } }
.logo.gg { animation: lglt .6s ease forwards; }
.rv    { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1); }
.rv.in { opacity: 1; transform: translateY(0); }
.rv1 { transition-delay: .08s; } .rv2 { transition-delay: .16s; } .rv3 { transition-delay: .24s; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 860px) { .alay { grid-template-columns: 1fr; gap: 2.5rem; } .snum { font-size: 7rem; } }
@media (max-width: 640px) {
  nav { padding: .75rem 1.2rem; } .nl { display: none; }
  section { padding: 5rem 0; } .wrap, .hi { padding: 0 1.25rem; }
  .hbtns { flex-direction: column; } .btnp, .btns { justify-content: center; }
  .hrule { gap: 1.2rem; } .cur-dot, .cur-ring { display: none; }
}