/* ============================================
   MABORATES 3D PREMIUM DESIGN SYSTEM
   Style: Premium Dark + 3D Depth Effects
   For: MaboRates.com — US Financial Comparison
   ============================================ */

/* ===== 3D CSS CUSTOM PROPERTIES ===== */
:root {
  --3d-glow-teal: 0 0 20px rgba(13,148,136,.25), 0 0 60px rgba(13,148,136,.1);
  --3d-glow-red: 0 0 20px rgba(249,112,102,.25), 0 0 60px rgba(249,112,102,.1);
  --3d-depth-shadow: 0 4px 6px rgba(0,0,0,.1), 0 10px 30px rgba(0,0,0,.15), 0 20px 60px rgba(0,0,0,.1);
  --3d-depth-shadow-hover: 0 8px 16px rgba(0,0,0,.15), 0 20px 50px rgba(0,0,0,.2), 0 30px 80px rgba(0,0,0,.12);
  --3d-float-distance: -12px;
  --3d-tilt-amount: 4deg;
  --3d-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --glow-border: rgba(13,148,136,.3);
  --glow-border-hover: rgba(13,148,136,.6);
}

/* ===== REDUCED MOTION RESPECT ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .floating-orb, .parallax-bg, .glow-pulse { display: none !important; }
}

/* ===== 3D CARD EFFECTS ===== */

/* Offer cards — 3D tilt + glow border */
.offer-card {
  position: relative;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(0) rotateY(0) translateZ(0);
  transition: var(--3d-transition);
  border: 1.5px solid rgba(255,255,255,.08) !important;
  overflow: visible;
}

.offer-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(13,148,136,.4), rgba(249,112,102,.2), rgba(13,148,136,.1));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
  filter: blur(8px);
}

.offer-card:hover {
  transform: perspective(1000px) rotateX(0) rotateY(0) translateY(var(--3d-float-distance)) translateZ(20px);
  box-shadow: var(--3d-depth-shadow-hover), var(--3d-glow-teal);
  border-color: var(--glow-border-hover) !important;
}

.offer-card:hover::before {
  opacity: 1;
}

/* Category cards — 3D lift + perspective */
.cat-card {
  transform-style: preserve-3d;
  transform: perspective(800px) translateZ(0);
  transition: var(--3d-transition);
  position: relative;
  overflow: visible;
}

.cat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid transparent;
  background: linear-gradient(135deg, rgba(13,148,136,.3), rgba(249,112,102,.15)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.cat-card:hover {
  transform: perspective(800px) translateY(-14px) translateZ(30px) rotateX(3deg);
  box-shadow: var(--3d-depth-shadow-hover);
}

.cat-card:hover::after {
  opacity: 1;
}

/* Trust/stat cards — 3D pop */
.trust-card, .stat-card, .step-card, .how-card {
  transform-style: preserve-3d;
  transform: perspective(600px) translateZ(0);
  transition: var(--3d-transition);
}

.trust-card:hover, .stat-card:hover, .step-card:hover, .how-card:hover {
  transform: perspective(600px) translateY(-8px) translateZ(15px);
  box-shadow: var(--3d-depth-shadow-hover);
}

/* FAQ items — subtle 3D */
.faq-item {
  transition: var(--3d-transition);
  transform: translateZ(0);
}

.faq-item:hover {
  transform: translateY(-3px) scale(1.005);
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
}

/* ===== 3D BUTTONS ===== */

.btn-cta, .cta-btn, .offer-cta, [class*="btn-primary"], button[type="submit"] {
  transform-style: preserve-3d;
  transform: perspective(400px) translateZ(0);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
}

.btn-cta:hover, .cta-btn:hover, .offer-cta:hover, [class*="btn-primary"]:hover {
  transform: perspective(400px) translateY(-3px) translateZ(8px);
  box-shadow: 0 8px 25px rgba(249,112,102,.35), 0 4px 12px rgba(0,0,0,.2);
}

.btn-cta:active, .cta-btn:active, .offer-cta:active, [class*="btn-primary"]:active {
  transform: perspective(400px) translateY(1px) translateZ(-2px);
  box-shadow: 0 2px 8px rgba(249,112,102,.2);
  transition-duration: 0.1s;
}

/* ===== 3D FLOATING ORBS (Background Depth) ===== */

.hero, [class*="newsletter"], .cats, .trust-section, .how-it-works {
  position: relative;
  overflow: hidden;
}

/* Orb 1 — Large teal, top right */
.hero::after,
.cats::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13,148,136,.12) 0%, transparent 70%);
  top: -100px;
  right: -100px;
  animation: floatOrb1 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Orb 2 — Smaller red/pink, bottom left */
.hero::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(249,112,102,.08) 0%, transparent 70%);
  bottom: -80px;
  left: -80px;
  animation: floatOrb2 10s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes floatOrb1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-30px, 20px) scale(1.05); }
  66% { transform: translate(15px, -15px) scale(0.97); }
}

@keyframes floatOrb2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(25px, -20px) scale(1.08); }
}

/* ===== 3D SECTION DEPTH LAYERS ===== */

section {
  position: relative;
}

/* Subtle top/bottom gradient borders between sections */
section + section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(13,148,136,.2) 30%, rgba(249,112,102,.15) 70%, transparent);
  pointer-events: none;
}

/* ===== GLOWING BORDER ANIMATION (Featured cards) ===== */

.offer-card .badge, .offer-card [class*="badge"] {
  position: relative;
  overflow: hidden;
}

.offer-card .badge::after, .offer-card [class*="badge"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  animation: shimmer 3s ease-in-out infinite;
}

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

/* ===== 3D HEADING TEXT DEPTH ===== */

h1, .hero h1, .hero-title {
  text-shadow:
    0 1px 0 rgba(255,255,255,.05),
    0 2px 4px rgba(0,0,0,.3),
    0 4px 8px rgba(0,0,0,.15),
    0 8px 16px rgba(0,0,0,.1);
}

h2, .section-title {
  text-shadow:
    0 1px 2px rgba(0,0,0,.2),
    0 4px 8px rgba(0,0,0,.1);
}

/* ===== 3D NAVBAR DEPTH ===== */

nav, .navbar, header nav {
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 2px 20px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.05) inset;
}

/* ===== 3D FOOTER DEPTH ===== */

footer {
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(13,148,136,.3) 30%, rgba(249,112,102,.2) 70%, transparent);
}

/* ===== 3D INPUT FIELDS ===== */

input[type="email"], input[type="text"], input[type="number"], input[type="tel"], select, textarea {
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,.05) inset;
}

input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(13,148,136,.15), 0 2px 4px rgba(0,0,0,.05) inset;
  transform: translateY(-1px);
}

/* ===== 3D FILTER BAR ===== */

.filter-bar {
  position: relative;
}

.filter-btn {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: translateZ(0);
}

.filter-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 4px 15px rgba(13,148,136,.2);
}

.filter-btn.active {
  box-shadow: 0 4px 15px rgba(13,148,136,.3), 0 0 20px rgba(13,148,136,.15);
}

/* ===== 3D SCROLL REVEAL ENHANCEMENTS ===== */

.reveal {
  transform: translateY(40px) perspective(600px) rotateX(2deg);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.reveal.visible {
  transform: translateY(0) perspective(600px) rotateX(0);
  opacity: 1;
}

/* ===== 3D NEWSLETTER SECTION ===== */

.newsletter {
  overflow: hidden;
}

.nl-form button {
  transform-style: preserve-3d;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nl-form button:hover {
  transform: translateY(-3px) translateZ(8px) scale(1.02);
  box-shadow: 0 8px 25px rgba(249,112,102,.4), 0 0 40px rgba(249,112,102,.15);
}

/* ===== 3D IMAGE / ICON EFFECTS ===== */

.cat-card img, .cat-card svg, .cat-icon {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cat-card:hover img, .cat-card:hover svg, .cat-card:hover .cat-icon {
  transform: scale(1.12) translateZ(20px) rotateY(-5deg);
}

/* ===== ANIMATED GRADIENT BORDER (Premium cards) ===== */

@keyframes borderGlow {
  0%, 100% { border-color: rgba(13,148,136,.3); }
  50% { border-color: rgba(249,112,102,.3); }
}

.offer-card:first-child {
  animation: borderGlow 4s ease-in-out infinite;
}

/* ===== 3D MOBILE OPTIMIZATIONS ===== */

@media (max-width: 768px) {
  :root {
    --3d-float-distance: -6px;
    --3d-tilt-amount: 2deg;
  }

  .offer-card:hover,
  .cat-card:hover {
    transform: perspective(800px) translateY(-6px) translateZ(10px);
  }

  .hero::after, .cats::after {
    width: 250px;
    height: 250px;
  }

  .hero::before {
    width: 200px;
    height: 200px;
  }
}

@media (max-width: 480px) {
  .offer-card:hover,
  .cat-card:hover {
    transform: translateY(-4px);
  }

  .hero::after, .hero::before, .cats::after {
    width: 150px;
    height: 150px;
    opacity: 0.5;
  }
}

/* ===== SMOOTH PAGE LOAD ANIMATION ===== */

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

body {
  animation: pageLoad 0.6s ease-out;
}

/* ===== 3D LINK/ANCHOR EFFECTS ===== */

.footer-col a, .nav-link {
  transition: all 0.25s ease;
  transform: translateZ(0);
  display: inline-block;
}

.footer-col a:hover, .nav-link:hover {
  transform: translateX(3px);
  text-shadow: 0 0 8px rgba(13,148,136,.3);
}

/* ===== GLASSMORPHISM ENHANCEMENT ===== */

.glass, .hero-form, .lead-capture, .lead-form {
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow:
    0 8px 32px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.1);
}

/* ===== STAR RATING 3D ===== */

.offer-stars {
  text-shadow: 0 2px 4px rgba(0,0,0,.3);
  filter: drop-shadow(0 1px 2px rgba(250,204,21,.3));
}

/* ===== SCROLLBAR 3D STYLE ===== */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(3,7,18,.5);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(13,148,136,.5), rgba(249,112,102,.3));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(13,148,136,.7), rgba(249,112,102,.5));
}