/* Hero illustration: an inbox, the request AI fills in, and the schedule it lands on, for four example industries.
   js/hero-screens.js plays each one and flips to the next like a rolodex card. */

/* Three screens standing on the ground line. The front one covers the inner 11% of each back screen, so their content is
   padded clear of it. */
.screens { max-width: 1080px; margin: var(--space-64) auto 0; }
/* The examples share one spot; only the current one shows. Without JavaScript that is the first. */
.screens-stages { display: grid; }
.screens-stage { position: relative; grid-area: 1 / 1; height: 440px; perspective: 1600px; }
.screens:not(.is-live) .screens-stage:not(:first-child), .is-live .screens-stage:not(.is-current, .is-leaving) { visibility: hidden; }
.screens-stage.is-leaving { z-index: 2; }
.screen { position: absolute; bottom: 0; overflow: hidden; padding: var(--space-24); border-radius: var(--radius-card) var(--radius-card) 0 0; background: var(--color-ink-raised); box-shadow: inset 0 0 0 1px var(--rule-on-ink); font-size: var(--text-14); }
.screen-back { width: 42%; height: 350px; color: var(--text-secondary); }
.screen-left { left: 0; padding-right: calc(11% + var(--space-24)); }
.screen-right { right: 0; padding-left: calc(11% + var(--space-24)); }
.screen-front { left: 50%; z-index: 1; transform-origin: 50% 100%; width: 38%; height: 420px; translate: -50% 0; background: var(--surface-lifted); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-stone) 22%, transparent), 0 40px 80px -30px rgb(0 0 0 / .6); }
.screen-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); padding-bottom: var(--space-16); margin-bottom: var(--space-16); border-bottom: 1px solid var(--rule-on-ink); font-weight: var(--weight-strong); color: var(--color-stone); white-space: nowrap; }
.screen-bar > span + span { font-size: var(--text-12); font-weight: var(--weight-body); color: var(--text-muted); }
.screen-bar > .screen-pill { padding: 2px var(--space-8); border-radius: 999px; background: color-mix(in srgb, var(--color-water-lit) 22%, transparent); color: var(--color-water-lit); font-weight: var(--weight-strong); }
:where(.screen) p { margin: 0; }
.screens mark { padding: 0 2px; border-radius: 3px; color: var(--color-stone); background: linear-gradient(color-mix(in srgb, var(--color-water-lit) 34%, transparent) 0 0) no-repeat 0 0 / 100% 100%; transition: background-size .5s var(--ease-out); }

/* Inbox */
.mail { padding: var(--space-12) 0; border-bottom: 1px solid var(--rule-on-ink); font-size: var(--text-12); }
.mail-head { display: flex; align-items: center; gap: var(--space-8); }
.mail-from { flex: 1; font-weight: var(--weight-strong); color: var(--color-stone); }
.mail-tag { padding: 0 var(--space-8); border-radius: 999px; background: color-mix(in srgb, var(--color-water-lit) 22%, transparent); color: var(--color-water-lit); font-weight: var(--weight-strong); }
.mail-time { color: var(--text-muted); }
.mail-subject { margin-top: 2px; }
.mail-body { margin-top: var(--space-8); line-height: 1.6; }
.mail-new { position: relative; margin: 0 calc(var(--space-12) * -1); padding-inline: var(--space-12); border-radius: 8px; border-bottom-color: transparent; background: color-mix(in srgb, var(--color-stone) 5%, transparent); }

/* The request */
.intake-from { font-weight: var(--weight-strong); color: var(--color-stone); font-size: var(--text-16); }
.intake-from span { font-size: var(--text-12); font-weight: var(--weight-body); color: var(--text-muted); }
.intake-subject { margin-top: var(--space-4); color: var(--text-secondary); }
.intake-quote { display: none; }
.intake-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); margin: var(--space-24) 0; }
.intake-fields dt { font-size: var(--text-12); color: var(--text-muted); }
.intake-fields dd { width: fit-content; margin: 2px 0 0; padding: 0 var(--space-4); margin-left: calc(var(--space-4) * -1); border-radius: 4px; color: var(--color-stone); }
.field.is-on dd { animation: field-filled 1.2s var(--ease-out); }
.intake-assign { display: flex; align-items: baseline; gap: var(--space-8); padding: var(--space-12) 0; margin-bottom: var(--space-16); border-block: 1px solid var(--rule-on-ink); font-size: var(--text-12); color: var(--text-muted); }
.intake-assign strong { font-size: var(--text-14); color: var(--color-stone); }
.intake-hint { margin-left: auto; color: var(--color-water-lit); }
.intake-actions { display: flex; gap: var(--space-8); }
.intake-actions > span { padding: var(--space-8) var(--space-16); border-radius: var(--radius-control); font-weight: var(--weight-strong); transition: background-color .4s var(--ease-soft), color .4s var(--ease-soft), box-shadow .4s var(--ease-soft), scale .2s var(--ease-soft); }
.mock-approve { box-shadow: inset 0 0 0 1px var(--color-water-lit); color: var(--color-water-lit); }
.mock-edit { box-shadow: inset 0 0 0 1px var(--text-muted); color: var(--color-stone); }
.intake-note { margin-top: var(--space-16); font-size: var(--text-12); color: var(--text-muted); }

/* Schedule: five days, each block placed by its start day and length in days */
.sched { display: flex; flex-direction: column; gap: var(--space-16); font-size: var(--text-12); }
.sched-days, .sched-row { display: grid; grid-template-columns: 3.5rem 1fr; align-items: center; gap: var(--space-8); }
.sched-days { grid-template-columns: calc(3.5rem + var(--space-8)) repeat(5, 1fr); gap: 0; text-align: center; color: var(--text-muted); }
.sched-track { position: relative; height: 22px; background: repeating-linear-gradient(to right, var(--rule-on-ink) 0 1px, transparent 1px 20%); }
.sched-track i { position: absolute; top: 2px; bottom: 2px; left: calc(var(--start) * 20% + 2px); width: calc(var(--span) * 20% - 4px); border-radius: 4px; background: color-mix(in srgb, var(--color-water-lit) 45%, var(--color-ink-raised)); }
.sched-track .sched-new { background: var(--color-hazel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-hazel) 30%, transparent); }
.sched-track .sched-ghost { background: none; outline: 1px dashed var(--color-water-lit); outline-offset: -1px; }
.sched-track .sched-ghost.is-on { animation: ghost-pulse 1.2s ease-in-out infinite alternate; }

/* The rolodex: the edges of the next cards, standing behind the front one */
.screen-stack { position: absolute; top: 6px; left: 50%; width: 38%; height: 30px; translate: -50% 0; }
.screen-stack::before, .screen-stack::after { content: ""; position: absolute; inset: 0 7% auto; height: 30px; border-radius: var(--radius-card) var(--radius-card) 0 0; background: color-mix(in srgb, var(--color-stone) 3%, var(--color-ink-raised)); box-shadow: inset 0 0 0 1px var(--rule-on-ink); }
.screen-stack::after { top: 7px; inset-inline: 3.5%; background: color-mix(in srgb, var(--color-stone) 5%, var(--color-ink-raised)); }

.screens-caption { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); margin: var(--space-16) 0 var(--space-24); text-align: center; font-size: var(--text-12); color: var(--text-muted); }
.screens-controls:not([hidden]) { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); }
.screens-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.screens-tabs button, .screens-play { padding: 2px var(--space-12); border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px var(--rule-on-ink); color: var(--text-secondary); font: inherit; cursor: pointer; }
.screens-tabs button[aria-pressed="true"] { background: var(--color-stone); box-shadow: none; color: var(--color-ink); font-weight: var(--weight-strong); }
.screens-tabs button:hover, .screens-play:hover { color: var(--color-stone); box-shadow: inset 0 0 0 1px var(--text-muted); }

/* While playing: parts wait unseen until their step, and the request waits on a person */
.is-playing [data-step]:not(.is-on) { opacity: 0; translate: 0 6px; }
.is-ready .is-current [data-step] { transition: opacity .5s var(--ease-out), translate .5s var(--ease-out); }
.is-playing mark[data-step]:not(.is-on) { opacity: 1; translate: none; background-size: 0 100%; color: inherit; }
.is-playing .field[data-step]:not(.is-on) { opacity: 1; translate: none; }
.is-playing .field:not(.is-on) dd { width: 70%; color: transparent; background: linear-gradient(90deg, var(--rule-on-ink), color-mix(in srgb, var(--color-stone) 22%, var(--color-ink-raised)), var(--rule-on-ink)) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
.is-playing .sched-new:not(.is-on) { translate: 0 -14px; }
.is-playing [data-until].is-off { opacity: 0; }
.is-playing .swap[data-step]:not(.is-on), .swap.is-off, .screens-stage:not(.is-playing) [data-until] { display: none; }
.is-playing .mock-approve { background: var(--color-water-lit); color: var(--color-ink); box-shadow: none; }
.screens-stage[data-step="8"] .mock-approve { scale: .95; box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-water-lit) 35%, transparent); }
.is-paused * { animation-play-state: paused !important; }

/* The flip: the old card falls forward off the ring while the next one rises from behind it */
.is-leaving .screen-front { animation: card-out .5s cubic-bezier(.5, 0, .9, .6) both; }
.is-leaving .screen-back { animation: fade-out .4s ease-in both; }
.is-entering .screen-front { animation: card-in .7s var(--ease-out) .2s both; }
.is-entering .screen-back { animation: fade-in .6s var(--ease-out) .25s both; }

@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes ghost-pulse { from { opacity: .35; } to { opacity: 1; } }
@keyframes card-out { to { transform: rotateX(-80deg); opacity: 0; } }
@keyframes card-in { from { transform: rotateX(55deg); opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes field-filled { from { background: color-mix(in srgb, var(--color-water-lit) 34%, transparent); } }

/* Narrow screens: the request alone, quoting the email it came from */
@media (max-width: 960px) {
  .screens-stage { height: auto; }
  .screen-back { display: none; }
  .screen-front { position: relative; left: auto; width: 100%; max-width: 30rem; height: auto; margin: 20px auto 0; translate: none; }
  .screen-stack { width: min(100%, 30rem); }
  .intake-assign { flex-wrap: wrap; }
  .intake-assign > * { white-space: nowrap; }
  .intake-quote { display: block; margin-top: var(--space-12); line-height: 1.6; color: var(--text-secondary); }
}