/* 3D Photo Album: everything laid over the canvas (storage/gifts/album-3d.html). */
:root{--al-bg1:#3A2418;--al-bg2:#0E0806;--al-accent:#EBCB84;--al-glass:rgba(24,18,16,.6);--al-line:rgba(255,255,255,.14)}
html,body{margin:0;height:100%;overflow:hidden;color:#fff;font-family:'DM Sans',system-ui,sans-serif;-webkit-text-size-adjust:100%;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none}
html{background:var(--al-bg2)}
body{background:radial-gradient(120% 80% at 50% 38%,var(--al-bg1) 0,var(--al-bg2) 72%);transition:background .6s}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
#alStage{position:fixed;inset:0;width:100%;height:100%;display:block;outline:0}
.al-lens{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(110% 85% at 50% 48%,rgba(0,0,0,0) 52%,rgba(8,4,2,.42) 100%)}

.al-load{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:var(--al-bg2)}
.al-load-in{text-align:center}
.al-load svg{width:58px;fill:var(--al-accent);animation:alPulse 1.5s ease-in-out infinite}
.al-load p{margin:12px 0 0;font:600 20px 'Playfair Display',serif;color:#F2E8D8}
@keyframes alPulse{50%{opacity:.45;transform:translateY(-3px)}}

/* the closed album, before it opens */
.al-ticket{position:fixed;z-index:50;left:0;right:0;bottom:0;padding:110px 22px calc(26px + env(safe-area-inset-bottom));text-align:center;background:linear-gradient(to top,rgba(12,7,5,.94) 0,rgba(12,7,5,.72) 50%,rgba(12,7,5,0) 100%);transition:opacity .5s,transform .5s;animation:alRise .9s cubic-bezier(.2,.9,.3,1) both}
@keyframes alRise{from{opacity:0;transform:translateY(22px)}}
.al-ticket.is-gone{opacity:0;transform:translateY(26px);pointer-events:none}
.al-ticket small{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--al-accent)}
.al-ticket h1{margin:10px auto 6px;max-width:560px;font:600 clamp(30px,8.6vw,46px)/1.1 'Playfair Display',serif;color:#FFF7E6;overflow-wrap:anywhere}
.al-ticket p{margin:0;color:rgba(255,247,230,.76);font-size:15px}
.al-ticket button{display:block;width:min(100%,340px);margin:18px auto 0;padding:16px 20px;border-radius:999px;background:linear-gradient(180deg,#F2D78F,#D8AE5A);color:#2A1C0B;font-weight:700;font-size:17px;box-shadow:0 10px 30px rgba(216,174,90,.42);animation:alGlow 2.4s ease-in-out infinite}
.al-ticket button:active{transform:scale(.98)}
@keyframes alGlow{50%{box-shadow:0 10px 44px rgba(242,215,143,.8)}}
.al-ticket em{display:block;margin-top:10px;font-style:normal;font-size:12px;color:rgba(255,247,230,.6)}

/* top row */
.al-top{position:fixed;z-index:20;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 12px 0;pointer-events:none;transition:opacity .4s}
.al-top>*{pointer-events:auto}
.al-chip{display:flex;align-items:center;gap:8px;max-width:calc(100vw - 80px);height:40px;padding:0 15px 0 5px;border-radius:999px;background:var(--al-glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--al-line);font-weight:600;font-size:14px}
.al-chip b{display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:999px;background:var(--al-accent);color:#2A1C0B;font-size:12px;white-space:nowrap}
.al-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.al-ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--al-glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--al-line)}
.al-ic svg{width:21px;height:21px;fill:#fff}

/* the dock */
.al-dock{position:fixed;z-index:20;right:10px;bottom:calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:2px;padding:4px;border-radius:16px;background:var(--al-glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--al-line);transition:opacity .4s}
.al-dock button{width:50px;padding:7px 0 6px;border-radius:13px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;font-weight:600;color:#F2ECE2}
.al-dock button svg{width:19px;height:19px;fill:currentColor}
.al-dock button:active{background:rgba(255,255,255,.14)}
.al-dock button.is-on{background:var(--al-accent);color:#2A1C0B}
.al-dock .al-pop span{font-weight:800;letter-spacing:.04em}
html.al-intro .al-top,html.al-intro .al-dock,html.al-intro .al-nav,html:not(.al-in) .al-top,html:not(.al-in) .al-dock{opacity:0;pointer-events:none}

.al-sheet{position:fixed;z-index:25;right:70px;bottom:calc(22px + env(safe-area-inset-bottom));width:min(calc(100vw - 92px),260px);max-height:62vh;overflow:auto;padding:10px;border-radius:18px;background:rgba(22,16,14,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--al-line);touch-action:pan-y}
.al-sheet h3{margin:4px 6px 8px;font:600 16px 'Playfair Display',serif}
.al-row{display:flex;align-items:center;gap:8px;width:100%;padding:11px 10px;border-radius:11px;text-align:left;font-size:14px;font-weight:500}
.al-row:active,.al-row.is-on{background:rgba(255,255,255,.14)}
.al-row b{font-size:11px;color:var(--al-accent);min-width:22px}
.al-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-row--off{margin-top:6px;border-top:1px solid var(--al-line);border-radius:0 0 11px 11px;opacity:.85}

/* page arrows */
.al-nav{position:fixed;z-index:18;top:50%;width:46px;height:46px;margin-top:-23px;border-radius:50%;display:grid;place-items:center;background:var(--al-glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--al-line);transition:opacity .3s}
.al-nav svg{width:22px;height:22px;fill:#fff}
.al-nav--prev{left:10px}
.al-nav--next{right:72px}
.al-nav:disabled{opacity:.25;pointer-events:none}
@media (max-aspect-ratio: 86/100){
  /* the album stands upright: pages turn upwards, arrows sit under it */
  .al-nav{top:auto;bottom:calc(22px + env(safe-area-inset-bottom));margin-top:0}
  .al-nav--prev{left:calc(50% - 90px)}
  .al-nav--next{right:auto;left:calc(50% + 44px)}
  .al-nav--prev svg{transform:rotate(90deg)}
  .al-nav--next svg{transform:rotate(90deg)}
}
.al-again{position:fixed;z-index:21;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));padding:13px 22px;border-radius:999px;background:linear-gradient(180deg,#F2D78F,#D8AE5A);color:#2A1C0B;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.35)}

.al-hint{position:fixed;z-index:18;left:50%;top:calc(64px + env(safe-area-inset-top));transform:translate(-50%,-6px);width:min(calc(100vw - 32px),360px);margin:0;padding:9px 14px;border-radius:13px;background:var(--al-glass);font-size:12.5px;line-height:1.35;text-align:center;pointer-events:none;opacity:0;transition:opacity .6s,transform .6s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.al-hint.is-on{opacity:1;transform:translate(-50%,0)}
.al-toast{position:fixed;z-index:21;left:50%;top:22%;transform:translate(-50%,8px);max-width:calc(100vw - 40px);padding:10px 20px;border-radius:14px;background:rgba(20,14,12,.72);font:600 18px 'Playfair Display',serif;text-align:center;opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;white-space:nowrap}
.al-toast.is-on{opacity:1;transform:translate(-50%,0)}
.al-empty{position:fixed;z-index:17;left:50%;transform:translateX(-50%);top:calc(60px + env(safe-area-inset-top));margin:0;padding:6px 12px;border-radius:999px;background:rgba(20,14,12,.66);font-size:11.5px;white-space:nowrap;pointer-events:none}

/* one photo, big */
.al-view{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:calc(60px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));background:rgba(10,6,5,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:alFade .25s ease both;touch-action:pan-y}
@keyframes alFade{from{opacity:0}}
.al-view-x{position:absolute;right:14px;top:calc(14px + env(safe-area-inset-top))}
.al-view-f{margin:0;display:flex;flex-direction:column;align-items:center;max-width:min(94vw,900px);min-height:0;padding:12px 12px 16px;background:#FFFDF8;border-radius:4px;box-shadow:0 30px 60px rgba(0,0,0,.5);transform:rotate(-1deg);animation:alPop .35s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes alPop{from{transform:rotate(-4deg) scale(.86);opacity:0}}
.al-view-f img{display:block;max-width:100%;max-height:calc(100dvh - 250px);object-fit:contain}
.al-view-f figcaption{padding-top:10px;text-align:center;color:#3A2E28;max-width:100%}
.al-view-f small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9A7F66}
.al-view-f strong{display:block;font:600 24px/1.15 Caveat,cursive;overflow-wrap:anywhere}
.al-view-f span{display:block;font-size:12px;color:#8A7A62}
.al-view-n{display:flex;align-items:center;gap:14px}
.al-view-n em{font-style:normal;font-size:13px;color:rgba(255,255,255,.75);min-width:56px;text-align:center}

/* the letter, to read properly */
.al-letter{position:fixed;inset:0;z-index:41;display:grid;place-items:center;padding:calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));background:rgba(10,6,5,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:alFade .3s ease both;touch-action:pan-y}
.al-letter-paper{width:min(100%,520px);max-height:100%;overflow:auto;padding:30px 26px 24px;border-radius:6px;background:#FFFBF2 repeating-linear-gradient(transparent 0 33px,rgba(150,110,70,.13) 33px 34px);color:#3B2A20;box-shadow:0 30px 60px rgba(0,0,0,.5);animation:alPop .4s cubic-bezier(.2,.9,.3,1.2) both}
.al-letter-to{margin:0 0 12px;font:italic 600 24px 'Playfair Display',serif}
.al-letter-body{margin:0;white-space:pre-wrap;font:600 23px/34px Caveat,cursive;overflow-wrap:anywhere}
.al-letter-from{margin:16px 0 0;text-align:right;font:italic 600 20px 'Playfair Display',serif}
.al-letter-paper button{display:block;margin:22px auto 0;padding:12px 22px;border-radius:999px;background:#3B2A20;color:#FFF7E6;font-weight:600}

/* without WebGL */
.al-flat{position:fixed;inset:0;z-index:30;overflow:auto;padding:28px 18px 60px;background:#F7F0E3;color:#3B2A20;touch-action:pan-y;-webkit-user-select:text;user-select:text}
.al-flat h1{font:600 30px 'Playfair Display',serif;text-align:center;margin:10px 0 20px}
.al-flat h2{font:600 22px 'Playfair Display',serif;margin:26px 0 12px}
.al-flat figure{margin:0 0 18px;padding:10px 10px 14px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.al-flat img{display:block;width:100%;height:auto}
.al-flat figcaption{padding-top:8px;font:600 20px Caveat,cursive;text-align:center}
.al-flat blockquote{margin:26px 0 8px;white-space:pre-wrap;font:600 22px/1.4 Caveat,cursive}

/* in the builder's phone frame everything is smaller */
html.al-live .al-chip{height:30px;font-size:11px;padding-right:10px}
html.al-live .al-chip b{min-width:24px;height:22px;font-size:10px}
html.al-live .al-ic{width:30px;height:30px}
html.al-live .al-ic svg{width:15px;height:15px}
html.al-live .al-dock{right:6px;bottom:8px;border-radius:12px;padding:2px}
html.al-live .al-dock button{width:38px;padding:4px 0;font-size:8px}
html.al-live .al-dock button svg{width:14px;height:14px}
html.al-live .al-nav{width:32px;height:32px;margin-top:-16px}
html.al-live .al-nav svg{width:16px;height:16px}
html.al-live .al-nav--next{right:52px}
html.al-live .al-sheet{right:50px;bottom:8px;width:min(calc(100vw - 64px),220px)}
html.al-live .al-hint{display:none}
@media (max-aspect-ratio: 86/100){
  html.al-live .al-nav{bottom:8px}
  html.al-live .al-nav--prev{left:calc(50% - 64px)}
  html.al-live .al-nav--next{left:calc(50% + 30px);right:auto}
}
@media (max-height: 480px) and (orientation: landscape){
  .al-dock{flex-direction:row;bottom:10px}
  .al-sheet{bottom:70px}
}
@media (prefers-reduced-motion: reduce){.al-ticket button,.al-load svg{animation:none}}