/* ═══ 3D hero — sobre, net, premium ═══ */

.start-hero {
  --hero-scroll-3d: 0;
  --hero-tilt-x: 0;
  --hero-tilt-y: 0;
  --rx: 0;
  --ry: 0;
}

/* Fond bokeh discret */
.start-hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  mask-image: radial-gradient(ellipse 90% 80% at 55% 45%, #000 20%, transparent 75%);
}

.start-hero__spotlight {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  --spot-x: 55%;
  --spot-y: 42%;
  background: radial-gradient(
    circle 42vmin at var(--spot-x) var(--spot-y),
    rgba(228, 87, 46, 0.09) 0%,
    transparent 58%
  );
}

.start-hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 85% 65% at 50% 40%, transparent 35%, rgba(6, 6, 12, 0.45) 100%);
}

.start-hero__grid {
  position: relative;
  z-index: 2;
}

/* ── Scène unique : un seul pivot, mockups composés ── */
.start-hero__devices {
  perspective: 1400px;
  perspective-origin: 52% 42%;
  transform-style: preserve-3d;
}

.start-hero__scene-3d {
  position: relative;
  width: 100%;
  min-height: 320px;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(var(--rx, 0) * -5deg + (1 - var(--hero-scroll-3d, 0)) * 2deg))
    rotateY(calc(var(--ry, 0) * 6deg + (1 - var(--hero-scroll-3d, 0)) * -4deg))
    translateZ(calc(var(--hero-scroll-3d, 0) * -24px));
  will-change: transform;
}

.start-hero__devices::after {
  bottom: 0;
  left: 15%;
  right: 15%;
  height: 20px;
  opacity: calc(0.35 + var(--hero-scroll-3d, 0) * 0.2);
  transform:
    translateZ(-40px)
    rotateX(82deg)
    scaleX(calc(0.75 + abs(var(--ry, 0)) * 0.06));
}

/* Navigateur */
.start-mockup--browser {
  transform:
    translateZ(32px)
    translateY(calc((1 - var(--hero-scroll-3d, 0)) * 12px))
    rotateY(-7deg)
    rotateX(2deg);
}

.start-mockup--browser .start-mockup__browser {
  transform: translateZ(0);
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.07),
    0 0 48px rgba(228, 87, 46, 0.06);
}

.start-mockup--browser .start-mockup__browser::before {
  opacity: calc(0.25 + abs(var(--hero-tilt-y, 0)) * 0.2);
  background: linear-gradient(
    125deg,
    transparent 38%,
    rgba(255, 255, 255, 0.07) 50%,
    transparent 62%
  );
}

.start-mockup__depth--back,
.start-mockup__depth--bottom {
  display: none;
}

/* Téléphone hero */
.start-phone--hero {
  transform:
    translateZ(72px)
    translateY(calc((1 - var(--hero-scroll-3d, 0)) * 16px))
    translateX(8px)
    rotate(7deg)
    rotateY(9deg)
    rotateX(-2deg)
    scale(calc(0.94 + var(--hero-scroll-3d, 0) * 0.06));
}

.start-phone--hero .start-phone__shell {
  box-shadow:
    0 36px 72px rgba(0, 0, 0, 0.48),
    0 0 40px rgba(228, 87, 46, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.start-phone__edge {
  display: none;
}

/* Décorations retirées */
.start-hero__prism,
.start-hero__float,
.start-hero__grain {
  display: none !important;
}

/* Titre — pas de translateZ (évite le flou) */
.start-hero__copy .start-title {
  transform: none;
  text-shadow: none;
}

.start-hero__copy .start-title__accent {
  transform: none;
  filter: none;
}

/* ── Preview mobile ── */
.start-preview-scroll__canvas {
  display: none;
}

.start-preview-scroll__stage {
  perspective: 1200px;
  perspective-origin: 50% 40%;
}

.start-preview-scroll__pedestal {
  bottom: 10%;
  width: 48%;
  height: 18px;
  opacity: calc(0.25 + var(--section-progress, 0) * 0.35);
  background: radial-gradient(ellipse, rgba(228, 87, 46, 0.3), transparent 68%);
}

/* Preview mobile — desktop uniquement */
.start-phone--showcase {
  transform:
    translateZ(calc(40px * var(--phone-scroll, 0)))
    translateY(calc(28px * (1 - var(--phone-scroll, 0))))
    rotateX(calc(14deg * (1 - var(--phone-scroll, 0)) + var(--showcase-tilt-x, 0) * -4deg))
    rotateY(calc(-8deg * (1 - var(--phone-scroll, 0)) + var(--showcase-tilt-y, 0) * 5deg))
    scale(calc(0.9 + var(--phone-scroll, 0) * 0.1));
  transition: transform 0.15s ease-out;
}

.start-phone--showcase-static {
  transform: none !important;
  transition: none !important;
}

.start-preview-scroll--compact .start-phone--showcase {
  transform: none !important;
}

.start-phone--showcase::after {
  opacity: calc(0.2 + var(--phone-scroll, 0) * 0.3);
}

.start-phone--showcase .start-phone__shell {
  transform: none;
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.42),
    0 0 60px rgba(228, 87, 46, calc(0.06 + var(--phone-scroll, 0) * 0.1));
}

/* Cartes modèles — tilt subtil */
.start-template-card {
  transform:
    perspective(900px)
    rotateX(calc(var(--card-tilt-x) * 5deg))
    rotateY(calc(var(--card-tilt-y) * -5deg));
}

.start-template-card:hover {
  transform:
    perspective(900px)
    rotateX(calc(var(--card-tilt-x) * 5deg))
    rotateY(calc(var(--card-tilt-y) * -5deg))
    translateY(-6px)
    scale(1.015);
  box-shadow: 0 20px 48px rgba(228, 87, 46, 0.18);
}

.start-template-card:hover .start-template-preview {
  transform: scale(1.02);
}

.start-template-card::after {
  opacity: 0;
}

/* Étapes */
.start-steps__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(228, 87, 46, 0.1);
}

@media (max-width: 900px) {
  .start-hero__scene-3d {
    transform:
      rotateX(calc(var(--rx, 0) * -3deg))
      rotateY(calc(var(--ry, 0) * 4deg));
  }

  .start-phone--hero {
    transform:
      translateZ(40px)
      rotate(6deg)
      rotateY(6deg)
      scale(0.88);
  }
}

@media (max-width: 480px) {
  .start-hero__canvas { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .start-hero__canvas,
  .start-hero__spotlight,
  .start-hero__vignette,
  .start-hero__scene-3d,
  .start-phone--showcase,
  .start-template-card {
    transform: none !important;
    transition: none !important;
  }
}