/* FinCrest card scenes (assets/js/card-scenes.js, same engine as AdCrest's atl-cards and BajuGali's card-scenes): while a card is hovered (tapped on touch screens), a small scene of what
   it offers plays in it. Hosts: "title" over the card's title (home, ATL at the Core; the arrow and the text below stay),
   "icon" in place of the big icon, "number" in the number badge widened into a strip, "square" inside the small icon
   square (capabilities). The canvas is absolute and sized by the script, so it never takes space and no card moves. */
.atl-card { position: relative; }
.atl-anim {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    display: block;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: opacity 0.3s 0.05s;
    transition: opacity 0.3s 0.05s;
}
.atl-card.is-playing .atl-anim { opacity: 1; }
/* title: fades out while the scene plays */
.atl-card .atl-title { -webkit-transition: opacity 0.25s; transition: opacity 0.25s; }
.atl-card.is-playing .atl-title { opacity: 0; }
/* icon and square: the icon (a glyph, or a logo image on the integration page) fades out; the square turns white */
.atl-box { position: relative; }
/* an icon box in a centred flex card spans the card, so the scene has room; the glyph stays centred, the height is unchanged */
.atl-host-icon .atl-box { -ms-flex-item-align: stretch; align-self: stretch; }
.atl-box > i, .atl-box > img { -webkit-transition: opacity 0.25s; transition: opacity 0.25s; }
.atl-card.is-playing .atl-box > i, .atl-card.is-playing .atl-box > img { opacity: 0; }
.atl-card.atl-host-square.is-playing .atl-box { background: #ffffff; }
/* number: the round badge widens into a white strip of the same height (clip-path, not overflow, keeps its baseline) */
.atl-card.atl-host-number .atl-box {
    -webkit-clip-path: inset(0 round 8px);
    clip-path: inset(0 round 8px);
    -webkit-transition: width 0.55s cubic-bezier(.2, .8, .2, 1), border-radius 0.55s, background-color 0.3s, border-color 0.3s, color 0.2s;
    transition: width 0.55s cubic-bezier(.2, .8, .2, 1), border-radius 0.55s, background-color 0.3s, border-color 0.3s, color 0.2s;
}
.atl-card.atl-host-number.is-playing .atl-box { width: 100%; border-radius: 8px; background: #ffffff; border-color: var(--ridda-border-color); color: transparent; }