/* Homepage hero transcript-tap animation.
 * Recreates the SpeechCut editor (tap a phrase, it is cut from the video)
 * as a looping CSS animation so the landing page stays static and lightweight.
 */
.hero-editor {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
  background: #111827;
  isolation: isolate;
}

.hero-editor__photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: 50% 42%;
  filter: saturate(0.98) contrast(1.02) brightness(0.96);
}

.hero-editor__ui {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.18), transparent 18%),
    linear-gradient(to top, rgba(0, 0, 0, 0.32), transparent 22%);
}

.hero-editor__top {
  flex-shrink: 0;
  padding: 0.55rem 0.45rem 0;
}

.hero-editor__header {
  display: block;
  width: 100%;
  height: auto;
}

.hero-editor__transcript {
  flex: 1;
  display: block;
  padding: 0.7rem 0.6rem 0.2rem;
  overflow: hidden;
  font-size: 1.56rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.8;
}

.hero-pill {
  /* inline + clone: wrapped segments keep a chip on every line, so the
   * cut animation (fill, strike, ripple) paints across the whole phrase. */
  display: inline;
  position: relative;
  padding: 0.06em 0.28em;
  border-radius: 0.28em;
  background: var(--pill-keep-bg);
  color: var(--pill-keep-fg);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
  --pill-keep-bg: rgba(21, 121, 77, 0.76);
  --pill-keep-fg: #fff;
  --pill-cut-bg: rgba(24, 27, 31, 0.78);
  --pill-cut-fg: #c5cad3;
  --pill-press-bg: rgba(46, 168, 112, 0.92);
}

.hero-pill--cut {
  text-decoration: line-through;
  text-decoration-thickness: 0.09em;
  text-decoration-color: transparent;
}

.hero-pill--cut::after {
  content: "";
  position: absolute;
  left: 0.85em;
  top: 50%;
  width: 1.35em;
  height: 1.35em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3);
  pointer-events: none;
}

.hero-editor__playback {
  display: grid;
  grid-template-columns: 2.35rem 1fr;
  grid-template-rows: auto auto;
  gap: 0.28rem 0.55rem;
  align-items: center;
  padding: 0 0.7rem 0.7rem;
}

.hero-editor__time {
  grid-column: 1 / -1;
  justify-self: center;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.hero-editor__play {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  background: rgba(95, 211, 154, 0.96);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  display: grid;
  place-items: center;
}

.hero-editor__play span {
  display: block;
  margin-left: 0.12rem;
  border-left: 0.55rem solid #05080b;
  border-top: 0.38rem solid transparent;
  border-bottom: 0.38rem solid transparent;
}

.hero-editor__scrubber {
  position: relative;
  height: 0.85rem;
  border-radius: 999px;
  background: rgba(68, 148, 111, 0.28);
}

.hero-editor__scrubber-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 62%;
  border-radius: inherit;
  background: rgba(95, 211, 154, 0.88);
}

.hero-editor__scrubber-head {
  position: absolute;
  left: 62%;
  top: 50%;
  width: 3px;
  height: 1.45rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-pill--cut-1 { animation: hero-cut-1 8s ease-in-out infinite; }
  .hero-pill--cut-2 { animation: hero-cut-2 8s ease-in-out infinite; }
  .hero-pill--cut-3 { animation: hero-cut-3 8s ease-in-out infinite; }
  .hero-pill--cut-4 { animation: hero-cut-4 8s ease-in-out infinite; }
  .hero-pill--cut-5 { animation: hero-cut-5 8s ease-in-out infinite; }
  .hero-pill--cut-6 { animation: hero-cut-6 8s ease-in-out infinite; }
  .hero-pill--cut-1::after { animation: hero-ripple-1 8s ease-out infinite; }
  .hero-pill--cut-2::after { animation: hero-ripple-2 8s ease-out infinite; }
  .hero-pill--cut-3::after { animation: hero-ripple-3 8s ease-out infinite; }
  .hero-pill--cut-4::after { animation: hero-ripple-4 8s ease-out infinite; }
  .hero-pill--cut-5::after { animation: hero-ripple-5 8s ease-out infinite; }
  .hero-pill--cut-6::after { animation: hero-ripple-6 8s ease-out infinite; }
}

/* Default (and reduced-motion) end-state: mistake lines already cut. */
.hero-pill--cut {
  background: var(--pill-cut-bg);
  color: var(--pill-cut-fg);
  text-decoration-color: var(--pill-cut-fg);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-pill--cut {
    background: var(--pill-keep-bg);
    color: var(--pill-keep-fg);
    text-decoration-color: transparent;
  }
}

/* ~4s of taps, ~3s hold on the edit, fade back, then tap again immediately. */
@keyframes hero-cut-1 {
  0%, 2% { background: var(--pill-keep-bg); color: var(--pill-keep-fg); text-decoration-color: transparent; }
  4% { background: var(--pill-press-bg); }
  7%, 85% { background: var(--pill-cut-bg); color: var(--pill-cut-fg); text-decoration-color: var(--pill-cut-fg); }
  100% { background: var(--pill-keep-bg); color: var(--pill-keep-fg); text-decoration-color: transparent; }
}
@keyframes hero-cut-2 {
  0%, 10% { background: var(--pill-keep-bg); color: var(--pill-keep-fg); text-decoration-color: transparent; }
  12% { background: var(--pill-press-bg); }
  15%, 85% { background: var(--pill-cut-bg); color: var(--pill-cut-fg); text-decoration-color: var(--pill-cut-fg); }
  100% { background: var(--pill-keep-bg); color: var(--pill-keep-fg); text-decoration-color: transparent; }
}
@keyframes hero-cut-3 {
  0%, 18% { background: var(--pill-keep-bg); color: var(--pill-keep-fg); text-decoration-color: transparent; }
  20% { background: var(--pill-press-bg); }
  23%, 85% { background: var(--pill-cut-bg); color: var(--pill-cut-fg); text-decoration-color: var(--pill-cut-fg); }
  100% { background: var(--pill-keep-bg); color: var(--pill-keep-fg); text-decoration-color: transparent; }
}
@keyframes hero-cut-4 {
  0%, 26% { background: var(--pill-keep-bg); color: var(--pill-keep-fg); text-decoration-color: transparent; }
  28% { background: var(--pill-press-bg); }
  31%, 85% { background: var(--pill-cut-bg); color: var(--pill-cut-fg); text-decoration-color: var(--pill-cut-fg); }
  100% { background: var(--pill-keep-bg); color: var(--pill-keep-fg); text-decoration-color: transparent; }
}
@keyframes hero-cut-5 {
  0%, 34% { background: var(--pill-keep-bg); color: var(--pill-keep-fg); text-decoration-color: transparent; }
  36% { background: var(--pill-press-bg); }
  39%, 85% { background: var(--pill-cut-bg); color: var(--pill-cut-fg); text-decoration-color: var(--pill-cut-fg); }
  100% { background: var(--pill-keep-bg); color: var(--pill-keep-fg); text-decoration-color: transparent; }
}
@keyframes hero-cut-6 {
  0%, 42% { background: var(--pill-keep-bg); color: var(--pill-keep-fg); text-decoration-color: transparent; }
  44% { background: var(--pill-press-bg); }
  47%, 85% { background: var(--pill-cut-bg); color: var(--pill-cut-fg); text-decoration-color: var(--pill-cut-fg); }
  100% { background: var(--pill-keep-bg); color: var(--pill-keep-fg); text-decoration-color: transparent; }
}

@keyframes hero-ripple-1 {
  0%, 3% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  4% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.45); }
  11% { opacity: 0; transform: translate(-50%, -50%) scale(1.85); }
  11.01%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
}
@keyframes hero-ripple-2 {
  0%, 11% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  12% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.45); }
  19% { opacity: 0; transform: translate(-50%, -50%) scale(1.85); }
  19.01%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
}
@keyframes hero-ripple-3 {
  0%, 19% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  20% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.45); }
  27% { opacity: 0; transform: translate(-50%, -50%) scale(1.85); }
  27.01%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
}
@keyframes hero-ripple-4 {
  0%, 27% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  28% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.45); }
  35% { opacity: 0; transform: translate(-50%, -50%) scale(1.85); }
  35.01%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
}
@keyframes hero-ripple-5 {
  0%, 35% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  36% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.45); }
  43% { opacity: 0; transform: translate(-50%, -50%) scale(1.85); }
  43.01%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
}
@keyframes hero-ripple-6 {
  0%, 43% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  44% { opacity: 0.95; transform: translate(-50%, -50%) scale(0.45); }
  51% { opacity: 0; transform: translate(-50%, -50%) scale(1.85); }
  51.01%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-editor .hero-pill--cut,
  .hero-editor .hero-pill--cut::after {
    animation: none !important;
  }
}