/* SOS Beacon — emergency alert screen */

@layer components {
  .sos-screen {
    display: flex;
    flex-direction: column;
    min-height: 80vh;
    padding: var(--block-space) var(--inline-space-l);
  }

  .sos-screen__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--block-space);
  }

  .sos-screen__instruction {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-ink);
  }

  .sos-screen__description {
    font-size: 0.875rem;
    color: var(--color-ink-muted);
    max-width: 20rem;
  }

  /* SOS button */
  .sos-screen__form {
    margin-block: var(--block-space-l);
  }

  .sos-screen__button {
    position: relative;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    border: none;
    background: oklch(55% 0.25 27);
    color: oklch(100% 0 0);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms ease, scale 200ms ease;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: oklch(50% 0.27 27);
    }

    &:active,
    &.sos-screen__button--holding {
      scale: 0.95;
      background: oklch(45% 0.28 27);
    }
  }

  .sos-screen__label {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    z-index: 1;
  }

  .sos-screen__progress {
    position: absolute;
    inset: -0.5rem;
    width: calc(100% + 1rem);
    height: calc(100% + 1rem);
    transform: rotate(-90deg);
    color: oklch(100% 0 0);
  }

  .sos-screen__ring {
    transition: none;
  }

  .sos-screen__warning {
    font-size: 0.75rem;
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Confirmation */
  .sos-screen__confirmed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--block-space);
    color: oklch(var(--lch-laser));

    & h1 {
      font-size: 1.5rem;
    }

    & p {
      color: var(--color-ink-muted);
      max-width: 20rem;
    }
  }

  .sos-screen__actions {
    display: flex;
    gap: var(--inline-space);
    margin-block-start: var(--block-space-l);
  }

  /* Pulsing SOS marker on the map */
  .member-ping--sos {
    animation: sos-pulse 1s ease-in-out infinite;
  }

  @keyframes sos-pulse {
    0%, 100% {
      filter: drop-shadow(0 0 4px oklch(55% 0.25 27));
    }
    50% {
      filter: drop-shadow(0 0 12px oklch(55% 0.25 27)) drop-shadow(0 0 24px oklch(55% 0.25 27 / 0.5));
    }
  }
}