/* =========================================================
   COLLISION — start page, animated 3D mark
   html.js            JS is running (fallback mark waits for WebGL)
   html.gl-ready      first 3D frame rendered
   html.no-webgl      no WebGL -> flat SVG mark
   html.is-interactive / is-dragging   model can be turned (js/collision.js)
   html.is-leaving    double-click on the mark: veil grows, then studio/ opens
   ========================================================= */

:root {
    --ground: #0E1A1C;   /* Grund */
    --paper: #EDE7DC;    /* Papier */
    --touch: #FFA2FF;    /* Beruehrung */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    overflow: hidden;
    background-color: var(--ground);
    color: var(--paper);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* 3D stage */
.stage {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition: opacity 1.4s ease;
}

.gl-ready .stage {
    opacity: 1;
}

/* Esc during the intro: quick fade out, jump to the finished mark, fade back in */
.is-skipping .stage {
    opacity: 0;
    transition-duration: 0.25s;
}

/* After the animation the model can be turned by dragging */
.is-interactive .stage {
    cursor: grab;
    touch-action: none;
}

.is-dragging .stage {
    cursor: grabbing;
}

/* Flat fallback mark */
.fallback-mark {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(360px, 64vw);
    transform: translate(-50%, -50%);
}

.js .fallback-mark {
    opacity: 0;
    animation: fallbackIn 0.8s ease 3s forwards;
}

.no-webgl .fallback-mark {
    animation-delay: 0s;
}

.gl-ready .fallback-mark {
    display: none;
}

@keyframes fallbackIn {
    to { opacity: 1; }
}

/* Small text links: Impressum always visible, Studio only for keyboard focus */
.legal-link,
.studio-link {
    position: fixed;
    z-index: 5;
    color: rgba(237, 231, 220, 0.5);
    font: 500 0.68rem/1 system-ui, -apple-system, 'Segoe UI', sans-serif;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.3s ease;
}

.legal-link {
    right: 1.5rem;
    bottom: 1.25rem;
}

.legal-link:hover,
.legal-link:focus-visible {
    color: var(--touch);
    outline: none;
}

.studio-link {
    top: 1rem;
    left: 1rem;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--paper);
    border-radius: 999px;
    background-color: var(--ground);
    color: var(--paper);
    transform: translateY(-200%);
}

.studio-link:focus-visible {
    transform: none;
    outline: 2px solid var(--touch);
    outline-offset: 3px;
}

/* Exit towards the studio page: a ground-coloured circle swallows the model from the
   double-click point (js/collision.js sets --leave-x/y); studio/ then opens as a circle */
.leave-veil {
    position: fixed;
    inset: 0;
    z-index: 30;
    background-color: var(--ground);
    clip-path: circle(0 at var(--leave-x, 50%) var(--leave-y, 50%));
    pointer-events: none;
    transition: clip-path 0.55s cubic-bezier(0.7, 0, 0.2, 1);
}

.is-leaving .leave-veil {
    clip-path: circle(150vmax at var(--leave-x, 50%) var(--leave-y, 50%));
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .stage,
    .leave-veil { transition: none; }
}