.galeri{view-timeline:--galeri block;position:relative}.galeri-stage{background:var(--color-neutral-300);--w:clamp(140px, 17cqw, 280px);--h:calc(var(--w) * 1.35);height:100svh;min-height:640px;position:relative;overflow:clip;container-type:size}.galeri-dim{background:var(--color-primary-700);position:absolute;inset:0}.galeri-hint{z-index:1;text-align:center;opacity:0;flex-direction:column;align-items:center;gap:4px;margin:0;display:flex;position:absolute;inset:12cqh 0 auto}.galeri-book-wrap{z-index:1;perspective:1800px;place-items:center;display:grid;position:absolute;inset:-4cqh 0 0}.galeri-book{width:calc(var(--w) * 2);height:var(--h);transform-style:preserve-3d;position:relative;transform:translate(0)rotateX(18deg)rotate(0)}.galeri-board{top:-8px;left:calc(var(--w) - 3px);width:calc(var(--w) + 11px);height:calc(var(--h) + 16px);background:var(--color-primary-700);border-radius:0 12px 12px 0;position:absolute}.galeri-pages{top:0;left:var(--w);width:var(--w);height:var(--h);background:linear-gradient(90deg, #00000014, transparent 14%), var(--color-neutral-100);box-shadow:2px 2px 0 var(--color-neutral-500), 4px 3px 0 var(--color-neutral-600), 6px 4px 0 var(--color-neutral-500);border-radius:0 6px 6px 0;position:absolute;transform:translateZ(1px)}.galeri-ribbon{background:var(--color-secondary-400);clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);width:14px;height:44px;position:absolute;bottom:-26px;right:22%}.galeri-cover{top:-8px;left:calc(var(--w) - 3px);width:calc(var(--w) + 11px);height:calc(var(--h) + 16px);transform-origin:0;transform-style:preserve-3d;position:absolute;transform:translateZ(3px)rotateY(-178deg)}.galeri-cover-front,.galeri-cover-inside{backface-visibility:hidden;position:absolute;inset:0}.galeri-cover-front{background:linear-gradient(90deg, var(--color-primary-700) 0 12px, var(--color-primary-600) 12px 18px, var(--color-primary-500) 18px);border-radius:0 12px 12px 0}.galeri-cover-frame{border:1.5px solid var(--color-primary-300);text-align:center;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:6px;display:flex;position:absolute;inset:16px 16px 16px 30px}.galeri-cover-frame .font-display{font-size:calc(var(--w) * .19);line-height:1.2}.galeri-cover-flower{aspect-ratio:536/588;width:52%;height:auto}.galeri-cover-inside{background:var(--color-primary-600);border-radius:12px 0 0 12px;transform:rotateY(180deg)}.galeri-page-left{background:linear-gradient(270deg, #00000014, transparent 14%), var(--color-neutral-100);border-radius:6px 0 0 6px;position:absolute;inset:8px 3px 8px 8px}.galeri-page-content{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:12%;display:flex}.galeri-page-right{position:absolute;inset:0}.galeri-glow{z-index:2;width:calc(var(--w) * 3.4);aspect-ratio:1;pointer-events:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-56%)scale(1.2)}.galeri-glow-inner{opacity:.2;position:absolute;inset:0}.galeri-core{background:radial-gradient(circle, var(--color-neutral-100) 0 5%, color-mix(in oklab, var(--color-primary-100) 80%, transparent) 14%, color-mix(in oklab, var(--color-primary-200) 40%, transparent) 30%, color-mix(in oklab, var(--color-primary-300) 12%, transparent) 48%, transparent 66%);border-radius:50%;position:absolute;inset:0}.galeri-rays{background:repeating-conic-gradient(color-mix(in oklab, var(--color-primary-100) 35%, transparent) 0deg 4deg, transparent 4deg 17deg);position:absolute;inset:-20%;-webkit-mask:radial-gradient(circle,#000 8%,#0000 60%);mask:radial-gradient(circle,#000 8%,#0000 60%)}.galeri-spark{background:radial-gradient(circle, var(--color-neutral-100), var(--color-primary-200) 55%, transparent 70%);opacity:0;border-radius:50%;width:8px;height:8px;position:absolute;top:50%;left:50%}.galeri-photos{z-index:3;pointer-events:none;margin:0;padding:0;list-style:none;position:absolute;inset:0}.galeri-photo{--x:var(--tx);--y:var(--ty);width:clamp(96px,13cqw,210px);transform:translate(-50%, -50%) translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqh)) rotate(calc(var(--rot) * 1deg)) scale(1);position:absolute;top:48%;left:50%}.galeri-photo figure{background:var(--color-neutral-100);border-radius:4px;margin:0;padding:7% 7% 0;box-shadow:0 16px 28px -14px #00000080}.galeri-photo img{border-radius:2px;height:auto;display:block}.galeri-photo figcaption{text-align:center;padding:6px 0 10px}@keyframes galeri-enter{0%{opacity:0;transform:translateY(80px)scale(.85)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes galeri-fade-in{0%{opacity:0}to{opacity:1}}@keyframes galeri-fade-out{0%{opacity:1}to{opacity:0}}@keyframes galeri-book-open{0%{transform:translateX(calc(var(--w) * -.5)) rotateX(0deg) rotateZ(-4deg)}to{transform:translate(0)rotateX(18deg)rotate(0)}}@keyframes galeri-cover-open{0%{transform:translateZ(3px)rotateY(0)}to{transform:translateZ(3px)rotateY(-178deg)}}@keyframes galeri-glow-in{0%{opacity:0;transform:translate(-50%,-56%)scale(.3)}to{opacity:1;transform:translate(-50%,-56%)scale(1.2)}}@keyframes galeri-glow-dim{0%{opacity:1}to{opacity:.2}}@keyframes galeri-rays-spin{0%{transform:rotate(0)}to{transform:rotate(160deg)}}@keyframes galeri-spark{0%{opacity:0;transform:translate(0)}50%{opacity:1}to{opacity:0;transform:translate(calc(var(--sx) * 1.2cqw), calc(var(--sy) * 1.2cqh))}}@keyframes galeri-photo-throw{0%{opacity:0;transform:translate(-50%, -50%) translate(0, 0) rotate(calc((var(--rot) + var(--spin)) * 1deg)) scale(.2);animation-timing-function:cubic-bezier(.2,.7,.3,1)}10%{opacity:1}55%{transform:translate(-50%, -50%) translate(calc(var(--x) * .8cqw), calc(var(--y) * .8cqh - 10cqh)) rotate(calc((var(--rot) + var(--spin) * .25) * 1deg)) scale(.85);animation-timing-function:ease-in-out}to{opacity:1;transform:translate(-50%, -50%) translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqh)) rotate(calc(var(--rot) * 1deg)) scale(1)}}@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()) and (animation-range:entry){.galeri{height:400svh}.galeri-stage{min-height:0;position:sticky;top:0}.galeri-book-wrap{animation:linear both galeri-enter;animation-timeline:--galeri;animation-range:entry 50%}.galeri-hint{opacity:1;animation:linear both galeri-fade-out;animation-timeline:--galeri;animation-range:entry 70% contain 6%}.galeri-dim{animation:linear both galeri-fade-in;animation-timeline:--galeri;animation-range:contain 7% contain 32%}.galeri-book{animation:ease-in-out both galeri-book-open;animation-timeline:--galeri;animation-range:contain 5% contain 36%}.galeri-cover{animation:ease-in-out both galeri-cover-open;animation-timeline:--galeri;animation-range:contain 5% contain 36%}.galeri-glow{animation:ease-out both galeri-glow-in;animation-timeline:--galeri;animation-range:contain 24% contain 47%}.galeri-glow-inner{animation:linear both galeri-glow-dim;animation-timeline:--galeri;animation-range:contain 83% contain 96%}.galeri-rays{animation:linear both galeri-rays-spin;animation-timeline:--galeri;animation-range:contain 24%}.galeri-spark{animation:linear both galeri-spark;animation-timeline:--galeri;animation-range:contain calc(28% + var(--sd)) contain calc(58% + var(--sd))}.galeri-photo{animation:linear both galeri-photo-throw;animation-timeline:--galeri;animation-range:contain var(--s) contain var(--e)}.galeri-page-content>*{animation:linear both galeri-fade-in;animation-timeline:--galeri;animation-range:contain 83% contain 96%}}}@media (max-width:767px) and (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()) and (animation-range:entry){.galeri{height:320svh}}}@container (max-width:700px){.galeri-book-wrap,.galeri-glow{--w:42cqw;--h:calc(var(--w) * 1.35)}.galeri-photo{--x:var(--tx-sm);--y:var(--ty-sm)}.galeri-page-content{gap:8px;padding:10%}.galeri-page-left h2{font-size:calc(var(--w) * .17);line-height:1.3}.galeri-page-content p{font-size:11px;line-height:15px}.galeri-page-right p{display:none}.galeri-page-right a{padding:8px 10px;font-size:12px;line-height:18px}}