/* Animation Tile — SRS Part12 §Animation Tile · Figma 3803-104201 (desktop) / 3803-105409 (mobile)
   Every value here is a Figma variable or Figma CSS value, EXCEPT the nav button size/offset
   (SRS Table 99 gives no size and the arrow is absent from both frames) — see gap-animation-tile.md A3.
   Flat prefixed selectors only; hover/state rules compose prefixed classes (never a bare child class). */

.uiw-animation-tile {
  position: relative;
  font-family: 'Unbeatable','Arial','Helvetica Neue','Helvetica',sans-serif;
}

/* ── carousel track: swipe is native (scroll-snap), no JS needed ───────────── */
.uiw-animation-tile-track {
  display: flex;
  gap: 32px;                        /* spacing/2xl */
  /* stretch (not flex-start): the design gives every card the same height with the media blocks
     aligned (SRS Table 100 fixes the card height). Real titles wrap where Figma's 154px+nowrap
     group never does, so equal height has to come from the flex container. */
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  /* mandatory: every rest position lands on a card edge, which is the behaviour SRS Table 99 implies
     ("each click advances the carousel by one tile"). VERIFIED reachable to the end: scrollTo(max,
     behavior:'instant') settles at max=677 under BOTH mandatory and proximity, so mandatory does not
     clamp the last cards. (An earlier build switched to proximity on the belief that it did — that
     reading came from measuring with behavior:'smooth', which never settles under headless virtual
     time. Reverted.) Open question for QA on a real iOS device: see gap D5. */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;            /* the design shows no scrollbar */
  -ms-overflow-style: none;
  /* AB#140536 — Figma 3803-104201 / 3803-105409 let the strip run past the container to the RIGHT edge
     of the page, so the next tile peeks in (desktop 64px, mobile ~46px) — that IS the SRS Table 96
     "partial 4th tile". widget.js measures the bleed (0 without JS, capped at the 96px Figma margin).
     The matching end padding is what lets the LAST card come to rest on the container edge instead of
     the page edge; scroll-padding keeps the last card's `snap-align: end` and keyboard focus scrolling
     aligned to that same container edge. */
  margin-right: calc(-1 * var(--uiw-animation-tile-bleed, 0px));
  padding-right: var(--uiw-animation-tile-bleed, 0px);
  scroll-padding-right: var(--uiw-animation-tile-bleed, 0px);
}
.uiw-animation-tile-track::-webkit-scrollbar { display: none; }
/* While widget.js animates a button slide frame by frame: snap off (mandatory snap would pull every
   frame to a tile edge, which is the "jump" phones showed) and no CSS smoothing on top of the JS easing. */
.uiw-animation-tile-track.uiw-animation-tile-track--animating {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
/* Mouse hold-and-drag (widget.js): no text selection, grabbing cursor over the cards' link cursor. */
.uiw-animation-tile-track.uiw-animation-tile-track--dragging,
.uiw-animation-tile-track.uiw-animation-tile-track--dragging .uiw-animation-tile-card {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}
/* No hover zoom flickering on/off under the pointer while the strip slides past it. */
.uiw-animation-tile-track--dragging .uiw-animation-tile-card:hover .uiw-animation-tile-fg {
  transform: none;
}

/* ── tile card — the whole card is the link (SRS Table 100) ────────────────── */
.uiw-animation-tile-card {
  flex: 0 0 auto;
  width: 394.67px;
  background-color: #ffffff;
  border-radius: 8px;               /* radius/radius-lg (base) */
  display: flex;
  flex-direction: column;
  gap: 16px;                        /* spacing/lg */
  overflow: hidden;                 /* Figma overflow-clip — also clips the hover zoom */
  scroll-snap-align: start;
  text-decoration: none;            /* the card is an <a>; the design shows no underline */
  color: #000000;                   /* Color 2 */
}

/* Hardening for snap engines that resolve momentum to the nearest snap point instead of clamping to
   the scroll limit (Blink clamps — measured; iOS Safari is untested, see gap D5). Aligning the LAST
   card to the container end guarantees a reachable snap position that shows it in full. */
.uiw-animation-tile-card:last-child { scroll-snap-align: end; }

.uiw-animation-tile-body {
  /* absorbs the height a stretched card gains, so the media stays flush to the card bottom and
     every card's media block starts at the same y — without it the extra space lands below the media */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 0 12px;             /* spacing/xl top, spacing/md 2 bottom */
  gap: 16px;                        /* spacing/lg */
}

.uiw-animation-tile-text {
  display: flex;
  flex-direction: column;
  gap: 2px;                         /* spacing/xs */
  text-align: center;
  width: 100%;
  /* Figma pins this group at 154px + nowrap (hug-content artifact). Real titles are wider, so it
     fills the card instead; the 16px inset keeps long ms/zh copy off the card edge. */
  padding: 0 16px;
  box-sizing: border-box;
}

/* AB#132269: an unbreakable 500-char string ran the title to scrollWidth 7863 inside a 363px box
   (clipped by the card's overflow:hidden, so the text was simply lost). `anywhere` also lowers the
   min-content width, so the copy wraps inside the fixed 394.67px card declared by Figma/SRS. */
.uiw-animation-tile-subtitle,
.uiw-animation-tile-title {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.uiw-animation-tile-subtitle {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.18px;
  color: #000000;
}

.uiw-animation-tile-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  color: #000000;
  /* letter-spacing intentionally unset: Figma applies no tracking (computes to "normal") */
}

/* ── CTA: text link + fixed chevron (SRS Table 105) ───────────────────────── */
.uiw-animation-tile-cta {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px;                     /* Figma p-[2px] on basebutton-Default */
  /* Pins the CTA to the bottom of the text block so a stretched (shorter-content) card keeps the
     SAME CTA-to-media distance as the tallest one — the design's constant visual line. Without it
     the slack lands below the CTA and that gap varies per card (28px vs 48px measured). */
  margin-top: auto;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #ff7300;                   /* primary/base */
  /* AB#132269: as a flex item the CTA kept `min-width: auto` and grew to 4977px on a long label,
     landing at x = -2232 (off the left edge). Capping it to the text column keeps it on screen.
     AB#132247 (Removed 17/08) settled that the CTA has no fill; AB#145785 (14/10) keeps it that way
     on Hover/Active too - only the colour changes, as on PROD, see the S2 block. */
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.uiw-animation-tile-cta-icon {
  width: 16px;
  height: 16px;
  position: relative;
  flex: 0 0 auto;
  /* No transition: PROD's chevron jumps 4px instantly on hover (margin-left 0 -> 4px, transition all 0s,
     measured 14/10 on business/home and personal/home), AB#145785. */
}
/* Thin iOS-style chevron. Figma elides the icon node's vector, but its mask inset
   (12.08% 26.88% 12.08% 31.25% of the 16px box) fixes the glyph at 6.7w x 12.13h.
   A stroked corner rotated 45deg renders ink of s/sqrt(2) wide by s*sqrt(2) tall,
   so s=9px gives 6.4 x 12.73 — the closest a 90deg chevron gets to that ratio. */
.uiw-animation-tile-cta-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 31%;
  /* border-box is REQUIRED, not cosmetic: with content-box the 2px borders would add to the 9px and
     the ink would render 7.4x14.9 instead of 6.4x12.7. The public layout loads bootstrap (which sets
     a global border-box) only CONDITIONALLY, so without this the chevron has two different sizes
     depending on the page. Pinned here so the geometry is deterministic. */
  box-sizing: border-box;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;   /* mockup arm measures ~2px, not 1.5px */
  border-right: 2px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ── media: background + foreground key visual, both covering the box ──────── */
.uiw-animation-tile-media {
  position: relative;
  flex: 0 0 auto;                   /* never shrink — the aspect-ratio box is the fixed part of the card */
  width: 100%;
  /* AB#151070 (22/10, round 3): PROD key-image ratio 384x332 (desktop 384x332, mobile 311x269), which is
     the ratio of the uploaded art (800x692) → 341.2px tall at a 394.67px card, 262px at 303px. Was Figma
     47/35 (293.94px): any fit of that art into it either stretched (round 1) or cropped (round 2). */
  aspect-ratio: 384 / 332;
  overflow: hidden;
}

.uiw-animation-tile-bg,
.uiw-animation-tile-fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* AB#151070 (22/10): both layers cover the box. With art at the box ratio this equals PROD (whole art,
   no gap, no stretch, no crop); `cover` only matters for off-ratio uploads, which it crops rather than
   stretches (QC failed `fill`: ~16% stretch). The bg/fg assets are one AEM composition of the same size,
   so they must share one fit AND one object-position or they drift apart.
   Diverges from SRS Table 100 "contain" / 396x294 — gap-151070 A1, waived. */
.uiw-animation-tile-bg,
.uiw-animation-tile-fg { object-fit: cover; }
.uiw-animation-tile-fg {
  /* AB#150266 (21/10): only the key image zooms, the background stays put, as on PROD (.image .key-image).
     Diverges from SRS Table 100 "together with the background image" — gap-150266 A1, waived. */
  transform-origin: 50% 50%;        /* "Zoom from center" (default) */
  /* AB#145785 (14/10): PROD key-image zoom = transition transform 0.3s cubic-bezier(0.4, 0, 0.2, 1). */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* zoom-effect = "Zoom from top right" / "Zoom from top-right" */
.uiw-animation-tile-media[data-zoom="topright"] .uiw-animation-tile-fg {
  transform-origin: 100% 0;
}

/* ── S2 Hovered — SRS Table 97 ("Not apply for mobile view").
   Needs BOTH tests: a fine pointer (a touch device has no hover state to enter) AND the desktop
   breakpoint (a narrow desktop window is in the mobile LAYOUT, so it must not zoom either). */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .uiw-animation-tile-card:hover .uiw-animation-tile-fg {
    transform: scale(1.15);         /* PROD hover zoom 1.15 (AB#145785, 14/10: hover follows PROD) */
  }
  .uiw-animation-tile-card:hover .uiw-animation-tile-cta-icon {
    transform: translateX(4px);     /* SRS Table 105: icon nudges right on hover */
  }
  /* AB#145785 (14/10, user: hover follows PROD): text + chevron turn lighter orange, no fill, no radius.
     PROD .cta-text/.icon-arrow: rest #FF7B00, hover #FF9C40, active #FF6700, transition all 0s (instant).
     The chevron is currentColor, so it follows. */
  .uiw-animation-tile-card:hover .uiw-animation-tile-cta { color: #FF9C40; }
  .uiw-animation-tile-card:active .uiw-animation-tile-cta { color: #FF6700; }
}

/* ── nav arrow (SRS Table 99) — size/offset INFERRED, see gap A3 ───────────── */
.uiw-animation-tile-nav {
  position: absolute;
  top: 50%;
  /* 32px, measured: in SRS image107 the circle's right edge sits 32 mockup px from the container
     edge (container 25..1297 at scale 0.978 => ~32.7 CSS px), and 32px is also the spacing/2xl token.
     NOT 16px — the track is edge-to-edge (see notes.noSidePadding), so the mockup's container edge
     IS the widget edge and the measurement applies directly. */
  right: 32px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  padding: 0;
  border-radius: 999px;
  background-color: #ff7300;        /* primary/base */
  cursor: pointer;
}
/* AB#140485: prev mirrors next on the left edge (same 32px inset). */
.uiw-animation-tile-nav-prev { left: 32px; right: auto; }
/* widget.js hides prev at the first tile and next at the last tile */
.uiw-animation-tile-nav[hidden] { display: none; }
/* The nav glyph is SMALLER relative to its circle than the CTA chevron is to its box. Measured on
   source-en-navarrow.png (white pixels only, background excluded): circle diameter 111px, glyph
   19x34px => glyph height / diameter = 0.306. A 7px box gives ink 4.95x9.90 in a 32px circle = 0.309. */
.uiw-animation-tile-nav::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 42%;
  box-sizing: border-box;           /* same determinism requirement as the CTA chevron */
  width: 7px;
  height: 7px;
  border-top: 1.5px solid #ffffff;  /* SRS Table 99: white arrow on orange */
  border-right: 1.5px solid #ffffff;
  transform: translate(-50%, -50%) rotate(45deg);
}
/* Same glyph turned to point left; the ink offset mirrors too (42% -> 58%) so it stays optically centred. */
.uiw-animation-tile-nav-prev::after {
  left: 58%;
  transform: translate(-50%, -50%) rotate(-135deg);
}

/* ── desktop right-edge fade + next button — AB#140536, Figma page 3803-101106 › Navigation 3865:55028 ──
   Figma lays a 180px "Navigation" overlay over the strip's right edge (84px inside the container + the
   96px page margin): gradient #f5f5f7 at 0% → 8.245%, 83% → 30.884%, 100% → 68.617%, with the orange
   basebutton-Small (32x32) centred in it. Built as a MASK on the track instead of a painted overlay so the
   fade reveals the real page background on any section colour; mask alpha = 1 - overlay alpha.
   At the 1440 design (96px margin) the stops sit 56.5 / 124.4 / 165.2px from the page edge, i.e.
   -39.5 / 28.4 / 69.2px measured INTO the container from its edge. The stops are anchored to the
   CONTAINER edge (not the track edge) so narrower desktops with a smaller bleed keep the same fade
   inside the content instead of fading deeper into it.
   widget.js sets --has-more only while tiles remain to the right, so the last tile is never faded.
   LEFT fade (user request 06/10, not in Figma): the mirror image, shown with --has-less once tiles have
   scrolled out on the left (the track starts at the container's left edge). Both on = both stop lists. */
@media (min-width: 768px) {
  .uiw-animation-tile-track {
    --uiw-animation-tile-fade-l: transparent -39.5px, rgba(0, 0, 0, 0.17) 28.4px, #000 69.2px;
    --uiw-animation-tile-fade-r:
      #000 calc(100% - var(--uiw-animation-tile-bleed, 0px) - 69.2px),
      rgba(0, 0, 0, 0.17) calc(100% - var(--uiw-animation-tile-bleed, 0px) - 28.4px),
      transparent calc(100% - var(--uiw-animation-tile-bleed, 0px) + 39.5px);
  }
  .uiw-animation-tile--has-more .uiw-animation-tile-track {
    -webkit-mask-image: linear-gradient(to right, var(--uiw-animation-tile-fade-r));
    mask-image: linear-gradient(to right, var(--uiw-animation-tile-fade-r));
  }
  .uiw-animation-tile--has-less .uiw-animation-tile-track {
    -webkit-mask-image: linear-gradient(to right, var(--uiw-animation-tile-fade-l));
    mask-image: linear-gradient(to right, var(--uiw-animation-tile-fade-l));
  }
  .uiw-animation-tile--has-less.uiw-animation-tile--has-more .uiw-animation-tile-track {
    -webkit-mask-image: linear-gradient(to right, var(--uiw-animation-tile-fade-l), var(--uiw-animation-tile-fade-r));
    mask-image: linear-gradient(to right, var(--uiw-animation-tile-fade-l), var(--uiw-animation-tile-fade-r));
  }
  /* Centred in the overlay: overlay = 84px + bleed wide, ending at the page edge, so its centre sits
     42px - bleed/2 inside the container edge (= 6px OUTSIDE it at the 96px design margin, page x 1350).
     Vertically the overlay is 467px tall from the track top → centre 7.5px below the track's middle.
     Prev mirrors it in the left fade (the page is centred, so the left margin equals the bleed). */
  .uiw-animation-tile-nav { top: calc(50% + 7.5px); }
  .uiw-animation-tile-nav-next { right: calc(26px - var(--uiw-animation-tile-bleed, 0px) / 2); }
  .uiw-animation-tile-nav-prev { left: calc(26px - var(--uiw-animation-tile-bleed, 0px) / 2); }
}

/* ── mobile (design width 390px) ───────────────────────────────────────────────
   767px is the repo-wide mobile breakpoint (1668 occurrences across src/Uop.CMS.Widgets/*.css:
   FAQ, HTMLWidget, CrossSell, GeneralListing, ...). Matching it keeps this widget in the same
   layout mode as the rest of the page; the SRS gives no breakpoint of its own. */
@media (max-width: 767px) {
  .uiw-animation-tile-track { gap: 24px; }          /* spacing/xl */
  .uiw-animation-tile-card  { width: 303px; }       /* media height follows via aspect-ratio */
  .uiw-animation-tile-subtitle { font-size: 14px; line-height: 18px; letter-spacing: normal; }
  .uiw-animation-tile-title    { font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: -0.18px; }
  /* AB#140485 (Common rule #1 "mobile > 1 card -> nav"): buttons stay on mobile next to swipe. Figma
     3803-105409 draws none, so they keep the desktop look; the 8px inset puts next over the gap/peek
     of the following card instead of across the first card's edge (card 303px in a ~358px track). */
  .uiw-animation-tile-nav-next { right: 8px; }
  .uiw-animation-tile-nav-prev { left: 8px; }
}