/* heyde.schule - Modular CSS: 50_ui_effects.css */

/* --- Traffic Light Indicators --- */
.traffic-light {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
    flex-shrink: 0;
}
.tl-red { background-color: #ff4d4d; }
.tl-orange { background-color: #ffa500; }
.tl-yellow { background-color: #ffff00; }
.tl-yellowgreen { background-color: #adff2f; }
.tl-green { background-color: #00ff00; }

/* Smart Overflow System */
.overflow-container {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    max-height: 48px; /* Nur die erste Zeile */
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 10px;
    align-items: center;
    width: 100%;
}

.overflow-container.expanded {
    max-height: 1000px;
}

.overflow-toggle-bar {
    width: 100%;
    height: 12px;
    background: linear-gradient(to bottom, rgba(199, 96, 45, 0.2), transparent);
    cursor: pointer;
    border-radius: 0 0 8px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -2px;
    opacity: 0.5;
    transition: all 0.2s;
    border: none;
}

.overflow-toggle-bar:hover {
    opacity: 1;
    background: linear-gradient(to bottom, rgba(199, 96, 45, 0.4), transparent);
}

.overflow-toggle-bar::after {
    content: '▼';
    font-size: 10px;
    color: var(--accent-1);
}

.overflow-container.expanded + .overflow-toggle-bar::after {
    content: '▲';
}

/* Fix für verschachtelte Buttons in Forms (bug.png) */
.updformrow button, .addform button {
    margin: 0;
    border: none;
    background: none;
    box-shadow: none;
}

/* --- Synchronous Staggered Reveal Animation --- */
@keyframes monolith-reveal {
    0% { opacity: 0; transform: translateY(8px) scale(0.99); filter: blur(2px); }
    100% { opacity: 1; transform: none; filter: blur(0); }
}

/* Radial: Skalieren statt verschieben */
@keyframes radial-reveal {
    0%   { opacity: 0; transform: scale(0.9); filter: blur(2px); }
    100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes radial-hide {
    0%   { opacity: 1; transform: none; filter: blur(0); }
    100% { opacity: 0; transform: scale(0.9); filter: blur(2px); }
}

/* Diagonal: Wipe aus der Ecke */
@keyframes diagonal-reveal {
    0%   { opacity: 0; transform: translate(-15px, -15px); filter: blur(2px); }
    100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes diagonal-hide {
    0%   { opacity: 1; transform: none; filter: blur(0); }
    100% { opacity: 0; transform: translate(15px, 15px); filter: blur(2px); }
}

/* Random: Bounce & Rotate */
@keyframes random-reveal {
    0%   { opacity: 0; transform: scale(0.8) rotate(var(--rand-rot, 0deg)); filter: blur(2px); }
    70%  { opacity: 1; transform: scale(1.02) rotate(var(--rand-rot, 0deg)); filter: blur(0); }
    100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes random-hide {
    0%   { opacity: 1; transform: none; filter: blur(0); }
    100% { opacity: 0; transform: scale(0.8) rotate(var(--rand-rot, 0deg)); filter: blur(2px); }
}

/* --- Soft Transition Keyframes (No Movement) --- */
@keyframes soft-reveal {
    0%   { opacity: 1; filter: blur(8px); transform: none; }
    100% { opacity: 1; filter: blur(0); transform: none; }
}

@keyframes soft-hide {
    0%   { opacity: 1; filter: blur(0); transform: none; }
    100% { opacity: 1; filter: blur(8px); transform: none; }
}

.reveal-monolith, .content-card, .dashboard-card, .post-title, .post-content, .post-heading .button-xs, .post-container:not(.centercontent) .button-xl, .post-heading .action-icon {
    --total-reveal-time: 0.5s;
    --reveal-delay-step: 0.015s;
    --current-delay: calc(var(--reveal-idx, 0) * var(--reveal-delay-step));
    
    /* Die Dauer wird so verkürzt, dass alle Animationen zum Zeitpunkt --total-reveal-time enden */
    --calculated-duration: calc(var(--total-reveal-time) - var(--current-delay));
}

body.reveal-enabled .reveal-monolith, 
body.reveal-enabled .content-card, 
body.reveal-enabled .dashboard-card,
body.reveal-enabled .post-title,
body.reveal-enabled .post-content,
body.reveal-enabled .post-heading .button-xs,
body.reveal-enabled .post-container:not(.centercontent) .button-xl,
body.reveal-enabled .post-heading .action-icon {
    opacity: 0;
}

/* SOFT ENTRY: Start blurred but visible immediately (prevent opacity:0 flash) 
   Apply ONLY until orchestrated, so the animation can then clear the blur! */
body.reveal-enabled.is-soft-entry:not(.orchestrated) .reveal-monolith, 
body.reveal-enabled.is-soft-entry:not(.orchestrated) .content-card, 
body.reveal-enabled.is-soft-entry:not(.orchestrated) .dashboard-card,
body.reveal-enabled.is-soft-entry:not(.orchestrated) .post-title,
body.reveal-enabled.is-soft-entry:not(.orchestrated) .post-content,
body.reveal-enabled.is-soft-entry:not(.orchestrated) .post-heading .button-xs,
body.reveal-enabled.is-soft-entry:not(.orchestrated) .post-container:not(.centercontent) .button-xl,
body.reveal-enabled.is-soft-entry:not(.orchestrated) .post-heading .action-icon {
    opacity: 1 !important; 
    filter: blur(8px) !important;
}

body.reveal-enabled.orchestrated .reveal-monolith, 
body.reveal-enabled.orchestrated .content-card, 
body.reveal-enabled.orchestrated .dashboard-card,
body.reveal-enabled.orchestrated .post-title,
body.reveal-enabled.orchestrated .post-content,
body.reveal-enabled.orchestrated .post-heading .button-xs,
body.reveal-enabled.orchestrated .post-container:not(.centercontent) .button-xl,
body.reveal-enabled.orchestrated .post-heading .action-icon {
    animation: monolith-reveal var(--calculated-duration) ease-out forwards;
    animation-delay: var(--current-delay);
}

body[data-reveal-mode="radial"].orchestrated .reveal-monolith, 
body[data-reveal-mode="radial"].orchestrated .content-card, 
body[data-reveal-mode="radial"].orchestrated .dashboard-card,
body[data-reveal-mode="radial"].orchestrated .post-title,
body[data-reveal-mode="radial"].orchestrated .post-content,
body[data-reveal-mode="radial"].orchestrated .post-heading .button-xs,
body[data-reveal-mode="radial"].orchestrated .post-container:not(.centercontent) .button-xl,
body[data-reveal-mode="radial"].orchestrated .post-heading .action-icon {
    animation-name: radial-reveal;
}

body[data-reveal-mode="diagonal"].orchestrated .reveal-monolith, 
body[data-reveal-mode="diagonal"].orchestrated .content-card, 
body[data-reveal-mode="diagonal"].orchestrated .dashboard-card,
body[data-reveal-mode="diagonal"].orchestrated .post-title,
body[data-reveal-mode="diagonal"].orchestrated .post-content,
body[data-reveal-mode="diagonal"].orchestrated .post-heading .button-xs,
body[data-reveal-mode="diagonal"].orchestrated .post-container:not(.centercontent) .button-xl,
body[data-reveal-mode="diagonal"].orchestrated .post-heading .action-icon {
    animation-name: diagonal-reveal;
}

body[data-reveal-mode="random"].orchestrated .reveal-monolith, 
body[data-reveal-mode="random"].orchestrated .content-card, 
body[data-reveal-mode="random"].orchestrated .dashboard-card,
body[data-reveal-mode="random"].orchestrated .post-title,
body[data-reveal-mode="random"].orchestrated .post-content,
body[data-reveal-mode="random"].orchestrated .post-heading .button-xs,
body[data-reveal-mode="random"].orchestrated .post-container:not(.centercontent) .button-xl,
body[data-reveal-mode="random"].orchestrated .post-heading .action-icon {
    animation-name: random-reveal;
}




/* --- Synchronous Exit Animation --- */
@keyframes monolith-hide {
    0% { 
        opacity: 1; 
        transform: none; 
        filter: blur(0); 
    }
    100% { 
        opacity: 0; 
        transform: translateY(-8px) scale(0.99); 
        filter: blur(2px); 
    }
}

body.is-exiting {
    overflow: hidden !important;
    pointer-events: none;
}

@keyframes title-hide {
    0% { 
        opacity: 1; 
        filter: blur(0); 
        letter-spacing: normal;
    }
    100% { 
        opacity: 0; 
        filter: blur(8px); 
        letter-spacing: 2px;
    }
}

body.reveal-enabled.is-exiting .reveal-monolith,
body.reveal-enabled.is-exiting .content-card,
body.reveal-enabled.is-exiting .dashboard-card,
body.reveal-enabled.is-exiting .table-row,
body.reveal-enabled.is-exiting .post-content,
body.reveal-enabled.is-exiting .post-heading .button-xs,
body.reveal-enabled.is-exiting .post-container:not(.centercontent) .button-xl,
body.reveal-enabled.is-exiting .post-heading .action-icon {
    opacity: 1; /* Fix against dropping to 0 during delay */
    --total-reveal-time: 0.3s !important;
    --reveal-delay-step: 0.005s !important;
    --current-delay: calc(var(--reveal-idx, 0) * var(--reveal-delay-step));
    --calculated-duration: calc(var(--total-reveal-time) - var(--current-delay));

    animation: monolith-hide var(--calculated-duration) ease-in forwards !important;
    animation-delay: var(--current-delay) !important;
}

body.reveal-enabled.is-exiting[data-reveal-mode="radial"] .reveal-monolith, 
body.reveal-enabled.is-exiting[data-reveal-mode="radial"] .content-card, 
body.reveal-enabled.is-exiting[data-reveal-mode="radial"] .dashboard-card,
body.reveal-enabled.is-exiting[data-reveal-mode="radial"] .post-content,
body.reveal-enabled.is-exiting[data-reveal-mode="radial"] .post-heading .button-xs,
body.reveal-enabled.is-exiting[data-reveal-mode="radial"] .post-container:not(.centercontent) .button-xl,
body.reveal-enabled.is-exiting[data-reveal-mode="radial"] .post-heading .action-icon {
    animation-name: radial-hide !important;
}

body.reveal-enabled.is-exiting[data-reveal-mode="diagonal"] .reveal-monolith, 
body.reveal-enabled.is-exiting[data-reveal-mode="diagonal"] .content-card, 
body.reveal-enabled.is-exiting[data-reveal-mode="diagonal"] .dashboard-card,
body.reveal-enabled.is-exiting[data-reveal-mode="diagonal"] .post-content,
body.reveal-enabled.is-exiting[data-reveal-mode="diagonal"] .post-heading .button-xs,
body.reveal-enabled.is-exiting[data-reveal-mode="diagonal"] .post-container:not(.centercontent) .button-xl,
body.reveal-enabled.is-exiting[data-reveal-mode="diagonal"] .post-heading .action-icon {
    animation-name: diagonal-hide !important;
}

body.reveal-enabled.is-exiting[data-reveal-mode="random"] .reveal-monolith, 
body.reveal-enabled.is-exiting[data-reveal-mode="random"] .content-card, 
body.reveal-enabled.is-exiting[data-reveal-mode="random"] .dashboard-card,
body.reveal-enabled.is-exiting[data-reveal-mode="random"] .post-content,
body.reveal-enabled.is-exiting[data-reveal-mode="random"] .post-heading .button-xs,
body.reveal-enabled.is-exiting[data-reveal-mode="random"] .post-container:not(.centercontent) .button-xl,
body.reveal-enabled.is-exiting[data-reveal-mode="random"] .post-heading .action-icon {
    animation-name: random-hide !important;
}

body.reveal-enabled.is-exiting .post-title {
    opacity: 1; /* Fix against dropping to 0 during delay */
    --total-reveal-time: 0.3s !important;
    --reveal-delay-step: 0.005s !important;
    --current-delay: calc(var(--reveal-idx, 0) * var(--reveal-delay-step));
    --calculated-duration: calc(var(--total-reveal-time) - var(--current-delay));

    animation: title-hide var(--calculated-duration) ease-in forwards !important;
    animation-delay: var(--current-delay) !important;
}

/* --- Local Loading Spinner for Exit Animation --- */
body.reveal-enabled.is-exiting .post-container:not(.centercontent) {
    position: relative;
    min-height: 60px; /* Sicherstellen, dass auch leere/flache Container den Spinner zeigen */
}

body.reveal-enabled.is-exiting .post-container:not(.centercontent)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-top: 4px solid var(--accent-1);
    border-radius: 50%;
    animation: spin 1s linear infinite, spinner-fade-in 0.3s ease-out forwards;
    animation-delay: 0.2s;
    opacity: 0;
    z-index: 9999;
    pointer-events: none;
}

/* --- SOFT TRANSITION OVERRIDES --- */

/* SOFT ENTRY: Start blurred but visible immediately (prevent opacity:0 flash) 
   Apply ONLY until orchestrated, so the animation can then clear the blur! */
body.reveal-enabled.is-soft-entry:not(.orchestrated) .reveal-monolith, 
body.reveal-enabled.is-soft-entry:not(.orchestrated) .content-card, 
body.reveal-enabled.is-soft-entry:not(.orchestrated) .dashboard-card,
body.reveal-enabled.is-soft-entry:not(.orchestrated) .post-title,
body.reveal-enabled.is-soft-entry:not(.orchestrated) .post-content,
body.reveal-enabled.is-soft-entry:not(.orchestrated) .post-heading .button-xs,
body.reveal-enabled.is-soft-entry:not(.orchestrated) .post-container:not(.centercontent) .button-xl,
body.reveal-enabled.is-soft-entry:not(.orchestrated) .post-heading .action-icon {
    opacity: 1 !important; 
    filter: blur(8px) !important;
}


body.reveal-enabled.is-soft-entry:not(.is-exiting).orchestrated .reveal-monolith, 
body.reveal-enabled.is-soft-entry:not(.is-exiting).orchestrated .content-card, 
body.reveal-enabled.is-soft-entry:not(.is-exiting).orchestrated .dashboard-card,
body.reveal-enabled.is-soft-entry:not(.is-exiting).orchestrated .post-title,
body.reveal-enabled.is-soft-entry:not(.is-exiting).orchestrated .post-content,
body.reveal-enabled.is-soft-entry:not(.is-exiting).orchestrated .post-heading .button-xs,
body.reveal-enabled.is-soft-entry:not(.is-exiting).orchestrated .post-container:not(.centercontent) .button-xl,
body.reveal-enabled.is-soft-entry:not(.is-exiting).orchestrated .post-heading .action-icon {
    animation-name: soft-reveal !important;
    transform: none !important;
}

/* SOFT EXIT: Blur out but stay partially visible */
body.reveal-enabled.is-exiting.is-soft-transition .reveal-monolith,
body.reveal-enabled.is-exiting.is-soft-transition .content-card,
body.reveal-enabled.is-exiting.is-soft-transition .dashboard-card,
body.reveal-enabled.is-exiting.is-soft-transition .table-row,
body.reveal-enabled.is-exiting.is-soft-transition .post-content,
body.reveal-enabled.is-exiting.is-soft-transition .post-heading .button-xs,
body.reveal-enabled.is-exiting.is-soft-transition .post-container:not(.centercontent) .button-xl,
body.reveal-enabled.is-exiting.is-soft-transition .post-heading .action-icon {
    animation-name: soft-hide !important;
    transform: none !important;
}

body.reveal-enabled.is-exiting.is-soft-transition .post-title {
    animation-name: soft-hide !important;
    transform: none !important;
}

@keyframes spinner-fade-in {
    to { opacity: 1; }
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes spin-inline {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Custom Tooltip Engine --- */
.has-custom-tooltip {
    position: relative;
    cursor: help;
}
.has-custom-tooltip .custom-tooltip-content {
    display: none;
}


/* Fallback für Browser ohne CSS Variablen Support */
@supports not (display: grid) {
    .reveal-monolith, .content-card, .dashboard-card { opacity: 1; }
}

/* =========================================================
   DIRECT ADMINUX SHORTCUT (SHIFT-BYPASS)
   ========================================================= */
body.shift-pressed .shortcut-direct-adminux {
    color: #f48024 !important;
    text-shadow: 0 0 5px rgba(244, 128, 36, 0.8) !important;
    cursor: alias !important;
}