/* The LCD is precisely registered to the photographed camera's rear screen. */
#camera-intro{padding:26px 20px 24px;color:#f8eee2;border:0;grid-template-rows:auto minmax(0,1fr) auto;align-items:center;justify-items:center;overflow:hidden;background:#100b10;font-family:var(--sans,Arial,sans-serif);height:100dvh}
#camera-intro::backdrop{background:transparent}
.camera-heading{text-align:center;position:relative;z-index:2;align-self:start}
.camera-heading>span{font:500 .75rem/1.6 var(--sans);letter-spacing:.24em;color:#c3aaa8}
.camera-heading h1{font:400 clamp(1.75rem,3.5vw,3rem)/1.1 var(--serif);letter-spacing:-.025em;margin:14px 0 0}
.camera-heading h1 br{display:none}.camera-heading h1 em{font-weight:400;color:#c7a795}
.camera-scene{display:grid;place-items:center;width:100%;height:100%;min-height:0;position:relative;perspective:1200px}
.camera-object{position:relative;width:min(1080px,94vw,81svh);aspect-ratio:3/2;transform-origin:0 0;will-change:transform;perspective:1100px;transform-style:preserve-3d}
.camera-rig{position:absolute;inset:0;transform-origin:40.23% 56.15%;transform-style:preserve-3d;transition:transform .28s ease-out;will-change:transform}
.camera-body-shade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;transform:translateZ(1px)}
.camera-body{width:100%;height:100%;display:block;pointer-events:none;user-select:none}
.camera-lcd{position:absolute;left:14.19%;top:31.84%;width:52.08%;height:48.63%;border-radius:3px;overflow:hidden;background:#120f14;box-shadow:inset 0 0 20px #0008;transform:translateZ(2px)}
.camera-screen-world{position:absolute;inset:0;background:#710f20;opacity:0;display:grid;place-items:center;transition:opacity .75s}
.camera-screen-world img{width:56%;height:auto;filter:none}
.camera-screen-ui{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6%;background:radial-gradient(ellipse at center,#33352a22,transparent 75%);text-align:center}
#camera-phase{font:500 clamp(1rem,2.7vw,2.15rem)/1.2 var(--sans);letter-spacing:.12em;margin:14px 0 8px}
.camera-meter{font:400 clamp(1rem,2vw,1.6rem)/1.1 var(--sans);font-variant-numeric:tabular-nums;color:#d7c4b0}
.camera-meter>span:last-child{font-size:.7em;margin-left:.2em}
.camera-progress{width:100%;height:2px;background:#ece3c426;margin:14px 0 9px;overflow:hidden}
.camera-progress i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:#f1d2aa;box-shadow:0 0 10px #e0b179;transition:transform .22s linear}
.camera-actions{position:relative;z-index:2;text-align:center;width:min(100%,440px);padding-bottom:env(safe-area-inset-bottom)}
#camera-message{font-size:.9375rem;line-height:1.5;color:#c3aaa8;min-height:1.5em;margin:0 0 15px}
#camera-enter{width:min(100%,310px);min-height:52px;padding:12px 22px;display:inline-flex;align-items:center;justify-content:space-between;gap:25px;border-radius:3px;border:1px solid #f5dfc542;background:#f5dfc508;font:500 1rem/1.5 var(--sans);color:#f8eee2;transition:background .3s,color .3s,border-color .3s,transform .3s}
#camera-enter:disabled{color:#b4a5a2;cursor:progress}
#camera-intro.is-ready #camera-enter{background:#f2dfc6;color:#24151b;border-color:#f2dfc6;box-shadow:0 6px 32px #d2a66a16}
#camera-intro.is-ready #camera-enter:hover{transform:translateY(-2px);background:#fff1df}
#camera-intro.is-ready .camera-lcd{background:#21151a}
#camera-intro.is-ready #camera-phase{color:#f3dfc6}
.camera-recovery{display:flex;justify-content:center;gap:22px;min-height:26px;margin-top:10px}
.camera-recovery button{font-size:.875rem;line-height:1.5;color:#c3aaa8;text-decoration:underline;text-underline-offset:4px;min-height:32px}
#camera-intro [hidden]{display:none!important}
#camera-intro.is-entering{background:#000!important;transition:background .55s}
#camera-intro:not(.is-ready) #camera-enter{visibility:hidden}
#camera-intro.is-entering .camera-rig{transition:none}
#camera-intro.is-entering .camera-screen-world{opacity:1}
#camera-intro.is-entering .camera-screen-ui{opacity:0;transition:opacity .24s}
#camera-intro.is-entering .camera-heading,#camera-intro.is-entering .camera-actions{opacity:0;transition:opacity .25s;pointer-events:none}
#camera-intro.is-entering .camera-lcd{box-shadow:none;border-radius:0}
@media(min-width:1100px) and (min-height:800px){.camera-object{width:min(1100px,100svh)}.camera-heading h1{margin-top:20px}}
@media(max-width:700px){
 #camera-intro{padding:24px 8px 16px;grid-template-rows:auto minmax(0,1fr) auto}
 .camera-heading{padding-top:env(safe-area-inset-top)}.camera-heading h1{font-size:2rem;line-height:1.15;margin-top:16px}.camera-heading h1 br{display:block}
 .camera-object{width:min(112vw,85svh);flex-shrink:0}
 .camera-screen-ui{padding:6%}
 #camera-phase{font-size:clamp(.95rem,4.2vw,1.5rem);letter-spacing:.09em;margin:9px 0 5px}
 .camera-meter{font-size:1rem}.camera-progress{margin:8px 0 5px}
 .camera-actions{padding-inline:20px}#camera-message{font-size:.875rem}.camera-recovery{margin-top:6px}
}
@media(max-height:530px){#camera-intro{padding:12px;grid-template-columns:1fr 1.3fr;grid-template-rows:1fr auto}.camera-heading{align-self:end}.camera-heading h1{font-size:1.65rem}.camera-heading h1 br{display:block}.camera-scene{grid-column:2;grid-row:1/3}.camera-object{width:70svh}.camera-actions{align-self:start;padding-top:16px}#camera-message{font-size:.875rem}#camera-phase{font-size:1.05rem}.camera-meter{font-size:1rem}}
@media(prefers-reduced-motion:reduce){.camera-rig{transform:none!important;transition:none}.camera-screen-world,#camera-enter,.camera-progress i{transition:none}}