/* ---------- intro ---------- */
.intro {
  position: fixed; inset: 0; z-index: 20; overflow: hidden; background: #0d0a08;
  cursor: pointer;
  transition: opacity 1.5s cubic-bezier(.4, 0, .2, 1), visibility 0s 1.5s;
}
.intro.gone { opacity: 0; visibility: hidden; pointer-events: none; }
/* the next couple of frames sit at near-zero opacity so they are already painted when their cut lands */
.reel { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.flash { position: absolute; inset: 0; background: #fff8ec; opacity: 0; pointer-events: none; }
.flash.pop { animation: pop 260ms ease-out; }
.flash.soft { animation: pop 140ms ease-out; opacity: 0; }
@keyframes pop { 0% { opacity: .22; } 100% { opacity: 0; } }
.veil { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgb(0 0 0 / .45));; transition: opacity 1.6s; }
.diving .veil { opacity: 0; }
.wash { position: absolute; inset: 0; background: var(--cream); opacity: 0; pointer-events: none; transition: none; }


.loading {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: min(160px, 40vw); height: 1px; transform: translate(-50%, -50%);
  background: rgb(245 236 220 / .15); overflow: hidden; transition: opacity .4s;
}
.loading i { position: absolute; inset: 0; background: #f5ecdc; transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .3s; }
.started .loading { opacity: 0; }