/* David Lima V27 — immersive layer.
   Every rule is gated behind classes added by immersive-v27.js
   (body.immersive-on / body.immersive-story). Without JS, without WebGL, with
   reduced motion or with the "Pausar efeitos" toggle on, none of these rules
   apply and the page renders exactly as before. */

/* ---------- Hero particle field (canvas inserted by JS) ---------- */
.hero-particles-v27 {
  position: absolute;
  inset: 0;
  z-index: -1; /* above .hero-gallery (-3) and .film-shade (-2), below copy */
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.hero-particles-v27.is-live { opacity: 0.85; }
body.no-motion .hero-particles-v27 { opacity: 0 !important; }

/* ---------- Crystal object in #perspectiva (canvas inserted by JS) ---------- */
.crystal-v27 {
  position: absolute;
  top: 0;
  right: 0;
  width: min(58%, 760px);
  height: 100%;
  z-index: 1; /* .signature-copy keeps z-index 2 above it */
  opacity: 0;
  transition: opacity 0.9s ease;
  cursor: grab;
  touch-action: pan-y; /* vertical scroll stays native; horizontal drag rotates */
}
.crystal-v27.is-live { opacity: 1; }
.crystal-v27:active { cursor: grabbing; }
body.no-motion .crystal-v27 { opacity: 0 !important; pointer-events: none !important; }
@media (max-width: 760px) {
  .crystal-v27 { width: 100%; }
  .crystal-v27.is-live { opacity: 0.5; }
}

/* ---------- #caminho as pinned horizontal scroll (desktop) ---------- */
body.immersive-story:not(.immersive-carousel) .cover-story { height: 400svh; }
body.immersive-story:not(.immersive-carousel) .cover-story .story-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  overflow: clip;
}
body.immersive-story:not(.immersive-carousel) .cover-story .story-stage {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 300%;
  margin: 0;
  display: flex;
  will-change: transform; /* GSAP owns the inline transform */
}
body.immersive-story:not(.immersive-carousel) .cover-story .scene {
  position: relative;
  inset: auto;
  flex: 0 0 calc(100% / 3);
  width: auto;
  height: 100%;
  min-height: 0;
  margin: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none !important;
  transition: none;
}
body.immersive-story:not(.immersive-carousel) .cover-story .scene-caption {
  transform: translate3d(var(--scene-drift, 0px), 0, 0);
}
/* Giant word trails its scene at a slower rate (scroll parallax). */
body.immersive-story:not(.immersive-carousel) .cover-story .cover-word {
  transform: translate3d(var(--story-word-x, 0px), 0, 0);
  will-change: transform;
}

/* ---------- #caminho as swipe carousel (mobile) ---------- */
body.immersive-story.immersive-carousel .cover-story { height: auto; }
body.immersive-story.immersive-carousel .cover-story .story-pin {
  position: relative;
  height: auto;
  min-height: 0;
  overflow: visible;
  padding: 0;
}
body.immersive-story.immersive-carousel .cover-story .story-stage {
  position: relative;
  inset: auto;
  height: auto;
  width: 100%;
  margin: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body.immersive-story.immersive-carousel .cover-story .story-stage::-webkit-scrollbar { display: none; }
body.immersive-story.immersive-carousel .cover-story .scene {
  position: relative;
  inset: auto;
  flex: 0 0 100%;
  height: auto;
  min-height: 100svh;
  margin: 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none !important;
  transition: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* ---------- Luminous thread following the scroll ---------- */
.imm-thread {
  position: fixed;
  left: 14px;
  top: 0;
  width: 30px;
  height: 100vh;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
body.immersive-on .imm-thread.is-live { opacity: 0.9; }
.imm-thread .imm-thread-glow {
  stroke: #d8c39a;
  stroke-width: 5;
  opacity: 0.18;
  filter: blur(3px);
}
.imm-thread .imm-thread-core {
  stroke: #e6cf9f;
  stroke-width: 1.4;
  opacity: 0.85;
}
.imm-thread circle {
  fill: #f2ddab;
  filter: drop-shadow(0 0 6px #e8c98a);
}
@media (max-width: 900px) { .imm-thread { display: none; } }
body.no-motion .imm-thread { display: none; }

/* ---------- Custom cursor glow (fine pointers only) ---------- */
.imm-cursor-dot,
.imm-cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 130;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0;
}
.imm-cursor-dot {
  width: 5px;
  height: 5px;
  background: #f5ead2;
  box-shadow: 0 0 8px #e8cf9e;
}
.imm-cursor-ring {
  width: 34px;
  height: 34px;
  border: 1px solid #d8c39a77;
  box-shadow: 0 0 16px #d8c39a2e, inset 0 0 10px #d8c39a14;
  transition: width 0.28s ease, height 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, opacity 0.4s ease;
}
.imm-cursor-ring.is-active {
  width: 60px;
  height: 60px;
  border-color: #eccf99;
  box-shadow: 0 0 30px #d8c39a59, inset 0 0 16px #d8c39a22;
}
body.imm-cursor-on .imm-cursor-dot,
body.imm-cursor-on .imm-cursor-ring { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .imm-cursor-dot, .imm-cursor-ring { display: none; }
}
body.no-motion .imm-cursor-dot,
body.no-motion .imm-cursor-ring { display: none; }

/* ---------- 3D tilt perspectives (rotate property is set from JS) ---------- */
body.immersive-on .cinema-hero { perspective: 1600px; }
body.immersive-on .hero-gallery { will-change: transform; }
body.immersive-on .people [data-cine-depth] { perspective: 1300px; }
body.immersive-on .meet-demo { perspective: 1300px; }
body.immersive-on .meet-demo .session-portrait { will-change: transform; }

/* ---------- Split-text word masks ---------- */
.imm-wm {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.09em;
  margin-bottom: -0.09em;
}
.imm-w { display: inline-block; will-change: transform, filter, opacity; }
body.immersive-on .headline-line { will-change: transform, filter, opacity; }

/* ---------- Native scroll-driven micro-reveals (progressive enhancement) ---------- */
@keyframes imm-v27-rise {
  from { opacity: 0; translate: 0 24px; }
  to { opacity: 1; translate: 0 0; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    body.immersive-on:not(.no-motion) .session-steps li,
    body.immersive-on:not(.no-motion) .booking-facts span,
    body.immersive-on:not(.no-motion) .audience-strip span,
    body.immersive-on:not(.no-motion) .faq-items details {
      animation: imm-v27-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

@media print {
  .hero-particles-v27, .crystal-v27, .imm-thread, .imm-cursor-dot, .imm-cursor-ring { display: none !important; }
}