@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

/* Background Animations */
@keyframes kb-pan { 0% { transform: scale(1.1) translate(0, 0); } 50% { transform: scale(1.1) translate(-2%, -2%); } 100% { transform: scale(1.1) translate(0, 0); } }
.bg-ken-burns-pan { animation: kb-pan 20s ease-in-out infinite; }

@keyframes kb-zoom { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
.bg-ken-burns-zoom { animation: kb-zoom 15s ease-in-out infinite; }

@keyframes pulse-light { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
.bg-pulse-light { animation: pulse-light 4s ease-in-out infinite; }

@keyframes pulse-dark { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(0.7); } }
.bg-pulse-dark { animation: pulse-dark 5s ease-in-out infinite; }

@keyframes scan-v { 0% { background-position: 0 -100%; } 100% { background-position: 0 200%; } }
.bg-scan-v { 
    background-image: linear-gradient(to bottom, transparent, rgba(255,255,255,0.1) 50%, transparent) !important;
    background-size: 100% 50% !important;
    animation: scan-v 3s linear infinite;
}

@keyframes scan-h { 0% { background-position: -100% 0; } 100% { background-position: 200% 0; } }
.bg-scan-h { 
    background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.1) 50%, transparent) !important;
    background-size: 50% 100% !important;
    animation: scan-h 4s linear infinite;
}

@keyframes rainbow { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
.bg-rainbow-cycle { animation: rainbow 10s linear infinite; }

@keyframes hue-subtle { 0% { filter: hue-rotate(-20deg); } 50% { filter: hue-rotate(20deg); } 100% { filter: hue-rotate(-20deg); } }
.bg-hue-shift { animation: hue-subtle 8s ease-in-out infinite; }

@keyframes spotlight { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.bg-spotlight { 
    background-image: radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, transparent 70%) !important;
    background-size: 200% 200% !important;
    animation: spotlight 6s ease-in-out infinite;
}

@keyframes flicker { 0%, 100% { opacity: 1; } 5%, 15%, 25% { opacity: 0.92; } 10%, 20% { opacity: 0.98; } }
.bg-cinema-flicker { animation: flicker 0.2s infinite; }

@keyframes sun-beam { 0% { opacity: 0; transform: translateX(-50%) rotate(-45deg); } 50% { opacity: 0.3; } 100% { opacity: 0; transform: translateX(150%) rotate(-45deg); } }
.bg-sun-beam { 
    position: absolute; width: 200%; height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,180,0.2), transparent);
    animation: sun-beam 10s linear infinite;
}

@keyframes breath-blue { 0%, 100% { background-color: transparent; } 50% { background-color: rgba(59, 130, 246, 0.1); } }
.bg-breathing-blue { animation: breath-blue 6s ease-in-out infinite; }

@keyframes breath-warm { 0%, 100% { background-color: transparent; } 50% { background-color: rgba(245, 158, 11, 0.1); } }
.bg-breathing-warm { animation: breath-warm 6s ease-in-out infinite; }

@keyframes floating-bg { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5%); } }
.bg-floating { animation: floating-bg 8s ease-in-out infinite; }

@keyframes vignette-p { 0%, 100% { box-shadow: inset 0 0 50px rgba(0,0,0,0.4); } 50% { box-shadow: inset 0 0 150px rgba(0,0,0,0.6); } }
.bg-vignette-pulse { animation: vignette-p 5s ease-in-out infinite; position: absolute; inset: 0; pointer-events: none; }

@keyframes flash-s { 0%, 100% { opacity: 0; } 50% { opacity: 0.2; } }
.bg-flash-loop { animation: flash-s 7s ease-in-out infinite; background: white !important; position: absolute; inset: 0; }

@keyframes z-slow { 0% { transform: scale(1.2); } 100% { transform: scale(1); } }
.bg-zoom-slow { animation: z-slow 30s ease-out infinite alternate; }

@keyframes blur-p { 0%, 100% { filter: blur(0px); } 50% { filter: blur(4px); } }
.bg-blur-loop { animation: blur-p 6s ease-in-out infinite; }

@keyframes sat-p { 0%, 100% { filter: saturate(1); } 50% { filter: saturate(2); } }
.bg-saturation-pulse { animation: sat-p 5s ease-in-out infinite; }



.font-poppins {
    font-family: 'Poppins', sans-serif;
}

#editable-headline:hover {
    background-color: rgba(59, 130, 246, 0.05);
}

#provider-select, .quick-provider-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.2em;
}

#screenshot-preview {
    min-height: 100px;
    background: #f8fafc;
}

#custom-form-container input, 
#custom-form-container select, 
#custom-form-container textarea {
    border: 1px solid #cbd5e1 !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.375rem !important;
    background-color: #ffffff !important;
    margin-bottom: 0.5rem;
    display: block;
    width: 100%;
}

#custom-form-container button,
#custom-form-container input[type="submit"] {
    background-color: #1e293b !important;
    color: #ffffff !important;
    padding: 0.75rem 1rem !important;
    border-radius: 0.5rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

#custom-form-container {
    text-align: left;
    /* Ensure long pasted custom forms can be scrolled inside the page and not clipped.
       Limit height so the page's vertical scrollbar remains usable while preserving layout. */
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 8px; /* prevent content touching edge when scrollbar appears */
    box-sizing: border-box;
}

#hero-message {
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.2, 0, 0.3, 1), background-color 0.3s, border-color 0.3s, box-shadow 0.3s, opacity 0.5s ease-in-out;
    max-height: 1000px; /* High enough to contain content */
    transform: translateY(var(--v-offset, 0px)) scale(var(--v-scale, 1));
}

#hero-message.is-animating {
    /* Prevent interaction during entrance */
    pointer-events: none;
}

@keyframes glowPulse {
    0% { box-shadow: 0 0 calc(var(--glow-intensity, 20px) / 2) var(--glow-color, rgba(59, 130, 246, 0.5)); }
    50% { box-shadow: 0 0 var(--glow-intensity, 20px) var(--glow-color, rgba(59, 130, 246, 0.5)); }
    100% { box-shadow: 0 0 calc(var(--glow-intensity, 20px) / 2) var(--glow-color, rgba(59, 130, 246, 0.5)); }
}

.glow-active {
    animation: glowPulse 3s infinite ease-in-out !important;
}

body {
    -webkit-tap-highlight-color: transparent;
}

/* Disable all transitions and animations on the form while editing in sidebars */
body.sidebar-open .theme-target,
body.sidebar-open #hero-message,
body.sidebar-open .form-input,
body.sidebar-open .form-label,
body.sidebar-open button {
    transition: none !important;
    animation: none !important;
}

/* Side Menu States */
#side-menu.open {
    transform: translateX(0);
}

#overlay.active {
    display: block;
    opacity: 1;
}

/* Custom Scrollbar */
.overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}
.overflow-y-auto::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.overflow-y-auto::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Popup Visibility */
#quick-capture-popup.visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Vertical Slider styling */
.v-slider {
    appearance: none;
    -webkit-appearance: slider-vertical;
    writing-mode: vertical-lr;
    width: 8px;
    height: 100%;
    background: #d4d4d8; /* neutral gray, no blue */
    outline: none;
    border-radius: 9999px;
    padding: 0;
    margin: 0;
}

/* WebKit thumb */
.v-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #4b5563; /* neutral dark gray */
    border-radius: 9999px;
    border: none;
    cursor: pointer;
}

/* Firefox thumb */
.v-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #4b5563;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
}

/* Firefox track */
.v-slider::-moz-range-track {
    background: #d4d4d8;
    border-radius: 9999px;
}

/* Sidebar States */
#theme-sidebar.open, #bg-settings-sidebar.open {
    transform: translateX(0);
}

/* Theme Preview Cards */
.theme-preview {
    cursor: pointer;
    transition: all 0.2s;
    border: 2px solid transparent;
}
.theme-preview:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.theme-preview.active {
    border-color: #3b82f6;
}

.spinner-choice.active {
    border-color: #2563eb;
    background-color: #eff6ff;
}

#v-pos-sidebar.open {
    transform: translateX(0);
}

.v-pos-option.active {
    border-color: #3b82f6;
    background-color: #eff6ff;
}

/* Toast Styles */
.toast-msg {
    animation: toast-in 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
    background: #1e293b;
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 10px;
}

@keyframes toast-in {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.toast-out {
    animation: toast-out 0.3s forwards;
}

@keyframes toast-out {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.9); opacity: 0; }
}

/* Project Dropdown Persistence & Bridge */
#project-dropdown {
    /* Smooth disappearance with delay */
    transition-delay: 400ms;
}

.group:hover #project-dropdown {
    /* Instant appearance */
    transition-delay: 0ms;
}

/* Transparent bridge to prevent losing hover when moving mouse over the margin gap */
#project-dropdown::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    height: 15px;
    background: transparent;
}



#unified-sidebar.open {
    transform: translateX(0);
}

.diagonal-bar {
    background: repeating-linear-gradient(
        -45deg,
        var(--bar-color-1, #3b82f6),
        var(--bar-color-1, #3b82f6) 10px,
        var(--bar-color-2, #60a5fa) 10px,
        var(--bar-color-2, #60a5fa) 20px
    );
}

/* Button Loop Animations */
@keyframes btn-pulse-soft { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.btn-anim-pulse-soft { animation: btn-pulse-soft 2s ease-in-out infinite; }

@keyframes btn-glow-soft { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); box-shadow: 0 0 15px currentColor; } }
.btn-anim-glow-soft { animation: btn-glow-soft 3s ease-in-out infinite; }

@keyframes btn-color-sweep { 
    0% { background-position: 0% 50%; } 
    100% { background-position: 200% 50%; } 
}
.btn-anim-color-sweep { 
    background-size: 200% auto;
    background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%) !important;
    animation: btn-color-sweep 3s linear infinite;
}

@keyframes btn-shake-gentle { 0%, 90%, 100% { transform: translateX(0); } 92% { transform: translateX(-2px); } 94% { transform: translateX(2px); } 96% { transform: translateX(-1px); } 98% { transform: translateX(1px); } }
.btn-anim-shake-gentle { animation: btn-shake-gentle 4s ease-in-out infinite; }

@keyframes btn-shimmer { 0% { transform: translateX(-150%) skewX(-25deg); } 100% { transform: translateX(250%) skewX(-25deg); } }
.btn-shimmer-wrap { position: relative; overflow: hidden; }
.btn-shimmer-el { position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent); animation: btn-shimmer 2.5s infinite; }

@keyframes btn-shadow-breath { 0%, 100% { box-shadow: 0 5px 15px -3px rgba(0,0,0,0.1); } 50% { box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2); } }
.btn-anim-shadow-breath { animation: btn-shadow-breath 3s ease-in-out infinite; }

@keyframes btn-border-pulse { 0%, 100% { border-color: transparent; } 50% { border-color: rgba(255,255,255,0.5); } }
.btn-anim-border-pulse { border: 2px solid transparent; animation: btn-border-pulse 2s infinite; }

@keyframes btn-scale-subtle { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.98); } }
.btn-anim-scale-subtle { animation: btn-scale-subtle 2.5s ease-in-out infinite; }

@keyframes btn-bounce-soft { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } 60% { transform: translateY(-2px); } }
.btn-anim-bounce-soft { animation: btn-bounce-soft 4s ease-in-out infinite; }

@keyframes btn-tilt-subtle { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(1deg); } }
.btn-anim-tilt-subtle { animation: btn-tilt-subtle 3s ease-in-out infinite; }

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.subtab-btn {
    transition: all 0.2s;
}
.subtab-btn:not(.active):hover {
    background-color: #e2e8f0;
}

#splash-screen.opacity-0 {
    opacity: 0;
    pointer-events: none;
}

.form-input.input-error {
    background-color: #fef2f2 !important;
    border: 2px solid #991b1b !important;
    box-shadow: 0 0 0 4px rgba(153, 27, 27, 0.1) !important;
}

@keyframes progress-loading {
    0% { width: 0%; }
    100% { width: 100%; }
}

.btn-progress-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    border-radius: inherit;
}

.btn-progress-bar {
    height: 100%;
    width: 0%;
    background-color: rgba(255, 255, 255, 0.2);
    animation: progress-loading 1.5s linear forwards;
}

/* Splash Screen Animations */
@keyframes splash-sweep {
    0% { left: -150%; }
    100% { left: 150%; }
}

.splash-card::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    animation: splash-sweep 1.5s ease-in-out 2;
    pointer-events: none;
    z-index: 10;
}