/* Additional custom styles for 360 Browser */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #F9FAFB;
}

::-webkit-scrollbar-thumb {
    background: #0B69C1;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #0953AA;
}

/* Enhanced focus styles for keyboard accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #22D3EE;
    outline-offset: 3px;
    border-radius: 4px;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.2);
}

/* Skip to main content link for keyboard users */
.skip-to-main {
    position: absolute;
    top: -40px;
    left: 0;
    background: #0B69C1;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100;
    border-radius: 0 0 4px 0;
}

.skip-to-main:focus {
    top: 0;
}

/* Ensure all interactive elements are keyboard accessible */
a[href],
button:not(:disabled),
input:not(:disabled),
textarea:not(:disabled),
select:not(:disabled),
[tabindex]:not([tabindex="-1"]) {
    /* Ensure elements are focusable */
}

/* Remove outline only for mouse users, keep for keyboard */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Enhanced keyboard navigation styles */
.keyboard-user *:focus {
    outline: 3px solid #22D3EE;
    outline-offset: 2px;
}

/* Ensure images are responsive and properly displayed */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Smooth transitions for all interactive elements */
a, button {
    transition: all 0.3s ease-out;
    cursor: pointer;
}

/* Professional hover effects for all links */
a {
    cursor: pointer;
    transition: color 0.2s ease-out, transform 0.2s ease-out, opacity 0.2s ease-out;
}

a:hover {
    opacity: 0.9;
}

/* Enhanced button hover effects */
button {
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

button:active:not(:disabled) {
    transform: translateY(0);
}

/* All clickable elements should have pointer cursor */
[role="button"],
[onclick],
input[type="button"],
input[type="submit"],
label[for] {
    cursor: pointer;
}

/* Card hover effects */
.card-hover {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Button hover effects */
.btn-primary {
    transition: all 0.3s ease-out;
}

.btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 25px -5px rgba(11, 105, 193, 0.3), 0 10px 10px -5px rgba(11, 105, 193, 0.2);
}

/* FAQ accordion smooth transitions */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.3s ease-out;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.faq-answer.hidden {
    display: none;
}

.faq-answer:not(.hidden) {
    display: block;
}

.faq-answer.open {
    max-height: 500px;
    opacity: 1;
    padding-top: 0;
    padding-bottom: 0;
}

/* Form input focus styles */
input[type="text"],
input[type="email"],
textarea {
    transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: #0B69C1 !important;
    box-shadow: 0 0 0 3px rgba(11, 105, 193, 0.1) !important;
}

/* Sticky CTA animation */
#sticky-cta {
    transition: transform 0.5s ease-out;
    will-change: transform;
}

/* Reveal on scroll initial state */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile menu improvements */
#mobile-menu {
    transition: all 0.3s ease-out;
}

/* Container max-width improvements - Desktop-first optimization */
.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Ultra-wide screen optimization (1440px to 4K) */
@media (min-width: 1440px) {
    .container {
        max-width: 1200px;
    }
    
    /* Prevent content from stretching too wide on ultra-wide screens */
    body {
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Optimize section spacing for large screens */
    section {
        padding-left: 0;
        padding-right: 0;
    }
}

/* 4K and larger screens */
@media (min-width: 2560px) {
    .container {
        max-width: 1400px;
    }
}

/* Ensure proper spacing for sections */
section {
    position: relative;
}

/* Button improvements - Enhanced hover states */
button,
a[href*="download"],
a.btn,
button.btn {
    cursor: pointer;
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

button:hover:not(:disabled),
a[href*="download"]:hover,
a.btn:hover,
button.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

button:active:not(:disabled),
a[href*="download"]:active,
a.btn:active,
button.btn:active {
    transform: translateY(0);
}

/* Link hover effects */
a:not(button):hover {
    text-decoration: underline;
    opacity: 0.85;
}

/* Navigation link hover effects */
nav a:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

/* Card hover effects - Enhanced */
.reveal-on-scroll:hover,
.card-hover:hover,
[class*="hover:"]:hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Prevent text selection on buttons */
button {
    user-select: none;
}

/* Image loading improvements */
img[src*="media/"] {
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

/* Form success message animation */
#form-success {
    animation: slideDown 0.3s ease-out;
}

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

/* Mobile responsiveness improvements */
@media (max-width: 768px) {
    #sticky-cta {
        padding: 12px 16px;
    }
    
    #sticky-cta a {
        font-size: 0.875rem;
        padding: 8px 16px;
    }
    
    .reveal-on-scroll {
        transform: translateY(20px);
    }
}

/* Floating animation for Extension Center icons */
@keyframes float1 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

@keyframes float2 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) rotate(-5deg);
    }
}

@keyframes float3 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-25px) rotate(3deg);
    }
}

@keyframes float4 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-18px) rotate(-3deg);
    }
}

@keyframes float5 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-22px) rotate(4deg);
    }
}

@keyframes float6 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-16px) rotate(-4deg);
    }
}

@keyframes float7 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-19px) rotate(2deg);
    }
}

@keyframes float8 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-21px) rotate(-2deg);
    }
}

@keyframes float9 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-17px) rotate(3deg);
    }
}

@keyframes float10 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-23px) rotate(-3deg);
    }
}

@keyframes float11 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-14px) rotate(4deg);
    }
}

@keyframes float12 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(-4deg);
    }
}

.float-animation-1 {
    animation: float1 3s ease-in-out infinite;
    animation-delay: 0s;
}

.float-animation-2 {
    animation: float2 3.5s ease-in-out infinite;
    animation-delay: 0.5s;
}

.float-animation-3 {
    animation: float3 4s ease-in-out infinite;
    animation-delay: 1s;
}

.float-animation-4 {
    animation: float4 3.2s ease-in-out infinite;
    animation-delay: 0.3s;
}

.float-animation-5 {
    animation: float5 3.7s ease-in-out infinite;
    animation-delay: 0.7s;
}

.float-animation-6 {
    animation: float6 4.2s ease-in-out infinite;
    animation-delay: 1.2s;
}

.float-animation-7 {
    animation: float7 3.3s ease-in-out infinite;
    animation-delay: 0.4s;
}

.float-animation-8 {
    animation: float8 3.8s ease-in-out infinite;
    animation-delay: 0.8s;
}

.float-animation-9 {
    animation: float9 3.6s ease-in-out infinite;
    animation-delay: 0.6s;
}

.float-animation-10 {
    animation: float10 4.1s ease-in-out infinite;
    animation-delay: 1.1s;
}

.float-animation-11 {
    animation: float11 3.4s ease-in-out infinite;
    animation-delay: 0.2s;
}

.float-animation-12 {
    animation: float12 3.9s ease-in-out infinite;
    animation-delay: 0.9s;
}

/* Line clamp utilities for extension cards */
.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;
}

/* Marquee animation for video card */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.animate-scroll {
    animation: scroll 30s linear infinite;
}

.animate-scroll:hover {
    animation-play-state: paused;
}

/* Marquee animations for Extension Library */
@keyframes marquee-right {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes marquee-left {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

.marquee-row {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.marquee-wrapper {
    display: flex;
    gap: 1rem;
    width: fit-content;
}

.marquee-wrapper.marquee-right {
    animation: marquee-right 40s linear infinite;
    will-change: transform;
}

.marquee-wrapper.marquee-left {
    animation: marquee-left 40s linear infinite;
    will-change: transform;
}

.marquee-content {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}

.marquee-row:hover .marquee-wrapper {
    animation-play-state: paused;
}

/* Glow effects for Download CTA */
.download-cta-glow {
    position: relative;
}

.download-cta-glow::before {
    content: '';
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(147, 51, 234, 0.3) 0%, transparent 70%);
    filter: blur(40px);
    z-index: -1;
    pointer-events: none;
}

/* Print styles */
@media print {
    header,
    footer,
    #sticky-cta {
        display: none !important;
    }
    
    body {
        background: white;
    }
}