.hero-upload {
  aspect-ratio: 3 / 2;
  container-type: inline-size;
}

.hero-upload__scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-upload__stage {
  position: absolute;
  z-index: 1;
  top: 0;
  inset-inline: 0;
  text-align: center;
  font-size: clamp(14px, 4.6cqw, 22px);
  line-height: 1.2;
  letter-spacing: -.025em;
}

.hero-upload__stage > span { grid-area: 1 / 1; }
.hero-upload__phase { opacity: 0; }
.hero-upload__brand { filter: brightness(0) invert(1); }

/* The unanimated scene is the completed delivery, including the open vault and files. */
.hero-upload__world,
.hero-upload__destination-key { transform: translateX(-960px); }
.hero-upload__computer { transform: translate(9.6px, 9px) scale(.96); }
.hero-upload__safe-scale { transform: translate(0, .92px) scale(.72); transform-origin: 240px 154px; }
.hero-upload__door { transform: scaleX(-.65) skewY(-8deg); transform-origin: 0 55px; }
.hero-upload__incoming,
.hero-upload__hardware,
.hero-upload__seal,
.hero-upload__network,
.hero-upload__trails,
.hero-upload__sheen,
.hero-upload__key-edge,
.hero-upload__key { opacity: 0; }
.hero-upload__outgoing { transform: translate(126px, -4px) scale(1); }
.hero-upload__key,
.hero-upload__key-turn { transform-origin: 0 0; }
.hero-upload__receipt { transform-origin: 359px 177px; }

@media (prefers-reduced-motion: no-preference) {
  .hero-upload[data-animated] [data-loop] {
    animation-duration: 11s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
    animation-play-state: paused;
  }

  .hero-upload[data-animated][data-running] [data-loop] { animation-play-state: running; }
  .hero-upload[data-animated] .hero-upload__static { opacity: 0; }
  .hero-upload[data-animated] .hero-upload__file-1 { animation-delay: .1s; }
  .hero-upload[data-animated] .hero-upload__file-2 { animation-delay: .2s; }
  .hero-upload[data-animated] .hero-upload__phase { animation-timing-function: cubic-bezier(.22, 1, .36, 1); }

  .hero-upload[data-animated] [data-loop="visibility"] { animation-name: hero-safe-visibility; }
  .hero-upload[data-animated] [data-loop="network"] { animation-name: hero-safe-network; }
  .hero-upload[data-animated] [data-loop="trails"] { animation-name: hero-safe-trails; }
  .hero-upload[data-animated] [data-loop="sheen"] { animation-name: hero-safe-sheen; }
  .hero-upload[data-animated] [data-loop="world"] { animation-name: hero-safe-world; }
  .hero-upload[data-animated] [data-loop="computer"] { animation-name: hero-safe-computer; }
  .hero-upload[data-animated] [data-loop="safe-scale"] { animation-name: hero-safe-scale; }
  .hero-upload[data-animated] [data-loop="door"] { animation-name: hero-safe-door; }
  .hero-upload[data-animated] [data-loop="hardware"] { animation-name: hero-safe-hardware; }
  .hero-upload[data-animated] [data-loop="seal"] { animation-name: hero-safe-seal; }
  .hero-upload[data-animated] [data-loop="incoming"] { animation-name: hero-safe-incoming; }
  .hero-upload[data-animated] [data-loop="outgoing"] { animation-name: hero-safe-outgoing; }
  .hero-upload[data-animated] [data-loop="key"] { animation-name: hero-safe-key; }
  .hero-upload[data-animated] [data-loop="key-insert"] { animation-name: hero-safe-key-insert; }
  .hero-upload[data-animated] [data-loop="key-turn"] { animation-name: hero-safe-key-turn; }
  .hero-upload[data-animated] [data-loop="key-edge"] { animation-name: hero-safe-key-edge; }
  .hero-upload[data-animated] [data-loop="wheel"] { animation-name: hero-safe-wheel; }
  .hero-upload[data-animated] [data-loop="receipt"] { animation-name: hero-safe-receipt; }
  .hero-upload[data-animated] [data-loop="scene-client"] { animation-name: hero-safe-scene-client; }
  .hero-upload[data-animated] [data-loop="scene-transit"] { animation-name: hero-safe-scene-transit; }
  .hero-upload[data-animated] [data-loop="scene-end-to-end"] { animation-name: hero-safe-scene-end-to-end; }
  .hero-upload[data-animated] [data-loop="scene-recipient"] { animation-name: hero-safe-scene-recipient; }

  .hero-upload[data-animated] [data-loop="fiber-pulses"] {
    animation-name: hero-safe-fiber-pulses;
    animation-duration: .24s;
    animation-timing-function: linear;
  }
  .hero-upload[data-animated] [data-loop="trails-near"],
  .hero-upload[data-animated] [data-loop="trails-far"] {
    animation-name: hero-safe-trail-drift;
    animation-duration: .75s;
    animation-timing-function: linear;
  }

  .hero-upload[data-animated] [data-loop="trails-far"] {
    animation-duration: 1.1s;
  }
}

/* Eight seconds for the handoff, then three seconds with no title.
   The completed delivery stays still throughout the pause. */
@keyframes hero-safe-visibility {
  0% { opacity: 0; }
  1.364%, 71.364% { opacity: 1; }
  72.727%, 100% { opacity: 0; }
}

/* The cloud keeps drifting between departure and arrival, without a midflight stop. */
@keyframes hero-safe-world {
  0%, 17.273% { transform: translateX(0); animation-timing-function: cubic-bezier(.38, 0, .58, .82); }
  28.636% { transform: translateX(-430px); animation-timing-function: linear; }
  39.091% { transform: translateX(-565px); animation-timing-function: cubic-bezier(.42, .16, .62, 1); }
  50.909%, 100% { transform: translateX(-960px); }
}

@keyframes hero-safe-computer {
  0%, 17.273% { transform: translate(9.6px, 9px) scale(.96); }
  22.273%, 40.909% { transform: translate(115.2px, 60px) scale(.52); }
  50.909%, 100% { transform: translate(9.6px, 9px) scale(.96); }
}

@keyframes hero-safe-scale {
  0%, 17.273% { transform: translate(0, 0.92px) scale(.72); }
  24.091% { transform: translate(0, 9.16px) scale(.72); }
  30.909% { transform: translate(0, 12.16px) scale(.72); }
  38.636% { transform: translate(0, 8.16px) scale(.72); }
  50.909%, 100% { transform: translate(0, 0.92px) scale(.72); }
}

@keyframes hero-safe-network {
  0%, 16.818% { opacity: 0; }
  20.909%, 45.909% { opacity: 1; }
  50.909%, 100% { opacity: 0; }
}

@keyframes hero-safe-trails {
  0%, 21.364% { opacity: 0; }
  24.091%, 43.182% { opacity: 1; }
  46.364%, 100% { opacity: 0; }
}

@keyframes hero-safe-fiber-pulses {
  from { transform: translateX(0); }
  to { transform: translateX(180px); }
}

@keyframes hero-safe-trail-drift {
  0% { opacity: 0; transform: translateX(36px); }
  20% { opacity: .8; }
  75% { opacity: .5; }
  100% { opacity: 0; transform: translateX(-54px); }
}

@keyframes hero-safe-sheen {
  0%, 14.364% { opacity: 0; transform: translateX(0); }
  14.727% { opacity: 1; transform: translateX(0); }
  19.091% { opacity: 0; transform: translateX(190px); }
  34.545% { opacity: 0; transform: translateX(0); }
  35% { opacity: 1; transform: translateX(0); }
  39.545%, 100% { opacity: 0; transform: translateX(190px); }
}

@keyframes hero-safe-door {
  0%, 9.273% { transform: scaleX(-.65) skewY(-8deg); }
  12%, 59.545% { transform: scaleX(1) skewY(0); }
  61.818%, 100% { transform: scaleX(-.65) skewY(-8deg); }
}

@keyframes hero-safe-hardware {
  0%, 10.182% { opacity: 0; }
  12%, 59.545% { opacity: 1; }
  61.818%, 100% { opacity: 0; }
}

@keyframes hero-safe-seal {
  0%, 14.364% { opacity: 0; }
  15.636%, 55.455% { opacity: 1; }
  58.182%, 100% { opacity: 0; }
}

@keyframes hero-safe-incoming {
  0%, 1.636% { opacity: 1; transform: translate(126px, -4px) scale(1); }
  7.273%, 13.636% { opacity: 1; transform: translate(0, 5px) scale(.65); }
  14.727%, 100% { opacity: 0; transform: translate(0, 5px) scale(.65); }
}

/* The files swap into the identical sender position when the next cycle begins. */
@keyframes hero-safe-outgoing {
  0%, 61.091% { opacity: 0; transform: translate(0, 5px) scale(.65); }
  62% { opacity: 1; transform: translate(0, 5px) scale(.65); }
  66.182%, 100% { opacity: 1; transform: translate(126px, -4px) scale(1); }
}

/* Align, insert, turn around the fixed shaft, then disappear before the door opens. */
@keyframes hero-safe-key {
  0%, 38.182% { opacity: 0; transform: translate(70px, -48px) scale(1.25); }
  40%, 50.909% { opacity: 1; transform: translate(70px, -48px) scale(1.25); }
  53.636%, 58.182% { opacity: 1; transform: translate(0, 0) scale(1); }
  59.545%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
}

@keyframes hero-safe-key-insert {
  0%, 53.636% { transform: translateX(14px); }
  55.455%, 100% { transform: translateX(-8px); }
}

@keyframes hero-safe-key-turn {
  0%, 55.455% { transform: rotateX(0); }
  57.818%, 100% { transform: rotateX(90deg); }
}

/* Preserve the bow's thickness when seen edge-on after the quarter turn. */
@keyframes hero-safe-key-edge {
  0%, 55.455% { opacity: 0; }
  57.818%, 100% { opacity: 1; }
}

@keyframes hero-safe-wheel {
  0%, 12% { transform: rotate(0); }
  13.455% { transform: rotate(98deg); }
  14.364%, 55.455% { transform: rotate(90deg); }
  58.182%, 100% { transform: rotate(0); }
}

@keyframes hero-safe-receipt {
  0%, 68% { opacity: 0; transform: scale(.7); }
  69.364% { opacity: 1; transform: scale(1.1); }
  70.455%, 100% { opacity: 1; transform: scale(1); }
}

/* Each title clears before the next appears; layout dimensions never change. */
@keyframes hero-safe-scene-client {
  0% { opacity: 0; transform: translateY(6px); }
  1.364%, 15.818% { opacity: 1; transform: translateY(0); }
  17.273%, 100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes hero-safe-scene-transit {
  0%, 17.273% { opacity: 0; transform: translateY(6px); }
  18.636%, 32.273% { opacity: 1; transform: translateY(0); }
  33.636%, 100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes hero-safe-scene-end-to-end {
  0%, 33.636% { opacity: 0; transform: translateY(6px); }
  35%, 50% { opacity: 1; transform: translateY(0); }
  51.364%, 100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes hero-safe-scene-recipient {
  0%, 51.364% { opacity: 0; transform: translateY(6px); }
  52.727%, 71.364% { opacity: 1; transform: translateY(0); }
  72.727%, 100% { opacity: 0; transform: translateY(-4px); }
}