/* ==========================================================================
   Coming Soon - Custom Styling
   ========================================================================== */

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Hide scrollbars for the split screen */
  background-color: var(--navy-900);
  color: var(--white);
  cursor: none; /* Hide default cursor */
}

/* Custom Cursor */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background-color: var(--gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}

.cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, background-color 0.3s ease;
  mix-blend-mode: difference;
}

/* Hover state for images */
.cursor-follower.hover-active {
  width: 80px;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Split Layout */
.split-layout {
  display: flex;
  width: 100vw;
  height: 100vh;
}

/* Left Panel - Fixed Content */
.left-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-4xl);
  position: relative;
  z-index: 10;
}

/* Background blob */
.blob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(46,90,136,0.3) 0%, rgba(20,33,61,0) 70%);
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  filter: blur(40px);
}

/* Text Masking for GSAP */
.text-line-wrapper {
  overflow: hidden; /* This masks the text before it slides up */
  display: inline-block;
  vertical-align: top;
  margin-bottom: 5px;
}
.text-line-wrapper span {
  display: inline-block;
  transform: translateY(100%); /* Initial state hidden below */
}

/* Magnetic Button */
.magnetic-btn-wrapper {
  display: inline-block;
  padding: 20px; /* Padding creates a magnetic area around the button */
  margin-left: -20px;
}

/* Right Panel - Scrolling Gallery */
.right-panel {
  flex: 1;
  position: relative;
  overflow: hidden;
  background-color: #0b1120;
}

.marquee-container {
  display: flex;
  flex-direction: column;
  height: 200%;
}

.marquee-item {
  width: 100%;
  height: 40vh;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.marquee-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.marquee-item:hover img {
  transform: scale(1.05);
}

/* Overlay grain */
.grain-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9990;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

@media (max-width: 900px) {
  .split-layout {
    flex-direction: column;
  }
  .right-panel {
    display: none; /* Hide images on very small screens to keep focus on coming soon text */
  }
  body, html { cursor: auto; } /* Disable custom cursor on mobile */
  .cursor-dot, .cursor-follower { display: none; }
}