.resort-memory.memory-scene{position:relative;isolation:isolate;display:grid;align-items:center;width:100%;margin:0;min-height:clamp(720px,88svh,950px);padding:clamp(65px,7vw,112px) 5.8%;overflow:hidden;background:#25140e;--memory-art-height:100%}
.memory-world,.memory-camera{position:absolute;inset:0;width:100%;height:100%}
.memory-world{z-index:-1;pointer-events:none;overflow:hidden}
.memory-camera{height:var(--memory-art-height);top:auto;display:block;overflow:hidden}
.memory-world::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#140d0af5 0%,#1a100be9 22%,#1b110b8a 36%,#1b110b1c 54%,transparent 71%),linear-gradient(0deg,#19100bd1,transparent 22%);pointer-events:none}
.memory-dolly{transform-origin:0 0;transform-box:view-box;transition:transform 1.35s cubic-bezier(.55,.04,.25,1)}
.memory-scene.is-in-memory .memory-dolly{transform:translate(-753.15px,-237.05px) scale(2.85)}
.memory-copy{position:relative;z-index:1;width:min(29vw,475px);text-shadow:0 2px 12px #160e09ad}
.memory-copy h2{font-size:clamp(39px,4.2vw,69px)}
.memory-copy .eyebrow{margin-bottom:20px}
.resort-memory .memory-copy p:not(.eyebrow){color:#eee1d0}
.memory-toggle,.memory-pause{position:absolute;z-index:2;color:#f7e7c8;cursor:pointer;font-size:13px}
.memory-toggle{left:var(--photo-x,34%);top:var(--photo-y,15%);width:var(--photo-w,36%);height:var(--photo-h,37%);background:transparent;border:0;display:grid;place-items:end center;padding:0 8px 13px}
.memory-toggle>span,.memory-pause{padding:10px 14px;border:1px solid #d8b57592;background:#23170fe8;box-shadow:0 3px 13px #110b0780}
.memory-toggle:hover>span,.memory-pause:hover{background:#49301e}
.is-in-memory .memory-toggle{left:auto;top:auto;right:5.8%;bottom:24px;width:auto;height:auto;padding:0;min-height:44px}
.memory-pause{right:5.8%;bottom:80px;min-height:44px}
.memory-pause[hidden],.memory-description[hidden]{display:none}
.memory-description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.memory-living{opacity:0;transition:opacity .5s ease;transition-delay:0s}
.is-in-memory .memory-living{opacity:1;transition-delay:.55s}
.memory-palms,.memory-fire,.memory-flame,.memory-ember{animation-play-state:paused}
.memory-palms{transform-origin:570px 158px;animation:memory-palms 7s ease-in-out infinite alternate paused}
.memory-flame{animation:memory-fire 1.35s ease-in-out infinite alternate paused;mix-blend-mode:screen}
.memory-flame-side{animation-duration:1.85s;animation-delay:-.85s}
.memory-fire{animation:memory-fire 1.9s ease-in-out infinite alternate paused}
.memory-torch-one{animation-duration:1.25s;animation-delay:-.4s}
.memory-torch-two{animation-duration:2.1s;animation-delay:-.9s}
.memory-ember{animation:memory-ember 5.6s ease-out infinite paused}
.memory-ember-two{animation-delay:-2.9s}
.is-in-memory:not(.memory-still):not(.memory-offscreen) :is(.memory-palms,.memory-fire,.memory-flame,.memory-ember){animation-play-state:running}
@keyframes memory-palms{from{transform:rotate(-.4deg)}to{transform:rotate(.5deg)}}
@keyframes memory-fire{0%{opacity:.29}36%{opacity:.59}68%{opacity:.4}100%{opacity:.68}}
@keyframes memory-ember{0%,60%,100%{opacity:0}66%{opacity:.58}94%{opacity:0;transform:translate(2px,-22px)}}
@media(max-width:880px){
.resort-memory.memory-scene{--memory-art-height:clamp(330px,83vw,575px);padding:52px 6% calc(var(--memory-art-height) + 32px);min-height:0}
.memory-copy{width:min(100%,540px)}
.memory-copy h2{font-size:clamp(39px,7vw,60px)}
.memory-world{background:#23150f url('/assets/resort-memory-room.webp') left top/auto 100% no-repeat}
.memory-world::before{content:"";position:absolute;inset:0;background:url('/assets/resort-memory-beach-wardrobe.webp') center/cover;opacity:0;transition:opacity .8s ease}
.is-in-memory .memory-world::before{opacity:1;transition-delay:.47s}
.memory-world::after{background:linear-gradient(180deg,#1b100ce6,#1b100cf5)}
.memory-camera{z-index:1;mask-image:linear-gradient(180deg,transparent,#000 11%,#000 85%,#000b)}
.memory-toggle{padding-bottom:6px;font-size:12px}
.memory-toggle>span,.memory-pause{padding:7px 10px}
}
@media(prefers-reduced-motion:reduce){
.memory-pause{display:none}
.memory-scene *, .memory-world::before{animation:none!important;transition:none!important}
.memory-ember,.memory-palms{opacity:0}
}
.memory-foreground{transition:opacity .4s ease}
.is-in-memory .memory-foreground{opacity:0;transition-delay:.27s}
.memory-room-art{filter:sepia(.72) saturate(.63)}

/* Hold on the photograph, then drift forward and settle into the memory. */
.resort-memory.memory-scene{background:#10110e}
.memory-world::after{background:
  linear-gradient(180deg,#10110e 0%,#10110ed9 5%,transparent 23%,transparent 74%,#10110ec9 94%,#10110e 100%),
  radial-gradient(ellipse at 70% 57%,transparent 15%,#130e101f 45%,#100e12a6 100%),
  linear-gradient(90deg,#100d0bf5,#140e0be8 21%,#1b110b87 37%,transparent 62%)}
.memory-dolly{transition-duration:1.8s}
.is-in-memory .memory-dolly{transition-duration:2.85s;transition-timing-function:cubic-bezier(.48,.06,.24,1)}
.is-in-memory .memory-foreground{transition-delay:.75s}
.is-in-memory .memory-living{transition-delay:1.15s}
#memory-beach-art{filter:saturate(.68) brightness(.94)}
.memory-sky-grade{pointer-events:none}
.memory-fire{transform-box:fill-box;transform-origin:center bottom}
.memory-flame{transform-box:fill-box;transform-origin:center 75%;animation-name:memory-flame}
.memory-marshmallow{opacity:0;mix-blend-mode:multiply;animation:memory-brown 20s ease-in-out infinite paused}
.memory-marshmallow + .memory-marshmallow{animation-delay:-6s}
.is-in-memory:not(.memory-still):not(.memory-offscreen) .memory-marshmallow{animation-play-state:running}
@keyframes memory-fire{0%{transform:scale(.92,.8);opacity:.35}30%{opacity:.68}62%{transform:scale(1.08,.94);opacity:.43}100%{transform:scale(.98,1.15);opacity:.77}}
@keyframes memory-flame{0%{transform:skewX(-4deg) scale(.8,.73);opacity:.22}40%{opacity:.65}100%{transform:skewX(5deg) scale(1.08,1.22);opacity:.48}}
@keyframes memory-brown{0%,8%,100%{opacity:0}50%{opacity:.26}74%,87%{opacity:.58}}
@media(max-width:880px){
.memory-world::before{filter:saturate(.68) brightness(.78)}
.is-in-memory .memory-world::before{transition-delay:1.1s;transition-duration:1.55s}
.memory-world::after{background:linear-gradient(180deg,#10110e,#15100de6 13%,#15100df1 68%,#10110e)}
.memory-camera{mask-image:linear-gradient(180deg,transparent,#000 14%,#000 75%,transparent)}
.memory-world{background-color:#10110e}
}
@media(prefers-reduced-motion:reduce){.memory-dolly,.is-in-memory .memory-dolly,.is-in-memory .memory-foreground,.is-in-memory .memory-living,.is-in-memory .memory-world::before{transition:none!important}}

/* Alternate the scene with the hero and the binocular section on wide screens. */
.resort-memory.memory-scene{grid-template-columns:minmax(0,1fr)}
@media(min-width:881px){
  .memory-scene .memory-world{transform:scaleX(-1)}
  .memory-scene .memory-copy{justify-self:end}
  .memory-scene.is-in-memory .memory-toggle,.memory-scene .memory-pause{left:5.8%;right:auto}
}
