/* ================================================
   MAH PORTFOLIO — Animations & Effects
   ================================================ */

/* ============ FILM GRAIN ============ */
@keyframes grain {
  0%  { transform: translate(0,   0);   }
  10% { transform: translate(-4%, -8%); }
  20% { transform: translate(-12%, 4%); }
  30% { transform: translate(5%, -20%); }
  40% { transform: translate(-4%, 22%); }
  50% { transform: translate(-12%, 8%); }
  60% { transform: translate(12%, 0%);  }
  70% { transform: translate(0%, 12%);  }
  80% { transform: translate(2%, 28%);  }
  90% { transform: translate(-8%, 8%);  }
  100%{ transform: translate(0,   0);   }
}

/* ============ LOADER ============ */
@keyframes loaderOut {
  0%   { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}

/* ============ GLITCH TEXT ============ */
.glitch {
  position: relative;
}
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.glitch::before {
  color: #ff0000;
  animation: glitch-1 3.5s infinite linear;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
}
.glitch::after {
  color: #00ffff;
  animation: glitch-2 3.5s infinite linear;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}
@keyframes glitch-1 {
  0%,  90%,  100% { transform: translate(0); opacity: 0; }
  91% { transform: translate(-3px, 1px); opacity: 0.7; }
  93% { transform: translate(2px, -1px); opacity: 0.7; }
  95% { transform: translate(-1px, 0); opacity: 0.7; }
  97% { transform: translate(0); opacity: 0; }
}
@keyframes glitch-2 {
  0%,  88%,  100% { transform: translate(0); opacity: 0; }
  89% { transform: translate(3px, 2px); opacity: 0.6; }
  91% { transform: translate(-2px, -2px); opacity: 0.6; }
  93% { transform: translate(1px, 0); opacity: 0.6; }
  95% { transform: translate(0); opacity: 0; }
}

/* Glitch on hover variant */
.glitch-hover:hover::before,
.glitch-hover:hover::after {
  animation-duration: 0.3s;
  animation-iteration-count: 2;
}

/* ============ TYPEWRITER CURSOR ============ */
.cursor-blink {
  display: inline-block;
  width: 2px; height: 1.1em;
  background: var(--red);
  vertical-align: middle;
  margin-left: 2px;
  animation: blink 0.8s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ============ FADE IN ANIMATIONS ============ */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.fade-in.visible { opacity: 1; }

/* Stagger delay classes */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* ============ FLICKER ============ */
.flicker { animation: flicker 6s step-end infinite; }
@keyframes flicker {
  0%, 97%, 100% { opacity: 1; }
  97.5% { opacity: 0.4; }
  98%   { opacity: 1; }
  98.5% { opacity: 0.3; }
  99%   { opacity: 1; }
}

/* ============ PULSE GLOW ============ */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 4px currentColor; opacity: 1; }
  50%       { box-shadow: 0 0 12px currentColor; opacity: 0.7; }
}

.pulse-red { animation: pulseRed 2s ease-in-out infinite; }
@keyframes pulseRed {
  0%, 100% { box-shadow: 0 0 8px rgba(204,0,0,0.4); }
  50%       { box-shadow: 0 0 24px rgba(204,0,0,0.7); }
}

/* ============ COUNTER ANIMATION ============ */
.counter { display: inline-block; }

/* ============ RED LINE EXPAND ============ */
.line-expand {
  width: 0; height: 1px; background: var(--red);
  transition: width 1s ease;
}
.line-expand.visible { width: 100%; }

/* ============ SCAN LINE SWEEP ============ */
.scan-sweep {
  position: relative; overflow: hidden;
}
.scan-sweep::after {
  content: '';
  position: absolute; top: -100%; left: 0; right: 0;
  height: 40%; background: linear-gradient(transparent, rgba(204,0,0,0.04), transparent);
  animation: scanSweep 4s linear infinite;
  pointer-events: none;
}
@keyframes scanSweep {
  0%   { top: -40%; }
  100% { top: 100%; }
}

/* ============ RED CORNER BRACKET ============ */
.bracket {
  position: relative; padding: 1.5rem;
}
.bracket::before,
.bracket::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border-color: var(--red); border-style: solid;
}
.bracket::before {
  top: 0; left: 0;
  border-width: 2px 0 0 2px;
}
.bracket::after {
  bottom: 0; right: 0;
  border-width: 0 2px 2px 0;
}

/* ============ HOVER RED UNDERLINE ============ */
.underline-anim {
  position: relative; display: inline-block;
}
.underline-anim::after {
  content: ''; position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px; background: var(--red);
  transition: width var(--t-normal);
}
.underline-anim:hover::after { width: 100%; }

/* ============ HERO SPECIFIC ============ */
.hero-label-anim {
  animation: slideInLeft 0.8s ease 0.2s both;
}
.hero-title-anim {
  animation: slideInUp 0.9s ease 0.5s both;
}
.hero-sub-anim {
  animation: slideInUp 0.8s ease 0.9s both;
}
.hero-cta-anim {
  animation: slideInUp 0.8s ease 1.2s both;
}
.hero-photo-anim {
  animation: slideInRight 1s ease 0.6s both;
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============ NUMBER TICK ============ */
@keyframes numberTick {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ============ PAGE TRANSITIONS ============ */
.page-enter {
  animation: pageEnter 0.6s ease both;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}