/* ============================================================
   Box Off — showcase.css
   Homepage hero: auto-advancing steps + animated app scenes.
   Scene UI is built in HTML and sized in container units (cqw)
   so it scales perfectly from phone to desktop.
   ============================================================ */

/* ── Hero layout (centred, showcase underneath) ── */
.hero--showcase {
  min-height: auto;
  padding-block: calc(var(--nav-height) + var(--sp-16)) var(--sp-16);
}

.hero--showcase .hero-content { padding-block: 0; }

.hero--showcase .hero-text {
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}

.hero--showcase .hero-headline {
  font-size: clamp(2.25rem, 6.2vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
}

.hero--showcase .hero-desc {
  margin-inline: auto;
  max-width: 640px;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
}

.hero--showcase .btn-group { justify-content: center; }
.hero--showcase .btn { border-radius: var(--radius-full); }

/* ── Showcase panel ── */
.showcase {
  --sc-ink:     #0F172A;
  --sc-muted:   #64748B;
  --sc-line:    #EEF2F7;
  --sc-soft:    #F1F5F9;
  --sc-ease:    cubic-bezier(.2,.7,.2,1);
  --sc-spring:  cubic-bezier(.34,1.56,.64,1);
  --sc-step-ms: 6000ms;

  max-width: 1080px;
  margin: var(--sp-16) auto 0;
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

@media (min-width: 900px) {
  .showcase {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sp-10);
  }
}

/* ── Step list ── */
.sc-steps {
  list-style: none;
  order: 2;
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
}

.sc-step {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  padding: 6px;
  cursor: pointer;
  transition: background-color 250ms var(--sc-ease), box-shadow 250ms var(--sc-ease);
}

.sc-step:focus-visible { outline: 2px solid var(--color-amber); outline-offset: 2px; }

.sc-step__head { display: flex; align-items: center; gap: var(--sp-3); }

.sc-step__num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  transition: background-color 250ms, color 250ms;
}

.sc-step__title,
.sc-step__desc { display: none; }

.sc-step__bar { display: none; }

.sc-step.is-active .sc-step__num { background: var(--color-blue); color: #fff; }

/* Mobile caption under the visual */
.sc-caption {
  order: 3;
  text-align: center;
  margin-top: calc(var(--sp-2) * -1);
}
.sc-caption__title { font-weight: 700; color: #fff; font-size: 1.0625rem; }
.sc-caption__desc  { margin: 4px auto 0; max-width: 340px; font-size: 0.9375rem; line-height: 1.55; color: rgba(255,255,255,0.65); }

@media (min-width: 900px) {
  .sc-steps { display: block; order: 1; }
  .sc-steps li + li { margin-top: 4px; }
  .sc-step { border-radius: var(--radius-lg); padding: 14px 18px; }
  .sc-step:hover { background: rgba(255,255,255,0.05); }
  .sc-step__title { display: inline; font-size: 1.0625rem; font-weight: 600; color: rgba(255,255,255,0.6); transition: color 250ms; }

  .sc-step.is-active {
    background: #fff;
    box-shadow: 0 10px 30px -12px rgba(0,0,0,0.5);
  }
  .sc-step.is-active .sc-step__title { color: var(--sc-ink); }
  .sc-step.is-active .sc-step__desc {
    display: block;
    margin-top: 8px;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #475569;
    animation: sc-fade .4s ease-out both;
  }
  .sc-step.is-active .sc-step__bar {
    display: block;
    position: absolute;
    left: 18px; right: 18px; bottom: 0;
    height: 2px;
    border-radius: 2px;
    overflow: hidden;
    background: rgba(27,79,216,0.15);
  }
  .sc-caption { display: none; }
}

.sc-step__progress {
  display: block;
  height: 100%;
  background: var(--color-blue);
  transform-origin: left;
  transform: scaleX(0);
}
.sc-step.is-active .sc-step__progress {
  animation: sc-progress var(--sc-step-ms) linear both;
}
.showcase.is-paused .sc-step__progress { animation-play-state: paused; }

/* ── Stage: the animated visual ── */
.sc-stage {
  position: relative;
  order: 1;
  width: 100%;
  aspect-ratio: 590 / 525;
  container-type: inline-size;
  color: var(--sc-ink);
}
@media (min-width: 900px) { .sc-stage { order: 2; } }

.sc-scene { position: absolute; inset: 0; display: none; }
.sc-scene.is-active  { display: block; z-index: 2; }
.sc-scene.is-leaving { display: block; z-index: 1; animation: sc-leave .38s ease-in both; }

/* Positioned pieces (left/top/width set per element) */
.sc-abs { position: absolute; }

/* White app card */
.sc-card {
  background: #fff;
  border-radius: 3.4cqw;
  box-shadow: 0 24px 50px -20px rgba(2,6,23,0.65), 0 0 0 1px rgba(15,23,42,0.06);
  overflow: hidden;
  padding: 3.6cqw 4cqw;
  font-size: 2.3cqw;
  line-height: 1.3;
}

.sc-kicker { font-size: 1.85cqw; color: var(--sc-muted); }
.sc-title  { font-size: 3.4cqw; font-weight: 700; letter-spacing: -0.02em; margin-top: 1.2cqw; line-height: 1.1; }
.sc-sub    { font-size: 2.1cqw; color: #475569; margin-top: 1cqw; }
.sc-mono   { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.sc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  padding: 1.7cqw 0;
  border-bottom: 1px solid var(--sc-line);
}
.sc-row span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-row--total { border-bottom: 0; font-weight: 700; font-size: 2.6cqw; }

.sc-btn {
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
  padding: 1.3cqw 2.6cqw;
  border-radius: 999px;
  background: var(--color-blue);
  color: #fff;
  font-size: 2cqw;
  font-weight: 600;
}
.sc-btn--green { background: var(--color-green); }

.sc-pill {
  display: inline-flex;
  align-items: center;
  gap: .8cqw;
  padding: .6cqw 1.8cqw;
  border-radius: 999px;
  font-size: 1.8cqw;
  font-weight: 700;
}
.sc-pill--amber { background: #FEF3C7; color: #92400E; }
.sc-pill--green { background: #DCFCE7; color: #166534; }
.sc-pill--blue  { background: #DBEAFE; color: #1E40AF; }

/* Notification / toast */
.sc-toast {
  display: flex;
  align-items: center;
  gap: 2cqw;
  background: #fff;
  border-radius: 2.8cqw;
  padding: 2cqw 2.6cqw;
  box-shadow: 0 18px 40px -14px rgba(2,6,23,0.55), 0 0 0 1px rgba(15,23,42,0.06);
}
.sc-toast__icon {
  display: grid;
  place-items: center;
  width: 5.6cqw;
  height: 5.6cqw;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 3cqw;
  background: #DCFCE7;
  color: var(--color-green);
}
.sc-toast__icon--blue  { background: #DBEAFE; color: var(--color-blue); }
.sc-toast__icon--amber { background: #FEF3C7; color: var(--color-amber-dark); }
.sc-toast__title { font-size: 2.2cqw; font-weight: 700; line-height: 1.2; }
.sc-toast__sub   { font-size: 1.85cqw; color: var(--sc-muted); margin-top: .4cqw; line-height: 1.2; }

/* ── Scene 1: pipeline ── */
.sc-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; margin-top: 2.4cqw; }
.sc-col   { background: var(--sc-soft); border-radius: 2cqw; padding: 1.4cqw; min-height: 36cqw; }
.sc-col__head { display: flex; justify-content: space-between; font-size: 1.8cqw; font-weight: 700; color: #475569; padding: .4cqw .6cqw 1.2cqw; }
.sc-job {
  background: #fff;
  border-radius: 1.4cqw;
  padding: 1.4cqw 1.6cqw;
  box-shadow: 0 1px 2px rgba(15,23,42,0.06);
  margin-bottom: 1.2cqw;
}
.sc-job b    { display: block; font-size: 1.95cqw; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-job span { display: block; font-size: 1.65cqw; color: var(--sc-muted); margin-top: .3cqw; }
.sc-job--new { box-shadow: 0 0 0 .4cqw rgba(27,79,216,0.35), 0 8px 18px -8px rgba(27,79,216,0.6); }

/* ── Scene 3: phone ── */
.sc-phone {
  background: #fff;
  border: 1.2cqw solid #0B1220;
  border-radius: 6cqw;
  box-shadow: 0 30px 60px -24px rgba(2,6,23,0.8);
  padding: 4cqw 3.6cqw;
  font-size: 2.1cqw;
}
.sc-phone__notch { width: 14cqw; height: 1.6cqw; border-radius: 1cqw; background: #0B1220; margin: -2.6cqw auto 3cqw; }
.sc-sign {
  margin-top: 2cqw;
  height: 17cqw;
  border: 1px dashed #CBD5E1;
  border-radius: 2cqw;
  display: grid;
  place-items: center;
  background: #F8FAFC;
}
.sc-sign svg { width: 80%; height: 70%; overflow: visible; }
.sc-sign path { fill: none; stroke: var(--sc-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ── Scene 4: calendar ── */
.sc-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2cqw; margin-top: 2.4cqw; }
.sc-day  { background: var(--sc-soft); border-radius: 1.8cqw; padding: 1.2cqw; min-height: 42cqw; }
.sc-day__head { text-align: center; font-size: 1.7cqw; color: var(--sc-muted); font-weight: 600; margin-bottom: 1.2cqw; }
.sc-day__head b { display: block; font-size: 2.8cqw; color: var(--sc-ink); }
.sc-day--today .sc-day__head b { color: var(--color-blue); }
.sc-slot {
  border-radius: 1.2cqw;
  padding: 1.1cqw 1.2cqw;
  font-size: 1.55cqw;
  line-height: 1.25;
  margin-bottom: 1cqw;
  background: #E2E8F0;
  color: #334155;
}
.sc-slot b { display: block; font-weight: 700; }
.sc-slot--new { background: var(--color-blue); color: #fff; box-shadow: 0 8px 18px -8px rgba(27,79,216,0.8); }

/* ── Scene 5: profit ── */
.sc-amount { font-family: var(--font-mono); font-size: 6cqw; font-weight: 700; letter-spacing: -0.03em; margin-top: 2.4cqw; }
.sc-status { position: relative; height: 3.6cqw; margin-top: 1.6cqw; }
.sc-status > * { position: absolute; left: 0; top: 0; }
.sc-profit { color: var(--color-green); }

/* ── Animations (same curves as the reference) ── */
.sc-rise, .sc-pop, .sc-float, .sc-photo, .sc-fade, .sc-out, .sc-draw { animation-delay: var(--d, 0s); }

.sc-rise  { animation: sc-rise .6s var(--sc-ease) var(--d, 0s) both; }
.sc-pop   { animation: sc-pop .55s var(--sc-spring) var(--d, 0s) both; }
.sc-photo { animation: sc-photo .7s var(--sc-ease) var(--d, 0s) both; }
.sc-fade  { animation: sc-fade .6s ease-out var(--d, 0s) both; }
.sc-out   { animation: sc-out .3s ease-in var(--d, 0s) both; }
.sc-float {
  animation-name: sc-pop, sc-float;
  animation-duration: .55s, 4.5s;
  animation-timing-function: var(--sc-spring), ease-in-out;
  animation-delay: var(--d, 0s), calc(var(--d, 0s) + .55s);
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, none;
}
.sc-draw path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: sc-draw 1.1s cubic-bezier(.4,0,.2,1) var(--d, 0s) both;
}

@keyframes sc-photo    { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sc-rise     { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes sc-pop      { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes sc-fade     { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-out      { to { opacity: 0; transform: scale(.9); } }
@keyframes sc-float    { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes sc-leave    { to { opacity: 0; transform: scale(.985) translateY(6px); } }
@keyframes sc-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sc-draw     { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sc-rise, .sc-pop, .sc-float, .sc-photo, .sc-fade, .sc-draw path,
  .sc-scene.is-leaving, .sc-step.is-active .sc-step__desc { animation: none !important; }
  .sc-out { display: none; }
  .sc-draw path { stroke-dashoffset: 0; }
  .sc-scene.is-leaving { display: none; }
  .sc-step__bar { visibility: hidden; }
}