:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  --accent: #e1f711;
  --ink: #113b60;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: #102b46;
  isolation: isolate;
}
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: -80px;
  background: url("./seminar.webp") center 48% / cover no-repeat;
  filter: blur(65px) brightness(.48) saturate(.75);
  pointer-events: none;
}

.landing {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 520px);
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  overflow: hidden;
  background: linear-gradient(180deg, #cfd0da 0%, #cfd0da 45%, #124b7d 55%, #124b7d 100%);
  box-shadow: 0 0 90px #05152538;
}

.poster {
  position: relative;
  width: 100%;
  max-width: calc(100vh * 941 / 1672);
  max-width: calc(100svh * 941 / 1672);
  flex: none;
  aspect-ratio: 941 / 1672;
}
.poster-art {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
}

.conversion {
  position: absolute;
  z-index: 1;
  top: 83%;
  left: 8%;
  right: 8%;
}
.button-wrap {
  position: relative;
  isolation: isolate;
  animation: breathe 3.6s ease-in-out infinite;
  transform-origin: center;
}
.telegram {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: clamp(56px, 7.8svh, 70px);
  padding: 15px 18px;
  border: 1px solid #f1ff80;
  border-radius: 999px;
  color: var(--ink);
  background: linear-gradient(160deg, #ecff5c 0%, #e1f711 45%, #c4df05 100%);
  box-shadow: 0 4px 0 #849b02, 0 15px 35px #001d3880, inset 0 1px 0 #ffffffe6;
  text-decoration: none;
  font-size: clamp(14px, 4.25vw, 19px);
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.15;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.plane { position: relative; width: 23px; height: 23px; flex: none; fill: currentColor; }
.label { position: relative; }
.go {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #153c6412;
}
.go svg { width: 18px; height: 18px; }
.shine { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.shine::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -60%;
  width: 36%;
  background: linear-gradient(90deg, transparent, #ffffffe0, transparent);
  transform: skewX(-23deg);
  animation: shine 5.5s ease-in-out .8s infinite;
}
.ripple {
  position: absolute;
  z-index: -1;
  inset: -3px;
  border-radius: 999px;
  border: 1px solid #e1f78f;
  pointer-events: none;
  opacity: 0;
  animation: ripple 3.6s ease-out .7s infinite;
}
.telegram:focus-visible { outline: 3px solid #fff; outline-offset: 8px; }
.telegram:active { transform: translateY(3px); box-shadow: 0 1px 0 #849b02, 0 8px 20px #001d3860; }
.button-wrap:has(.telegram:focus-visible), .button-wrap:active { animation-play-state: paused; }
@media (hover: hover) {
  .telegram:hover { filter: brightness(1.06); transform: translateY(-2px); }
  .button-wrap:hover { animation-play-state: paused; }
}
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes shine { 0%, 58% { left: -60%; } 80%, 100% { left: 145%; } }
@keyframes ripple { 0% { transform: scale(1); opacity: .45; } 65%, 100% { transform: scale(1.075, 1.45); opacity: 0; } }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (min-width: 600px) { .landing { width: min(520px, calc(100svh * 941 / 1672)); } }
@media (max-width: 359px) {
  .telegram { gap: 8px; padding: 13px 12px; }
  .plane { width: 21px; height: 21px; }
  .go { width: 26px; height: 26px; }
}
/* Keep the complete poster and a comfortable button in landscape and zoomed views. */
@media (max-height: 500px) {
  .landing { width: min(100%, 320px); min-height: 568px; }
  .poster { max-width: 320px; }
  .telegram { font-size: 14px; min-height: 54px; gap: 8px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}