/* A hovering UFO and a readable holographic command panel — homepage only. */
.has-alien-wallpaper #loader-screen { animation: arrivalLoaderFallback .35s 3s forwards; }
@keyframes arrivalLoaderFallback { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.cinematic-hero {
    display: grid;
    justify-items: center;
    align-content: center;
    min-height: max(860px, 100svh);
    padding: 190px 24px 98px;
    perspective: 1600px;
}
.cinematic-hero .hero-scene { inset: 76px 0 0; opacity: .65; }
.cinematic-hero .hero-grid-plane { opacity: .16; }
.hero-command {
    position: relative;
    z-index: 8;
    width: min(760px, 100%);
    transform-style: preserve-3d;
    animation: commandLevitation 8s ease-in-out infinite;
}
.hero-command-tilt {
    position: relative;
    transform: rotateX(var(--command-rx, 0deg)) rotateY(var(--command-ry, 0deg));
    transform-style: preserve-3d;
}
.hero-command::after {
    content: '';
    position: absolute;
    bottom: -43px;
    left: 15%;
    right: 15%;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0,255,126,.3), transparent 70%);
    filter: blur(14px);
    pointer-events: none;
    animation: commandShadow 8s ease-in-out infinite;
}
.cinematic-hero .hero-copy {
    width: 100%;
    padding: 32px 38px 28px;
    text-align: center;
    border: 1px solid rgba(195,255,228,.26);
    border-top-color: rgba(157,255,199,.68);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(4,17,13,.88), rgba(1,7,7,.82) 62%, rgba(9,30,23,.84));
    box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 48px rgba(0,255,126,.09), inset 0 1px rgba(230,255,245,.13), inset 0 -1px rgba(0,255,126,.22);
    backdrop-filter: blur(19px) saturate(1.16);
}
.hero-command .hero-copy::before {
    top: -1px;
    left: 22%;
    width: 56%;
    background: linear-gradient(90deg, transparent, #b2ffd2, transparent);
    box-shadow: 0 0 20px rgba(0,255,126,.65);
}
.hero-command .hero-copy::after {
    width: 50px;
    right: calc(50% - 25px);
    bottom: -6px;
    height: 3px;
    border: 0;
    border-radius: 6px;
    background: #b8ffd5;
    box-shadow: 0 0 15px #00ff82;
}
.hero-command .hero-badge--earthlings { margin: 0 auto 12px; }
.hero-command .earthlings-wordmark { width: 180px; }
.hero-command .hero-eyebrow { justify-content: center; margin-bottom: 21px; font-size: 8px; letter-spacing: .24em; }
.hero-command .hero-eyebrow::before { width: 19px; }
.hero-command .hero-title {
    margin: 0 0 20px;
    text-align: center;
    font-size: clamp(42px, 6.1vw, 84px);
    line-height: 1;
    letter-spacing: -.055em;
}
.hero-command .hero-title-green { margin-top: 13px; font-size: .52em; letter-spacing: .1em; }
.hero-command .hero-subtitle { margin: 0 auto 25px; max-width: 570px; font-size: 14px; line-height: 1.7; }
.hero-command .hero-actions { justify-content: center; gap: 9px; margin-bottom: 24px; }
.hero-command .btn-red-outline, .hero-command .btn-glass { min-height: 46px; padding: 13px 19px; font-size: 9px; border-radius: 6px; }
.hero-command .btn-red-outline { color: #dbffed; border-color: #68ffab; }
.hero-command .hero-hud-strip { border-radius: 6px; overflow: hidden; text-align: left; background: rgba(0,255,126,.025); }

.hero-vessel {
    position: absolute;
    z-index: 10;
    left: 50%;
    top: -184px;
    width: 340px;
    height: 194px;
    transform: translateX(-50%) translateZ(38px);
    pointer-events: none;
}
.hero-vessel-craft {
    position: absolute;
    top: -21px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 12px 17px rgba(0,0,0,.75)) drop-shadow(0 0 14px rgba(0,255,138,.35));
    transform-origin: 50% 54%;
    animation: vesselBank 12s ease-in-out infinite;
}
.hero-vessel-beam {
    position: absolute;
    top: 119px;
    bottom: -12px;
    left: 11%;
    right: 11%;
    clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg, rgba(129,255,190,.38), rgba(0,255,133,.07) 75%, transparent);
    mix-blend-mode: screen;
    mask-image: linear-gradient(90deg, transparent, #000 25% 75%, transparent);
    animation: vesselBeam 5s ease-in-out infinite alternate;
}
.hero-vessel-halo {
    position: absolute;
    left: 33%;
    right: 33%;
    top: 123px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(203,255,224,.8);
    background: rgba(0,255,148,.35);
    box-shadow: 0 0 18px #00ff92, 0 0 42px rgba(0,255,126,.4);
    animation: vesselBeam 5s ease-in-out infinite alternate;
}
@keyframes commandLevitation { 0%,100% { transform: translateY(0) rotateZ(-.3deg); } 50% { transform: translateY(-10px) rotateZ(.3deg); } }
@keyframes commandShadow { 50% { opacity: .6; scale: .9; } }
@keyframes vesselBank {
    0%,100% { transform: translate3d(0,0,0) rotateY(-17deg) rotateZ(-4deg); }
    30% { transform: translate3d(5px,-8px,8px) rotateY(12deg) rotateZ(3deg); }
    65% { transform: translate3d(-4px,-3px,0) rotateY(20deg) rotateZ(1deg); }
}
@keyframes vesselBeam { to { opacity: .58; transform: scaleX(.92); } }
.wallpaper-paused .hero-command, .wallpaper-paused .hero-command::after,
.wallpaper-paused .hero-vessel *, .wallpaper-paused .arrival-glitch::before,
.wallpaper-paused .arrival-glitch::after { animation-play-state: paused !important; }

/* Glitch copies are clipped to small bands; the main title never disappears. */
.arrival-glitch { position: relative; isolation: isolate; }
.arrival-glitch::before, .arrival-glitch::after {
    content: attr(data-glitch-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: none;
    -webkit-text-fill-color: currentColor;
    opacity: 0;
}
.arrival-glitch::before { color: #8cffe1; text-shadow: -3px 0 #00ff80; animation: arrivalSliceA 6.8s steps(1,end) -4.5s infinite; }
.arrival-glitch::after { color: #f6f1ff; text-shadow: 3px 0 #ae71ff; animation: arrivalSliceB 6.8s steps(1,end) -4.5s infinite; }
.hero-title-green.arrival-glitch::before, .hero-title-green.arrival-glitch::after { animation-delay: -4.38s; }
@keyframes arrivalSliceA {
    0%,81%,91%,100% { opacity: 0; transform: none; clip-path: inset(0 0 100%); }
    82% { opacity: .9; transform: translateX(-4px); clip-path: inset(18% 0 64%); }
    84% { opacity: .8; transform: translateX(3px); clip-path: inset(64% 0 19%); }
    86% { opacity: .9; transform: translateX(-2px); clip-path: inset(39% 0 45%); }
}
@keyframes arrivalSliceB {
    0%,82%,90%,100% { opacity: 0; transform: none; clip-path: inset(100% 0 0); }
    83% { opacity: .8; transform: translateX(5px); clip-path: inset(68% 0 16%); }
    85% { opacity: .7; transform: translateX(-3px); clip-path: inset(22% 0 64%); }
    87% { opacity: .8; transform: translateX(2px); clip-path: inset(47% 0 36%); }
}
@media (max-width: 820px) {
    .cinematic-hero { min-height: max(820px,100svh); padding: 185px 18px 83px; align-content: center; }
    .cinematic-hero .hero-scene { inset: 68px 0 0; }
    .hero-command .hero-copy { padding: 27px 22px 25px; }
    .hero-command .hero-title { font-size: clamp(36px,9.6vw,70px); letter-spacing: -.06em; }
    .hero-command .hero-eyebrow { font-size: 7px; letter-spacing: .15em; }
    .hero-command .hero-subtitle { font-size: 12px; line-height: 1.75; }
    .hero-command .hero-actions { gap: 8px; }
    .hero-command .btn-red-outline, .hero-command .btn-glass { flex: 1 1 calc(50% - 8px); padding: 12px 9px; font-size: 8px; }
    .hero-vessel { top: -166px; width: 290px; height: 180px; }
    .hero-vessel-beam { top: 101px; }
    .hero-vessel-halo { top: 102px; }
    .hero-command .earthlings-wordmark { width: 155px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-command, .hero-command::after, .hero-command-tilt, .hero-vessel-craft, .hero-vessel-beam, .hero-vessel-halo { animation: none !important; transform: none; }
    .arrival-glitch::before, .arrival-glitch::after { display: none; }
}