/* ==========================================================================
   Compatibility  —  Figma "Compatibility - Animation" (818:150638)
   1920 x 866 at y 7084, on Mono/Dark.

   Plate left (866 x 666 at 48/100) with four corner arrows, four 40px heading
   lines right, a
   lede, and a three-row dot field reusing the same 19px cell as the dots band
   (Component 425) — so it inherits the Pulse hover.

   Default -> Animate:
     plate      width 15 -> 866, opacity 0 -> 1 (wipe open from the left)
     arrows     ride the wipe, then fade in as it lands
     headings   translateY +40 -> 0
     lede       translateY +50 -> 0
     dot field  opacity 0 -> 1
   ========================================================================== */

.tech-compat {
  top: calc(7084 * var(--s));
  height: calc(866 * var(--s));
  background: var(--c-mono-dark);
  overflow: hidden;
  z-index: 2;
}

.tech-compat__plate {
  position: absolute;
  left: calc(48 * var(--s));
  top: calc(100 * var(--s));
  width: calc(15 * var(--s));
  height: calc(666 * var(--s));
  background: #D9D9D9;
  overflow: hidden;
  opacity: 0;
  transition:
    width calc(var(--rv-dur) * 1.2) var(--rv-ease),
    opacity calc(var(--rv-dur) * 0.5) var(--rv-ease);
}
.tech-compat.is-in .tech-compat__plate { width: calc(866 * var(--s)); opacity: 1; }
/* --- corner arrows ------------------------------------------------------
   Figma places four 12x12 corner marks on the plate's corners. They are
   children of the plate, so the wipe carries the right-hand pair outward as
   it opens; the fade is held back until the wipe is nearly done, otherwise
   all four are stacked on top of each other while the plate is still 15 wide. */
.tech-compat__plate .brk__c {
  --brk-w: 12;
  --brk-h: 12;
  --brk-color: var(--c-accent-yellow);
  opacity: 0;
  transition: opacity calc(var(--rv-dur) * 0.5) var(--rv-ease);
  transition-delay: calc(var(--rv-dur) * 0.75);
}
.tech-compat.is-in .tech-compat__plate .brk__c { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tech-compat__plate .brk__c { opacity: 1; transition: none; }
}

/* Held at the final width so the image does not squash as the plate opens. */
.tech-compat__plate img {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(866 * var(--s));
  height: 100%;
  object-fit: cover;
}

.tech-compat__h {
  position: absolute;
  left: calc(50% + 10 * var(--s));
  height: calc(48 * var(--s));
}
.tech-compat__h--1 { top: calc(100 * var(--s)); width: calc(708 * var(--s)); }
.tech-compat__h--2 { top: calc(148 * var(--s)); width: calc(630 * var(--s)); }
.tech-compat__h--3 { top: calc(196 * var(--s)); width: calc(691 * var(--s)); }
.tech-compat__h--4 { top: calc(244 * var(--s)); width: calc(243 * var(--s)); }
.tech-compat__h span {
  display: block;
  font-weight: 300;
  font-size: calc(40 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-1.6 * var(--s));
  color: var(--c-mono-light);
  white-space: nowrap;
}

.tech-compat__lede {
  position: absolute;
  left: calc(50% + 10 * var(--s));
  top: calc(332 * var(--s));
  width: calc(595 * var(--s));
  height: calc(56 * var(--s));
}
.tech-compat__lede p {
  font-size: calc(20 * var(--s));
  line-height: 1.4;
  letter-spacing: calc(-0.6 * var(--s));
  color: var(--c-light-grey-02);
}

/* --- dot field: same cell as the dots band, so hover matches ------------- */

.tech-compat__dots {
  position: absolute;
  left: calc(50% + 10 * var(--s));
  top: calc(581 * var(--s));
  width: calc(809 * var(--s));
  height: calc(185 * var(--s));
}
.tech-compat__dots .dots__row { position: absolute; }

.tech-compat__dots {
  opacity: 0;
  transition: opacity calc(var(--rv-dur) * 1.1) var(--rv-ease);
}
.tech-compat.is-in .tech-compat__dots { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tech-compat__plate { width: calc(866 * var(--s)); opacity: 1; transition: none; }
  .tech-compat__dots { opacity: 1; transition: none; }
}

@media (max-width: 1500px) {
  .tech-compat__h span { font-size: calc(32 * var(--s)); }
}

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .tech-compat { height: auto; padding: 48px 20px 56px; }
  .tech-compat__plate,
  .tech-compat.is-in .tech-compat__plate {
    position: static;
    width: 100% !important;
    height: auto;
    opacity: 1;
    aspect-ratio: 866 / 666;
  }
  .tech-compat__plate img { position: absolute; inset: 0; width: 100%; }
  .tech-compat__h, .tech-compat__lede { position: static; width: auto; height: auto; }
  .tech-compat__h--1 { margin-top: 28px; }
  .tech-compat__h span { font-size: clamp(22px, 6vw, 30px); white-space: normal; }
  .tech-compat__lede { margin-top: 16px; }
  .tech-compat__lede p { font-size: 16px; }
  .tech-compat__dots { display: none; }
}