.scene{--scene-play-state:paused;isolation:isolate}
.scene-art{display:block;width:100%;height:100%;overflow:hidden}
.scene-controls{position:absolute;right:24px;bottom:24px;z-index:4;display:flex;align-items:center;gap:16px;padding:7px 7px 7px 16px;color:#f6f4ec;background:#182c29d9;border:1px solid #ffffff40;border-radius:30px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 3px 18px #11292212}
.scene-controls[hidden]{display:none}
.scene-controls>span{font-size:8px;font-weight:500;line-height:1.4;letter-spacing:.13em;text-transform:uppercase}
.scene-toggle{width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex:none;padding:0;border:1px solid #ffffff40;border-radius:50%;background:#ffffff0a;color:inherit}
.scene-toggle:hover{background:#ffffff20}
.scene-toggle:focus-visible{outline:2px solid #d9c898;outline-offset:4px}
.scene-icon-pause{display:none}
.scene-is-playing .scene-icon-pause{display:block}
.scene-is-playing .scene-icon-play{display:none}
.scene-outdoor .scene-controls{right:5.3vw;bottom:30px}
.scene-motion{animation-play-state:var(--scene-play-state,paused)}
.shade-fabric{animation:shade-rise-fall 16s cubic-bezier(.45,0,.2,1) infinite;animation-delay:0s;animation-play-state:var(--scene-play-state,paused)}
@keyframes shade-rise-fall{0%,8%,100%{transform:translateY(-115px)}38%,54%{transform:translateY(0)}84%,92%{transform:translateY(-265px)}}
@media(max-width:760px){
 .scene-controls{right:14px;bottom:14px;gap:12px;padding-left:13px}
 .scene-controls>span{font-size:7px;letter-spacing:.1em}
 .scene-outdoor .scene-controls{right:24px;bottom:22px}
 .scene-outdoor-composition{transform:translateX(-190px)}
 .scene-outdoor .outdoor-copy{top:auto;bottom:106px;transform:none}
 .scene-outdoor .outdoor-shade{background:linear-gradient(0deg,#091b22e8 0%,#091b22a0 37%,#091b2210 77%)}
 .scene-outdoor .outdoor-copy h2{font-size:clamp(43px,10.8vw,61px)}
 .scene-outdoor .outdoor-copy>p{margin-top:19px}
 .scene-outdoor .outdoor-copy .text-link{margin-top:22px}
}
@media(prefers-reduced-motion:reduce){.scene:not(.scene-motion-enabled) .scene-motion{animation-play-state:paused!important}}

/* Photo-locked overlays. Every effect uses the shared scene playback state. */
.scene-outdoor-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}

/* Six pictures, a new one every 1.5 seconds, with 300 ms soft crossfades. */
.scene-outdoor-art .outdoor-tv-frame {
  opacity: 0;
  animation: outdoor-tv-picture 9s linear infinite;
  animation-delay: var(--frame-delay, 0s);
}

@keyframes outdoor-tv-picture {
  0%, 13.333% { opacity: 1; }
  16.667%, 96.667% { opacity: 0; }
  100% { opacity: 1; }
}

.scene-outdoor-art .outdoor-speaker-notes {
  filter: drop-shadow(0 1px 1.6px rgba(10, 40, 49, .72));
  pointer-events: none;
}
.scene-outdoor-art .outdoor-speaker-notes--wall { opacity: .96; }
.scene-outdoor-art .outdoor-speaker-notes--garden { opacity: .94; }
.scene-outdoor-art .outdoor-speaker-notes--garden-quiet { opacity: .68; }

.scene-outdoor-art .outdoor-note-flight {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: outdoor-note-flight 2.8s linear infinite;
  animation-delay: var(--note-delay, 0s);
}

/* Two light pulses as each note travels 80–188 photo pixels from its speaker. */
@keyframes outdoor-note-flight {
  0% { opacity: 0; transform: translate(0, 0) scale(.65) rotate(-8deg); }
  13% { opacity: 1; transform: translate(calc(var(--note-x) * .13), calc(var(--note-y) * .13)) scale(1.08) rotate(-3deg); }
  36% { opacity: .76; transform: translate(calc(var(--note-x) * .36), calc(var(--note-y) * .36)) scale(.9) rotate(3deg); }
  59% { opacity: 1; transform: translate(calc(var(--note-x) * .59), calc(var(--note-y) * .59)) scale(1.15) rotate(-3deg); }
  83% { opacity: .72; transform: translate(calc(var(--note-x) * .83), calc(var(--note-y) * .83)) scale(1) rotate(4deg); }
  100% { opacity: 0; transform: translate(var(--note-x), var(--note-y)) scale(.88) rotate(8deg); }
}

/* Recolor the real water and its reflections; the parent clips all effects to
   the two water interiors. A glow can never bleed onto deck or architecture. */
.scene-outdoor-art .outdoor-pool-water-color {
  animation: outdoor-pool-color 14s ease-in-out infinite;
}
.scene-outdoor-art .outdoor-pool-glow {
  color: #57caff;
  mix-blend-mode: screen;
  animation: outdoor-pool-glow 14s ease-in-out infinite;
}
@keyframes outdoor-pool-color {
  0%, 100% { filter: hue-rotate(0deg) saturate(1.08); }
  20% { filter: hue-rotate(-48deg) saturate(1.05); }
  40% { filter: hue-rotate(48deg) saturate(.94); }
  60% { filter: hue-rotate(97deg) saturate(.90); }
  80% { filter: hue-rotate(-66deg) saturate(.98); }
}
@keyframes outdoor-pool-glow {
  0%, 100% { color: #57caff; opacity: .75; }
  20% { color: #55ffd9; opacity: .82; }
  40% { color: #ad8cff; opacity: .85; }
  60% { color: #ff88cd; opacity: .80; }
  80% { color: #72ffd0; opacity: .82; }
}

/* Keep after animation shorthands, which otherwise reset the play state. */
.scene-outdoor-art .scene-motion {
  animation-play-state: var(--scene-play-state, paused);
}