/* ================= Galeria: formas de exibição por álbum ================= */


.gallery-view-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:30px}
.gallery-view-actions small{color:var(--olive)}
.mode-launch{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border:0;border-radius:4px;
  background:var(--deep);color:#fff;font:inherit;font-weight:600;cursor:pointer;
  box-shadow:0 12px 30px rgba(18,63,67,.22);transition:transform .2s ease,background .2s ease}
.mode-launch:hover{transform:translateY(-2px);background:var(--deep-2)}
.mode-launch span{color:var(--sun)}

.album-invite{margin-top:42px;padding:20px 24px;border-left:4px solid var(--sun);background:var(--mist);border-radius:4px}
.album-invite a{color:var(--coral-dark);font-weight:600}

/* ---------------- Visor de foto (todos os modos de layout) ---------------- */

.masonry-grid figure,.polaroid-wall figure,.timeline-wall figure,.vitral-wall figure{cursor:zoom-in}

/* Os <img> levam width/height do arquivo original para reservar espaço e evitar
   salto de layout. Sem height:auto o `max-width:100%` global encolhe só a largura
   e a altura fica travada no valor do atributo, esticando a foto verticalmente. */
.masonry-grid figure img{width:100%;height:auto;display:block}

/* Cada foto entra sozinha ao chegar na tela — a galeria não espera todas.
   Só a opacidade é animada: cada modo tem seu próprio transform (o tilt do
   polaroid, o hover do vitral) e mexer nele aqui atropelaria os dois. */
.photos-staggered figure{opacity:0;transition:opacity .45s ease}
.photos-staggered figure.is-shown{opacity:1}
@media(prefers-reduced-motion:reduce){.photos-staggered figure{opacity:1;transition:none}}
body.viewer-open,body.stage-open{overflow:hidden}

.photo-viewer{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
  gap:12px;padding:24px;background:rgba(6,26,28,.94);backdrop-filter:blur(6px)}
.photo-viewer[hidden]{display:none}
.pv-stage{max-width:min(1200px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:14px;margin:0}
.pv-stage img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.pv-stage figcaption{color:#dfe9e6;text-align:center;font-size:.95rem}
.pv-close{position:absolute;top:20px;right:24px;width:46px;height:46px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer}
.pv-nav{width:52px;height:52px;flex:0 0 auto;border:0;border-radius:50%;background:rgba(255,255,255,.12);
  color:#fff;font-size:2rem;line-height:1;cursor:pointer;transition:background .2s ease}
.pv-close:hover,.pv-nav:hover{background:rgba(255,255,255,.26)}
@media(max-width:700px){.pv-nav{position:absolute;bottom:24px}.pv-prev{left:24px}.pv-next{right:24px}}

/* ---------------------------- Mural Polaroid ---------------------------- */

.polaroid-wall{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:34px 26px;padding:44px 20px;
  background:repeating-linear-gradient(135deg,#e5d6bd,#e5d6bd 3px,#dfcfb4 3px,#dfcfb4 6px);border-radius:6px}
.polaroid-wall figure{position:relative;width:min(258px,72vw);margin:0;padding:13px 13px 18px;background:#fffdf8;
  border-radius:2px;transform:rotate(var(--tilt,0deg)) translateY(var(--lift,0));
  box-shadow:0 14px 34px rgba(40,28,12,.28);transition:transform .28s ease,box-shadow .28s ease}
.polaroid-wall figure:hover{transform:rotate(0deg) translateY(-10px) scale(1.04);box-shadow:0 26px 54px rgba(40,28,12,.36);z-index:2}
.polaroid-wall figure:before{content:"";position:absolute;top:-9px;left:50%;width:16px;height:16px;margin-left:-8px;
  border-radius:50%;background:radial-gradient(circle at 35% 30%,#f27a5e,#b93f26);box-shadow:0 3px 7px rgba(0,0,0,.35)}
/* height:auto anula o atributo height="" do HTML, senão o aspect-ratio é ignorado. */
.polaroid-wall figure img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;display:block;background:#eee}
/* A legenda fica no fluxo normal: posicioná-la de forma absoluta sobre uma tarja
   de altura fixa fazia o texto de duas linhas subir por cima da foto. O min-height
   preserva a tarja branca da polaroid quando não há legenda nenhuma. */
.polaroid-wall figcaption{padding:14px 8px 0;text-align:center;min-height:34px;
  font-size:.95rem;line-height:1.35;color:#4a3b28;font-style:italic}

/* ---------------------------- Linha do tempo ---------------------------- */

.timeline-wall{position:relative;padding:20px 0 20px 34px}
.timeline-wall:before{content:"";position:absolute;top:0;bottom:0;left:9px;width:3px;
  background:linear-gradient(180deg,var(--sun),var(--coral),var(--sky))}
.timeline-date{position:relative;margin:44px 0 22px;font-weight:700;color:var(--deep);font-size:1.05rem}
.timeline-date:first-child{margin-top:0}
.timeline-date:before{content:"";position:absolute;left:-32px;top:50%;width:15px;height:15px;margin-top:-7px;
  border-radius:50%;background:#fff;border:3px solid var(--coral)}
.timeline-wall figure{margin:0 0 24px;max-width:560px;background:#fff;border-radius:4px;overflow:hidden;
  box-shadow:0 12px 32px rgba(18,52,55,.12)}
.timeline-wall figure img{width:100%;height:auto;display:block}
.timeline-wall figcaption{padding:14px 18px;font-size:.94rem;color:var(--olive)}
@media(min-width:900px){
  .timeline-wall{padding-left:0;max-width:1000px;margin:0 auto}
  .timeline-wall:before{left:50%;margin-left:-1.5px}
  /* No desktop a própria data vira o marcador, senão o círculo cai em cima do texto. */
  .timeline-date{display:block;text-align:center}
  .timeline-date span{display:inline-block;padding:8px 20px;border:2px solid var(--coral);border-radius:40px;
    background:#fff;box-shadow:0 6px 18px rgba(18,52,55,.1)}
  .timeline-date:before{display:none}
  .timeline-wall figure{width:calc(50% - 42px)}
  .timeline-wall figure.tl-left{margin-right:auto}
  .timeline-wall figure.tl-right{margin-left:auto}
}

/* -------------------------------- Vitral -------------------------------- */

.vitral-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px;
  padding:34px 22px;background:linear-gradient(160deg,var(--deep-2),#123f43 60%,#1c5257);border-radius:6px}
.vitral-wall figure{position:relative;margin:0;overflow:hidden;background:#0a2427;
  border:3px solid rgba(201,155,62,.55);border-radius:50% 50% 6px 6px/34% 34% 6px 6px;
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 16px 34px rgba(0,0,0,.32)}
.vitral-wall figure img{width:100%;height:auto;aspect-ratio:3/4.4;object-fit:cover;display:block;
  filter:saturate(1.12) contrast(1.04);transition:transform .5s ease}
.vitral-wall figure:hover img{transform:scale(1.06)}
.vitral-wall figure:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.42) 50%,transparent 62%);
  transform:translateX(-130%);animation:vitral-sweep 5.5s var(--sweep-delay,0s) infinite}
.vitral-wall figcaption{position:absolute;inset:auto 0 0;padding:22px 12px 12px;font-size:.82rem;color:#fff;
  background:linear-gradient(0deg,rgba(4,22,24,.9),transparent);text-align:center}
@keyframes vitral-sweep{0%,72%{transform:translateX(-130%)}88%,100%{transform:translateX(130%)}}
@media(prefers-reduced-motion:reduce){.vitral-wall figure:after{animation:none;opacity:0}}

/* ==================== Modos imersivos (tela cheia) ==================== */

.gallery-stage{position:fixed;inset:0;z-index:1300;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(120% 90% at 50% 0%,#0d3a45 0%,#06181d 55%,#03090c 100%);overflow:hidden}
.gallery-stage[hidden]{display:none}
.gallery-stage.is-open{opacity:1}
.gs-toolbar{position:absolute;inset:0 0 auto;z-index:6;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:22px 30px}
.gs-brand{display:flex;align-items:center;gap:12px;color:#fff;letter-spacing:.04em}
.gs-brand span{color:var(--sun);font-size:1.3rem}
.gs-controls{display:flex;gap:10px}
.gs-controls button{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border:1px solid rgba(255,255,255,.24);
  border-radius:40px;background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:.9rem;cursor:pointer;
  backdrop-filter:blur(6px);transition:background .2s ease}
.gs-controls button:hover{background:rgba(255,255,255,.2)}
.gs-hint{position:absolute;inset:auto 0 26px;z-index:6;text-align:center;color:rgba(255,255,255,.6);font-size:.85rem}
@media(max-width:700px){.gs-label{display:none}.gs-controls button{padding:10px 14px}}

/* ------------------------------ Constelação ------------------------------ */

.gs-stars{position:absolute;inset:-10%;pointer-events:none;
  background-image:radial-gradient(2px 2px at 20% 30%,rgba(255,255,255,.9),transparent),
    radial-gradient(1px 1px at 70% 20%,rgba(255,255,255,.7),transparent),
    radial-gradient(1.5px 1.5px at 40% 70%,rgba(255,255,255,.8),transparent),
    radial-gradient(1px 1px at 85% 60%,rgba(255,255,255,.6),transparent),
    radial-gradient(2px 2px at 10% 85%,rgba(255,255,255,.75),transparent);
  background-size:520px 520px}
.gs-stars-far{opacity:.5;animation:stars-drift 190s linear infinite}
.gs-stars-near{opacity:.85;background-size:300px 300px;animation:stars-drift 110s linear infinite reverse}
@keyframes stars-drift{to{transform:translate3d(-520px,-260px,0)}}

.cosmos-field{position:absolute;inset:0;pointer-events:none}
/* A profundidade é sugerida por opacidade e escala; desfocar deixava tudo borrado. */
.cosmos-photo{position:absolute;bottom:-40vh;left:0;width:var(--size);margin:0;opacity:0;
  z-index:var(--depth);
  animation:cosmos-rise var(--duration) var(--delay) linear infinite}
.cosmos-photo img{width:100%;display:block;border-radius:4px;border:5px solid rgba(255,255,255,.9);
  box-shadow:0 22px 60px rgba(0,0,0,.55)}
/* Fade curto nas pontas: quanto mais tempo semitransparente, mais a foto vira
   uma moldura vazia flutuando. */
@keyframes cosmos-rise{
  0%{transform:translate3d(var(--x),20vh,0) rotate(var(--rot)) scale(var(--scale));opacity:0}
  7%{opacity:var(--alpha)}
  92%{opacity:var(--alpha)}
  100%{transform:translate3d(var(--x-end),-125vh,0) rotate(var(--rot-end)) scale(var(--scale-end));opacity:0}}
.gallery-stage.is-paused .cosmos-photo,.gallery-stage.is-paused .gs-stars{animation-play-state:paused}

/* -------------------------------- Cinema -------------------------------- */

.gallery-stage-cinema{background:#05090b}
.cinema-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.cinema-slide{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cinema-slide img{width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(1.02);
  transition:opacity .9s ease}
.cinema-slide.is-live img{opacity:1;animation:ken-burns 8s ease-out forwards}
.cinema-slide figcaption{position:absolute;inset:auto 0 62px;padding:0 8vw;text-align:center;color:#fff;
  font-size:1.05rem;text-shadow:0 3px 18px rgba(0,0,0,.8)}
@keyframes ken-burns{from{transform:scale(1.02)}to{transform:scale(1.11) translate3d(-1.2%,-1%,0)}}
.gallery-stage.is-paused .cinema-slide img{animation-play-state:paused}
.cinema-nav{position:absolute;top:50%;z-index:5;width:58px;height:58px;margin-top:-29px;border:0;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;font-size:2.2rem;line-height:1;cursor:pointer;transition:background .2s ease}
.cinema-nav:hover{background:rgba(255,255,255,.24)}
.cinema-prev{left:26px}.cinema-next{right:26px}
.cinema-progress{position:absolute;inset:auto 0 0;height:4px;background:rgba(255,255,255,.12);z-index:5}
.cinema-progress i{display:block;height:100%;width:0;background:var(--sun)}
@keyframes cinema-bar{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){
  .cinema-slide.is-live img{animation:none}
  .cosmos-photo{animation:none;opacity:var(--alpha);position:relative}
}

/* ======================= Página de envio de fotos ======================= */

.upload-form{display:grid;gap:20px;margin-top:12px}
.upload-form label{display:grid;gap:8px;font-weight:600;color:var(--deep)}
.upload-form input[type=text],.upload-form input:not([type]),.upload-form input[name=name],.upload-form input[name=phone]{
  padding:13px 15px;border:1px solid var(--line);border-radius:4px;font:inherit}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.upload-drop{padding:26px;border:2px dashed var(--line);border-radius:6px;background:var(--mist);text-align:center}
.upload-drop>span{font-size:1.05rem}
.upload-drop small{font-weight:400;color:var(--olive);display:block;margin-top:6px}
.upload-drop input[type=file]{margin:0 auto}
.upload-preview{display:flex;flex-wrap:wrap;gap:10px}
.upload-preview img{width:84px;height:84px;object-fit:cover;border-radius:4px;box-shadow:0 6px 16px rgba(18,52,55,.16)}
.upload-preview p{width:100%;margin:0;color:var(--olive);font-size:.9rem}
.upload-legal{font-size:.85rem;color:var(--olive);font-weight:400}
.upload-done{margin-bottom:32px;padding:22px 26px;border-left:4px solid var(--leaf);background:var(--sky-soft);border-radius:4px}
.upload-done strong{display:block;margin-bottom:6px;font-size:1.1rem;color:var(--deep)}
.upload-done .button{margin-top:14px}
button[data-photo-submit][disabled]{opacity:.6;cursor:progress}