/* ===========================================
   ------ SPIRIT & BONE - MAIN STYLES ------
   =========================================== */

/* Import base styles and variables */
@import "/base.css";

/* Import component styles */
@import "/navigation.css";

/* Import section-specific styles */
@import "/home.css";
@import "/project1.css"; /* Tier1 - Gallery/Parallax Layout */
@import "/project2.css"; /* Tier2 - Information/Content Layout */
@import "/team.css";
@import "/contact.css";

/* ==========================================
---------------- ANIMATIONS -----------------
========================================== */

/* ---- BASE---- */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

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

/* ---- HOME ---- */

/* Ampersand Animation */
@keyframes ampGrowThrough {
  0% {
    transform: scale(1);
    opacity: 1;
    filter: brightness(1);
  }
  40% {
    transform: scale(2.5);
    opacity: 0.9;
    filter: drop-shadow(0 0 25px rgba(192, 0, 1, 1)) brightness(1.3);
  }
  80% {
    transform: scale(7.5);
    opacity: 0.9;
    filter: drop-shadow(0 0 25px rgba(192, 0, 1, 1)) brightness(1.3);
  }
  100% {
    transform: scale(10);
    opacity: 0;
    filter: drop-shadow(0 0 30px rgba(192, 0, 1, 0.5)) brightness(1.5);
  }
}

/* ---- NAVIGATION ---- */

@keyframes menu-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(192, 0, 1, 0.7);
  }
  70% {
    transform: scale(1.2);
    box-shadow: 0 0 0 10px rgba(192, 0, 1, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(192, 0, 1, 0);
  }
}

@keyframes glitch {
  0%,
  20%,
  90% {
    color: transparent;
  }
  10%,
  40% {
    color: white;
  }
  100% {
    color: var(--main-red);
  }
}

@keyframes brighten-and-fade {
  0% {
    filter: brightness(1);
    opacity: 1;
    transform: scale(1);
  }
  30% {
    filter: brightness(2);
    opacity: 1;
    transform: scale(1.05);
  }
  85% {
    transform: translateX(5rem);
  }
  100% {
    filter: brightness(1);
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes background-fade {
  0% {
    backdrop-filter: blur(20px);
    background-color: rgba(0, 0, 0, 0.5);
  }
  100% {
    backdrop-filter: blur(20px);
    background-color: rgba(0, 0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes bounceArrow {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

@keyframes rotateIn {
  from {
    transform: translateY(-50%) rotate(0deg) scale(0.5);
    opacity: 0;
  }
  to {
    transform: translateY(-50%) rotate(360deg) scale(1);
    opacity: 1;
  }
}

@keyframes rotateInMobile {
  from {
    transform: rotate(0deg) scale(0.5);
    opacity: 0;
  }
  to {
    transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}

/* ---- PROJECTS ---- */

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

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes bounceArrow {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

@keyframes subtle-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes floatInFromLeft {
  from {
    transform: translateX(-40px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes floatInFromRight {
  from {
    transform: translateX(40px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

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

/* ---- TEAMS ---- */

@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-10px) rotate(2deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  75% {
    transform: translateY(10px) rotate(-2deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes pumpum {
  20%,
  40% {
    transform: rotateZ(3deg);
  }
  30%,
  50% {
    transform: rotateZ(-3deg);
  }
  10%,
  60%,
  70%,
  90% {
    transform: scale(1.08);
  }
  0%,
  15%,
  65%,
  75%,
  100% {
    transform: scale(1);
  }
}


/* Mobile rotation animation support */
@keyframes rotateInMobile {
  from {
    transform: rotate(0deg) scale(0.5);
    opacity: 0;
  }
  to {
    transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}

/* Desktop rotation animation support */
@keyframes rotateIn {
  from {
    transform: translateY(-50%) rotate(0deg) scale(0.5);
    opacity: 0;
  }
  to {
    transform: translateY(-50%) rotate(360deg) scale(1);
    opacity: 1;
  }
}