/* ===================================================
   VFX & SPECIAL BUTTON EFFECTS
   =================================================== */

/* ===== BUTTON RIPPLE EFFECT ===== */
.btn{position:relative;overflow:hidden}
.btn .ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.35);
  transform:scale(0);
  animation:rippleAnim .7s ease-out forwards;
  pointer-events:none;
}
@keyframes rippleAnim{
  to{transform:scale(4);opacity:0}
}

/* ===== BUTTON SHIMMER / SHINE SWEEP ===== */
.btn::after{
  content:'';
  position:absolute;
  top:-50%;left:-75%;
  width:50%;height:200%;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,.15) 50%,
    rgba(255,255,255,0) 60%,
    transparent 100%
  );
  transform:skewX(-20deg);
  animation:shimmer 3.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shimmer{
  0%,100%{left:-75%}
  50%{left:125%}
}

/* ===== BUTTON NEON GLOW PULSE ===== */
.btn-primary{
  animation:neonPulse 3s ease-in-out infinite;
}
@keyframes neonPulse{
  0%,100%{box-shadow:0 4px 30px rgba(236,72,153,.3),0 0 0 0 rgba(236,72,153,0)}
  50%{box-shadow:0 4px 40px rgba(236,72,153,.5),0 0 60px rgba(236,72,153,.15)}
}

/* ===== BUTTON BORDER ANIMATION ===== */
.btn-outline{
  position:relative;
  border:none!important;
  background:transparent;
  z-index:1;
}
.btn-outline::before{
  content:'';
  position:absolute;inset:0;
  border-radius:50px;
  padding:1.5px;
  background:conic-gradient(
    from var(--border-angle,0deg),
    transparent 0%,
    var(--pink) 12.5%,
    var(--fuchsia) 25%,
    transparent 37.5%,
    transparent 100%
  );
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:rotateBorder 4s linear infinite;
  pointer-events:none;
}
@keyframes rotateBorder{
  to{--border-angle:360deg}
}
@property --border-angle{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}

/* ===== PARTICLE BURST ON CLICK ===== */
.btn-burst{position:relative}
.burst-particle{
  position:absolute;
  width:4px;height:4px;
  border-radius:50%;
  pointer-events:none;
  animation:burstAnim .8s cubic-bezier(.25,.46,.45,.94) forwards;
}
@keyframes burstAnim{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{opacity:0}
}

/* ===== HOLOGRAPHIC / IRIDESCENT BUTTON ===== */
.btn-primary:hover::after{
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(236,72,153,.1) 20%,
    rgba(217,70,239,.15) 35%,
    rgba(139,92,246,.15) 50%,
    rgba(236,72,153,.1) 65%,
    transparent 100%
  );
  animation:holographicSweep 1.2s ease-out;
}
@keyframes holographicSweep{
  0%{left:-75%;opacity:0}
  20%{opacity:1}
  100%{left:125%;opacity:0}
}

/* ===== MAGNETIC DISTORTION ON BUTTONS ===== */
.btn-magnetic:active{
  filter:url(#distort);
  transition:filter .1s;
}

/* ===== GLITCH BUTTON HOVER ===== */
.btn-primary:hover{
  animation:btnGlitch .15s steps(2) 1,neonPulse 3s ease-in-out infinite;
}
@keyframes btnGlitch{
  0%{transform:translateY(-3px) translateX(0)}
  25%{transform:translateY(-3px) translateX(-2px);clip-path:inset(20% 0 40% 0)}
  50%{transform:translateY(-3px) translateX(2px);clip-path:inset(40% 0 20% 0)}
  75%{transform:translateY(-3px) translateX(-1px);clip-path:inset(10% 0 60% 0)}
  100%{transform:translateY(-3px) translateX(0);clip-path:none}
}

/* ===== VFX: SCAN LINES OVERLAY ===== */
.scanlines{
  position:fixed;inset:0;z-index:9997;
  pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.03) 2px,
    rgba(0,0,0,.03) 4px
  );
  opacity:0;
  transition:opacity .5s;
}
body.loaded .scanlines{opacity:1}

/* VFX: Horizontal scan beam */
.scan-beam{
  position:fixed;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(236,72,153,.3) 20%,
    rgba(236,72,153,.6) 50%,
    rgba(236,72,153,.3) 80%,
    transparent 100%
  );
  z-index:9997;
  pointer-events:none;
  animation:scanBeam 6s linear infinite;
  opacity:.4;
  filter:blur(1px);
  box-shadow:0 0 15px rgba(236,72,153,.3);
}
@keyframes scanBeam{
  0%{top:-2px}
  100%{top:100vh}
}

/* ===== VFX: CHROMATIC ABERRATION ON IMAGES ===== */
.portfolio-item:hover img{
  animation:chromatic .3s ease-out;
}
@keyframes chromatic{
  0%{filter:saturate(.8) brightness(.9)}
  25%{filter:saturate(1.2) brightness(1.1) hue-rotate(5deg);text-shadow:2px 0 #ec4899,-2px 0 #8b5cf6}
  50%{filter:saturate(1) brightness(1) hue-rotate(-3deg)}
  100%{filter:saturate(1) brightness(1) hue-rotate(0deg)}
}

/* ===== VFX: LIGHT LEAK / FLARE ===== */
.light-leak{
  position:fixed;
  inset:0;
  z-index:9996;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(
    ellipse at 30% 50%,
    rgba(236,72,153,.08) 0%,
    transparent 50%
  );
  animation:lightLeak 8s ease-in-out infinite;
}
@keyframes lightLeak{
  0%,100%{opacity:0;transform:translateX(-20%)}
  15%{opacity:1}
  30%{opacity:0;transform:translateX(20%)}
  50%{opacity:0;transform:translateX(30%)}
  65%{opacity:.8;background:radial-gradient(ellipse at 70% 40%,rgba(217,70,239,.06) 0%,transparent 50%)}
  80%{opacity:0;transform:translateX(-10%)}
}

/* ===== VFX: FILM GRAIN (animated) ===== */
.film-grain{
  position:fixed;inset:0;
  z-index:9995;pointer-events:none;
  opacity:.035;
  animation:grainShift .5s steps(6) infinite;
}
.film-grain::before{
  content:'';
  position:absolute;
  inset:-200%;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:256px 256px;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}
  16%{transform:translate(-5%,-5%)}
  33%{transform:translate(3%,-8%)}
  50%{transform:translate(-8%,2%)}
  66%{transform:translate(5%,5%)}
  83%{transform:translate(-3%,8%)}
  100%{transform:translate(0,0)}
}

/* ===== VFX: VIGNETTE ===== */
.vignette{
  position:fixed;inset:0;
  z-index:9994;pointer-events:none;
  background:radial-gradient(
    ellipse at center,
    transparent 55%,
    rgba(0,0,0,.4) 100%
  );
}

/* ===== VFX: GLITCH FLICKER (subtle) ===== */
.hero h1:hover .highlight{
  animation:textGlitchFlicker .4s steps(3) 1;
}
@keyframes textGlitchFlicker{
  0%{opacity:1;transform:translate(0)}
  10%{opacity:.8;transform:translate(-2px,1px)}
  20%{opacity:1;transform:translate(1px,-1px)}
  30%{opacity:.7;transform:translate(0,2px);filter:hue-rotate(20deg)}
  40%{opacity:1;transform:translate(2px,0)}
  50%{opacity:.9;transform:translate(-1px,-2px);filter:hue-rotate(-10deg)}
  60%{opacity:1;transform:translate(0)}
  100%{opacity:1;transform:translate(0);filter:none}
}

/* ===== VFX: ELECTRIC/SPARK BORDERS ON CARDS ===== */
.service-card{
  --spark-x:50%;
  --spark-y:50%;
}
.service-card::after{
  background:
    radial-gradient(circle at var(--spark-x) var(--spark-y),var(--pink) 0%,transparent 50%),
    var(--gradient);
  height:2px;
}

/* ===== PLAY BUTTON SONIC RINGS ===== */
.play-btn::after{
  content:'';position:absolute;inset:-8px;
  border:1.5px solid rgba(236,72,153,.3);
  border-radius:50%;
  animation:playPulse 2s ease-out infinite;
}
.play-btn .ring-2{
  position:absolute;inset:-16px;
  border:1px solid rgba(236,72,153,.15);
  border-radius:50%;
  animation:playPulse 2s ease-out infinite .4s;
}
.play-btn .ring-3{
  position:absolute;inset:-24px;
  border:1px solid rgba(236,72,153,.08);
  border-radius:50%;
  animation:playPulse 2s ease-out infinite .8s;
}

/* ===== SHOWREEL BUTTON EXTRA RINGS ===== */
.showreel-play .ring-2{
  position:absolute;inset:-30px;
  border:1px solid rgba(236,72,153,.06);
  border-radius:50%;
  animation:showreelPulse 3s ease-out infinite 1s;
}
.showreel-play .ring-3{
  position:absolute;inset:-45px;
  border:1px solid rgba(236,72,153,.04);
  border-radius:50%;
  animation:showreelPulse 3s ease-out infinite 2s;
}

/* ===== NAV CTA SPECIAL ===== */
.nav-cta{
  overflow:hidden;
}
.nav-cta::after{
  content:'';
  position:absolute;
  top:-50%;left:-75%;
  width:50%;height:200%;
  background:linear-gradient(
    90deg,transparent,rgba(255,255,255,.2),transparent
  );
  transform:skewX(-20deg);
  animation:shimmer 4s ease-in-out infinite;
  pointer-events:none;
}

/* ===== SUBMIT BUTTON ENERGY FIELD ===== */
.btn-submit{
  overflow:visible!important;
}
.btn-submit::before{
  content:'';
  position:absolute;inset:-2px;
  border-radius:50px;
  background:var(--gradient);
  z-index:-1;
  filter:blur(12px);
  opacity:0;
  transition:opacity .5s;
}
.btn-submit:hover::before{
  opacity:.5;
  animation:energyField 2s ease-in-out infinite;
}
@keyframes energyField{
  0%,100%{filter:blur(12px);transform:scale(1)}
  50%{filter:blur(18px);transform:scale(1.04)}
}

/* ===== HERO BUTTON SPOTLIGHT ===== */
.hero-buttons .btn-primary::before{
  content:'';
  position:absolute;
  top:0;left:50%;
  width:100px;height:100%;
  background:radial-gradient(ellipse,rgba(255,255,255,.12) 0%,transparent 70%);
  transform:translateX(-50%);
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
}
.hero-buttons .btn-primary:hover::before{
  opacity:1;
}

/* ===== VFX: DATA STREAM (Matrix-like subtle) ===== */
.data-stream{
  position:fixed;
  top:0;right:40px;
  width:1px;height:100vh;
  z-index:9993;
  pointer-events:none;
  overflow:hidden;
  opacity:.06;
}
.data-stream::before{
  content:'';
  position:absolute;
  top:-100%;left:0;
  width:100%;height:50%;
  background:linear-gradient(to bottom,transparent,var(--pink),transparent);
  animation:dataFlow 4s linear infinite;
}
.data-stream-2{right:auto;left:40px}
.data-stream-2::before{animation-delay:2s;animation-duration:5s}
@keyframes dataFlow{
  0%{top:-50%}
  100%{top:150%}
}

/* ===== LETTERBOXING TRANSITION ===== */
.cinema-bars.active .cinema-bar-top,
.cinema-bars.active .cinema-bar-bottom{
  box-shadow:inset 0 0 30px rgba(236,72,153,.08);
}