/* ============================================
   RIVALS MUSIC PRODUCTION — CUSTOM STYLES
   ============================================
   Colors used:
   - Main Purple:  #6E00B3
   - Dark Purple:  #3C0061
   - Darkest:      #11001C
   - Black:        #000000
   ============================================ */


/* ---------- SCROLLBAR ---------- */
/* Hide scrollbar everywhere since we use full-page slides */
body::-webkit-scrollbar {
  display: none;
}

body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Custom Cursor */
#custom-cursor {
  width: 56px;
  height: 56px;
  background-image: url('Assets/cursor.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  left: 0;
  top: 0;
  will-change: transform;
}

/* =============================================
   SLIDE SYSTEM
   ============================================= */

/* Each slide starts hidden with a soft blur */
.slide {
  opacity: 0;
  visibility: hidden;
  filter: blur(12px);
  pointer-events: none;
  transition:
    opacity 0.9s ease,
    filter 0.9s ease,
    visibility 0.9s ease;
}

/* The active slide fades in and un-blurs */
.slide.active {
  opacity: 1;
  visibility: visible;
  filter: blur(0);
  pointer-events: auto;
}


/* =============================================
   CONTENT BOX (semi-transparent gradient)
   Used on About, Services, Studio, Contact
   ============================================= */
.content-box {
  background: linear-gradient(135deg,
      rgba(60, 0, 97, 0.45) 0%,
      /* purple side */
      rgba(0, 0, 0, 0.55) 100%
      /* black side */
    );
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(110, 0, 179, 0.2);
  border-radius: 1.5rem;
}


/* =============================================
   FADE-IN ANIMATIONS
   Elements inside an active slide animate in
   ============================================= */

/* Generic fade-up (used on most text blocks) */
.fade-up {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.slide.active .fade-up {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays — add these alongside .fade-up */
.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;
}

.delay-7 {
  transition-delay: 0.7s;
}

/* Slide-in from left (services list) */
.slide-left {
  opacity: 0;
  transform: translateX(-2rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.slide.active .slide-left {
  opacity: 1;
  transform: translateX(0);
}

/* Scale-in (radar, contact cards) */
.scale-in {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide.active .scale-in {
  opacity: 1;
  transform: scale(1);
}


/* =============================================
   HYPERTEXT SCRAMBLE (hero title effect)
   ============================================= */
.hypertext-letter {
  display: inline-block;
  min-width: 0.55em;
}


/* =============================================
   CURSOR TRAIL DOTS
   Small glowing dots that follow the mouse
   ============================================= */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: #6E00B3;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 0 6px #6E00B3, 0 0 12px rgba(110, 0, 179, 0.4);
}


/* =============================================
   GLITCH LOGO
   Purple chromatic-aberration flicker on the logo
   ============================================= */
.glitch-wrap {
  position: relative;
  display: inline-block;
}

.glitch-wrap img {
  position: relative;
  z-index: 1;
}

.glitch-wrap::before,
.glitch-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--logo-src) center / contain no-repeat;
  opacity: 0.7;
  pointer-events: none;
  z-index: 2;
}

.glitch-wrap::before {
  left: 2px;
  mix-blend-mode: screen;
  animation: glitch-a 8s infinite ease-in-out alternate-reverse;
}

.glitch-wrap::after {
  left: -2px;
  mix-blend-mode: screen;
  filter: hue-rotate(180deg);
  animation: glitch-b 10s infinite ease-in-out alternate-reverse;
}

@keyframes glitch-a {
  0% {
    clip-path: inset(20% 0 80% 0);
    transform: translate(-1px, 0.5px);
  }

  10% {
    clip-path: inset(80% 0 5% 0);
    transform: translate(-1px, 1px);
  }

  20% {
    clip-path: inset(15% 0 30% 0);
    transform: translate(-1px, -0.5px);
  }

  25%,
  85% {
    clip-path: inset(100% 0 0 0);
  }

  90% {
    clip-path: inset(60% 0 10% 0);
    transform: translate(2px, 0.5px);
  }

  95%,
  100% {
    clip-path: inset(100% 0 0 0);
  }
}

@keyframes glitch-b {
  0% {
    clip-path: inset(10% 0 60% 0);
    transform: translate(1px, -0.5px);
  }

  10% {
    clip-path: inset(20% 0 80% 0);
    transform: translate(1px, -0.5px);
  }

  20%,
  80% {
    clip-path: inset(100% 0 0 0);
  }

  86% {
    clip-path: inset(45% 0 20% 0);
    transform: translate(-2px, 0.5px);
  }

  93%,
  100% {
    clip-path: inset(100% 0 0 0);
  }
}


/* =============================================
   SERVICE ITEMS — hover effects
   ============================================= */
.service-row {
  cursor: pointer;
  transition: background 0.4s ease;
}

.service-row:hover {
  background: rgba(17, 0, 28, 0.6);
}

.service-row:hover .svc-title {
  color: #fff;
}

.service-row .svc-arrow {
  opacity: 0;
  transform: translateX(-1rem);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.service-row:hover .svc-arrow {
  opacity: 1;
  transform: translateX(0);
}


/* =============================================
   BORDER BEAM (spinning gradient border)
   Used on Studio stat cards
   ============================================= */
.beam-card {
  position: relative;
  border-radius: 1rem;
  padding: 2px;
  overflow: hidden;
}

.beam-card::before {
  content: "";
  position: absolute;
  inset: -200%;
  background: conic-gradient(from 0deg,
      transparent 30%,
      #6E00B3 45%,
      #b042ff 55%,
      transparent 70%);
  animation: beam-spin var(--speed, 8s) linear infinite;
}

.beam-card-inner {
  position: relative;
  z-index: 1;
  border-radius: inherit;
}

@keyframes beam-spin {
  to {
    transform: rotate(360deg);
  }
}


/* =============================================
   CONTACT RADAR — spinning rings
   ============================================= */
@keyframes spin-cw {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-ccw {
  to {
    transform: rotate(-360deg);
  }
}

.radar-ring-outer {
  animation: spin-cw 40s linear infinite;
}

.radar-ring-middle {
  animation: spin-ccw 60s linear infinite;
}

.radar-ring-inner {
  animation: spin-cw 20s linear infinite;
}


/* =============================================
   GLASS CARD — small info cards on Contact
   ============================================= */
.glass-card {
  background: rgba(10, 0, 20, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(110, 0, 179, 0.2);
}

.glass-card:hover {
  border-color: rgba(110, 0, 179, 0.5);
}


/* =============================================
   PRELOADER WAVE BARS
   ============================================= */
@keyframes wave {

  0%,
  100% {
    transform: scaleY(1);
  }

  50% {
    transform: scaleY(2);
  }
}

.wave-bar {
  animation: wave 1s infinite ease-in-out;
}


/* =============================================
   GLOW HELPERS
   ============================================= */
.glow-purple {
  box-shadow: 0 0 14px #6E00B3, 0 0 28px rgba(110, 0, 179, 0.25);
}

.text-glow {
  text-shadow: 0 0 20px #6E00B3, 0 0 40px rgba(110, 0, 179, 0.3);
}


/* =============================================
   GLITCH LOGO ANIMATION
   ============================================= */
.glitch-wrap {
  position: relative;
  display: inline-block;
}

.glitch-wrap::before,
.glitch-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--logo-src) center/contain no-repeat;
  opacity: 0.7;
  pointer-events: none;
}

.glitch-wrap::before {
  animation: glitch-1 4s infinite linear alternate-reverse;
  mix-blend-mode: screen;
  filter: hue-rotate(40deg);
}

.glitch-wrap::after {
  animation: glitch-2 3s infinite linear alternate;
  mix-blend-mode: screen;
  filter: hue-rotate(-40deg);
}

@keyframes glitch-1 {
  0% {
    clip-path: inset(0 0 80% 0);
    transform: translate(-3px, 2px);
  }

  20% {
    clip-path: inset(40% 0 30% 0);
    transform: translate(2px, -1px);
  }

  40% {
    clip-path: inset(70% 0 5% 0);
    transform: translate(-2px, 0);
  }

  60% {
    clip-path: inset(10% 0 60% 0);
    transform: translate(1px, 1px);
  }

  80% {
    clip-path: inset(50% 0 20% 0);
    transform: translate(-1px, -2px);
  }

  100% {
    clip-path: inset(0 0 90% 0);
    transform: translate(3px, 0);
  }
}

@keyframes glitch-2 {
  0% {
    clip-path: inset(85% 0 0 0);
    transform: translate(2px, -1px);
  }

  25% {
    clip-path: inset(20% 0 50% 0);
    transform: translate(-1px, 2px);
  }

  50% {
    clip-path: inset(60% 0 10% 0);
    transform: translate(3px, 0);
  }

  75% {
    clip-path: inset(5% 0 70% 0);
    transform: translate(-2px, -1px);
  }

  100% {
    clip-path: inset(35% 0 40% 0);
    transform: translate(1px, 1px);
  }
}

#demo-form::-webkit-scrollbar {
  width: 6px;
}

#demo-form::-webkit-scrollbar-thumb {
  background: rgba(110, 0, 179, 0.4);
  border-radius: 10px;
}

#demo-form::-webkit-scrollbar-track {
  background: transparent;
}