/* Hero: a window acts out Savanna in front of the setting sun.
   Record a region → it zooms where you click → stop → the editor writes and voices the narration. */

.hero__copy--stage { min-height: 0; padding-top: 4px; z-index: 5; }
.hero__headline { font-size: clamp(1.9rem, 1.1rem + 2.2vw, 3rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 900; }
.hero__headline em { font-style: normal; color: var(--gold); }
.hero__copy--stage .hero__lead { margin-top: 14px; font-weight: 600; opacity: 0.86; }

/* the window: opaque (no backdrop blur, which made the sun behind it flicker), lifted by scroll */
.stage {
  --ui: 'Nunito', system-ui, sans-serif;
  position: relative;
  z-index: 4;
  width: min(720px, 66vw, (100svh - 330px) * 1.6);
  margin: clamp(18px, 3svh, 32px) auto calc(min(70vw, 1080px) * -0.17 + 12px);
  border-radius: 16px;
  background: #241326;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 40px 90px -20px rgba(0, 0, 0, 0.75),
    0 0 120px -10px rgba(255, 138, 61, 0.35);
  overflow: hidden;
  text-align: left;
  transform: translate3d(0, calc(var(--lift, 0px) * -1), 0) scale(var(--shrink, 1));
  transform-origin: 50% 0;
  isolation: isolate;
}

.stage__chrome { position: relative; height: 34px; display: flex; align-items: center; justify-content: center; }
.stage__lights { position: absolute; left: 14px; display: flex; gap: 7px; }
.stage__lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.stage__lights i:nth-child(2) { background: #febc2e; }
.stage__lights i:nth-child(3) { background: #28c840; }
.stage__title { display: grid; font-size: 12px; font-weight: 700; color: rgba(236, 235, 232, 0.6); }
.stage__title > span { grid-area: 1 / 1; text-align: center; transition: opacity 0.4s; }
.stage__title-edit { opacity: 0; }
.stage.is-editor .stage__title-rec { opacity: 0; }
.stage.is-editor .stage__title-edit { opacity: 1; }

.stage__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #1a0e1c; container-type: inline-size; font-family: var(--ui); }

/* ---------- the footage ---------- */
.stage__film {
  position: absolute; inset: 0; overflow: hidden;
  transform-origin: 0 0;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.25, 1), border-radius 0.9s;
}
.stage.is-editor .stage__film { transform: translate(2.2%, 4%) scale(0.64); border-radius: 14px; }
.stage__zoom { position: absolute; inset: 0; transform-origin: var(--zx, 50%) var(--zy, 50%); transition: transform 1.1s cubic-bezier(0.65, 0, 0.25, 1); }
.stage.is-zoom .stage__zoom { transform: scale(1.8); }
.stage__video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* region selection: everything outside it is dimmed */
.stage__select {
  position: absolute;
  left: var(--sx, 14%); top: var(--sy, 14%); width: var(--sw, 0%); height: var(--sh, 0%);
  border: 1.5px dashed rgba(255, 255, 255, 0.95);
  border-radius: 3px;
  box-shadow: 0 0 0 200vmax rgba(10, 4, 12, 0.58);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.stage__select.is-moving { transition: opacity 0.3s ease, left var(--t) cubic-bezier(0.45, 0, 0.2, 1), top var(--t) cubic-bezier(0.45, 0, 0.2, 1), width var(--t) cubic-bezier(0.45, 0, 0.2, 1), height var(--t) cubic-bezier(0.45, 0, 0.2, 1), box-shadow var(--t) ease, border-color var(--t) ease; }
.stage.is-selecting .stage__select { opacity: 1; }
.stage.is-rec .stage__select { border-color: transparent; box-shadow: 0 0 0 200vmax rgba(10, 4, 12, 0); }
.stage__dims {
  position: absolute; left: 0; top: -28px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--night); background: var(--gold); white-space: nowrap;
}
.stage.is-rec .stage__dims { opacity: 0; transition: opacity 0.2s; }

/* ---------- pointer and click ---------- */
.stage__cursor {
  position: absolute; left: 0; top: 0; z-index: 9; width: 20px; height: 20px;
  fill: #fff; stroke: #000; stroke-width: 1.2;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5));
  transform: translate(var(--cx, 50cqw), var(--cy, 25cqw)) scale(var(--cs, 1));
  transform-origin: 4px 2px;
  transition: transform var(--ct, 0.6s) cubic-bezier(0.45, 0, 0.2, 1), opacity 0.3s;
}
.stage.is-end .stage__cursor { opacity: 0; }
.stage__ripple {
  position: absolute; left: var(--zx, 50%); top: var(--zy, 50%);
  width: 70px; height: 70px; margin: -35px 0 0 -35px;
  border-radius: 50%; border: 3px solid var(--gold);
  opacity: 0; transform: scale(0.2);
}
.stage__ripple.is-on { animation: stage-ripple 0.8s var(--ease-out) forwards; }
@keyframes stage-ripple { 0% { opacity: 1; transform: scale(0.2); } 100% { opacity: 0; transform: scale(1.6); } }

/* ---------- recording controls ---------- */
.stage__rec {
  position: absolute; top: 12px; left: 50%; z-index: 5;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(28, 11, 29, 0.78);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
  color: #fff; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
  opacity: 0; transform: translate(-50%, -12px) scale(0.92);
  transition: opacity 0.35s ease, transform 0.5s var(--ease-out);
}
.stage__rec svg { width: 14px; height: 14px; fill: currentColor; opacity: 0.85; }
.stage__rec .stage__stop { fill: #ff453a; opacity: 1; }
.stage__dot { width: 9px; height: 9px; border-radius: 50%; background: #ff453a; box-shadow: 0 0 10px #ff453a; animation: stage-blink 1.2s ease-in-out infinite; }
.stage__sep { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.25); }
@keyframes stage-blink { 50% { opacity: 0.35; } }
.stage.is-rec:not(.is-editor) .stage__rec { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---------- editor: inspector ---------- */
.stage__inspector {
  position: absolute; z-index: 3; top: 0; right: 0; width: 31%; height: 73%;
  padding: 10px 10px 0 4px;
  display: flex; flex-direction: column; gap: 7px;
  color: var(--paper);
  opacity: 0; transform: translateX(24px);
  transition: opacity 0.5s ease 0.25s, transform 0.7s var(--ease-out) 0.25s;
}
.stage.is-editor .stage__inspector { opacity: 1; transform: none; }
.stage__tabs { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); font-size: clamp(8px, 1.25cqw, 10px); font-weight: 800; }
.stage__tabs span { flex: 1; text-align: center; padding: 3px 0; border-radius: 6px; opacity: 0.6; white-space: nowrap; }
.stage__tabs .is-on { background: rgba(255, 255, 255, 0.16); opacity: 1; }
.stage__head { display: flex; align-items: center; gap: 5px; font-size: clamp(9px, 1.5cqw, 12px); font-weight: 900; }
.stage__head svg { width: 13px; height: 13px; fill: var(--gold); }
.stage.is-writing .stage__head svg { animation: stage-spin 1.4s linear infinite; }
@keyframes stage-spin { to { transform: rotate(360deg); } }
.stage__status {
  font-size: clamp(8px, 1.2cqw, 10px); font-weight: 700; line-height: 1.3;
  color: transparent; margin: -2px 0 0;
  background: linear-gradient(90deg, rgba(236, 235, 232, 0.35) 0%, var(--gold) 45%, rgba(236, 235, 232, 0.35) 90%) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: stage-shimmer 1.3s linear infinite;
  height: 0; opacity: 0; transition: opacity 0.3s, height 0.3s;
}
.stage.is-writing .stage__status { height: 1.3em; opacity: 1; }
@keyframes stage-shimmer { to { background-position: -200% 0; } }

.stage__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.stage__lines li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 6px;
  padding: 6px 7px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  font-size: clamp(8px, 1.3cqw, 11px); font-weight: 700; line-height: 1.3;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.3s, transform 0.4s var(--ease-out), background 0.3s, box-shadow 0.3s;
}
.stage__lines li.is-in { opacity: 1; transform: none; }
.stage__lines li.is-speaking { background: rgba(255, 138, 61, 0.22); box-shadow: 0 0 0 1px rgba(255, 138, 61, 0.6) inset; }
.stage__at { font-variant-numeric: tabular-nums; color: var(--gold); font-weight: 800; }
.stage__say { min-height: 2.6em; }
.stage__wave { width: 12px; height: 12px; opacity: 0; transition: opacity 0.3s;
  background: linear-gradient(var(--sun), var(--sun)) 1px 50% / 2px 40% no-repeat, linear-gradient(var(--sun), var(--sun)) 5px 50% / 2px 90% no-repeat, linear-gradient(var(--sun), var(--sun)) 9px 50% / 2px 60% no-repeat; }
.stage__lines li.is-voiced .stage__wave { opacity: 1; }

.stage__generate {
  margin-top: auto; margin-bottom: 8px;
  align-self: stretch; text-align: center;
  padding: 6px 0; border-radius: 999px;
  background: var(--sun); color: var(--night);
  font-size: clamp(8px, 1.3cqw, 11px); font-weight: 900;
  opacity: 0.35; transition: opacity 0.3s, transform 0.15s;
}
.stage.is-ready .stage__generate { opacity: 1; }
.stage__generate.is-pressed { transform: scale(0.94); }

/* ---------- editor: timeline ---------- */
.stage__timeline {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 27%;
  padding: 7px 10px 8px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.5s ease 0.35s, transform 0.7s var(--ease-out) 0.35s;
}
.stage.is-editor .stage__timeline { opacity: 1; transform: none; }
.stage__lane { position: relative; display: grid; grid-template-columns: 17% 1fr; align-items: center; height: 26%; }
.stage__lane b { font-size: clamp(7px, 1.15cqw, 10px); font-weight: 800; color: rgba(236, 235, 232, 0.65); }
.stage__clip { position: absolute; top: 0; bottom: 0; left: calc(17% + var(--a, 0%) * 0.83); width: calc(var(--w, 100%) * 0.83); border-radius: 5px; }
.stage__clip--video { background: linear-gradient(90deg, #3b6fd8, #5a8cf0); }
.stage__clip--zoom { --a: 30%; --w: 24%; background: #8b5cf6; color: #fff; font-size: clamp(6px, 1cqw, 9px); font-weight: 800; display: flex; align-items: center; padding-left: 6px; white-space: nowrap; overflow: hidden; }
.stage__clip--voice { background: linear-gradient(90deg, var(--sun), var(--gold)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.5s var(--ease-out); }
.stage__clip--voice.is-in { transform: none; }
.stage__playhead { position: absolute; top: 4px; bottom: 4px; left: calc(10px + (100% - 20px) * (0.17 + var(--ph, 0) * 0.83)); width: 2px; border-radius: 1px; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.8); }
.stage__playhead.is-moving { transition: left var(--pt, 0s) linear; }

/* on scroll the sun rises behind the window instead of sinking (site.js drives --sink) */
.hero__sun { transform: translate(-50%, calc(var(--sink, 0px) * -0.4)); }

@media (max-width: 760px) {
  .stage { width: 100%; border-radius: 12px; margin-bottom: calc(120vw * -0.12 - var(--tab-h)); }
  .stage__rec { top: 8px; padding: 5px 9px; }
  .stage__lines li:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stage { transform: none; }
}