/* start.css — Startbildschirm (Vorbild ExoMiner css/ui-start.css).
   Die Kamerafahrt steuert js/ui/start/cameraDrift.js (zufällig); hier nur Aussehen und Logo.
   Bilder: assets/start-bg.webp (quer), assets/start-bg-mobile.webp (hochkant),
   assets/logo-emblem.webp und assets/logo-text.webp (freigestellt). */

.start {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg-deep);
}
.start[hidden] { display: none; }

.start-bg {
    position: absolute;
    inset: 0;
    will-change: transform;
    transform-origin: center;
    background: #0b1020 url('../assets/start-bg.webp') center / cover no-repeat;
}
/* Hochkant (Handy): eigenes Bild mit ruhiger Mitte für das Logo. */
@media (orientation: portrait) {
    .start-bg { background-image: url('../assets/start-bg-mobile.webp'); }
}
/* Mitte leicht abdunkeln, damit Logo und Knopf vor dem bunten Bild stehen. */
.start-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 50% at 50% 50%, rgba(6, 10, 22, 0.55), rgba(6, 10, 22, 0) 75%),
        linear-gradient(180deg, rgba(6, 10, 22, 0.1) 0%, rgba(6, 10, 22, 0.35) 65%, rgba(6, 10, 22, 0.8) 100%);
}

.start-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 0 24px;
    text-align: center;
}

/* --- Logo: Ablauf wie bei ExoMiner (css/ui-start.css) ---
   Emblem oben, Schriftzug davor über dessen Unterkante. Maße in % der Logobreite.
   Erst fliegt das Emblem „in den Monitor“ (riesig, unscharf -> klein), kurz danach der
   Schriftzug; beim Aufprall Lichtblitz und kleiner Ruck. Danach schweben beide versetzt,
   ab und zu läuft ein Glanz über die Schrift, und das Logo treibt leicht gegen die
   Kamerafahrt (Tiefe). Zwei Ebenen je Teil: .sl-fly trägt den Einflug, .sl-float das
   Schweben — so stören sich die beiden transform nicht. */
.sl {
    position: relative;
    display: block;
    width: min(640px, 86vw);
    aspect-ratio: 100 / 52;
    margin: 0 auto;
    animation: slDrift 20s ease-in-out infinite alternate, slShake 0.35s linear 1.15s 1 both;
}
.sl img { display: block; width: 100%; height: auto; }
.sl-fly { position: absolute; display: block; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.2, 0.75, 0.25, 1); }
.sl-float { position: relative; display: block; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
.sl-emblem { width: 36%; left: 32%; top: 0; z-index: 1; animation: slFlyEmblem 0.9s 0.05s both; }
.sl-emblem .sl-float {
    animation-name: slFloatEmblem; animation-duration: 5.2s; animation-delay: 1s;
    filter: drop-shadow(0 0 22px rgba(80, 220, 230, 0.35)) drop-shadow(0 8px 0 rgba(0, 0, 0, 0.3));
}
.sl-word { width: 100%; left: 0; bottom: 0; z-index: 2; animation: slFlyText 0.85s 0.45s both; }
.sl-word .sl-float {
    animation-name: slFloatText; animation-duration: 6.4s; animation-delay: 1.3s;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}
/* Glanzstreifen, auf die Form des Schriftzugs zugeschnitten (Maske = das Bild selbst). */
.sl-glint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-mask: url('../assets/logo-text.webp') center / 100% 100% no-repeat;
            mask: url('../assets/logo-text.webp') center / 100% 100% no-repeat;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.6) 50%, transparent 60%) no-repeat;
    background-size: 250% 100%;
    background-position: 150% 0;
    mix-blend-mode: screen;
    animation: slGlint 5.5s ease-in-out 2.2s infinite;
}
/* Lichtblitz beim Aufprall des Schriftzugs. */
.sl-flash {
    position: absolute;
    left: 50%;
    top: 72%;
    width: 70%;
    aspect-ratio: 1;
    z-index: 3;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.2);
    background: radial-gradient(circle, rgba(220, 255, 250, 0.85) 0%, rgba(255, 180, 70, 0.35) 35%, rgba(255, 180, 70, 0) 70%);
    opacity: 0;
    mix-blend-mode: screen;
    animation: slFlash 0.6s ease-out 1.05s 1 both;
}
@keyframes slFlyEmblem {
    0%   { transform: translate(-10%, 40%) scale(7) rotate(-25deg); opacity: 0; filter: blur(14px); }
    25%  { opacity: 1; }
    70%  { transform: translate(0, 0) scale(0.9) rotate(3deg); filter: blur(0); }
    85%  { transform: scale(1.05) rotate(-1deg); }
    100% { transform: none; opacity: 1; filter: none; }
}
@keyframes slFlyText {
    0%   { transform: translate(8%, 60%) scale(5) rotate(10deg); opacity: 0; filter: blur(14px); }
    25%  { opacity: 1; }
    68%  { transform: translate(0, 0) scale(0.92) rotate(-1.5deg); filter: blur(0); }
    84%  { transform: scale(1.04) rotate(0.5deg); }
    100% { transform: none; opacity: 1; filter: none; }
}
@keyframes slShake {
    0%, 100% { translate: 0 0; }
    20% { translate: -4px 3px; } 40% { translate: 4px -2px; } 60% { translate: -3px 1px; } 80% { translate: 2px 0; }
}
@keyframes slFlash {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}
@keyframes slFloatEmblem { from { transform: translateY(-2.5%) rotate(-3deg); } to { transform: translateY(2.5%) rotate(3deg); } }
@keyframes slFloatText   { from { transform: translateY(3%) rotate(0.6deg); } to { transform: translateY(-4%) rotate(-0.6deg); } }
@keyframes slGlint { 0% { background-position: 150% 0; } 45%, 100% { background-position: -60% 0; } }
/* Gegen die Kamerafahrt treiben: das Logo wirkt näher als der Hintergrund. */
@keyframes slDrift { from { transform: translate(1.5%, 0.8%); } to { transform: translate(-1.5%, -0.8%); } }
/* Antippen während des Einflugs (startScreen.js setzt .sl-skip): sofort am Ziel. */
.sl.sl-skip .sl-fly { animation: none; opacity: 1; }
.sl.sl-skip .sl-flash { animation: none; opacity: 0; }
.sl.sl-skip { animation: slDrift 20s ease-in-out infinite alternate; }

.start-sub {
    margin: -4px 0 4px;
    font-size: clamp(0.8rem, 2.6vw, 1.05rem);
    letter-spacing: 0.6em;
    text-transform: uppercase;
    color: #7fe6ec;
    text-shadow: 2px 2px 0 #000;
}
.start-tagline {
    max-width: 520px;
    margin: 0 0 8px;
    line-height: 1.5;
    text-shadow: 2px 2px 0 #000;
}
.start-btn {
    font: 600 clamp(1.1rem, 4vw, 1.5rem)/1 var(--font-title);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #1b1410;
    background: linear-gradient(180deg, #ffd27a, #d9a441);
    border: 3px solid #f3e2c0;
    border-radius: 6px;
    box-shadow: 0 0 0 3px #1b1410, 0 7px 0 0 #1b1410;
    padding: 16px 44px;
    cursor: pointer;
}
.start-btn:hover:not(:disabled) { filter: brightness(1.08); }
.start-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 3px #1b1410, 0 4px 0 0 #1b1410; }
.start-btn:disabled { opacity: 0.55; cursor: progress; }
.start-info { margin: 4px 0 0; color: var(--text); text-shadow: 2px 2px 0 #000; }

.start-legal {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    font-size: 0.85rem;
    color: var(--muted);
    white-space: nowrap;
    text-shadow: 2px 2px 0 #000;
}
.start-legal a { color: var(--text); padding: 8px 4px; }
.start-version {
    position: absolute;
    right: 14px;
    bottom: 12px;
    font-size: 0.8rem;
    color: var(--muted);
    text-shadow: 2px 2px 0 #000;
    pointer-events: none;
}
@media (max-width: 520px) {
    .start-legal { bottom: 40px; }
}
@media (max-height: 520px) {
    .start { overflow-y: auto; flex-direction: column; justify-content: flex-start; }
    .start-bg { position: fixed; }
    .start-inner { margin: auto; padding: 16px 24px; }
    .start-legal, .start-version { position: relative; inset: auto; transform: none; margin: 6px auto; }
}

/* „Bewegung reduzieren“: Logo steht einfach da (die Kamerafahrt wird in JS verlangsamt). */
@media (prefers-reduced-motion: reduce) {
    .sl, .sl-fly, .sl-float, .sl-glint, .sl-flash { animation: none !important; }
    .sl-flash, .sl-glint { display: none; }
}

/* Link zur Android-App (nur unter Android im Browser, wenn minestellar.apk auf dem Server liegt). */
.start-apk {
    display: inline-block; margin-top: 10px; padding: 10px 16px; border-radius: 12px;
    background: rgba(11, 16, 32, 0.75); border: 1px solid var(--line); color: var(--text);
    font: 600 1rem var(--font-title); text-decoration: none; text-shadow: none;
}
.start-apk:hover { background: rgba(57, 215, 255, 0.18); }

/* „Ich spiele schon auf einem anderen Gerät“ — dezent unter dem Hauptknopf (Konto & Geräte). */
.start-link {
    display: block; margin: 10px auto 0; padding: 8px 12px; border: 0; background: none;
    color: var(--holo-light, #9be8ff); font: 600 0.95rem var(--font); text-decoration: underline;
    text-underline-offset: 3px; cursor: pointer; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.start-link:hover { color: #fff; }