/* Modern CSS Architecture & Animation System for Zenrise Digitech */

:root {
  --solar-orange: #E64A19;
  --solar-orange-glow: rgba(230, 74, 25, 0.25);
  --sunrise-amber: #F57C00;
  --sunrise-gold: #F59E0B;
  --obsidian-950: #07080B;
  --obsidian-900: #0B0C10;
  --obsidian-850: #11131A;
  --obsidian-800: #171A24;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--obsidian-950);
  color: #f8fafc;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Glassmorphic Dark Surfaces */
.glass-panel {
  background: rgba(17, 19, 26, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-panel-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-panel-hover:hover {
  background: rgba(25, 29, 42, 0.85);
  border-color: rgba(230, 74, 25, 0.35);
  box-shadow: 0 12px 35px -10px rgba(230, 74, 25, 0.2);
  transform: translateY(-4px);
}

/* Glassmorphic Light Mode Surfaces */
body.light-mode-active .light-glass-panel {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
}

body.light-mode-active .light-glass-panel-hover:hover {
  background: #ffffff;
  border-color: rgba(230, 74, 25, 0.4);
  box-shadow: 0 16px 35px -10px rgba(230, 74, 25, 0.15);
  transform: translateY(-4px);
}

/* Elegant Softened Text Gradients */
.text-gradient-sunrise {
  background: linear-gradient(135deg, #D93800 0%, #E66A00 50%, #F59E0B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.light-mode-active .text-gradient-sunrise {
  background: linear-gradient(135deg, #C23000 0%, #D95D00 50%, #D97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-solar {
  background: linear-gradient(135deg, #F8FAFC 20%, #F57C00 60%, #E64A19 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.light-mode-active .text-gradient-solar {
  background: linear-gradient(135deg, #0F172A 20%, #D95D00 60%, #C23000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Glow Halos & Soft Shadows */
.shadow-solar-glow {
  box-shadow: 0 4px 20px -2px rgba(230, 74, 25, 0.28);
}

.shadow-solar-glow-lg {
  box-shadow: 0 8px 35px -4px rgba(230, 74, 25, 0.35);
}

.sunrise-bg-glow {
  background: radial-gradient(circle at 50% 20%, rgba(230, 74, 25, 0.15) 0%, rgba(245, 124, 0, 0.07) 35%, rgba(11, 12, 16, 0) 75%);
}

/* Hero Animated Background Beams & Glowing Orbs */
.hero-animated-beam {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 87, 34, 0.25) 0%, rgba(255, 145, 0, 0.12) 40%, rgba(7, 8, 11, 0) 70%);
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: heroPulseGlow 6s infinite ease-in-out alternate;
}

.hero-orb-1 {
  position: absolute;
  top: 20%;
  right: 8%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(255, 145, 0, 0.2) 0%, rgba(255, 87, 34, 0.05) 50%, rgba(0, 0, 0, 0) 70%);
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  animation: heroFloat 8s infinite ease-in-out alternate;
}

.hero-orb-2 {
  position: absolute;
  bottom: 10%;
  left: 5%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(255, 87, 34, 0.18) 0%, rgba(255, 193, 7, 0.05) 50%, rgba(0, 0, 0, 0) 70%);
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  animation: heroFloat 10s infinite ease-in-out reverse;
}

@keyframes heroPulseGlow {
  0% { transform: translateX(-50%) scale(0.9); opacity: 0.5; }
  100% { transform: translateX(-50%) scale(1.15); opacity: 0.9; }
}

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

/* Continuous Infinite Marquee Ticker */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
}

.marquee-content {
  display: inline-flex;
  gap: 2rem;
  animation: marqueeScroll 25s linear infinite;
  will-change: transform;
}

.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

@keyframes marqueeScroll {
  0% { transform: translate3d(0%, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* Form Accent Colors */
input[type="range"], input[type="checkbox"], input[type="radio"] {
  accent-color: var(--solar-orange);
}

/* Custom Cursor Styles */
@media (pointer: coarse) {
  #custom-cursor-dot,
  #custom-cursor-ring {
    display: none !important;
  }
}

@media (pointer: fine) {
  body.custom-cursor-enabled {
    cursor: none;
  }

  body.custom-cursor-enabled a,
  body.custom-cursor-enabled button,
  body.custom-cursor-enabled input,
  body.custom-cursor-enabled textarea,
  body.custom-cursor-enabled select,
  body.custom-cursor-enabled [role="button"] {
    cursor: none;
  }
}

#custom-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  margin-left: -4px;
  background-color: var(--solar-orange);
  border-radius: 50%;
  pointer-events: none !important;
  z-index: 9999;
  box-shadow: 0 0 10px var(--solar-orange-glow);
  will-change: transform;
}

#custom-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  margin-left: -18px;
  border: 1.5px solid rgba(230, 74, 25, 0.5);
  border-radius: 50%;
  pointer-events: none !important;
  z-index: 9998;
  box-shadow: 0 0 15px rgba(230, 74, 25, 0.2);
  transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  will-change: transform;
}

#custom-cursor-dot.hovered {
  transform: scale(2.2);
  background-color: var(--sunrise-gold);
}

#custom-cursor-ring.hovered {
  border-color: rgba(245, 124, 0, 0.8);
  background-color: rgba(230, 74, 25, 0.08);
}

#custom-cursor-dot.clicked {
  transform: scale(0.7);
}

#custom-cursor-ring.clicked {
  background-color: rgba(230, 74, 25, 0.25);
}

/* Magnetic Buttons */
.btn-magnetic {
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

/* Smooth Scroll Reveal Animations */
.reveal {
  opacity: 0;
  transform: translateY(50px) scale(0.97);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger Delays for Grid Elements */
.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }
.reveal-delay-4 { transition-delay: 0.6s; }
.reveal-delay-5 { transition-delay: 0.75s; }

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

::-webkit-scrollbar-track {
  background: var(--obsidian-950);
}

::-webkit-scrollbar-thumb {
  background: #212636;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--solar-orange);
}

/* Fade in Keyframe Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
  animation: fadeIn 0.35s ease-out forwards;
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spinSlow 12s linear infinite;
}

/* ==========================================================================
   LIGHT MODE COMPLETE OVERRIDES (HERO 100VH + HEADER + SECTIONS)
   ========================================================================== */
body.light-mode-active {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* Header & Mobile Dropdown adaptation */
#mobile-menu-dropdown {
  background: rgba(11, 12, 16, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.light-mode-active header {
  background-color: rgba(255, 255, 255, 0.94) !important;
  border-bottom-color: rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.05) !important;
}

body.light-mode-active #mobile-menu-dropdown {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom-color: rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08) !important;
}

body.light-mode-active #mobile-menu-dropdown nav a {
  color: #1e293b !important;
}

body.light-mode-active #mobile-menu-dropdown nav a:hover {
  background-color: rgba(230, 74, 25, 0.1) !important;
  color: #E64A19 !important;
}

body.light-mode-active header .font-display {
  color: #0f172a !important;
}

body.light-mode-active header nav {
  background: rgba(241, 245, 249, 0.85) !important;
  border-color: rgba(203, 213, 225, 0.8) !important;
}

body.light-mode-active header nav a {
  color: #334155 !important;
}

body.light-mode-active header nav a:hover {
  color: #FF5722 !important;
  background-color: rgba(255, 87, 34, 0.1) !important;
}

body.light-mode-active #theme-toggle-btn {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}

/* Top 100vh Hero Adaptation in Light Mode */
body.light-mode-active #hero {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-bottom-color: rgba(226, 232, 240, 0.9) !important;
}

body.light-mode-active #hero h1 {
  color: #0f172a !important;
}

body.light-mode-active #hero p {
  color: #475569 !important;
}

body.light-mode-active #hero .font-display.text-white {
  color: #0f172a !important;
}

body.light-mode-active #hero .text-slate-300,
body.light-mode-active #hero .text-slate-400 {
  color: #64748b !important;
}

body.light-mode-active #hero .border-white\/10,
body.light-mode-active #hero .border-white\/15 {
  border-color: rgba(226, 232, 240, 0.9) !important;
}

body.light-mode-active #hero .glass-panel {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.08) !important;
  color: #0f172a !important;
}

body.light-mode-active #hero a.glass-panel:hover {
  background: #ffffff !important;
  border-color: rgba(255, 87, 34, 0.5) !important;
  color: #FF5722 !important;
}

body.light-mode-active #sunrise-canvas {
  opacity: 1.0 !important;
}

body.light-mode-active .hero-animated-beam {
  background: radial-gradient(circle, rgba(255, 87, 34, 0.35) 0%, rgba(255, 145, 0, 0.18) 40%, rgba(255, 255, 255, 0) 75%) !important;
  filter: blur(60px) !important;
  opacity: 1 !important;
}

body.light-mode-active .hero-orb-1 {
  background: radial-gradient(circle, rgba(255, 145, 0, 0.42) 0%, rgba(255, 87, 34, 0.2) 50%, rgba(255, 255, 255, 0) 75%) !important;
  filter: blur(45px) !important;
  opacity: 1 !important;
}

body.light-mode-active .hero-orb-2 {
  background: radial-gradient(circle, rgba(255, 87, 34, 0.4) 0%, rgba(255, 193, 7, 0.18) 50%, rgba(255, 255, 255, 0) 75%) !important;
  filter: blur(50px) !important;
  opacity: 1 !important;
}

/* Footer Adaptation in Light Mode */
body.light-mode-active #site-footer {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-top-color: rgba(226, 232, 240, 0.9) !important;
}

body.light-mode-active #site-footer h4,
body.light-mode-active #site-footer .font-display {
  color: #0f172a !important;
}

body.light-mode-active #site-footer p,
body.light-mode-active #site-footer ul,
body.light-mode-active #site-footer li,
body.light-mode-active #site-footer a,
body.light-mode-active #site-footer div {
  color: #334155 !important;
}

body.light-mode-active #site-footer a:hover {
  color: #FF5722 !important;
}

body.light-mode-active #site-footer .border-slate-200\/20,
body.light-mode-active #site-footer .border-t {
  border-color: rgba(226, 232, 240, 0.9) !important;
}

body.light-mode-active ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}

/* ==========================================================================
   MOBILE HIGH-PERFORMANCE OPTIMIZATIONS (<768px)
   ========================================================================== */
@media (max-width: 767px) {
  /* Reduce GPU compositor load from heavy blurs on mobile */
  .hero-animated-beam {
    filter: blur(25px) !important;
    animation: none !important;
    width: 280px;
    height: 280px;
  }
  .hero-orb-1, .hero-orb-2 {
    filter: blur(20px) !important;
    animation: none !important;
    width: 180px;
    height: 180px;
  }

  /* Tap Target Sizes (min 44x44px for accessibility) */
  #mobile-menu-btn,
  #theme-toggle-btn-mobile {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #mobile-menu-dropdown nav a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* Absolute Positioning for Mobile Dropdown Menu (Prevents Header Shift) */
#mobile-menu-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   PURE CSS MICRO-INTERACTIONS (ZERO JS OVERHEAD)
   ========================================================================== */
/* Ambient Pulse Glow on Button Hover */
.shadow-solar-glow:hover {
  box-shadow: 0 8px 30px 2px rgba(230, 74, 25, 0.45);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Form Field Focus Ring Micro-Interaction */
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: var(--solar-orange) !important;
  box-shadow: 0 0 0 3px rgba(230, 74, 25, 0.25) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Smooth Page Active Link Highlight Accent */
header nav a.text-white {
  position: relative;
}