/* uc-xstack.css - the canonical 3-screenshot hover-stack component.
 *
 * ONE definition for the card component used by six sections:
 *   /figma-to-elementor/        "Automatic or hand-tuned"  +  "Also available"
 *   /figma-to-gutenberg/        "Two ways to reach Gutenberg"
 *   /figma-to-bricks/           "Two ways in, one clean build"
 *   /classic-mode/              "Also available"
 *   /figma-to-elementor-v4-atomic-elements/  "Other ways to convert"
 *
 * Before this, the same component existed TWICE with different class names and
 * slightly different numbers: the `.f2e-*` family (f2e/f2g/v4a) and the
 * `.ucx-xway-*` family (f2b/classic-mode, at height 84% / max-width 62% /
 * radius 10px). The f2e values are now canonical and the xway markup has been
 * renamed onto them.
 *
 * THE SLOT CONTRACT, which is the whole design and is easy to break:
 *   ucx-s1  centre front (z3) by default  ->  slides RIGHT  (z1) on hover
 *   ucx-s2  left  (z2)        by default  ->  centre FRONT  (z3) on hover
 *   ucx-s3  right (z1)        by default  ->  slides LEFT   (z2) on hover
 * So s1 is what visitors see, s2 is the hover reveal, and s3 NEVER reaches the
 * front. Put the two strongest screenshots in slots 1 and 2. Note the markup
 * authors them in different DOM orders on different pages - read the class,
 * never the position.
 *
 * SPECIFICITY IS DELIBERATELY LOW (0,1,0)-(0,3,0) and UNSCOPED. f2e, f2g and
 * v4a still carry page-scoped copies of these rules in their own stylesheets at
 * (0,2,0)-(0,3,0), so those win and those three pages are untouched by this
 * file. It supplies the component to the pages that have no page-scoped copy,
 * i.e. f2b and classic-mode. Once the per-page copies are dropped at their next
 * cache-buster bump, this becomes the single owner. Do not raise the specificity
 * here without checking all six pages.
 *
 * Values are written with token fallbacks rather than bare var(), because
 * --line / --cardbd / --ease are not guaranteed on every page that loads this.
 */

/* the frame: 4:3 plate with the dot texture */
.f2e-shotframe{
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-top: 2px;
  border-radius: 20px;
  border: 1px solid var(--line, #ebebeb);
  background:
    radial-gradient(circle at 1px 1px, rgba(10, 10, 10, .045) 1px, transparent 0) 0 0 / 20px 20px,
    #f7f7f9;
}

/* NIGHT. The flip defines --uc-surface-raised (#FFFFFF light / #242424 night) in
   BOTH states, so a var() fallback on the light rule would never fire - it is a
   default for an UNDEFINED token, not a light-mode value. The state class is the
   only hook. `.uc-night` is live on these pages (uichemy-f2e.js toggles it); it is
   DEAD on /home/, whose engine moved to inline properties. */
.uc-night .f2e-shotframe,
.uc-night.f2e-shotframe{
  background:
    radial-gradient(circle at 1px 1px, rgba(10, 10, 10, .045) 1px, transparent 0) 0 0 / 20px 20px,
    var(--uc-surface-raised, #242424);
}

.f2e-xstack{ position: absolute; inset: 0; }

.f2e-xshot{
  position: absolute;
  top: 50%;
  left: 50%;
  height: 82%;
  width: auto;
  max-width: 58%;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--cardbd, #e7e7ea);
  box-shadow: rgba(16, 24, 40, .45) 0 14px 30px -12px;
  background: #ffffff;
  transition: transform .55s var(--ease, cubic-bezier(.22, 1, .36, 1));
}

.f2e-xshot.ucx-s1{ transform: translate(-50%, -50%) rotate(0deg);                z-index: 3; }
.f2e-xshot.ucx-s2{ transform: translate(-84%, -46%) rotate(-8deg) scale(.94);    z-index: 2; }
.f2e-xshot.ucx-s3{ transform: translate(-16%, -46%) rotate(8deg) scale(.94);     z-index: 1; }

.f2e-xcard:hover .f2e-xshot.ucx-s1{ transform: translate(-16%, -46%) rotate(8deg) scale(.94);  z-index: 1; }
.f2e-xcard:hover .f2e-xshot.ucx-s2{ transform: translate(-50%, -50%) rotate(0deg);             z-index: 3; }
.f2e-xcard:hover .f2e-xshot.ucx-s3{ transform: translate(-84%, -46%) rotate(-8deg) scale(.94); z-index: 2; }

@media (prefers-reduced-motion: reduce){
  .f2e-xshot{ transition: none; }
}

/* ELEMENTOR IMG RESET - this block is load-bearing, do not "tidy" it away.
 *
 * Elementor ships an UNLAYERED `.elementor img { height:auto; max-width:100%;
 * border-radius:0; box-shadow:none; border:none }` at (0,1,1), which BEATS a bare
 * `.f2e-xshot` at (0,1,0). Without this the shots render at height 0 with no radius
 * and no shadow - measured exactly that on /figma-to-bricks/ before it was added.
 *
 * The pages that keep page-scoped copies dodge this by accident, because
 * `.uc-f2e .f2w .f2e-xshot` is (0,3,0). The retired xway CSS carried the same
 * workaround as `.elementor .xway-shot`, so this is not a new idea - it is the same
 * fix under the canonical name.
 *
 * (0,2,0) against the reset's (0,1,1): two classes beat one class plus one element,
 * so no !important is needed. */
.elementor .f2e-xshot{
  position: absolute;
  top: 50%;
  left: 50%;
  height: 82%;
  width: auto;
  max-width: 58%;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--cardbd, #e7e7ea);
  box-shadow: rgba(16, 24, 40, .45) 0 14px 30px -12px;
  background: #ffffff;
  transition: transform .55s var(--ease, cubic-bezier(.22, 1, .36, 1));
}

/* the slot transforms need the same lift, so the pair stays consistent at (0,3,0) */
.elementor .f2e-xshot.ucx-s1{ transform: translate(-50%, -50%) rotate(0deg);             z-index: 3; }
.elementor .f2e-xshot.ucx-s2{ transform: translate(-84%, -46%) rotate(-8deg) scale(.94); z-index: 2; }
.elementor .f2e-xshot.ucx-s3{ transform: translate(-16%, -46%) rotate(8deg) scale(.94);  z-index: 1; }

.elementor .f2e-xcard:hover .f2e-xshot.ucx-s1{ transform: translate(-16%, -46%) rotate(8deg) scale(.94);  z-index: 1; }
.elementor .f2e-xcard:hover .f2e-xshot.ucx-s2{ transform: translate(-50%, -50%) rotate(0deg);             z-index: 3; }
.elementor .f2e-xcard:hover .f2e-xshot.ucx-s3{ transform: translate(-84%, -46%) rotate(-8deg) scale(.94); z-index: 2; }

@media (prefers-reduced-motion: reduce){
  .elementor .f2e-xshot{ transition: none; }
}