/* ==================================================================
   Dashboard — kwizzbit/dashboard (whole-file segment)
   Faithful slice of /HTML/dashboard.html. Globals (reset/body/font-face/:root)
   dropped; tokens canonical (theme.json). Full-bleed via the .kwb-segment wrapper.
   ================================================================== */

.dashboard .js-reveal {
  opacity: 0;
  transform: translateY(var(--wp--custom--motion--scroll-reveal-distance));
  transition:
    opacity   var(--wp--custom--motion--scroll-reveal-duration) var(--wp--custom--motion--scroll-reveal-easing),
    transform var(--wp--custom--motion--scroll-reveal-duration) var(--wp--custom--motion--scroll-reveal-easing);
}
.dashboard .js-reveal.is-visible { opacity: 1; transform: translateY(0); }

.dashboard {
  background: #F0E3D9;
  overflow-x: clip;
  padding-block: 11rem 11rem;
}

.dashboard__inner {
  max-width: 1100px;
  margin-inline: auto;
  margin-left: calc(50% - 550px - 20px);
  padding-inline: var(--wp--custom--layout--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.dashboard__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dashboard__eyebrow {
  display: block;
  font-family: var(--wp--preset--font-family--pixel);
  font-size: var(--wp--preset--font-size--h-8-eyebrow);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--coral);
  margin-bottom: 0.625rem;
  text-transform: uppercase;
}

.dashboard__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--h-2-preview);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.10764em;
  color: var(--wp--preset--color--ink);
  max-width: 340px;
  margin-bottom: var(--wp--preset--spacing--50);
}

.dashboard__title-arrow {
  display: inline-block;
  color: var(--wp--preset--color--coral);
  animation: arrow-bob 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes arrow-bob {
  0%, 100% { transform: translateY(0);    }
  40%       { transform: translateY(-7px); }
  60%       { transform: translateY(-5px); }
}

.dashboard__lead {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--nav);
  font-weight: 500;
  line-height: 1.412;
  color: #473531;
  max-width: 295px;
}

.dashboard__media {
  position: relative;
  margin-left: -2.5rem;
  opacity: 0;
  transform: translateY(80px);
}

.dashboard__media.is-entering {
  animation: screen-spring-in 0.95s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes screen-spring-in {
  0%   { opacity: 0; transform: translateY(80px); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}

.dashboard__media.is-floating {
  opacity: 1;
  transform: translateY(0);
  animation: screen-float 7s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes screen-float {
  0%, 100% { transform: translateY(0);     }
  45%       { transform: translateY(-10px); }
  55%       { transform: translateY(-9px);  }
}

.dashboard__finger {
  position: absolute;
  left: -1.8rem;
  top: 50%;
  transform: translateY(-60%);
  width: 100px;
  height: auto;
  z-index: 2;
  pointer-events: none;
  animation: finger-float 3.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes finger-float {
  0%, 100% { transform: translateY(-60%) rotate(-4deg) translateX(0);   }
  50%       { transform: translateY(-68%) rotate(-1deg) translateX(6px); }
}

.dashboard__screen {
  display: block;
  width: 115%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .dashboard .js-reveal { transition: none; opacity: 1; transform: none; }
  .dashboard__media { opacity: 1; transform: none; animation: none !important; }
  .dashboard__media.is-entering,
  .dashboard__media.is-floating { animation: none; opacity: 1; transform: none; }
  .dashboard__title-arrow,
  .dashboard__finger { animation: none; }
}

/* TABLET ≤1023px */
@media (max-width: 1023px) {
  .dashboard { padding-block: 7rem 9rem; }
  .dashboard__inner {
    margin-left: auto;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .dashboard__media {
    margin-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .dashboard__title { font-size: clamp(2rem, 5vw, 3.25rem); }
  .dashboard__screen {
    width: 100%;
    max-width: 614px;
  }
  .dashboard__finger {
    width: 80px;
    left: calc(50% - 328px);
  }
}

/* MOBILE ≤640px */
@media (max-width: 640px) {
  .dashboard { padding-block: 5.5rem 6rem; }
  .dashboard__eyebrow { font-size: 18px; margin-bottom: 0.5rem; }
  .dashboard__title { font-size: clamp(1.875rem, 10.13vw, 2.375rem); line-height: 0.9; letter-spacing: -0.10763em; }
  .dashboard__lead { font-size: 1rem; max-width: 260px; }
  .dashboard__screen { max-width: 100%; }
  /* Was left: -0.5rem, top: 40% — nudge left 5px, down 20px */
  .dashboard__finger {
    width: 64px;
    left: calc(-0.5rem - 5px);
    top: calc(40% + 20px);
  }
}