/*
  CHAT 106 - WhisperDecks Motion Waitlist
  Local-only motion layer for join.whisperdecks.com waitlist package.
*/

:root {
  --join-motion-ease: cubic-bezier(.2, .72, .2, 1);
  --join-motion-fast: 180ms;
  --join-motion-mid: 280ms;
  --join-motion-slow: 760ms;
}

.page {
  overflow: hidden;
}

.page::before {
  background-position: 0 0;
  animation: join-grid-drift 22s linear infinite;
}

.brand {
  position: relative;
  isolation: isolate;
}

.brand::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  z-index: -1;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(139, 232, 193, .26), transparent 68%);
  opacity: .72;
  transform: translateY(-50%) scale(.92);
  animation: join-logo-pulse 5.8s var(--join-motion-ease) infinite;
}

.brand img {
  transform-origin: 50% 50%;
  animation: join-logo-living-mark 9s var(--join-motion-ease) infinite;
}

.brand:hover img,
.brand:focus-visible img {
  animation-duration: 2.8s;
}

.wordmark span {
  background: linear-gradient(110deg, var(--orange) 0%, var(--orange) 36%, #ffd9bd 50%, var(--orange) 64%, var(--orange) 100%);
  background-size: 260% 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: join-wordmark-glint 7.2s ease-in-out infinite;
}

.motionAccent {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border: 1px solid rgba(139, 232, 193, .14);
  border-radius: 8px;
  opacity: .52;
  transform: translate3d(0, 0, 0) rotate(8deg);
}

.motionAccentOne {
  right: min(34vw, 360px);
  top: clamp(84px, 16vh, 150px);
  width: 96px;
  height: 38px;
  background: linear-gradient(90deg, rgba(36, 210, 150, .12), rgba(255, 122, 31, .08));
  animation: join-accent-drift-a 12s ease-in-out infinite;
}

.motionAccentTwo {
  left: min(42vw, 520px);
  bottom: clamp(70px, 12vh, 132px);
  width: 64px;
  height: 64px;
  border-color: rgba(255, 122, 31, .16);
  background: radial-gradient(circle at 40% 35%, rgba(255, 122, 31, .18), rgba(36, 210, 150, .08) 58%, transparent 70%);
  animation: join-accent-drift-b 14s ease-in-out infinite;
}

.eyebrow,
.proof article,
.signupPanel {
  animation: join-rise-soft var(--join-motion-slow) var(--join-motion-ease) both;
}

.lead {
  animation: join-rise-soft var(--join-motion-slow) var(--join-motion-ease) 90ms both;
}

.signupPanel {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  transition:
    transform var(--join-motion-mid) var(--join-motion-ease),
    border-color var(--join-motion-mid) ease,
    box-shadow var(--join-motion-mid) ease,
    background var(--join-motion-mid) ease;
}

.signupPanel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0%, rgba(139, 232, 193, .08) 42%, rgba(255, 122, 31, .1) 54%, transparent 68%);
  opacity: 0;
  transform: translateX(-56%);
  transition: opacity var(--join-motion-mid) ease, transform 680ms var(--join-motion-ease);
}

.signupPanel::after {
  content: "";
  position: absolute;
  inset: auto 24px 0;
  height: 2px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--green), var(--orange));
  opacity: .76;
  transform: scaleX(.24);
  transform-origin: left;
  transition: transform var(--join-motion-mid) var(--join-motion-ease);
}

.signupPanel:hover,
.signupPanel:focus-within {
  border-color: rgba(139, 232, 193, .42);
  box-shadow: 0 34px 104px rgba(0, 0, 0, .38), 0 0 0 1px rgba(139, 232, 193, .08) inset;
  transform: translate3d(0, -4px, 0);
}

.signupPanel:hover::before,
.signupPanel:focus-within::before,
.signupPanel.is-success::before {
  opacity: 1;
  transform: translateX(48%);
}

.signupPanel:hover::after,
.signupPanel:focus-within::after,
.signupPanel.is-success::after {
  transform: scaleX(1);
}

.panelMotionRail {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  pointer-events: none;
  border: 1px solid rgba(139, 232, 193, .18);
  border-radius: 8px;
  opacity: .78;
  transform: rotate(12deg);
}

.panelMotionRail::before,
.panelMotionRail::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 4px;
  background: var(--green);
  box-shadow: 0 0 18px rgba(36, 210, 150, .22);
  animation: join-panel-tile-flow 4.8s var(--join-motion-ease) infinite;
}

.panelMotionRail::before {
  left: 7px;
  top: 7px;
}

.panelMotionRail::after {
  right: 7px;
  bottom: 7px;
  background: var(--orange);
  animation-delay: -1.4s;
}

.waitlistForm input {
  transition:
    border-color var(--join-motion-fast) ease,
    box-shadow var(--join-motion-fast) ease,
    background var(--join-motion-fast) ease,
    transform var(--join-motion-fast) ease;
}

.waitlistForm input:hover {
  border-color: rgba(139, 232, 193, .36);
  background: rgba(3, 17, 27, .82);
}

.waitlistForm input:focus {
  transform: translateY(-1px);
}

.waitlistForm button,
.officialLink,
.languageSelect {
  transition:
    transform var(--join-motion-fast) var(--join-motion-ease),
    box-shadow var(--join-motion-fast) ease,
    border-color var(--join-motion-fast) ease,
    background var(--join-motion-fast) ease,
    color var(--join-motion-fast) ease;
}

.officialLink:hover,
.officialLink:focus-visible,
.languageSelect:hover,
.languageSelect:focus-visible {
  border-color: rgba(139, 232, 193, .48);
  background-color: rgba(8, 32, 46, .74);
  transform: translateY(-2px);
}

.waitlistForm button {
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.waitlistForm button::after {
  content: "";
  position: absolute;
  inset: -42% -28%;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 36%, rgba(255, 255, 255, .38) 47%, rgba(255, 255, 255, .88) 51%, rgba(255, 255, 255, .28) 56%, transparent 66%);
  opacity: 0;
  transform: translateX(-118%) skewX(-16deg);
}

.waitlistForm button:hover,
.waitlistForm button:focus-visible {
  box-shadow: 0 24px 52px rgba(255, 122, 31, .28), 0 0 0 4px rgba(255, 122, 31, .08);
  transform: translate3d(0, -2px, 0);
}

.waitlistForm button:hover::after,
.waitlistForm button:focus-visible::after,
.waitlistForm button.is-pressed::after {
  animation: join-button-sweep 720ms ease both;
}

.waitlistForm button.is-pressed {
  transform: translate3d(0, 1px, 0) scale(.99);
}

.waitlistForm button.is-sending {
  color: rgba(4, 17, 22, .74);
}

.waitlistForm button.is-sending::before {
  content: "";
  width: 16px;
  height: 16px;
  margin-right: 9px;
  border: 2px solid rgba(4, 17, 22, .26);
  border-top-color: rgba(4, 17, 22, .82);
  border-radius: 999px;
  animation: join-button-spin 760ms linear infinite;
}

.waitlistNote {
  transition: color var(--join-motion-fast) ease, transform var(--join-motion-fast) ease;
}

.waitlistNote.is-success {
  transform: translateY(-1px);
}

@keyframes join-grid-drift {
  to { background-position: 56px 56px; }
}

@keyframes join-logo-living-mark {
  0%, 18%, 100% { transform: rotate(0deg) scale(1); }
  32% { transform: rotate(9deg) scale(1.04); }
  48% { transform: rotate(-7deg) scale(.99); }
  64% { transform: rotate(360deg) scale(1.03); }
  78% { transform: rotate(360deg) scale(1); }
}

@keyframes join-logo-pulse {
  0%, 100% { opacity: .42; transform: translateY(-50%) scale(.88); }
  44% { opacity: .86; transform: translateY(-50%) scale(1.18); }
}

@keyframes join-wordmark-glint {
  0%, 48%, 100% { background-position: 130% 50%; }
  66% { background-position: -20% 50%; }
}

@keyframes join-rise-soft {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes join-accent-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(8deg); }
  42% { transform: translate3d(16px, -12px, 0) rotate(18deg); }
  74% { transform: translate3d(-10px, 8px, 0) rotate(2deg); }
}

@keyframes join-accent-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-10deg); }
  38% { transform: translate3d(-14px, 12px, 0) rotate(-24deg); }
  72% { transform: translate3d(10px, -8px, 0) rotate(5deg); }
}

@keyframes join-panel-tile-flow {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  36% { transform: translate3d(10px, 0, 0) rotate(90deg); }
  68% { transform: translate3d(0, 10px, 0) rotate(180deg); }
}

@keyframes join-button-sweep {
  0% { opacity: 0; transform: translateX(-118%) skewX(-16deg); }
  26% { opacity: .82; }
  100% { opacity: 0; transform: translateX(118%) skewX(-16deg); }
}

@keyframes join-button-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 860px) {
  .motionAccent {
    opacity: .34;
  }

  .motionAccentOne {
    right: -18px;
    top: 112px;
  }

  .motionAccentTwo {
    left: auto;
    right: 28px;
    bottom: 36px;
  }

  .signupPanel:hover,
  .signupPanel:focus-within {
    transform: translate3d(0, -2px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .page::before {
    background-position: 0 0;
  }

  .brand img,
  .wordmark span,
  .motionAccent,
  .panelMotionRail::before,
  .panelMotionRail::after {
    animation: none !important;
  }

  .signupPanel:hover,
  .signupPanel:focus-within,
  .waitlistForm button:hover,
  .waitlistForm button:focus-visible,
  .officialLink:hover,
  .officialLink:focus-visible,
  .languageSelect:hover,
  .languageSelect:focus-visible {
    transform: none;
  }
}