/*
 * GymAI – Simple landing page for an AI-based gymnastics coaching app.
 *
 * This stylesheet defines colours, typography and layout for a modern,
 * responsive single page application. The design draws inspiration from
 * contemporary tech landing pages with generous whitespace and a balanced
 * mix of bold headings and lighter body text.
 */

/* CSS Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth;
  /* Dark background and light text for the entire site */
  background-color: var(--dark);
  color: var(--text);
}

/* Reusable variables */
:root {
  /* Primary cyan used for buttons, headings and highlights */
  --primary: #00bcd4;
  /* Secondary teal for subtle accents */
  --secondary: #006d86;
  /* Soft accent for muted highlights */
  --accent: #33c7d5;
  /* Dark backgrounds */
  --dark: #0d0d0d;
  /* Light panels and cards (add subtle grey for depth) */
  --light: #1c2836;
  /* Text colour on dark backgrounds */
  --text: #e0e6ed;
  --max-width: 1200px;
  --radius: 8px;
  /* Panel colour for cards and panels: provide contrast with dark background */
  --panel: #22334a;
  /* Input background and text colours for forms */
  --input-bg: #2d3e57;
  --input-text: #e0e6ed;
  --border: rgba(255, 255, 255, 0.15);

  /* New colours for light themed sections */
  --surface: #f5f7fa;
  --card-light: #ffffff;
  --dark-text: #1a2533;
  --border-light: rgba(0, 0, 0, 0.1);
}

/* Container for consistent padding */
.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Navigation bar */
.navbar {
  width: 100%;
  background-color: var(--dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 10;
}
.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}
.logo {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary);
}

/* Logo image styling. When a logo image is used in place of text,
   constrain its height while preserving aspect ratio.  We bumped
   the height from 60px to 75px to make the logo more prominent */
/* Adjusted logo size for improved visibility.  Using a taller height
   makes the logo stand out in the navbar without overpowering the
   surrounding navigation links. */
.logo-img {
  height: 85px;
  width: auto;
  display: block;
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}
.nav-links a {
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}
.nav-links a:hover {
  color: var(--primary);
}
.btn {
  padding: 1rem 2.2rem;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  transition: background-color 0.2s ease;
}
.btn-primary {
  background-color: var(--primary);
  color: var(--dark);
}
.btn-primary:hover {
  background-color: var(--secondary);
}

/* ------------------------------------------------------------------ */
/* Contact page navigation overrides                                      */
/*                                                                       */
/* When the user navigates to the contact page, we want the navbar to    */
/* blend into the lighter theme of that page.  The `.contact-nav` class  */
/* applied to the nav element causes the following overrides:            */

/* Light background and border for the contact navbar */
.contact-nav {
  background-color: var(--surface);
  border-bottom: 1px solid var(--border-light);
}
/* Darker text for nav links on the light nav */
.contact-nav .nav-links a {
  color: var(--dark-text);
}
.contact-nav .nav-links a:hover {
  color: var(--secondary);
}
/* Primary button inside the contact nav retains our cyan colour while
   ensuring the text is dark for contrast */
.contact-nav .btn-primary {
  background-color: var(--primary);
  color: var(--dark);
}
.contact-nav .btn-primary:hover {
  background-color: var(--secondary);
}

/* Light button with dark text, used for primary call‑to‑action on hero */
.btn-light {
  background-color: #ffffff;
  color: var(--dark);
  border: 2px solid transparent;
  font-size: 1.2rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-light:hover {
  background-color: #f2f2f2;
  color: var(--dark);
}

/* Outline button style for secondary actions (e.g., Join Beta) */
/*
 * Outline button style for secondary actions (e.g., Join Beta).
 * We tint the background slightly to give the button weight on the dark
 * hero and use a cyan border for definition. On hover it fills with
 * the primary colour to mirror the filled button on the left.
 */
.btn-outline {
  background-color: rgba(0, 0, 0, 0.35);
  border: 3px solid var(--primary);
  color: var(--primary);
  font-size: 1.2rem;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-outline:hover {
  background-color: var(--primary);
  color: var(--dark);
  border-color: var(--primary);
}

/* Add subtle arrow to buttons with this class */
.btn-arrow::after {
  content: '\203A'; /* Unicode character for a single right arrow */
  margin-left: 0.4rem;
  display: inline-block;
  transition: transform 0.2s ease;
}
.btn-arrow:hover::after {
  transform: translateX(4px);
}

/* Hero section */
.hero {
  position: relative;
  width: 100%;
  /* Allow the hero section to expand when the beta form is visible.  Using
     min-height instead of a fixed height prevents the bottom of the form
     from being cut off on smaller screens while still preserving a
     substantial initial height for the hero image. */
  /* Increase the minimum height of the hero so that toggling the beta
     sign‑up form does not cause the section to grow noticeably.  This
     provides enough vertical space to accommodate the form and progress
     bar without pushing other elements down the page. */
  min-height: 80vh;
  height: auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text);

  /* Use a background image on the hero container itself rather than
     relying solely on an <img> element. This improves reliability when
     serving the page from different origins (e.g. file://) and avoids
     issues where the image fails to render behind the overlay. */
  /* Use a high‑resolution hero image for sharper visuals */
  background-image: url('hero_new.jpg');
  background-size: cover;
  background-position: center;
}
.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Darker gradient overlay for cyan theme */
  background: linear-gradient(135deg, rgba(0, 96, 122, 0.8), rgba(0, 188, 212, 0.4));
  z-index: -1;
}
.hero-content {
  max-width: 700px;
  padding: 0 1rem;
}
.hero h1 {
  /* Even larger headline for greater impact on wide screens */
  /* Reduce the hero headline slightly so the beta form and progress bar fit
     comfortably within the hero without causing the section to expand
     dramatically when the form appears. */
  font-size: 3.3rem;
  /* Use a slightly smaller margin below the headline to save vertical
     space when the beta sign‑up form appears. */
  margin-bottom: 1.2rem;
  font-weight: 600;
}
.hero p {
  /* Reduce paragraph size and spacing to free up vertical space in the hero */
  font-size: 1.2rem;
  margin-bottom: 2rem;
  /* Lower the line height slightly to avoid excessive spacing in the
     hero description. */
  line-height: 1.6;
}

/* Hero buttons container to align primary and secondary buttons */
.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

/* Section headings */
.section-head {
  text-align: center;
  margin-bottom: 2rem;
}
.section-head h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}
.section-head p {
  font-size: 1rem;
  color: #9aa5b1;
  max-width: 600px;
  margin: 0 auto;
}

/* Features Section */
.features {
  padding: 4rem 0;
  background-color: var(--dark);
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}
.feature-card {
  background-color: var(--panel);
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  text-align: left;
}
.feature-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}
.feature-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #b0bac4;
}

/* Analysis results */
.analysis-results {
  margin-top: 3rem;
  padding: 2rem;
  background-color: var(--panel);
  border-radius: var(--radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  text-align: left;
}
.analysis-results h3 {
  font-size: 1.6rem;
  color: var(--primary);
  margin-bottom: 1.5rem;
  text-align: center;
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}
.metric h4 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}
.metric p {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
}
.analysis-note {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: #9aa5b1;
  text-align: center;
}

/* Utility class to hide elements until they are ready */
.hidden {
  display: none !important;
}

/* How it works */
.how {
  padding: 4rem 0;
  background-color: var(--dark);
}
.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  margin-top: 2rem;
}
.step {
  flex: 1 1 200px;
  max-width: 300px;
  background-color: var(--panel);
  padding: 1.5rem;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
.step-number {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  background-color: var(--secondary);
  color: var(--dark);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.step h4 {
  font-size: 1.1rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.step p {
  font-size: 0.9rem;
  color: #9aa5b1;
  line-height: 1.4;
}

/* Demo Section */
.demo {
  padding: 4rem 0;
  background-color: var(--dark);
}
.demo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.upload-box {
  text-align: center;
}
.upload-label {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--primary);
  color: var(--dark);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s ease;
}
.upload-label:hover {
  background-color: var(--secondary);
}
#video-input {
  display: none;
}
.preview {
  width: 100%;
  max-width: 600px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
}
.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  background-color: #000;
}
#preview-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.skeleton-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep the overlay subtle so the underlying video remains visible. A lower
     opacity creates a ghosted effect rather than completely obscuring the
     footage. */
  opacity: 0.25;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.skeleton-overlay.hidden {
  opacity: 0;
}

/* Footer */
.footer {
  background-color: var(--dark);
  color: var(--text);
  padding: 2rem 0;
  text-align: center;
}
.footer p {
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Custom components for analysis section */
/* Metric cards for Movement IQ pillars */
.metric-card {
  background-color: var(--panel);
  padding: 1.25rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  text-align: center;
  color: var(--text);
}
.metric-card h4 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--primary);
}
.metric-card .score {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text);
}
.progress {
  width: 100%;
  height: 6px;
  background-color: #344660;
  border-radius: 3px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background-color: var(--primary);
  width: 0;
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* Description for each metric revealed on click */
.metric-description {
  display: none;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #9aa5b1;
  text-align: left;
}
.metric-card.open .metric-description {
  display: block;
}

/* Secondary button style for beta signup */
.btn-secondary {
  background-color: var(--secondary);
  color: var(--dark);
}
.btn-secondary:hover {
  background-color: var(--primary);
}

/* Beta sign‑up form container */
.beta-form {
  /* Add margin to separate the form from the buttons and hero content */
  margin-top: 2rem;
  /* Add margin below the beta form so that the progress bar and status text
     are not cut off when the form appears inside the hero section.  Without
     this extra space the bottom of the form can be obscured by the
     following section.  Increased from 2.5rem to 4rem for additional space. */
  /* Increase bottom margin so the beta form and progress bar are never
     cut off when the form is toggled open. */
  margin-bottom: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 500px;
  /* Center the form horizontally within the hero section */
  margin-left: auto;
  margin-right: auto;

  /* Centre the contents of the form textually as well */
  text-align: center;
}
.beta-form input[type="email"] {
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: var(--input-bg);
  color: var(--input-text);
  font-size: 1rem;
  outline: none;
}
.beta-form input[type="email"]::placeholder {
  color: #7a8aa5;
}
.beta-form button {
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius);
  background-color: var(--primary);
  color: var(--dark);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border: none;
}
.beta-form button:hover {
  background-color: var(--secondary);
}
/* Beta progress bar */
.beta-progress {
  width: 100%;
  height: 8px;
  background-color: #344b68;
  border-radius: 4px;
  overflow: hidden;
}
.beta-progress-bar {
  height: 100%;
  background-color: var(--primary);
  width: 0;
  border-radius: 4px;
  transition: width 0.4s ease;
}
.beta-status {
  font-size: 0.85rem;
  margin-top: 0.5rem;
  color: #9aa5b1;
}

/* Arrange name and email side by side in beta form on larger screens */
.beta-row {
  display: flex;
  gap: 1rem;
  width: 100%;
}
.beta-row input {
  flex: 1;
  padding: 0.7rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: var(--input-bg);
  color: var(--input-text);
  font-size: 1rem;
  outline: none;
}
.beta-row input::placeholder {
  color: #7a8aa5;
}
@media (max-width: 600px) {
  .beta-row {
    flex-direction: column;
  }
}

/* Team section */
/*
 * Team section
 * By default the team section uses the dark palette defined for the rest of the
 * landing page.  When the `.team` element also has a `.team-light` class
 * applied, the section switches to a light/white theme to better
 * integrate with light sections such as the contact call‑to‑action.  This
 * allows the site to gracefully transition between dark and light colour
 * palettes without duplicating markup.
 */
.team {
  padding: 4rem 0;
  text-align: center;
  background-color: var(--dark);
}

/* Light variant of the team section.  When `.team.team-light` is
   present the section uses a pale surface background and dark text,
   similar to the contact pages.  Individual member cards are white
   with subtle drop shadows and the headings adopt the secondary
   colour from the palette. */
.team.team-light {
  background-color: var(--surface);
  color: var(--dark-text);
}
.team.team-light .team-heading {
  /* Use the primary cyan colour for headings in the light team section to
     match the branding used in the dark sections. */
  color: var(--primary);
}
.team.team-light .member {
  background-color: var(--card-light);
  color: var(--dark-text);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.team.team-light .member h3 {
  /* Harmonise the heading colour with the primary cyan used elsewhere */
  color: var(--primary);
}
.team.team-light .member .member-name {
  color: var(--dark-text);
}
.team.team-light .member-desc {
  color: #67778b;
}

/* Contact page styles */
.contact-page {
  padding: 4rem 0;
  /* Use a light background to create a welcoming feel on the contact page */
  background-color: var(--surface);
  color: var(--dark-text);
}

/* Card wrapper for the contact page content. Creates a white card with rounded
   corners and a subtle shadow, making the page feel more polished and
   approachable. */
.contact-card {
  background-color: var(--card-light);
  border-radius: var(--radius);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 3rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.contact-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}
.contact-left {
  flex: 1 1 300px;
  max-width: 500px;
}
/* Contact left column styling: adjust colours for light background */
.contact-left h2 {
  /* Larger heading on the contact page for a friendlier feel */
  font-size: 2.4rem;
  color: var(--secondary);
  margin-bottom: 1rem;
}
.contact-left p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  color: var(--dark-text);
}
.contact-link {
  color: var(--secondary);
  text-decoration: none;
}
.contact-link:hover {
  text-decoration: underline;
}
/* Contact form container: light card with subtle shadow */
.contact-form-container {
  flex: 1 1 300px;
  max-width: 600px;
  background-color: var(--card-light);
  padding: 2rem;
  border-radius: var(--radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.contact-form .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}
/* Inputs and textarea use light backgrounds with dark text on the contact page */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  color: var(--dark-text);
  font-size: 1rem;
  resize: vertical;
}
.contact-form input[type="text"]::placeholder,
.contact-form input[type="email"]::placeholder,
.contact-form textarea::placeholder {
  color: #77859b;
}
.contact-form button {
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .contact-wrapper {
    flex-direction: column;
  }
  .contact-form-container {
    padding: 1.5rem;
  }
}
/* Contact call‑to‑action section */
.contact-cta {
  padding: 4rem 0;
  /* Switch to a light surface at the bottom of the page to contrast with the dark upper sections */
  background-color: var(--surface);
  text-align: center;
  /* Remove the top border so the light founders section flows smoothly
     into the contact call‑to‑action without a visible break. */
  border-top: none;
}
.contact-cta-content h2 {
  font-size: 2rem;
  color: var(--secondary);
  margin-bottom: 1rem;
}
.contact-cta-content p {
  font-size: 1rem;
  max-width: 600px;
  margin: 0 auto 1.5rem auto;
  color: var(--dark-text);
  line-height: 1.6;
}
.team-heading {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--primary);
}
.team-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
.member {
  background-color: var(--panel);
  padding: 2rem 1.5rem;
  border-radius: var(--radius);
  width: 280px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  color: var(--text);
}
.member-photo {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 1rem auto;
  display: block;
}
.member h3 {
  margin-top: 0;
  font-size: 1rem;
  color: var(--primary);
}
.member .member-name {
  margin-top: 0.25rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
}

/* Additional description below member name (e.g., education) */
.member-desc {
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: #9aa5b1;
  line-height: 1.4;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .nav-links {
    display: none;
  }
  .nav-content {
    justify-content: space-between;
  }
}