/* The physical camera and the website meet at the optical opening. */
.intro{position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse at 50% 44%,#34312d 0%,#181715 44%,#080909 85%);color:#eee;overflow:hidden;isolation:isolate}
.intro[hidden]{display:none}
.intro-meta,.intro-bottom{position:absolute;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#aaa;z-index:3;letter-spacing:.08em}
.intro-meta{top:6%}.intro-meta span:first-child{font-size:15px;color:#eee}.intro-bottom{bottom:5%}.intro-bottom button{color:white;font-size:12px;min-height:44px;padding:0 12px}.intro-bottom button span{margin-left:12px}
.camera-space{position:absolute;inset:0;display:grid;place-items:center}
.camera-rig{position:absolute;width:min(100vw,1100px,88vh);aspect-ratio:3/2;transform-origin:49.8% 49%;will-change:transform}
.camera-body{display:block;width:100%;height:100%;object-fit:contain;clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,39.3% 33.7%,39.3% 64.3%,60.3% 64.3%,60.3% 33.7%,39.3% 33.7%)}
.flight-caption{position:absolute;left:0;right:0;bottom:12%;text-align:center;pointer-events:none;text-shadow:0 2px 20px #000}
.flight-caption>span{display:block;font-size:9px;letter-spacing:.3em;color:#999;margin-bottom:12px}.flight-caption strong{font-weight:450;font-size:clamp(22px,2.7vw,36px);letter-spacing:.12em}
.playing{animation:flight-reveal 5.65s linear both}.playing .flight-caption{animation:flight-copy 5.5s both}.playing .intro-meta{animation:flight-copy 5.5s both}
@keyframes flight-reveal{0%,96%{opacity:1}100%{opacity:0}}
@keyframes flight-copy{0%,24%{opacity:1;transform:translateY(0)}48%,100%{opacity:0;transform:translateY(-18px)}}
@media(max-width:760px){.camera-rig{width:min(130vw,88vh)}.intro-meta,.intro-bottom{left:6%;right:6%;font-size:9px}.intro-meta span:first-child{font-size:12px}.intro-meta span:last-child{max-width:120px;text-align:right}.flight-caption{bottom:16%}.intro-bottom button{font-size:11px}}
@media(prefers-reduced-motion:reduce){.intro{display:none!important}}

.intro-destination{position:absolute;inset:0;background:#fff;overflow:hidden;pointer-events:none;clip-path:inset(50%);will-change:clip-path}.intro-destination main{outline:none}.camera-space{pointer-events:none}.intro-destination .site-header{position:relative}

/* Hinged lid: the camera stays stationary while its top cover opens. */
.hood-lid{position:absolute;left:35.22%;top:23.9%;width:29.3%;height:45.9%;overflow:hidden;border-radius:4%;transform-origin:50% 0;backface-visibility:visible;box-shadow:0 3px 8px #0008}
.hood-lid img{position:absolute;width:341.3%;max-width:none;height:auto;left:-120.2%;top:-52.07%}
.hood-lid .hood-inner{height:1137.78%;top:-272.22%;opacity:0}
.hood-lid:after{content:"";position:absolute;inset:0;border:1px solid #b9b6ac66;border-radius:inherit;box-shadow:inset 0 2px 2px #fff3,inset 0 -3px 6px #0008;pointer-events:none}
.camera-glass{position:absolute;left:39.3%;top:33.7%;width:21%;height:30.6%;background:radial-gradient(ellipse,#999b8c,#53574d 85%);box-shadow:inset 0 0 12px #0009;opacity:1}
.camera-glass span:before,.camera-glass span:after{content:'';position:absolute;background:#242b23aa;left:50%;top:50%;transform:translate(-50%,-50%)}
.camera-glass span:before{height:1px;width:35%}.camera-glass span:after{width:1px;height:40%}
.playing .hood-lid{animation:hood-open 1.35s .5s cubic-bezier(.32,0,.2,1) both}
.playing .hood-outer{animation:hood-outer 1.35s .5s linear both}
.playing .hood-inner{animation:hood-inner 1.35s .5s linear both}
.playing .camera-glass{animation:ground-glass 5.5s both}
/* Project the upright hood into the photographed overhead view. A literal
   90deg rotation of a zero-thickness image collapses and loses the lid.
   The final 90px inner face matches the original silver rim and hinge. */
@keyframes hood-open{from{transform:scaleY(1)}to{transform:scaleY(.1915)}}
@keyframes hood-outer{0%,20%{opacity:1}80%,100%{opacity:0}}
@keyframes hood-inner{0%,20%{opacity:0}80%,100%{opacity:1}}
@keyframes ground-glass{0%,25%{opacity:1}45%{opacity:.22}62%,100%{opacity:0}}

.waiting{cursor:pointer}
.flight-caption #enter-intro{display:block;margin:18px auto 0;padding:8px 16px;min-height:44px;font-size:12px;letter-spacing:.12em;color:#d9d2c4;pointer-events:auto;border:1px solid #b1a28a55;border-radius:4px;background:#18171488}
.flight-caption #enter-intro span{margin-left:12px}.playing #enter-intro{visibility:hidden}

.mechanical-sleeve{position:absolute;pointer-events:none;overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);border-radius:12%}
.mechanical-sleeve.axis-y{mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);border-radius:20%}
.mechanical-belt{display:flex;width:200%;height:100%;will-change:transform}
.mechanical-belt canvas{display:block;width:50%;height:100%;max-width:none;flex:none}
.axis-y .mechanical-belt{flex-direction:column;width:100%;height:200%}
.axis-y .mechanical-belt canvas{width:100%;height:50%}