:root {
    color-scheme: dark;
    --night: #0d1010;
    --pearl: #f0f1f9;
    --quiet: #acb2c6;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; width: 100%; min-height: 100%; overflow: hidden; background: var(--night); }
body { color: var(--pearl); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:disabled { cursor: default; opacity: .35; }
:focus-visible { outline: 2px solid #c7d6ff; outline-offset: 5px; }
.experience { position: relative; isolation: isolate; width: 100%; height: 100vh; height: 100svh; min-height: 0; overflow: clip; background-color: var(--scene-base, var(--night)); transition: background-color 3.2s ease; }
.experience::after { position: absolute; content: ""; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(#0006, transparent 23%, transparent 65%, #0009), radial-gradient(ellipse at center, transparent 25%, #0004 85%); }
.ambient-light { position: absolute; z-index: 0; inset: -20%; pointer-events: none; animation: ambient-drift 22s ease-in-out infinite alternate; }
.ambient-tone { position: absolute; inset: 0; opacity: .75; transition: color 3.2s ease; }
.ambient-tone:nth-child(1) { color: var(--scene-glow-1, #303839); background: radial-gradient(ellipse at 28% 36%, currentColor, transparent 48%); }
.ambient-tone:nth-child(2) { color: var(--scene-glow-2, #333637); background: radial-gradient(ellipse at 77% 64%, currentColor, transparent 46%); }
.ambient-tone:nth-child(3) { color: var(--scene-glow-3, #303735); background: radial-gradient(ellipse at 56% 80%, currentColor, transparent 40%); }
.light-dust { position: absolute; z-index: 4; inset: 0; pointer-events: none; opacity: .45; background: radial-gradient(circle at 8% 32%, #ecf2ffba 0 1px, transparent 2px), radial-gradient(circle at 24% 72%, #d6e0ff8c 0 1px, transparent 2px), radial-gradient(circle at 69% 14%, #d6e0ff80 0 1px, transparent 2px), radial-gradient(circle at 88% 43%, #e1deffad 0 1px, transparent 2px), radial-gradient(circle at 76% 83%, #d6e0ff8c 0 1px, transparent 2px), radial-gradient(circle at 48% 18%, #d6e0ff75 0 1px, transparent 2px), radial-gradient(circle at 13% 82%, #d6e0ff80 0 1px, transparent 2px), radial-gradient(circle at 94% 67%, #d6e0ffa1 0 1px, transparent 2px); animation: starlight 8s ease-in-out infinite alternate; }
.light-sweep { position: absolute; z-index: 7; width: 35%; height: 160%; top: -30%; left: -60%; pointer-events: none; background: linear-gradient(105deg, transparent 30%, #dcddff04 45%, #f5f0ff08 50%, transparent 66%); transform: rotate(-16deg); animation: light-passing 32s ease-in-out infinite; }
.experience-header { position: absolute; top: max(28px, env(safe-area-inset-top)); left: 36px; right: 36px; z-index: 30; display: grid; grid-template-columns: 1fr minmax(0, 2fr) 1fr; align-items: center; gap: 24px; }
.experience-header h1 { margin: 0; text-align: center; font-size: 18px; font-weight: 450; line-height: 1.3; letter-spacing: -.02em; text-wrap: balance; }
[data-experience-controls] { opacity: 1; transition: opacity .18s ease; }
.experience[data-controls="hidden"] [data-experience-controls] { opacity: 0; pointer-events: none; transition-duration: .6s; }
.back-to-album, .quiet-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; width: fit-content; font-size: 12px; color: #d6daea; white-space: nowrap; }
.back-to-album:hover, .quiet-button:hover, .open-photo:hover { color: white; }
.quiet-button { border: 0; background: transparent; }
.fullscreen-button { justify-self: end; }
.photo-field { position: absolute; z-index: 5; inset: 0; }
.field-photo { position: absolute; left: 0; top: 0; width: 480px; aspect-ratio: var(--ratio, 1.45); z-index: var(--z, 1); appearance: none; padding: 0; border: 0; background: transparent; transform: translate(var(--x, 50vw), var(--y, 50svh)) translate(-50%, -50%) rotate(var(--angle, 0deg)) scale(var(--scale, .25)); opacity: var(--depthopacity, .32); transition: transform var(--travel-duration, 4200ms) cubic-bezier(.4,0,.2,1), opacity var(--travel-duration, 4200ms) ease; }
.field-photo-image { display: block; width: 100%; height: auto; border: 0; border-radius: 4px; box-shadow: 0 14px 48px #0006; animation: photo-drift var(--duration, 20s) ease-in-out var(--delay, 0s) infinite alternate; }
.experience[data-scene="collage"] .field-photo:not(.is-near):not(.is-retiring) .field-photo-image { animation: none; transform: translate(calc(var(--drift-x) * -.7), calc(var(--drift-y) * -.7)) rotate(calc(var(--sway) * -1)) scale(.94); }
.field-photo:hover, .field-photo:focus-visible { opacity: 1; }
.field-photo:focus-visible { z-index: 50; outline: none; }
.field-photo:focus-visible .field-photo-image { animation-play-state: paused; outline: 2px solid #c7d6ff; outline-offset: 5px; }
.field-photo.is-loading:not(.is-near), .field-photo.is-unavailable { opacity: 0; pointer-events: none; }
.experience[data-scene="collage"] { background-color: var(--night); transition: none; }
/* Paint each palette once, then composite its opacity instead of repainting
   three full-screen gradients on every frame of a color transition. */
.experience[data-scene="collage"] .ambient-light { inset: 0; animation: none; }
.ambient-palette { position: absolute; inset: 0; opacity: 0; background-color: var(--scene-base, var(--night)); will-change: opacity; }
.experience[data-scene="collage"] .ambient-tone { opacity: .5; transition: none; }
.experience[data-scene="collage"] .field-photo:not(.is-near):not(.is-retiring) { transition: none; }
.experience[data-scene="collage"] .field-photo-image { box-shadow: none; }
.experience[data-scene="collage"] .field-photo.is-near,
.experience[data-scene="collage"] .field-photo.is-retiring { will-change: transform, opacity; }
.experience[data-scene="collage"] .field-photo.is-wandering { will-change: transform; }
.experience[data-scene="collage"] .is-near .field-photo-image,
.experience[data-scene="collage"] .is-retiring .field-photo-image { box-shadow: 0 10px 24px #0005; }
.experience[data-scene="collage"] .playback { background: #1b2027e6; backdrop-filter: none; }
.experience[data-scene="collage"] .light-dust { animation: none; opacity: .24; }
.experience[data-scene="collage"] .light-sweep { display: none; }
/* Keep the world and cards in 3D; depth dimming belongs on the leaf image. */
.experience[data-scene="cylinder"] { transition: background-color 14s linear; }
.experience[data-scene="cylinder"] .ambient-light { animation-duration: 60s; }
.experience[data-scene="cylinder"] .ambient-tone { opacity: .5; transition: color 14s linear; }
.experience[data-scene="cylinder"] .light-dust { animation-duration: 24s; }
.experience[data-scene="cylinder"] .light-sweep { --sweep-opacity: .3; animation-duration: 70s; }
.experience[data-scene="cylinder"] .photo-field { perspective: var(--cloud-perspective, 1200px); perspective-origin: 50% 50%; touch-action: none; cursor: grab; }
.experience[data-scene="cylinder"][data-dragging="true"] .photo-field,
.experience[data-scene="cylinder"][data-dragging="true"] .field-photo { cursor: grabbing; }
.photo-cloud { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.experience[data-scene="cylinder"] .field-photo {
    left: -240px; top: calc(-240px / var(--ratio, 1.45)); z-index: auto; opacity: 1;
    transform-style: preserve-3d; backface-visibility: visible; -webkit-backface-visibility: visible;
    transform: translate3d(0, var(--cloud-y), 0) rotateY(var(--cloud-theta)) translateZ(var(--cloud-radius)) rotateZ(var(--angle)) scale3d(var(--scale), var(--scale), var(--scale));
    transition: none; cursor: grab;
}
.experience[data-scene="cylinder"] .field-photo-image {
    user-select: none; -webkit-user-drag: none; backface-visibility: visible; -webkit-backface-visibility: visible;
    opacity: 1; box-shadow: none; animation: none; filter: grayscale(0) brightness(1) contrast(1);
    transform: scale(1); transition: transform 4.5s cubic-bezier(.4, 0, .2, 1), filter 1.2s ease, opacity 1.8s ease;
}
.experience[data-scene="cylinder"] .field-photo[data-facing="back"] .field-photo-image { filter: grayscale(1) brightness(.6) contrast(.85); }
.experience[data-scene="cylinder"] .is-near .field-photo-image { transform: scale(var(--focus-scale, 1)); box-shadow: 0 10px 32px #0004; }
.cloud-motion {
    /* Rasterize each photo as one opaque plane. Its own depth still moves in
       the 3D world, without nested transparent planes fighting over overlaps. */
    width: 100%; transform-style: flat; backface-visibility: visible; -webkit-backface-visibility: visible;
    animation: cloud-wander var(--float-duration, 60s) cubic-bezier(.45, 0, .55, 1) var(--float-delay, 0s) infinite;
}
.experience[data-scene="cylinder"] .field-photo.is-loading .field-photo-image { opacity: 0; }
.experience[data-scene="cylinder"] .field-photo:not(.is-drifting) .cloud-motion,
.experience[data-scene="cylinder"] .field-photo:not(.is-in-view) .cloud-motion,
.experience[data-scene="cylinder"] .field-photo:focus-visible .cloud-motion { animation-play-state: paused; }
.experience[data-scene="cylinder"] .field-photo.is-loading,
.experience[data-scene="cylinder"] .field-photo.is-unavailable { visibility: hidden; pointer-events: none; }
.experience-status { position: absolute; z-index: 22; left: 20px; right: 20px; top: 49%; margin: 0; text-align: center; font-size: 13px; color: var(--quiet); pointer-events: none; }
.experience-status:empty { display: none; }
.experience[data-state="ready"] .experience-status,
.experience[data-state="transitioning"] .experience-status,
.experience[data-state="changing"] .experience-status { left: 0; right: auto; top: 0; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.experience-footer { position: absolute; z-index: 30; left: 40px; right: 40px; bottom: max(45px, calc(env(safe-area-inset-bottom) + 24px)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; }
.photo-detail { min-width: 0; }
.photo-name { margin: 0 0 5px; font-size: 12px; line-height: 1.4; color: #dadeee; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-count { margin: 0; font-size: 10px; color: #adb5cd; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.playback { border: 1px solid #f1f3ff29; border-radius: 40px; background: linear-gradient(145deg, #d6dcff12, #aab7ed06); box-shadow: 0 8px 40px #0003, inset 0 1px #fff09; overflow: hidden; backdrop-filter: blur(16px); }
.playback-controls { display: flex; gap: 4px; padding: 5px; align-items: center; }
.icon-button, .motion-button { display: inline-flex; align-items: center; justify-content: center; height: 44px; border: 0; border-radius: 30px; background: transparent; color: #eff1ff; }
.icon-button { width: 44px; }
.motion-button { gap: 9px; min-width: 102px; padding: 0 16px; font-size: 12px; }
.motion-symbol { height: 11px; width: 9px; border-inline: 2px solid currentColor; }
.motion-button[aria-label^="Play"] .motion-symbol, .motion-button[aria-label^="Resume"] .motion-symbol { width: 0; height: 0; border: 0; border-block: 6px solid transparent; border-left: 9px solid currentColor; }
.icon-button:hover, .motion-button:hover { background: #e3e8ff12; }
.open-photo { justify-self: end; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 12px; color: #d2d8eb; }
.open-photo span { font-size: 17px; color: #c8d6ff; }
.experience-hint { position: absolute; z-index: 25; bottom: max(10px, env(safe-area-inset-bottom)); left: 16px; right: 16px; margin: 0; color: #b1b9d48c; text-align: center; font-size: 10px; letter-spacing: .025em; }
.no-script { position: absolute; z-index: 35; inset: 40% 15% auto; padding: 24px; background: #141d30; text-align: center; border-radius: 8px; }
.no-script a { text-decoration: underline; text-underline-offset: 4px; }
[data-motion="paused"] *, [data-motion="reduced"] * { animation-play-state: paused !important; }
.experience:not([data-scene="cylinder"])[data-motion="paused"] .field-photo,
.experience:not([data-scene="cylinder"])[data-motion="paused"] .field-photo-image,
[data-motion="reduced"] * { transition: none !important; }
@keyframes ambient-drift { from { transform: translate(-2%, -1%) rotate(-3deg); } to { transform: translate(3%, 2%) rotate(5deg); } }
@keyframes photo-drift {
    0% { transform: translate(calc(var(--drift-x, 45px) * -.7), calc(var(--drift-y, 32px) * -.7)) rotate(calc(var(--sway, 3deg) * -1)) scale(.94); }
    48% { transform: translate(calc(var(--drift-x, 45px) * .4), calc(var(--drift-y, 32px) * -.3)) rotate(calc(var(--sway, 3deg) * .3)) scale(1); }
    100% { transform: translate(var(--drift-x, 45px), var(--drift-y, 32px)) rotate(var(--sway, 3deg)) scale(var(--zoom, 1.06)); }
}
@keyframes cloud-wander {
    0%, 100% { transform: translate3d(calc(var(--float-x) * -.65), calc(var(--float-y) * -.45), calc(var(--float-in) * -1)) rotate(calc(var(--sway) * -1)) scale(.97); }
    34% { transform: translate3d(calc(var(--float-x) * .75), calc(var(--float-y) * -.8), calc(var(--float-out) * .3)) rotate(calc(var(--sway) * .35)) scale(1); }
    62% { transform: translate3d(calc(var(--float-x) * .2), calc(var(--float-y) * .7), var(--float-out)) rotate(var(--sway)) scale(1.025); }
}
@keyframes starlight { from { opacity: .25; transform: translateY(-3px); } to { opacity: .65; transform: translateY(5px); } }
@keyframes light-passing { 0%, 45% { transform: translateX(0) rotate(-16deg); opacity: 0; } 55% { opacity: var(--sweep-opacity, 1); } 85%, 100% { transform: translateX(520%) rotate(-16deg); opacity: 0; } }
@media (max-width: 700px) {
    .experience-header { left: 20px; right: 20px; top: max(16px, env(safe-area-inset-top)); grid-template-columns: 1fr auto; gap: 12px; }
    .experience-header h1 { grid-column: 1 / -1; grid-row: 2; padding: 0 12px; font-size: 17px; }
    .back-to-album, .quiet-button { font-size: 11px; }
    .fullscreen-button { grid-column: 2; grid-row: 1; }
    .fullscreen-button span { display: none; }
    .experience-footer { left: 22px; right: 22px; bottom: max(42px, calc(env(safe-area-inset-bottom) + 28px)); grid-template-columns: 1fr 1fr; row-gap: 18px; }
    .playback { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
    .photo-detail { grid-column: 1; grid-row: 2; }
    .open-photo { grid-column: 2; grid-row: 2; font-size: 11px; gap: 6px; }
    .photo-name { font-size: 11px; }
    .experience-hint { font-size: 9px; }
}
@media (max-height: 520px) and (orientation: landscape) {
    .experience-header { top: 8px; left: 20px; right: 20px; grid-template-columns: 1fr minmax(0, 2fr) 1fr; gap: 12px; }
    .experience-header h1 { grid-column: 2; grid-row: 1; font-size: 15px; }
    .fullscreen-button { grid-column: 3; }
    .experience-footer { left: 22px; right: 22px; bottom: max(16px, env(safe-area-inset-bottom)); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; }
    .photo-detail { grid-column: 1; grid-row: 1; }
    .playback { grid-column: 2; grid-row: 1; }
    .open-photo { grid-column: 3; grid-row: 1; }
    .experience-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}