/* The opening card and video retain the source template's appearance. */
body { overflow: hidden; }
[hidden] { display: none !important; }
.video-resume {
    position: absolute;
    z-index: 9;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 13px 22px;
    border: 1px solid #ffffff88;
    border-radius: 24px;
    background: #181818bb;
    color: #fff;
    font-size: 16px;
    white-space: nowrap;
    cursor: pointer;
}
.photo-gallery {
    position: fixed;
    inset: 0;
    z-index: 100;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #080809;
    color: #fff;
}
.flash-frames { width: 100%; height: 100%; }
.flash-frame { position: absolute; inset: 0; overflow: hidden; background: #080809; }
.flash-frame.is-entering { z-index: 2; animation: memory-arrival 100ms ease-out both; }
.flash-frame.is-leaving { z-index: 1; animation: memory-departure 110ms ease-out both; }
.flash-frame.is-entering .photo-image { animation: memory-focus var(--memory-frame-ms, 400ms) ease-out both; }
.photo-gallery::before, .photo-gallery::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.photo-gallery::before {
    background: radial-gradient(ellipse at 22% 12%, #ffd8b424, transparent 58%),
                radial-gradient(ellipse at 88% 80%, #e3b09112, transparent 52%);
    mix-blend-mode: screen;
}
.photo-gallery::after {
    background: radial-gradient(ellipse at center, transparent 35%, #160c062e 100%);
}
.photo-backdrop {
    position: absolute;
    inset: -5%;
    width: 110%;
    height: 110%;
    object-fit: cover;
    filter: blur(34px) brightness(.32) saturate(.65) sepia(.18);
    transform: scale(1.05);
    pointer-events: none;
}
.photo-image {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: blur(.9px) saturate(.8) contrast(1.1) sepia(.12) brightness(1.025);
    pointer-events: none;
}
.gallery-controls {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: max(24px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: opacity .25s;
    opacity: .2;
}
.photo-gallery:hover .gallery-controls,
.gallery-controls:focus-within { opacity: 1; }
.gallery-controls button, .photo-replay, .music-resume {
    border: 1px solid #ffffff55;
    color: #fff;
    background: #18181877;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    font-family: inherit;
}
.gallery-controls button { border-radius: 50%; width: 38px; height: 38px; font-size: 25px; line-height: 1; }
.gallery-controls .gallery-pause { font-size: 15px; }
.gallery-progress { position: absolute; z-index: 5; left: 0; bottom: 0; height: 3px; width: 100%; background: #ffffff18; }
.gallery-progress span { display: block; width: 100%; height: 100%; background: #ffffffc9; transform: scaleX(0); transform-origin: left; }
.music-resume { position: absolute; z-index: 8; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 28px; padding: 15px 24px; font-size: 17px; white-space: nowrap; }
.photo-replay { position: absolute; z-index: 8; left: 50%; bottom: max(32px, env(safe-area-inset-bottom)); transform: translateX(-50%); border-radius: 24px; padding: 11px 24px; font-size: 16px; }
.gallery-error { position: absolute; z-index: 9; inset: 45% 16px auto; text-align: center; font-size: 17px; color: #fff; }
.gallery-controls button:focus-visible, .music-resume:focus-visible, .photo-replay:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@keyframes memory-arrival { from { opacity: 0; } to { opacity: 1; } }
@keyframes memory-departure { from { opacity: 1; } to { opacity: 0; } }
@keyframes memory-focus {
    0% { filter: blur(4px) saturate(.75) contrast(1.1) sepia(.12) brightness(1.13); }
    34% { filter: blur(.9px) saturate(.8) contrast(1.1) sepia(.12) brightness(1.025); }
    100% { filter: blur(1.2px) saturate(.8) contrast(1.1) sepia(.12) brightness(1.025); }
}
@media (pointer: coarse) { .gallery-controls { opacity: .65; } }
@media (prefers-reduced-motion: reduce) {
    .flash-frame.is-entering, .flash-frame.is-leaving, .flash-frame.is-entering .photo-image { animation: none; }
}