/* ═══════════════════════════════════════════════════════
 ZONE.CSS — Landing Page Styles
 zoneph.com
═══════════════════════════════════════════════════════ */

/* === BASE === */
.zone-bg {
 background: #fff;
}
.dark .zone-bg {
 background: #161C24;
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb { background: #333; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* === RAINBOW ANIMATED BORDER === */
@property --rainbow-angle {
 syntax: "<angle>";
 initial-value: 0deg;
 inherits: false;
}
@keyframes rainbow-rotate {
 to { --rainbow-angle: 360deg; }
}
.rainbow-box {
 position: relative;
 border-radius: 1.5rem;
 padding: 3px;
 background: conic-gradient(
 from var(--rainbow-angle),
 #ff5630,
 #ff49db,
 #7928ca,
 #0070f3,
 #00dfd8,
 #34d399,
 #facc15,
 #ff5630
 );
 animation: rainbow-rotate 3s linear infinite;
}
.rainbow-box::before {
 content: '';
 position: absolute;
 inset: -3px;
 border-radius: 1.7rem;
 background: conic-gradient(
 from var(--rainbow-angle),
 #ff5630,
 #ff49db,
 #7928ca,
 #0070f3,
 #00dfd8,
 #34d399,
 #facc15,
 #ff5630
 );
 animation: rainbow-rotate 3s linear infinite;
 filter: blur(14px);
 opacity: 0.35;
 z-index: -1;
}
.rainbow-content {
 background: #fff;
 border-radius: calc(1.5rem - 3px);
 width: 100%;
 height: 100%;
}
.dark .rainbow-content {
 background: #161C24;
}

/* === ORANGE UNDERLINE === */
.orange-underline {
 position: relative;
 display: inline-block;
}
.orange-underline::after {
 content: '';
 position: absolute;
 bottom: -4px;
 left: 0;
 width: 100%;
 height: 4px;
 background: linear-gradient(90deg, #FF5630, #ff49db, #7928ca, #0070f3);
 background-size: 200% 100%;
 animation: underline-shimmer 3s ease infinite;
 border-radius: 2px;
}
@keyframes underline-shimmer {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
}

/* === MARQUEE === */
.marquee-container {
 overflow: hidden;
 mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
 -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee-content {
 display: flex;
 width: max-content;
}

/* === DROPDOWN === */
.dropdown-menu {
 animation: dropdownFade 0.15s ease;
}
@keyframes dropdownFade {
 from { opacity: 0; transform: translateY(-6px); }
 to { opacity: 1; transform: translateY(0); }
}

/* === ANIMATIONS === */
.animate-fade-in-up {
 opacity: 0;
 animation: fadeInUp 0.8s ease-out forwards;
}
@keyframes fadeInUp {
 from { opacity: 0; transform: translateY(20px); }
 to { opacity: 1; transform: translateY(0); }
}

/* === TESTIMONIAL === */
#testi-quote {
 transition: opacity 0.3s ease;
}

/* === BUTTONS HOVER GLOW === */
.btn-glow {
 box-shadow: 0 4px 20px rgba(255, 86, 48, 0.3);
}
.btn-glow:hover {
 box-shadow: 0 6px 30px rgba(255, 86, 48, 0.5);
}

/* === MOBILE MENU === */
#mobile-menu a {
 transition: color 0.15s, transform 0.15s;
}
#mobile-menu a:hover {
 color: #FF5630;
 transform: translateX(4px);
}

/* === FIREFOX FALLBACK (rainbow) === */
@supports not (background: conic-gradient(from 0deg, red, red)) {
 .rainbow-box {
 background: linear-gradient(90deg, #ff5630, #ff49db, #7928ca, #0070f3, #00dfd8, #34d399, #facc15, #ff5630);
 background-size: 300% 300%;
 animation: rainbow-linear 4s ease infinite;
 }
 .rainbow-box::before {
 background: linear-gradient(90deg, #ff5630, #ff49db, #7928ca, #0070f3, #00dfd8, #34d399, #facc15, #ff5630);
 background-size: 300% 300%;
 animation: rainbow-linear 4s ease infinite;
 }
 @keyframes rainbow-linear {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
 }
}

/* === MISC === */
.text-zone-orange { color: #FF5630; }
.bg-zone-orange { background-color: #FF5630; }

/* Focus ring override */
input:focus, select:focus, textarea:focus {
 --tw-ring-color: rgba(255, 86, 48, 0.2);
}

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