/* One large, scattered memory reel. The full-screen photograph docks in its first slot. */
.morph-hero { height:360svh; background:var(--maroon);--hero-card:min(76vw,calc((100svh - 210px)*.72),520px);--hero-gap:112px;--scatter-room:calc(100svh - var(--hero-card)*1.25); }
.morph-hero .hero-pin { height:100svh;background:var(--maroon); }
.morph-row { position:absolute;inset:0 auto 0 0;display:flex;width:max-content;height:100%;padding:0 max(26px,calc((var(--hero-viewport,100vw) - var(--hero-card))/2));will-change:transform;z-index:3; }
.morph-cycle { position:relative;height:100%;display:flex;align-items:center;gap:var(--hero-gap);padding-right:var(--hero-gap); }
.morph-slot,.morph-static-lead,.morph-side-card { width:var(--hero-card);flex:0 0 var(--hero-card);aspect-ratio:4/5; }
.morph-slot { display:block; }
.morph-static-lead { display:none; }
.morph-side-card { position:relative;z-index:4;--paper-angle:-2deg;translate:0 var(--memory-y,0px); }
.memory-1 { --memory-y:calc(-1 * min(72px,var(--scatter-room)*.22));--paper-angle:-7deg; }
.memory-2 { --memory-y:min(56px,calc(var(--scatter-room)*.17));--paper-angle:5deg; }
.memory-3 { --memory-y:calc(-1 * min(24px,var(--scatter-room)*.07));--paper-angle:-3deg; }
.memory-4 { --memory-y:min(82px,calc(var(--scatter-room)*.25));--paper-angle:8deg; }
.memory-5 { --memory-y:calc(-1 * min(58px,var(--scatter-room)*.18));--paper-angle:-5deg; }
.memory-6 { --memory-y:min(14px,calc(var(--scatter-room)*.04));--paper-angle:3deg; }
.memory-7 { --memory-y:min(46px,calc(var(--scatter-room)*.14));--paper-angle:-6deg; }
.memory-8 { --memory-y:calc(-1 * min(72px,var(--scatter-room)*.22));--paper-angle:4deg; }
.morph-side-card:hover .photo-paper,.morph-side-card:focus-visible .photo-paper { transform:rotate(0deg) scale(1.04); }
.morph-lead-copy { --paper-angle:-2deg;translate:0 0!important; }
.memory-accents { position:absolute;inset:0;pointer-events:none;z-index:2; }
.memory-accents .memory-swirl { width:clamp(190px,24vw,360px);height:auto;left:13%;top:68%;opacity:.8;rotate:-12deg; }
.memory-accents .memory-swirl-last { left:68%;top:5%;rotate:17deg; }
.memory-accents .memory-pennant { width:clamp(150px,18vw,220px);left:34%;top:3%;rotate:-9deg;transform:none; }
.memory-accents .memory-pennant-last { left:81%;top:69%;rotate:11deg; }
.morph-card { position:absolute;inset:0 auto auto 0;width:100%;height:100%;margin:0;padding:0;z-index:15;transform-origin:center;will-change:left,top,width,height,transform;--frame-left:0%;--frame-top:0%;--frame-width:100%;--frame-height:100%;--paper-opacity:0;--caption-opacity:0; }
.morph-card:disabled { opacity:1;cursor:default; }
.morph-card .photo-paper { height:100%;aspect-ratio:auto;background:transparent;transform:none;filter:none; }
.morph-card .photo-paper:after { opacity:var(--paper-opacity); }
.morph-card .polaroid-picture { left:var(--frame-left);top:var(--frame-top);width:var(--frame-width);height:var(--frame-height); }
.morph-card .polaroid-picture:after { opacity:var(--paper-opacity); }
.morph-card .polaroid-picture picture,.morph-card .polaroid-picture img { display:block;width:100%;height:100%;object-fit:cover;object-position:var(--hero-photo-x,50%) 64%; }
.morph-card .polaroid-caption { opacity:var(--caption-opacity);font-size:clamp(18px,calc(var(--hero-card)*.072),34px); }
.morph-card .polaroid-caption small,.morph-lead-copy .polaroid-caption small { font-size:clamp(9px,calc(var(--hero-card)*.025),12px); }
.morph-card.is-docked .photo-paper { filter:drop-shadow(1px 3px 2px #24091828) drop-shadow(4px 13px 10px #24091822); }
.morph-card.is-docked:hover .photo-paper,.morph-card.is-docked:focus-visible .photo-paper { transform:rotate(3deg) scale(1.04); }
.morph-heading { position:absolute;left:32px;bottom:88px;z-index:20;color:#fff;font:500 clamp(30px,4vw,58px)/1.05 var(--display);pointer-events:none; }
.morph-hero .hero-tools { z-index:25; }
.morph-hero .hero-tools .motion-toggle { background:#21091770; }
.morph-hero .hero-tools>span:first-child { text-shadow:0 1px 6px #000; }
.morph-row .polaroid-caption { font-size:clamp(18px,calc(var(--hero-card)*.072),34px); }
.morph-row .polaroid-caption small { font-size:clamp(9px,calc(var(--hero-card)*.025),12px); }
.morph-row .polaroid-picture picture { display:block;width:100%;height:100%; }
@media(min-width:1600px){ .morph-hero { --hero-gap:132px; } }
@media(max-width:1199px) and (min-width:810px){ .morph-hero { --hero-gap:90px; } }
@media(max-width:809px){
 .morph-hero { --hero-card:min(82vw,calc((100svh - 180px)*.66),380px);--hero-gap:68px; }
 .morph-card { --hero-photo-x:50%; }
 .morph-heading { left:22px;bottom:90px;font-size:32px; }
 .memory-accents .memory-pennant { width:135px; }
}
@media(max-height:600px){
 .morph-hero { --hero-card:min(66vw,calc((100svh - 120px)*.68),360px);--hero-gap:56px; }
 .morph-row .polaroid-caption,.morph-card .polaroid-caption { font-size:16px; }
 .morph-row .polaroid-caption small,.morph-card .polaroid-caption small { font-size:7px; }
 .memory-accents .memory-pennant { width:100px; }
}
@media(prefers-reduced-motion:reduce){
 .morph-hero { height:auto!important; }
 .morph-hero .hero-pin { height:auto;position:relative;overflow:visible;display:flex;flex-direction:column; }
 .morph-card { order:-1;flex:0 0 100svh;position:relative!important;left:0!important;top:0!important;width:100%!important;height:100svh!important;transform:none!important;--frame-left:0%!important;--frame-top:0%!important;--frame-width:100%!important;--frame-height:100%!important;--paper-opacity:0!important;--caption-opacity:0!important; }
 .morph-card .photo-paper { transform:none!important;filter:none!important; }
 .morph-row { position:relative;height:100svh;max-width:100%;width:100%;overflow-x:auto;opacity:1!important;transform:none!important;padding:0 26px; }
 .morph-slot { display:none; }
 .morph-side-card { opacity:1!important;transform:none!important; }
 .morph-heading { top:80svh;bottom:auto;opacity:1!important; }
 .morph-hero .hero-tools { display:flex;top:calc(100svh - 54px);bottom:auto; }
 .morph-hero .hero-progress { display:none; }
}
