/* =========================================================
   CROSS BARBEARIA
   Central de Links
   ========================================================= */


/* =========================================================
   1. VARIÁVEIS
   ========================================================= */

:root {

  --gold: #E1C854;

  --black: #111111;

  --white: #F7F7F7;


  --muted:
    rgba(247, 247, 247, 0.68);


  --border:
    rgba(225, 200, 84, 0.20);


  --font-main:
    "Inter",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;


  --content-width:
    520px;


  --page-padding:
    clamp(16px, 4vw, 34px);

}


/* =========================================================
   2. RESET
   ========================================================= */

*,
*::before,
*::after {

  box-sizing:
    border-box;

}


html {

  min-height:
    100%;


  background:
    var(--black);


  overflow-x:
    hidden;

}


body {

  margin:
    0;


  min-height:
    100%;


  font-family:
    var(--font-main);


  color:
    var(--white);


  background:
    var(--black);


  overflow-x:
    hidden;

}


img,
svg {

  display:
    block;


  max-width:
    100%;

}


a {

  color:
    inherit;

}


button {

  font:
    inherit;

}


/* =========================================================
   3. PÁGINA PRINCIPAL
   ========================================================= */

.page-shell {

  position:
    relative;


  min-height:
    100vh;


  min-height:
    100dvh;


  display:
    flex;


  justify-content:
    center;


  padding:

    max(
      34px,
      env(safe-area-inset-top)
    )

    var(--page-padding)

    max(
      28px,
      env(safe-area-inset-bottom)
    );


  overflow-x:
    hidden;


  isolation:
    isolate;

}


/* =========================================================
   4. BACKGROUND
   ========================================================= */

.page-shell::before {

  content:
    "";


  position:
    fixed;


  inset:
    0;


  z-index:
    -2;


  background:

    url("./assets/barbearia-bg.png")

    center center /

    cover

    no-repeat;


  transform:
    scale(1.02);

}


/* =========================================================
   5. OVERLAY ESCURO
   ========================================================= */

.background-overlay {

  position:
    fixed;


  inset:
    0;


  z-index:
    -1;


  pointer-events:
    none;


  background:

    radial-gradient(

      circle at 50% 22%,

      rgba(225, 200, 84, 0.12)
      0%,

      rgba(17, 17, 17, 0.64)
      40%,

      rgba(17, 17, 17, 0.94)
      100%

    ),

    linear-gradient(

      180deg,

      rgba(17, 17, 17, 0.70)
      0%,

      rgba(17, 17, 17, 0.84)
      55%,

      rgba(17, 17, 17, 0.97)
      100%

    );

}


/* =========================================================
   6. CONTEÚDO
   ========================================================= */

.link-card {

  width:
    min(
      100%,
      var(--content-width)
    );


  display:
    flex;


  flex-direction:
    column;


  align-items:
    center;


  text-align:
    center;

}


/* =========================================================
   7. LOGO
   ========================================================= */

.brand-logo {

  width:
    clamp(
      170px,
      36vw,
      230px
    );


  aspect-ratio:
    1 / 1;


  display:
    grid;


  place-items:
    center;


  margin-bottom:
    26px;


  border-radius:
    50%;


  overflow:
    hidden;


  box-shadow:

    0 18px 45px
    rgba(0, 0, 0, 0.32),

    0 0 0 1px
    rgba(225, 200, 84, 0.15);

}


.brand-logo img {

  width:
    100%;


  height:
    100%;


  object-fit:
    cover;

}


/* =========================================================
   8. IDENTIDADE
   ========================================================= */

.brand-copy {

  width:
    100%;


  margin-bottom:
    30px;

}


.brand-eyebrow {

  display:
    block;


  margin-bottom:
    7px;


  color:
    var(--gold);


  font-size:
    0.8rem;


  font-weight:
    700;


  letter-spacing:
    0.16em;


  text-transform:
    uppercase;

}


h1 {

  margin:
    0;


  color:
    var(--white);


  font-size:
    clamp(
      2rem,
      7vw,
      3rem
    );


  line-height:
    0.98;


  font-weight:
    800;


  letter-spacing:
    -0.04em;


  text-transform:
    uppercase;

}


.brand-copy p {

  margin:
    11px 0 0;


  color:
    var(--muted);


  font-size:
    0.98rem;


  font-weight:
    400;

}


/* =========================================================
   9. LISTA DE LINKS
   ========================================================= */

.links {

  width:
    100%;


  display:
    grid;


  gap:
    12px;

}


/* =========================================================
   10. BOTÕES
   ========================================================= */

.link-button {

  position:
    relative;


  width:
    100%;


  min-height:
    60px;


  display:
    flex;


  align-items:
    center;


  justify-content:
    center;


  padding:
    13px 68px;


  border:
    1px solid
    var(--border);


  border-radius:
    14px;


  background:
    rgba(17, 17, 17, 0.88);


  color:
    var(--white);


  text-decoration:
    none;


  cursor:
    pointer;


  font-size:
    0.98rem;


  font-weight:
    600;


  box-shadow:

    0 12px 30px
    rgba(0, 0, 0, 0.20);


  backdrop-filter:
    blur(12px);


  -webkit-backdrop-filter:
    blur(12px);


  transition:

    transform
    180ms
    ease,

    background
    180ms
    ease,

    color
    180ms
    ease,

    border-color
    180ms
    ease;

}


/* Filete dourado lateral */
.link-button::before {

  content:
    "";


  position:
    absolute;


  left:
    0;


  top:
    14px;


  bottom:
    14px;


  width:
    4px;


  border-radius:
    0 4px 4px 0;


  background:
    var(--gold);

}


/* Hover */
.link-button:hover {

  transform:
    translateY(-2px);


  background:
    var(--gold);


  color:
    var(--black);


  border-color:
    var(--gold);

}


/* Clique */
.link-button:active {

  transform:
    translateY(0);

}


/* Texto sempre em uma linha */
.link-button__text {

  white-space:
    nowrap;


  overflow:
    hidden;


  text-overflow:
    ellipsis;

}


/* =========================================================
   11. ÍCONES
   ========================================================= */

.link-button__icon {

  position:
    absolute;


  right:
    6px;


  width:
    48px;


  height:
    48px;


  display:
    grid;


  place-items:
    center;


  border-radius:
    11px;


  background:
    var(--gold);


  color:
    var(--black);


  transition:

    background
    180ms
    ease,

    color
    180ms
    ease;

}


.link-button__icon svg {

  width:
    23px;


  height:
    23px;


  fill:
    currentColor;

}


.link-button:hover
.link-button__icon {

  background:
    var(--black);


  color:
    var(--gold);

}


/* =========================================================
   12. FEEDBACK DO WI-FI
   ========================================================= */

.copy-feedback {

  height:
    20px;


  margin-top:
    10px;


  color:
    rgba(247, 247, 247, 0.70);


  font-size:
    0.82rem;


  font-weight:
    500;


  opacity:
    0;


  transform:
    translateY(-5px);


  pointer-events:
    none;


  transition:

    opacity
    180ms
    ease,

    transform
    180ms
    ease;

}


.copy-feedback.is-visible {

  opacity:
    1;


  transform:
    translateY(0);

}


/* =========================================================
   13. FOOTER
   ========================================================= */

.footer {

  display:
    flex;


  align-items:
    center;


  justify-content:
    center;


  gap:
    5px;


  margin-top:
    26px;


  color:
    rgba(247, 247, 247, 0.42);


  font-size:
    0.76rem;

}


.footer a {

  color:
    rgba(247, 247, 247, 0.78);


  font-weight:
    600;


  text-decoration:
    none;

}


.footer a:hover {

  color:
    var(--gold);

}


/* =========================================================
   14. ANIMAÇÕES DE ENTRADA
   ========================================================= */

/*
  Todos os elementos começam invisíveis
  e entram suavemente de baixo para cima.
*/

.entrance {

  opacity:
    0;


  transform:
    translateY(18px);


  animation:

    entranceFadeUp

    700ms

    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    )

    forwards;

}


/* Logo */
.entrance--logo {

  animation-delay:
    80ms;

}


/* Título */
.entrance--title {

  animation-delay:
    180ms;

}


/* Botões */
.entrance--button-1 {

  animation-delay:
    280ms;

}


.entrance--button-2 {

  animation-delay:
    350ms;

}


.entrance--button-3 {

  animation-delay:
    420ms;

}


.entrance--button-4 {

  animation-delay:
    490ms;

}


.entrance--button-5 {

  animation-delay:
    560ms;

}


.entrance--button-6 {

  animation-delay:
    630ms;

}


/* Footer */
.entrance--footer {

  animation-delay:
    710ms;

}


/* Animação */
@keyframes entranceFadeUp {

  from {

    opacity:
      0;


    transform:
      translateY(18px)
      scale(0.985);

  }


  to {

    opacity:
      1;


    transform:
      translateY(0)
      scale(1);

  }

}


/* =========================================================
   15. ACESSIBILIDADE
   ========================================================= */

.link-button:focus-visible,
.footer a:focus-visible {

  outline:
    3px solid
    var(--gold);


  outline-offset:
    4px;

}


/* =========================================================
   16. TABLET
   ========================================================= */

@media (
  max-width: 768px
) {

  .page-shell::before {

    background-position:
      52% center;

  }

}


/* =========================================================
   17. MOBILE
   ========================================================= */

@media (
  max-width: 520px
) {

  .page-shell {

    padding-top:

      max(
        24px,
        env(safe-area-inset-top)
      );


    padding-left:
      16px;


    padding-right:
      16px;


    padding-bottom:

      max(
        26px,
        env(safe-area-inset-bottom)
      );

  }


  /*
    Enquadramento específico
    para telas verticais.
  */
  .page-shell::before {

    background-position:
      50% center;

  }


  /* Logo */
  .brand-logo {

    width:
      156px;


    margin-bottom:
      22px;

  }


  /* Identidade */
  .brand-copy {

    margin-bottom:
      24px;

  }


  .brand-eyebrow {

    font-size:
      0.74rem;

  }


  h1 {

    font-size:

      clamp(
        1.75rem,
        8.6vw,
        2.25rem
      );


    line-height:
      1;

  }


  .brand-copy p {

    margin-top:
      8px;


    font-size:
      0.88rem;

  }


  /* Botões */
  .links {

    gap:
      10px;

  }


  .link-button {

    min-height:
      56px;


    padding:
      12px 58px;


    border-radius:
      13px;


    font-size:

      clamp(
        0.85rem,
        3.65vw,
        0.95rem
      );

  }


  /* Ícones */
  .link-button__icon {

    right:
      5px;


    width:
      46px;


    height:
      46px;


    border-radius:
      10px;

  }


  .link-button__icon svg {

    width:
      21px;


    height:
      21px;

  }


  /* Feedback */
  .copy-feedback {

    font-size:
      0.78rem;

  }


  /* Footer */
  .footer {

    margin-top:
      24px;


    font-size:
      0.72rem;

  }

}


/* =========================================================
   18. MOBILE PEQUENO
   ========================================================= */

@media (
  max-width: 380px
) {

  .page-shell {

    padding-left:
      13px;


    padding-right:
      13px;

  }


  .brand-logo {

    width:
      145px;

  }


  .link-button {

    min-height:
      54px;


    padding-left:
      54px;


    padding-right:
      54px;


    font-size:
      0.82rem;

  }


  .link-button__icon {

    width:
      44px;


    height:
      44px;

  }

}


/* =========================================================
   19. TELAS MUITO ESTREITAS
   ========================================================= */

@media (
  max-width: 330px
) {

  .link-button {

    padding-left:
      50px;


    padding-right:
      50px;


    font-size:
      0.77rem;

  }

}


/* =========================================================
   20. LANDSCAPE
   ========================================================= */

@media (
  max-height: 680px
)
and
(
  orientation: landscape
) {

  .page-shell {

    padding-top:
      20px;


    padding-bottom:
      20px;

  }


  .brand-logo {

    width:
      128px;


    margin-bottom:
      18px;

  }


  .brand-copy {

    margin-bottom:
      20px;

  }


  h1 {

    font-size:
      1.8rem;

  }


  .link-button {

    min-height:
      50px;

  }


  .link-button__icon {

    width:
      42px;


    height:
      42px;

  }


  .footer {

    margin-top:
      22px;

  }

}


/* =========================================================
   21. REDUÇÃO DE MOVIMENTO
   ========================================================= */

@media (
  prefers-reduced-motion: reduce
) {

  *,
  *::before,
  *::after {

    transition:
      none !important;


    scroll-behavior:
      auto !important;

  }


  .entrance {

    opacity:
      1 !important;


    transform:
      none !important;


    animation:
      none !important;

  }

}