/* Gentle idle drift; scroll or Enter drives the cloud passage. */
html.cloud-entry-active:not(.cloud-entry-revealing), html.cloud-entry-active:not(.cloud-entry-revealing) body { overflow: hidden; overscroll-behavior: none; }
#cloud-entry { --entry-progress: 0; position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; background: #d6e0ea; transition: opacity 260ms ease; touch-action: none; }
#cloud-entry.is-nocturne { background: #101d30; color: #e5edf5; }
#cloud-entry.is-armed { background: transparent; }
#cloud-entry.is-exit { opacity: 0; pointer-events: none; }
.cloud-flight-sky, .cloud-flight-bank, .cloud-flight-mist, .cloud-flight-volume { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cloud-flight-sky { background: radial-gradient(ellipse at 50% 52%,#e9bd9210,transparent 48%),linear-gradient(#d1deec,#f3f3f2); }
.is-nocturne .cloud-flight-sky { background: linear-gradient(#101d30,#17263a); }
.cloud-flight-bank { background: url('assets/hero/sky-near.webp') center / cover; mask-image: radial-gradient(ellipse at center, #000 15%, transparent 65%); transform-origin: center; }
.is-nocturne .cloud-flight-bank { background-image: url('assets/hero/sky-near-night.webp'); }
.cloud-flight-mist { background: #e7ecf2; opacity: 0; }
.is-nocturne .cloud-flight-mist { background: #30465f; }
.cloud-flight-sky { z-index: 0; }
.cloud-entry-stars { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; display: none; }
#cloud-entry.is-nocturne .cloud-entry-stars { display: block; }
.cloud-flight-bank { z-index: 1; }
.cloud-sky-plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .48; mask-image: linear-gradient(#000 38%, #0003 78%, transparent); }
.is-nocturne .cloud-sky-plate { mask-image: none; }
.cloud-flight-volume { image-rendering: auto; z-index: 1; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); will-change: transform; animation: cloud-idle-drift 7.2s linear infinite; }
.has-volume .cloud-flight-bank, .has-volume .cloud-flight-mist { display: none; }
.cloud-entry-prompt, .cloud-entry-skip { z-index: 3; }
/* An orbit, not a bob. The two-stop version reciprocated along one diagonal
   and, being ease-in-out, held still at each end twice a cycle — that pause and
   reversal is what reads as a bounce. x and y now run a quarter cycle apart, so
   the bank circles at constant speed: sampled every 45deg and interpolated
   linearly, which sits ~0.5px off a true circle. 6.5px over 7.2s is 5.7px/s
   against the old 22px peak-to-peak at 15px/s. */
@keyframes cloud-idle-drift {
  0%,100% { transform: translate3d(0,calc(var(--entry-rest,1) * -6.5px),0); }
  12.5% { transform: translate3d(calc(var(--entry-rest,1) * 4.6px),calc(var(--entry-rest,1) * -4.6px),0); }
  25% { transform: translate3d(calc(var(--entry-rest,1) * 6.5px),0,0); }
  37.5% { transform: translate3d(calc(var(--entry-rest,1) * 4.6px),calc(var(--entry-rest,1) * 4.6px),0); }
  50% { transform: translate3d(0,calc(var(--entry-rest,1) * 6.5px),0); }
  62.5% { transform: translate3d(calc(var(--entry-rest,1) * -4.6px),calc(var(--entry-rest,1) * 4.6px),0); }
  75% { transform: translate3d(calc(var(--entry-rest,1) * -6.5px),0,0); }
  87.5% { transform: translate3d(calc(var(--entry-rest,1) * -4.6px),calc(var(--entry-rest,1) * -4.6px),0); }
}
#hero-title[tabindex="-1"]:focus { outline: none; }
/* The prompt belongs to the still frame. Once the camera starts moving it
   should be gone before the zoom reads, not fading through it. */
.cloud-entry-prompt { position: absolute; inset: auto 20px 10%; display: grid; justify-items: center; gap: 12px; color: #14283f; --prompt-fade: clamp(0, 1 - var(--entry-progress, 0) * 7, 1); opacity: calc(var(--prompt-fade) * var(--prompt-fade)); transform: translateY(calc(var(--entry-progress, 0) * -18px)) scale(calc(1 - var(--entry-progress, 0) * .45)); transform-origin: 50% 40%; will-change: opacity, transform; }
.cloud-entry-prompt > span { font: 11px var(--mono, monospace); letter-spacing: .2em; }
.cloud-entry-prompt p { margin: 0; font: 13px var(--body, sans-serif); opacity: .7; }
.cloud-entry-enter, .cloud-entry-skip { padding: 12px 20px; border: 1px solid #62768e33; border-radius: 28px; background: #f6f9fc99; color: #14283f; font: 14px var(--body, sans-serif); cursor: pointer; }
.cloud-entry-enter { position:relative;padding:3px 12px 17px;border:0;border-radius:4px;background:transparent;color:inherit;font-size:14px;letter-spacing:.025em;box-shadow:none; }
.cloud-entry-progress {width:160px;height:2px;background:#62768e26;overflow:hidden;border-radius:2px;}
.cloud-entry-progress > span {display:block;width:100%;height:100%;background:currentColor;opacity:.65;transform:scaleX(var(--loading-progress,0));transform-origin:left;}
.cloud-entry-enter span { display: inline-block; margin-left: 16px; transition: transform 200ms ease; }
.cloud-entry-enter:hover span { transform: translateY(3px); }
.cloud-entry-skip { position: absolute; right: 22px; top: 22px; padding: 10px 16px; background: transparent; font-size: 12px; }
.is-nocturne .cloud-entry-prompt, .is-nocturne .cloud-entry-skip { color: #e5edf5; }
#cloud-entry button:focus-visible { outline: 2px solid #3468ac; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { #cloud-entry { display: none; } }

.cloud-entry-stars {z-index:0;}