/* This file styles only the Hero. It does not change the surrounding page. */
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/font/montserrat-500.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/font/montserrat-600.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/font/montserrat-800.ttf") format("truetype");
}

.conference-hero {
  --conference-font: "Montserrat", Arial, sans-serif;
  --conference-height: 400px;
  --conference-background: url("/src/background-hero.png");
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: var(--conference-font);
  -webkit-font-smoothing: antialiased;
}
.conference-hero__banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: var(--conference-height);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #0c87f9;
  color: #fff;
}
.conference-hero__ambient {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(90deg, rgb(0 49 118 / 36%), rgb(0 62 132 / 23%) 42%, rgb(1 43 99 / 27%)), var(--conference-background);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.conference-hero__content {
  position: relative;
  z-index: 2;
  width: calc(100% - 64px);
  max-width: 1320px;
  margin-inline: auto;
  padding-block: 28px;
}
.conference-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 0 12px;
  font: 600 .875rem/1.4 var(--conference-font);
  letter-spacing: .24em;
  text-transform: uppercase;
}
.conference-hero__eyebrow span { width: 76px; height: 1px; background: linear-gradient(90deg, #c9f5ff, transparent); }
.conference-hero__title {
  width: max-content;
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
  color: #fff;
  font-family: var(--conference-font);
  font-size: clamp(2.25rem, 3.15vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.04;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgb(0 71 154 / 10%);
}
.conference-hero__title > span { display: block; }
.conference-hero__details { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 19px; font-size: .9375rem; font-weight: 500; line-height: 1.5; }
.conference-hero__details > span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.conference-hero__details .bi { font-size: .9375rem; color: #dbf5ff; }
.conference-hero__details .conference-hero__divider { width: 1px; height: 16px; background: rgb(233 248 255 / 55%); }
.conference-hero__actions { width: max-content; max-width: 100%; margin-top: 22px; gap: 12px !important; }
.conference-hero .conference-hero__button {
    min-height: 48px;
    gap: 10px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 9px;
    font: 600 .875rem/1.5 var(--conference-font);
    text-decoration: none;
    transition: background .18s, border-color .18s, transform .18s;
    will-change: transform;
}
.conference-hero__button .bi { font-size: 1.25rem; line-height: 1; }
.conference-hero .conference-hero__button--primary { background: #fff; border-color: #fff; color: #0864c7; box-shadow: 0 4px 16px rgb(0 77 170 / 10%); }
.conference-hero .conference-hero__button--primary:hover { background: #eaf8ff; border-color: #eaf8ff; color: #0657b0; transform: translateY(-1px); }
.conference-hero .conference-hero__button--secondary { background: rgb(2 104 210 / 18%); border-color: rgb(229 249 255 / 85%); color: #fff; }
.conference-hero .conference-hero__button--secondary:hover { background: rgb(229 248 255 / 20%); border-color: #fff; color: #fff; transform: translateY(-1px); }
.conference-hero .conference-hero__button:focus-visible, .conference-hero__motion:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.conference-hero .conference-hero__button:active { transform: none; }
.conference-hero__visual { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.conference-hero__network { display: block; width: 100%; height: 100%; }
.conference-hero__channel { font: 600 15px var(--conference-font); text-transform: uppercase; }
.conference-hero__thread { stroke-width: 1.65; }
.conference-hero__inlet { stroke-width: 1.5; }
.conference-hero__fiber-edge { stroke: #0864bf; stroke-width: 3.6; opacity: .16; }
.conference-hero__fiber-halo { stroke-width: 4.2; opacity: .24; }
.conference-hero__thread, .conference-hero__inlet, .conference-hero__fiber-edge, .conference-hero__fiber-halo { stroke-linecap: round; }
.conference-hero__signal { stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 2.4 197.6; stroke-dashoffset: 2.4; }
.conference-hero__signal--glow { stroke-width: 5; opacity: .66; }
.conference-hero__node-flare { opacity: 0; transform-origin: 0 0; }
.conference-hero__row-flash { opacity: 0; }
.conference-hero.has-motion .conference-hero__pixel { animation: conference-shimmer var(--speed, 8s) ease-in-out var(--delay, 0s) infinite; }
.conference-hero.is-paused *, .conference-hero.is-inactive * { animation-play-state: paused !important; }
@keyframes conference-shimmer { 0%, 100% { opacity: .22; } 50% { opacity: .58; } }
.conference-hero__motion {
  position: absolute;
  z-index: 4;
  right: 17px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgb(236 250 255 / 60%);
  border-radius: 50%;
  background: rgb(1 106 206 / 16%);
  color: #fff;
  font-size: 1.1rem;
}
.conference-hero__motion:hover { background: rgb(1 92 188 / 36%); }
.conference-hero__motion[hidden] { display: none; }

/* Under 1200px the renderer creates no motion effects; CSS is static too. */
@media (max-width: 1199.98px) {
  .conference-hero *, .conference-hero *::before, .conference-hero *::after { animation: none !important; transition: none !important; }
  .conference-hero__signal, .conference-hero__node-flare, .conference-hero__row-flash, .conference-hero__motion { display: none; }
  .conference-hero .conference-hero__button:hover { transform: none; }
  .conference-hero__visual { opacity: .82; }
  .conference-hero__title { font-size: 2.375rem; }
  .conference-hero .conference-hero__button { will-change: unset; }
}
@media (max-width: 991.98px) {
  .conference-hero__visual { opacity: .42; }
  .conference-hero__channel { display: none; }
}
@media (max-width: 767.98px) {
  .conference-hero__content { width: calc(100% - 48px); padding-block: 28px; }
  .conference-hero__title { font-size: clamp(1.7rem, 6.9vw, 2.375rem); }
  .conference-hero__eyebrow { margin-bottom: 14px; font-size: .8125rem; }
  .conference-hero__details { gap: 12px; font-size: .8125rem; margin-top: 18px; }
  .conference-hero__details .bi { font-size: .875rem; }
  .conference-hero__visual { opacity: .42; }
  .conference-hero__channel { display: none; }
  .conference-hero__ambient { background-position: center, 45% center; }
}
@media (max-width: 575.98px) {
  .conference-hero__content { width: calc(100% - 40px); }
  .conference-hero__actions { width: 100%; margin-top: 20px; gap: 10px !important; }
  .conference-hero .conference-hero__button { width: 100%; min-height: 44px; padding: 10px 14px; font-size: .8125rem; }
  .conference-hero__visual { opacity: .34; }
}
@media (max-width: 359.98px) {
  .conference-hero__content { width: calc(100% - 32px); }
  .conference-hero__title { font-size: 1.6rem; }
  .conference-hero__details { font-size: .75rem; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .conference-hero *, .conference-hero *::before, .conference-hero *::after { animation: none !important; transition: none !important; }
  .conference-hero__signal, .conference-hero__node-flare, .conference-hero__row-flash, .conference-hero__motion { display: none; }
  .conference-hero .conference-hero__button:hover { transform: none; }
  .conference-hero .conference-hero__button { will-change: unset; }
}