/* Painted shutters open once; the image request and page content are never delayed. */
.window-scene { --window-delay: 0s; --window-duration: 2.4s; }
.window-joinery { position: absolute; inset: 0; perspective: 1400px; z-index: 3; pointer-events: none; }
.window-shutter { position: absolute; inset-block: 0; width: 50%; transform-style: preserve-3d; backface-visibility: hidden; background: repeating-linear-gradient(91deg, transparent 0 11px, #ffffff03 12px, #17251d07 13px, transparent 16px 29px), linear-gradient(90deg, #667361, #788370 30%, #6b7764 76%, #515f50); border: 1px solid #3c4a3b; box-shadow: inset 0 0 0 5px #52624d, inset 0 0 0 7px #92997b60, 0 1px 16px #1520166b; }
.window-shutter-left { left: 0; transform-origin: left center; border-right: 2px solid #394433; }
.window-shutter-right { right: 0; transform-origin: right center; border-left: 2px solid #7d8873; background-color: #626e5c; }
.shutter-inset { position: absolute; inset: 7% 11% 6%; display: flex; flex-direction: column; gap: 18px; padding: 7px; border: 1px solid #a8ac898c; box-shadow: 0 1px 2px #141e1340, inset 1px 2px 8px #23311d70; }
.shutter-louvers { flex: 1; min-height: 0; background: repeating-linear-gradient(0deg, #354732 0, #4c5d43 2px, #647358 4px, #748166 7px, #7c886d 17px, #9aa182 18px, #59694d 20px); border: 1px solid #425238; box-shadow: inset 3px 3px 12px #21301570; }
.shutter-bottom-panel { height: 24%; flex-shrink: 0; border: 6px solid #68755e; outline: 1px solid #8a947660; background: linear-gradient(110deg, #5d6b53, #707d63); box-shadow: inset 2px 3px 8px #28352275, 0 1px 3px #28352260; }
.shutter-hinge { position: absolute; width: 23px; height: 9px; border: 1px solid #434436; background: linear-gradient(#867e59, #4b4b34 54%, #797354); box-shadow: 0 2px 3px #18201455; }
.shutter-hinge::after { position: absolute; top: -3px; bottom: -3px; width: 4px; background: linear-gradient(90deg, #4b4932, #a09a70, #4d4c36); border-radius: 2px; content: ''; }
.window-shutter-left .shutter-hinge { left: 4px; border-radius: 0 3px 3px 0; }
.window-shutter-right .shutter-hinge { right: 4px; border-radius: 3px 0 0 3px; }
.window-shutter-left .shutter-hinge::after { left: 0; }
.window-shutter-right .shutter-hinge::after { right: 0; }
.shutter-hinge-top { top: 36%; }
.shutter-hinge-bottom { top: 78%; }
.shutter-handle { position: absolute; top: 55%; width: 12px; height: 44px; border: 1px solid #a39868; border-radius: 6px; background: linear-gradient(90deg, #5c5a3d, #bcb080 40%, #83784e); box-shadow: 2px 2px 5px #27321e90; }
.shutter-handle::after { position: absolute; inset: 9px 3px; border: 1px solid #c4b588; border-radius: 5px; background: #6f6947; content: ''; box-shadow: 1px 1px 3px #383b25; }
.window-shutter-left .shutter-handle { right: 12px; }
.window-shutter-right .shutter-handle { left: 12px; }
.window-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #182519; opacity: .56; }
.window-open-control { position: absolute; bottom: 25px; left: 50%; z-index: 5; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 36px; padding: 8px 15px; border: 1px solid #fff2d777; border-radius: 3px; background: #253a2ad6; color: #fff8e7; white-space: nowrap; font: 12px/1.4 var(--sans); transition: background .2s, opacity .3s; }
.window-open-control:hover { background: #203224; }
.window-open-control:focus-visible { outline-color: #f2dab3; }
.window-scene .hero-caption { opacity: 0; transform: translateY(12px); }
.window-scene .photo-location { opacity: 0; }
.window-scene[data-window-state=playing] .window-shutter-left { animation: window-open-left var(--window-duration) cubic-bezier(.42, 0, .12, 1) var(--window-delay) both; }
.window-scene[data-window-state=playing] .window-shutter-right { animation: window-open-right var(--window-duration) cubic-bezier(.42, 0, .12, 1) calc(var(--window-delay) + .12s) both; }
.window-scene[data-window-state=playing] .window-shade { animation: window-light 2.4s ease var(--window-delay) both; }
.window-scene[data-window-state=playing] .hero-caption { animation: window-caption 1s ease calc(var(--window-delay) + .8s) both; }
.window-scene[data-window-state=playing] .photo-location { animation: window-caption 1s ease calc(var(--window-delay) + 1.2s) both; }
.window-scene[data-window-state=playing] .window-open-control { animation: window-control-out .35s ease var(--window-delay) forwards; }
.window-scene[data-window-state=open] .window-joinery, .window-scene[data-window-state=open] .window-shade, .window-scene[data-window-state=open] .window-open-control { display: none; }
.window-scene[data-window-state=open] .hero-caption { opacity: 1; transform: none; }
.window-scene[data-window-state=open] .photo-location { opacity: 1; }
@keyframes window-open-left { from { transform: rotateY(0); } to { transform: rotateY(-102deg); } }
@keyframes window-open-right { from { transform: rotateY(0); } to { transform: rotateY(102deg); } }
@keyframes window-light { from { opacity: .56; } to { opacity: 0; } }
@keyframes window-caption { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes window-control-out { to { opacity: 0; visibility: hidden; } }
@media (max-width: 900px) {
  .shutter-inset { padding: 5px; gap: 12px; }
  .shutter-hinge { width: 18px; height: 8px; }
  .shutter-handle { width: 10px; height: 35px; }
  .window-shutter-left .shutter-handle { right: 8px; }
  .window-shutter-right .shutter-handle { left: 8px; }
  .window-open-control { font-size: 11px; bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .window-joinery, .window-shade, .window-open-control { display: none !important; }
  .window-scene .hero-caption { opacity: 1; transform: none; }
  .window-scene .photo-location { opacity: 1; }
}