/* ═══════════════════════════════════════════════════════════════
   JLB STUDIO — Animations Cinématiques
   Direction : Cinema Architecture
   ═══════════════════════════════════════════════════════════════ */

/* ─── Scroll Reveal System ─── */

/* Base state — hidden before reveal */
.reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity var(--duration-slow) var(--ease-cinematic),
              transform var(--duration-slow) var(--ease-cinematic);
}

.reveal--left {
  opacity: 0;
  transform: translateX(-2rem);
  transition: opacity var(--duration-slow) var(--ease-cinematic),
              transform var(--duration-slow) var(--ease-cinematic);
}

.reveal--right {
  opacity: 0;
  transform: translateX(2rem);
  transition: opacity var(--duration-slow) var(--ease-cinematic),
              transform var(--duration-slow) var(--ease-cinematic);
}

.reveal--scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--duration-slow) var(--ease-cinematic),
              transform var(--duration-cinematic) var(--ease-cinematic);
}

.reveal--fade {
  opacity: 0;
  transition: opacity var(--duration-cinematic) var(--ease-cinematic);
}

/* Revealed state */
.reveal.is-visible,
.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--scale.is-visible,
.reveal--fade.is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity var(--duration-slow) var(--ease-cinematic),
              transform var(--duration-slow) var(--ease-cinematic);
}

.stagger-children.is-visible > *:nth-child(1) { transition-delay: 0s; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(2) { transition-delay: 0.08s; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(3) { transition-delay: 0.16s; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(4) { transition-delay: 0.24s; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(5) { transition-delay: 0.32s; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(6) { transition-delay: 0.4s; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(7) { transition-delay: 0.48s; opacity: 1; transform: none; }
.stagger-children.is-visible > *:nth-child(8) { transition-delay: 0.56s; opacity: 1; transform: none; }

/* ─── Image Reveal — Mask System ─── */
.img-reveal {
  overflow: hidden;
  position: relative;
}

/* Horizontal mask — left to right */
.img-reveal--horizontal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--duration-cinematic) var(--ease-cinematic);
}

.img-reveal--horizontal.is-visible {
  clip-path: inset(0 0 0 0);
}

/* Vertical mask — bottom to top */
.img-reveal--vertical {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--duration-cinematic) var(--ease-cinematic);
}

.img-reveal--vertical.is-visible {
  clip-path: inset(0 0 0 0);
}

/* Center expand */
.img-reveal--center {
  clip-path: inset(50% 50% 50% 50%);
  transition: clip-path var(--duration-cinematic) var(--ease-cinematic);
}

.img-reveal--center.is-visible {
  clip-path: inset(0 0 0 0);
}

/* Image zoom on reveal */
.img-reveal img,
.img-reveal video {
  transform: scale(1.08);
  transition: transform 1.5s var(--ease-cinematic);
}

.img-reveal.is-visible img,
.img-reveal.is-visible video {
  transform: scale(1);
}

/* ─── Cinematic Frame Expand ─── */
.frame-expand {
  width: 70%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--radius-md);
  transition: width var(--duration-cinematic) var(--ease-cinematic);
}

.frame-expand.is-visible {
  width: 100%;
}

/* ─── Typography Animations ─── */

/* Line-by-line reveal */
.text-reveal-line {
  overflow: hidden;
}

.text-reveal-line span {
  display: inline-block;
  transform: translateY(100%);
  transition: transform var(--duration-slow) var(--ease-cinematic);
}

.text-reveal-line.is-visible span {
  transform: translateY(0);
}

/* Word-by-word fade */
.text-reveal-words span {
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

.text-reveal-words.is-visible span {
  opacity: 1;
}

/* Spacing tighten on reveal */
.text-tighten {
  letter-spacing: 0.5em;
  opacity: 0;
  transition: letter-spacing var(--duration-cinematic) var(--ease-cinematic),
              opacity var(--duration-slow) var(--ease-out);
}

.text-tighten.is-visible {
  letter-spacing: 0.15em;
  opacity: 1;
}

/* ─── Separator Animation ─── */
.separator--animated {
  width: 0;
  transition: width var(--duration-cinematic) var(--ease-cinematic);
}

.separator--animated.is-visible {
  width: 3rem;
}

.separator--animated.separator--wide.is-visible {
  width: 100%;
}

/* ─── Intro Animation ─── */
@keyframes intro-monogram-in {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes intro-line-expand {
  0% { width: 0; }
  100% { width: min(8rem, 30vw); }
}

@keyframes intro-overlay-out {
  0% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 0 100% 0);
  }
}

.intro-overlay--animating .intro__monogram {
  animation: intro-monogram-in 0.8s var(--ease-cinematic) forwards;
}

.intro-overlay--animating .intro__line {
  animation: intro-line-expand 0.6s var(--ease-cinematic) 0.3s forwards;
}

.intro-overlay--exiting {
  animation: intro-overlay-out 0.5s var(--ease-cinematic) forwards;
}

/* ─── Page Transition Keyframes ─── */
@keyframes page-transition-in {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

@keyframes page-transition-out {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

@keyframes page-transition-label {
  0% { opacity: 0; transform: translate(-50%, -50%) translateY(1rem); }
  30% { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
  70% { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) translateY(-1rem); }
}

/* ─── Hero Entrance Animation ─── */
@keyframes hero-content-in {
  0% {
    opacity: 0;
    transform: translateY(2rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__content > * {
  opacity: 0;
  animation: hero-content-in 0.8s var(--ease-cinematic) forwards;
}

.hero__content > *:nth-child(1) { animation-delay: 0.3s; }
.hero__content > *:nth-child(2) { animation-delay: 0.45s; }
.hero__content > *:nth-child(3) { animation-delay: 0.55s; }
.hero__content > *:nth-child(4) { animation-delay: 0.65s; }
.hero__content > *:nth-child(5) { animation-delay: 0.75s; }
.hero__content > *:nth-child(6) { animation-delay: 0.85s; }
.hero__content > *:nth-child(7) { animation-delay: 0.95s; }

/* With intro, delay hero entrance */
body.has-intro .hero__content > * {
  animation-delay: calc(var(--intro-duration, 1.5s) + 0.1s * var(--child-index, 0));
}

body.has-intro .hero__content > *:nth-child(1) { --child-index: 1; }
body.has-intro .hero__content > *:nth-child(2) { --child-index: 2; }
body.has-intro .hero__content > *:nth-child(3) { --child-index: 3; }
body.has-intro .hero__content > *:nth-child(4) { --child-index: 4; }
body.has-intro .hero__content > *:nth-child(5) { --child-index: 5; }
body.has-intro .hero__content > *:nth-child(6) { --child-index: 6; }
body.has-intro .hero__content > *:nth-child(7) { --child-index: 7; }

/* ─── Scroll-Driven Animations (Modern Browsers) ─── */
@supports (animation-timeline: view()) {
  .scroll-reveal {
    animation: scroll-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }

  @keyframes scroll-fade-up {
    from {
      opacity: 0;
      transform: translateY(3rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .scroll-parallax {
    animation: scroll-parallax linear;
    animation-timeline: scroll();
  }

  @keyframes scroll-parallax {
    from { transform: translateY(-10%); }
    to { transform: translateY(10%); }
  }

  .scroll-scale {
    animation: scroll-scale-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 80%;
  }

  @keyframes scroll-scale-up {
    from {
      opacity: 0;
      transform: scale(0.92);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  .scroll-clip-horizontal {
    animation: scroll-clip-h linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 90%;
  }

  @keyframes scroll-clip-h {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
  }
}

/* ─── Custom Cursor ─── */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--cuivre);
  pointer-events: none;
  z-index: var(--z-cursor);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-base) var(--ease-cinematic),
              width var(--duration-base) var(--ease-cinematic),
              height var(--duration-base) var(--ease-cinematic);
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: difference;
}

.custom-cursor--visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.custom-cursor--hover {
  width: 5rem;
  height: 5rem;
  background: var(--cuivre-20);
}

.custom-cursor__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cuivre);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.custom-cursor--hover .custom-cursor__label {
  opacity: 1;
}

/* Hide on touch / reduced motion */
@media (hover: none), (pointer: coarse) {
  .custom-cursor { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .custom-cursor { display: none !important; }
  
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .reveal--fade,
  .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 0.15s ease !important;
  }

  .img-reveal--horizontal,
  .img-reveal--vertical,
  .img-reveal--center {
    clip-path: none !important;
  }

  .img-reveal img,
  .img-reveal video {
    transform: none !important;
  }

  .frame-expand {
    width: 100% !important;
  }

  .text-tighten {
    letter-spacing: 0.15em !important;
    opacity: 1 !important;
  }

  .separator--animated {
    width: 3rem !important;
  }

  .separator--animated.separator--wide {
    width: 100% !important;
  }

  .hero__content > * {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* ─── Page Transitions ─── */
body {
  opacity: 1;
  transition: opacity 0.4s var(--ease-cinematic);
}
body.page-transitioning {
  opacity: 0;
}