/* General Styles */
body {
    margin: 0;
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Navigation Menu */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 10px;
}

nav .logo {
    display: flex;
    align-items: center;
}

nav .logo img {
    height: 50px; /* Adjust the height of the logo as needed */
    width: auto; /* Maintain aspect ratio */
    margin-right: 10px; /* Add some space between the logo and the text */
}

nav .logo span {
    font-size: 24px;
    color: #fff;
}

nav .nav-links {
    list-style: none;
    display: flex;
}

nav .nav-links li {
    margin: 0 15px;
}

nav .nav-links a {
    color: #fff;
    text-decoration: none;
}

nav .hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

nav .hamburger span {
    width: 25px;
    height: 3px;
    background: #fff;
    margin: 4px 0;
}

a {
    cursor: pointer;
}

/* Hero Section */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6rem 10%;
    gap: 4rem;
    min-height: 80vh;
}

.hero .hero-text {
    flex: 1;
    color: #333;
    max-width: 40rem;
    text-align: left;
    font-size:3rem;
}



.hero .hero-text  .app-store-badge {
    width: 12rem;
    height: auto;
    margin-top: 2rem;
    display: block;
    cursor: pointer;
}

.hero .hero-text img {
    width: 30rem;
    margin-bottom: 1rem;
}

.hero-image {
    flex: 1;
    max-width: 600px;
    width: 100%;
    height: auto;
    object-fit: contain;
    animation: fadeInHero 4s ease forwards
}

@media screen and (max-width: 1200px) {
    .hero .hero-text {
        font-size: 2rem;
    }

    .hero .hero-text  .app-store-badge {
        width: 10rem;
    }

    .hero .hero-text img {
        width: 20rem;
    }

    .hero-image {
        max-width: 400px;
    }
}

@media screen and (max-width: 900px) {
    .hero .hero-text {
        font-size: 1.5rem;
    }

    .hero .hero-text img {
        width: 15rem;
    }
}


@media screen and (max-width: 768px) {
    .hero {
        flex-direction: column;
        text-align: center;
        padding: 3rem 5%;
    }
    .hero .hero-text {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .hero .hero-text p {
        margin-top: 1rem;
        margin-bottom: ;
        text-align: center;
    }
    .hero-image {
        max-width: 300px;
        margin-top:-4rem;
    }
    .hero .hero-text  .app-store-badge {
        width: 8rem;
        margin-top:0;
        margin-bottom: 2rem;
    }
}

/* Features Section */
.features {
    padding: 50px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.features .feature {
    max-width: 80rem;
}

.features .feature {
    margin: 0.5rem 0;
}

.features .feature p {
    
    font-size: 1.8rem;
    text-align: left;
    margin-top:2rem;
}

.features .feature h3 {
    margin-top:3rem;
    margin-bottom:0.25rem;
    font-size:3rem;
    text-align: left;
}

.features.route-planning {
    background-color: #333;
    color:#fff
}

.features.route-planning h3 {
    font-size: 2rem;
    margin-top:1.5rem;
}

/* Footer */
footer {
    background-color: #d3d3d3;
    color: #333;
    padding: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

footer a {
    color: #fff;
    margin: 0 5px;
    text-decoration: none;
}

footer a:visited {
    color: #fff;
}

footer .social-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

footer .social-links {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

footer .footer-links {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
}

@media screen and (max-width: 1000px) {
    footer .footer-links {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    footer {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start; 
    }

    footer > div {
        margin-bottom: 25px;
    }
}

footer .footer-links a {
    color: #000;
    text-decoration: none;
}

footer .strava-logo {
    width:100px
}


.newmexico-image, .montana-image, .welcome-image, .long-road-image, .tour-divide-image {
  width: 98%;
  max-width: 900px;
  border-radius: 20px;
  display: block;
  margin: 2rem auto;
}

.feature .montana-image, .feature .welcome-image, .feature .long-road-image, .feature .tour-divide-image, .feature .newmexico-image {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease-out, transform 1s ease;
}
.feature .montana-image.in-view, .feature .welcome-image.in-view, .feature .long-road-image.in-view, .feature .tour-divide-image.in-view, .feature .newmexico-image.in-view  {
    opacity: 1;
    transform: translateY(0);
    animation: fadeInHero 2s ease-out forwards;
}


.montana-image {
    margin-bottom:8rem;
}

/* Responsive Styles */
@media screen and (max-width: 768px) {
    nav .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #333;
    }
    nav .nav-links.active {
        display: flex;
    }
    nav .nav-links li {
        text-align: center;
        margin: 15px 0;
    }
    nav .hamburger {
        display: flex;
    }
}


/* --- Light ExcitingBackground replica for web --- */
:root {
  --bp-bg1: rgb(242, 204, 153); /* Color(0.95, 0.80, 0.60) */
  --bp-bg2: rgb(153, 191, 166); /* Color(0.60, 0.75, 0.65) */
  --bp-blue: rgba(0, 102, 255, 0.35);
  --bp-orange: rgba(255, 153, 0, 0.30);
  --bp-black: rgba(0, 0, 0, 0.30);
}

body {
  background: linear-gradient(135deg, var(--bp-bg1), var(--bp-bg2)) fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Full-screen animated glow layers */
.bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

/* Outer soft moving glow */
.bg::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    var(--bp-blue) 0deg,
    var(--bp-orange) 120deg,
    var(--bp-black) 240deg,
    var(--bp-blue) 360deg
  );
  filter: blur(60px);
  opacity: 0.9;
  mix-blend-mode: soft-light;
  transform: scale(1.4);
  animation: bp-spin 28s linear infinite;
}

/* Inner highlight glow */
.bg::after {
  content: "";
  position: absolute;
  inset: 10% 15% 15% 10%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    var(--bp-blue) 0deg,
    var(--bp-orange) 140deg,
    var(--bp-black) 260deg,
    var(--bp-blue) 360deg
  );
  filter: blur(40px);
  opacity: 0.6;
  mix-blend-mode: screen;
  transform: scale(0.8);
  animation: bp-spin 28s linear infinite;
}

@keyframes bp-spin {
  to { transform: rotate(360deg) scale(1); }
}

/* Keep sections transparent so gradient shows through */
nav, section {
  background: transparent;
}


.typewriter-text, .typewriter-text-2, .typewriter-text-3, .typewriter-text-4, .typewriter-text-5 {
  display: inline-block;
  line-height: 1.3;
  text-align: left;
  margin-bottom:10rem;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}

.feature-text .typewriter-text-2, .feature-text .typewriter-text-3, .ride-iq .typewriter-text-4, .tour-divide .typewriter-text-5 {
    margin-bottom:0;
    width:100%;
}

.ride-iq .typewriter-text-4 {
    width: 100%;
}

.typewriter-text span, .typewriter-text-2 span, .typewriter-text-3 span, .typewriter-text-4 span, .typewriter-text-5 span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  font-size: 2.9rem;
  margin-right: 0.6rem;
}

/* Only animate once the parent has scrolled into view */
.typewriter-text.in-view span, .typewriter-text-2.in-view span, .typewriter-text-3.in-view span, .typewriter-text-4.in-view span, .typewriter-text-5.in-view span {
  animation: fadeInWord 2.2s ease forwards;
}

/* Fade and rise in */
@keyframes fadeInWord {
  from {
    opacity: 0;
    transform: translateY(0.4em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInHero {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Stagger the words */
.typewriter-text span:nth-child(1)  { animation-delay: 0s; }
.typewriter-text span:nth-child(2)  { animation-delay: 0.20s; }
.typewriter-text span:nth-child(3)  { animation-delay: 0.40s; }
.typewriter-text span:nth-child(4)  { animation-delay: 0.61s; }
.typewriter-text span:nth-child(5)  { animation-delay: 0.80s; }
.typewriter-text span:nth-child(6)  { animation-delay: 1.01s; }
.typewriter-text span:nth-child(7)  { animation-delay: 1.21s; }
.typewriter-text span:nth-child(8)  { animation-delay: 1.41s; }
.typewriter-text span:nth-child(9)  { animation-delay: 1.61s; }
.typewriter-text span:nth-child(10) { animation-delay: 1.81s; }
.typewriter-text span:nth-child(11) { animation-delay: 2.02s; }
.typewriter-text span:nth-child(12) { animation-delay: 2.22s; }
.typewriter-text span:nth-child(13) { animation-delay: 2.42s; }
.typewriter-text span:nth-child(14) { animation-delay: 2.67s; }
.typewriter-text span:nth-child(15) { animation-delay: 3.0s; }

.typewriter-text-2 span:nth-child(1)  { animation-delay: 0s; }
.typewriter-text-2 span:nth-child(2)  { animation-delay: 0.20s; }
.typewriter-text-2 span:nth-child(3)  { animation-delay: 0.40s; }


.typewriter-text-3 span:nth-child(1)  { animation-delay: 0s; }
.typewriter-text-3 span:nth-child(2)  { animation-delay: 0.20s; }
.typewriter-text-3 span:nth-child(3)  { animation-delay: 0.40s; }
.typewriter-text-3 span:nth-child(4)  { animation-delay: 0.61s; }

.typewriter-text-4 span:nth-child(1)  { animation-delay: 0s; }
.typewriter-text-4 span:nth-child(2)  { animation-delay: 0.20s; }
.typewriter-text-4 span:nth-child(3)  { animation-delay: 0.40s; }


.typewriter-text-5 span:nth-child(1)  { animation-delay: 0s; }
.typewriter-text-5 span:nth-child(2)  { animation-delay: 0.20s; }
.typewriter-text-5 span:nth-child(3)  { animation-delay: 0.40s; }
.typewriter-text-5 span:nth-child(4)  { animation-delay: 0.61s; }
.typewriter-text-5 span:nth-child(5)  { animation-delay: 0.80s; }
.typewriter-text-5 span:nth-child(6)  { animation-delay: 1.01s; }
.typewriter-text-5 span:nth-child(7)  { animation-delay: 1.21s; }
.typewriter-text-5 span:nth-child(8)  { animation-delay: 1.41s; }

.feature-weather {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
}

.feature-weather .feature-text {
    flex: 1;
}

.feature-weather .feature-image {
    width: 20rem;
    max-width: 40%;
    border-radius: 8px;
    object-fit: cover;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 2s ease-out, transform 1s ease;
}

.feature-weather .feature-image.in-view {
    opacity: 1;
    transform: translateY(0);
    animation: fadeInHero 1s ease-out forwards;
}




.feature-poi {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
}

.feature-poi .feature-text {
    flex: 1;
}

.feature-poi .feature-text h2, .feature-poi .feature-text p {
    text-align: right;
}

.feature-poi .feature-image {
    width: 20rem;
    max-width: 40%;
    border-radius: 8px;
    object-fit: cover;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease-out, transform 1s ease;
}

.feature-poi .feature-image.in-view {
    opacity: 1;
    transform: translateY(0);
    animation: fadeInHero 2s ease-out forwards;
}

.feature .iq-image {
    width: 20rem;
    max-width: 100%;
    height: auto;
    margin-top:5rem;
}

.feature.tour-divide p, .feature.tour-divide h3 {
    max-width: 50rem;
}

.feature.ride-iq p, .feature.ride-iq h2 {
    text-align: center;
    max-width: 50rem;
}

.feature.try-today {
    margin:6rem 0;
    text-align:center;
}

@media (max-width: 768px) {
    .features {
        padding: 20px;
    }

    .typewriter-text {
        margin-bottom:2rem;
    }

    .feature.feature-weather {
        flex-direction: column;
        text-align: center;
        align-items: center;
        margin-bottom: 3rem;
    }

    .feature-weather .feature-image {
        max-width: 70%;
    }

    .feature.feature-poi {
        flex-direction: column;
        text-align: center;
        align-items: center;
        margin-bottom: 3rem;
    }

    .feature .iq-image {
        margin-top:3rem;
        width:13rem;
    }

    .feature-text h3 {
        margin-top:0;
    }

    .feature-poi .feature-image {
        max-width: 70%;
    }

    .feature.feature-weather {
        flex-direction: column-reverse;
    }

    .feature-poi .feature-text p, .feature-poi .feature-text h3  {
        text-align:left;
    }

    .feature-poi .feature-text p {
        margin-top:0.5rem;
    }

    .montana-image {
        margin-bottom:2rem;
    }

    .features .feature.gpx-file h3 {
        text-align: center;
    }

    .feature.ride-iq p, .feature.ride-iq h3 {
        text-align: left;
    }

    .feature-poi .feature-text .typewriter-text-3{
        text-align:left;
    }

    .ride-iq h2.typewriter-text-4 { 
        text-align:left;
    }

    .feature.ride-iq {
        text-align: left;
    }
}