/* Only transform/opacity animate; the library initializes in parallel. */
#gallery-startup{--startup-duration:4000ms;--startup-camera-duration:1000ms;position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#101923;color:#ecf2f4;font:15px system-ui,sans-serif;pointer-events:none;opacity:1;transition:opacity .28s ease;overflow:hidden}
#gallery-startup.startup-ready{opacity:0}
.startup-mark{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;max-width:100%}
.startup-film{position:relative;width:min(340px,78vw,52svh);height:min(340px,78vw,52svh)}
.startup-photographer{position:absolute;inset:0;background-image:url('./startup-photographer.webp');background-size:600% 400%;clip-path:inset(2% 2% 1% 2%);background-repeat:no-repeat;opacity:0;will-change:transform,opacity}
.startup-lift{background-position:0% 0%;animation:startup-lift var(--startup-duration) cubic-bezier(.4,0,.2,1) both}

.startup-flash{position:absolute;left:76%;top:48%;width:68px;height:68px;margin:-34px;border-radius:50%;background:radial-gradient(circle,#fff8df 0%,#ffddacb0 22%,#ffbe6940 48%,transparent 72%);opacity:0;animation:startup-flash var(--startup-camera-duration) ease-out both}
.startup-photo{position:absolute;left:50%;top:50%;width:40%;height:40%;margin:-20%;border:2px solid #ffc1bd;border-radius:20%;background:center/cover url('./startup-landscape.webp');box-shadow:0 0 18px #f698a529,0 12px 28px #0004;opacity:0;will-change:transform,opacity}

.startup-photo-two{border-color:#daa6ff;}
.startup-photo-three{border-color:#ffa879;}
.startup-final-logo{position:absolute;left:22%;top:22%;width:56%;height:56%;border-radius:28%;object-fit:contain;opacity:0}
.startup-mark strong{font-size:clamp(30px,3vw,36px);font-weight:600;letter-spacing:-.6px;animation:startup-title .5s ease-out both}.startup-mark span{color:#afc1c9;font-size:14px;letter-spacing:.08em;animation:startup-title .65s ease-out both}
.startup-skip{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));pointer-events:auto;font:12px system-ui;color:#c8d6dc;background:#ffffff08;border:1px solid #ffffff20;border-radius:20px;padding:10px 16px;cursor:pointer;transition:background .15s}.startup-skip:hover{background:#ffffff15}.startup-skip:focus-visible{outline:2px solid #c3d8dc;outline-offset:4px}
/* Keep each pose moving through the handoff; stagger the cards along curved arcs. */
@keyframes startup-lift{0%{opacity:0;transform:translate3d(0,12px,0) scale(.96)}10%{opacity:1;transform:translate3d(0,0,0) scale(1)}42%{opacity:1;transform:translate3d(0,-3px,0) scale(1.02)}58%,100%{opacity:0;transform:translate3d(0,-10px,0) scale(.98)}}

@keyframes startup-flash{0%,54%{opacity:0;transform:scale(.35)}60%{opacity:.7;transform:scale(1)}78%,100%{opacity:0;transform:scale(1.5)}}




@keyframes startup-title{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#gallery-startup{transition:none}.startup-photographer,.startup-photo,.startup-flash{display:none}.startup-final-logo{opacity:1;animation:none}.startup-mark strong,.startup-mark span{animation:none}.startup-skip{display:none}}

#gallery-startup.startup-static .startup-photographer,#gallery-startup.startup-static .startup-photo,#gallery-startup.startup-static .startup-flash{display:none}
#gallery-startup.startup-static .startup-final-logo{opacity:1;animation:none}

/* One 24-pose sprite replaces the two-image crossfade. */
.startup-click{display:none}

/* The finished logo becomes the original loader without replacing the stage. */
.startup-loading-ring{position:absolute;left:22%;top:22%;width:56%;height:56%;opacity:0;transform:scale(.94);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.startup-loading-ring:before{content:'';position:absolute;inset:-20px;border:1px solid #b6d8dd40;border-radius:38%;opacity:0}
.startup-waiting .startup-loading-ring{opacity:1;transform:scale(1)}
.startup-waiting .startup-loading-ring:before{animation:startup-ring 1.6s ease-out infinite}
.startup-waiting .startup-final-logo{animation:startup-breathe 2.4s ease-in-out infinite;opacity:1}
@keyframes startup-ring{0%{opacity:0;transform:scale(.96)}15%{opacity:.7}100%{opacity:0;transform:scale(1.22)}}
@keyframes startup-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){.startup-loading-ring{display:none}.startup-waiting .startup-final-logo{animation:none}}

/* Additional intros use the same palette and compositor-friendly motion. */
.startup-special{position:absolute;opacity:0;will-change:transform,opacity}
.startup-special .startup-special{opacity:1}
.startup-scene-photo{left:50%;top:50%;width:40%;height:40%;margin:-20%;border:2px solid #ffc1bd;border-radius:20%;background:center/cover url('./startup-landscape.webp');box-shadow:0 12px 26px #0004}
.startup-ribbon-photo:nth-of-type(3n){border-color:#daa6ff}
.startup-instant-camera{left:17%;top:7%;width:66%;height:48%;z-index:2}
.startup-instant-camera svg{display:block;width:100%;height:100%}
.startup-print{left:29%;top:30%;width:42%;height:49%;padding:4% 4% 12%;box-sizing:border-box;background:#f8eee4;border-radius:6%;box-shadow:0 10px 25px #0004;z-index:1}
.startup-print-image,.startup-print-develop{inset:0;position:relative;width:100%;height:100%;border-radius:4%;background:center/cover url('./startup-landscape.webp')}
.startup-print-develop{position:absolute;inset:8% 9% 25%;width:auto;height:auto;background:#e9dace}
.startup-lens{left:18%;top:18%;width:64%;height:64%;box-sizing:border-box;border:12px solid #728693;border-radius:50%;background:#182d40;box-shadow:inset 0 0 0 6px #c2d3d370,0 18px 36px #0005;overflow:hidden}
.startup-iris{inset:0;z-index:2;border-radius:50%;overflow:hidden}
.startup-iris-leaf{inset:0;clip-path:polygon(50% 50%,0 0,100% 0);background:linear-gradient(135deg,#667992,#273b50);transform-origin:center;z-index:2}
.startup-lens-view{inset:9%;border-radius:50%;background:center/cover url('./startup-landscape.webp');box-shadow:inset 0 0 0 2px #efc4f3}
.startup-sunrise{left:12%;top:12%;width:76%;height:76%;border:2px solid #efb3b9;border-radius:22%;overflow:hidden;background:linear-gradient(#76558a,#eaa59a 60%,#ffcd8d);box-shadow:0 15px 30px #0004}
.startup-sun{left:37%;top:18%;width:26%;height:26%;border-radius:50%;background:#ffe7ab;box-shadow:0 0 30px #ffda8a70}
.startup-hills{inset:0;overflow:hidden;border-radius:inherit}
.startup-hills svg{width:100%;height:100%;display:block}
.startup-book{left:23%;top:18%;width:61%;height:65%;transform-style:preserve-3d}
.startup-book-back{inset:-3%;border-radius:9%;background:linear-gradient(135deg,#536f89,#c58bba);box-shadow:0 15px 30px #0005;transform:translateZ(-2px)}
.startup-book-page{inset:0;transform-origin:left center;border-radius:4% 9% 9% 4%;background:#f6e9db;backface-visibility:hidden;box-shadow:inset 8px 0 14px #54465122,0 2px 6px #0003;transform-style:preserve-3d}
.startup-page-image{inset:12% 10% 22%;border-radius:10%;background:center/cover url('./startup-landscape.webp')}
.startup-book-cover{background:linear-gradient(140deg,#324b67,#9e6aaa);box-shadow:inset 7px 0 4px #ffffff15,0 2px 8px #0004}
.startup-book-cover .startup-page-image{inset:24% 20%;border:2px solid #efc8dc}
.startup-album-photo{z-index:4}
#gallery-startup[data-startup-variant="shoot"] .startup-lift,#gallery-startup[data-startup-variant="shoot"] .startup-flash{animation:none}
#gallery-startup:not([data-startup-variant="photographer"]):not([data-startup-variant="shoot"]) .startup-photographer,#gallery-startup:not([data-startup-variant="photographer"]):not([data-startup-variant="shoot"]) .startup-flash{display:none}
#gallery-startup.startup-static .startup-special{display:none}
@media(prefers-reduced-motion:reduce){.startup-special{display:none}}

.startup-book-page .startup-special{backface-visibility:hidden}

/* Material and lighting pass: shared highlights, quieter depth and a clearer silhouette. */
.startup-film:before{content:'';position:absolute;inset:5%;border-radius:50%;background:radial-gradient(ellipse,#63899016,transparent 70%);pointer-events:none}
.startup-photo,.startup-scene-photo{border-width:1px;box-shadow:inset 0 1px 0 #ffffff60,0 10px 24px #0005;border-radius:18%}
.startup-photo:after,.startup-scene-photo:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,#ffffff24,transparent 38%,#00000010);pointer-events:none}
.startup-instant-camera{left:12%;top:-7%;width:76%;height:70%;background:center/contain no-repeat url('./startup-camera.webp')}
.startup-print{background:linear-gradient(120deg,#fff8ee,#eadfd2);box-shadow:inset 0 1px 0 #fff,0 14px 24px #0004}
.startup-lens{border:10px solid #718491;background:radial-gradient(circle,#293548,#101c29);box-shadow:inset 0 0 0 2px #d7e4ea80,inset 0 0 0 7px #263645,0 14px 32px #0005}
.startup-lens:after{content:'';position:absolute;inset:1%;border-radius:50%;border:1px solid #d4dfef60;background:linear-gradient(130deg,#ffffff14,transparent 45%);pointer-events:none;z-index:4}
.startup-iris-leaf{background:linear-gradient(135deg,#9daebb,#415365 55%,#1d2b3a);box-shadow:inset 0 1px 0 #cfe0e5}
.startup-lens-view{box-shadow:inset 0 0 0 2px #d9c2df,inset 0 0 18px #17142960}
.startup-sunrise{background:linear-gradient(#444a75,#bd8193 50%,#ffd3a0);border-color:#dec0c480;box-shadow:inset 0 1px 0 #ffffff55,0 16px 30px #0004}
.startup-clouds{inset:0;background:radial-gradient(ellipse 45% 3% at 25% 26%,#fff4df38,transparent),radial-gradient(ellipse 40% 2% at 75% 35%,#fff4df24,transparent)}
.startup-hills svg{filter:drop-shadow(0 -1px 0 #ffddbc25)}
.startup-book-back{background:linear-gradient(125deg,#53717d,#26394f 50%,#8d6b94)}
.startup-book-page{background:linear-gradient(90deg,#d9ccbb,#fff4e7 9%,#f4e8d9 94%,#d3c7b8);box-shadow:inset 3px 0 5px #503d4b25,0 2px 5px #0003}
.startup-book-cover{background:linear-gradient(120deg,#54757b,#2d455d 40%,#6d557e);box-shadow:inset 2px 2px 0 #d7e4dd45,inset -2px -2px 0 #071b2c50,0 4px 12px #0004}
.startup-book-cover:after{content:'';position:absolute;inset:6%;border:1px solid #d6c6b660;border-radius:7%;pointer-events:none}
.startup-page-image{background-size:125%;box-shadow:0 2px 4px #594a5b25;border:1px solid #fff9}
.startup-final-logo{box-shadow:0 12px 30px #0003}
#gallery-startup[data-startup-variant="shoot"] .startup-lift{z-index:2}
#gallery-startup[data-startup-variant="shoot"] .startup-photo{z-index:1}
.startup-final-logo{z-index:4}

.startup-film{perspective:900px}
.startup-scene-photo,.startup-photo{box-shadow:inset 0 1px 0 #ffffff90,1px 2px 0 #b2a4b1,2px 4px 0 #54495f,0 14px 22px #0005}
.startup-lens{background:radial-gradient(circle,#19283b,#0b1727);border-color:#617683;box-shadow:inset 0 0 0 2px #d7e4ea80,inset 0 0 0 7px #263645,3px 4px 0 #354957,6px 8px 0 #182939,0 18px 30px #0005}
.startup-iris{box-shadow:inset 0 0 22px #0008}
.startup-sun{background:radial-gradient(circle at 35% 28%,#fff6d5,#ffde9d 50%,#dc9279);box-shadow:inset -4px -5px 12px #c7775025,0 0 35px #ffda8a55}
.startup-hills{background:center bottom/100% auto no-repeat url('./startup-terrain.webp')}
.startup-hills svg{display:none}
.startup-sunrise{box-shadow:inset 0 1px 0 #ffffff70,2px 3px 0 #a3869d,4px 6px 0 #4d3e60,0 18px 30px #0005}
.startup-book-back{box-shadow:1px 2px 0 #d6c9ba,2px 4px 0 #b1a99e,3px 6px 0 #53606b,0 16px 26px #0005}
.startup-print{box-shadow:inset 0 1px 0 #fff,1px 2px 0 #d6cabc,2px 3px 0 #c1b4aa,0 14px 24px #0004}
/* Fine illustrated contours keep the dimensional objects close to the character's style. */
.startup-instant-camera{filter:drop-shadow(1px 1px 0 #bdd9dc80) drop-shadow(0 8px 10px #0003)}
.startup-photo,.startup-scene-photo{border-color:#e3c5c8;border-width:1.5px}
.startup-photo-two{border-color:#d9c4e5}.startup-photo-three{border-color:#e8c7ad}
.startup-lens:after{border:1.5px solid #d0e0e080;background:linear-gradient(130deg,#ffffff0b,transparent 45%)}
.startup-book-cover:after{border-color:#ddcbbb80}
.startup-sunrise{border:1.5px solid #ddc7d8}

.startup-lens{border:0;background:center/contain no-repeat url("./startup-lens.webp");box-shadow:none;overflow:visible}
.startup-lens:after{display:none}.startup-iris{inset:26%}.startup-lens-view{inset:27%}

/* The camera's illustrated slot is at 13% / 77%, with a five-degree slope. */
.startup-instant-camera{left:12%;top:-12%;width:76%;height:76%;background:none;filter:none;overflow:visible;transform-style:preserve-3d}
.startup-camera-surface{inset:0;background:center/contain no-repeat url('./startup-camera.webp');filter:drop-shadow(0 8px 10px #0003);z-index:2}
.startup-print-slot{left:13%;top:77%;width:62%;height:76%;overflow:hidden;transform:rotate(5deg);transform-origin:top left;z-index:3}
.startup-print-slot .startup-print{left:0;top:0;width:100%;height:88%;padding:8% 8% 23%;border-radius:4%;z-index:1;box-shadow:inset 0 1px 0 #fff,1px 2px 0 #d6cabc,2px 3px 0 #c1b4aa,0 8px 14px #0003}
.startup-print-slot:after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(#21191890,transparent);z-index:4;pointer-events:none}
/* A raised rounded tile preserves the original artwork, with actual perspective and a bevel. */
.startup-final-logo{transform:perspective(800px) rotateX(10deg) rotateY(-14deg);transform-style:preserve-3d;background:#354557;box-shadow:inset 0 1px 0 #fff9,1px 2px 0 #ccd4dc,2px 4px 0 #899cae,3px 6px 0 #4e6279,5px 9px 0 #26394e,0 18px 28px #0005}
.startup-final-logo img{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit}
.startup-final-logo:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,#ffffff30,transparent 40%,#081b3320);box-shadow:inset 0 1px 0 #ffffff90,inset 0 0 0 1px #dbe3ed55;pointer-events:none}
@keyframes startup-breathe{0%,100%{transform:perspective(800px) rotateX(10deg) rotateY(-14deg) scale(1)}50%{transform:perspective(800px) rotateX(10deg) rotateY(-14deg) scale(1.025)}}
/* Illustrated characters get the same gentle camera angle as the other scene objects. */
@keyframes startup-lift{0%{opacity:0;transform:translate3d(0,12px,0) perspective(800px) rotateX(8deg) rotateY(-12deg) scale(.96)}10%{opacity:1;transform:translate3d(0,0,0) perspective(800px) rotateX(8deg) rotateY(-12deg) scale(1)}42%{opacity:1;transform:translate3d(0,-3px,0) perspective(800px) rotateX(8deg) rotateY(-12deg) scale(1.02)}58%,100%{opacity:0;transform:translate3d(0,-10px,0) perspective(800px) rotateX(8deg) rotateY(-12deg) scale(.98)}}

.startup-loading-ring{transform:perspective(800px) rotateX(10deg) rotateY(-14deg) scale(.94)}
.startup-waiting .startup-loading-ring{transform:perspective(800px) rotateX(10deg) rotateY(-14deg) scale(1)}