@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&display=swap");
/* Super Slow Spin for Background */
@keyframes spin-super-slow {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.animate-spin-super-slow {
  animation: spin-super-slow 200s linear infinite; /* Very slow rotation */
}

/* Noise Texture Data URI */
.bg-noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fadeIn {
  animation: fadeIn 0.5s ease-out forwards;
}
.bg-noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
}

/* 2. Floating Animation */
@keyframes floatSlow {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(2deg);
  }
}
.animate-float {
  animation: floatSlow 12s ease-in-out infinite;
}

/* Delays for natural feel */
.delay-anim-1 {
  animation-delay: 2s;
}
.delay-anim-2 {
  animation-delay: 5s;
}

.text-gradient-gold {
  background: linear-gradient(to right, #d4af37, #f5f3ee, #d4af37);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: shine 5s linear infinite;
}
@keyframes shine {
  to {
    background-position: 200% center;
  }
}
.fade-up {
  opacity: 0;
  transform: translateY(30px);
}
.text-stroke {
  -webkit-text-stroke: 1px rgba(212, 175, 55, 0.2);
  color: transparent;
}

/* Background Animation */
@keyframes floatSlow {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(2deg);
  }
}
.animate-float {
  animation: floatSlow 12s ease-in-out infinite;
}

/* Tab Styles */
.tab-btn.active {
  color: #d4af37;
  border-color: #d4af37;
}
.tab-content {
  display: none;
  animation: fadeIn 0.5s ease-out;
}
.tab-content.active {
  display: block;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Reveal Mask for Images */
.reveal-mask {
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}
.reveal-mask.is-visible {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Side reveal for Content Side */
.content-side {
    opacity: 0;
    transform: translateX(-50px);
}
.flex-row-reverse .content-side {
    transform: translateX(50px);
}

/* Editorial Row Animation States */
.editorial-row.is-visible .content-side {
    opacity: 1;
    transform: translateX(0);
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.editorial-row.is-visible .reveal-item {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s ease out;
}
/* Vertical Floating Node Design */
.node-card {
    opacity: 0;
    transform: translateY(20px);
}

.v-tab-btn {
    text-align: left;
    padding: 1.25rem;
    border-left: 1px solid rgba(255,255,255,0.05);
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.v-tab-btn:hover {
    background: rgba(212, 175, 55, 0.03);
    color: #D4AF37;
}

.v-tab-btn.active {
    border-left: 3px solid #D4AF37;
    background: rgba(212, 175, 55, 0.08);
    color: #D4AF37;
    padding-left: 2rem;
}

/* Staggered text for detailed view */
.detail-item {
    opacity: 0;
    transform: translateX(-20px);
}