/* ============================================================
   REDMOON TATTOO — Premium Visual Effects 2025
   GPU-only: transform + opacity exclusively
   Works WITH the existing .reveal system, never against it
   ============================================================ */

/* === SCROLL PROGRESS BAR === */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 10000;
  pointer-events: none;
  transform-origin: left;
  transform: scaleX(0);
  background: var(--gold);
}

/* Modern browsers: CSS scroll-driven animation */
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: scrollScale linear both;
    animation-timeline: scroll(root);
  }

  @keyframes scrollScale {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}

/* === SCROLL-DRIVEN CARD REVEALS (progressive enhancement) ===
   In browsers supporting scroll-driven animations,
   override the .reveal transition with a CSS-native animation.
   The .reveal class is neutralized so the animation takes control. */
@supports (animation-timeline: view()) {
  .spec-card.reveal,
  .gallery-item.reveal,
  .testimonial-card.reveal {
    transition: none !important;
    animation: sdFadeUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }

  /* Process cards: scroll-driven only on desktop */
  @media (min-width: 769px) {
    .process-step-content.reveal,
    .process-step-visual.reveal {
      transition: none !important;
      animation: sdFadeUp linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }

  .spec-card.reveal-delay-1,
  .spec-card.reveal-delay-2,
  .spec-card.reveal-delay-3,
  .gallery-item.reveal-delay-1,
  .gallery-item.reveal-delay-2,
  .gallery-item.reveal-delay-3,
  .testimonial-card.reveal-delay-1,
  .testimonial-card.reveal-delay-2 {
    transition-delay: 0s !important;
  }

  @media (min-width: 769px) {
    .process-step-content.reveal-delay-1,
    .process-step-visual.reveal-delay-1 {
      transition-delay: 0s !important;
    }
  }

  @keyframes sdFadeUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* === VIEW TRANSITION — Gallery Filter Cross-fade === */
::view-transition-old(gallery-grid),
::view-transition-new(gallery-grid) {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-old(gallery-grid) {
  animation-name: vtFadeOut;
}

::view-transition-new(gallery-grid) {
  animation-name: vtFadeIn;
}

@keyframes vtFadeOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.97); }
}

@keyframes vtFadeIn {
  from { opacity: 0; transform: scale(1.03); }
  to { opacity: 1; transform: scale(1); }
}

/* === TEXT REVEAL CINEMATIC ===
   Applied to section titles by JS.
   The title itself keeps .reveal for container fade-in.
   Inner word-spans animate their translateY independently. */
.text-reveal-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.2;
  white-space: nowrap;
}

.text-reveal-word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.text-reveal-word.revealed > span {
  transform: translateY(0);
}

/* === NOISE TEXTURE ANIMATED === */
.noise-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  animation: noiseShift 8s steps(8) infinite;
}

@keyframes noiseShift {
  0% { transform: translate(0, 0); }
  12.5% { transform: translate(-64px, 32px); }
  25% { transform: translate(32px, -64px); }
  37.5% { transform: translate(-32px, -32px); }
  50% { transform: translate(64px, 64px); }
  62.5% { transform: translate(-48px, 16px); }
  75% { transform: translate(16px, -48px); }
  87.5% { transform: translate(-16px, 48px); }
  100% { transform: translate(0, 0); }
}

/* === CARD TILT 3D (desktop) === */
@media (hover: hover) and (pointer: fine) {
  .gallery-item.tilt-active {
    transition: transform 0.2s ease-out, box-shadow 0.4s ease;
  }
}

/* === GLITCH EFFECT ON LOGO === */
@media (hover: hover) {
  .nav-logo:hover .logo-red {
    animation: glitch 0.3s ease both;
  }

  .footer-logo:hover .logo-red {
    animation: glitch 0.3s ease both;
  }

  @keyframes glitch {
    0% { transform: translate(0); }
    10% { transform: translate(-2px, 1px); opacity: 0.8; }
    20% { transform: translate(2px, -1px); opacity: 1; }
    30% { transform: translate(-1px, -1px); opacity: 0.9; }
    40% { transform: translate(1px, 1px); opacity: 1; }
    50% { transform: translate(-1px, 0px); opacity: 0.85; }
    60% { transform: translate(0px, -1px); opacity: 1; }
    70% { transform: translate(1px, 0); }
    100% { transform: translate(0); opacity: 1; }
  }

  /* Glitch pseudo-layers — red/cyan offset */
  .nav-logo .logo-red::before,
  .nav-logo .logo-red::after,
  .footer-logo .logo-red::before,
  .footer-logo .logo-red::after {
    content: 'Red';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .nav-logo:hover .logo-red::before,
  .footer-logo:hover .logo-red::before {
    opacity: 0.6;
    background-image: linear-gradient(90deg, #ff0040, #ff0040);
    -webkit-background-clip: text;
    background-clip: text;
    animation: glitchLayer1 0.3s ease both;
    clip-path: inset(30% 0 20% 0);
  }

  .nav-logo:hover .logo-red::after,
  .footer-logo:hover .logo-red::after {
    opacity: 0.4;
    background-image: linear-gradient(90deg, #00ffff, #00ffff);
    -webkit-background-clip: text;
    background-clip: text;
    animation: glitchLayer2 0.3s ease both;
    clip-path: inset(60% 0 0% 0);
  }

  @keyframes glitchLayer1 {
    0% { transform: translate(0); }
    25% { transform: translate(3px, -1px); }
    50% { transform: translate(-2px, 1px); }
    75% { transform: translate(1px, 0); }
    100% { transform: translate(0); }
  }

  @keyframes glitchLayer2 {
    0% { transform: translate(0); }
    25% { transform: translate(-3px, 1px); }
    50% { transform: translate(2px, -1px); }
    75% { transform: translate(-1px, 0); }
    100% { transform: translate(0); }
  }
}

/* === CUSTOM CURSOR — DÉSACTIVÉ (curseur classique) === */
#custom-cursor { display: none !important; }

/* === MAGNETIC BUTTON ENHANCED === */
.magnetic-target {
  transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

/* === PARALLAX HERO === */
.hero-bg.parallax-active {
  will-change: transform;
}

/* === PREFERS-REDUCED-MOTION: disable everything === */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress,
  .noise-overlay { display: none !important; }

  * { cursor: auto !important; }
  #custom-cursor { display: none !important; }

  .text-reveal-word > span {
    transform: translateY(0) !important;
    transition: none !important;
  }

  .gallery-item.tilt-active {
    transform: none !important;
  }
}