.hero-copy:has([data-reel-title]) { container-type: inline-size; }
.hero-copy h1[data-reel-title] {
  max-width: none;
  font-size: clamp(3rem, 19.5cqw, 7.35rem);
}
[data-reel-title] > * { display: block; }
:is(:lang(de), :lang(it)) .hero-copy h1[data-reel-title] { font-size: clamp(2.8rem, 17.5cqw, 7rem); }

.home-reel[data-home-reel] {
  transform: translate(var(--camera-x, 0%), calc(-50% + var(--camera-y, 0%))) scale(var(--camera-scale, 1));
  transform-origin: top left;
  transition: transform 1.05s cubic-bezier(.23,.67,.24,1);
}

[data-home-reel][data-closeup] {
  --camera-x: -33.15%;
  --camera-y: -.5%;
  --camera-scale: 1.38;
}

/* Keep the mouse in view through the marking click, then finish the push-in. */
[data-home-reel][data-closeup]:is([data-editor-cue="approach"], [data-editor-cue="aim"]) {
  --camera-x: -10.3%;
  --camera-y: -.4%;
  --camera-scale: 1.11;
}
.home-reel[data-home-reel][data-editor-cue="press"] { transition-delay: .24s; }

@media (max-width: 800px) {
  [data-home-reel][data-closeup] { --camera-y: 1.45%; }
  [data-home-reel][data-closeup]:is([data-editor-cue="approach"], [data-editor-cue="aim"]) {
    --camera-y: 1%;
  }
}

.reel-projector {
  position: absolute;
  top: 0;
  left: 0;
  width: 1536px;
  height: 1024px;
  visibility: hidden;
  transform: scale(var(--room-scale, 1));
  transform-origin: top left;
  pointer-events: none;
}

[data-projector-ready] .reel-projector { visibility: visible; }

/* The masks reuse the room photo at its original scale. */
.reel-photo-patch { position: absolute; }
.reel-photo-patch::before {
  position: absolute;
  inset: 0;
  background: url('/assets/sala-editor-reel.jpg') var(--patch-offset) / 1536px 1024px no-repeat;
  animation: var(--gesture) var(--gesture-duration, 7.3s) ease-in-out infinite paused;
  content: '';
}
[data-room-motion] .reel-editor-patch::before,
[data-room-ambience] .reel-leaf-patch::before,
[data-film-playing] .reel-speaker-patch::before { animation-play-state: running; }

.reel-leaves-left {
  inset: 119px auto auto 0;
  width: 80px;
  height: 99px;
  mask-image: radial-gradient(ellipse 41px 47px at 33px 51px, black 52%, transparent 100%);
  --patch-offset: 0 -119px;
  --gesture: room-leaf-sway;
  --gesture-duration: 5.9s;
}
.reel-leaves-left::before { transform-origin: 45px 8px; }
.reel-leaves-right {
  inset: 62px auto auto 139px;
  width: 127px;
  height: 139px;
  mask-image: radial-gradient(ellipse 62px 69px at 62px 69px, black 58%, transparent 100%);
  --patch-offset: -139px -62px;
  --gesture: room-leaf-sway;
  --gesture-duration: 8.2s;
}
.reel-leaves-right::before { transform-origin: 41px 12px; animation-delay: -1.8s; }

@keyframes room-leaf-sway {
  0%, 100% { transform: none; }
  24% { transform: translate(2px, 1px) rotate(-2.6deg); }
  46% { transform: translate(-1px, 1px) rotate(1.1deg); }
  73% { transform: translate(2px, -1px) rotate(-1.8deg); }
}

.reel-speaker-patch { --gesture: room-cone; }
.reel-speaker-high {
  inset: 365px auto auto 429px;
  width: 48px;
  height: 48px;
  mask-image: radial-gradient(circle, black 44%, transparent 70%);
  --patch-offset: -429px -365px;
  --gesture-duration: 1.19s;
  --cone-peak: 1.04;
}
.reel-speaker-low {
  inset: 431px auto auto 407px;
  width: 92px;
  height: 92px;
  mask-image: radial-gradient(circle, black 53%, transparent 70%);
  --patch-offset: -407px -431px;
  --gesture-duration: .89s;
  --cone-peak: 1.065;
}

@keyframes room-cone {
  0%, 30%, 58%, 100% { transform: none; }
  16%, 46%, 81% { transform: scale(var(--cone-peak)); }
  69%, 91% { transform: scale(.99); }
}

.reel-room-cloud, .reel-room-details { position: absolute; inset: 0; }
.reel-room-details { display: block; width: 100%; height: 100%; }
.reel-room-cloud {
  background: linear-gradient(124deg, #344958, #2d343d 62%, #3d3234);
  opacity: 0;
  animation: room-cloud 33s ease-in-out infinite paused;
}

@keyframes room-cloud {
  0%, 5%, 100% { opacity: 0; }
  39% { opacity: .031; }
  68% { opacity: .058; }
  83% { opacity: .041; }
}

.reel-vu-level {
  --vu-idle: .32;
  --vu-mid: .58;
  --vu-hot: .81;
  opacity: var(--vu-idle);
  animation: room-vu 1.31s steps(1, end) infinite paused;
}
.reel-vu-mid { --vu-idle: .15; --vu-mid: .39; --vu-hot: .9; }
.reel-vu-peak { --vu-idle: .08; --vu-mid: .16; --vu-hot: .74; }
[data-film-playing] .reel-vu-level { animation-play-state: running; }

@keyframes room-vu {
  0%, 32%, 63%, 100% { opacity: var(--vu-idle); }
  17%, 44%, 74% { opacity: var(--vu-hot); }
  24%, 56%, 84% { opacity: var(--vu-mid); }
}

.reel-console-led {
  opacity: 0;
  animation: room-console-led 5.4s ease-in-out var(--led-delay) infinite paused;
}
@keyframes room-console-led {
  0%, 18%, 54%, 100% { opacity: 0; }
  27%, 45% { opacity: .79; }
}
.reel-drive-led {
  opacity: .86;
  animation: room-drive-led 4.3s ease-in-out infinite paused;
}
@keyframes room-drive-led {
  0%, 18%, 25%, 33%, 62%, 70%, 100% { opacity: .86; }
  19%, 23%, 28%, 31%, 63%, 67% { opacity: 0; }
}
[data-room-ambience] :is(.reel-room-cloud, .reel-console-led, .reel-drive-led) {
  animation-play-state: running;
}

.reel-editor-shoulder {
  inset: 590px auto auto 18px;
  width: 465px;
  height: 335px;
  mask-image: radial-gradient(ellipse 225px 159px at 224px 164px, black 48%, transparent 100%);
  --patch-offset: -18px -590px;
  --gesture: editor-posture;
}
.reel-editor-shoulder::before { transform-origin: 232px 270px; }

.reel-editor-head {
  inset: 379px auto auto 86px;
  width: 275px;
  height: 324px;
  mask-image: radial-gradient(ellipse 137px 160px at 137px 160px, black 64%, transparent 100%);
  --patch-offset: -86px -379px;
  --gesture: editor-look;
}
.reel-editor-head::before { transform-origin: 141px 280px; }

.reel-editor-hand {
  inset: 764px auto auto 464px;
  width: 235px;
  height: 139px;
  mask-image: radial-gradient(ellipse 116px 66px at 118px 65px, black 52%, transparent 100%);
  --patch-offset: -464px -764px;
  --gesture: editor-mouse;
}
.reel-editor-hand::before { transform-origin: 59px 88px; }

@keyframes editor-posture {
  0%, 100% { transform: none; }
  17% { transform: translate(2px, -1px); }
  40% { transform: translate(4px, -3px) rotate(.8deg); }
  61% { transform: translate(2px, -2px) rotate(.4deg); }
  82% { transform: translate(-1px, 0); }
}

@keyframes editor-look {
  0%, 7%, 100% { transform: none; }
  25% { transform: translate(4px, 0) rotate(1.5deg); }
  42% { transform: translate(7px, 2px) rotate(2.2deg); }
  59% { transform: translate(5px, 3px) rotate(1.4deg); }
  82% { transform: translate(-2px, 1px) rotate(-.65deg); }
}

@keyframes editor-mouse {
  0%, 20%, 100% { transform: none; }
  38%, 43% { transform: translate(6px, -3px) rotate(-1.4deg); }
  45%, 47% { transform: translate(6px, 3px) rotate(1.6deg); }
  50% { transform: translate(5px, -2px) rotate(-.8deg); }
  60% { transform: translate(4px, -2px) rotate(-.7deg); }
  77% { transform: translate(2px, 0); }
}

[data-editor-cue="approach"] .reel-editor-hand::before {
  animation-name: editor-aim;
  animation-duration: .78s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}
[data-editor-cue="aim"] .reel-editor-hand::before {
  animation-name: none;
  transform: translate(4px, -2px) rotate(-1deg);
}
[data-editor-cue="press"] .reel-editor-hand::before {
  animation-name: editor-press;
  animation-duration: .48s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes editor-aim {
  from { transform: none; }
  to { transform: translate(4px, -2px) rotate(-1deg); }
}

@keyframes editor-press {
  0%, 24% { transform: translate(4px, 4px) rotate(2deg); }
  60% { transform: translate(4px, 1px) rotate(.6deg); }
  100% { transform: translate(3px, 0); }
}

/* Project the 960 × 540 canvas onto the four corners of the monitor in the room photo. */
.reel-monitor {
  position: absolute;
  width: 960px;
  height: 540px;
  overflow: hidden;
  transform-origin: top left;
  transform: matrix3d(.636950758, -.103386708, 0, -.000220386, 0, .883333333, 0, 0, 0, 0, 1, 0, 542, 130, 0, 1);
  --monitor-bg: #101725;
  --monitor-panel: #182232;
  --monitor-line: #2c394d;
  --monitor-text: #f0f3fa;
  --monitor-muted: #aebbd0;
  --monitor-accent: #c7afff;
  color: var(--monitor-text);
  font: 500 16px/1.25 var(--body);
}

.monitor-app { position: absolute; inset: 0; background: var(--monitor-bg); }
[data-view="reel"] .monitor-app { visibility: hidden; }

.monitor-top {
  height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 0 26px;
  border-bottom: 1px solid var(--monitor-line);
  background: #171f2f;
}

.monitor-brand, .monitor-team, .monitor-tabs { display: flex; align-items: center; gap: 10px; }
.monitor-brand { font-size: 24px; letter-spacing: -.045em; }
.monitor-brand i, .monitor-team i {
  display: grid;
  width: 32px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 9px;
  font: 750 19px/1 var(--body);
  color: #201438;
  background: #c7afff;
}
.monitor-team { justify-self: end; color: var(--monitor-muted); font-size: 14px; }
.monitor-team i { color: #e9defc; background: #493b66; border-radius: 50%; font-size: 12px; }
.monitor-tabs { align-self: stretch; gap: 4px; }
.monitor-tabs span {
  display: grid;
  place-items: center;
  padding-inline: 22px;
  border-bottom: 2px solid transparent;
  color: var(--monitor-muted);
  font-weight: 700;
}
[data-view="review"] [data-monitor-tracker], [data-view="calendar"] [data-monitor-calendar] {
  border-color: var(--monitor-accent);
  color: var(--monitor-text);
}

.monitor-review, .monitor-calendar { position: absolute; inset: 64px 0 0; padding: 20px 26px; }
[data-view="review"] .monitor-calendar, [data-view="calendar"] .monitor-review { visibility: hidden; }
.monitor-view-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.monitor-view-heading strong { display: block; margin-top: 3px; font-size: 27px; letter-spacing: -.035em; }
.monitor-kicker { color: var(--monitor-muted); font: 650 13px/1.2 var(--mono); letter-spacing: .055em; text-transform: uppercase; }

.monitor-share, .monitor-week {
  padding: 10px 16px;
  border: 1px solid var(--monitor-line);
  border-radius: 8px;
  color: var(--monitor-text);
  font-weight: 700;
  background: var(--monitor-panel);
}
.monitor-share { color: #241638; background: var(--monitor-accent); border-color: transparent; }
[data-beat="5"] .monitor-share { box-shadow: 0 0 0 4px #c7afff42; }

.monitor-shot {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
[data-view="review"] .monitor-shot {
  inset: 153px 368px 69px 26px;
  background: #070b13;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--monitor-line);
}
[data-animated-review] .monitor-shot { transition: inset .8s cubic-bezier(.22,.73,.25,1), border-radius .8s; }
[data-view="calendar"] .monitor-shot { visibility: hidden; }

.monitor-shot :is(video, .monitor-hold) {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
[data-view="reel"] .monitor-film[data-started], [data-view="review"] .monitor-shot .monitor-hold { opacity: 1; }
.monitor-marker {
  position: absolute;
  left: 58%;
  top: 48%;
  width: 52px;
  aspect-ratio: 1;
  border: 2px solid #e1cdff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #1c133966;
  opacity: 0;
  translate: -50% -50%;
}
.monitor-marker::after {
  position: absolute;
  inset: -3px;
  border: 3px solid #f1e4ff;
  border-radius: inherit;
  opacity: 0;
  content: '';
}
.monitor-pointer path { transform-origin: 3px 2px; }
[data-editor-cue="press"] .monitor-marker::after {
  animation: frame-click-ring .46s cubic-bezier(.13,.65,.25,1) both paused;
}
[data-editor-cue="press"] .monitor-pointer path {
  animation: frame-click-pointer .29s ease-out both paused;
}
[data-room-motion] .monitor-marker::after,
[data-room-motion] .monitor-pointer path { animation-play-state: running; }

@keyframes frame-click-ring {
  from { opacity: 1; scale: .75; }
  to { opacity: 0; scale: 1.86; }
}
@keyframes frame-click-pointer {
  0%, 25% { scale: .76; }
  100% { scale: 1; }
}

.monitor-marker i { position: absolute; inset: 20px; border-radius: 50%; background: #f1e4ff; }
.monitor-marker b {
  position: absolute;
  left: calc(100% + 7px);
  top: -5px;
  padding: 4px 7px;
  border-radius: 5px;
  color: #26183c;
  background: #e1cdff;
  font: 750 14px/1 var(--mono);
}
[data-view="review"][data-marked] .monitor-marker { opacity: 1; }

.monitor-transport {
  position: absolute;
  left: 26px;
  bottom: 20px;
  width: 566px;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 11px;
  border: 1px solid var(--monitor-line);
  border-radius: 7px;
  background: var(--monitor-panel);
  font: 650 14px/1 var(--mono);
}
.monitor-transport i { flex: 1; height: 4px; border-radius: 4px; background: #3a475e; }
.monitor-transport i span { display: block; width: 97%; height: 100%; border-radius: inherit; background: #b799f2; }
.monitor-transport > span:last-child { color: var(--monitor-accent); }

.monitor-notes {
  position: absolute;
  inset: 89px 26px 20px 614px;
  padding: 17px;
  border: 1px solid var(--monitor-line);
  border-radius: 9px;
  background: var(--monitor-panel);
}
.monitor-notes-head { display: flex; justify-content: space-between; align-items: center; font-size: 22px; }
.monitor-notes-head span { font: 600 13px/1 var(--mono); color: var(--monitor-muted); }
.monitor-note {
  margin-top: 17px;
  padding: 15px;
  border: 1px solid #53456d;
  border-radius: 8px;
  background: #23273e;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .25s, transform .25s;
}
.monitor-note > div { display: flex; align-items: center; gap: 9px; color: #e2ceff; font: 650 16px/1 var(--mono); }
.monitor-note > div span { padding: 4px 6px; border-radius: 4px; background: #47366a; }
.monitor-note p { margin: 10px 0 9px; color: var(--monitor-text); font-size: 23px; font-weight: 650; }
.monitor-note small { color: var(--monitor-muted); font-size: 13px; }
[data-noted] .monitor-note { opacity: 1; transform: none; }

.monitor-shared {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  padding: 10px;
  border: 1px solid #3d655b;
  border-radius: 7px;
  background: #18332f;
  color: #a8eddb;
  opacity: 0;
  transition: opacity .25s;
  font-size: 16px;
  font-weight: 650;
}
.monitor-shared span { font-size: 18px; }
[data-shared] .monitor-shared { opacity: 1; }

.monitor-pointer {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translate(540px, 490px);
  transition: transform .72s cubic-bezier(.27,.66,.32,1), opacity .2s;
}
[data-view="review"][data-animated-review]:not([data-beat="0"]) .monitor-pointer { opacity: 1; }
[data-beat="1"] .monitor-pointer, [data-beat="2"] .monitor-pointer { transform: translate(351px, 303px); }
[data-beat="3"] .monitor-pointer { transform: translate(718px, 260px); }
[data-beat="4"] .monitor-pointer, [data-beat="5"] .monitor-pointer { transform: translate(847px, 108px); }
[data-beat="6"] .monitor-pointer { transform: translate(536px, 34px); }

.monitor-agenda {
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid var(--monitor-line);
  border-radius: 9px;
  background: var(--monitor-panel);
}
.monitor-dates, .monitor-lane {
  display: grid;
  grid-template-columns: 124px repeat(5, minmax(0,1fr));
  align-items: center;
}
.monitor-dates { height: 46px; background: #202c3f; }
.monitor-dates span { height: 100%; padding: 12px; border-inline-end: 1px solid var(--monitor-line); color: var(--monitor-muted); font-size: 15px; }
.monitor-dates b { padding-left: 3px; color: var(--monitor-text); font-size: 18px; }
.monitor-lane {
  min-height: 52px;
  border-top: 1px solid var(--monitor-line);
  background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), var(--monitor-line) calc(20% - 1px) 20%) 124px 0 / calc(100% - 124px) 100% no-repeat;
}
.monitor-lane > b { grid-row: 1; grid-column: 1; padding-left: 12px; font-size: 18px; }
.monitor-event {
  grid-row: 1;
  grid-column: var(--start) / var(--end);
  margin-inline: 5px;
  padding: 9px 10px;
  overflow: hidden;
  border-left: 3px solid var(--event);
  border-radius: 5px;
  color: var(--event);
  background: color-mix(in srgb, var(--event) 16%, var(--monitor-panel));
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
}
.monitor-event-linked { outline: 1px solid #c7afffa6; outline-offset: -1px; }
.monitor-linked {
  min-height: 64px;
  display: grid;
  grid-template-columns: 79px 1fr auto;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 8px 12px;
  border: 1px solid var(--monitor-line);
  border-radius: 8px;
  background: var(--monitor-panel);
}
.monitor-calendar .monitor-linked img { width: 79px; height: 44px; border-radius: 4px; }
.monitor-linked b, .monitor-linked div span { display: block; }
.monitor-linked div span { margin-top: 4px; color: var(--monitor-muted); font-size: 15px; }
.monitor-linked-day { color: var(--monitor-accent); font: 650 14px/1 var(--mono); }

.home-reel-steps {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--button-line);
  border-radius: 999px;
  background: var(--button-fill);
}
.home-reel-steps button {
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: inherit;
  color: var(--muted);
  background: transparent;
  font: 650 .74rem/1.1 var(--body);
  white-space: nowrap;
  cursor: pointer;
}
.home-reel-steps button:hover { color: var(--ink); background: var(--button-hover); }
.home-reel-steps button[aria-pressed="true"] { color: var(--ink); background: var(--button-hover); border-color: var(--button-line); }

@media (max-width: 620px) {
  .home-reel-caption { flex-wrap: wrap; }
  .home-reel-location { display: none; }
}
@media (pointer: coarse) {
  .home-reel-steps button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-reel[data-home-reel], .reel-monitor *, [data-animated-review] .monitor-shot { transition: none; }
  .reel-photo-patch, .reel-room-cloud, .reel-room-details { display: none; }
}