/* =========================
   LOADER
========================= */

.loader{
  position:fixed;
  inset:0;
  z-index:20000;
  background:
    radial-gradient(circle at center, rgba(120,90,255,0.12), transparent 42%),
    #050505;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:opacity 1.4s ease, visibility 1.4s ease;
}

.loader.hide{
  opacity:0;
  visibility:hidden;
}

.loader-logo{
  font-size:2rem;
  letter-spacing:10px;
  margin-bottom:16px;
  background:linear-gradient(90deg,#fff,#b68cff,#ffd6a0,#fff);
  background-size:300%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:loaderGradient 3s ease-in-out infinite;
}

.loader-sub{
  font-size:0.72rem;
  letter-spacing:5px;
  opacity:0.55;
  margin-bottom:34px;
}

.loader-line{
  width:240px;
  height:1px;
  background:linear-gradient(to right, transparent, rgba(255,255,255,0.95), transparent);
  animation:loaderLine 2.4s ease-in-out infinite;
}

@keyframes loaderGradient{
  0%{ background-position:0%; opacity:0.55; }
  50%{ background-position:100%; opacity:1; }
  100%{ background-position:0%; opacity:0.55; }
}

/* =========================
   SCROLL PROGRESS
========================= */

.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  width:0%;
  height:2px;
  z-index:21000;
  background:
    linear-gradient(
      to right,
      #ffffff,
      #9f7cff,
      #ffd6a0
    );
  box-shadow:
    0 0 14px rgba(159,124,255,0.45);
}

/* =========================
   BACKGROUND DEPTH
========================= */

.background-depth{
  position:fixed;
  inset:0;
  z-index:-5;
  overflow:hidden;
  pointer-events:none;
}

.background-depth::before{
  content:"";
  position:absolute;
  top:-15%;
  left:-10%;
  width:900px;
  height:900px;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(110,70,255,0.10),
      transparent 70%
    );
  filter:blur(120px);
  animation:bgFloatOne 18s ease-in-out infinite;
}

.background-depth::after{
  content:"";
  position:absolute;
  right:-15%;
  bottom:-20%;
  width:800px;
  height:800px;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(255,170,120,0.06),
      transparent 70%
    );
  filter:blur(140px);
  animation:bgFloatTwo 22s ease-in-out infinite;
}

.depth-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(
      rgba(255,255,255,0.012) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,0.012) 1px,
      transparent 1px
    );
  background-size:80px 80px;
  mask-image:
    radial-gradient(
      circle at center,
      black 35%,
      transparent 100%
    );
  opacity:0.2;
}

.depth-vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle,
      transparent 45%,
      rgba(0,0,0,0.6) 100%
    );
}

.depth-blur{
  position:absolute;
  top:35%;
  left:50%;
  transform:translate(-50%,-50%);
  width:700px;
  height:700px;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(255,255,255,0.02),
      transparent 70%
    );
  filter:blur(100px);
  animation:pulseBlur 12s ease-in-out infinite;
}

/* =========================
   TITLE REVEAL
========================= */

.hero-title span{
  display:block;
  overflow:hidden;
  opacity:0;
  transform:translateY(120px);
  animation:
    titleReveal 1.3s
    cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
}

.hero-title span:nth-child(2){
  animation-delay:0.18s;
}

/* =========================
   ADVANCED SECTION REVEAL
========================= */

.reveal{
  opacity:0;
  transform:
    translateY(76px)
    scale(0.985);
  filter:blur(10px);
  transition:
    opacity 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.active{
  opacity:1;
  transform:
    translateY(0)
    scale(1);
  filter:blur(0);
}

/* =========================
   VISUAL CINEMATIC MOTION
========================= */

.wide-visual{
  isolation:isolate;
}

.wide-visual img{
  transform:scale(1.015);
  transition:
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.2s ease;
}

.wide-visual:hover img{
  transform:scale(1.04);
  filter:
    brightness(1.05)
    contrast(1.04)
    saturate(1.05);
}

.wide-visual::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:70%;
  height:100%;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(
      115deg,
      transparent,
      rgba(255,255,255,0.10),
      transparent
    );
  transform:skewX(-18deg);
  transition:left 1.1s ease;
}

.wide-visual:hover::before{
  left:130%;
}

/* =========================
   GLASS CARD MOTION
========================= */

.glass-card{
  transform-style:preserve-3d;
  will-change:transform;
}

.glass-card::before{
  content:"";
  position:absolute;
  top:-100%;
  left:-100%;
  width:220%;
  height:220%;
  background:
    linear-gradient(
      120deg,
      transparent,
      rgba(255,255,255,0.052),
      transparent
    );
  transform:rotate(12deg);
  transition:1s;
}

.glass-card:hover::before{
  top:-20%;
  left:-20%;
}

.glass-card *{
  transform:translateZ(24px);
}

/* =========================
   TIMELINE MOTION
========================= */

.timeline-item{
  transform-style:preserve-3d;
}

.timeline-item .timeline-year,
.timeline-item .timeline-content{
  transform:translateZ(20px);
}

/* =========================
   GALLERY
========================= */

.gallery-slide{
  transform:scale(1.03);
  transition:
    opacity 1s ease,
    transform 1.8s ease,
    background-size 6s ease;
}

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

.gallery-slide::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      circle at var(--x, 50%) var(--y, 50%),
      rgba(255,255,255,0.10),
      transparent 45%
    );
  z-index:1;
  opacity:0;
  transition:opacity 0.4s ease;
}

.gallery-slider:hover .gallery-slide.active::before{
  opacity:1;
}

.gallery-btn{
  transition:
    background 0.3s ease,
    transform 0.3s ease,
    border 0.3s ease;
}

.gallery-btn:hover{
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.45);
  transform:
    translateY(-50%)
    scale(1.05);
}

.dot{
  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.dot.active{
  box-shadow:
    0 0 10px rgba(255,255,255,0.7);
}

/* =========================
   PARTICLES
========================= */

.particles{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.particles span{
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(255,255,255,0.25);
  box-shadow:
    0 0 12px rgba(180,140,255,0.35);
  animation:floatParticle 22s linear infinite;
}

.particles span:nth-child(1){ left:8%; top:90%; animation-duration:22s; }
.particles span:nth-child(2){ left:18%; top:80%; animation-duration:18s; animation-delay:2s; }
.particles span:nth-child(3){ left:32%; top:95%; animation-duration:26s; animation-delay:4s; }
.particles span:nth-child(4){ left:48%; top:85%; animation-duration:20s; animation-delay:1s; }
.particles span:nth-child(5){ left:62%; top:92%; animation-duration:24s; animation-delay:3s; }
.particles span:nth-child(6){ left:76%; top:88%; animation-duration:21s; animation-delay:5s; }
.particles span:nth-child(7){ left:88%; top:96%; animation-duration:28s; animation-delay:6s; }
.particles span:nth-child(8){ left:94%; top:82%; animation-duration:19s; animation-delay:2.5s; }

/* =========================
   MOUSE LIGHT
========================= */

.mouse-light{
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(255,255,255,0.08),
      transparent 70%
    );
  filter:blur(40px);
  pointer-events:none;
  transform:translate(-50%, -50%);
  z-index:1;
  transition:
    left 0.08s linear,
    top 0.08s linear;
}

/* =========================
   FILM EFFECT
========================= */

.film-grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:0.025;
  background-image:
    url("https://grainy-gradients.vercel.app/noise.svg");
  mix-blend-mode:soft-light;
}

.vignette{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9998;
  background:
    radial-gradient(
      circle,
      transparent 45%,
      rgba(0,0,0,0.4) 100%
    );
}

/* =========================
   PREMIUM CURSOR
========================= */

.cursor{
  position:fixed;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.25);
  pointer-events:none;
  z-index:10000;
  transform:translate(-50%, -50%);
  transition:
    width 0.3s ease,
    height 0.3s ease,
    border 0.3s ease,
    background 0.3s ease;
  backdrop-filter:blur(4px);
  mix-blend-mode:screen;
}

.cursor-dot{
  position:fixed;
  width:6px;
  height:6px;
  border-radius:50%;
  background:white;
  pointer-events:none;
  z-index:10001;
  transform:translate(-50%, -50%);
  box-shadow:
    0 0 10px rgba(255,255,255,0.7);
}

.cursor.active{
  width:78px;
  height:78px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(180,140,255,0.35);
}

/* =========================
   SCROLL INDICATOR
========================= */

.scroll-indicator{
  position:absolute;
  bottom:40px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-size:0.78rem;
  opacity:0.55;
}

.scroll-indicator span{
  width:1px;
  height:50px;
  background:white;
}

/* =========================
   SELECTION
========================= */

::selection{
  background:rgba(180,140,255,0.3);
  color:white;
}

/* =========================
   KEYFRAMES
========================= */

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

@keyframes loaderLine{
  0%{
    transform:scaleX(0);
    opacity:0;
  }

  50%{
    transform:scaleX(1);
    opacity:1;
  }

  100%{
    transform:scaleX(0);
    opacity:0;
  }
}

@keyframes titleReveal{
  0%{
    opacity:0;
    transform:translateY(120px);
  }

  100%{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes floatParticle{
  0%{
    transform:
      translateY(0)
      scale(0.6);
    opacity:0;
  }

  15%{
    opacity:0.5;
  }

  80%{
    opacity:0.3;
  }

  100%{
    transform:
      translateY(-120vh)
      scale(1.2);
    opacity:0;
  }
}

@keyframes bgFloatOne{
  0%{ transform:translate(0,0); }
  50%{ transform:translate(80px,40px); }
  100%{ transform:translate(0,0); }
}

@keyframes bgFloatTwo{
  0%{ transform:translate(0,0); }
  50%{ transform:translate(-70px,-30px); }
  100%{ transform:translate(0,0); }
}

@keyframes pulseBlur{
  0%,100%{
    opacity:0.22;
    transform:
      translate(-50%,-50%)
      scale(1);
  }

  50%{
    opacity:0.35;
    transform:
      translate(-50%,-50%)
      scale(1.05);
  }
}

/* =========================
   REDUCED MOTION
========================= */

@media(prefers-reduced-motion:reduce){

  *{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }

}