/* ==========================================================================
   Sports & Live Events AI Innovation @ AWS re:Invent
   ========================================================================== */

:root {
  /* Light palette below the hero (matches AWS Executive Mixer Splash page) */
  --bg: #ffffff;
  --bg-2: #f3f3f7;
  --card: #f3f3f7;
  --card-hover: #ebebf2;
  --line: rgba(22, 29, 38, 0.1);
  --text: #161d26;
  --muted: #545b64;
  --accent: #7a49a4;
  --btn-dark: #1c2735;
  --link: #0073bb;

  /* re:Invent-style rainbow */
  --rainbow: linear-gradient(90deg, #ff5f6d 0%, #ff9a3c 18%, #ffd84d 34%, #4ee1a0 52%, #3ab7ff 68%, #8a5cff 84%, #ff5fd2 100%);
  --rainbow-soft: linear-gradient(90deg, #fff5b8 0%, #ffd9c2 45%, #ffb8f0 100%);

  --radius: 18px;
  --maxw: 1180px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
a { color: var(--link); }
a:hover { color: var(--text); }
:focus-visible { outline: 3px solid #0073bb; outline-offset: 3px; border-radius: 4px; }

.container { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.narrow { max-width: 860px; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: #fff; color: #000; padding: 0.6rem 1rem; border-radius: 8px;
}
.skip-link:focus { top: 1rem; }

.rainbow-bar { height: 6px; background: var(--rainbow); background-size: 200% 100%; animation: slide 12s linear infinite; }
@keyframes slide { to { background-position: 200% 0; } }

.rainbow-text {
  background: var(--rainbow);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: slide 14s linear infinite;
}
.rainbow-text.strong { font-weight: 700; background: none; color: var(--accent); animation: none; }

.eyebrow {
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8rem; font-weight: 600;
  color: var(--muted); margin: 0 0 0.75rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  padding: 0.9rem 1.8rem; border-radius: 999px; border: 0; transition: transform 0.15s, box-shadow 0.15s;
}
.btn:hover { transform: translateY(-2px); }
.btn--rainbow { background: var(--rainbow); background-size: 200% 100%; color: #0b0a14; animation: slide 10s linear infinite; box-shadow: 0 10px 30px rgba(138, 92, 255, 0.35); }
.btn--rainbow:hover { color: #0b0a14; box-shadow: 0 14px 38px rgba(255, 95, 210, 0.45); }
.btn--ghost { color: var(--text); border: 1px solid #d5dbdb; background: #fff; }
.btn--ghost:hover { background: var(--card-hover); color: var(--text); }
.btn--dark { background: var(--btn-dark); color: #fff; }
.btn--dark:hover { background: #000; color: #fff; }
.btn--dark:disabled { opacity: 0.7; cursor: wait; transform: none; }
.btn--block { width: 100%; font-size: 1.05rem; }

/* ---------- Hero ---------- */
/* Matches the AWS re:Invent Splash event header (Closing Bell layout) */
@font-face { font-family: "Amazon Ember Display"; src: url("assets/fonts/AmazonEmberDisplay-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Amazon Ember Display"; src: url("assets/fonts/AmazonEmberDisplay-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Amazon Ember Mono"; src: url("assets/fonts/AmazonEmberMono-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }

.hero__container { width: min(100% - 2.5rem, 900px); margin-inline: auto; }

/* Matches the AWS Executive Mixer Splash header: 73px white bar, 55px Gray850 logo 40px from left */
.topbar { background: #ffffff; border-bottom: 1px solid #ccccd1; height: 73px; display: flex; align-items: center; padding: 0 40px; }
.topbar__logo { width: 55px; height: auto; display: block; }
.topbar__link { display: block; border-radius: 4px; }
.topbar__link:focus-visible { outline: 3px solid #0073bb; outline-offset: 4px; }

.hero {
  position: relative; color: #fff;
  background: #050325 url("assets/hero-gradient.png") center / cover no-repeat;
  font-family: "Amazon Ember Display", "Inter", system-ui, sans-serif;
}
.hero__main { padding: 2.6rem 0 6.5rem; }
/* Open To All badge: bottom-right of the purple header, just above the countdown band
   (its white lettering needs a dark background). 40px inset matches the top bar. */
.hero__ota { position: absolute; bottom: calc(100% + 1.25rem); right: 40px; width: 80px; height: auto; }
.hero__reinvent { width: min(450px, 80%); height: auto; margin-bottom: 1.6rem; }
.hero__title { margin: 0 0 1.8rem; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; font-family: "Inter", system-ui, sans-serif; }
/* Single-color shimmer: shades of soft lavender with a light highlight sweeping across.
   To change the color, edit --title-dark / --title-mid / --title-light. */
.hero__title span { display: block; }
.hero__title {
  --title-dark: #a98bff;  /* Soft lavender */
  --title-mid: #c9b6ff;
  --title-light: #f1ebff;
  width: fit-content;
  background: linear-gradient(100deg, var(--title-dark) 0%, var(--title-mid) 30%, var(--title-light) 50%, var(--title-mid) 70%, var(--title-dark) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: var(--title-mid); /* fallback if gradient text isn't supported */
  -webkit-text-fill-color: transparent;
  animation: title-shimmer 6s ease-in-out infinite;
}
@keyframes title-shimmer {
  0%   { background-position: 100% 0; }
  50%  { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}
/* Subtitle styled like the Closing Bell Splash event name: bold white Amazon Ember */
.hero__subtitle {
  margin: -0.9rem 0 1.6rem; color: #c9b6ff; /* light lavender, matches title */
  font-family: "Amazon Ember Display", "Inter", system-ui, sans-serif; font-weight: 700;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem); line-height: 1.3;
}
/* "Presented by AWS" line under the subtitle */
.hero__presenter {
  display: flex; align-items: center; gap: 0.7rem; margin: -0.4rem 0 1.6rem;
  font-weight: 700; font-size: 1rem; color: #fff;
}
.hero__presenter-logo { height: 34px; width: auto; }
.hero__mono {
  margin: 0 0 1.4rem; font-family: "Amazon Ember Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-weight: 700; font-size: 1.1rem; line-height: 1.4;
}
.hero__cta {
  display: inline-block; margin-top: 0.6rem; padding: 0.75rem 1.9rem; border: 2px solid #fff; border-radius: 999px;
  color: #fff; font-weight: 700; text-decoration: none; transition: background 0.15s, color 0.15s;
}
.hero__cta:hover { background: #fff; color: #161d26; }

.hero__countdown { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(5, 3, 37, 0.25); padding: 2rem 0 1.9rem; text-align: center; }
.countdown { display: flex; justify-content: center; gap: clamp(1.5rem, 6vw, 4.5rem); }
.countdown__unit { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.countdown__num { font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.countdown__label { font-size: 1.1rem; }
.countdown__done { font-weight: 700; margin: 0; font-size: 1.2rem; }

/* ---------- Sections ---------- */
.section { padding: 1.5rem 0; }
.section__title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 1.75rem; font-weight: 800; letter-spacing: -0.01em; }
.section__sub { color: var(--muted); margin: -1rem 0 2rem; font-size: 1.05rem; }
.fineprint { color: var(--muted); font-style: italic; font-size: 0.9rem; margin-top: 1.5rem; }

.intro { padding-bottom: 0; }
.lead { font-size: clamp(1.15rem, 2.2vw, 1.45rem); text-align: center; font-style: italic; color: #414750; margin: 0; }


/* ---------- Agenda ---------- */
.agenda__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
.agenda-card {
  position: relative; background: var(--card); border-radius: var(--radius); padding: 2rem; border: 1px solid var(--line);
  /* Purple accent is the card's own top border, so it follows the rounded corners and joins the side borders cleanly */
  border-top: 4px solid var(--accent);
}
.agenda-card__tag { margin: 0 0 0.5rem; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.agenda-card__title { margin: 0 0 1rem; font-size: 1.6rem; line-height: 1.25; }
/* Both cards share row tracks (subgrid), so the tag, title, audience line, description,
   and button each start at the same height in both cards. */
.agenda__grid { grid-template-rows: repeat(5, auto); }
.agenda-card { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
.agenda-card > * { margin-top: 0; }
.agenda-card > p:not(.agenda-card__tag) { margin: 0 0 0.85rem; }
.agenda-card > .btn { justify-self: start; align-self: end; margin-top: 0.65rem; }


/* ---------- Builder sessions ---------- */
.builders { background: var(--bg); }
/* Fixed columns + equal rows so every box is the same width and height */
.builder-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 1.25rem; }
.builder-grid > li { display: flex; }
.builder-card { width: 100%; }
@media (max-width: 1100px) { .builder-grid { grid-template-columns: repeat(3, 1fr); } }
/* Center a short last row: 2 leftover cards in the 4-column layout, 1 leftover card in the 3-column layout */
@media (min-width: 1101px) { .builder-grid > li:nth-child(4n+1):nth-last-child(2) { grid-column: 2; } }
@media (min-width: 821px) and (max-width: 1100px) { .builder-grid > li:nth-child(3n+1):last-child { grid-column: 2; } }
@media (max-width: 820px) { .builder-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .builder-grid { grid-template-columns: 1fr; grid-auto-rows: auto; } }
.builder-card {
  position: relative; height: 100%; display: flex; flex-direction: column; gap: 0.85rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem;
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
}
.builder-card::after {
  /* purple border on hover */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0;
  background: var(--accent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity 0.2s;
}
.builder-card:hover { transform: translateY(-4px); background: var(--card-hover); }
.builder-card:hover::after { opacity: 1; }
.builder-card__title { margin: 0; font-size: 1.08rem; line-height: 1.5; font-weight: 600; }

/* ---------- Hosts ---------- */
.hosts__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.host { width: 280px; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.5rem; }
.host img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem; border: 3px solid var(--accent); }
.host h3 { margin: 0; font-size: 1.2rem; }
.host p { margin: 0.15rem 0; }
.host a { display: inline-block; margin-top: 0.6rem; font-weight: 600; }
/* Reserve two lines for job titles so host cards line up */
.host__title { min-height: 3.2em; }

/* ---------- Session One panel ---------- */
.people-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr; gap: 1.25rem; }
.people-grid .host { width: auto; padding: 1.75rem 1rem; }
/* Speaker photos match the 120px placeholder avatars so every panel card lines up */
.people-grid .host img { width: 120px; height: 120px; }
.avatar {
  width: 120px; height: 120px; margin: 0 auto 1rem; border-radius: 50%;
  display: grid; place-items: center; background: #e4dcef; border: 3px solid var(--accent);
}
.avatar svg { width: 60%; height: 60%; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; }
.host__role { margin: 0 0 0.35rem !important; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); }
.host--moderator { background: #ebe4f3; border-color: rgba(122, 73, 164, 0.35); }
@media (max-width: 1100px) { .people-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .people-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Sponsors ---------- */
/* Its own light gray band, directly under the hero's countdown */
.sponsors { background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 2.25rem 0 2.5rem; color: var(--text); }
.sponsors__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 3rem 5rem; }
.sponsor { margin: 0; text-align: center; }
.sponsor figcaption { font-weight: 700; margin-bottom: 1rem; line-height: 1.5; }
/* Equal-height box so every logo's vertical center lines up */
.sponsor__box { height: 130px; display: flex; align-items: center; justify-content: center; }
.sponsor__logo { height: 64px; width: auto; }
/* Both PNGs are cropped tight to the artwork with transparent backgrounds.
   Wiz (gold sponsor) covers 1.5x Presidio's area. Aspect ratios: Wiz 2.24:1,
   Presidio 7.37:1, so Wiz height = Presidio height x sqrt(1.5 x 7.37 / 2.24) ~ 2.22. */
.sponsor__logo--presidio { height: 36px; }
/* The star sits above the letters, so the WIZ letters' center is 12.8% of the image
   height below the image center. Shift up so the letters line up with PRESIDIO's center.
   translateY % is relative to the image's own height, so this holds at every size. */
.sponsor__logo--wiz { height: 80px; transform: translateY(-12.8%); }

/* ---------- Registration ---------- */
.register__card {
  max-width: 880px; margin-inline: auto; background: var(--bg-2); color: var(--text); border-radius: 24px; overflow: hidden;
}
.register__card .muted { color: var(--muted); }
.register__card a { color: var(--link); }
.register__header { padding: 2.5rem 2.5rem 1.5rem; }
.register__header h2 { margin: 0 0 0.5rem; font-size: 2rem; font-weight: 800; }
.register__header p { margin: 0 0 0.5rem; }

/* Embedded RegFox form. script.js sets the exact height from RegFox's size reports, so the whole
   form sits on the page with no inner scrolling. 600px is only the starting height before the first
   report; it must stay shorter than the form, because RegFox stretches its page to fill the frame. */
/* The box (not the frame) gets its height from script.js and clips RegFox's empty space + footer below SUBMIT. */
.register__embed { margin: 0 1.5rem 1.5rem; overflow: hidden; border-radius: 12px; }
.register__frame { display: block; width: 100%; height: 600px; border: 0; background: var(--bg-2); }

/* ---------- Footer ---------- */
.footer { margin-top: 4rem; background: var(--bg-2); }
.footer__bar { height: 6px; background: var(--accent); }
.footer__inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.75rem 0; color: var(--muted); font-size: 0.9rem; }
.footer__inner p { margin: 0; }
.footer__regfox a { display: inline-flex; align-items: center; gap: 0.45rem; color: inherit; text-decoration: none; }
.footer__regfox a:hover { color: var(--text); text-decoration: underline; }
.footer__regfox-logo { height: 18px; width: auto; }
/* "Built with Kiro" credit, centered under the registration card */
.built-with { margin: 1.25rem 0 0; text-align: center; font-size: 0.9rem; color: var(--muted); }
.built-with a { display: inline-flex; align-items: center; gap: 0.4rem; color: inherit; text-decoration: none; }
.built-with a:hover { color: var(--text); text-decoration: underline; }
.built-with__icon { width: 18px; height: 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .hero__main { padding: 2rem 0 3.5rem; }
  /* Smaller and tucked into the page gutter on phones */
  .hero__ota { bottom: calc(100% + 0.75rem); right: 20px; width: 64px; }

  /* Session lines: drop the "|" and put each session's label on its own line */
  .hero__mono { font-size: 1rem; }
  .hero__mono--sessions br, .hero__sep { display: none; }
  .hero__line, .hero__label { display: block; }
  .hero__label { margin-bottom: 0.35rem; }

  /* Countdown: smaller numbers and labels so the four units don't crowd */
  .countdown { gap: 1.75rem; }
  .countdown__unit { min-width: 0; }
  .countdown__num { font-size: 1.85rem; }
  .countdown__label { font-size: 0.85rem; }

  /* Sponsors: side by side at smaller sizes, Wiz still the larger logo */
  .sponsors { padding: 1.75rem 0 2rem; }
  .sponsors__row { flex-wrap: nowrap; gap: 1.75rem; }
  .sponsor figcaption { font-size: 0.9rem; margin-bottom: 0.5rem; }
  .sponsor__box { height: 72px; }
  .sponsor__logo--wiz { height: 49px; }
  .sponsor__logo--presidio { height: 22px; }

  /* Odd fifth card (moderator): center it on its own row at the same width as the others */
  .people-grid .host--moderator { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.625rem); }

  .register__header { padding: 2rem 1.25rem 1rem; }
  /* Edge-to-edge in the box on phones so the form gets every pixel of width */
  .register__embed { margin: 0 0 0.5rem; border-radius: 0; }
  .agenda-card { padding: 1.5rem; }
}