/* ===== Tokens ===== */
:root {
  color-scheme: dark;
  --fundo: #111210;        /* grafite levemente esverdeado, como papel fotográfico no escuro */
  --moldura: #1b1c19;      /* cor atrás de cada foto enquanto carrega */
  --texto: #efebe3;
  --gap: 10px;
  --linhas: 4;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden;
}

/* ===== Galeria: faixas empilhadas ocupando a tela ===== */
.galeria {
  height: 100%;
  display: grid;
  grid-template-rows: repeat(var(--linhas), minmax(0, 1fr));
  gap: var(--gap);
  padding-block: var(--gap);
}

.faixa {
  position: relative;
  overflow: hidden;
  min-height: 0;
  touch-action: pan-y;        /* arraste horizontal fica com o script (script.js) */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* rolagem automática, pausa no hover e arraste ficam no script.js */
.faixa__trilho {
  display: flex;
  gap: var(--gap);
  height: 100%;
  width: max-content;
  will-change: transform;
}

.faixa--arrastando,
.faixa--arrastando .foto { cursor: grabbing; }
.faixa--arrastando .foto img { transform: none; }

.foto {
  height: 100%;
  flex: none;
  margin: 0;
  background: var(--moldura);
  overflow: hidden;
  cursor: zoom-in;
  border: 0;
  padding: 0;
}

.foto img {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  filter: saturate(.85);
  transition: filter .5s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}

.foto--retrato  { aspect-ratio: 3 / 4; }
.foto--video    { aspect-ratio: 16 / 9; }
.foto--paisagem { aspect-ratio: 3 / 2; }
.foto--quadrada { aspect-ratio: 1 / 1; }
.foto img { width: 100%; }

.foto { position: relative; }
.foto video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

/* selo de "play" para indicar que é vídeo */
.foto--com-video::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(16, 16, 16, .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") center / 16px no-repeat;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

/* zoom só com mouse; no toque o :hover ficaria preso na última foto tocada */
@media (hover: hover) {
  .foto:hover video { transform: scale(1.04); }
  .foto:hover img {
    filter: saturate(1.05);
    transform: scale(1.04);
  }
}
.foto:focus-visible img {
  filter: saturate(1.05);
  transform: scale(1.04);
}

.foto:focus-visible {
  outline: 2px solid var(--texto);
  outline-offset: -2px;
}

/* ===== Botão flutuante (baseado em Uiverse.io by dexter-st) ===== */
.btn-wrapper {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 10;
  translate: -50% 0;
  display: inline-block;
  max-width: calc(100% - 32px);
  border-radius: 28px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);  /* separa o botão das fotos claras */

  /* vidro fosco: desfoca e realça as fotos que passam por trás.
     Fica aqui (e não no .btn) para o aro do ::before continuar atrás do botão. */
  background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
}

.btn {
  --border-radius: 24px;
  --padding: 4px;
  --transition: 0.4s;
  --button-color: rgba(18, 18, 18, .38);  /* translúcido para o vidro aparecer */
  --highlight-color-hue: 210deg;

  position: relative;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.7em 1.3em 0.7em 1.1em;
  font-family: "Poppins", "Inter", "Segoe UI", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  background-color: var(--button-color);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%);
  box-shadow:
    inset 0px 1px 1px rgba(255, 255, 255, 0.35),
    inset 0px 2px 2px rgba(255, 255, 255, 0.15),
    inset 0px 4px 4px rgba(255, 255, 255, 0.1),
    inset 0px 8px 8px rgba(255, 255, 255, 0.05),
    inset 0px 16px 16px rgba(255, 255, 255, 0.05),
    0px -1px 1px rgba(0, 0, 0, 0.02),
    0px -2px 2px rgba(0, 0, 0, 0.03),
    0px -4px 4px rgba(0, 0, 0, 0.05),
    0px -8px 8px rgba(0, 0, 0, 0.06),
    0px -16px 16px rgba(0, 0, 0, 0.08);
  border: solid 1px rgba(255, 255, 255, .22);
  border-radius: var(--border-radius);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    box-shadow var(--transition),
    border var(--transition),
    background-color var(--transition);
}

/* aro escuro externo */
.btn::before {
  content: "";
  position: absolute;
  top: calc(-1px - var(--padding));
  left: calc(-1px - var(--padding));
  width: calc(100% + 2px + var(--padding) * 2);
  height: calc(100% + 2px + var(--padding) * 2);
  border-radius: calc(var(--border-radius) + var(--padding));
  pointer-events: none;
  background-image: linear-gradient(0deg, #0002, #0005);
  z-index: -1;
  transition: box-shadow var(--transition), filter var(--transition);
  box-shadow:
    0 -8px 8px -6px #0000 inset,
    0 -16px 16px -8px #00000000 inset,
    1px 1px 1px #fff2,
    2px 2px 2px #fff1,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}

/* luz azul que sobe de baixo */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(
    0deg,
    #fff,
    hsl(var(--highlight-color-hue), 100%, 70%),
    hsla(var(--highlight-color-hue), 100%, 70%, 50%),
    8%,
    transparent
  );
  opacity: 0;
  transition: opacity var(--transition), filter var(--transition);
}

.btn-svg {
  flex: none;
  width: 24px;
  height: 24px;
  margin-right: 0.6rem;
  fill: #e8e8e8;
  animation: flicker 2s linear infinite;
  animation-delay: 0.5s;
  filter: drop-shadow(0 0 2px #fff9);
  transition: fill var(--transition), filter var(--transition), opacity var(--transition);
}

@keyframes flicker { 50% { opacity: 0.3; } }

/* as duas frases ficam empilhadas; a largura acompanha a maior */
.txt-wrapper {
  position: relative;
  display: grid;
  align-items: center;
}
.txt-1,
.txt-2 { grid-area: 1 / 1; }

.txt-1 { animation: appear-anim 1s ease-in-out forwards; }
.txt-2 { opacity: 0; }

.btn-letter {
  position: relative;
  display: inline-block;
  color: #fff9;
  text-shadow: 0 1px 2px #0006;   /* legível sobre fotos claras atrás do vidro */
  animation: letter-anim 2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.06s);
  transition: color var(--transition), text-shadow var(--transition), opacity var(--transition);
}
.btn-letter--espaco { width: 0.28em; }

@keyframes letter-anim {
  50% { text-shadow: 0 0 3px #fff8; color: #fff; }
}
@keyframes appear-anim {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes opacity-anim {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes focused-letter-anim {
  0%, 100% { filter: blur(0px); }
  50% {
    transform: scale(2);
    filter: blur(10px) brightness(150%)
      drop-shadow(-36px 12px 12px hsl(var(--highlight-color-hue), 100%, 70%));
  }
}

/* Foco (depois do clique): troca a frase */
.btn:focus .txt-1 {
  animation: opacity-anim 0.3s ease-in-out forwards;
  animation-delay: 1s;
}
.btn:focus .txt-2 {
  animation: opacity-anim 0.3s ease-in-out reverse forwards;
  animation-delay: 1s;
}
.btn:focus .btn-letter {
  animation:
    focused-letter-anim 1s ease-in-out forwards,
    letter-anim 1.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.06s), calc(1s + var(--i) * 0.06s);
}
.btn:focus .btn-svg {
  animation-duration: 1.2s;
  animation-delay: 0.2s;
}
.btn:focus::before {
  box-shadow:
    0 -8px 12px -6px #fff3 inset,
    0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 20%) inset,
    1px 1px 1px #fff3,
    2px 2px 2px #fff1,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}
.btn:focus::after {
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
  mask-image: linear-gradient(0deg, #fff, transparent);
  filter: brightness(100%);
}
.btn:focus-visible { border-color: hsla(var(--highlight-color-hue), 100%, 80%, 80%); }

/* Hover */
.btn:hover { border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 40%); }
.btn:hover::before {
  box-shadow:
    0 -8px 8px -6px #fffa inset,
    0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 30%) inset,
    1px 1px 1px #fff2,
    2px 2px 2px #fff1,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}
.btn:hover::after {
  opacity: 1;
  -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
  mask-image: linear-gradient(0deg, #fff, transparent);
}
.btn:hover .btn-svg {
  fill: #fff;
  filter: drop-shadow(0 0 3px hsl(var(--highlight-color-hue), 100%, 70%))
    drop-shadow(0 -4px 6px #0009);
  animation: none;
}

/* Clique */
.btn:active {
  border: solid 1px hsla(var(--highlight-color-hue), 100%, 80%, 70%);
  background-color: hsla(var(--highlight-color-hue), 50%, 20%, 0.5);
}
.btn:active::before {
  box-shadow:
    0 -8px 12px -6px #fffa inset,
    0 -16px 16px -8px hsla(var(--highlight-color-hue), 100%, 70%, 80%) inset,
    1px 1px 1px #fff4,
    2px 2px 2px #fff2,
    -1px -1px 1px #0002,
    -2px -2px 2px #0001;
}
.btn:active::after {
  opacity: 1;
  -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
  mask-image: linear-gradient(0deg, #fff, transparent);
  filter: brightness(200%);
}
.btn:active .btn-letter {
  text-shadow: 0 0 1px hsla(var(--highlight-color-hue), 100%, 90%, 90%);
  animation: none;
}

/* ===== Lightbox ===== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overflow: auto;
  background: rgba(10, 11, 9, .92);
  cursor: zoom-out;
  animation: surgir .25s ease;
}

.lightbox video {
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  width: min(100%, 1280px);
  background: #000;
  box-shadow: 0 20px 80px rgba(0, 0, 0, .6);
  cursor: auto;
}
.lightbox [hidden] { display: none; }

.lightbox__fechar {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 12px;
  width: 44px;
  height: 44px;
  border: solid 1px #fff2;
  border-radius: 50%;
  background: rgba(16, 16, 16, .72);
  color: var(--texto);
  font: 28px/1 system-ui, sans-serif;
  cursor: pointer;
}

.lightbox img {
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 20px 80px rgba(0, 0, 0, .6);
}

@keyframes surgir { from { opacity: 0; } }
.lightbox[hidden] { display: none; }

/* ===== Celular ===== */
@media (max-width: 640px) {
  :root { --gap: 6px; }
  .btn { font-size: 15px; }
}

/* ===== Menos movimento: desliga as animações do botão (as faixas seguem, bem lentas) ===== */
@media (prefers-reduced-motion: reduce) {
  .btn-letter,
  .btn-svg { animation: none !important; }
  .btn-letter { color: #fff; }
  .foto img { transition: none; }
}