/* ==========================================================================
   ADVANCED ANIMATIONS & EFFECTS - DOUBLE DIAMOND
   Handles Preloader, Cursor, Cinematic Noise, and Holographic Glass.
   ========================================================================== */

/* --- 1. PRELOADER (CINEMATIC LOGO SIGNATURE) --- */
.loading-lock {
  overflow: hidden;
  height: 100vh;
}

#preloader {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 52%, rgba(205, 225, 244, 0.12), transparent 31%),
    linear-gradient(145deg, #020304 0%, #07121b 48%, #000000 100%);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: opacity 0.9s cubic-bezier(0.7, 0, 0.3, 1), visibility 0.9s cubic-bezier(0.7, 0, 0.3, 1);
}

#preloader::before,
#preloader::after {
  content: "";
  position: absolute;
}

#preloader::before {
  width: min(70vw, 620px);
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(205, 225, 244, 0.28) 20%, rgba(205, 225, 244, 0.08) 48%, transparent 72%),
    linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  filter: blur(14px);
  opacity: 0.28;
  transform: translate(-50%, -50%) rotate(45deg) scale(0.72);
  transform-origin: center;
  z-index: 1;
  transition: opacity 0.95s ease, transform 1s cubic-bezier(0.83, 0, 0.17, 1), filter 1s ease;
}

#preloader::after {
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 0%, transparent 38%, rgba(0, 0, 0, 0.54) 82%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.35));
  z-index: 0;
  pointer-events: none;
}

.preloader-grid {
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
  opacity: 0;
  transform: perspective(800px) rotateX(58deg) translateY(14%);
  animation: gridWake 2.6s cubic-bezier(0.16, 1, 0.3, 1) forwards, gridDrift 5.5s linear infinite;
}

.preloader-shell {
  position: relative;
  width: min(82vw, 680px);
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.preloader-diamond-field {
  position: absolute;
  width: min(76vw, 560px);
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.preloader-diamond-field span {
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  transform: rotate(45deg) scale(0.55);
  opacity: 0;
  animation: diamondTrace 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.preloader-diamond-field span:nth-child(2) {
  inset: 27%;
  border-color: rgba(205, 225, 244, 0.32);
  animation-delay: 0.12s;
}

.preloader-diamond-field span:nth-child(3) {
  inset: 36%;
  border-color: rgba(255, 255, 255, 0.42);
  animation-delay: 0.24s;
}

.preloader-diamond-field span:nth-child(4) {
  inset: 45%;
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.5);
  animation-delay: 0.36s;
}

.preloader-logo-container {
  width: min(72vw, 520px);
  overflow: visible;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  animation: logoReveal 1.3s 0.45s cubic-bezier(0.1, 0.7, 0.1, 1) forwards;
}

.preloader-logo-img {
  display: block;
  width: 100%;
}

.preloader-scanline {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95) 0%, rgba(205, 225, 244, 0.5) 30%, transparent 72%) no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.62) 48%, transparent 100%) no-repeat;
  background-position: -62% 50%, -62% 50%;
  background-size: 34% 240%, 24% 220%;
  filter: blur(1.5px);
  -webkit-mask-image: url("../../DD_ASSETS/dd_logo_white.png");
  mask-image: url("../../DD_ASSETS/dd_logo_white.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  animation: logoScan 2.4s 0.62s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

.preloader-loader {
  position: relative;
  width: min(54vw, 360px);
  height: 2px;
  margin-top: var(--space-5);
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
  opacity: 0;
  animation: fadeUpLoader 0.8s 1.1s ease forwards;
}

.preloader-loader span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, #ffffff 34%, #cde1f4 58%, transparent);
  transform: translateX(-100%);
  animation: loaderBeam 1.9s 0.92s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.preloader-tagline {
  margin: var(--space-6) 0 0;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: clamp(2.6rem, 7vw, 5.8rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 0.92;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 40px rgba(205, 225, 244, 0.32);
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUpLoader 0.8s 0.86s ease forwards;
}

.preloader-location {
  max-width: min(86vw, 760px);
  margin: var(--space-5) 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-family: var(--font-heading);
  font-size: clamp(0.58rem, 1.5vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.7;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  animation: fadeUpLoader 0.8s 0.98s ease forwards;
}

@keyframes logoReveal {
  0% { opacity: 0; transform: translateY(18px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes logoScan {
  0% { background-position: -62% 50%, -62% 50%; opacity: 0; }
  18% { opacity: 1; }
  48% { opacity: 0.92; }
  78%, 100% { background-position: 162% 50%, 162% 50%; opacity: 0; }
}

@keyframes diamondTrace {
  0% { opacity: 0; transform: rotate(45deg) scale(0.55); filter: blur(12px); }
  42% { opacity: 0.95; }
  100% { opacity: 0.32; transform: rotate(45deg) scale(1); filter: blur(0); }
}

@keyframes gridWake {
  0% { opacity: 0; transform: perspective(800px) rotateX(62deg) translateY(24%); }
  100% { opacity: 0.36; transform: perspective(800px) rotateX(58deg) translateY(14%); }
}

@keyframes gridDrift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 0 72px, 72px 0; }
}

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

@keyframes loaderBeam {
  0% { transform: translateX(-100%); }
  72%, 100% { transform: translateX(100%); }
}

#preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition-delay: 0.28s;
}

#preloader.loaded::before {
  opacity: 0.72;
  filter: blur(28px);
  transform: translate(-50%, -50%) rotate(45deg) scale(7.5);
}

#preloader.loaded .preloader-logo-container {
  transform: scale(1.08) translateY(-16px);
  opacity: 0;
  transition: opacity 0.65s ease, transform 0.75s cubic-bezier(0.7, 0, 0.3, 1);
}

#preloader.loaded .preloader-loader,
#preloader.loaded .preloader-tagline,
#preloader.loaded .preloader-location,
#preloader.loaded .preloader-diamond-field,
#preloader.loaded .preloader-grid {
  opacity: 0;
  transition: opacity 0.45s ease;
}

/* --- 2. CINEMATIC NOISE OVERLAY --- */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* --- 3. CUSTOM BLEND-MODE CURSOR --- */
body {
  /* cursor: none; Optional: Hides default cursor. Enable if desired */
}

#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  background-color: var(--color-white);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode: difference;
  transform: translate3d(0, 0, 0);
  margin-top: -8px; 
  margin-left: -8px;
  transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease, background-color 0.3s ease;
  will-change: transform;
}

#custom-cursor.hover {
  width: 64px;
  height: 64px;
  margin-top: -32px;
  margin-left: -32px;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  mix-blend-mode: normal;
}

/* --- 4. MAGNETIC BUTTONS (Smooth Transition) --- */
.magnetic {
  transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
  will-change: transform;
}

/* --- 5. DYNAMIC GLASS SHINE --- */
/* Upgrades the existing .service-card */
.service-card {
  position: relative;
  overflow: hidden;
}

/* The Shine Effect tracing the mouse */
.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    800px circle at var(--mouse-x) var(--mouse-y), 
    rgba(255, 255, 255, 0.1),
    transparent 40%
  );
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* Hidden by default if JS fails */
  transition: opacity 0.3s;
}

.service-card:hover::before {
  opacity: 1;
}

/* --- 6. ANGLED MATTE REVEALS --- */
/* Upgrades the existing .reveal class */
.reveal {
  opacity: 0;
  transform: translateY(60px) scale(0.98);
  transition: opacity 1s cubic-bezier(0.1, 0.7, 0.1, 1), transform 1s cubic-bezier(0.1, 0.7, 0.1, 1);
}

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