/* =========================================================
   Fonts
   ========================================================= */
   @font-face { font-family: 'Gugi'; src: url('https://static.igem.wiki/teams/5717/font/gugi.ttf'); }
   @font-face { font-family: 'Alan Sans'; src: url('https://static.igem.wiki/teams/5717/font/alansans.ttf'); }
   @font-face { font-family: 'Alan Sans Semi Bold'; src: url('https://static.igem.wiki/teams/5717/font/alansans-semibold.ttf')}
   @font-face { font-family: 'Alan Sans Bold'; src: url('https://static.igem.wiki/teams/5717/font/alansans-bold.ttf')}
   @font-face { font-family: 'Alan Sans Extra Bold'; src: url('https://static.igem.wiki/teams/5717/font/alansans-extrabold.ttf')}
   @font-face { font-family: 'Poppins'; src: url('https://static.igem.wiki/teams/5717/font/poppins-light.ttf'); }
   @font-face { font-family: 'Poppins Bold'; src: url('https://static.igem.wiki/teams/5717/font/poppins-bold.ttf'); }
   @font-face { font-family: 'Poppins Italic'; src: url('https://static.igem.wiki/teams/5717/font/poppins-italic.ttf'); }
   @font-face { font-family: 'Orbitron'; src: url('https://static.igem.wiki/teams/5717/font/orbitron-bold.ttf'); }
   
   /* =========================================================
      Theme + Layout
      ========================================================= */
   :root{
      --bg-top: #000000;   /* black at the very top */
      --bg-mid: #230119;   /* current background */
      --bg-bot: #E86B55;   /* target peach near the bottom */
   
     /* Center column */
     --site-max: 1100px;
     --gutter: clamp(12px, 2vw, 32px);
   
     /* Rocket rail aligned to centered column */
     --rocket-rail: 30px;
     --rocket-width: 30px;
     --rocket-gap: 16px;
   }
   
   html, body{
  min-height: 100%;
  background-color: var(--bg-mid); /* fallback */
  background-image: linear-gradient(
    180deg,
    #000000 0%,
    #000000 10%,
    #24041C 75%,
    #461323 95%,
    #6b1827 100%
  );
  background-attachment: fixed;
  background-repeat: no-repeat;
}




p {
  color: #e2e0de;
}


   body{
     margin: 0;              
     padding-top: 56px;
     font-family: "Poppins", sans-serif;
     font-size: 1.05rem;
     line-height: 1.6;
     color: #ffffff;
     overflow-x: hidden;
   }
   
   /* Main content frame: centered with max width */
   main.container{
     position: relative;
     z-index: 10;
     min-height: 160vh;
   }
   
   /* Position the side nav toggle relative to main content */
   main {
     position: relative;
   }
   
   /* Page width helpers */
   .page-narrow{
     max-width: 1700px;
     margin: -5rem 10rem 3rem 6rem;
   }
   
   .page-full{
     max-width: none;
     margin: 0;
     padding: 0;
   }
   
   /* =========================================================
      Typography
      ========================================================= */
   h1{
     font-family: "Alan Sans", Futura, sans-serif;
     font-weight: 700;
     font-size: 1.65rem;
     color: #e3263b;
     padding-right: 30px;
   }
   
   h2{
     font-family: "Alan Sans", Futura, sans-serif;
     font-weight: 500;
     font-size: 1.45rem;
     color:    #fa674e;
   }
   h3{
     font-family: "Alan Sans", Gill Sans, sans-serif;
     font-size: 1.25rem;
     color: #f1798d;
   }


   h4{
    font-family: "Alan Sans", Gill Sans, sans-serif;
     font-size: 1.1rem;
     color: #ff9bab;
     margin: .75rem 0 .5rem;
   }
   
   b{ font-family: 'Poppins Bold'; }
   
   
   /* ================================
   Hero Typing (neon, centered)
   ================================ */
.hero-typing{
  font-family: "Orbitron", sans-serif;
  font-size: 4.2rem;
  font-weight: 700;
  color: #54d337 !important; /* neon green core */
  letter-spacing: 8px;
  white-space: nowrap;
  overflow: hidden;


  /* Green core + very soft translucent white halo */
  text-shadow:
    0 0 2px #54d337,
    0 0 6px rgba(57,255,20,0.6),
    0 0 12px rgba(255,255,255,0.18),  /* softer translucent white */
    0 0 22px rgba(255,255,255,0.10);  /* very faint outer halo */


  display: block;
  width: fit-content;
  margin: 0 auto;
  text-align: center;


  animation: haloFlicker 3s infinite ease-in-out;
}


@keyframes haloFlicker {
  0%, 100% {
    text-shadow:
      0 0 2px #54d337,
      0 0 6px rgba(57,255,20,0.6),
      0 0 12px rgba(255,255,255,0.18),
      0 0 22px rgba(255,255,255,0.10);
  }
  45% {
    text-shadow:
      0 0 2px #54d337,
      0 0 6px rgba(57,255,20,0.6),
      0 0 14px rgba(255,255,255,0.28),  /* slightly brighter pulse */
      0 0 26px rgba(255,255,255,0.15);
  }
  55% {
    text-shadow:
      0 0 2px #54d337,
      0 0 6px rgba(57,255,20,0.6),
      0 0 10px rgba(255,255,255,0.12),
      0 0 18px rgba(255,255,255,0.06);
  }
}


/* Let display-4 inherit color instead of forcing white */
.display-4{ color: inherit; }


/* Typing cursor */
.hero-typing::after{
  content: "|";
  display: inline-block;
  margin-left: 3px;
  vertical-align: bottom;
  color: #54d337;
  text-shadow: 0 0 6px rgba(57,255,20,0.8);
  animation: blink 0.8s infinite;
}


/* Keep cursor visible after typing completes */
.hero-typing.done::after{ content: "|"; }


/* ================================
   Animations
   ================================ */
@keyframes blink{
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}


@keyframes neonFlicker{
  0%, 100% { opacity: 1; }
  95% { opacity: 0.92; }
  97% { opacity: 1; }
}


/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  .hero-typing,
  .hero-typing::after{
    animation: none !important;
  }
}
   
   /* =========================================================
      NAVBAR
      ========================================================= */
   
      .navbar-black { background:#000; }


/* make sure the navbar sits above page content but below rocket */
.navbar { z-index: 1000; }
   /* container alignment (keeps site max width) */
   .navbar .container{
     max-width: var(--site-max);
     margin: 0 auto;
     padding-left: calc(var(--gutter) - 18px); /* pull links a bit left */
     padding-right: var(--gutter);
   }
   
   /* brand: make logo a touch bigger and nudge left */
   .navbar .navbar-brand{
     margin: 12px 1rem 0 0;
     padding: 0;
     transform: translateX(-150px);       /* move logo left */
   }
   .navbar .navbar-brand img{
     width: 180px;                         /* slightly bigger */
   }
   @media (max-width: 576px){
     .navbar .navbar-brand img{ width: 150px; }
   }
   
   /* type + color for all nav text */
   .navbar .navbar-brand,
   .navbar .nav-link,
   .navbar .dropdown-item{
     font-family: 'Gugi', sans-serif !important;
     color: #fff !important;
     font-weight: 700;
     letter-spacing: 1.5px;
     white-space: nowrap;        
   }
   
   /* spacing between items */
   .navbar .navbar-nav{
     display: flex;
     gap: 3rem;
   }
   
   /* hover underline */
   .navbar .nav-link:hover,
   .navbar .nav-item.show > .nav-link{
     text-decoration: underline;
     background: transparent !important;
   }
   
/* =========================================================
   Ladder dropdown look + animation (drop-in)
   ========================================================= */


/* dropdown menu shell */
.navbar .dropdown-menu {
  background: transparent !important;
  border: none;
  box-shadow: none;
  padding: 0;                        /* no extra padding inside */
  min-width: unset;
  width: max-content;                /* match trigger text width */
  left: 50%;
  transform: translateX(-50%) translateY(-50px);
  margin-top: -5px;                   /* 👈 small gap below nav text */
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}


/* visible state */
.navbar .dropdown.show > .dropdown-menu,
.navbar .dropdown:hover > .dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}


/* bubble items */
.navbar .dropdown-item {
  height: 48px;
  width: 100%;                       /* bubble matches trigger width */
  margin: 10px auto;    
  padding: 0 1rem;


  display: flex;
  align-items: center;
  justify-content: center;


  color: #fff;
  font-family: 'Gugi', sans-serif;
  letter-spacing: 1.2px;
  text-decoration: none;


  background: url("https://static.igem.wiki/teams/5717/navbar/ladder-item.webp")
              center / 100% 100% no-repeat;
  background-color: transparent;
  opacity: 0;
  transform: translateY(-18px) scale(.98);
}


/* hover effect */
.navbar .dropdown-item:hover {
  text-decoration: underline;
}


.navbar .dropdown-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px; /* match your image curve */
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.6);
  pointer-events: none;
}


/* drop animation */
@keyframes bubbleDrop {
  0%   { opacity:0; transform: translateY(-18px) scale(.98); }
  70%  { opacity:1; transform: translateY(0) scale(1); }
  85%  { opacity:1; transform: translateY(-4px) scale(1.01); }
  100% { opacity:1; transform: translateY(0) scale(1); }
}


.navbar .dropdown.show .dropdown-item,
.navbar .dropdown:hover .dropdown-item {
  animation: bubbleDrop .36s cubic-bezier(.22,1,.32,1) forwards;
}


/* stagger delays */
.navbar .dropdown.show .dropdown-item:nth-child(1),
.navbar .dropdown:hover .dropdown-item:nth-child(1) { animation-delay: .05s; }
.navbar .dropdown.show .dropdown-item:nth-child(2),
.navbar .dropdown:hover .dropdown-item:nth-child(2) { animation-delay: .10s; }
.navbar .dropdown.show .dropdown-item:nth-child(3),
.navbar .dropdown:hover .dropdown-item:nth-child(3) { animation-delay: .15s; }




   /* =========================================================
      Rocket — aligned to the centered column’s right edge
      ========================================================= */
   .rocket-track{
     position: fixed;
     top: 0;
     right: 36px;                         /* hugs the scrollbar edge */
     width: 26px;
     height: 100vh;
     background: linear-gradient(to bottom, #4a1c35, #5a1d3d, #6a1d46, #7a1f50, #9a3c4d);
     z-index: 1200;
     border-radius: 5px 0 0 5px;
   }
   
   .rocket-container{
     position: fixed;
     top: 0;
     right: 10px;                         /* aligns rocket with the rail */
     z-index: 2000;
     display: flex;
     flex-direction: column;
     align-items: center;
   }
   
   .rocket{ width: 100px; transform: rotate(360deg); }
   .flame{
     width: 25px; height: 30px;
     background: radial-gradient(circle at center, rgb(255,201,100) 0%, rgb(240,98,98) 60%, transparent 100%);
     border-radius: 50% 50% 40% 40%;
     margin-top: -25px; margin-left: 20px;
     animation: flicker .2s infinite; opacity: .9; transform: scaleY(1.4); filter: blur(1px);
     z-index: -1;
   }
   @keyframes flicker{
     0%,100%{opacity:.6; transform: scaleY(1.4) scaleX(1)}
     50%{opacity:1; transform: scaleY(1.7) scaleX(1.1)}
   }
   
   /* Hide rocket on smaller screens */
   @media (max-width: 992px){
     .rocket, .rocket-track{ display: none; }
   }
   
   /* =========================================================
      Stars Background (decorative)
      ========================================================= */
   .stars-container{
     position: fixed; inset: 0 auto auto 0;
     width: 100%; height: 300vh;
     pointer-events: none;
     z-index: 0;
   }
   .star{
     position: absolute;
     width: 7px;               /* larger base size */
     height: 7px;
     background:#fff;
     border-radius:50%;
     animation: twinkle 2s infinite ease-in-out;
     opacity: .8;
     box-shadow: 0 0 8px rgba(255,255,255,.7); /* glowing effect */
   }
   
   @keyframes twinkle{ 0%,100%{opacity:.3} 50%{opacity:1} }
   
   /* =========================================================
      Page + Figures centered to column
      ========================================================= */
      .page, .wrap, .figure-img-wide{
        width: 90%;
         max-width: var(--site-max);
         display: block;
         margin: 0 auto;
         text-align: center;
       }
   
  /* figures */
.figure-img-ctr {
  display: block;
margin-left: auto;
margin-right: auto;
  max-height: 500px;
}

.figure-img-sm {
  position: relative;
  display: inline-block;
  height: 275px;
}


.figure-img {display: inline-block; max-height: 500px;}


.page-rightpdf {
    padding-left: none;
    margin-top: 3rem; /* add space above the embedded PDF block */
  }


/* figures */
.figure-img-pdf {
    padding: 0 2rem 0 2rem;
    text-align: center;
    margin-top: 1.5rem; /* space between previous content (e.g., references) and PDF */
}


  /* extra space below the References dropdown content to separate from following embeds */
  #entrepreneurshipDropdown {
    margin-bottom: 2rem;
  }


   .wrap{ display: inline-block; vertical-align: middle;}
   

   .page-right{
     display: flex;
     overflow: hidden;
     align-items: center; justify-content: center;
     float: right; width: 600px;
   }
   
  .rf-dropdown-btn{
    width: 50%; /* Adjust the width to make the button less wide */
    padding: 15px 20px;
    font-size: 1.2em;
    display: flex;
    justify-content: center; /* Centering the text */
    position: relative; /* Required for absolute positioning of the icon */
    border-radius: 5px;
  }


  .rf-dropdown-icon {
    font-size: 1.5em;
    position: absolute;
    right: 20px; /* Adjust positioning of the "+" icon */
    top: 50%; /* Vertically center */
    transform: translateY(-50%); /* Offset it by its own height to truly center */
  }

.h1{
  font-size: 2rem;
  color: #e3263b;
}

.h2{
  font-size: 1.9rem;
  color: #fa674e;
}

.h3{
  font-size: 1.75rem;
  color:#f1798d;
}

.h4{
  font-size: 1.65rem;
  color:#f1798d;
}

.h5{
  font-size: 1.50rem;
  color: #e3263b;
}

/* highlight effect */
.span {
  position: relative;
  font-weight: 1000;
  color: black;                           /* text stays black */
  background-image: linear-gradient(#ffc800cf, #FFC900);
  background-repeat: no-repeat;
  background-size: 0% 80%;                /* start collapsed, 80% tall */
  background-position: 0 50%;             /* center vertically */
  transition: background-size 0.6s ease;
  border-radius: 10px;      
  padding: 0 0.2em;  
}


/* when revealed by IntersectionObserver */
.span.in-view {
  background-size: 100% 80%;              /* full width, 80% tall */
}


/* accessibility */
@media (prefers-reduced-motion: reduce) {
  .span {
    background-size: 100% 80% !important;
    transition: none !important;
  }
}


   
   #cycle{ float: left; width: 400px; margin-left: 50px; margin-right: auto; }
   
   .listtitle{font-size: 1.2rem;}
   
   .pdf-iframe {
    width: 75%; /* Use a percentage to scale the iframe within the container */
    height: 85vh; /* Maintain height within the viewport height */
    border: none;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for better visualization */
    justify-content: center;
    position: relative;
}
/* Order matters: link → visited → hover → active */
a:link,
a:visited {
  color: #E86B55;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #e3263b;
  text-decoration: underline;
}

a:active {
  color: #c01e32; /* optional pressed color */
}



   .figure-img-ctr{ padding: 0 2rem; text-align: center; }
   .figure-img-wide{ padding: 0 2rem; text-align: center; }
   .figure-img-ctr img{ max-width: 60%; height: auto; vertical-align: middle; }
   .figure-img-wide img{ max-width: 90%; height: auto; vertical-align: middle; }
   
   /* =========================================================
      Tables
      ========================================================= */
      table{ width: 100%; border-collapse: collapse; }
      th, td{ border: 2px solid #D47484; padding: 8px; text-align: left; }
      th{ background-color: #641C33; }
     

   
   /* =========================================================
      Scrollytelling scenes (welcome-to-mars)
      ========================================================= */
   .scene{ position: relative; height: 100vh; }
   .panel{ position: relative; width: 100%; height: 100vh; overflow: hidden; }
   
   /* Mars Scene Animation - Add this to your style.css */
   #mars-scene {
     position: relative;
     height: 150vh !important;
     width: 100%;
   }
   
   .sticky-wrapper {
     position: sticky;
     top: 0;
     height: 100vh;
     width: 100%;
     overflow: hidden;
   }
   
   .welcome-to-mars {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: opacity 0.3s ease;
   }
   
   .welcome-img {
     width: min(85vw, 1200px);
     height: auto;
     transform-origin: 62% 47%;
     transition: transform 0.1s ease-out, opacity 0.3s ease;
     filter: drop-shadow(0 14px 40px rgba(0,0,0,.45));
   }
   
   .next-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Changed back to center */
    padding-top: 0; /* Remove padding */
    opacity: 0;
    background: #230119 !important;
    transition: opacity 0.3s ease;
    pointer-events: none;
    overflow: hidden;
  }
 
  .mars-text {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.6rem, 2.5vw + 0.5rem, 2.2rem);
    font-weight: 400;
    color: #E2E0DE;
    margin: 0.5rem 0 0;
    text-align: center;
    padding: 0 20px;
    max-width: 800px;
    z-index: 2;
  }
 
  .mars-ground-img {
    position: absolute;
    bottom: -15vh; /* Moved further down */
    left: 0;
    width: 100vw;
    height: auto;
    min-height: 35vh;
    object-fit: cover;
    z-index: 1;
    margin: 0;
    padding: 0;
  }
   
/* Perchlorate Problem Section */
.perchlorate-section {
  position: relative;
  min-height: 100vh;
  background: #23011900;
  padding: 0;
  margin: 0;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none;          /* only the .media wrapper should have shadow */
  background-clip: padding-box; /* avoid halo on rounded corners */
}


/* Top image - absolutely positioned at top left */
.top-image-container {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 60vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}


.top-perchlorate-img {
  width: 100%;
  height: 60vh; /* Fill viewport height */
  object-fit: cover; /* Cover the entire area */
  display: block;
  margin: 0;
  padding: 0;
  transform: translateY(-30px);
  border: none !important;
  outline: none !important;
}


/* Container for text and side images */
.perchlorate-section .container {
  max-width: 1200px;
  margin-top: -2rem; /* Small top margin */
  padding: 2rem 2rem;
  position: relative;
  z-index: 3;
}


/* Layout for text with side images */
.content-with-images {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 2rem;
  align-items: center;
  margin-top: 1rem;
}


/* Side images container */
.side-image {
  display: flex;
  align-items: center;
  justify-content: center;
}


.side-image img {
  width: 100%;
  height: auto;
  border: none !important;
  outline: none !important;
}


/* Center text */
.perchlorate-text {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.4rem, 2vw + 0.5rem, 2rem);
  font-weight: 400;
  color: #E2E0DE;
  text-align: center;
  line-height: 1.6;
}


/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Initial hidden state */
.animate-fade-in,
.animate-slide-left,
.animate-slide-right {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  will-change: opacity, transform;
}

.animate-slide-left {
  transform: translateX(-30px);
}

.animate-slide-right {
  transform: translateX(30px);
}

/* Once in view */
.in-view {
  opacity: 1;
  transform: none;
}


@media (max-width: 768px) {
  .content-with-images {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
/* Container */
.intro-hero{
  position: relative;
  min-height: 60vh;
  background: #23011900;          /* page brand color behind the image */
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;            /* safer layering */
  margin-top: 6rem;
}



/* Wave image (background image as an <img>) */
.intro-wave-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;


  /* start off-canvas to the left */
  transform: translateX(-40px);
  opacity: 0;
  filter: brightness(1) contrast(1.02);
  z-index: 0;
}


/* Text */
.intro-content{
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;


  /* start off-canvas to the left */
  transform: translateX(-40px);
  opacity: 0;
}


.intro-content h2{
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 6vw, 4rem);
  letter-spacing: .02em;
  text-shadow: 0 8px 24px rgba(0,0,0,.45);
  margin: 0;
  color: #fff;
}


/* When in view, animate both image and text in from the left */
.intro-hero.in-view .intro-wave-img{
  animation: slideInImg .9s ease-out forwards;
}


.intro-hero.in-view .intro-content{
  animation: slideInText .8s cubic-bezier(.2,.8,.2,1) .08s forwards;
}


/* Keyframes */
@keyframes slideInImg{
  from { transform: translateX(-40px); opacity: 0; }
  to   { transform: translateX(0);      opacity: 1; }
}


@keyframes slideInText{
  0%   { transform: translateX(-40px); opacity: 0; filter: blur(2px); }
  100% { transform: translateX(0);     opacity: 1; filter: blur(0); }
}


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .intro-hero.in-view .intro-wave-img,
  .intro-hero.in-view .intro-content{
    animation: none;
    transform: none;
    opacity: 1;
  }
}


/* ---------- Planet (final stable version, adjusted) ---------- */
.planet-scene {
  position: relative;
  min-height: 100vh;
  background: #0b001195;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
  padding: 0 5%;
  overflow: hidden;
}


.planet-wrap {
  position: relative;
  justify-self: end;
  width: clamp(280px, 30vw, 420px) !important;  /* smaller cap */
  max-width: 30vw !important;
  aspect-ratio: 1 / 1;
  opacity: 0;
  transform: translate(-10%, 20%) scale(0.65); /* ⬆️ slightly larger base scale */
  will-change: transform, opacity;
}


.planet {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform: rotate(0deg);
}


.prosper-col {
  opacity: 0;
  transform: translateX(30px);
  will-change: transform, opacity;
  justify-self: start;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


.prosper-logo {
  width: 420px !important;  /* keep logo balanced with planet */
  height: auto;
  display: block;
  margin: 0;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
}


.prosper-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
  color: #e2e0de;
  line-height: 1.3;
  margin-top: 0.3rem;   /* ⬇️ tighter under logo */
  margin-bottom: 0;
  text-align: left;
  transform: translateY(-0.3rem); /* nudge it slightly upward under logo */
}


@media (max-width: 900px) {
  .planet-scene {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 4rem 2rem;
  }


  .planet-wrap {
    justify-self: center;
    transform: translate(0, 20%) scale(0.85); /* keep proportional increase */
    width: 340px !important; /* slightly bigger mobile planet */
  }


  .prosper-col {
    justify-self: center;
    align-items: center;
    text-align: center;
  }


  .prosper-logo {
    width: 320px !important;
  }


  .prosper-subtitle {
    margin-top: 0.2rem;
    transform: translateY(-0.2rem);
  }
}


/* ==== Alternating scroll sections (no step headings) ==== */
.scroll-steps{
  position: relative;
  background: #23011900;              /* transparent so stars show */
  z-index: 1;  
}


.step{
  min-height: 95vh;                   /* "scroll for a bit" */
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(20px, 5vw, 60px);
  align-items: center;
  padding: clamp(40px, 8vw, 96px) 5vw;
  border-top: 1px solid rgba(255,255,255,.06);
  position: relative;
  z-index: 1;  /* Lower than squiggle */
  min-height: 95vh;
 
}


/* text-only sections */
.step.only-text{
  grid-template-columns: 1fr;
  text-align: center;
}


/* larger body copy */
.scroll-steps .copy p{
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.25rem, 1.05rem + 1.1vw, 2rem);
  line-height: 1.65;
  color: #e9e6f0;
  margin: 0;
}


/* image wrapper */
.step .media{
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
}


/* image itself */
.step .media img{
  width: 100%;
  height: 100%;
  object-fit: contain;                   /* default: cover */
  display: block;
  opacity: 0;                          /* revealed via .in-view */
  transform: translate3d(0,8px,0);
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
}
.step .media img.in-view{
  opacity: 1;
  transform: none;
}

/* Make specific images appear larger */
.big-media-img {
  transform: scale(1.5);        /* Increase size */
  transform-origin: center; 
}

.big-media-img.in-view {
  transform: scale(1.5) translateY(0); /* preserves reveal animation */
}


/* alternate left/right layout */
.step.left  { grid-template-columns: 0.95fr 1.05fr; }
.step.right { grid-template-columns: 1.05fr 0.95fr; }
.step.left  .media{ order: 1; }
.step.left  .copy { order: 2; }
.step.right .copy { order: 1; text-align: left; }
.step.right .media{ order: 2; }


/* mobile: stack */
@media (max-width: 900px){
  .step, .step.left, .step.right{ grid-template-columns: 1fr; }
  .step .media{ order: 1; }
  .step .copy { order: 2; text-align: left; }
}


/* --- Utilities for tricky images (e.g., "barsonearth") --- */
.fit-contain { object-fit: contain !important; background: rgba(0,0,0,.18); }
.object-top { object-position: top center !important; }
.object-center { object-position: center center !important; }
.object-bottom { object-position: bottom center !important; }


.squiggle-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}


svg.squiggle {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  height: auto;
  pointer-events: none;
}


svg.squiggle path {
  stroke: white;
  stroke-width: 4;
  stroke-linecap: round;
  fill: none;
}


/* ========= Stars background ========= */
.stars-container{
  position: fixed;
  inset: 0;
  height: 300vh;              /* gives us vertical room to sprinkle stars */
  pointer-events: none;
  z-index: 0;
}
.star{
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: twinkle 2.2s infinite alternate ease-in-out;
}
@keyframes twinkle{
  from{ transform: scale(1); }
  to  { transform: scale(1.15); }
}

/* ========= Planet + Prosper timing ========= */
.planet-scene{ position: relative; z-index: 1; }
.planet-wrap{ will-change: transform, opacity; }
.planet{ will-change: transform; }
.prosper-logo, .prosper-subtitle{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
}
.prosper-logo.appear, .prosper-subtitle.appear{
  opacity: 1;
  transform: none;
}
  /* =========================================================
   Star Navigation
   ========================================================= */
:root{
  --star-img-url: url("https://static.igem.wiki/teams/5717/navbar/star.webp");
  --star-size: 18px;


  /* layout */
  --rail-right: 64px;                 /* rail position from right edge */
  --star-nudge-x: 30px;            


  /* colors */
  --bubble-pink: rgba(243,179,198,0.95);
  --bubble-border: rgba(255,255,255,0.9);
  --star-white: #ffffff;
  --hover-blue: #4da3ff;
}


/* Base positioning */
.star-nav{ position: fixed; inset: 0; pointer-events: none; z-index: 1600; }
.star-rail{
  position: fixed;
  right: var(--rail-right); top: 0;
  width: 20px; height: 100vh;
  background: transparent;
  pointer-events: auto;
  z-index: 1601;
}


/* =========================================================
   Stars — floating, WHITE by default
   ========================================================= */
@keyframes starFloat{
  0%   { transform: translateX(var(--star-base-shift)) translate(-5px, -1.5px); }
  50%  { transform: translateX(var(--star-base-shift)) translate(-5px,  1.5px); }
  100% { transform: translateX(var(--star-base-shift)) translate(-5px, -1.5px); }
}


.star-nav .star{
  position: absolute;
  width: var(--star-size);
  height: var(--star-size);


  /* mask → solid colorable star */
  -webkit-mask: var(--star-img-url) center / contain no-repeat;
          mask: var(--star-img-url) center / contain no-repeat;
  background-color: var(--star-white);
  cursor: pointer;


  /* nudge just the stars to the RIGHT */
  --star-base-shift: var(--star-nudge-x);


  animation: starFloat 2.4s ease-in-out infinite;
  will-change: transform;
}


/* Fallback if mask unsupported */
@supports not (mask: url(#x)){
  .star-nav .star{
    background: var(--star-img-url) center / contain no-repeat;
    filter: brightness(10) saturate(0); /* force white */
  }
}


/* Base tooltip styling */
.star-tooltip {
  position: absolute;
  background: rgba(35, 1, 25, 0.95);
  color: white;
  padding: 10px 15px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(15px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);

  /* position relative to the star */
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1603;
}

/* Show tooltip when its star is hovered */
.star:hover .star-tooltip {
  opacity: 1;
  visibility: visible;
}

/* BLUE highlight for hovered star + tooltip */
.star:hover {
  background-color: var(--hover-blue);
}
.star:hover .star-tooltip {
  background: var(--hover-blue);
  border-color: #fff;
}
.star:hover .star-tooltip::after {
  border-left-color: var(--hover-blue);
}

/* Arrow */
.star-tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -8px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid rgba(35, 1, 25, 0.95);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

/* Optional: show all tooltips while rail hovered (if you want that) */
.star-rail:hover .star-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Mobile tweak */
@media (max-width: 768px) {
  .star-tooltip {
    right: 40px;
    font-size: 12px;
    padding: 8px 12px;
  }
}



/* =========================================================
   "Jump to..." label — nudged left (closer to center)
   ========================================================= */
.star-rail::after{
  content: "Jump to...";
  position: absolute;
  top: 50%;
  right: -100px;  /* was -77px → closer */
  transform: translateY(-50%) rotate(-90deg);
  font-family: "Gugi", sans-serif;
  font-size: 16px;
  letter-spacing: 3px;
  color: #ffffffee;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}


/* Responsive tweaks */
@media (max-width: 768px){
  .star-tooltip{ font-size: 12px; padding: 8px 12px; right: calc(100% + 10px); }
  .star-rail::after{ right: -52px; font-size: 11px; }
  .star-nav-heading{ right: calc(var(--rail-right) - 52px); font-size: 11px; }
  .star-header-display{ 
    right: calc(var(--rail-right) + 20px); 
    font-size: 0.9rem; 
    top: 12%;
    max-width: 250px;
    width: max-content;
  }
}


/* Motion preference */
@media (prefers-reduced-motion: reduce){
  .star-nav .star{ animation: none; }
}


/* Ensure stars can be hovered even if .star-nav has pointer-events:none */
.star-nav .star {
  pointer-events: auto;           /* <— important */
  z-index: 1602;                  /* keep above the rail and page */
}
.star-nav .star-tooltip {
  z-index: 1603;
}


/* Show ALL tooltips when the rail is hovered (no matter the nesting) */
.star-nav:has(.star-rail:hover) .star-tooltip {
  opacity: 1;
  visibility: visible;
}


/* If the tooltip lives INSIDE the star */
.star:hover .star-tooltip {
  opacity: 1;
  visibility: visible;
}

/* =========================================================
   "Jump to..." label — nudged left (closer to center)
   ========================================================= */
.star-nav-heading {
  position: fixed;
  top: 50%;
  right: calc(var(--rail-right) - 100px);
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center;
  font-family: "Gugi", sans-serif;
  font-size: 16px;
  letter-spacing: 3px;
  color: #ffffffee;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 1602;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.star-nav-heading.show {
  opacity: 1;
  visibility: visible;
}

/* =========================================================
   Star Header Display - Shows h1/h2 text on hover
   ========================================================= */
.star-header-display {
  position: fixed;
  top: 15%;
  right: calc(var(--rail-right) + 40px);
  transform: none;
  font-family: "Alan Sans", Futura, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-transform: none;
  pointer-events: none;
  user-select: none;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  z-index: 1603;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  max-width: 300px;
  width: max-content;
  text-align: left;
  line-height: 1.4;
}

.star-header-display.show {
  opacity: 1;
  visibility: visible;
}


/* If the tooltip is an ADJACENT SIBLING of the star */
.star:hover + .star-tooltip {
  opacity: 1;
  visibility: visible;
}


/* BLUE highlight for the hovered star + its tooltip (child or sibling) */
.star:hover { background-color: var(--hover-blue); }
.star:hover .star-tooltip,
.star:hover + .star-tooltip {
  background: var(--hover-blue) !important;
  border-color: #fff;
}
.star:hover .star-tooltip::after,
.star:hover + .star-tooltip::after {
  border-left-color: var(--hover-blue);
}


   /* =========================================================
      FOOTER
      ========================================================= */
      footer.footer {
        position: relative;
        color: #e2e0de;
        font-size: 1rem;
        line-height: 0.9;
        clip-path: inset(130px 0 0 0);
        background: url("https://static.igem.wiki/teams/5717/main/yippee.webp") center center / 100% auto no-repeat;
        aspect-ratio: 2400 / 600;
        background-blend-mode: overlay;
        display: grid;
        align-content: end;
        padding: 1.5rem 4% 2rem 6%;
      }
     
      footer.footer > * {
        position: relative;
        z-index: 1;
      }
     
      footer a {
        color: #00ccffcf !important;
        font-weight: bold;
        text-decoration: none;
      }
      footer a:hover {
        color: #ffc800cf !important;
        text-decoration: underline;
      }



   /* =========================================================
      Mobile tweaks
      ========================================================= */
   @media (max-width: 1200px){
     .planet{ right: -40px; width: 560px; height: 560px; }
     .prosper-logo{ left: 6%; width: 520px; }
   }
   @media (max-width: 992px){
     .side-nav{ display:none; }
     .planet{ right: -20px; width: 440px; height: 440px; }
     .prosper-logo{ left: 5%; width: 420px; }
   }
   @media (max-width: 576px){
     .planet{ right: -10px; width: 360px; height: 360px; }
     .prosper-logo{ left: 4%; width: 320px; }
   }
   
   @media (min-width: 992px){
     .navbar .nav-link{
       padding-top: 1.6rem;    /* lower the text a bit more */
       padding-bottom: .55rem;
     }
   }
   
   @media (min-width: 992px){
     .navbar .navbar-brand{
       margin-right: -6rem !important; /* tighter gap */
     }
   }
   
   /* Move ONLY the nav texts (Home, …) to the right — keep logo where it is */
   @media (min-width: 992px) { /* matches navbar-expand-lg */
     .navbar .navbar-collapse {
       margin-left: 3.5rem;  
     }
   }


   .figure-caption {
    color: white !important;
    text-align: center;
    font-style: italic;
    margin-bottom: 1rem;
  }




  /* References dropdown (Entrepreneurship) */
  .entrepreneurship-dropdown-btn {
    width: 50%;
    padding: 15px 20px;
    font-size: 1.2em;
    background-color: rgba(212, 116, 132, 0.65);
    border: 2px solid #24041C;
    cursor: pointer;
    display: flex;
    justify-content: center;
    position: relative;
    color: #ffffff; /* ensure text is solid white */
    border-radius: 5px;
    font-family: 'Satoshi Bold', sans-serif;
    margin: 0 auto;
  }
 
 
  .entrepreneurship-dropdown-icon {
    font-size: 1.5em;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }
 
 
  .entrepreneurship-dropdown-content {
    display: none;
    margin-top: 10px;
    padding: 20px;
    border: 2px solid #24041C;
    border-radius: 5px;
    background-color: rgba(169, 84, 98, 0.5);
    font-size: 1em;
    color: #ffffff; /* solid white text for readability */
    line-height: 1.6;
  }
 
  .awards-section {
    padding: 12rem 0 10rem;
    text-align: center;
    position: relative;
    z-index: 10;
    margin-top: 3rem;
  }
  
  /* 3 columns, centered */
  .awards-grid {
    width: min(800px, 90vw);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
  }
  
  .award-column {
    flex: 0 0 30%;
    display: flex;
    justify-content: center;
  }
  
  /* Stack meteor + medal in same box */
  .award-stack {
    position: relative;
    width: 180px;
    height: 180px;
  }
  
  /* Meteor layer (behind) */
  .meteor-holder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;           /* under the medal (z 2) */
  }
  
  .meteor-img {
    width: 200px;
    height: auto;
    display: block;
    transform-origin: center;
    filter: drop-shadow(0 0 24px rgba(255, 200, 120, 0.9));
  }
  
  /* Medal layer (on top) */
  .award-card {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 2;
    opacity: 0;           /* GSAP will fade in */
  }
  
  .award-img {
    width: 150px;
    height: auto;
    border-radius: 12px;
    display: block;
  }
  
  .award-caption {
    margin-top: 0.4rem;
    font-size: 1.2rem;
    color: white;
    opacity: 0.9;
  }
  
  /* Glow behind medal */
  .award-card::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 40%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle,
      #b6a25fe6 0%,
      rgba(255, 200, 80, 0.4) 40%,
      rgba(255, 200, 80, 0) 70%
    );
    filter: blur(6px);
    opacity: 0.6;
    z-index: -1;
    pointer-events: none;
    animation: glowPulse 2.5s ease-in-out infinite;
  }
  
  @keyframes glowPulse {
    0%   { transform: translate(-50%, -50%) scale(0.95); opacity: 0.4; }
    50%  { transform: translate(-50%, -50%) scale(1.05); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.4; }
  }  

 
  /* Ensure links inside the references block are readable */
  .entrepreneurship-dropdown-content a { color: #ffffff; text-decoration: underline; }