/* upbeep.app home page: the drawing inside the story video (scripts/site-film.mjs).
   One office, three computers, one thing happening at a time. Each part carries
   the scenes it belongs to (v1 … v6); site/assets/home.js sets data-scene on the
   film. What is not part of a scene is hidden or dimmed, and every motion is a
   short entrance that ends on the scene's finished picture, so Reduce motion
   (which stops every animation) still shows each scene complete. */

.film-art text {
  font-family: inherit;
}

.film-art .f-ink {
  fill: var(--h-ink);
}

.film-art .f-ink-2 {
  fill: var(--h-ink-2);
}

.film-art .f-ink-3 {
  fill: var(--h-ink-3);
}

/* ------------------------------------------------------------- who shows when */

.film-art .v1,
.film-art .v2,
.film-art .v3,
.film-art .v4,
.film-art .v5,
.film-art .v6 {
  opacity: 0;
  transition: opacity 0.4s ease;
}

[data-scene="1"] .film-art .v1,
[data-scene="2"] .film-art .v2,
[data-scene="3"] .film-art .v3,
[data-scene="4"] .film-art .v4,
[data-scene="5"] .film-art .v5,
[data-scene="6"] .film-art .v6 {
  opacity: 1;
}

/* Slips live inside a monitor, which is already shown: they switch at once. */
.film-art .slip.v3,
.film-art .slip.v4,
.film-art .slip.v5 {
  transition: none;
}

/* The problem: the computers are not the point yet. */
[data-scene="1"] .film-art .mon {
  opacity: 0.4;
}

/* One key: only Room 3 matters. */
[data-scene="2"] .film-art .mon-r1,
[data-scene="2"] .film-art .mon-fd {
  opacity: 0.35;
}

.film-art .glow {
  stroke: transparent;
}

[data-scene="2"] .film-art .mon-r3 .glow {
  stroke: rgb(14 143 108 / 0.45);
}

/* Emergency: only the pages turn red and flash, as in the app (PAGE-06); the computers do not glow. */

/* ----------------------------------------------------------------- motions */

/* A CSS transform replaces an SVG element's own transform attribute, so an
   animated part never carries one: it sits inside a group that does. */

[data-scene="1"] .film-art .person {
  animation: fa-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

[data-scene="1"] .film-art .shout {
  transform-origin: 30px 110px;
  animation: fa-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.5s both;
}

[data-scene="1"] .film-art .huh {
  animation: fa-in 0.5s ease 1.6s both;
}

[data-scene="2"] .film-art .key .cap {
  animation: fa-press 0.5s ease 0.9s both;
}

[data-scene="2"] .film-art .sent {
  animation: fa-in 0.4s ease 1.4s both;
}

[data-scene="3"] .film-art .pop3,
[data-scene="5"] .film-art .pop5 {
  transform-box: fill-box;
  transform-origin: center;
  animation: fa-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.5s both;
}

[data-scene="5"] .film-art .mon-r3 .pop5 {
  animation-delay: 0.35s;
}

[data-scene="3"] .film-art .snd,
[data-scene="5"] .film-art .snd {
  animation: fa-in 0.3s ease 0.6s both;
}

[data-scene="3"] .film-art .snd .wave,
[data-scene="5"] .film-art .snd .wave {
  animation: fa-wave 0.8s ease-in-out 0.6s infinite alternate;
}

[data-scene="5"] .film-art .sl-em {
  animation: fa-red 0.9s ease-in-out 0.9s infinite alternate;
}

[data-scene="5"] .film-art .ebtn .cap {
  animation: fa-press 0.45s ease 0.2s both;
}

/* Cleared: the cursor comes to Room 1's page and clicks; then every page says who. */
[data-scene="4"] .film-art .cursor {
  animation: fa-cursor 1.2s cubic-bezier(0.3, 0.7, 0.2, 1) both;
}

/* The click ring shows only while it is being clicked. */
.film-art .ring {
  opacity: 0;
}

[data-scene="4"] .film-art .ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: fa-ring 0.6s ease-out 1.2s forwards;
}

[data-scene="4"] .film-art .out4 {
  opacity: 0;
  animation: fa-out 0.25s ease 1.35s both;
}

[data-scene="4"] .film-art .in4 {
  animation: fa-in 0.3s ease 1.4s both;
}

[data-scene="6"] .film-art .devs {
  animation: fa-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Phones and watches: the page arrives on both, then the watch clears it. */
[data-scene="6"] .film-art .pop6 {
  transform-box: fill-box;
  transform-origin: center;
  animation: fa-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.7s both;
}

[data-scene="6"] .film-art .snd6 {
  animation: fa-in 0.3s ease 0.8s both;
}

[data-scene="6"] .film-art .snd6 .wave {
  animation: fa-wave 0.8s ease-in-out 0.8s infinite alternate;
}

.film-art .ring6 {
  opacity: 0;
}

[data-scene="6"] .film-art .ring6 {
  transform-box: fill-box;
  transform-origin: center;
  animation: fa-ring 0.6s ease-out 4s forwards;
}

[data-scene="6"] .film-art .out6b {
  opacity: 0;
  animation: fa-out 0.25s ease 4.3s both;
}

[data-scene="6"] .film-art .in6 {
  animation: fa-in 0.3s ease 4.4s both;
}

/* Once cleared, the sound stops. */
[data-scene="6"] .film-art .snd6 {
  animation: fa-in 0.3s ease 0.8s both, fa-out 0.3s ease 4.3s forwards;
}

@keyframes fa-in {
  from {
    opacity: 0;
  }
}

@keyframes fa-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fa-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

@keyframes fa-pop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
}

@keyframes fa-press {
  0%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(10px);
  }
}

@keyframes fa-wave {
  from {
    opacity: 0.35;
  }
}

@keyframes fa-red {
  to {
    fill: #a8232b;
  }
}

@keyframes fa-cursor {
  from {
    transform: translate(180px, 230px);
  }
}

@keyframes fa-ring {
  from {
    opacity: 1;
    transform: scale(0.5);
  }

  to {
    opacity: 0;
    transform: scale(1.8);
  }
}

/* On a phone the chips above the drawing stay on one line and out of its way. */
@media (max-width: 600px) {
  .film-top .chip {
    white-space: nowrap;
    font-size: 0.75rem;
  }

  .film-top .chip.timer .timer-l {
    display: none;
  }
}