/* Reset, design tokens and document defaults.
   Load order is part of the cascade: keep the numeric prefixes in sequence. */
*::before { margin: 0; padding: 0; box-sizing: border-box }
*::after { margin: 0; padding: 0; box-sizing: border-box }
body.unlocked { overflow-y: auto; overflow-x: hidden }
.skip-link:focus { transform: translateY(0) }
::-webkit-scrollbar { width: 3px }
::-webkit-scrollbar-track { background: var(--bg) }
::-webkit-scrollbar-thumb { background: rgba(237,233,227,0.18) }
/* ── CURSOR ─────────────────────────────────────────────── */
/* ── LOADER ─────────────────────────────────────────────── */
#loader.gone { opacity: 0; pointer-events: none }
/* ── PORTFOLIO ───────────────────────────────────────────── */
#portfolio { opacity: 0; transition: opacity 1.4s ease; min-height: 100vh }
#portfolio.show { opacity: 1 }
nav * { pointer-events: auto }
.nav-cta { padding: 11px 15px; border: 1px solid rgba(237,233,227,.35); color: var(--fg) !important }
/* HERO */
.ti { display: block; transform: translateY(105%); transition: transform .95s cubic-bezier(.16,1,.3,1) }
.ti.r { transform: translateY(0) }
.signal-chip:nth-child(2)::before { animation-delay: 1.1s }
.signal-chip:nth-child(3)::before { animation-delay: 2.2s }
@keyframes chipSweep { 0%,55%{transform:translateX(-120%)} 82%,100%{transform:translateX(120%)} }
.btn-g:hover { color: var(--fg) }
.scroll-ind { position: absolute; bottom: 38px; right: 52px; display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 9px; letter-spacing: .25em; color: rgba(237,233,227,.28); text-transform: uppercase }
.s-line { width: 38px; height: 1px; background: rgba(237,233,227,.15); overflow: hidden; position: relative }
.s-line::after { content: ''; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; background: rgba(237,233,227,.6); animation: sl 2.2s infinite ease-in-out }
@keyframes sl { 0%{left:-100%} 50%{left:0} 100%{left:100%} }
/* SECTIONS */
section { padding: 120px 52px; position: relative; isolation: isolate }
section::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none }
.s-label em { opacity: .45; margin-left: 6px; font-style: normal; font-size: 9px }
/* WORK */
.w-item { position: relative; aspect-ratio: 16/10; background: linear-gradient(145deg,var(--surface-raised),#0d1119); border: 1px solid var(--line); overflow: hidden; transition: border-color .4s }
.w-item { transition: border-color .4s,box-shadow .4s,transform .4s }
.w-canvas { position: absolute; inset: 0; width: 100%; height: 100% }
.w-item:hover .w-arrow { opacity: 1; border-color: rgba(237,233,227,.38) }
@media(hover: none) and (pointer: coarse) {
  .w-arrow { opacity: .45 }
}
/* ABOUT */
.skill:hover { color: var(--fg); transform: translateX(3px) }
.skill:hover::before { opacity: 1; transform: scale(1.35) }
.fit-card { border: 1px solid var(--line); padding: 34px; background: rgba(23,28,39,.62); box-shadow: inset 0 1px rgba(255,255,255,.025); transition: transform .35s,border-color .35s,background .35s }
.hitch-principle:last-child { border-right: 0 }
.special-card { border: 1px solid var(--line); padding: 42px }
.special-card { position: relative; overflow: hidden; background: linear-gradient(145deg,rgba(237,233,227,.025),transparent 58%); transition: transform .45s cubic-bezier(.16,1,.3,1),border-color .45s }
.special-card::after { content: ''; position: absolute; width: 180px; height: 180px; top: -110px; right: -90px; border-radius: 50%; background: rgba(55,88,210,.16); filter: blur(42px); transition: transform .7s ease,opacity .7s ease; opacity: .45 }
.special-card:hover { transform: translateY(-4px); border-color: rgba(135,160,255,.25) }
.special-card:hover::after { transform: translate(-28px,28px) scale(1.25); opacity: .75 }
.special-kicker { font: 9px var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--dim); margin-bottom: 18px }
.special-card p { color: var(--dim); font-size: 14px; line-height: 1.75 }
/* SERVICES */
/* CONTACT */
.contact-wrap { max-width: 700px }
.sr { opacity: 0; transform: translateY(28px); transition: opacity .85s ease, transform .85s ease }
.sr.vis { opacity: 1; transform: translateY(0) }
@media(max-width:768px) {
  nav { padding: 22px }
  .nav-links li:not(:last-child) { display: none }
  .nav-links { display: flex }
  .nav-actions { gap: 10px }
  .nav-cta { display: none }
  .lang-btn { min-width: 36px }
  .hero { padding: 0 24px 64px }
  section { padding: 88px 24px }
  .work-grid { grid-template-columns: 1fr }
  .w-item.wide { grid-column: span 1; aspect-ratio: 16/10 }
  .about-grid { grid-template-columns: 1fr; gap: 52px }
  .skills { grid-template-columns: 1fr; column-gap: 0 }
  .svc-item { grid-template-columns: 52px 1fr }
  .svc-tag { display: none }
  footer { flex-direction: column; gap: 12px }
  .hero-cta { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 36px }
  .scroll-ind { right: 24px }
  .hero-sub { max-width: 100% }
  .w-content { padding: 20px 20px }
  .fit-grid { grid-template-columns: 1fr }
  .special-grid { grid-template-columns: 1fr }
  .hitch-principles { grid-template-columns: 1fr 1fr }
  .hitch-principle:nth-child(2) { border-right: 0 }
  .hitch-principle { border-bottom: 1px solid var(--line) }
  .hitch-principle:nth-last-child(-n+2) { border-bottom: 0 }
  .fit-card { padding: 28px 24px }
  .special-card { padding: 28px 24px }
}