/* Album: the couple's cover set like an invitation, dissolving into the page and a free-form bento grid.
   Motion follows a wedding invitation: slow, soft and in sequence. Scroll effects are tied to the scroll
   position on the compositor (no scroll handlers); browsers without scroll timelines get still versions. */
.album-page { --ease-soft: cubic-bezier(.22, .61, .36, 1); --inset: 24px; padding-bottom: calc(env(safe-area-inset-bottom) + 120px); timeline-scope: --names; }

/* Cover: the photo fades up slowly; its lower part turns into a pre-blurred copy and dissolves (mask) into
   the page, whose own background is this same photo blurred, so there is no edge to see. */
.album-cover { position: relative; display: grid; align-content: end; min-height: min(80svh, 700px); padding: calc(env(safe-area-inset-top) + 72px) 24px 92px; text-align: center; isolation: isolate; }
.album-cover-media { position: absolute; inset: 0 0 -160px; z-index: -1; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(#000 52%, rgb(0 0 0 / .6) 72%, transparent); mask-image: linear-gradient(#000 52%, rgb(0 0 0 / .6) 72%, transparent); }
.album-cover-intro { position: absolute; inset: 0; animation: cover-in 1800ms var(--ease-soft) both; }
@keyframes cover-in { from { opacity: 0; } }
.album-cover-intro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.album-cover-blur { filter: blur(26px) saturate(115%) brightness(.75); transform: scale(1.12); -webkit-mask-image: linear-gradient(transparent 38%, #000 70%); mask-image: linear-gradient(transparent 38%, #000 70%); }
.album-cover-intro::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / .32), transparent 22%, transparent 48%, rgb(0 0 0 / .4)); }
.album-cover-copy { display: grid; justify-items: center; }

/* Names write on from left to right; the date's hairlines grow outward; the place settles last */
.album-names { margin: 0; font-family: var(--script); font-size: clamp(60px, 18vw, 92px); font-weight: 400; line-height: 1.08; letter-spacing: 0; text-shadow: 0 2px 20px rgb(0 0 0 / .35); view-timeline: --names block; animation: write-on 1700ms 300ms var(--ease-soft) both; }
@keyframes write-on { from { clip-path: inset(-20% 100% -20% 0); opacity: .2; } to { clip-path: inset(-20% -5% -20% 0); opacity: 1; } }
.album-names .amp { display: block; margin: 2px 0 6px; font-size: .42em; line-height: 1; font-style: normal; color: rgb(255 255 255 / .8); }
.album-date { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; font-family: var(--serif); font-size: 17px; letter-spacing: .18em; color: rgb(255 255 255 / .92); font-variant-numeric: lining-nums; }
.album-date span { padding-left: .18em; animation: soft-in 1200ms 1100ms var(--ease-soft) both; }
.album-date::before, .album-date::after { content: ''; width: 36px; height: 1px; background: rgb(255 255 255 / .5); animation: line-in 1000ms 1300ms var(--ease-soft) both; }
.album-date::before { transform-origin: right; }
.album-date::after { transform-origin: left; }
@keyframes line-in { from { transform: scaleX(0); } }
@keyframes soft-in { from { opacity: 0; transform: translateY(10px); } }
.album-place { max-width: 30ch; margin: 10px 0 0; font-family: var(--serif); font-size: 13px; font-variant: all-small-caps; letter-spacing: .2em; line-height: 1.5; color: rgb(255 255 255 / .7); text-wrap: balance; animation: soft-in 1200ms 1500ms var(--ease-soft) both; }

/* Top row, set in from the photo edges: the monogram (left) and order + Pilih (right). Every pill in the
   album shares one size: 44 px high, 14 px text, glass. */
.album-toolbar { position: sticky; top: calc(env(safe-area-inset-top) + 12px); z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -44px var(--inset) 18px; animation: soft-in 900ms 1700ms var(--ease-soft) both; }
.album-actions { display: flex; gap: 8px; }
.album-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-width: 44px; padding: 0 18px; border-radius: var(--pill); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; background: var(--lg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); transition: transform var(--dur-1) var(--ease-out), color 300ms var(--ease-soft), background-color 300ms var(--ease-soft); }
.album-pill:active:not(:disabled) { transform: scale(.95); }
.album-pill[aria-pressed=true] { background: var(--lg-drop); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); color: #fff; font-weight: 600; }
.album-pill[data-filter=popular][aria-pressed=true] { color: #ff6b81; }
.album-pill.album-icon { width: 44px; padding: 0; }
.album-pill .glyph, .album-pill .icon { width: 20px; height: 20px; }
.album-pill.flipped .glyph { transform: scaleY(-1); }
.album-pill:disabled { opacity: .45; }
.album-pill[aria-busy=true] { opacity: .6; }
.album-monogram { display: grid; place-items: center; height: 44px; padding: 0 18px; border-radius: var(--pill); font-family: var(--script); font-size: 26px; line-height: 1; background: var(--lg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); opacity: 0; transform: translateY(6px); transition: opacity 400ms var(--ease-soft), transform 400ms var(--ease-soft); pointer-events: none; }
.album-toolbar.stuck .album-monogram { opacity: 1; transform: none; }
/* Where scroll timelines exist, the names float away and the monogram arrives in step with the scroll itself */
@supports (animation-timeline: view()) {
  .album-cover-media { animation: cover-drift linear both; animation-timeline: scroll(root); animation-range: 0 640px; }
  @keyframes cover-drift { to { transform: translateY(32px); opacity: .6; } }
  .album-cover-copy { animation: copy-away linear both; animation-timeline: --names; animation-range: exit 0% exit 100%; }
  @keyframes copy-away { to { opacity: 0; transform: translateY(-16px); } }
  .album-monogram { transition: none; animation: monogram-in linear both; animation-timeline: --names; animation-range: exit 55% exit 100%; }
  @keyframes monogram-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* Random curated blocks fully tile six logical columns, including the final incomplete block. */
.album-content { min-height: 40svh; container-type: inline-size; }
.album-content > .banner, .album-content > .queue-card { margin: 0 var(--inset) 14px; }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: calc((100cqw - 44px) / 6); gap: 4px; padding: 0 12px; }
.shared-photo { position: relative; min-width: 0; min-height: 0; overflow: hidden; border-radius: 12px; background: rgb(255 255 255 / .06); opacity: 0; transform: translateY(28px) scale(.96); transition: opacity 900ms var(--ease-soft) var(--d, 0ms), transform 900ms var(--ease-soft) var(--d, 0ms); }
.shared-photo.in { opacity: 1; transform: none; }
.shared-photo .photo-open { display: block; width: 100%; height: 100%; padding: 0; transition: transform var(--dur-2) var(--ease-out); }
.shared-photo .photo-open:active { transform: scale(.97); }
.shared-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.shared-photo p { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tile-like { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: var(--pill); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; color: #fff; background: var(--lg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); pointer-events: none; }
.tile-like .glyph { width: 14px; height: 14px; color: #ff6b81; }
.photo-check { position: absolute; right: 8px; top: 8px; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: transparent; background: rgb(0 0 0 / .2); box-shadow: inset 0 0 0 1.5px #fff; transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out); }
.photo-check .glyph { width: 15px; height: 15px; }
.shared-photo:not(.selection-mode) .photo-check { opacity: 0; transform: scale(.6); pointer-events: none; }
.photo-selected .photo-check { background: #fff; color: #000; box-shadow: none; transform: scale(1.08); }
.photo-selected img { transform: scale(.92); border-radius: 8px; }
.album-sentinel { display: grid; place-items: center; height: 56px; }
.album-sentinel.loading::after { content: ''; width: 22px; height: 22px; border: 2px solid rgb(255 255 255 / .2); border-top-color: #fff; border-radius: 50%; animation: spin 800ms linear infinite; }
/* The end of the album: the monogram and a line from the couple */
.album-end { display: grid; justify-items: center; gap: 8px; padding: 32px 24px 8px; text-align: center; animation: fade-in var(--dur-4) var(--ease-out); }
.album-end-mark { font-family: var(--script); font-size: 40px; line-height: 1; color: rgb(255 255 255 / .85); }
.album-end p { margin: 0; font-family: var(--serif); font-size: 15px; font-style: italic; color: var(--graphite); }
.album-page .empty { padding-top: 48px; }
.queue-card .group-action { padding-top: 0; }

/* Dock, set in from the edges: favourites (heart), all photos, my photos, camera. While selecting it becomes
   select all (only under Foto saya) and save. */
.album-floating { position: fixed; z-index: 6; left: 50%; bottom: max(24px, calc(env(safe-area-inset-bottom) + 8px)); transform: translateX(-50%); display: flex; justify-content: center; width: min(calc(100% - var(--inset) * 2), 480px); pointer-events: none; animation: dock-in 900ms 1800ms var(--ease-soft) both; }
@keyframes dock-in { from { opacity: 0; transform: translate(-50%, 24px); } }
.album-floating > * { pointer-events: auto; }
.album-floating.with-tabs { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 78px); }
.album-dock { display: flex; justify-content: center; gap: 8px; }
.album-dock[hidden] { display: none; }
#album-selection-actions { animation: soft-in 400ms var(--ease-soft); }
.album-save { font-weight: 600; }
@media (max-width: 360px) {
  .album-page { --inset: 16px; }
  .album-dock, .album-actions { gap: 6px; }
  .album-pill { padding: 0 12px; font-size: 13px; }
}

/* Viewer: the photo grows out of its tile, then the header and the controls settle in. Both rows sit
   24 px in from the edges, like the album bars; every control is a 44 px glass circle or pill. The viewer
   is a dialog but not a sheet, so it drops the sheets' glass and rim (that rim drew a line under the header). */
.native-viewer { --viewer-chrome: 208px; --ease-soft: cubic-bezier(.22, .61, .36, 1); width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; border-radius: 0; background: rgb(0 0 0 / var(--backdrop, 1)); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: #f5f5f7; overflow: hidden; }
.native-viewer[open] { display: grid; grid-template-rows: calc(env(safe-area-inset-top) + 64px) minmax(0, 1fr) 68px calc(env(safe-area-inset-bottom) + 76px); animation: fade-in 300ms var(--ease-soft); }
.native-viewer.closing { animation: fade-out var(--dur-2) var(--ease-in) forwards; }
.native-viewer::backdrop { background: transparent; }
.viewer-header { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; padding: env(safe-area-inset-top) 24px 0; animation: soft-in 500ms 120ms var(--ease-soft) both; }
.viewer-header > div { display: grid; justify-items: center; gap: 2px; min-width: 0; }
.viewer-header strong { max-width: 100%; font-size: 15px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.viewer-header span { font-size: 12px; color: rgb(235 235 245 / .6); font-variant-numeric: tabular-nums; }
.viewer-round { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #f5f5f7; text-decoration: none; background: var(--lg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); transition: transform var(--dur-1) var(--ease-out); }
.viewer-round:active { transform: scale(.92); }
.viewer-round .glyph { width: 22px; height: 22px; }
.viewer-main { position: relative; min-height: 0; overflow: hidden; }
.viewer-track { position: absolute; inset: 0 0 auto; height: calc(100svh - var(--viewer-chrome) - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-height: 100%; touch-action: none; will-change: transform; }
.viewer-track > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-select: none; pointer-events: none; }
#viewer-previous { left: -100%; }
#viewer-next { left: 100%; }
.viewer-main > #viewer-error { position: absolute; inset: auto 24px 16px; margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--lg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); font-size: 15px; }
.viewer-details { position: absolute; inset: auto 24px 16px; padding: 14px 16px; border-radius: 18px; background: var(--lg-panel); backdrop-filter: var(--lg-panel-blur); -webkit-backdrop-filter: var(--lg-panel-blur); box-shadow: var(--lg-panel-rim); font-size: 15px; line-height: 1.45; animation: soft-in 300ms var(--ease-soft); }
.viewer-thumbnails { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 10px 50%; overflow-x: auto; scrollbar-width: none; animation: fade-in 500ms 200ms var(--ease-soft) both; }
.viewer-thumbnails::-webkit-scrollbar { display: none; }
.viewer-thumbnails button { flex-shrink: 0; width: 34px; height: 46px; min-height: 44px; padding: 0; border-radius: 6px; overflow: hidden; opacity: .45; transition: opacity 300ms var(--ease-soft), transform 300ms var(--ease-soft); }
.viewer-thumbnails [aria-current=true] { opacity: 1; transform: scale(1.12); margin: 0 6px; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .9); }
.native-viewer .viewer-thumbnails img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Footer: like on the left; Bagikan and Simpan as two separate pills on the right */
.native-viewer .viewer-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 24px env(safe-area-inset-bottom); animation: soft-in 500ms 180ms var(--ease-soft) both; }
.viewer-like { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-width: 44px; padding: 0; border-radius: var(--pill); color: #f5f5f7; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--lg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); transition: transform var(--dur-1) var(--ease-out); }
.viewer-like.has-count { padding: 0 16px 0 13px; }
.viewer-like.press:active:not(:disabled) { transform: scale(.97); opacity: 1; }
.viewer-like .glyph { width: 20px; height: 20px; transition: color var(--dur-2) var(--ease-out); }
.viewer-like[aria-pressed=true] { background: var(--lg-drop); }
.viewer-like[aria-pressed=true] .glyph { color: #ff6b81; }
#viewer-likes:empty { display: none; }
.viewer-buttons { display: flex; gap: 8px; }
.viewer-button { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border-radius: var(--pill); color: #fff; font-size: 14px; font-weight: 500; background: var(--lg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); box-shadow: var(--lg-rim); transition: transform var(--dur-1) var(--ease-out); }
.viewer-button:active { transform: scale(.95); }
:is(.viewer-button, .viewer-like)[aria-busy=true] { opacity: .5; pointer-events: none; }
.viewer-menu { position: absolute; z-index: 2; top: calc(env(safe-area-inset-top) + 60px); right: 24px; min-width: 220px; padding: 6px; border-radius: 20px; background: var(--lg-panel); backdrop-filter: var(--lg-panel-blur); -webkit-backdrop-filter: var(--lg-panel-blur); box-shadow: var(--lg-panel-rim), 0 16px 40px rgb(0 0 0 / .45); transform-origin: top right; animation: menu-in var(--dur-3) var(--ease-out); }
@keyframes menu-in { from { opacity: 0; transform: scale(.9); } }
.viewer-menu :is(button, a) { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 14px; text-align: left; font-size: 15px; color: #f5f5f7; text-decoration: none; }
.viewer-menu :is(button, a):active { background: rgb(255 255 255 / .1); }
.viewer-menu [hidden] { display: none; }

@media (orientation: landscape) and (max-height: 600px) {
  .native-viewer[open] { --viewer-chrome: 168px; grid-template-rows: 56px minmax(0, 1fr) 52px 60px; }
  .viewer-thumbnails { padding-block: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shared-photo { opacity: 1; transform: none; }
  .viewer-header, .native-viewer .viewer-actions, .viewer-thumbnails, .album-cover-intro, .album-names, .album-date span, .album-date::before, .album-date::after, .album-place, .album-toolbar, .album-floating, .album-cover-media, .album-cover-copy { animation: none; }
}