/* ===================================================
   CREATIVE — Ultra Visual Effects & Interactive Design
   =================================================== */

/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress{
  position:fixed;top:0;left:0;
  height:2px;width:0%;
  background:var(--gradient);
  z-index:100000;
  pointer-events:none;
  transition:width .1s linear;
  box-shadow:0 0 12px rgba(236,72,153,.5),0 0 30px rgba(236,72,153,.2);
}

/* ===== CURSOR TRAIL ===== */
.cursor-trail-dot{
  position:fixed;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--pink);
  pointer-events:none;
  z-index:99990;
  opacity:0;
  transform:scale(0);
  transition:none;
  mix-blend-mode:screen;
}

/* ===== 3D FLOATING ELEMENTS ===== */
.floating-elements{
  position:fixed;inset:0;
  pointer-events:none;
  z-index:1;
  perspective:1000px;
}
.float-el{
  position:absolute;
  border:1px solid rgba(236,72,153,.08);
  opacity:.08;
  animation:floatOrbit linear infinite;
}
.float-el.circle{border-radius:50%}
.float-el.ring{
  border-radius:50%;
  background:transparent;
  border:1.5px solid rgba(236,72,153,.06);
}
.float-el-1{width:80px;height:80px;top:15%;left:8%;animation-duration:25s}
.float-el-2{width:40px;height:40px;top:60%;right:5%;animation-duration:18s;animation-delay:-5s}
.float-el-3{width:120px;height:120px;bottom:20%;left:15%;animation-duration:30s;animation-delay:-10s}
.float-el-4{width:55px;height:55px;top:25%;right:12%;animation-duration:22s;animation-delay:-3s}
.float-el-5{width:35px;height:35px;bottom:35%;right:20%;animation-duration:20s;animation-delay:-8s}
.float-el-6{width:90px;height:90px;top:70%;left:40%;animation-duration:28s;animation-delay:-15s}
@keyframes floatOrbit{
  0%{transform:translateY(0) rotateX(0deg) rotateZ(0deg)}
  25%{transform:translateY(-30px) rotateX(90deg) rotateZ(90deg)}
  50%{transform:translateY(-15px) rotateX(180deg) rotateZ(180deg)}
  75%{transform:translateY(-40px) rotateX(270deg) rotateZ(270deg)}
  100%{transform:translateY(0) rotateX(360deg) rotateZ(360deg)}
}

/* ===== MORPHING SVG BLOB ===== */
.morph-blob-container{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:600px;height:600px;
  z-index:0;
  pointer-events:none;
  opacity:.04;
  filter:blur(40px);
}
.morph-blob-container svg{width:100%;height:100%}

/* ===== CONSTELLATION CANVAS ===== */
.constellation-canvas{
  position:fixed;inset:0;
  z-index:0;pointer-events:none;
}

/* ===== SPOTLIGHT FOLLOW CURSOR ===== */
.spotlight{
  position:fixed;
  width:350px;height:350px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(236,72,153,.06) 0%,transparent 70%);
  pointer-events:none;
  z-index:1;
  transform:translate(-50%,-50%);
  transition:left .3s ease-out,top .3s ease-out;
  mix-blend-mode:screen;
}

/* ===== TEXT SCRAMBLE STYLING ===== */
.scramble-text .char{
  display:inline-block;
  transition:all .1s;
}
.scramble-text .char.decoding{
  color:var(--pink);
  text-shadow:0 0 8px rgba(236,72,153,.5);
}

/* ===== VIDEO MODAL ===== */
.video-modal{
  position:fixed;inset:0;
  z-index:100001;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:all .5s var(--ease-out-expo);
}
.video-modal.active{opacity:1;visibility:visible}
.video-modal-bg{
  position:absolute;inset:0;
  background:rgba(5,5,7,.95);
  backdrop-filter:blur(30px);
}
.video-modal-content{
  position:relative;z-index:2;
  width:90%;max-width:960px;
  aspect-ratio:16/9;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(236,72,153,.15);
  box-shadow:0 0 80px rgba(236,72,153,.15),0 0 200px rgba(236,72,153,.05);
  transform:scale(.85) rotateX(5deg);
  transition:transform .7s var(--ease-out-expo);
}
.video-modal.active .video-modal-content{
  transform:scale(1) rotateX(0);
}
.video-modal-content video,.video-modal-content iframe{
  width:100%;height:100%;object-fit:cover;
  border:none;
}
.video-modal-placeholder{
  width:100%;height:100%;
  background:linear-gradient(135deg,#0a0a0f,#111118);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:1rem;
  color:var(--text-muted);
}
.video-modal-placeholder svg{
  width:64px;height:64px;
  fill:none;stroke:var(--pink);stroke-width:1.5;
  animation:playModalPulse 2s ease-in-out infinite;
}
@keyframes playModalPulse{
  0%,100%{transform:scale(1);opacity:.6}
  50%{transform:scale(1.1);opacity:1}
}
.video-modal-close{
  position:absolute;top:1.5rem;right:1.5rem;z-index:3;
  width:44px;height:44px;
  border-radius:50%;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.2rem;
  cursor:pointer;
  transition:all .3s;
}
.video-modal-close:hover{
  background:var(--pink);border-color:var(--pink);
  transform:rotate(90deg);
}

/* ===== SOUND WAVE EQUALIZER ===== */
.equalizer{
  display:flex;align-items:flex-end;gap:3px;
  height:24px;
}
.eq-bar{
  width:3px;
  background:var(--gradient);
  border-radius:2px;
  animation:eqBounce 1s ease-in-out infinite alternate;
}
.eq-bar:nth-child(1){animation-duration:.8s;height:30%}
.eq-bar:nth-child(2){animation-duration:.6s;height:60%;animation-delay:.1s}
.eq-bar:nth-child(3){animation-duration:.9s;height:40%;animation-delay:.2s}
.eq-bar:nth-child(4){animation-duration:.5s;height:80%;animation-delay:.05s}
.eq-bar:nth-child(5){animation-duration:.7s;height:50%;animation-delay:.15s}
.eq-bar:nth-child(6){animation-duration:1s;height:35%;animation-delay:.25s}
.eq-bar:nth-child(7){animation-duration:.65s;height:65%;animation-delay:.1s}
@keyframes eqBounce{
  0%{height:15%}
  100%{height:100%}
}

/* ===== PARALLAX MOUSE HERO LAYER ===== */
.hero-parallax-layer{
  position:absolute;inset:0;
  pointer-events:none;
  transition:transform .4s ease-out;
}

/* ===== SCROLL COLOR SHIFT ===== */
body{
  transition:background-color 1.5s ease;
}
body.section-services{background-color:#060508}
body.section-portfolio{background-color:#050509}
body.section-process{background-color:#07050a}
body.section-testimonials{background-color:#050608}

/* ===== CREATIVE SECTION DIVIDERS ===== */
.section-divider{
  position:relative;
  height:120px;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.section-divider::before{
  content:'';position:absolute;
  width:80%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(236,72,153,.15),rgba(139,92,246,.1),transparent);
}
.section-divider .divider-diamond{
  width:8px;height:8px;
  background:var(--pink);
  transform:rotate(45deg);
  position:relative;z-index:1;
  box-shadow:0 0 15px rgba(236,72,153,.4);
}

/* ===== CREATIVE NAV CTA EQUALIZER ===== */
.nav-cta .equalizer{
  height:14px;
  margin-left:6px;
}
.nav-cta .eq-bar{width:2px}

/* ===== GLOWING ORB (hero decoration) ===== */
.hero-orb{
  position:absolute;
  width:300px;height:300px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(236,72,153,.15) 0%,rgba(217,70,239,.08) 40%,transparent 70%);
  filter:blur(60px);
  pointer-events:none;
  animation:orbFloat 12s ease-in-out infinite;
}
.hero-orb-1{top:10%;right:10%;animation-delay:0s}
.hero-orb-2{bottom:15%;left:5%;animation-delay:-6s;width:250px;height:250px;
  background:radial-gradient(circle,rgba(139,92,246,.12) 0%,rgba(236,72,153,.06) 40%,transparent 70%);
}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  25%{transform:translate(20px,-30px) scale(1.1)}
  50%{transform:translate(-10px,-15px) scale(.95)}
  75%{transform:translate(-25px,20px) scale(1.05)}
}

/* ===== CREATIVE COUNTER STYLE ===== */
.stat-number{
  position:relative;
}
.stat-number::after{
  content:'';
  position:absolute;bottom:-8px;left:50%;
  width:30px;height:2px;
  background:var(--gradient);
  transform:translateX(-50%);
  border-radius:1px;
}

/* ===== HOVER REVEAL LINE ON LINKS ===== */
.footer-col a{
  position:relative;overflow:hidden;
}
.footer-col a::after{
  content:'';position:absolute;
  bottom:0;left:0;
  width:0;height:1px;
  background:var(--pink);
  transition:width .4s var(--ease-out-expo);
}
.footer-col a:hover::after{width:100%}

/* ===== STAGGERED REVEAL ===== */
.stagger-reveal>*{
  opacity:0;
  transform:translateY(30px);
  transition:all .6s var(--ease-out-expo);
}
.stagger-reveal.active>*:nth-child(1){transition-delay:.05s}
.stagger-reveal.active>*:nth-child(2){transition-delay:.1s}
.stagger-reveal.active>*:nth-child(3){transition-delay:.15s}
.stagger-reveal.active>*:nth-child(4){transition-delay:.2s}
.stagger-reveal.active>*:nth-child(5){transition-delay:.25s}
.stagger-reveal.active>*:nth-child(6){transition-delay:.3s}
.stagger-reveal.active>*{
  opacity:1;transform:translateY(0);
}

/* ===== CREATIVE PORTFOLIO HOVER EFFECT ===== */
.portfolio-item::before{
  content:'';position:absolute;inset:0;
  background:conic-gradient(from 180deg at 50% 50%,
    transparent 0deg,
    rgba(236,72,153,.1) 60deg,
    transparent 120deg,
    rgba(139,92,246,.08) 180deg,
    transparent 240deg,
    rgba(217,70,239,.1) 300deg,
    transparent 360deg
  );
  opacity:0;z-index:3;
  border-radius:inherit;
  transition:opacity .6s;
  pointer-events:none;
  mix-blend-mode:screen;
}
.portfolio-item:hover::before{opacity:1}

/* ===== MAGNETIC HOVER GLOW ON CARDS ===== */
.service-card .card-glow{
  position:absolute;
  width:200px;height:200px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(236,72,153,.1) 0%,transparent 70%);
  pointer-events:none;
  opacity:0;
  transition:opacity .4s;
  transform:translate(-50%,-50%);
  filter:blur(20px);
}
.service-card:hover .card-glow{opacity:1}

/* ===== CREATIVE MANIFESTO ===== */
.creative-manifesto{
  position:relative;
  z-index:2;
  padding:8rem 4rem 5rem;
}
.manifesto-grid{
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:2rem;
  align-items:start;
}
.manifesto-left{
  background:linear-gradient(145deg,rgba(236,72,153,.08),rgba(255,255,255,.02));
  border:1px solid rgba(236,72,153,.16);
  border-radius:28px;
  padding:2.4rem;
  position:relative;
  overflow:hidden;
}
.manifesto-left::after{
  content:'';
  position:absolute;
  width:180px;
  height:180px;
  right:-40px;
  top:-40px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(236,72,153,.25),transparent 70%);
  filter:blur(8px);
}
.manifesto-kicker{
  display:inline-flex;
  padding:.35rem .8rem;
  border:1px solid rgba(236,72,153,.35);
  border-radius:999px;
  font-size:.68rem;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--pink-light);
  margin-bottom:1.2rem;
}
.manifesto-left h2{
  font-size:clamp(2rem,4.2vw,3.2rem);
  line-height:1.08;
  letter-spacing:-1.5px;
  margin-bottom:1rem;
}
.manifesto-left h2 span,
.manifesto-left h2 em{
  font-style:normal;
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.manifesto-left p{
  color:var(--text-muted);
  max-width:52ch;
  margin-bottom:1.3rem;
}
.manifesto-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}
.manifesto-tag{
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  color:var(--text-dim);
  border-radius:999px;
  padding:.5rem .9rem;
  font-size:.74rem;
  transition:all .3s var(--ease-out-expo);
  cursor:pointer;
}
.manifesto-tag:hover,
.manifesto-tag.is-active{
  border-color:rgba(236,72,153,.45);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(236,72,153,.2);
}
.manifesto-right{
  display:grid;
  gap:1rem;
}
.manifesto-card{
  border:1px solid var(--border);
  border-radius:22px;
  background:rgba(255,255,255,.02);
  backdrop-filter:blur(8px);
  padding:1.2rem 1.1rem;
  transform-origin:center;
  transition:transform .35s var(--ease-spring),border-color .35s;
}
.manifesto-card:hover{
  transform:translateY(-6px) rotate(-.4deg);
  border-color:rgba(236,72,153,.28);
}
.manifesto-label{
  font-size:.65rem;
  letter-spacing:1.8px;
  color:var(--pink-light);
  text-transform:uppercase;
}
.manifesto-card strong{
  display:block;
  font-size:1.18rem;
  margin:.4rem 0 .45rem;
}
.manifesto-card p{
  color:var(--text-muted);
  font-size:.86rem;
}
.manifesto-card.card-a{margin-right:2.2rem}
.manifesto-card.card-b{margin-left:2rem}
.manifesto-card.card-c{margin-right:1rem}

@media(max-width:940px){
  .creative-manifesto{padding:5.5rem 1.2rem 3.5rem}
  .manifesto-grid{grid-template-columns:1fr}
  .manifesto-card.card-a,.manifesto-card.card-b,.manifesto-card.card-c{margin:0}
}