/* A film aperture, with the same handwritten table invitation and salon return. */
.detail-film .detail-room-shade{background:#000}
.detail-film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:none;background:#000}
.detail-film.is-ready .detail-film-video{opacity:1}
/* The Spanish end cards mask the English lettering already embedded in the film. */
.detail-film-es-endcard{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:5vw;background:#000;color:#f5f1e9;text-align:center;pointer-events:none}
.detail-film-es-endcard[hidden]{display:none}
.detail-film-es-endcard p{grid-area:1/1;margin:0;opacity:0;text-transform:uppercase}
.detail-film-es-endcard .film-es-detail{font-size:clamp(17px,2.5vw,48px);font-weight:400;line-height:1.2;letter-spacing:.012em}
.detail-film-es-endcard .film-es-detail span{color:#de1d28}
.detail-film-es-endcard .film-es-question{font-size:clamp(26px,4vw,76px);font-weight:750;line-height:1.08;letter-spacing:-.025em}
.detail-film-es-endcard:not(.is-question) .film-es-detail,.detail-film-es-endcard.is-question .film-es-question{opacity:var(--film-es-opacity,0)}
.detail-film .detail-paper-flight{aspect-ratio:1732/908}
.detail-film .detail-room-top{padding:20px max(22px,env(safe-area-inset-right)) 28px;align-items:start;z-index:6}
.detail-film .detail-room-heading h2{font-weight:700}
.detail-film .detail-room-close{min-height:46px}
.detail-film-status{position:absolute;left:50%;top:72%;translate:-50% 0;max-width:min(440px,80vw);padding:12px 18px;border-radius:16px;background:#171613d9;font-size:14px;line-height:1.5;text-align:center;z-index:4}
.detail-film-controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:14px;padding:32px 26px max(18px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#0b0b0bda);z-index:4;opacity:0;visibility:hidden;transition:opacity .5s}
.detail-film.is-ready.has-controls .detail-film-controls{opacity:1;visibility:visible}
.detail-film-controls button{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:44px;min-width:44px;padding:8px;border:1px solid #fff3;border-radius:999px;color:#fff5e8;background:#20201ce6;flex-shrink:0;transition:background .2s}
.detail-film-controls button:hover{background:#5a5343}
.detail-film-controls button:focus-visible,.detail-film-ended button:focus-visible{outline:2px solid #fff3cf;outline-offset:3px}
.detail-film-controls svg{width:20px;height:20px}
.detail-film-controls .film-sound{padding-inline:16px;font-size:14px}
.film-time{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.film-seek{appearance:none;-webkit-appearance:none;flex:1;min-width:40px;height:44px;padding:0;background:transparent;cursor:pointer;touch-action:pan-x}
.film-seek::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(to right,#fff3d5 var(--progress,0%),#ffffff40 var(--progress,0%))}
.film-seek::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;border-radius:50%;margin-top:-5.5px;background:#fff3d5;box-shadow:0 0 12px #ffdd9870}
.film-seek::-moz-range-track{height:3px;background:#ffffff40}
.film-seek::-moz-range-progress{height:3px;background:#fff3d5}
.film-seek::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#fff3d5}
.detail-film-ended{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:28px;padding:90px 24px;text-align:center;background:#000ed;z-index:3}
.detail-film-ended p{font-size:clamp(28px,4.2vw,64px);font-weight:700;letter-spacing:-.045em;line-height:1.05;max-width:850px}
.detail-film-ended p span{color:#df202b}
.detail-film-ended>div{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.detail-film-ended button,.film-retry{padding:14px 24px;min-height:48px;border-radius:99px;border:1px solid #fff6;background:#f5efe3;color:#1b1914;font-size:15px}
.detail-film-ended .film-replay{background:transparent;color:#fff3dd}
.film-retry{position:absolute;left:50%;top:82%;translate:-50% 0;z-index:5}
.detail-film [hidden]{display:none!important}
@media(max-width:700px){
 .detail-film-controls{gap:8px;padding:20px 12px max(12px,env(safe-area-inset-bottom));flex-wrap:wrap}
 .film-seek{order:-1;flex-basis:100%;height:30px}
 .film-time{margin-right:auto}
 .detail-film .detail-room-top{padding:16px 14px;gap:10px}
 .detail-film .detail-room-heading h2{font-size:25px}
 .detail-film .detail-room-close{font-size:12px;padding:9px 12px;gap:5px}
 .detail-film-status{top:64%;font-size:14px}
 .detail-film-controls .film-sound{padding-inline:12px}
}
@media(prefers-reduced-motion:reduce){.detail-film-video,.detail-film-controls{transition:none}}

/* Native dialog is above the decorative cursor. Always retain a usable pointer. */
html.detail-room-open body.cursor-on .detail-film,
html.detail-room-open body.cursor-on .detail-film *{cursor:auto!important}
html.detail-room-open body.cursor-on .detail-film button,
html.detail-room-open body.cursor-on .detail-film button *,
html.detail-room-open body.cursor-on .detail-film input{cursor:pointer!important}
.detail-film .detail-room-top{z-index:30;opacity:1;transform:none;animation:none}
.detail-film .detail-room-heading{visibility:hidden}
.detail-film .detail-room-close{pointer-events:auto!important;position:relative;z-index:31;background:#111c;color:#fff;opacity:1;visibility:visible;touch-action:manipulation}
.detail-film .detail-paper-flight{z-index:3}
.detail-film-ended{inset:auto 0 19%;padding:0;background:transparent;pointer-events:none}
.detail-film-ended>div{pointer-events:auto}
.detail-film-ended button{font-size:13px;padding:10px 18px;min-height:42px}

/* Crop only the black canvas during the full-size portrait introduction. */
.detail-film{overflow:hidden}
.detail-film-video{transform-origin:center;will-change:transform}

/* The room dims with the paper rather than cutting to a black backdrop. */
.detail-film::backdrop{background:transparent;backdrop-filter:none}
.detail-film .detail-room-shade{animation:film-room-dim 3.5s linear both}
@keyframes film-room-dim{0%{opacity:0}71.4286%{opacity:.22;animation-timing-function:ease-in-out}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.detail-film .detail-room-shade{animation:none;opacity:1}}

.detail-paper-flight>img{display:block;width:100%;height:100%;object-fit:contain}

.room-study.is-detail-open .salon-detail{visibility:hidden}

.detail-film-video:focus-visible{outline:2px solid #fff3cf;outline-offset:-5px}