/* * =========================================
         * REVICA - CORE STYLES & VARIABLES
         * =========================================
         */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500&family=Syncopate:wght@400;700&display=swap");

:root {
  --bg-void: #000000;
  --text-main: #ffffff;
  --text-muted: #9a9aab;

  /* New Luxury Accents */
  --accent-violet: #7c7cff;
  /* Deep space violet for tech vibe */
  --accent-gold: #c2a25a;
  /* Muted gold for luxury feel */

  --glass-surface: rgba(20, 20, 30, 0.4);
  --glass-border: rgba(255, 255, 255, 0.08);
  --font-head: "Syncopate", sans-serif;
  --font-body: "Space Grotesk", sans-serif;
  --ease-cinematic: cubic-bezier(0.19, 1, 0.22, 1);
  --nav-height: 60px;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: none;
  /* Custom cursor used */
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--bg-void);
  color: var(--text-main);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* CORE TRACK */
::-webkit-scrollbar {
  width: 10px;
}

/* BACKGROUND */
::-webkit-scrollbar-track {
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.02),
    rgba(0, 0, 0, 0.9)
  );
}

/* THUMB — THE SIGNAL */
::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    transparent,
    rgba(124, 124, 255, 0.8),
    rgba(255, 255, 255, 0.9),
    rgba(124, 124, 255, 0.8),
    transparent
  );
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(124, 124, 255, 0.4);
}

/* HOVER — ENERGY SPIKE */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    transparent,
    rgba(124, 124, 255, 1),
    #ffffff,
    rgba(124, 124, 255, 1),
    transparent
  );
  box-shadow: 0 0 30px rgba(124, 124, 255, 0.8);
}

/* * =========================================
         * BACKGROUND CANVAS
         * =========================================
         */
#cosmos {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* Subtle tint overlay on the canvas */
  background: radial-gradient(
    circle at 50% 50%,
    rgba(20, 20, 40, 0.2) 0%,
    #000000 100%
  );
}

/* * =========================================
         * CUSTOM CURSOR
         * =========================================
         */
#cursor-dot,
#cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: exclusion;
}

#cursor-dot {
  width: 6px;
  height: 6px;
  background: white;
  transform: translate(-50%, -50%);
}

#cursor-ring {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition:
    width 0.3s,
    height 0.3s,
    background-color 0.3s,
    border-color 0.3s;
}

body:hover #cursor-ring.active {
  width: 60px;
  height: 60px;
  /* Subtle luxury tint on hover */
  background-color: rgba(124, 124, 255, 0.1);
  border-color: var(--accent-violet);
}

/* * =========================================
         * NAVBAR (Floating & Rounded)
         * =========================================
         */
.navbar {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1200px;
  height: var(--nav-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  z-index: 1000;

  /* Glassmorphism */
  background: rgba(10, 10, 15, 0.6);
  backdrop-filter: blur(15px);
  border: 1px solid var(--glass-border);
  border-radius: 30px;
  /* Rounded corners */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.logo {
  font-family: var(--font-head);
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  color: white;
  text-decoration: none;
  font-weight: 700;
}

.nav-links {
  display: flex;
  gap: 2.5rem;
}

.nav-link {
  text-decoration: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  transition: color 0.3s;
  position: relative;
  font-weight: 500;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0%;
  height: 1px;
  background: var(--accent-violet);
  /* Accent color */
  transition: width 0.4s var(--ease-cinematic);
}

.nav-link:hover {
  color: white;
}

.nav-link:hover::after {
  width: 100%;
}

/* Hamburger Menu */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  width: 24px;
  cursor: none;
  z-index: 1002;
}

.bar {
  width: 100%;
  height: 1px;
  background: white;
  transition: all 0.4s var(--ease-cinematic);
}

/* * =========================================
         * SIDEBAR (Minimal & Half-screen)
         * =========================================
         */
.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 50vw;
  /* Half screen width */
  max-width: 400px;
  height: 100vh;
  background: rgba(5, 5, 10, 0.95);
  /* Darker, denser glass */
  backdrop-filter: blur(20px);
  border-left: 1px solid var(--glass-border);
  z-index: 1001;
  transform: translateX(100%);
  transition: transform 0.6s var(--ease-cinematic);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 10vw;
  gap: 2rem;
}

.sidebar.active {
  transform: translateX(0);
  box-shadow: -10px 0 50px rgba(0, 0, 0, 0.5);
}

/* 'X' Close Button */
.close-btn {
  position: absolute;
  top: 30px;
  right: 30px;
  font-size: 2rem;
  font-family: var(--font-body);
  color: var(--text-muted);
  transition: color 0.3s;
  padding: 10px;
}

.close-btn:hover {
  color: var(--accent-violet);
}

.sidebar a {
  font-family: var(--font-head);
  font-size: 1.5rem;
  color: white;
  text-decoration: none;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s,
    transform 0.5s,
    color 0.3s;
}

.sidebar a:hover {
  color: var(--accent-violet);
}

.sidebar.active a {
  opacity: 1;
  transform: translateY(0);
}

/* * =========================================
         * LAYOUT & TYPOGRAPHY
         * =========================================
         */
section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 140px 10vw 60px 10vw;
  position: relative;
}

/* Hero section with background image */
#hero {
  background-image: url("hero5.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

#hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 0;
}

#hero .container {
  position: relative;
  z-index: 1;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

h1,
h2,
h3 {
  font-family: var(--font-head);
  text-transform: uppercase;
  font-weight: 400;
}

.display-text {
  font-size: clamp(2.5rem, 6vw, 7rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
  /* Cinematic Gradient with subtle violet hint */
  background: linear-gradient(
    to bottom right,
    #ffffff 20%,
    var(--text-muted),
    var(--accent-violet)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.subtitle {
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-gold);
  /* Gold accent for subtitles */
  margin-bottom: 1.5rem;
  display: block;
  display: flex;
  align-items: center;
  gap: 10px;
}

.subtitle::before {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background: var(--accent-gold);
}

p {
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.8;
  color: var(--text-muted);
  max-width: 600px;
  margin-bottom: 2rem;
}

/* * =========================================
         * IMAGES & GRID LAYOUTS
         * =========================================
         */
/* 2-Column Grid for sections with images */
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.cinematic-image-container {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
}

.cinematic-image-container::after {
  /* Overlay to ensure text readability and cinematic feel */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
  pointer-events: none;
}

.cinematic-image {
  width: 100%;
  height: auto;
  display: block;
  /* Initial state: desaturated and high contrast */
  filter: grayscale(90%) contrast(110%) brightness(0.8);
  transition:
    filter 0.8s var(--ease-cinematic),
    transform 0.8s var(--ease-cinematic);
}

/* Reveal color and zoom slightly on hover */
.cinematic-image-container:hover .cinematic-image {
  filter: grayscale(30%) contrast(120%) brightness(1);
  transform: scale(1.03);
}

/* * =========================================
         * SECTIONS & CARDS
         * =========================================
         */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  width: 100%;
  margin-top: 3rem;
}

.card {
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  padding: 2.5rem;
  backdrop-filter: blur(10px);
  transition: all 0.4s var(--ease-cinematic);
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-10px);
  border-color: var(--accent-violet);
  /* Accent on hover */
  box-shadow: 0 10px 30px -10px rgba(124, 124, 255, 0.15);
}

.card h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: white;
  letter-spacing: 0.05em;
}

.card-number {
  font-family: var(--font-head);
  color: var(--accent-violet);
  opacity: 0.5;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  display: block;
}

/* Form & Button Styles */
.minimal-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--glass-border);
  padding: 1rem 0;
  color: white;
  margin-bottom: 2rem;
  font-family: var(--font-body);
  font-size: 1.1rem;
  transition: border-color 0.3s;
}

.minimal-input:focus {
  outline: none;
  border-bottom-color: var(--accent-violet);
}

.btn-luxury {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 1rem 3rem;
  font-family: var(--font-head);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  transition: all 0.4s var(--ease-cinematic);
  position: relative;
  overflow: hidden;
}

.btn-luxury:hover {
  background: var(--accent-violet);
  border-color: var(--accent-violet);
  box-shadow: 0 0 20px rgba(124, 124, 255, 0.4);
}

/* * =========================================
         * ORBIT SECTION (REBUILT - 3D Gyroscope)
         * =========================================
         */
#orbit {
  perspective: 1200px;
  /* Essential for 3D */
  overflow: hidden;
}

.gyro-container {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  transform-style: preserve-3d;
  /* Will be controlled by JS for parallax */
  transition: transform 0.1s linear;
}

.gyro-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    white,
    var(--accent-violet) 40%,
    black 90%
  );
  box-shadow:
    0 0 60px var(--accent-violet-glow),
    inset 0 0 20px white;
  z-index: 10;
  animation: core-pulse 4s ease-in-out infinite;
}

/* The Rings */
.gyro-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform-style: preserve-3d;
}

/* Ring visual enhancements */
.gyro-ring::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: var(--accent-violet);
  border-bottom-color: rgba(0, 240, 255, 0.5);
  /* Cyan hint */
  opacity: 0.8;
  animation: spin 10s linear infinite;
}

/* Specific Ring Sizes & Orientations */
.ring-1 {
  width: 300px;
  height: 300px;
  animation: rotate-x 20s linear infinite;
}

.ring-2 {
  width: 420px;
  height: 420px;
  animation: rotate-y 25s linear infinite reverse;
}

.ring-3 {
  width: 540px;
  height: 540px;
  animation: rotate-z 30s linear infinite;
}

/* Satellites (Text Labels) */
.satellite {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 15px white;
  transform-style: preserve-3d;
}

/* Positioning satellites on the rings */
.sat-1 {
  transform: rotate(0deg) translate(150px) rotate(0deg);
  animation: orbit-correct-1 20s linear infinite reverse;
}

.sat-2 {
  transform: rotate(120deg) translate(210px) rotate(-120deg);
  animation: orbit-correct-2 25s linear infinite;
}

.sat-3 {
  transform: rotate(240deg) translate(270px) rotate(-240deg);
  animation: orbit-correct-3 30s linear infinite reverse;
}

.sat-label {
  position: absolute;
  left: 20px;
  top: -10px;
  font-family: var(--font-tech);
  font-size: 1.4rem;
  white-space: nowrap;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 2px;
  background: rgba(0, 0, 0, 0.8);
  padding: 4px 8px;
  border: 1px solid var(--accent-violet);
  border-radius: 4px;
}

/* Animations */
@keyframes core-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  50% {
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0.8;
  }
}

@keyframes rotate-x {
  0% {
    transform: translate(-50%, -50%) rotateX(0deg) rotateY(20deg);
  }

  100% {
    transform: translate(-50%, -50%) rotateX(360deg) rotateY(20deg);
  }
}

@keyframes rotate-y {
  0% {
    transform: translate(-50%, -50%) rotateY(0deg) rotateX(-20deg);
  }

  100% {
    transform: translate(-50%, -50%) rotateY(360deg) rotateX(-20deg);
  }
}

@keyframes rotate-z {
  0% {
    transform: translate(-50%, -50%) rotateZ(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotateZ(360deg);
  }
}

/* Counter-animations to keep text readable (billboarding) is complex in CSS only, 
           so we simplify by keeping dots spinning and labels attached. 
           For true billboarding, we use the reverse animations on the satellite div itself. */

/* * =========================================
         * ANIMATION CLASSES
         * =========================================
         */
.reveal-text {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1.2s var(--ease-cinematic),
    transform 1.2s var(--ease-cinematic);
}

.reveal-text.visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 {
  transition-delay: 0.1s;
}

.delay-2 {
  transition-delay: 0.2s;
}

.delay-3 {
  transition-delay: 0.3s;
}

/* * =========================================
         * RESPONSIVE DESIGN
         * =========================================
         */
@media (max-width: 1024px) {
  .nav-links {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  /* Reset navbar floating on smaller screens */
  .navbar {
    top: 0;
    width: 100%;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    background: rgba(5, 5, 10, 0.8);
  }

  /* #hero {
                background-image: url('herom.png');
            } */

  section {
    padding: 100px 6vw 60px 6vw;
  }

  /* Stack split layouts */
  .split-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .cinematic-image-container {
    order: -1;
    /* Image on top on mobile */
    max-height: 300px;
  }

  .cinematic-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Responsive Orbit Section */
  .gyro-container {
    width: 350px;
    height: 350px;
  }

  .ring-1 {
    width: 200px;
    height: 200px;
  }

  .ring-2 {
    width: 280px;
    height: 280px;
  }

  .ring-3 {
    width: 360px;
    height: 360px;
  }

  .sat-1 {
    transform: rotate(0deg) translate(100px) rotate(0deg);
  }

  .sat-2 {
    transform: rotate(120deg) translate(140px) rotate(-120deg);
  }

  .sat-3 {
    transform: rotate(240deg) translate(180px) rotate(-240deg);
  }

  .sat-label {
    font-size: 0.9rem;
    padding: 2px 4px;
  }

  .gyro-core {
    width: 60px;
    height: 60px;
  }
}

@media (max-width: 768px) {
  .sidebar {
    width: 80vw;
    /* Wider sidebar on very small screens */
  }

  .display-text {
    font-size: 2.8rem;
  }

  #about {
    text-align: left;
  }

  #hero {
    background-image: url("herom.png");
  }

  .sidebar a:nth-child(2) {
    transition-delay: 0.1s;
  }

  .sidebar a:nth-child(3) {
    transition-delay: 0.2s;
  }

  .sidebar a:nth-child(4) {
    transition-delay: 0.3s;
  }

  .sidebar a:nth-child(5) {
    transition-delay: 0.4s;
  }

  /* Mobile Orbit Section - Extra Small */
  .gyro-container {
    width: 280px;
    height: 280px;
  }

  .ring-1 {
    width: 150px;
    height: 150px;
  }

  .ring-2 {
    width: 210px;
    height: 210px;
  }

  .ring-3 {
    width: 270px;
    height: 270px;
  }

  .sat-1 {
    transform: rotate(0deg) translate(75px) rotate(0deg);
  }

  .sat-2 {
    transform: rotate(120deg) translate(105px) rotate(-120deg);
  }

  .sat-3 {
    transform: rotate(240deg) translate(135px) rotate(-240deg);
  }

  .sat-label {
    font-size: 0.75rem;
    padding: 2px 3px;
    left: 15px;
  }

  .gyro-core {
    width: 50px;
    height: 50px;
  }
}