/* spacing so fixed menu doesn’t overlap */
body.home .page {
  padding-top:120px;
}

/* containers */
.home-landing .container {
  width:min(1100px,92vw);
  margin:0 auto;
}

/* hero */
.hero {
  position: relative;
  z-index: 1;
  height: 80vh; /* shorter than full screen */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  /* background image + fallback */
  background: url("img/background.png") center/cover no-repeat, #f5dc9f;
}

/* Centered content */
.hero-center {
  position: relative;
  z-index: 2;
}

/* Big SEQUESTER */
.quest {
  margin: 0;
  font-size: clamp(80px, 15vw, 150px);
  font-weight: 1000;
  color: #274a66; 
  line-height: 0.8;
  letter-spacing: -4px;   /* bring letters closer together */

  text-shadow: 6px 4px 0px #274a6688; 
  text-align: center;
  display: inline-flex;
  position: relative; 
  white-space: nowrap;
  z-index: 1;
}

.quest .se {
  margin-right: 4px;  /* smaller gap before QUEST */
}

.quest .quest-word {
  margin-left: 0;     /* QUEST hugs SE */
  margin-right: 12px; /* keep normal spacing before ER */
}

/* ER spaced out a little more */
.quest .er {
  margin-left: 14px;    /* extra gap before ER */
}

/* 🌊 Waves */
.ocean-waves {
  position: absolute;
  bottom: 0;   /* stick to bottom of hero */
  left: 0;
  right: 0;
  width: 100%;
  height: 400px; /* visible overlap */
  z-index: 0;
  line-height: 0;
}

@keyframes waveDrift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.wave-group path {
  animation: waveDrift 12s linear infinite;
}

.wave-1 path { animation-duration: 4s; }
.wave-2 path { animation-duration: 10s; }
.wave-3 path { animation-duration: 14s; }


.ocean-waves svg {
  width: 200%;
  height: 100%;
  display: block;
  transform: translateY(130px);
}

.ocean-waves path {
  animation: waveDrift 12s linear infinite alternate;
  will-change: transform;
}

/* Subheading on top-right */
.hero-sub {
  position: absolute;
  top: -30px;      /* move upward */
  right: 0px;    /* push to the right edge */
  font-size: clamp(14px, 5vw, 43px);
  font-weight: 700;
  color:#274a66; 
  text-shadow: 2px 1px 0px #27426b00;
  letter-spacing: -2px;   /* space between letters */
  word-spacing: 0.1px;       /* space between iGEM / Guelph / 2025 */
  font-style: normal;  /*italic override*/

}

/* Emphasize QUEST italic */
.quest .quest-word {
  font-style: italic;
  color: #274a66; 
}


.hero::before {
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:180px;
  background: linear-gradient(to bottom, #f5dc9f 0%, rgba(245,220,159,0) 100%);
  z-index:1;
}

/* Keep hero content above fade + background */
.hero-inner {
  position: relative;
  z-index: 2;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:24px;
  align-items:center;
  padding:24px 0 40px;
}
.eyebrow {
  margin:0 0 8px;
  font-size:22px;
  color:#193b6d;
  letter-spacing:.4px;
}
.hero-art {
  display:flex;
  justify-content:center;
}
.hero-art img {
  width:min(600px,100%);
  height:auto;
  transform:translateY(6px);
}

/* palette (light -> deep) */
:root {
  /* Sky + Band 1 — lightest minty blue */
  --sky:        #b1dad6;
  --band1-top:  #b1dad6;
  --band1:      #b1dad6;

  /* Band 2 — medium mint */
  --band2-top:  #96cfce;
  --band2:      #96cfce;

  /* Band 3 — teal */
  --band3-top:  #76c4c4;
  --band3:      #76c4c4;

  /* Band 4 — slightly deeper teal */
  --band4-top:  #5da9a9;
  --band4:      #5da9a9;

  /* Band 5 — darker sea teal */
  --band5-top:  #7fcfcf;
  --band5:      #7fcfcf;

  /* Band 6 — deepest shade, footer/base */
  --band6-top:  #96cfce;
  --band6:      #b1dad6;
}


/* wave shapes */
.wave-divider svg path { fill: currentColor; }

.wave-divider {
  position: relative;
  width: 100%;
  height: 120px;
  line-height: 0;
  margin-top: -6px;
  margin-bottom: -6px;
  overflow: hidden;
  background: none;
}
.wave-divider svg {
  width: 100%;
  height: 140px;
  display: block;
  transform: translateY(-10px);
}
.wave-divider svg path { stroke: none; }

/* bands */
.band {
  margin-top:-2px;
  min-height:52vh;
  padding:56px 0 90px;
  display:flex;
  align-items:flex-start;
  color:#eef6ff;
}
.band h2 { margin:0 0 8px; color:#fff; font-weight:800; }
.band p { margin:0; line-height:1.6; max-width:80ch; }

.band-1 { background-color: var(--band1); }
.band-2 { background-color: var(--band3); }
.band-3 { background-color: var(--band4); }
.band-4 { background-color: var(--band5); }
.band-5 { background-color: var(--band6); }
.band-6 { background-color: var(--band6); }

body.home {
  background-color: #f5dc9f; /* keeps hero yellow */
}

.blue-body {
  background-color: #b1dad6;
  min-height: 100vh;
  padding: 60px 20px;
  color: #123;
}

footer {
  background-color: #b1dad6; /* darker teal footer if you want */
}