/* ============================================
   ESSOR — Premium Animation System
   GPU-accelerated · prefers-reduced-motion
   ============================================ */

:root {
  --anim-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --anim-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --anim-duration: 0.8s;
  --anim-gold-glow: rgba(201, 168, 76, 0.35);
  --anim-glass: rgba(10, 10, 10, 0.55);
  --anim-glass-border: rgba(201, 168, 76, 0.12);
}

/* ── Layer stacking ── */
body.anim-enabled {
  position: relative;
}

body.anim-enabled html {
  scroll-behavior: auto;
}

body.anim-enabled > :not(.anim-bg):not(.anim-cursor-glow):not(.anim-page-transition):not(.navbar):not(.nav-links):not(.project-lightbox) {
  position: relative;
  z-index: 1;
}

body.anim-enabled > .project-lightbox {
  position: fixed;
  inset: 0;
  z-index: 11050;
}

body.anim-enabled .navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* ── Fixed background canvas stack ── */
.anim-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
}

#anim-particles,
#anim-neural {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#anim-particles { z-index: 1; opacity: 0.85; }
#anim-neural { z-index: 2; opacity: 0.45; mix-blend-mode: screen; }

.anim-gradient-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 70% at 15% 20%, rgba(201, 168, 76, 0.09), transparent 55%),
    radial-gradient(ellipse 70% 60% at 85% 75%, rgba(160, 131, 42, 0.07), transparent 50%),
    linear-gradient(165deg, #0a0a0a 0%, #111111 45%, #0d0d0f 100%);
  animation: animMeshShift 24s ease-in-out infinite alternate;
}

@keyframes animMeshShift {
  0% { filter: hue-rotate(0deg) brightness(1); }
  100% { filter: hue-rotate(8deg) brightness(1.04); }
}

.anim-grid {
  position: absolute;
  inset: -50%;
  z-index: 0;
  opacity: 0.035;
  background-image:
    linear-gradient(rgba(201, 168, 76, 0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 168, 76, 0.6) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(500px) rotateX(60deg);
  animation: animGridDrift 40s linear infinite;
}

@keyframes animGridDrift {
  from { transform: perspective(500px) rotateX(60deg) translateY(0); }
  to { transform: perspective(500px) rotateX(60deg) translateY(64px); }
}

/* ── Morphing gradient blobs ── */
.anim-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.22;
  will-change: transform;
}

.anim-blob--1 {
  width: min(55vw, 520px);
  height: min(55vw, 520px);
  top: -10%;
  left: -8%;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.5), transparent 70%);
}

.anim-blob--2 {
  width: min(45vw, 420px);
  height: min(45vw, 420px);
  bottom: 5%;
  right: -5%;
  background: radial-gradient(circle, rgba(160, 131, 42, 0.45), transparent 70%);
}

.anim-blob--3 {
  width: min(35vw, 320px);
  height: min(35vw, 320px);
  top: 45%;
  left: 40%;
  background: radial-gradient(circle, rgba(226, 192, 110, 0.25), transparent 70%);
}

/* ── Floating geometric shapes ── */
.anim-shapes {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.anim-shape {
  position: absolute;
  border: 1px solid rgba(201, 168, 76, 0.15);
  backdrop-filter: blur(2px);
  will-change: transform;
}

.anim-shape--ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border-color: rgba(201, 168, 76, 0.2);
}

.anim-shape--square {
  width: 48px;
  height: 48px;
  transform: rotate(45deg);
  background: rgba(201, 168, 76, 0.03);
}

.anim-shape--line {
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.35), transparent);
  border: none;
}

/* ── Mouse-responsive spotlight ── */
.anim-spotlight {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(201, 168, 76, 0.06),
    transparent 45%
  );
  transition: background 0.15s var(--anim-ease-smooth);
}

/* ── Custom cursor glow (desktop only) ── */
.anim-cursor-glow {
  position: fixed;
  width: 420px;
  height: 420px;
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.08), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s ease;
  mix-blend-mode: screen;
  will-change: transform;
}

body.anim-cursor-active .anim-cursor-glow { opacity: 1; }

/* ── Page transition overlay ── */
.anim-page-transition {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--color-black);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

/* ── Glassmorphism navbar upgrade ── */
body.anim-enabled .navbar {
  background: var(--anim-glass);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--anim-glass-border);
  transition: background 0.4s var(--anim-ease-smooth),
    box-shadow 0.4s var(--anim-ease-smooth),
    border-color 0.4s var(--anim-ease-smooth);
}

body.anim-enabled .navbar.scrolled {
  background: rgba(10, 10, 10, 0.82);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
  border-bottom-color: rgba(201, 168, 76, 0.2);
}

/* ── Hero overrides ── */
body.anim-enabled .hero::before,
body.anim-enabled .hero-inner-page::before {
  opacity: 0.35;
}

body.anim-enabled .hero-inner-page::before {
  opacity: 0.28;
}

.split-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.split-word {
  display: inline-block;
  will-change: transform, opacity;
}

/* Gradient appliqué sur chaque mot (compatible split text) */
.hero--animated h1 {
  background: none;
  -webkit-text-fill-color: initial;
}

.hero--animated h1 .split-word.hero-text-gradient {
  background: linear-gradient(
    120deg,
    #ffffff 0%,
    var(--color-gold-light) 45%,
    var(--color-gold) 70%,
    #ffffff 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animTextShimmer 8s ease-in-out infinite;
}

.hero-text-gradient {
  background: linear-gradient(
    120deg,
    #ffffff 0%,
    var(--color-gold-light) 45%,
    var(--color-gold) 70%,
    #ffffff 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animTextShimmer 8s ease-in-out infinite;
}

@keyframes animTextShimmer {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

.hero-line {
  width: 0;
  animation: none;
}

/* ── Scroll reveals (GSAP handles motion; CSS sets initial) ── */
.reveal,
[data-anim="reveal"],
[data-anim="fade-up"],
[data-anim="zoom-in"],
[data-anim="slide-left"],
[data-anim="slide-right"] {
  opacity: 0;
  will-change: transform, opacity;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Stagger groups */
[data-anim-stagger] > * {
  opacity: 0;
}

/* ── Magnetic buttons ── */
.btn-magnetic {
  position: relative;
  display: inline-flex;
  transition: box-shadow 0.35s var(--anim-ease-out);
}

.btn-magnetic .btn-inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  will-change: transform;
}

.btn-magnetic::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.4), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
}

.btn-magnetic:hover::before { opacity: 1; }

/* ── Stat cards pulse on count ── */
.stat-number.counting {
  transition: transform 0.2s var(--anim-ease-out);
}

/* ── Service / project cards ── */
.service-card[data-anim="card"],
.project-card[data-anim="card"],
.equipment-card[data-anim="card"],
.contact-block[data-anim="card"] {
  opacity: 0;
  transform: translateY(32px);
}

.service-card .icon,
.service-icon-circle {
  will-change: transform;
}

.float-icon {
  animation: animFloatIcon 5s ease-in-out infinite;
}

@keyframes animFloatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ── Image zoom reveal ── */
[data-anim="image-zoom"] {
  overflow: hidden;
}

[data-anim="image-zoom"] img,
[data-anim="image-zoom"] .project-img,
[data-anim="image-zoom"] .real-img-wrap {
  transform: scale(1.12);
  will-change: transform;
}

/* ── Timeline progress line ── */
.anim-timeline {
  position: relative;
  padding-left: 32px;
}

.anim-timeline::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0;
  width: 2px;
  height: 100%;
  background: rgba(201, 168, 76, 0.15);
  transform-origin: top;
  transform: scaleY(0);
}

.anim-timeline.is-drawn::before {
  transform: scaleY(1);
  transition: transform 1.2s var(--anim-ease-out);
}

/* ── CTA section glow ── */
.cta-brochure[data-anim="section"] {
  position: relative;
  overflow: hidden;
}

.cta-brochure[data-anim="section"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.06), transparent 60%);
  pointer-events: none;
}

/* ── Inner page hero ── */
.hero-inner-page .container > * {
  will-change: transform, opacity;
}

/* ── Footer subtle entrance ── */
footer[data-anim="footer"] {
  opacity: 0;
  transform: translateY(20px);
}

/* ── Gold divider draw ── */
.gold-divider[data-anim="line"] {
  transform: scaleX(0);
  transform-origin: center;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .anim-bg,
  .anim-cursor-glow,
  .anim-page-transition,
  #anim-particles,
  #anim-neural {
    display: none !important;
  }

  .anim-gradient-mesh {
    animation: none;
  }

  .reveal,
  [data-anim],
  .stat-card,
  footer[data-anim="footer"] {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-text-gradient {
    animation: none;
    background-position: 0 center;
  }

  .float-icon {
    animation: none;
  }

  html { scroll-behavior: auto; }
}

@media (max-width: 768px) {
  .anim-cursor-glow { display: none; }

  .anim-blob { opacity: 0.14; filter: blur(60px); }

  #anim-particles { opacity: 0.55; }
  #anim-neural { opacity: 0.25; }

  .anim-grid { opacity: 0.02; }

  .anim-shapes .anim-shape:nth-child(n + 4) {
    display: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .anim-cursor-glow { display: none; }
  body.anim-cursor-active .anim-cursor-glow { opacity: 0; }
}

@media print {
  .anim-bg,
  .anim-cursor-glow,
  .anim-page-transition { display: none !important; }
}

/* ============================================
   Accueil — animations spécifiques
   ============================================ */

.page-home .home-hero {
  isolation: isolate;
}

.home-hero-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.home-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  will-change: transform, opacity;
}

.home-hero-orb--1 {
  width: min(42vw, 320px);
  height: min(42vw, 320px);
  top: 18%;
  left: 8%;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.22), transparent 70%);
}

.home-hero-orb--2 {
  width: min(36vw, 260px);
  height: min(36vw, 260px);
  bottom: 22%;
  right: 10%;
  background: radial-gradient(circle, rgba(226, 192, 110, 0.16), transparent 70%);
}

.home-hero-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(520px, 85vw);
  height: min(520px, 85vw);
  margin: calc(min(520px, 85vw) / -2) 0 0 calc(min(520px, 85vw) / -2);
  border: 1px solid rgba(201, 168, 76, 0.12);
  border-radius: 50%;
  will-change: transform, opacity;
}

.page-home .home-hero .hero-inner {
  position: relative;
  z-index: 1;
}

/* Stats — ligne dorée au scroll */
.page-home .home-stats {
  position: relative;
  overflow: hidden;
}

.page-home .home-stats::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  animation: homeStatsLine 1.2s ease-out forwards;
  animation-play-state: paused;
}

.page-home .home-stats.is-visible::before {
  animation-play-state: running;
}

@keyframes homeStatsLine {
  to { width: 100%; }
}

.page-home .home-stats .stat-card {
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.page-home .home-stats.is-visible .stat-card {
  border-color: rgba(201, 168, 76, 0.35);
}

/* Expertises — séquence lente + pulse à la fin de chaque carte */
.page-home .home-service-card {
  will-change: transform, opacity;
}

.page-home .home-service-card.is-revealed {
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.page-home .home-service-icon {
  position: relative;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-home .home-service-icon.is-pulsed::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(201, 168, 76, 0.65);
  animation: homeIconRing 0.65s ease-out forwards;
  pointer-events: none;
}

@keyframes homeIconRing {
  0% {
    opacity: 1;
    transform: scale(0.88);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@media (hover: hover) {
  .page-home .home-service-card.is-revealed:hover {
    border-color: var(--color-gold);
    box-shadow: 0 16px 48px rgba(201, 168, 76, 0.12);
  }

  .page-home .home-service-card.is-revealed:hover .home-service-icon {
    transform: scale(1.05);
  }
}

.page-home .home-expertises-line {
  transform-origin: center;
}

/* CTA brochure accueil */
.page-home .home-cta {
  position: relative;
  overflow: hidden;
}

.page-home .home-cta-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.1), transparent 55%);
  pointer-events: none;
  opacity: 0.4;
  will-change: transform, opacity;
}

.page-home .home-cta-inner {
  position: relative;
  z-index: 1;
}

.page-home .home-cta-btn {
  position: relative;
  overflow: hidden;
}

.page-home .home-cta-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 60%
  );
  transform: translateX(-120%);
  animation: homeCtaShine 4s ease-in-out infinite;
}

@keyframes homeCtaShine {
  0%, 70%, 100% { transform: translateX(-120%); }
  85% { transform: translateX(120%); }
}

@media (max-width: 768px) {
  .home-hero-orb--1,
  .home-hero-orb--2 {
    opacity: 0.7;
    filter: blur(32px);
  }

  .home-hero-ring {
    opacity: 0.35;
  }

  .page-home .home-cta-btn::after {
    animation: none;
  }

  .page-home .home-service-icon.is-pulsed::after {
    animation: none;
  }

  .page-services .services-icon.is-pulsed::after {
    animation: none;
  }

  .page-services .services-progress-line {
    transform: scaleY(1) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .home-stats::before,
  .page-home .home-cta-btn::after {
    animation: none;
  }

  .page-home .home-stats::before {
    width: 100%;
  }
}

/* ============================================
   Services — animations spécifiques
   ============================================ */

.page-services .services-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.page-services .services-hero-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.page-services .services-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  will-change: transform, opacity;
}

.page-services .services-hero-orb--1 {
  width: min(38vw, 280px);
  height: min(38vw, 280px);
  top: 10%;
  left: 6%;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.2), transparent 70%);
}

.page-services .services-hero-orb--2 {
  width: min(32vw, 220px);
  height: min(32vw, 220px);
  bottom: 15%;
  right: 8%;
  background: radial-gradient(circle, rgba(160, 131, 42, 0.16), transparent 70%);
}

.page-services .services-hero-inner {
  position: relative;
  z-index: 1;
}

.page-services .services-main {
  position: relative;
  overflow-x: hidden;
}

.page-services .services-progress-line {
  position: absolute;
  left: clamp(12px, 3vw, 28px);
  top: 80px;
  bottom: 80px;
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(201, 168, 76, 0.45) 15%,
    rgba(201, 168, 76, 0.45) 85%,
    transparent
  );
  transform-origin: top center;
  z-index: 0;
  pointer-events: none;
}

.page-services .services-section {
  position: relative;
  z-index: 1;
}

.page-services .services-row {
  will-change: transform, opacity;
  overflow: hidden;
}

.page-services .service-icon-wrap {
  will-change: transform, opacity;
}

.page-services .services-content {
  will-change: transform, opacity;
}

.page-services .services-icon,
.page-services .services-icon img {
  animation: none !important;
}

.page-services .services-icon {
  position: relative;
  will-change: transform, opacity;
}

.page-services .services-icon.is-pulsed::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(201, 168, 76, 0.55);
  animation: servicesIconRing 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes servicesIconRing {
  0% {
    opacity: 1;
    transform: scale(0.9);
  }
  100% {
    opacity: 0;
    transform: scale(1.15);
  }
}

.page-services .services-content .pill {
  will-change: transform, opacity;
}

.page-services .services-cta {
  position: relative;
  overflow: hidden;
}

.page-services .services-cta-glow {
  position: absolute;
  inset: -15%;
  background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.09), transparent 58%);
  pointer-events: none;
  opacity: 0.35;
}

.page-services .services-cta-inner {
  position: relative;
  z-index: 1;
}

.page-services .services-cta-btn {
  position: relative;
  overflow: hidden;
}

@media (max-width: 992px) {
  .page-services .services-progress-line {
    display: none;
  }
}

@media (max-width: 768px) {
  .page-services .services-hero-orb {
    opacity: 0.65;
    filter: blur(36px);
  }
}