/* ============================================================
   QUOTA ATTAINMENT — detail panel animation
   Panel: 1070×624px. Background: sugarai-quota-att.png (2140×1248 @2x → 50% scale).
   Drawer: sugarai-focus-drawer.png (1332×1248 @2x → 666×624px displayed).
   Cursor clicks Jessica Wilkens (~225px, ~450px), drawer slides in from right.
============================================================ */

.qat-panel {
  position: relative;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.qat-panel.is-animating {
  opacity: 1;
}

/* Scene overlay */
.qat-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

/* ——— Cursor ——— */

.qat-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  opacity: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
  will-change: transform, opacity;
}

/* ——— Drawer ——— */

.qat-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: 666px;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  border-radius: 0 20px 20px 0;
  will-change: transform;
  transform: translateX(100%);
}

/* ——— Animations ——— */

/* Background image shifts left as drawer slides in */
.qat-panel.is-animating .case__detail-panel__img {
  animation: qat-bg-shift 420ms 1700ms cubic-bezier(0.2, 0, 0.2, 1) both;
}

@keyframes qat-bg-shift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50px); }
}


/* Cursor enters from right, moves to Jessica Wilkens' name — recalibrate x/y as needed */
.qat-panel.is-animating .qat-cursor {
  animation: qat-cursor 2200ms 500ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.qat-panel.is-animating .qat-drawer {
  animation: qat-drawer 420ms 1700ms cubic-bezier(0.2, 0, 0.2, 1) both;
}

@keyframes qat-cursor {
  0%   { opacity: 0; transform: translate(820px, 370px); }
  14%  { opacity: 1; transform: translate(820px, 370px); }
  45%  { opacity: 1; transform: translate(395px, 430px); }
  54%  { opacity: 1; transform: translate(395px, 430px) scale(0.82); }
  63%  { opacity: 1; transform: translate(395px, 430px) scale(1); }
  82%  { opacity: 1; transform: translate(395px, 430px); }
  100% { opacity: 0; transform: translate(395px, 430px); }
}

@keyframes qat-drawer {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(0); }
}


/* ============================================================
   QUOTA ATTAINMENT — slide variant (Smart Dashlets carousel slide)
   Same gesture as the detail panel, scaled down to the slide
   visual area. Drawer height 584px (scaled from 624px @ ~93.6%).
   Cursor coords will be re-calibrated.
============================================================ */

.qats-visual {
  position: relative;
}

.qats-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

.qats-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  opacity: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
  will-change: transform, opacity;
}

/* Drawer: PNG natural 1332×1248, scaled to 584px tall → ~623px wide.
   Anchored 280px from the visual's left edge so the dashboard content
   to the left stays visible/clickable. Right side of the drawer
   extends beyond the visual and is clipped by .qats-scene overflow. */
.qats-drawer {
  position: absolute;
  top: 0;
  left: 280px;
  height: 584px;
  width: auto;
  display: block;
  will-change: transform;
  transform: translateX(100%);
}

/* Trigger only once the carousel scrolls into view (is-in-view added by JS).
   Extra 800ms pre-delay so the animation is clearly visible after enter. */
.carousel.is-in-view .carousel__slide.is-active .qats-cursor {
  animation: qats-cursor 2200ms 1300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.carousel.is-in-view .carousel__slide.is-active .qats-drawer {
  animation: qats-drawer 420ms 2500ms cubic-bezier(0.2, 0, 0.2, 1) both;
}

@keyframes qats-cursor {
  0%   { opacity: 0; transform: translate(700px, 325px); }
  14%  { opacity: 1; transform: translate(700px, 325px); }
  45%  { opacity: 1; transform: translate(240px, 425px); }
  54%  { opacity: 1; transform: translate(240px, 425px) scale(0.82); }
  63%  { opacity: 1; transform: translate(240px, 425px) scale(1); }
  82%  { opacity: 1; transform: translate(240px, 425px); }
  100% { opacity: 0; transform: translate(240px, 425px); }
}

@keyframes qats-drawer {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(0); }
}