/* freespirit_rainbow.css – Rainbow Vortex Edition */
/* Inspired by the radiant rainbow spirals Free Spirit Now image */

* { margin:0; padding:0; box-sizing:border-box; }
body, html { 
  height:100%; 
  font-family: 'Cormorant Garamond', Georgia, serif; 
  color: #ffffff; 
  overflow-x:hidden; 
  background: #0d0a1f; /* deep indigo void behind everything */
}

/* Parallax Sections */
.parallax {
  height: 100vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Hero – Rainbow Spiral Man */
#hero {
  background: url('images/fsn_man_rainbow_spirals_thin.jpg') center/cover no-repeat, linear-gradient(90deg, #3e3169 0%,  #3e3169 40%, #f1b835 60%,#f1b835 100%);
  position: relative;
}

.hero-overlay {
  text-align: center;
  padding: 2rem;
  z-index: 2;
  text-shadow: 0 0 40px rgba(255,255,255,0.9), 
               0 0 80px rgba(255,100,200,0.6);
}

.hero-overlay h1 {
  font-size: 6.5rem;
  font-weight: 300;
  letter-spacing: 12px;
  background: linear-gradient(90deg, #ff0066, #ff6600, #ffdd00, #66ff66, #00ffff, #0066ff, #aa00ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hueShift 20s linear infinite;
}

.hero-overlay p {
  font-size: 1.8rem;
  font-weight: 300;
  margin-top: 1.5rem;
  color: #ffffff;
  text-shadow: 0 0 20px rgba(255,255,255,0.7);
}

/* Rainbow Content Sections */
.section {
  min-height: 90vh;
  padding: 140px 10%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Each section gets a slice of the rainbow */
#crypto    { background: linear-gradient(218deg, #ac2128 0%, #8a0033 61.8%, #2d0014 100%); }
#taiyi   { background: linear-gradient(135deg, #78bee8 0%, #0082c8 61.8%, #2f6caf 100%); }
#biolumina{ background: linear-gradient(135deg, #073d3c 0%, #3abe00 70%, #00331a 100%); }

/* Gentle color pulse on hover/focus */
.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, 
    rgba(255,255,255,0.1), 
    rgba(255,255,255,0.05), 
    transparent, 
    rgba(255,255,255,0.05), 
    rgba(255,255,255,0.1));
  animation: shimmer 12s infinite linear;
  pointer-events: none;
}

.section h2 {
  font-size: 5.5rem;
  font-weight: 300;
  text-align: center;
  margin-bottom: 3rem;
  letter-spacing: 6px;
  color: #ffffff;
  text-shadow: 0 0 30px rgba(255,255,255,0.8);
  background: linear-gradient(90deg, #fff, #ffdd00, #fff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section p {
  font-size: 1.5rem;
  line-height: 2.2;
  max-width: 920px;
  margin: 0 auto 2rem;
  text-align: center;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

.section a {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 2px solid rgba(255,255,255,0.6);
  padding-bottom: 4px;
  font-weight: 600;
  transition: all 0.4s;
}
.section a:hover {
  border-bottom-color: #fff;
  text-shadow: 0 0 20px rgba(255,255,255,0.9);
}

/* Scroll hint – now a glowing rainbow arrow */
.scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3rem;
  background: linear-gradient(90deg, #ff006e, #ff8c00, #ffdd00, #66ff66, #00ccff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: bounce 2s infinite, hueShift 8s linear infinite;
}

/* Animations 
@keyframes hueShift {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
*/
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-20px); }
}

/* @media (min-width: 1920px) { */
@media (min-aspect-ratio: 16/9) {
    #hero { 
    background-size: auto 100%;
  }
}

/* Mobile fallback */
@media (max-width: 768px) {
  .parallax { background-attachment: scroll; }
  .hero-overlay h1 { font-size: 4rem; letter-spacing: 6px; }
  .section h2 { font-size: 3.8rem; }
  .section { padding: 100px 8%; }
}

@media (max-width: 480px) {
  .hero-overlay h1 { font-size: 3.2rem; }
}