/* Sci-Fi iOS Neural Quantum Styles */

/* Enhanced line clamping for quantum text */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Quantum neural typography */
.prose {
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}

.prose p {
    margin-bottom: 1.8em;
}

.prose h1, .prose h2, .prose h3 {
    margin-top: 3em;
    margin-bottom: 1.2em;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
}

.prose h1 {
    font-size: 2em;
    background: linear-gradient(45deg, #ff0066, #ffcc00);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.prose h2 {
    font-size: 1.6em;
    background: linear-gradient(45deg, #0033ff, #00ff99);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.prose h3 {
    font-size: 1.3em;
    color: #ffcc00;
}

.prose ul, .prose ol {
    margin: 2em 0;
    padding-left: 2.5em;
}

.prose li {
    margin: 1em 0;
    color: rgba(255, 255, 255, 0.85);
}

.prose strong {
    font-weight: 700;
    background: linear-gradient(45deg, #ff0066, #ffcc00);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.prose em {
    font-style: italic;
    color: #00ff99;
}

.prose blockquote {
    border-left: 4px solid #ff0066;
    padding-left: 2em;
    margin: 3em 0;
    font-style: italic;
    background: rgba(255, 0, 102, 0.1);
    padding: 1.5em 2em;
    border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 0, 102, 0.3);
}

/* Quantum neural typewriter effect */
.neural-typewriter-cursor::after {
    content: '▌';
    animation: neural-blink 1.2s infinite;
    font-weight: 100;
    color: #ffcc00;
    text-shadow: 0 0 10px #ffcc00;
}

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

/* Enhanced quantum form controls */
.neural-checkbox {
    appearance: none;
    background: linear-gradient(45deg, rgba(255, 0, 102, 0.1), rgba(0, 51, 255, 0.1));
    border: 2px solid #ff0066;
    border-radius: 8px;
    width: 24px;
    height: 24px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.neural-checkbox:checked {
    background: linear-gradient(45deg, #ff0066, #0033ff);
    border-color: #ffcc00;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.5);
}

.neural-checkbox:checked::after {
    content: '⚡';
    position: absolute;
    top: -2px;
    left: 2px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

/* Quantum slider enhancements */
.quantum-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: linear-gradient(90deg, #0a0a0f, #1a1a2e);
    border-radius: 3px;
    outline: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 0, 102, 0.3);
}

.quantum-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    background: linear-gradient(45deg, #ff0066, #ffcc00);
    border: 2px solid #00ff99;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.quantum-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 30px rgba(255, 204, 0, 0.6), 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* Enhanced quantum select styling */
select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ffcc00' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 16px center;
    background-repeat: no-repeat;
    background-size: 20px 16px;
    padding-right: 50px;
}

/* Quantum focus states */
input:focus, textarea:focus, select:focus {
    transform: none;
    box-shadow: 0 0 0 4px rgba(255, 204, 0, 0.2), 0 0 20px rgba(255, 0, 102, 0.3);
    border-color: #ffcc00 !important;
}

/* Enhanced quantum button effects */
button:active {
    transform: scale(0.96);
    transition: transform 0.15s ease;
}

button:not(:active) {
    transform: scale(1);
    transition: transform 0.25s ease;
}

/* Quantum card hover effects */
.group:hover {
    transform: translateY(-3px);
    transition: transform 0.3s ease;
    box-shadow: 0 20px 40px rgba(255, 0, 102, 0.15), 0 0 30px rgba(255, 204, 0, 0.1);
}

/* Enhanced quantum safe area support */
@supports (padding: max(0px)) {
    .neural-safe-area-top {
        padding-top: max(20px, env(safe-area-inset-top));
    }
    
    .neural-safe-area-bottom {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
    
    .neural-safe-area-left {
        padding-left: max(20px, env(safe-area-inset-left));
    }
    
    .neural-safe-area-right {
        padding-right: max(20px, env(safe-area-inset-right));
    }
}

/* Enhanced quantum dark mode styling */
@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #16213e 100%);
    }
}

/* Quantum neural animations */
@keyframes neural-pulse {
    0%, 100% { 
        transform: scale(1); 
        opacity: 1; 
        box-shadow: 0 0 10px rgba(255, 204, 0, 0.3);
    }
    50% { 
        transform: scale(1.05); 
        opacity: 0.8; 
        box-shadow: 0 0 20px rgba(255, 204, 0, 0.5);
    }
}

@keyframes quantum-glow {
    0% { 
        box-shadow: 0 0 5px rgba(255, 0, 102, 0.4), 0 0 10px rgba(255, 0, 102, 0.2);
    }
    100% { 
        box-shadow: 0 0 20px rgba(255, 0, 102, 0.6), 0 0 40px rgba(255, 0, 102, 0.3), 0 0 60px rgba(255, 204, 0, 0.2);
    }
}

@keyframes holographic {
    0% { 
        background: linear-gradient(45deg, rgba(255, 0, 102, 0.1), rgba(0, 51, 255, 0.1));
    }
    33% { 
        background: linear-gradient(45deg, rgba(0, 51, 255, 0.1), rgba(255, 204, 0, 0.1));
    }
    66% { 
        background: linear-gradient(45deg, rgba(255, 204, 0, 0.1), rgba(0, 255, 153, 0.1));
    }
    100% { 
        background: linear-gradient(45deg, rgba(0, 255, 153, 0.1), rgba(255, 0, 102, 0.1));
    }
}

@keyframes neural-typing {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes particle-float {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg) scale(1);
        opacity: 0.3;
    }
    25% { 
        transform: translateY(-15px) rotate(90deg) scale(1.1);
        opacity: 0.6;
    }
    50% { 
        transform: translateY(-10px) rotate(180deg) scale(0.9);
        opacity: 0.4;
    }
    75% { 
        transform: translateY(5px) rotate(270deg) scale(1.2);
        opacity: 0.7;
    }
}

@keyframes consciousness-wave {
    0% { 
        transform: scaleX(1) scaleY(1);
        filter: hue-rotate(0deg);
    }
    33% { 
        transform: scaleX(1.1) scaleY(0.95);
        filter: hue-rotate(120deg);
    }
    66% { 
        transform: scaleX(0.95) scaleY(1.1);
        filter: hue-rotate(240deg);
    }
    100% { 
        transform: scaleX(1) scaleY(1);
        filter: hue-rotate(360deg);
    }
}

@keyframes fade-in {
    0% { 
        opacity: 0; 
        transform: translateY(10px);
    }
    100% { 
        opacity: 1; 
        transform: translateY(0);
    }
}

@keyframes slide-up {
    0% { 
        transform: translateY(30px) scale(0.95); 
        opacity: 0; 
    }
    100% { 
        transform: translateY(0) scale(1); 
        opacity: 1; 
    }
}

@keyframes neural-appear {
    0% { 
        transform: scale(0.9) rotateY(-10deg); 
        opacity: 0; 
        filter: blur(5px);
    }
    100% { 
        transform: scale(1) rotateY(0deg); 
        opacity: 1; 
        filter: blur(0px);
    }
}

/* Enhanced touch optimization for quantum iOS */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on neural touch devices */
    button:hover,
    .group:hover {
        transform: none;
    }
    
    /* Enhanced neural touch targets */
    button, input, select, textarea {
        min-height: 44px;
        font-size: 16px; /* Prevent iOS zoom */
    }
    
    /* Better quantum touch feedback */
    button:active {
        background-color: rgba(255, 204, 0, 0.1);
        transform: scale(0.94);
        box-shadow: 0 0 15px rgba(255, 0, 102, 0.4);
    }
}

/* Prevent text selection on neural UI elements */
button, .cursor-pointer {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Quantum neural smooth scrolling */
html {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Enhanced neural backdrop blur support */
@supports (backdrop-filter: blur(20px)) {
    .backdrop-blur-neural {
        backdrop-filter: blur(20px) saturate(150%) brightness(1.1);
    }
}

/* Quantum PWA optimizations */
@media (display-mode: standalone) {
    body {
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        background-attachment: fixed;
    }
}

/* Enhanced landscape quantum orientation handling */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .text-3xl {
        font-size: 1.8rem;
    }
    
    .text-4xl {
        font-size: 2rem;
    }
    
    .p-6 {
        padding: 1.5rem;
    }
    
    .space-y-6 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 1.5rem;
    }
    
    .h-32 {
        height: 6rem;
    }
}

/* Quantum high DPI displays (Neural Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
    
    /* Enhanced quantum glow effects for retina */
    .animate-quantum-glow {
        filter: drop-shadow(0 0 8px rgba(255, 204, 0, 0.6));
    }
}

/* Quantum print styles for neural iOS Safari */
@media print {
    body {
        background: white !important;
        color: black !important;
    }
    
    .prose h1, .prose h2, .prose h3 {
        color: #ff0066 !important;
        text-shadow: none !important;
        background: none !important;
        -webkit-text-fill-color: #ff0066 !important;
    }
    
    .backdrop-blur-neural,
    .bg-gradient-to-br,
    .bg-gradient-to-r {
        background: white !important;
        backdrop-filter: none !important;
    }
}

/* Neural-specific quantum bug fixes */
input[type="range"] {
    -webkit-appearance: none;
    height: 6px;
}

/* Enhanced iOS quantum zoom prevention */
@media screen and (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px;
        -webkit-text-size-adjust: 100%;
    }
}

/* Quantum neural notification positioning */
.quantum-notification {
    position: fixed;
    top: env(safe-area-inset-top, 0);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    margin-top: 12px;
}

/* Custom quantum scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(26, 26, 46, 0.5);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #ff0066, #ffcc00);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.3);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #ffcc00, #00ff99);
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.5);
}

/* Quantum selection styling */
::selection {
    background: rgba(255, 204, 0, 0.3);
    color: white;
    text-shadow: 0 0 5px rgba(255, 204, 0, 0.5);
}

::-moz-selection {
    background: rgba(255, 204, 0, 0.3);
    color: white;
    text-shadow: 0 0 5px rgba(255, 204, 0, 0.5);
}

/* Neural accessibility enhancements */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .animate-neural-pulse,
    .animate-quantum-glow,
    .animate-particle-float {
        animation: none;
    }
}

/* Quantum focus indicators for accessibility */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid #ffcc00;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(255, 204, 0, 0.2);
}

/* Enhanced quantum loading states */
.neural-loading {
    position: relative;
    overflow: hidden;
}

.neural-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 204, 0, 0.2), transparent);
    animation: neural-shimmer 2s infinite;
}

@keyframes neural-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}