/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --white: #ffffff;
    --off: rgba(255,255,255,0.85);
    --dim: white;
    --accent: #4db8ff;
    --font-mono: 'Courier New', Courier, monospace;
    --font-title: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* 
      Base unit: 24pt Courier New at 96dpi screen ≈ 32px.
      We use this as the root font size for the console.
      One "empty line" spacer = 1 line-height = 1.25 × 32px = 40px.
    */
    --console-size: 20px;       /* ~24pt equivalent on screen */
    --console-lh: 1.35;         /* line-height multiplier */
    --line-gap: 0px;            /* gap between consecutive lines (none — spacing via line-height only) */
    --spacer-h: calc(var(--console-size) * var(--console-lh)); /* one blank line */

    --title-size: 52px;         /* ~60pt on screen */
}

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    background: #000;
    color: var(--white);
}

/* ============================================================
   BACKGROUND GIF
   ============================================================ */
body::before {
    content: '';
    position: fixed; inset: 0;
    background: url('bib/vhs_2.gif') center center / cover no-repeat;
    z-index: 0;
    opacity: 0.3;
}

/* ============================================================
   PAGES
   ============================================================ */
.page {
    position: fixed; inset: 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease;
    z-index: 1;
}

.page.active {
    opacity: 1;
    pointer-events: all;
}

/* ============================================================
   LANDING PAGE
   ============================================================ */
#landing-page {
    align-items: center;
    justify-content: center;
    text-align: center;
}

.landing-text {
    display: flex;
    flex-direction: column;
    gap: 0;                          /* spacing via line-height only */
    font-family: var(--font-mono);
    font-size: var(--console-size);
    line-height: var(--console-lh);
    color: var(--off);
    letter-spacing: 0.01em;
}

.landing-text #l-title {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: var(--title-size);
    letter-spacing: -1px;
    line-height: 1.1;
    color: var(--white);
    margin-bottom: calc(var(--console-size) * var(--console-lh) * 0.5);
}

.landing-line {
    min-height: calc(var(--console-size) * var(--console-lh));
}

.enter-link {
    cursor: pointer;
    color: var(--white);
    text-decoration: none;
    border-bottom: none;
    transition: opacity 0.2s;
}

.enter-link:hover { opacity: 0.7; }

.hidden { opacity: 0; pointer-events: none; }
.visible { opacity: 1 !important; pointer-events: all !important; }

/* ============================================================
   SUBMISSION PAGE — three-row centered layout
   ============================================================ */
#submission-page {
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 2.8rem 3rem 2.4rem;
    overflow: visible;
    text-align: center;
}

/* ── TOP: title + subtitle ── */
.sub-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    text-align: center;
}

.sub-top .mag-title {
    font-family: var(--font-title);
    font-weight: 700;
    font-size: var(--title-size);
    letter-spacing: -1.5px;
    line-height: 1;
    color: var(--white);
}

.sub-top .mag-sub {
    font-family: var(--font-mono);
    font-size: var(--console-size);
    line-height: var(--console-lh);
    color: var(--dim);
    margin-top: 0.1em;
    letter-spacing: 0.01em;
}

/* ── MIDDLE: console form — left-aligned, centered on screen ── */
.sub-middle {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.console-area {
    display: flex;
    flex-direction: column;
    gap: var(--line-gap);
    font-family: var(--font-mono);
    font-size: var(--console-size);
    line-height: var(--console-lh);
    color: var(--off);
    letter-spacing: 0.01em;
    text-align: left;
    width: 26ch;          /* fixed width — nothing ever shifts */
    flex-shrink: 0;
}

/* ── BOTTOM: folder only (contact is fixed) ── */
.sub-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    margin-bottom: 0rem;   /* lifts folder up, leaving space for fixed contact below */
}

/* ── Drop zone ── */
.drop-area {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    transition: transform 0.2s ease;
}

.drop-area:hover { transform: scale(1.04); }

.drop-area.dragover #folder-img {
    filter: brightness(1.3) drop-shadow(0 0 12px rgba(77,184,255,0.7));
    transform: scale(1.08) translateY(-4px);
}

#folder-img {
    width: 100px;
    transition: filter 0.2s, transform 0.25s;
    display: block;
}

.drop-label {
    font-family: var(--font-mono);
    font-size: var(--console-size);
    line-height: var(--console-lh);
    color: var(--dim);
    letter-spacing: 0.01em;
    text-align: center;
}

.drop-status {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--accent);
    text-align: center;
    min-height: 1em;
}

@keyframes flashSuccess {
    0%   { filter: brightness(2) drop-shadow(0 0 18px rgba(77,184,255,1)); transform: scale(1.15); }
    60%  { filter: brightness(1.4) drop-shadow(0 0 10px rgba(77,184,255,0.5)); transform: scale(1.05); }
    100% { filter: none; transform: scale(1); }
}

.upload-success #folder-img {
    animation: flashSuccess 0.8s ease forwards;
}

/* ============================================================
   FOOTER LINKS & IMPRESSUM OVERLAY
   ============================================================ */
.footer-links {
    font-family: var(--font-mono);
    font-size: var(--console-size);
    line-height: var(--console-lh);
    color: var(--dim);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    margin-top: 0.5rem;
}

.contact-link {
    color: var(--dim);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-btn {
    background: transparent;
    border: none;
    color: var(--dim);
    font-family: var(--font-mono);
    font-size: var(--console-size);
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

.contact-link:hover, .footer-btn:hover { 
    color: var(--white); 
}

.footer-separator {
    color: var(--dim);
    user-select: none;
}

/* Das tiefschwarze Overlay */
.impressum-overlay {
    position: fixed;
    inset: 0;
    background: #000000;
    z-index: 1000;
    overflow-y: auto;
    padding: 6rem 2rem;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.6;
    color: var(--off);
    display: flex;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Zustand wenn geschlossen */
.impressum-overlay.hidden-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Der Textblock im Zentrum */
.impressum-content {
    max-width: 680px;
    width: 100%;
    text-align: left;
    position: relative; /* Wichtig für die Positionierung des X-Buttons */
}

.impressum-content h2, .impressum-content h3 {
    font-size: 14px;
    font-weight: bold;
    margin-top: 1.5rem;
    margin-bottom: 0.2rem;
    color: var(--white);
}

.impressum-content h2:first-of-type {
    margin-top: 0;
}

/* Schließen-Kreuz bündig rechts oben am Textblock ausgerichtet */
.close-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: none;
    color: var(--white);
    font-family: var(--font-title);
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: opacity 0.2s;
    z-index: 1001;
}

.close-btn:hover { 
    opacity: 0.6; 
}

/* Responsive Anpassung für kleinere Bildschirme */
@media (max-width: 640px) {
    .impressum-overlay {
        padding: 5rem 1.5rem;
    }
    .close-btn {
        font-size: 20px;
    }
}

/* Each text line is exactly one line tall — fixed width, clips overflow */
.console-line {
    height: calc(var(--console-size) * var(--console-lh));
    display: flex;
    align-items: center;
    transition: opacity 0.3s;
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
    width: 26ch;
    max-width: 26ch;
}

/* A blank line spacer — identical height to one line */
.console-spacer {
    height: calc(var(--console-size) * var(--console-lh));
    flex-shrink: 0;
}

/* ── Thin blinking text cursor  |  ── */
.cursor {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: var(--white);
    vertical-align: text-bottom;
    margin-left: 1px;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Name line: label + tab + input inline ── */
.name-input-line {
    display: flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
    width: 26ch;
    max-width: 26ch;
}

/* Tab stop between *name: and the input cursor */
.name-tab {
    display: inline-block;
    width: 2ch;   /* one tab worth of mono space */
}

#name-inline-input {
    display: inline-flex;
    align-items: center;
}

/* The real inputs sit inline after the display text — only the caret shows */
/* Die echten Inputs sitzen inline nach dem Anzeigetext — nur der Cursor ist sichtbar */
#name-input, #email-input, #thought-input {
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    color: transparent;
    caret-color: transparent;
    font-family: var(--font-mono);
    font-size: var(--console-size);
    line-height: var(--console-lh);
    width: 4px;
    vertical-align: middle;
    resize: none;
    overflow: hidden;
}

#name-input, #email-input { height: 1.2em; }

#thought-input {
    position: fixed;
    top: -9999px; left: -9999px;
    width: 1px; height: 1px;
    opacity: 0;
    border: none; outline: none;
    resize: none; padding: 0; margin: 0;
}

@keyframes submitFlash {
    0%   { opacity: 1; }
    20%  { opacity: 0; }
    40%  { opacity: 1; }
    60%  { opacity: 0; }
    80%  { opacity: 1; }
    100% { opacity: 0.4; }
}

.submit-flash {
    animation: submitFlash 0.5s ease forwards;
    pointer-events: none;
}

/* ── Action buttons: plain, no flash ── */
.action-btn {
    cursor: pointer;
    color: var(--white);
    display: inline-flex;
    align-items: center;
    user-select: none;
    text-decoration: none;
    border: none;
    transition: opacity 0.2s;
}

.action-btn:hover { opacity: 0.7; }

.action-btn.used {
    cursor: default;
    opacity: 0.4;
    pointer-events: none;
    animation: none;
}

/* ── Thought input line — fixed width, grows downward only ── */
#thought-input-line {
    height: auto !important;
    min-height: calc(var(--console-size) * var(--console-lh));
    flex-shrink: 0;
    overflow: visible !important;
    white-space: normal !important;
    width: 26ch;
    max-width: 26ch;
    display: block !important;
    line-height: var(--console-lh);
}

#thought-display {
    white-space: pre-wrap;
    word-break: break-all;
    display: inline;  /* inline so cursor follows text on same last line */
}

/* cursor sits inline right after the text */
#thought-cursor {
    display: inline-block;
}

/* ============================================================
   TRANSITIONS
   ============================================================ */
.fade-in {
    animation: fadeIn 0.35s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
    :root {
        --console-size: 16px;
        --title-size: 38px;
    }
    #submission-page { padding: 1.8rem 1.5rem; }
    #folder-img { width: 72px; }
}

/* --- Add this to your style.css --- */

/* The Morphing Exit Animation */
@keyframes morphExit {
    0% {
        transform: scale(1);
        filter: brightness(1) blur(0px);
        letter-spacing: 0.01em;
    }
    40% {
        filter: brightness(1.8); /* The flash */
    }
    100% {
        transform: scale(1);    /* Zoom-in warp */
        filter: brightness(3) blur(15px);
        letter-spacing: 0.5em;    /* Text stretches out */
        opacity: 0;
    }
}

/* Class to trigger the animation */
.page-morph-out {
    animation: morphExit 0.8s ease-in forwards;
    pointer-events: none;
}