/*
  ZEPRA 3D SCENES & PRODUCT ART DIRECTION
  Layered perspective, depth transforms, and responsive fallbacks
*/

/* 1. SCENE CONTAINER & PERSPECTIVE */
.mkt-scene {
  position: relative;
  width: 100%;
  perspective: 1400px;
  perspective-origin: 50% 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mkt-space-4) 0;
}

.mkt-scene--bleed {
  width: 100%;
}

@media (min-width: 1600px) {
  .mkt-scene--bleed {
    width: 110%;
    max-width: var(--mkt-container-bleed);
    margin-left: -5%;
  }
}

/* 2. 3D CANVAS */
.mkt-scene__canvas {
  position: relative;
  width: 100%;
  max-width: 760px;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* 3. MAIN DASHBOARD LAYER */
.mkt-scene__main {
  position: relative;
  width: 100%;
  z-index: 2;
  transform: translate3d(0, 0, 0) rotateX(6deg) rotateY(-8deg) rotateZ(0.5deg);
  transform-origin: center center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: none;
  box-shadow: none;
}

.mkt-scene:hover .mkt-scene__main {
  transform: translate3d(0, 0, 8px) rotateX(4deg) rotateY(-5deg) rotateZ(0.25deg);
}

/* 4. PHONE LAYER */
.mkt-scene__phone {
  position: absolute;
  right: -30px;
  bottom: -40px;
  z-index: 6;
  transform: translate3d(-30px, 40px, 120px) rotateX(4deg) rotateY(-6deg);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.25));
}

.mkt-scene:hover .mkt-scene__phone {
  transform: translate3d(-20px, 25px, 160px) rotateX(2deg) rotateY(-3deg);
}

/* 5. FLOATING CARDS 3D OFFSETS */
.mkt-scene__float-1 {
  top: -24px;
  left: -40px;
  transform: translate3d(0, 0, 140px);
  animation: mkt-float-a 6s ease-in-out infinite;
}

.mkt-scene__float-2 {
  bottom: 60px;
  left: -50px;
  transform: translate3d(0, 0, 160px);
  animation: mkt-float-b 7s ease-in-out infinite 0.5s;
}

.mkt-scene__float-3 {
  top: 8%;
  right: 8%;
  transform: translate3d(0, 0, 140px);
  animation: mkt-float-c 8s ease-in-out infinite 1s;
}

/* 6. GLOW BACKDROP */
.mkt-scene__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(-50px);
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(255, 121, 18, 0.18) 0%, rgba(255, 121, 18, 0) 70%);
  pointer-events: none;
  z-index: 1;
  filter: blur(40px);
}

/* 7. SHOWCASE SCENES (4 UNIQUE ARCHETYPES) */

/* Scene A: Online Booking - Phone Centric */
.mkt-scene-booking {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 480px;
}

.mkt-scene-booking__phone {
  position: relative;
  z-index: 3;
  transform: scale(1.05);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
}

.mkt-scene-booking__float-step {
  position: absolute;
  right: 10%;
  top: 25%;
  z-index: 4;
}

.mkt-scene-booking__float-time {
  position: absolute;
  left: 10%;
  bottom: 25%;
  z-index: 4;
}

/* Scene B: Schedule - Cropped Macro Calendar */
.mkt-scene-schedule {
  position: relative;
  overflow: hidden;
  border-radius: var(--mkt-radius-card-lg);
  background: #FFFFFF;
  border: 1px solid var(--mkt-line);
  box-shadow: var(--mkt-shadow-2);
}

.mkt-scene-schedule__macro {
  width: 100%;
  margin-left: 0;
  transform: none;
  transition: filter 0.22s ease, box-shadow 0.22s ease;
}

/* ИСПРАВЛЕНИЕ (2026-10-04): hover не вращает illustration — только лёгкая подсветка */
.mkt-scene-schedule:hover .mkt-scene-schedule__macro {
  transform: none;
  filter: brightness(1.03);
}

/* Scene C: Client Base Dossier */
.mkt-scene-clients {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mkt-scene-clients__card {
  position: relative;
  z-index: 2;
  width: 100%;
}

.mkt-scene-clients__float-badge {
  position: absolute;
  top: -15px;
  right: 20px;
  z-index: 5;
}

/* Scene D: Dark Analytics Surface */
.mkt-scene-analytics {
  background: var(--mkt-surface-dark-card);
  border: 1px solid var(--mkt-surface-dark-border);
  border-radius: var(--mkt-radius-card-lg);
  padding: var(--mkt-space-6);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.mkt-scene-analytics__glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(255, 121, 18, 0.25) 0%, rgba(255, 121, 18, 0) 70%);
  filter: blur(30px);
  pointer-events: none;
}

/* RESPONSIVE BREAKPOINTS (ART DIRECTED) */

/* Large Desktop (1200 - 1599px) */
@media (max-width: 1599px) and (min-width: 1200px) {
  .mkt-scene__canvas {
    max-width: 660px;
  }
  .mkt-scene__phone {
    right: -15px;
    bottom: -30px;
  }
}

/* Medium / Small Desktop (1024 - 1199px) */
@media (max-width: 1199px) and (min-width: 1024px) {
  .mkt-scene {
    perspective: 1200px;
  }
  .mkt-scene__main {
    transform: rotateX(4deg) rotateY(-6deg) rotateZ(0deg);
  }
  .mkt-scene__phone {
    transform: translate3d(-10px, 20px, 80px);
    right: 0;
  }
  .mkt-scene__float-3 {
    display: none; /* Reduce to 2 floats on this breakpoint */
  }
}

/* Tablet (768 - 1023px) */
@media (max-width: 1023px) {
  .mkt-scene {
    perspective: none;
    padding: var(--mkt-space-6) 0;
  }
  .mkt-scene__canvas {
    transform-style: flat;
    max-width: 600px;
  }
  .mkt-scene__main {
    transform: none !important;
  }
  .mkt-scene__phone {
    position: relative;
    right: auto;
    bottom: auto;
    transform: none !important;
    margin: var(--mkt-space-5) auto 0;
    display: block;
  }
  .mkt-scene__float-1 {
    top: -15px;
    left: 10px;
    transform: none !important;
  }
  .mkt-scene__float-2 {
    bottom: 20px;
    left: 10px;
    transform: none !important;
  }
  .mkt-scene__float-3 {
    display: none;
  }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
  .mkt-scene {
    padding: var(--mkt-space-4) 0;
    overflow-x: clip;
    max-width: 100%;
  }
  .mkt-scene__canvas {
    overflow-x: clip;
    max-width: 100%;
  }
  .mkt-scene__main {
    transform: none !important;
  }
  .mkt-scene__float-1 {
    position: static;
    margin-bottom: var(--mkt-space-3);
    width: 100%;
    max-width: 100%;
  }
  .mkt-scene__float-2,
  .mkt-scene__float-3 {
    display: none; /* Single prominent float for clean mobile view */
  }
  .mkt-scene__phone {
    margin-top: var(--mkt-space-4);
  }
  .mkt-scene__glow {
    width: 100%;
    height: 100%;
  }

  /* MOBILE (2026-08-15): product scenes — без абсолютных «хвостов» */
  .mkt-scene-booking {
    min-height: auto;
    padding: var(--mkt-space-2) 0;
  }

  .mkt-scene-booking__phone {
    transform: none;
    margin: 0 auto;
  }

  .mkt-scene-booking__float-step,
  .mkt-scene-booking__float-time {
    position: static;
    margin: var(--mkt-space-3) auto 0;
    max-width: 100%;
  }

  .mkt-scene-schedule__macro {
    width: 100%;
    margin-left: 0;
    transform: none;
  }
}

/* Max-Height Fallback (< 800px) */
@media (max-height: 800px) and (min-width: 1024px) {
  .mkt-scene__canvas {
    transform: scale(0.88);
  }
}