/* ============================================
   MRI Solutions - Template Design System
   Cloned from Cruip Tailwind Landing Page Template
   ============================================ */

/* --- Base Typography --- */
body {
    font-family: 'Inter', sans-serif;
    background: #fafafa;
    color: #111827;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.017em;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.037em;
}

/* --- Animations from Template --- */
@keyframes code-1 {
    0% { opacity: 0; }
    2.5% { opacity: 1; }
    97.5% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes code-2 {
    16.2% { opacity: 0; }
    18.75% { opacity: 1; }
    97.5% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes code-3 {
    32.5% { opacity: 0; }
    35% { opacity: 1; }
    97.5% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes code-4 {
    48.75% { opacity: 0; }
    51.25% { opacity: 1; }
    97.5% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes code-5 {
    65% { opacity: 0; }
    72.5% { opacity: 1; }
    97.5% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes code-6 {
    81.25% { opacity: 0; }
    83.75% { opacity: 1; }
    97.5% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes breath {
    0%, 100% { transform: scale(0.95); }
    50% { transform: scale(1.1); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5%); }
}
@keyframes line {
    0%, 100% { left: 0; opacity: 0; }
    50% { left: 100%; transform: translateX(-100%); }
    10%, 40%, 60%, 90% { opacity: 0; }
    25%, 75% { opacity: 1; }
}
@keyframes infinite-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* Animation utility classes */
.animate-code-1 { animation: code-1 10s infinite; }
.animate-code-2 { animation: code-2 10s infinite; }
.animate-code-3 { animation: code-3 10s infinite; }
.animate-code-4 { animation: code-4 10s infinite; }
.animate-code-5 { animation: code-5 10s infinite; }
.animate-code-6 { animation: code-6 10s infinite; }
.animate-breath { animation: breath 8s ease-in-out infinite both; }
.animate-float { animation: float 4s ease-in-out infinite both; }
.animate-line { animation: line 10s ease-in-out infinite both; }
.animate-infinite-scroll { animation: infinite-scroll 40s linear infinite; }

/* --- Buttons (from template utility-patterns.css) --- */
.btn,
.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s;
    text-decoration: none;
    cursor: pointer;
}

.btn {
    padding: 0.6875rem 1rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -4px rgba(0,0,0,0.05);
}

.btn-sm {
    padding: 0.3125rem 0.75rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}

.btn-blue {
    background: linear-gradient(to top, #2563eb, #3b82f6);
    background-size: 100% 100%;
    background-position: bottom;
    color: #fff;
}
.btn-blue:hover {
    background-size: 100% 150%;
}

.btn-gray-800 {
    background: #1f2937;
    color: #e5e7eb;
}
.btn-gray-800:hover {
    background: #111827;
}

.btn-white {
    background: #fff;
    color: #1f2937;
}
.btn-white:hover {
    background: #f9fafb;
}

/* --- Forms (from template utility-patterns.css) --- */
.form-input,
.form-textarea,
.form-multiselect,
.form-select,
.form-checkbox,
.form-radio {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input,
.form-textarea,
.form-multiselect,
.form-select {
    background: #fff;
    font-size: 0.875rem;
    padding: 0.625rem 1rem;
    color: #111827;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: #93c5fd;
    outline: none;
    box-shadow: 0 0 0 1px #93c5fd;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: #9ca3af;
}

.form-checkbox,
.form-radio {
    color: #1f2937;
}

.form-checkbox:checked,
.form-radio:checked {
    background-color: #3b82f6;
    border-color: transparent;
}

/* --- Gradient Border (header, cards) --- */
.gradient-border {
    position: relative;
}
.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid transparent;
    background: linear-gradient(#f3f4f6, #e5e7eb) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

/* --- Border Image Gradient (horizontal lines) --- */
.border-image-gradient-y {
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-image: linear-gradient(to right, transparent, rgba(203,213,225,0.8), transparent) 1;
}

.border-image-gradient-top {
    border-top: 1px solid;
    border-image: linear-gradient(to right, transparent, rgba(203,213,225,0.8), transparent) 1;
}

/* --- Scroll Reveal (AOS-like) --- */
[data-aos="zoom-y-out"] {
    transform: scaleX(1.03);
    opacity: 0;
    transition: transform 0.7s cubic-bezier(0.16,1,0.3,1), opacity 0.7s cubic-bezier(0.16,1,0.3,1);
}
[data-aos="zoom-y-out"].aos-animate {
    transform: scaleX(1);
    opacity: 1;
}

[data-aos="fade-up"] {
    transform: translateY(10px);
    opacity: 0;
    transition: transform 0.7s cubic-bezier(0.16,1,0.3,1), opacity 0.7s cubic-bezier(0.16,1,0.3,1);
}
[data-aos="fade-up"].aos-animate {
    transform: translateY(0);
    opacity: 1;
}

[data-aos="fade-down"] {
    transform: translateY(-10px);
    opacity: 0;
    transition: transform 0.7s cubic-bezier(0.16,1,0.3,1), opacity 0.7s cubic-bezier(0.16,1,0.3,1);
}
[data-aos="fade-down"].aos-animate {
    transform: translateY(0);
    opacity: 1;
}

[data-aos="zoom-in"] {
    transform: scale(0.6);
    opacity: 0;
    transition: transform 0.7s cubic-bezier(0.16,1,0.3,1), opacity 0.7s cubic-bezier(0.16,1,0.3,1);
}
[data-aos="zoom-in"].aos-animate {
    transform: scale(1);
    opacity: 1;
}

/* AOS delay utilities */
[data-aos-delay="150"] { transition-delay: 150ms; }
[data-aos-delay="300"] { transition-delay: 300ms; }
[data-aos-delay="450"] { transition-delay: 450ms; }
[data-aos-delay="600"] { transition-delay: 600ms; }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f5f5f5; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* --- Selection --- */
::selection { background: #1f2937; color: #fff; }

/* --- Terminal/Code Block --- */
.terminal-block {
    background: #111827;
    border-radius: 1rem;
    padding: 0.75rem 1.25rem;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    font-family: 'Roboto Mono', monospace;
}

.terminal-dots {
    display: flex;
    gap: 6px;
    height: 9px;
    width: 41px;
    background-image: radial-gradient(circle at 4.5px 4.5px, #4b5563 4.5px, transparent 0);
    background-size: 16px 9px;
}

/* --- Floating Pill Header --- */
.header-pill {
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -4px rgba(0,0,0,0.05);
}

/* --- Glow Circles --- */
.glow-circle {
    border-radius: 50%;
    filter: blur(160px);
    pointer-events: none;
}

/* --- Big Footer Text --- */
.footer-big-text {
    font-size: 348px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    background: linear-gradient(to bottom, #e5e7eb, rgba(243,244,246,0.3) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --- Orbiting Logo Container --- */
.orbit-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05), 0 4px 6px -4px rgba(0,0,0,0.05);
    position: relative;
}
.orbit-logo::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: 8.334%;
    border-radius: inherit;
    border: 1px solid rgba(17,24,39,0.05);
    background: rgba(229,231,235,0.6);
    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
    mask-image: linear-gradient(to bottom, black, transparent);
}

/* --- Conic Gradient Ring (spinning) --- */
.conic-ring {
    position: relative;
}
.conic-ring::before {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 1px solid transparent;
    background: conic-gradient(from 180deg, transparent, #3b82f6) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: spin 3s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- Dark Section (Features Planet) --- */
.dark-section {
    background: #111827;
    color: #e5e7eb;
}

/* --- CTA Glow --- */
.cta-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 480px;
    height: 224px;
    border-radius: 50%;
    border: 20px solid #3b82f6;
    filter: blur(48px);
    pointer-events: none;
}

/* --- Footer Glow --- */
.footer-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 66%);
    width: 224px;
    height: 224px;
    border-radius: 50%;
    border: 20px solid #1d4ed8;
    filter: blur(80px);
    pointer-events: none;
}

/* --- Auth Layout --- */
.auth-glow {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateX(-33%);
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: linear-gradient(to top right, #3b82f6);
    filter: blur(160px);
    opacity: 0.7;
    pointer-events: none;
}

/* --- Card with subtle shadow --- */
.card-template {
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.07), 0 1px 2px 0 rgba(0,0,0,0.04);
}

/* --- Accordion --- */
.accordion-item {
    position: relative;
    border-radius: 0.5rem;
    background: rgba(255,255,255,0.7);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.03);
}

/* --- Blue Dot Pattern --- */
.blue-dots {
    fill: #3b82f6;
}

/* --- Horizontal Line Gradient --- */
.h-line-gradient {
    background: linear-gradient(to right, transparent, #e5e7eb, transparent);
    height: 1px;
}

.h-line-blue {
    background: linear-gradient(to right, transparent, rgba(59,130,246,0.6), transparent);
    height: 1px;
}

/* --- Animated Line Sweep --- */
.line-sweep {
    position: relative;
    overflow: hidden;
}
.line-sweep::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6rem;
    background: linear-gradient(to right, transparent, #3b82f6, transparent);
    animation: line 10s ease-in-out infinite both;
}

/* --- Breath Animation (orbiting icons) --- */
.animate-breath {
    animation: breath 8s ease-in-out infinite both;
}

/* --- Float Animation --- */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* --- Infinite Scroll Animation --- */
.animate-infinite-scroll {
    animation: infinite-scroll 40s linear infinite;
}

@keyframes breath {
    0%, 100% { transform: scale(0.95); }
    50% { transform: scale(1.1); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5%); }
}

@keyframes line {
    0%, 100% { left: 0; opacity: 0; }
    50% { left: 100%; transform: translateX(-100%); }
    10%, 40%, 60%, 90% { opacity: 0; }
    25%, 75% { opacity: 1; }
}

@keyframes infinite-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* --- Planet Glow --- */
.planet-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transform: scale(0.85);
    background: linear-gradient(to bottom, #1e3a8a, rgba(2,132,199,0.5));
    filter: blur(48px);
    animation: breath-glow 4s cubic-bezier(0.4,0,0.6,1) infinite;
}

@keyframes breath-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .animate-code-1, .animate-code-2, .animate-code-3,
    .animate-code-4, .animate-code-5, .animate-code-6,
    .animate-breath, .animate-float,
    .animate-infinite-scroll, .conic-ring::before,
    .planet-glow, .line-sweep::before {
        animation: none !important;
    }
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}