/* Animations - Marquee Banner, Dynamic Cursor & FX */

/* Infinite Kinetic Marquee Banner - Clean Containment (Zero Layout Shift) */
.marquee-container {
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  background: rgba(10, 10, 15, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 1.6rem 0;
  white-space: nowrap;
  user-select: none;
  box-sizing: border-box;
}

[data-theme="light"] .marquee-container {
  background: rgba(235, 235, 242, 0.65) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.15) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
}

.marquee-content {
  display: inline-block;
  animation: marquee-scroll 12s linear infinite !important;
}

.marquee-text {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  color: var(--text-main);
  margin-right: 0.35rem;
  opacity: 0.95;
}

[data-theme="light"] .marquee-text {
  color: #000000 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

@media (max-width: 768px) {
  .marquee-container {
    padding: 1rem 0;
  }
  .marquee-text {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .marquee-container {
    padding: 0.75rem 0;
  }
  .marquee-text {
    font-size: 0.78rem;
  }
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Custom Crosshair Cursor Element - Lost Fellows Style */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--cursor-border);
  border-radius: 50% !important;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              height 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              background-color 0.2s ease, 
              border-color 0.2s ease;
  mix-blend-mode: difference;
}

.custom-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 4px;
  height: 4px;
  background-color: var(--cursor-dot);
  border-radius: 50% !important;
  pointer-events: none;
  z-index: 100000;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}

@media (hover: none) or (max-width: 768px) {
  .custom-cursor,
  .custom-cursor-dot {
    display: none !important;
  }
  body {
    cursor: auto !important;
  }
}

/* Interactive Cursor Hover States */
.cursor-hover .custom-cursor {
  width: 48px;
  height: 48px;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.15);
  border-color: var(--cursor-border);
}

.cursor-text-magnify .custom-cursor {
  width: 52px;
  height: 52px;
  border-radius: 50% !important;
  background-color: transparent;
  border: 1.5px solid var(--cursor-border);
}

.cursor-text-magnify .custom-cursor-dot {
  width: 4px;
  height: 4px;
  border-radius: 50% !important;
}

/* Text Hover Micro-Lift Effect */
h1, h2, h3, h4, p, .mono-tag, .corner-label, .card-title, .card-desc, .founder-box p {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

h1:hover, h2:hover, h3:hover, h4:hover, p:hover, .card-title:hover, .card-desc:hover, .founder-box p:hover {
  transform: translateY(-2px);
}




/* Pulse Dot Keyframe */
@keyframes pulse-dot {
  0% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    transform: scale(1.1);
    opacity: 0.8;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* 1. Cards Smooth Upward Flow Engine (No blur/zoom distortion) */
.bento-card:not([data-has-revealed="true"]),
.faq-item:not([data-has-revealed="true"]),
.focus-viewport-card:not([data-has-revealed="true"]),
.focus-stage-wrapper:not([data-has-revealed="true"]),
.founder-box:not([data-has-revealed="true"]),
.how-step-card:not([data-has-revealed="true"]) {
  --card-ty: 40px;
  --card-opacity: 0;

  opacity: var(--card-opacity);
  transform: translateY(var(--card-ty));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

/* 2. Global Text Natural Entrance Engine (Excludes Nav) - Settles at exact 1.0 scale without over-zooming */
:not(header):not(.site-nav):not(.nav-links):not(.nav-item):not(.brand-logo) > h1:not([data-has-revealed="true"]),
:not(header):not(.site-nav):not(.nav-links):not(.nav-item):not(.brand-logo) > h2:not([data-has-revealed="true"]),
h3:not([data-has-revealed="true"]),
h4:not([data-has-revealed="true"]),
:not(header):not(.site-nav):not(.nav-links):not(.nav-item) > p:not([data-has-revealed="true"]),
.body-copy:not([data-has-revealed="true"]),
.lead:not([data-has-revealed="true"]),
.hero-headline-container:not([data-has-revealed="true"]),
.hero-subheadline:not([data-has-revealed="true"]),
.luxury-quote-headline:not([data-has-revealed="true"]),
.card-title:not([data-has-revealed="true"]),
.card-desc:not([data-has-revealed="true"]),
.panel-headline:not([data-has-revealed="true"]),
.panel-subcopy:not([data-has-revealed="true"]),
.panel-headline-serif:not([data-has-revealed="true"]),
.section-header-wide:not([data-has-revealed="true"]),
.mono-tag:not(.site-nav *):not([data-has-revealed="true"]),
.corner-label:not(.site-nav *):not([data-has-revealed="true"]),
.scroll-center-text:not([data-has-revealed="true"]) {
  --text-scale: 0.95;
  --text-blur: 4px;
  --text-opacity: 0;
  --text-ty: 25px;

  opacity: var(--text-opacity);
  filter: blur(var(--text-blur));
  -webkit-filter: blur(var(--text-blur));
  transform: translateY(var(--text-ty)) scale(var(--text-scale));
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), 
              filter 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              -webkit-filter 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, filter;
}

/* Guarantee Theme Parity for Both Light & Dark Modes */
[data-theme="light"] h1:not([data-has-revealed="true"]),
[data-theme="light"] h2:not([data-has-revealed="true"]),
[data-theme="light"] h3:not([data-has-revealed="true"]),
[data-theme="light"] h4:not([data-has-revealed="true"]),
[data-theme="light"] p:not([data-has-revealed="true"]),
[data-theme="light"] .hero-headline-container:not([data-has-revealed="true"]),
[data-theme="light"] .luxury-quote-headline:not([data-has-revealed="true"]),
[data-theme="light"] .card-title:not([data-has-revealed="true"]),
[data-theme="light"] .section-header-wide:not([data-has-revealed="true"]) {
  filter: blur(var(--text-blur));
  -webkit-filter: blur(var(--text-blur));
}

/* Persistent revealed state - Once scrolled into view, elements stay 100% visible & sharp */
[data-has-revealed="true"] {
  --text-scale: 1 !important;
  --text-blur: 0px !important;
  --text-opacity: 1 !important;
  --text-ty: 0px !important;
  --card-ty: 0px !important;
  --card-opacity: 1 !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

[data-has-revealed="true"]:not(.active-tilt) {
  transform: translateY(0px) scale(1);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Active 3D Perspective Tilt Hover Response */
.active-tilt,
.bento-card.active-tilt,
.spotlight-card.active-tilt,
.focus-viewport-card.active-tilt,
.how-step-card.active-tilt {
  transition: transform 0.08s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, filter 0.3s ease !important;
  z-index: 10 !important;
}