/* ===========================
   Opening Animation (yui540-style)
   =========================== */

/* Blur layer opacity swap - avoids animating filter: blur() directly */
.opening__blur-layer--strong {
  animation:
    openingBlurStrong 0.8s ease-out 0.5s forwards;
}

.opening__blur-layer--weak {
  animation:
    openingBlurWeak 0.8s ease-out 0.5s forwards;
}

@keyframes openingBlurStrong {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes openingBlurWeak {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Background image reveal */
.opening__bg {
  animation: openingBgReveal 1.2s ease-out 0.1s forwards;
}

@keyframes openingBgReveal {
  0%   { opacity: 0; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* Title typewriter-style reveal */
.opening__title {
  opacity: 0;
  animation:
    fadeInScale 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}

.opening__subtitle {
  opacity: 0;
  animation:
    fadeInUp 0.5s ease-out 0.8s forwards;
}

.opening__start {
  opacity: 0;
  animation:
    fadeInUp 0.5s ease-out 1.2s forwards,
    blink 1s step-end 1.7s infinite;
}

/* ===========================
   Keyframe Definitions
   =========================== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

@keyframes titleGlow {
  0%, 100% {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  50% {
    text-shadow: 0 2px 8px rgba(231, 76, 60, 0.2);
  }
}

@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 2px 8px rgba(231, 76, 60, 0.15); }
  50%      { box-shadow: 0 4px 16px rgba(231, 76, 60, 0.25); }
}

/* ===========================
   Hero Animations
   =========================== */

.hero__title {
  animation: titleGlow 3s ease-in-out infinite;
}

.hero__scroll-arrow {
  animation: bounce 2s ease-in-out infinite;
}

.hero__scroll-indicator {
  animation: fadeInUp 0.8s ease-out 0.5s both;
}

/* ===========================
   Scroll-Triggered Animations
   =========================== */

/* Base hidden state - applied by JS */
.scroll-hidden {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-hidden.from-bottom {
  transform: translateY(40px);
}

.scroll-hidden.from-left {
  transform: translateX(-40px);
}

.scroll-hidden.from-right {
  transform: translateX(40px);
}

.scroll-hidden.from-scale {
  transform: scale(0.9);
}

/* Visible state */
.scroll-visible {
  opacity: 1 !important;
  transform: translateY(0) translateX(0) scale(1) !important;
}

/* Staggered delay for stat bars */
.stats .stat-bar:nth-child(1) { transition-delay: 0s; }
.stats .stat-bar:nth-child(2) { transition-delay: 0.1s; }
.stats .stat-bar:nth-child(3) { transition-delay: 0.2s; }
.stats .stat-bar:nth-child(4) { transition-delay: 0.3s; }
.stats .stat-bar:nth-child(5) { transition-delay: 0.4s; }

/* ===========================
   Hover Effects
   =========================== */

/* App card tilt on hover */
.app-card {
  will-change: transform;
}

/* Badge float animation */
.app-card__badge {
  animation: float 3s ease-in-out infinite;
}

/* Icon subtle pulse on card hover */
.app-card:hover .app-card__icon-wrapper {
  animation: pulseGlow 1.5s ease-in-out infinite;
}

/* Game window subtle border glow on hover */
.game-window {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.game-window:hover {
  border-color: rgba(231, 76, 60, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Profile avatar glow on hover */
.profile__avatar-placeholder {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.profile__avatar-placeholder:hover {
  box-shadow: 0 4px 16px rgba(231, 76, 60, 0.3);
  transform: scale(1.05);
}

/* Stat bar track glow on hover */
.stat-bar:hover .stat-bar__fill {
  filter: brightness(1.2);
}

.stat-bar:hover .stat-bar__value {
  color: var(--text-primary);
}

/* ===========================
   Mobile Tap States
   =========================== */

@media (hover: none) {
  .app-card:active {
    transform: scale(0.98);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }

  .contact__link:active {
    background: rgba(231, 76, 60, 0.06);
  }

  .contact__cursor {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===========================
   Shooting Game System
   =========================== */

/* Hide default cursor in shooting mode (desktop only) */
.shooting-mode,
.shooting-mode * {
  cursor: none !important;
}

/* Crosshair */
.crosshair {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}

/* On mobile: slightly larger crosshair for visibility */
@media (hover: none) {
  .crosshair__ring {
    width: 36px;
    height: 36px;
    border-width: 2px;
  }
  .crosshair__center {
    width: 5px;
    height: 5px;
  }
  .crosshair__line--top    { bottom: calc(50% + 20px); }
  .crosshair__line--bottom { top: calc(50% + 20px); }
  .crosshair__line--left   { right: calc(50% + 20px); }
  .crosshair__line--right  { left: calc(50% + 20px); }
  .crosshair__line--top,
  .crosshair__line--bottom { height: 10px; width: 2px; }
  .crosshair__line--left,
  .crosshair__line--right  { width: 10px; height: 2px; }
}

.crosshair__center {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ff2d2d;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px rgba(255, 45, 45, 0.8);
}

.crosshair__ring {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1.5px solid rgba(255, 45, 45, 0.7);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.crosshair__line {
  position: absolute;
  background: rgba(255, 45, 45, 0.6);
}

.crosshair__line--top,
.crosshair__line--bottom {
  width: 1.5px;
  height: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.crosshair__line--left,
.crosshair__line--right {
  width: 8px;
  height: 1.5px;
  top: 50%;
  transform: translateY(-50%);
}

.crosshair__line--top    { bottom: calc(50% + 16px); }
.crosshair__line--bottom { top: calc(50% + 16px); }
.crosshair__line--left   { right: calc(50% + 16px); }
.crosshair__line--right  { left: calc(50% + 16px); }

/* Recoil effect */
.crosshair--recoil {
  animation: crosshairRecoil 0.1s ease-out;
}

@keyframes crosshairRecoil {
  0%   { transform: translate(-50%, -50%) scale(1); }
  50%  { transform: translate(-50%, -50%) scale(1.3); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* Impact Flash */
.impact-flash {
  position: fixed;
  z-index: 9998;
  width: 50px;
  height: 50px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 200, 0.9) 0%, rgba(255, 180, 50, 0.6) 30%, rgba(255, 100, 20, 0.2) 60%, transparent 75%);
  border-radius: 50%;
  animation: impactFlash 0.18s ease-out forwards;
}

@keyframes impactFlash {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.3); }
  50%  { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}

/* Sparks */
.spark {
  position: fixed;
  z-index: 9997;
  pointer-events: none;
  border-radius: 50%;
  animation: sparkFly 0.45s ease-out forwards;
}

.spark--round {
  width: 4px;
  height: 4px;
  background: #ffdd44;
  box-shadow: 0 0 6px rgba(255, 220, 50, 0.9), 0 0 12px rgba(255, 150, 30, 0.4);
}

.spark--streak {
  width: 2px;
  height: 6px;
  background: #ffaa22;
  border-radius: 1px;
  box-shadow: 0 0 4px rgba(255, 170, 30, 0.8);
}

.spark--hot {
  width: 3px;
  height: 3px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 16px rgba(255, 200, 50, 0.5);
}

@keyframes sparkFly {
  0%   { opacity: 1; transform: translate(-50%, -50%) translate(0, 0) scale(1); }
  70%  { opacity: 0.6; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(0.3); }
}

/* Smoke Puff */
.smoke-puff {
  position: fixed;
  z-index: 9995;
  width: 16px;
  height: 16px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(180, 180, 180, 0.3) 0%, transparent 70%);
  animation: smokePuff 0.8s ease-out forwards;
}

@keyframes smokePuff {
  0%   { opacity: 0.5; transform: translate(-50%, -50%) scale(0.5); }
  100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(2.5); }
}

/* Shell Casing */
.shell-casing {
  position: fixed;
  z-index: 9994;
  width: 3px;
  height: 7px;
  pointer-events: none;
  background: linear-gradient(to right, #d4a832, #f0d060, #d4a832);
  border-radius: 1px 1px 1px 1px;
  animation: shellEject 0.5s ease-out forwards;
  box-shadow: 0 0 3px rgba(212, 168, 50, 0.5);
}

@keyframes shellEject {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--ex), var(--ey)) rotate(var(--erot)); }
}

/* ===========================
   Bullet Trail (trajectory)
   =========================== */

.bullet-trail {
  position: fixed;
  z-index: 9999;
  height: 3px;
  pointer-events: none;
  transform-origin: left center;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 220, 80, 0.2) 10%,
    rgba(255, 200, 50, 0.8) 40%,
    rgba(255, 255, 180, 1) 75%,
    rgba(255, 200, 50, 0.9) 100%
  );
  animation: trailFade 0.35s ease-out forwards;
}

/* Trail glow layer */
.bullet-trail::after {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 100%;
  height: 9px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 180, 30, 0) 15%,
    rgba(255, 180, 30, 0.25) 50%,
    rgba(255, 200, 80, 0.35) 80%,
    rgba(255, 180, 30, 0.2) 100%
  );
}

@keyframes trailFade {
  0%   { opacity: 1; }
  40%  { opacity: 0.9; }
  100% { opacity: 0; }
}

/* ===========================
   Bullet Holes (Pixel Art)
   =========================== */

/* Bullet Holes Container */
#bullet-holes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* Pixel Art Bullet Hole */
.bullet-hole {
  position: absolute;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  image-rendering: pixelated;
  animation: pixelHoleAppear 0.15s steps(3) forwards;
}

/* Center pixel cluster - dark core */
.bullet-hole::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #0a0a08;
  box-shadow:
    /* inner ring */
    4px 0 0 #1a1208,
    -4px 0 0 #1a1208,
    0 4px 0 #1a1208,
    0 -4px 0 #1a1208,
    /* corners */
    4px 4px 0 rgba(40, 30, 15, 0.8),
    -4px -4px 0 rgba(40, 30, 15, 0.8),
    4px -4px 0 rgba(40, 30, 15, 0.7),
    -4px 4px 0 rgba(40, 30, 15, 0.7),
    /* outer scorch */
    8px 0 0 rgba(60, 45, 20, 0.4),
    -8px 0 0 rgba(60, 45, 20, 0.4),
    0 8px 0 rgba(60, 45, 20, 0.4),
    0 -8px 0 rgba(60, 45, 20, 0.4);
}

/* Hot pixel glow in center */
.bullet-hole::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 140, 30, 0.6);
  box-shadow:
    4px 0 0 rgba(255, 100, 20, 0.3),
    0 4px 0 rgba(255, 100, 20, 0.3);
  animation: pixelGlowFade 1s steps(4) forwards;
}

@keyframes pixelGlowFade {
  0%   { opacity: 1; }
  50%  { opacity: 0.5; }
  75%  { opacity: 0.2; }
  100% { opacity: 0; }
}

@keyframes pixelHoleAppear {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  33%  { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* Pixel Crack - small square dot */
.pixel-crack {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #2a1a0a;
  pointer-events: none;
}

/* Debris Particles */
.debris {
  position: fixed;
  z-index: 9996;
  pointer-events: none;
  animation: debrisFly 0.6s ease-out forwards;
}

.debris--chunk {
  width: 6px;
  height: 6px;
  border-radius: 2px;
}

.debris--shard {
  width: 3px;
  height: 8px;
  border-radius: 1px;
}

.debris--dust {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0.6;
}

@keyframes debrisFly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) rotate(var(--rot));
  }
}

/* Shot Counter HUD */
.shot-counter {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9990;
  font-size: 14px;
  color: rgba(255, 45, 45, 0.6);
  letter-spacing: 0.1em;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(255, 45, 45, 0.3);
}

.shot-counter span {
  color: rgba(255, 45, 45, 0.8);
}

/* ===========================
   Card Damage Stages
   =========================== */

/* Stage 1: Light damage (1-3 hits) */
.card-damage-1 {
  border-color: rgba(255, 100, 50, 0.2) !important;
}

/* Stage 2: Moderate damage (4-6 hits) */
.card-damage-2 {
  border-color: rgba(255, 80, 30, 0.3) !important;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3) !important;
}

.card-damage-2 .app-card__title,
.card-damage-2 .app-card__desc {
  opacity: 0.85;
}

/* Stage 3: Heavy damage (7-10 hits) */
.card-damage-3 {
  border-color: rgba(255, 60, 20, 0.4) !important;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.5) !important;
  transform: rotate(-0.5deg) !important;
}

.card-damage-3 .app-card__title,
.card-damage-3 .app-card__desc {
  opacity: 0.7;
}

.card-damage-3 .app-card__icon-wrapper {
  filter: brightness(0.7);
}

/* Stage 4: Critical damage (11-15 hits) */
.card-damage-4 {
  border-color: rgba(255, 40, 10, 0.5) !important;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6) !important;
  transform: rotate(-1.5deg) translateY(4px) !important;
  filter: brightness(0.7) saturate(0.6);
}

.card-damage-4 .app-card__badge {
  animation: none !important;
  opacity: 0.4;
}

/* Stage 5: Destroyed (16+ hits) */
.card-damage-5 {
  border-color: rgba(255, 20, 0, 0.5) !important;
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8) !important;
  transform: rotate(-3deg) translateY(8px) scale(0.97) !important;
  filter: brightness(0.4) saturate(0.2) contrast(1.2);
  opacity: 0.7;
}

.card-damage-5 .app-card__badge {
  display: none;
}

.card-damage-5 .app-card__icon-wrapper {
  filter: brightness(0.3) grayscale(1);
}

/* ===========================
   Generic Hit Damage Stages
   (for game-window, nav, footer,
    section titles, hero, stat-bar, etc.)
   =========================== */

/* Stage 1: Light damage (1-3 hits) */
.hit-damage-1 {
  box-shadow: inset 0 0 10px rgba(255, 100, 50, 0.1), 0 0 2px rgba(255, 80, 30, 0.15) !important;
}

/* Stage 2: Moderate damage (4-6 hits) */
.hit-damage-2 {
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.25), 0 0 4px rgba(255, 80, 30, 0.2) !important;
  filter: brightness(0.9);
}

/* Stage 3: Heavy damage (7-10 hits) */
.hit-damage-3 {
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4), 0 0 6px rgba(255, 60, 20, 0.25) !important;
  filter: brightness(0.75) saturate(0.8);
  transform: rotate(-0.3deg) !important;
}

/* Stage 4: Critical damage (11-15 hits) */
.hit-damage-4 {
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.55), 0 0 8px rgba(255, 40, 10, 0.3) !important;
  filter: brightness(0.6) saturate(0.5);
  transform: rotate(-1deg) translateY(2px) !important;
}

/* Stage 5: Destroyed (16+ hits) */
.hit-damage-5 {
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.7), 0 0 10px rgba(255, 20, 0, 0.3) !important;
  filter: brightness(0.35) saturate(0.2) contrast(1.1);
  transform: rotate(-2deg) translateY(4px) scale(0.98) !important;
  opacity: 0.6;
}

/* Text-based elements get glitch-style damage */
.section__title.hit-damage-2,
.hero__content.hit-damage-2 {
  text-shadow: 2px 0 rgba(255, 50, 50, 0.2), -2px 0 rgba(0, 200, 255, 0.2);
}

.section__title.hit-damage-3,
.hero__content.hit-damage-3 {
  text-shadow: 3px 0 rgba(255, 50, 50, 0.3), -3px 0 rgba(0, 200, 255, 0.3);
  animation: textGlitch 0.3s ease infinite;
}

.section__title.hit-damage-4,
.hero__content.hit-damage-4 {
  text-shadow: 4px 0 rgba(255, 50, 50, 0.4), -4px 0 rgba(0, 200, 255, 0.4);
  animation: textGlitch 0.15s ease infinite;
}

.section__title.hit-damage-5,
.hero__content.hit-damage-5 {
  text-shadow: 6px 0 rgba(255, 50, 50, 0.5), -6px 0 rgba(0, 200, 255, 0.5);
  animation: textGlitch 0.08s ease infinite;
}

@keyframes textGlitch {
  0%   { transform: translate(0, 0) skewX(0deg); }
  20%  { transform: translate(-2px, 1px) skewX(-0.5deg); }
  40%  { transform: translate(1px, -1px) skewX(0.5deg); }
  60%  { transform: translate(-1px, 0) skewX(-0.3deg); }
  80%  { transform: translate(2px, 1px) skewX(0.3deg); }
  100% { transform: translate(0, 0) skewX(0deg); }
}

/* Stat bar specific: fill drains as damage increases */
.stat-bar.hit-damage-2 .stat-bar__fill {
  filter: brightness(0.7);
}

.stat-bar.hit-damage-3 .stat-bar__fill {
  filter: brightness(0.5) hue-rotate(20deg);
}

.stat-bar.hit-damage-4 .stat-bar__fill {
  filter: brightness(0.3) hue-rotate(40deg);
  width: 30% !important;
}

.stat-bar.hit-damage-5 .stat-bar__fill {
  filter: brightness(0.15) grayscale(1);
  width: 5% !important;
}

/* Nav damage: border glow */
.nav.hit-damage-2 {
  border-bottom-color: rgba(255, 80, 30, 0.3) !important;
}

.nav.hit-damage-4,
.nav.hit-damage-5 {
  border-bottom-color: rgba(255, 30, 10, 0.5) !important;
}

/* Avatar specific: cracks and glow change */
.profile__avatar-placeholder.hit-damage-3 {
  box-shadow: 0 4px 16px rgba(255, 50, 20, 0.3) !important;
}

.profile__avatar-placeholder.hit-damage-5 {
  box-shadow: 0 4px 20px rgba(255, 20, 0, 0.4) !important;
  filter: brightness(0.4) grayscale(0.8);
}