/* ============================================================
   ANIMATIONS — Keyframes, entrance sequences, cursor, reveals
   ============================================================ */

/* ── KEYFRAMES ───────────────────────────────────────────── */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes clip-up {
  from { clip-path: inset(0 0 100% 0); transform: translateY(12px); opacity: 0; }
  to   { clip-path: inset(0 0 0% 0);   transform: translateY(0);    opacity: 1; }
}
@keyframes pulse-line {
  0%, 100% { opacity: .25; }
  50%       { opacity: 1; }
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: .7; }
  50%       { transform: scale(1.5); opacity: 1; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes draw-line {
  from { stroke-dashoffset: var(--len, 1000); }
  to   { stroke-dashoffset: 0; }
}
@keyframes preloader-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes grain {
  0%,100% { transform: translate(0, 0); }
  10%  { transform: translate(-2%, -3%); }
  20%  { transform: translate(1%, 2%); }
  30%  { transform: translate(-1%, 1%); }
  40%  { transform: translate(2%, -1%); }
  50%  { transform: translate(-1%, 3%); }
  60%  { transform: translate(1%, -2%); }
  70%  { transform: translate(-2%, 1%); }
  80%  { transform: translate(2%, 2%); }
  90%  { transform: translate(-1%, -1%); }
}
@keyframes cursor-scale {
  from { transform: translate(-50%,-50%) scale(.6); opacity: 0; }
  to   { transform: translate(-50%,-50%) scale(1);  opacity: 1; }
}
@keyframes hero-glow {
  0%,100% { opacity: .06; }
  50%      { opacity: .12; }
}
@keyframes glitch-1 {
  0%,100% { clip-path: inset(0 0 100% 0); transform: translateX(0); }
  20%     { clip-path: inset(15% 0 60% 0); transform: translateX(-4px); }
  40%     { clip-path: inset(50% 0 30% 0); transform: translateX(4px); }
  60%     { clip-path: inset(80% 0 5%  0); transform: translateX(-2px); }
  80%     { clip-path: inset(30% 0 55% 0); transform: translateX(3px); }
}
@keyframes glitch-2 {
  0%,100% { clip-path: inset(0 0 100% 0); transform: translateX(0); }
  25%     { clip-path: inset(70% 0 10% 0); transform: translateX(5px); }
  50%     { clip-path: inset(20% 0 65% 0); transform: translateX(-3px); }
  75%     { clip-path: inset(45% 0 40% 0); transform: translateX(2px); }
}
@keyframes scanline {
  0%   { transform: translateY(-100%); opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}
@keyframes skill-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes count-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes float-label-in {
  from { transform: translateY(0) scale(1); color: var(--text-3); }
  to   { transform: translateY(-24px) scale(0.82); color: var(--accent); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes border-glow {
  0%,100% { box-shadow: 0 0 0 0 rgba(198,134,46,0); }
  50%      { box-shadow: 0 0 16px 2px rgba(198,134,46,.18); }
}
@keyframes tl-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
@keyframes stat-pop {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── PRELOADER ───────────────────────────────────────────── */
#preloader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: var(--z-preloader);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  transition: opacity .7s var(--ease-expo), visibility .7s;
  overflow: hidden;
}
#preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* Scanline sweep across preloader */
#preloader::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: scanline 1.6s var(--ease-expo) .3s forwards;
  z-index: 1;
  opacity: 0;
}
.pre-logo {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 5rem);
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--text-1);
  opacity: 0;
  position: relative;
  animation: fade-in .5s var(--ease-expo) .1s forwards;
}
.pre-logo span { color: var(--accent); }
/* Glitch layers behind the logo */
.pre-logo::before,
.pre-logo::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
}
.pre-logo::before {
  color: var(--slate);
  animation: glitch-1 .8s steps(1) .9s 2 forwards;
}
.pre-logo::after {
  color: var(--accent);
  animation: glitch-2 .8s steps(1) 1s 2 forwards;
}
.pre-status {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  opacity: 0;
  animation: fade-in .5s var(--ease-expo) .35s forwards;
}
.pre-bar-wrap {
  width: 160px;
  height: 1px;
  background: var(--border);
  overflow: hidden;
  opacity: 0;
  animation: fade-in .4s var(--ease-expo) .5s forwards;
}
.pre-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent), var(--accent-h));
  transform-origin: left;
  transform: scaleX(0);
  animation: preloader-bar 1s var(--ease-expo) .6s forwards;
}

/* ── CUSTOM CURSOR ───────────────────────────────────────── */
#cursor-dot,
#cursor-ring {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  will-change: transform;
}
#cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--text-1);
  transition: transform .1s var(--ease), background .2s, opacity .2s;
  mix-blend-mode: difference;
}
#cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(255,255,255,.35);
  transition: width .3s var(--ease-expo), height .3s var(--ease-expo),
              border-color .3s var(--ease-expo), background .3s var(--ease-expo),
              opacity .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cursor-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #09090B;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
  white-space: nowrap;
}

/* Cursor states via data-cursor on <body> */
body[data-cursor="link"] #cursor-ring {
  width: 48px; height: 48px;
  border-color: var(--accent);
}
body[data-cursor="project"] #cursor-ring {
  width: 72px; height: 72px;
  background: var(--accent);
  border-color: var(--accent);
}
body[data-cursor="project"] .cursor-label { opacity: 1; }
body[data-cursor="image"] #cursor-ring {
  width: 64px; height: 64px;
  background: var(--text-1);
  border-color: var(--text-1);
}
body[data-cursor="image"] .cursor-label { opacity: 1; }
body[data-cursor="view"] #cursor-ring {
  width: 56px; height: 56px;
  background: var(--accent);
  border-color: var(--accent);
}
body[data-cursor="view"] .cursor-label { opacity: 1; }

/* Clicking pulse */
body.cursor-clicking #cursor-dot { transform: translate(-50%,-50%) scale(.5); }
body.cursor-clicking #cursor-ring { transform: translate(-50%,-50%) scale(.85); }

/* ── SCROLL REVEAL ───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .85s var(--ease-expo), transform .85s var(--ease-expo);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .22s; }
.reveal-delay-3 { transition-delay: .34s; }
.reveal-delay-4 { transition-delay: .46s; }

/* Reveal from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity .85s var(--ease-expo), transform .85s var(--ease-expo);
}
.reveal-left.in { opacity: 1; transform: translateX(0); }

/* Reveal scale */
.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity .8s var(--ease-expo), transform .8s var(--ease-expo);
}
.reveal-scale.in { opacity: 1; transform: scale(1); }

/* Hero word/char reveals */
.hero-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.hero-word-inner {
  display: block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform .95s var(--ease-expo), opacity .7s var(--ease);
}
.hero-word.revealed .hero-word-inner {
  transform: translateY(0);
  opacity: 1;
}

/* ── SKILL BAR ANIMATION ─────────────────────────────────── */
.skill-bar-fill {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1.1s var(--ease-expo);
}
.skill-bar-fill.in { transform: scaleX(1); }

/* ── SECTION H2 REVEAL ───────────────────────────────────── */
.section-head h2 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s var(--ease-expo) .1s, transform .9s var(--ease-expo) .1s;
}
.section-head.in h2 {
  opacity: 1;
  transform: translateY(0);
}

/* ── TYPING CURSOR ───────────────────────────────────────── */
@keyframes blink-caret {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  margin-left: 3px;
  vertical-align: text-bottom;
  animation: blink-caret .75s step-end infinite;
}