/* V2 Design Tokens — used by quality diagram only */
:root {
  --v2-orange-500: #f26a31;
  --v2-gray-0: #ffffff;
  --v2-gray-300: #d0d5dd;
  --v2-gray-400: #98a2b3;
  --v2-gray-600: #475467;
  --v2-gray-700: #344054;
  --v2-gray-900: #101828;
  --v2-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --v2-text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --v2-leading-normal: 1.55;
  --v2-space-3: 0.75rem;
  --v2-space-4: 1rem;
  --v2-space-8: 2rem;
  --v2-radius-sm: 6px;
  --v2-radius-lg: 16px;
  --v2-radius-full: 9999px;
  --v2-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --v2-duration-normal: 300ms;
  --v2-duration-slow: 500ms;
}

/* ==========================================================================
   Block: Quality Diagram — Interactive Annotation Infographic
   "Делаем упор на качество печати"

   Architecture:
   - Container uses aspect-ratio for stable layout
   - Roll image centered absolutely at ~65% width
   - Each point has 3 children ALL positioned absolutely within the container:
     1. .v2-quality-marker — dot ON the roll (% coords)
     2. .v2-quality-label — text at container edge (% coords)
     3. .v2-quality-connector — hidden (lines drawn via SVG in HTML instead)
   - Diagonal lines done with an inline SVG overlay for pixel-precision
   ========================================================================== */


/* --- Container ----------------------------------------------------------- */

.v2-quality-diagram {
  position: relative;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  aspect-ratio: 1.65 / 1;
}

/* --- Central image ------------------------------------------------------- */

.v2-quality-diagram-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62%;
  z-index: 1;
  pointer-events: none;
}

.v2-quality-diagram-image img {
  width: 100%;
  height: auto;
  display: block;
}


/* --- Annotation points --------------------------------------------------- */

.v2-quality-point {
  position: absolute;
  z-index: 2;
  cursor: default;
}

/* Marker dot — positioned on the roll */
.v2-quality-marker {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: var(--v2-radius-full);
  background: var(--v2-gray-0);
  border: 2px solid var(--v2-gray-400);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
  z-index: 3;
  transition:
    transform var(--v2-duration-normal) ease,
    box-shadow var(--v2-duration-normal) ease,
    border-color var(--v2-duration-normal) ease;
}

/* Pulse ring on marker */
.v2-quality-marker::after {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  border-radius: var(--v2-radius-full);
  border: 1.5px solid transparent;
  transition:
    border-color var(--v2-duration-normal) ease,
    transform var(--v2-duration-normal) ease;
}

/* Text label */
.v2-quality-label {
  position: absolute;
  font-family: var(--v2-font-body);
  font-size: 14px;
  color: var(--v2-gray-600);
  line-height: 1.4;
  max-width: 200px;
  transition:
    color var(--v2-duration-normal) ease,
    opacity var(--v2-duration-normal) ease;
}

/* Connector — SVG line overlay handles the visual lines.
   This element is now used only as a hover-detection bridge */
.v2-quality-connector {
  display: none;
}


/* --- SVG Lines Overlay --------------------------------------------------- */

.v2-quality-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.v2-quality-lines line {
  stroke: var(--v2-gray-300);
  stroke-width: 1;
  stroke-dasharray: 5 4;
  transition:
    stroke var(--v2-duration-normal) ease,
    stroke-dasharray var(--v2-duration-normal) ease;
}


/* ==========================================================================
   Hover Interactions (CSS-only)
   ========================================================================== */

/* Dim all points when diagram is hovered */
.v2-quality-diagram:hover .v2-quality-point {
  opacity: 0.4;
  transition: opacity var(--v2-duration-normal) ease;
}

/* Active point stays visible */
.v2-quality-diagram:hover .v2-quality-point:hover {
  opacity: 1;
}

/* Marker glow on hover */
.v2-quality-point:hover .v2-quality-marker {
  transform: scale(1.4);
  border-color: var(--v2-orange-500);
  box-shadow: 0 0 0 6px rgba(242, 106, 49, 0.2);
}

.v2-quality-point:hover .v2-quality-marker::after {
  border-color: rgba(242, 106, 49, 0.3);
  animation: quality-pulse 1.5s ease-in-out infinite;
}

@keyframes quality-pulse {
  0%   { transform: scale(1);   opacity: 1; }
  50%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1);   opacity: 0; }
}

/* Text darkens on hover */
.v2-quality-point:hover .v2-quality-label {
  color: var(--v2-gray-900);
}


/* ==========================================================================
   7 Point Positions — Desktop

   Reference analysis of original screenshot:
   - Roll occupies roughly center 20%-80% horizontally, 8%-92% vertically
   - Markers are ON the roll surface
   - Labels are at the far edges of the container
   - Lines go diagonally from marker to label

   Coordinate system: % from top-left of .v2-quality-diagram container
   ========================================================================== */

/*
   MARKER POSITIONS (on the roll surface):
   1: top-left area of roll     → 35%, 15%
   2: top-right area of roll    → 65%, 20%
   3: mid-left area of roll     → 38%, 45%
   4: mid-right area of roll    → 68%, 38%
   5: lower-left of roll        → 40%, 62%
   6: bottom-center of roll     → 50%, 75%
   7: lower-right of roll       → 70%, 60%

   LABEL POSITIONS (at container edges):
   1: top-left corner           → left: 0, top: 5%
   2: top-right corner          → right: 0, top: 5%
   3: mid-left                  → left: 0, top: 38%
   4: mid-right                 → right: 0, top: 30%
   5: bottom-left               → left: 0, top: 64%
   6: bottom-center             → center, bottom: 0
   7: bottom-right              → right: 0, top: 58%
*/

/*
   Updated SVG coordinates (viewBox 0 0 1300 788):
   Markers (on roll) → Labels (at edges)
   1: (440, 165) → (270, 75)    = 33.8%,20.9% → 20.8%,9.5%
   2: (815, 195) → (1030, 75)   = 62.7%,24.7% → 79.2%,9.5%
   3: (455, 370) → (270, 365)   = 35.0%,46.9% → 20.8%,46.3%
   4: (840, 330) → (1030, 310)  = 64.6%,41.9% → 79.2%,39.3%
   5: (480, 520) → (270, 575)   = 36.9%,66.0% → 20.8%,73.0%
   6: (560, 630) → (560, 720)   = 43.1%,79.9% → 43.1%,91.4%
   7: (830, 500) → (1030, 540)  = 63.8%,63.5% → 79.2%,68.5%
*/

/* --- Point 1: top-left --- */
.v2-quality-point[data-point="1"] {
  top: 6%;
  left: 1%;
  width: 34%;
  height: 17%;
}
.v2-quality-point[data-point="1"] .v2-quality-marker {
  bottom: 0;
  right: 0;
}
.v2-quality-point[data-point="1"] .v2-quality-label {
  top: 0;
  left: 0;
  text-align: right;
  max-width: 210px;
}

/* --- Point 2: top-right --- */
.v2-quality-point[data-point="2"] {
  top: 6%;
  right: 1%;
  width: 38%;
  height: 20%;
}
.v2-quality-point[data-point="2"] .v2-quality-marker {
  bottom: 0;
  left: 0;
}
.v2-quality-point[data-point="2"] .v2-quality-label {
  top: 0;
  right: 0;
  text-align: left;
  max-width: 210px;
}

/* --- Point 3: middle-left --- */
.v2-quality-point[data-point="3"] {
  top: 42%;
  left: 1%;
  width: 36%;
  height: 8%;
}
.v2-quality-point[data-point="3"] .v2-quality-marker {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.v2-quality-point[data-point="3"] .v2-quality-label {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  text-align: right;
  max-width: 210px;
}

/* --- Point 4: middle-right --- */
.v2-quality-point[data-point="4"] {
  top: 35%;
  right: 1%;
  width: 36%;
  height: 10%;
}
.v2-quality-point[data-point="4"] .v2-quality-marker {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.v2-quality-point[data-point="4"] .v2-quality-label {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  text-align: left;
  max-width: 210px;
}

/* --- Point 5: bottom-left --- */
.v2-quality-point[data-point="5"] {
  top: 62%;
  left: 1%;
  width: 37%;
  height: 14%;
}
.v2-quality-point[data-point="5"] .v2-quality-marker {
  top: 0;
  right: 0;
}
.v2-quality-point[data-point="5"] .v2-quality-label {
  bottom: 0;
  left: 0;
  text-align: right;
  max-width: 210px;
}

/* --- Point 6: bottom-center --- */
.v2-quality-point[data-point="6"] {
  bottom: 2%;
  left: 30%;
  width: 28%;
  height: 20%;
}
.v2-quality-point[data-point="6"] .v2-quality-marker {
  top: 0;
  left: 46%;
}
.v2-quality-point[data-point="6"] .v2-quality-label {
  bottom: 0;
  left: 46%;
  transform: translateX(-50%);
  text-align: center;
  max-width: 250px;
}

/* --- Point 7: bottom-right --- */
.v2-quality-point[data-point="7"] {
  top: 59%;
  right: 1%;
  width: 37%;
  height: 13%;
}
.v2-quality-point[data-point="7"] .v2-quality-marker {
  top: 0;
  left: 0;
}
.v2-quality-point[data-point="7"] .v2-quality-label {
  bottom: 0;
  right: 0;
  text-align: left;
  max-width: 210px;
}


/* ==========================================================================
   Mobile Fallback (< 768px): Image + Styled Feature List
   ========================================================================== */

.v2-quality-mobile {
  display: none;
}

@media (max-width: 767px) {
  .v2-quality-diagram {
    display: none;
  }

  .v2-quality-mobile {
    display: block;
  }

  .v2-quality-mobile-image {
    width: 100%;
    max-height: 300px;
    overflow: hidden;
    border-radius: var(--v2-radius-lg);
    margin-bottom: var(--v2-space-8);
  }

  .v2-quality-mobile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .v2-quality-mobile-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--v2-space-3);
  }

  .v2-quality-mobile-item {
    display: flex;
    align-items: flex-start;
    gap: var(--v2-space-3);
    font-family: var(--v2-font-body);
    font-size: var(--v2-text-base);
    color: var(--v2-gray-700);
    line-height: var(--v2-leading-normal);
    padding: var(--v2-space-3) var(--v2-space-4);
    border-radius: var(--v2-radius-sm);
    background: var(--v2-gray-0);
    box-shadow: var(--v2-shadow-xs);
  }

  .v2-quality-mobile-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .v2-quality-mobile-cta {
    margin-top: var(--v2-space-8);
    text-align: center;
  }
}


/* ==========================================================================
   Tablet (768px-1023px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  .v2-quality-diagram {
    max-width: 800px;
  }

  .v2-quality-diagram-image {
    width: 55%;
  }

  .v2-quality-label {
    font-size: 12px;
    max-width: 150px;
  }

  .v2-quality-point[data-point="6"] .v2-quality-label {
    white-space: normal;
    max-width: 180px;
  }
}


/* ==========================================================================
   Entrance animation
   ========================================================================== */

.v2-quality-point {
  transition: opacity var(--v2-duration-normal) ease;
}

/* Point 6 no longer uses translateX on the container */

.v2-quality-diagram.is-animatable .v2-quality-point {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--v2-duration-slow) ease,
    transform var(--v2-duration-slow) ease;
}

.v2-quality-diagram.is-animatable.is-revealed .v2-quality-point {
  opacity: 1;
  transform: translateY(0);
}

.v2-quality-diagram.is-animatable.is-revealed .v2-quality-point[data-point="1"] { transition-delay: 100ms; }
.v2-quality-diagram.is-animatable.is-revealed .v2-quality-point[data-point="2"] { transition-delay: 200ms; }
.v2-quality-diagram.is-animatable.is-revealed .v2-quality-point[data-point="3"] { transition-delay: 300ms; }
.v2-quality-diagram.is-animatable.is-revealed .v2-quality-point[data-point="4"] { transition-delay: 400ms; }
.v2-quality-diagram.is-animatable.is-revealed .v2-quality-point[data-point="5"] { transition-delay: 500ms; }
.v2-quality-diagram.is-animatable.is-revealed .v2-quality-point[data-point="6"] { transition-delay: 600ms; }
.v2-quality-diagram.is-animatable.is-revealed .v2-quality-point[data-point="7"] { transition-delay: 700ms; }

.v2-quality-diagram.is-animatable .v2-quality-point[data-point="6"] {
  transform: translateY(10px);
}

.v2-quality-diagram.is-animatable.is-revealed .v2-quality-point[data-point="6"] {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .v2-quality-point,
  .v2-quality-marker,
  .v2-quality-label {
    transition-duration: 0ms;
  }

  .v2-quality-point:hover .v2-quality-marker::after {
    animation: none;
  }

  .v2-quality-diagram.is-animatable .v2-quality-point {
    opacity: 1;
    transform: none;
  }
}