/* ==========================================================
   index.css - links to index.html
   fonts, color stuff, the bases, top bar, and unified
   buttons all live in header.css (which is loaded first ofc).
   palette: deep purple page and the color pallete found in the information packet, purple column (#663497),
   white text, green accents. uses flat out buttons, no crazy shadows and weird gradiants because i think that looks ugly.
   linked from the root as: pages/css/index.css, keep in the order please :sob: :praying_hand:
   if anyone is reading this, im calling it deep purple because the hex of the color is pretty deep purple, idk how to describe lol
   ========================================================== */

/* ==========================================================
   intro splash: purple screen + big green LED logo in the middle. the backdrop
   holds for 0.3s then fades over 0.9s, and at EXACTLY the same time the script
   at the bottom of index.html flies the logo up into the top bar and shrinks it
   down to the bar logo size. both are timed to land together at 1.2s.
   ========================================================== */
.intro-splash {
  position: fixed;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
  /* safety net: if the script never runs, the splash still gets out of the way */
  animation: intro-gone 0s linear 2.5s forwards;
}

.intro-backdrop {
  position: absolute;
  inset: 0;
  background: var(--page-bg);
  animation: intro-fade 0.9s ease 0.3s forwards;
}

.intro-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: clamp(150px, 30vw, 340px);
  height: auto;
  /* fixed ratio so the flight knows where it starts before the png even loads */
  aspect-ratio: 405 / 353;
  transform: translate(-50%, -50%);
}

@keyframes intro-fade {
  from { opacity: 1; visibility: visible; }
  to { opacity: 0; visibility: hidden; }
}

@keyframes intro-gone {
  to { visibility: hidden; }
}

/* ---------- page column (the purple cards/card on the deep purple backdrop) ---------- */
.home-page {
  background: var(--purple);
  color: var(--text);
  font-family: var(--font-body);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 1.5rem) 2.5rem;
  line-height: inherit;
  transform: translateY(74px);
}

/* ---------- good ol' headings: big ROBO.woff2 text, cool fluid sizing for funny ---------- */
.home-page h1,
.hero-text h1,
.link-card h2 {
  font-family: var(--font-display);
}

.home-page h1 {
  font-size: clamp(1.6rem, 1rem + 2.2vw, 2.1rem);
  text-align: left;
  color: var(--text);
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--green);
}

.home-page hr {
  border: 0;
  border-top: 2px solid var(--border);
  margin: 1.5rem 0;
}

/* ---------- small text: roboto.woff2 ---------- */
.home-page p,
.link-card p,
.hero-text p,
.quote,
.site-footer {
  font-family: var(--font-body);
}

/* ---------- hero: video fills the top of the page, text overlaid. ---------- */
.hero.is-video {
  position: relative;
  width: 100%;
  min-height: clamp(360px, 68vh, 720px);
  background: #000;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero.is-video .hero-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the team photo stand-in for the hero: hidden while the video is alive, and
   only swapped in (by the script at the bottom of index.html) when webm AND mp4
   both fail. sits under .hero-overlay so the text stays readable either way. */
.hero-fallback {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero.is-video.video-dead .hero-video { display: none; }
.hero.is-video.video-dead .hero-fallback { display: block; }

/* dark overlay so text stays readable on any frame */
.hero.is-video .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

/* hero text/actions: above the overlay, anchored bottom-left */
.hero-text {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 760px;
  padding: clamp(1.25rem, 4vw, 3rem);
  color: #ffffff;
}

.hero-text h1 {
  font-size: clamp(2rem, 1.2rem + 4vw, 3.4rem);
  text-align: left;
  margin: 0 0 0.5rem;
  line-height: 1.15;
  color: #ffffff;
  border: 0;
}

.hero-text p {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  color: #eef2ff;
  margin: 0.5rem 0 1rem;
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.75rem;
}

/* buttons (.btn / .btn-blank / .button--meet): all related to header.css with a set
   of sizes and one hover (white fill insides, deep purple text) for all. */
/* I WOULD LIKE TO MENTION, MOST OF THIS IS PLACEHOLDER. THIS MAY NOT STAY THE SAME AS IT IS NOW */

/* ---------- !!IMPORTANT!! content blocks ---------- */
/* section subheads (branding/sponsorship page) */
.home-page h2 {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1rem + 0.8vw, 1.35rem);
  color: var(--green);
  margin: 1.4rem 0 0.5rem;
}

/* centered page photo (sponsorship/branding) */
.page-photo { text-align: center; }

.page-photo img {
  display: block;
  width: min(100%, 900px);
  height: auto;
  margin: 0 auto 1.25rem;
  border: 3px solid var(--green);
  border-radius: var(--radius);
}

/* font samples (branding) */
.font-sample {
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.95rem + 0.6vw, 1.3rem);
  text-align: center;
  letter-spacing: 0.5px;
  overflow-wrap: anywhere;
}

.font-sample--body { font-family: var(--font-body); }

/* brand color "swatches" (i like this word it sounds cool) */
.swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 1rem 0;
}

.swatch {
  flex: 1 1 200px;
  max-width: 280px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
}

.swatch .chip { display: block; height: 90px; }

.swatch .hex {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  padding: 0.5rem;
  background: var(--panel);
  color: var(--text);
}

.card {
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 1.35rem);
  margin-top: 1.2rem;
}

.quote {
  display: block;
  margin: 1rem 0 0;
  padding-left: 0.75rem;
  border-left: 3px solid var(--green);
  color: var(--muted);
}

.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0.85rem;
  margin-top: 1.2rem;
}

.link-card {
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  transition: border-color 0.1s ease;
}

.link-card:hover { border-color: var(--green); }

.link-card h2 {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  color: var(--green);
  margin: 0 0 0.5rem;
}

/* ---------- !!ULTRA BROKEN RIGHT NOW!! LED Spotlight video embed and citation ---------- */
.split-media iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 0 auto;
  border: 3px solid var(--green);
  border-radius: var(--radius);
  background: #000;
}

main i {
  display: block;
  max-width: 800px;
  margin: 0.75rem auto 0;
  padding-left: 0.75rem;
  border-left: 3px solid var(--green);
  color: var(--muted);
}

/* ---------- placeholders (fundraisers page, getting to it another time, i need the info from the leads.) ---------- */
.placeholder {
  display: block;
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: var(--panel);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-style: italic;
}

/* empty image frame swap in the real photo when it arrives or something like that */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  max-width: 720px;
  margin: 1rem auto 0;
  padding: 1.5rem;
  background: var(--panel);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-style: italic;
  text-align: center;
}

/* ---------- calendar embed from google, somewhat more responsive than the old embed in testing. ---------- */
.responsive-iframe-container {
  max-width: 820px;
  margin: 0 auto;
}

.responsive-iframe-container iframe {
  width: 100%;
  height: clamp(420px, 70vh, 600px);
  border: 3px solid var(--green);
  border-radius: var(--radius);
  background: #ffffff;
  /* dark mode: Google Calendar has no dark theme, so invert it because (curse) you google */
  filter: invert(1) hue-rotate(180deg);
}

/* ---------- meet-the-team quote modal (white dialog, dark copy for cool reasons) ---------- */
.meet-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.75);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.meet-modal.active {
  opacity: 1;
  visibility: visible;
}

.meet-modal-inner {
  position: relative;
  background: #ffffff;
  color: #222222;
  border: 3px solid var(--green);
  border-radius: var(--radius);
  width: min(100%, 560px);
  max-height: 85vh;
  overflow-y: auto;
  padding: clamp(1.5rem, 5vw, 2.25rem);
  text-align: center;
  transform: translateY(18px) scale(0.96);
  transition: transform 0.3s ease;
}

.meet-modal.active .meet-modal-inner { transform: none; }

.meet-modal-inner h2 {
  font-family: var(--font-display);
  color: var(--purple);
  font-size: clamp(1.3rem, 1.1rem + 1.5vw, 1.8rem);
  margin: 0 0 1rem;
}

.meet-modal-close {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  background: transparent;
  border: 0;
  font-size: 1.8rem;
  line-height: 1;
  color: #5f5f6b;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
}

.meet-modal-close:hover { color: var(--purple); }

.meet-quote {
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1rem + 0.6vw, 1.3rem);
  line-height: 1.55;
  color: #222222;
  margin: 0;
  padding-left: 1rem;
  border-left: 4px solid var(--green);
  text-align: left;
}

/* ---------- footer, defined in header.css, so dont come here for that, if you read the document (that i havent made) you would know that ---------- */

/* ---------- i hate css but lets make it more responsive, a few cool tweaks to use ---------- */
@media (max-width: 760px) {
  .hero-text h1 { text-align: center; }
  .hero-text { text-align: center; max-width: 100%; }
  .hero-actions { justify-content: center; }
}

@media (max-width: 480px) {
  .hero.is-video { min-height: 78vh; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions a { text-align: center; }
}

/* ---------- motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  .meet-modal-inner { transform: none; }
  .intro-splash { display: none; }
}

/* i hate the fact this code is so basic, but laid out very well enough that its decently easy to read. */