@keyframes skillsRevealLeft {
  from {
    opacity: 0;
    transform: translate3d(-90px, 0, 0) scale(.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes skillsRevealRight {
  from {
    opacity: 0;
    transform: translate3d(450px, 0, 0) scale(.985);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes skillsRevealUp {
  from {
    opacity: 0;
    transform: translate3d(0, 42px, 0) scale(.200);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* état de base */
.page-skills .hero-intro,
.page-skills .hero-console,
.page-skills .skills-panel--full,
.page-skills .before-after-panel,
.page-skills .instagram-panel,
.page-skills .skills-cta {
  will-change: transform, opacity, box-shadow;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* hero : 2 premiers blocs */
.page-skills .hero-intro {
  opacity: 0;
  transform: translate3d(-90px, 0, 0) scale(.985);
  animation: skillsRevealLeft .95s cubic-bezier(.22,.61,.36,1) .08s forwards;
}

.page-skills .hero-console {
  opacity: 0;
  transform: translate3d(90px, 0, 0) scale(.985);
  animation: skillsRevealRight .95s cubic-bezier(.22,.61,.36,1) .16s forwards;
}

/* autres blocs : apparition au scroll si supportée */
@supports (animation-timeline: view()) {
  /* capture 1 : bloc du bas qui arrive du bas avec scale */
  .page-skills .skills-panel--full {
    opacity: 0;
    transform: translate3d(0, 42px, 0) scale(.985);
    animation: skillsRevealUp linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }

  /* capture 2 : bloc gauche du bas = du bas avec scale */
  .page-skills .before-after-panel {
    opacity: 0;
    transform: translate3d(0, 42px, 0) scale(.985);
    animation: skillsRevealUp linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }

  .page-skills .instagram-panel {
    opacity: 0;
    transform: translate3d(0, 42px, 0) scale(.985);
    animation: skillsRevealUp linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }

  /* le CTA reste comme avant */
  .page-skills .skills-cta {
    opacity: 0;
    transform: translate3d(0, 42px, 0) scale(.985);
    animation: skillsRevealUp linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }
}

/* fallback si animation-timeline non supportée */
@supports not (animation-timeline: view()) {
  .page-skills .skills-panel--full,
  .page-skills .before-after-panel,
  .page-skills .instagram-panel,
  .page-skills .skills-cta {
    opacity: 0;
    transform: translate3d(0, 42px, 0) scale(.985);
    animation: skillsRevealUp .9s cubic-bezier(.22,.61,.36,1) forwards;
  }

  .page-skills .skills-panel--full { animation-delay: .08s; }
  .page-skills .before-after-panel { animation-delay: .12s; }
  .page-skills .instagram-panel { animation-delay: .16s; }
  .page-skills .skills-cta { animation-delay: .2s; }
}

/* ========================================================= */
/* INDEX — PARALLAX / REVEAL CSS-ONLY                        */
/* ========================================================= */

.page-index .hero-card,
.page-index .hero-media,
.page-index .swap__card,
.page-index .services-cta,
.page-index .final-cta-actions {
  will-change: transform, opacity, box-shadow;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.page-index .hero-card {
  opacity: 0;
  transform: translate3d(-90px, 0, 0) scale(.985);
  animation: skillsRevealLeft .95s cubic-bezier(.22,.61,.36,1) .08s forwards;
}

.page-index .hero-media {
  opacity: 0;
  transform: translate3d(90px, 0, 0) scale(.985);
  animation: skillsRevealRight .95s cubic-bezier(.22,.61,.36,1) .16s forwards;
}

@supports (animation-timeline: view()) {
  .page-index .swap__card,
  .page-index .services-cta,
  .page-index .final-cta-actions,
  .page-index [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 42px, 0) scale(.985);
    animation: skillsRevealUp linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}

@supports not (animation-timeline: view()) {
  .page-index .swap__card,
  .page-index .services-cta,
  .page-index .final-cta-actions,
  .page-index [data-reveal] {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-index .hero-card,
  .page-index .hero-media,
  .page-index .swap__card,
  .page-index .services-cta,
  .page-index .final-cta-actions,
  .page-index [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ========================================================= */
/* REALISATIONS — ULTRA PREMIUM                              */
/* ========================================================= */

/* Base reveal */
.page-realisations .project {
  opacity: 0;
  transform: translate3d(0, 72px, 0) scale(.965);
  will-change: transform, opacity, box-shadow;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Animation scroll moderne */
@supports (animation-timeline: view()) {
  .page-realisations .project {
    animation: realisationsRevealUp linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 34%;
  }
}

/* Fallback safe */
@supports not (animation-timeline: view()) {
  .page-realisations .project {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Cascade subtile par ordre */
.page-realisations .project:nth-child(1) { animation-delay: .03s; }
.page-realisations .project:nth-child(2) { animation-delay: .08s; }
.page-realisations .project:nth-child(3) { animation-delay: .13s; }
.page-realisations .project:nth-child(4) { animation-delay: .18s; }
.page-realisations .project:nth-child(5) { animation-delay: .23s; }
.page-realisations .project:nth-child(6) { animation-delay: .28s; }

/* Hover premium global card */
.page-realisations .project {
  position: relative;
  overflow: hidden;
  transition:
    transform .55s cubic-bezier(.22,.61,.36,1),
    box-shadow .55s cubic-bezier(.22,.61,.36,1),
    border-color .38s ease,
    background .38s ease;
}

.page-realisations .project::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(212,177,106,.16), transparent 34%),
    radial-gradient(circle at 82% 78%, rgba(212,177,106,.09), transparent 30%);
  transition: opacity .45s ease;
  z-index: 1;
}

.page-realisations .project::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.03) 0%,
    rgba(255,255,255,0) 20%,
    rgba(0,0,0,0) 60%,
    rgba(0,0,0,.18) 100%
  );
  transition: opacity .45s ease;
  z-index: 1;
}

.page-realisations .project:hover {
  transform: translateY(-10px) scale(1.018);
  box-shadow:
    0 30px 80px rgba(0,0,0,.28),
    0 0 26px rgba(212,177,106,.12);
  border-color: rgba(212,177,106,.55);
}

.page-realisations .project:hover::before,
.page-realisations .project:hover::after {
  opacity: 1;
}

/* Thumb premium */
.page-realisations .project .thumb {
  position: relative;
  isolation: isolate;
}

.page-realisations .project .thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .9;
  background:
    radial-gradient(480px 220px at 18% 14%, rgba(212,177,106,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.18));
  transition: opacity .45s ease;
}

.page-realisations .project .thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.08) 38%,
    rgba(0,0,0,.64) 100%
  );
}

.page-realisations .project .thumb video,
.page-realisations .project .thumb img {
  transform: scale(1.03);
  transition:
    transform .9s cubic-bezier(.22,.61,.36,1),
    filter .5s ease;
  will-change: transform;
}

.page-realisations .project:hover .thumb video,
.page-realisations .project:hover .thumb img {
  transform: scale(1.09);
}

.page-realisations .project:hover .thumb::before {
  opacity: 1;
}

/* Body premium */
.page-realisations .project .body {
  position: relative;
  z-index: 2;
}

.page-realisations .project .body .t {
  transition:
    color .35s ease,
    letter-spacing .35s ease,
    transform .35s ease;
}

.page-realisations .project:hover .body .t {
  color: rgba(212,177,106,1);
  letter-spacing: .19em;
  transform: translateY(-1px);
}

/* Bouton play premium */
.page-realisations .play-btn {
  z-index: 3;
  transition:
    transform .38s cubic-bezier(.22,.61,.36,1),
    border-color .35s ease,
    background .35s ease,
    box-shadow .35s ease,
    opacity .35s ease;
}

.page-realisations .project:hover .play-btn {
  transform: translate(-50%, -50%) scale(1.08);
  border-color: rgba(212,177,106,.92);
  background: rgba(212,177,106,.08);
  box-shadow:
    0 18px 44px rgba(0,0,0,.34),
    0 0 18px rgba(212,177,106,.12);
}

/* Lightbox premium */
.page-realisations .lightbox {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.page-realisations .lightbox .panel {
  box-shadow:
    0 0 0 1px rgba(212,177,106,.08),
    0 32px 90px rgba(0,0,0,.56);
}

/* CTA reveal doux */
.page-realisations .launch-cta {
  opacity: 0;
  transform: translate3d(0, 42px, 0) scale(.985);
}

@supports (animation-timeline: view()) {
  .page-realisations .launch-cta {
    animation: realisationsRevealUp linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}

@supports not (animation-timeline: view()) {
  .page-realisations .launch-cta {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Keyframes dédiées */
@keyframes realisationsRevealUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 72px, 0) scale(.965);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .page-realisations .project,
  .page-realisations .launch-cta {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .page-realisations .project .thumb video,
  .page-realisations .project .thumb img,
  .page-realisations .play-btn {
    transition: none !important;
    transform: none !important;
  }
}