/* =========================================================================
   Roval Sertão — página seletora (raiz do domínio)
   Split full screen: Cajazeiras à esquerda, Sousa à direita,
   mapa da Paraíba ao fundo com degradê da marca e logo ao centro.
   ========================================================================= */

@layer reset, base, fundo, seletor, responsivo;

:root {
  --marca: #c10230;
  --grafite: #16181a;
  --transicao: 420ms cubic-bezier(.22, .8, .3, 1);
  --gutter: clamp(2rem, 5vw, 4.5rem);

  color-scheme: dark;
  accent-color: var(--marca);
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  :where(body, h1, p) { margin: 0; }
  :where(img, svg) { display: block; max-inline-size: 100%; }
}

@layer base {
  html, body { block-size: 100%; }

  body {
    min-block-size: 100dvh;
    font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: white;
    background: var(--grafite);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
  }

  .sr {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  :focus-visible { outline: 3px solid white; outline-offset: -6px; }
}

/* ------------------------------------------------------------------ fundo */

@layer fundo {
  .fundo {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: clip;
  }

  /* camada 1: degradê da marca */
  .fundo__degrade {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(85% 75% at 18% 18%, rgb(214 44 74 / 92%), transparent 60%),
      radial-gradient(80% 80% at 84% 82%, rgb(96 2 27 / 95%), transparent 62%),
      linear-gradient(128deg, #a3062c 0%, var(--marca) 40%, #5e0722 100%);
  }

  /* camada 2: mapa real da Paraíba, recortado no corredor Cajazeiras–Sousa */
  .fundo__mapa {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: .62;

    @media (prefers-reduced-motion: no-preference) {
      animation: deriva 40s ease-in-out infinite alternate;
    }
  }

  /* camada 3: vinheta para legibilidade do texto */
  .fundo__vinheta {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(65% 65% at 50% 45%, transparent 30%, rgb(12 13 14 / 55%) 100%),
      linear-gradient(to bottom,
        rgb(12 13 14 / 35%) 0%, transparent 22%,
        transparent 70%, rgb(12 13 14 / 55%) 100%);
  }

  @keyframes deriva {
    from { scale: 1.02; translate: -.4% .3%; }
    to   { scale: 1.1;  translate: .4% -.3%; }
  }
}

/* ----------------------------------------------------------------- palco */

@layer seletor {
  .palco {
    position: relative;
    z-index: 1;
    block-size: 100dvh;
  }

  .lados {
    display: flex;
    block-size: 100%;

    /* quando um lado recebe o ponteiro, o outro recua */
    &:has(.lado:hover) .lado:not(:hover) {
      flex-grow: .78;

      & .lado__conteudo { opacity: .62; }
    }
  }

  .divisor {
    inline-size: 1px;
    flex: none;
    align-self: stretch;
    background: rgb(255 255 255 / 28%);
  }

  .lado {
    position: relative;
    flex: 1 1 50%;
    display: flex;
    align-items: flex-end;
    padding: var(--gutter);
    text-decoration: none;
    color: white;
    overflow: clip;
    transition: flex-grow var(--transicao);

    & .lado__brilho {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgb(12 13 14 / 55%) 0%, transparent 60%);
      opacity: 0;
      transition: opacity var(--transicao);
    }

    & .lado__conteudo {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: .55rem;
      max-inline-size: 30rem;
      translate: 0 14px;
      transition: translate var(--transicao), opacity var(--transicao);
    }

    &.lado--dir .lado__conteudo { margin-inline-start: auto; }

    & .lado__uf {
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .2em;
      text-transform: uppercase;
      opacity: .75;
    }

    & .lado__nome {
      font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.4rem);
      font-weight: 800;
      line-height: .96;
      letter-spacing: -.035em;
      text-shadow: 0 4px 30px rgb(0 0 0 / 35%);
    }

    & .lado__chamada {
      font-size: clamp(.95rem, .9rem + .2vw, 1.1rem);
      line-height: 1.5;
      opacity: .92;
      max-inline-size: 26rem;
      margin-block-start: .2rem;
      text-wrap: pretty;
    }

    & .lado__meta {
      display: grid;
      gap: .15rem;
      margin-block-start: .7rem;
      font-size: .84rem;
      opacity: 0;
      translate: 0 6px;
      transition: opacity var(--transicao), translate var(--transicao);
    }

    & .lado__btn {
      display: inline-flex;
      align-items: center;
      gap: .55rem;
      margin-block-start: 1.2rem;
      padding: .8rem 1.5rem;
      border: 1.6px solid rgb(255 255 255 / 55%);
      border-radius: 999px;
      font-weight: 700;
      font-size: .95rem;
      backdrop-filter: blur(6px);
      background: rgb(255 255 255 / 8%);
      transition: background var(--transicao), border-color var(--transicao),
                  color var(--transicao), gap var(--transicao);

      & svg { inline-size: 1.125rem; block-size: 1.125rem; }
    }

    /* etiqueta inserida pelo JS quando já houve uma escolha anterior */
    & .lado__salvo {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .3rem .8rem;
      margin-block-end: .3rem;
      border-radius: 999px;
      background: rgb(255 255 255 / 16%);
      border: 1px solid rgb(255 255 255 / 32%);
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    &:is(:hover, :focus-visible) {
      flex-grow: 1.28;

      & .lado__brilho { opacity: 1; }
      & .lado__conteudo { translate: 0; }
      & .lado__meta { opacity: .85; translate: 0; }

      & .lado__btn {
        background: white;
        color: var(--marca);
        border-color: white;
        gap: .85rem;
      }
    }
  }

  /* ---------------------------------------------------------------- centro */

  .centro {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    z-index: 3;
    text-align: center;
    pointer-events: none;
    display: grid;
    justify-items: center;
    gap: .55rem;
    padding: clamp(1.5rem, 3vw, 2.4rem) clamp(2rem, 4vw, 3.4rem);

    &::before {
      content: "";
      position: absolute;
      inset: -18% -14%;
      background: radial-gradient(closest-side, rgb(12 13 14 / 46%), transparent 78%);
      z-index: -1;
    }

    & .centro__logo {
      inline-size: clamp(9.375rem, 15vw, 14.375rem);
      filter: drop-shadow(0 6px 26px rgb(0 0 0 / 45%));
    }

    & .centro__linha {
      font-size: clamp(.72rem, .68rem + .18vw, .85rem);
      font-weight: 800;
      letter-spacing: .32em;
      text-transform: uppercase;
      opacity: .92;
      margin-block-start: .2rem;
    }

    & .centro__ajuda {
      font-size: .8rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      opacity: .6;
      font-weight: 600;

      &::after {
        content: "";
        display: block;
        inline-size: 1px;
        block-size: 1.625rem;
        margin: .7rem auto 0;
        background: linear-gradient(to bottom, rgb(255 255 255 / 60%), transparent);
      }
    }
  }

  /* ---------------------------------------------------------------- rodapé */

  .rodape-seletor {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .9rem clamp(1.2rem, 3vw, 2.5rem);
    padding-block-end: max(.9rem, env(safe-area-inset-bottom));
    font-size: .72rem;
    color: rgb(255 255 255 / 62%);
    pointer-events: none;

    & a {
      color: rgb(255 255 255 / 82%);
      pointer-events: auto;
      text-underline-offset: 3px;
    }
  }
}

/* ------------------------------------------------------------ responsivo */

@layer responsivo {

  /* No mobile o split vira empilhado: a logo sai da sobreposição central e
     passa a ser cabeçalho, e o rodapé sai do fixo para não cobrir o 2º painel. */
  @media (width <= 53.75rem) {
    body { overflow: auto; }

    .palco {
      display: flex;
      flex-direction: column;
      block-size: auto;
      min-block-size: 100dvh;
    }

    .centro {
      order: -1;
      position: static;
      translate: none;
      padding: clamp(1.8rem, 6vw, 2.8rem) 1.5rem clamp(1.2rem, 4vw, 1.8rem);
      gap: .4rem;

      &::before { inset: -30% -20%; }
      & .centro__logo { inline-size: clamp(8.25rem, 40vw, 11.25rem); }
      & .centro__ajuda::after { display: none; }
    }

    .lados {
      flex-direction: column;
      flex: 1;

      /* sem hover em toque: os dois painéis mantêm o mesmo peso */
      &:has(.lado:hover) .lado:not(:hover) {
        flex-grow: 1;

        & .lado__conteudo { opacity: 1; }
      }
    }

    /* empilhado, a divisória não acrescenta nada e marcava uma faixa dura */
    .divisor { display: none; }

    .lado {
      flex: 1 1 auto;
      min-block-size: 33dvh;
      padding: 2.2rem 1.5rem;
      align-items: center;
      justify-content: center;
      text-align: center;

      /* tudo centralizado na vertical do celular, alinhado com a logo */
      & .lado__conteudo {
        align-items: center;
        translate: none;
        max-inline-size: none;
        margin-inline: auto;
      }

      /* sem o véu escuro: o fundo fica contínuo entre os dois painéis */
      & .lado__brilho { display: none; }

      & .lado__chamada { max-inline-size: 24rem; margin-inline: auto; }
      & .lado__meta { opacity: .8; translate: none; justify-items: center; }
      &.lado--dir .lado__conteudo { margin-inline-start: auto; }

      &:is(:hover, :focus-visible) { flex-grow: 1; }
    }

    .fundo__mapa { opacity: .42; animation: none; }

    /* escurecimento uniforme no lugar do véu por painel: recupera o contraste
       do texto sem criar a faixa dura entre as duas unidades */
    .fundo__vinheta {
      background:
        linear-gradient(rgb(12 13 14 / 26%), rgb(12 13 14 / 26%)),
        linear-gradient(to bottom,
          rgb(12 13 14 / 40%) 0%, transparent 18%,
          transparent 82%, rgb(12 13 14 / 40%) 100%);
    }

    .rodape-seletor {
      position: static;
      flex-direction: column;
      gap: .2rem;
      text-align: center;
      font-size: .68rem;
      padding: 1.4rem 1.5rem;
      padding-block-end: max(1.8rem, env(safe-area-inset-bottom));
      background: rgb(12 13 14 / 45%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none !important;
      transition-duration: .01ms !important;
    }
  }
}