/* Experience layer: tactile motion on top of the layout. Everything here is optional polish. */
.url-form {
  position: relative;
  filter: drop-shadow(0 18px 28px rgba(20, 20, 16, 0.08));
}
.url-form:after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid color-mix(in srgb, var(--tally) 22%, transparent);
  border-radius: 19px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.98);
  transition:
    opacity 0.3s,
    transform 0.3s;
}
.url-form:focus-within:after {
  opacity: 1;
  transform: scale(1);
}
.url-form .btn-primary {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    background 0.2s;
}
.url-form .btn-primary:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.3) 50%, transparent 75%);
  transform: translateX(-130%);
  transition: transform 0.65s var(--ease);
}
.url-form .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(227, 65, 43, 0.22);
}
.url-form .btn-primary:hover:before {
  transform: translateX(130%);
}

/* monitor: flat, lifts on hover */
.monitor {
  transition:
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
.monitor:hover {
  transform: translateY(-4px);
}
.monitor .screen:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.1) 50%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
  animation: monitorSweep 7s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.mini-scenes > div {
  transition:
    flex 0.45s var(--ease),
    opacity 0.25s;
}
@keyframes monitorSweep {
  0%,
  44% {
    transform: translateX(-120%);
  }
  64%,
  100% {
    transform: translateX(120%);
  }
}

/* reel cards */
.reel figure {
  transition: transform 0.4s var(--ease);
}
.reel .frame {
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow: 0 10px 20px -10px rgba(20, 20, 16, 0.2);
  transition:
    border-color 0.35s,
    box-shadow 0.35s;
}
.reel .poster .poster-tile {
  transition:
    transform 0.35s var(--ease),
    border-radius 0.35s;
}
@media (hover: hover) {
  .reel figure:hover {
    transform: translateY(-4px);
  }
  .reel figure:hover .frame {
    border-color: var(--tally);
    box-shadow: 0 18px 32px -14px rgba(20, 20, 16, 0.3);
  }
  .reel figure:hover .poster-tile {
    transform: rotate(12deg) scale(1.12);
    border-radius: 50%;
  }
}

/* sound cards */
.sound-grid article {
  position: relative;
  padding: 22px 20px 20px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  transition:
    transform 0.35s var(--ease),
    border-color 0.35s,
    background 0.35s;
}
.sound-grid article:after {
  content: "";
  position: absolute;
  right: 18px;
  top: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tally);
  opacity: 0.35;
  transition:
    transform 0.35s,
    opacity 0.35s;
}
.sound-grid .sig {
  transition:
    transform 0.45s var(--ease),
    color 0.35s;
}
@media (hover: hover) {
  .sound-grid article:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--tally) 45%, transparent);
    background: var(--surface);
  }
  .sound-grid article:hover:after {
    opacity: 1;
    transform: scale(1.6);
  }
  .sound-grid article:hover .sig {
    transform: translateX(8px);
  }
  .hero .try .chip:hover {
    transform: translateY(-2px);
    border-color: var(--tally);
    background: var(--surface);
  }
}
.hero .try .chip {
  transition:
    transform 0.25s var(--ease),
    border-color 0.25s,
    background 0.25s;
}
@media (max-width: 760px) {
  .url-form .btn-primary {
    font-size: 0.95rem;
  }
  .sound-grid article {
    padding: 14px;
  }
}

/* headline: only the word "launch" changes treatment; the sentence stays still */
.launch-word {
  position: relative;
  display: inline-block;
  perspective: 600px;
  vertical-align: baseline;
}
.launch-word .lw {
  display: inline-block;
  transform-origin: 50% 60%;
  will-change: transform, clip-path, filter;
}
.launch-word.run[data-fx="clip"] .lw {
  animation: lwClip 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.launch-word.run[data-fx="flip"] .lw {
  animation: lwFlip 0.95s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
.launch-word.run[data-fx="track"] .lw {
  animation: lwTrack 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.launch-word.run[data-fx="smear"] .lw {
  animation: lwSmear 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes lwClip {
  0% {
    clip-path: inset(100% 0 0 0);
    transform: translateY(0.35em);
  }
  100% {
    clip-path: inset(0 0 0 0);
    transform: none;
  }
}
@keyframes lwFlip {
  0% {
    transform: rotateX(-88deg);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes lwTrack {
  0% {
    letter-spacing: 0.45em;
    opacity: 0;
    filter: blur(3px);
  }
  100% {
    letter-spacing: normal;
    opacity: 1;
    filter: none;
  }
}
@keyframes lwSmear {
  0% {
    transform: translateX(-0.6em) skewX(-18deg);
    filter: blur(6px);
    opacity: 0;
  }
  100% {
    transform: none;
    filter: none;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .launch-word .lw {
    animation: none !important;
  }
  .monitor .screen:after {
    animation: none;
  }
  .reel figure,
  .monitor,
  .sound-grid article,
  .bar {
    transition: none;
  }
}

/* reel posters show each film's own first shot (see app.js posterShot) */
.reel .poster .poster-sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
  max-width: 88%;
}
.reel .poster[data-kind="bold-word"],
.reel .poster[data-kind="title"] {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.reel .poster[data-kind="bold-word"] .poster-tag,
.reel .poster[data-kind="title"] .poster-tag,
.reel .poster[data-kind="stat-first"] .poster-tag {
  position: absolute;
  left: clamp(16px, 4%, 32px);
  top: clamp(14px, 3.5%, 28px);
}
.reel .poster[data-kind="bold-word"] {
  container-type: inline-size;
}
.reel .poster[data-kind="bold-word"] .poster-head {
  /* --len is the word's length, so long words shrink to fit the card. */
  font-size: clamp(1.4rem, calc(112cqi / var(--len, 8)), 4.2rem);
  max-width: 100%;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  border-bottom: 0.12em solid var(--pc);
  padding-bottom: 0.06em;
}
.reel .poster[data-kind="title"] .poster-head {
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem);
}
.reel .poster[data-kind="stat-first"] .poster-head {
  font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.8rem);
  color: var(--pfg);
  border-left: 0.1em solid var(--pc);
  padding-left: 0.18em;
}
.reel .poster[data-kind="ui-first"] {
  justify-content: center;
}
.reel .poster[data-kind="ui-first"] .poster-tag {
  position: absolute;
  left: clamp(16px, 4%, 32px);
  top: clamp(14px, 3.5%, 28px);
}
.reel .poster[data-kind="ui-first"] .poster-head {
  font-size: clamp(1rem, 0.8rem + 0.8vw, 1.35rem);
}
.reel .poster .poster-ui {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(88%, 420px);
  padding: 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--pfg) 8%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pfg) 14%, transparent);
}
.reel .poster .poster-ui i {
  font-style: normal;
  font-size: var(--text-xs);
  padding: 6px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--pfg) 7%, transparent);
  border-left: 3px solid var(--pc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}