@import url("reveal.css");

:root{
  --fg:#111; --bg:#fff; --muted:#666; --line:#eee; --accent:#000;
  --max:1200px; --pad:24px;
  --font-body: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-head: var(--font-body);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; color:var(--fg); background:var(--bg); font-family:var(--font-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
a{color:inherit}
header.navbar, header{
  position:sticky; top:0; z-index:40; transition:transform .24s ease; will-change:transform;
  background:var(--bg); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--line);
}
.nav-hide{ transform: translateY(-100%); }
.nav-show{ transform: translateY(0); }
.nav{max-width:var(--max); margin:0 auto; padding:12px var(--pad); display:flex; align-items:center; justify-content:space-between;}
.brand-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand-logo{width:22px;height:22px;object-fit:contain;display:none}
.brand-text{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-head)}
.menu a{margin-left:16px; text-decoration:none; position:relative}
.menu a::after{content:''; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:var(--accent); transition:width .25s}
.menu a:hover::after{width:100%}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad);}
.hero{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center; padding:56px var(--pad);}
.hero h1{font-size:clamp(28px,4.5vw,54px); line-height:1.05; margin:.2em 0; font-family:var(--font-head); color:var(--fg)}
.hero p{color:var(--muted); max-width:58ch}
.hero .card{ aspect-ratio: 4 / 3; }
.hero .card img, .hero .card video{ width:100%; height:100%; object-fit:cover; display:block }
.cta .btn{display:inline-block; padding:10px 16px; border:1px solid var(--accent); text-decoration:none; margin:6px 8px 0 0}
.cta .btn{ color: var(--fg); }
.section{padding:56px var(--pad); border-top:1px solid var(--line);}
.section h2{font-size:clamp(22px,3.2vw,34px); margin:0 0 .6em; font-family:var(--font-head)}
.kicker{font-size:.8rem;text-transform:uppercase;color:var(--muted);margin-bottom:.4em;letter-spacing:.05em}
.grid{display:grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap:16px}
.grid-xl{display:grid; grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); gap:24px}
.card{border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff}
.card img{width:100%; height:auto; display:block; transition:transform .3s ease}
.card:hover img{transform:scale(1.02)}
.card figcaption{padding:10px 12px}
footer{border-top:1px solid var(--line); padding:24px var(--pad); color:var(--muted)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:24px}
@media (max-width:860px){ .hero{grid-template-columns:1fr; padding:36px var(--pad);} .two{grid-template-columns:1fr} }
/* Global button overlay */
.btn{position:relative; overflow:hidden; z-index:0}        /* base */
.btn::before{
  content:""; position:absolute; inset:0; background:currentColor;
  opacity:0; transition:opacity .18s ease; border-radius:inherit; z-index:-1;
}
.btn:hover::before{opacity:.14}    /* leve filme translúcido */
.btn:active::before{opacity:.22}   /* um pouco mais escuro no clique */
.btn:focus{outline:2px solid var(--accent); outline-offset:2px}

/* Carrossel horizontal (scroll-snap) */
.carousel{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px,1fr); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:4px }
.carousel > .card{ scroll-snap-align:start }
.carousel::-webkit-scrollbar{ height:8px }
.carousel::-webkit-scrollbar-thumb{ background:#ccc; border-radius:999px }
#veil-transition{position:fixed;inset:0;background:var(--bg);opacity:0;transition:opacity .28s ease;pointer-events:none;z-index:999}
body[data-variant="cosplay"] #veil-transition{ background: #000; }
#veil-transition.show{opacity:1}

/* Hero full-bleed */
/* quebra limites da .wrap */
.full-bleed{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}

.hero-full{position:relative;min-height:calc(100vh - 56px)}
.hero-full .media{position:absolute;inset:0;overflow:hidden;z-index:0}
.hero-full .media>img,.hero-full .media>video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity 1s ease-in-out;
}
.hero-full .media>img.active,.hero-full .media>video.active{opacity:1}
.hero-full.backdrop-blur{z-index:1}
.hero-full.backdrop-blur::before{
  content:"";position:absolute;inset:0;
  background-image: var(--hero-bg);
  background-size:cover;background-position:center;
  filter:blur(28px) saturate(1.05);
  transform:scale(1.08); /* empurra o blur até além das bordas */
  z-index:-1; opacity:.55;pointer-events:none;
}
.hero-full .overlay{position:relative;z-index:1;min-height:inherit;display:grid;align-content:center;padding:clamp(24px,6vw,72px)}
.hero-full .overlay .wrap-inner{max-width:var(--max);margin:0 auto}
.hero-full .overlay.tone-light{color:#fff}
.hero-full .overlay.tone-dark{color:#0a0a0a}
.hero-full .overlay .btn{border-color:currentColor;color:currentColor}
.hero-full .overlay.align-center .wrap-inner{text-align:center}
.hero-full .overlay.align-right  .wrap-inner{text-align:right}

/* faixa full-bleed (igual ao hero) */
.band{ position:relative; width:100vw; left:50%; margin-left:-50vw;
       background: var(--bg); padding: clamp(28px,5vw,72px) 0; border-top:1px solid var(--line) }
.band-inner{ max-width: var(--max); margin:0 auto; text-align:center; padding: 0 20px }
.band .hint{ max-width: 80ch; margin: 8px auto 18px }
.contact-form input[type=text],
.contact-form input[type=email],
.contact-form textarea{ width:100%; padding:12px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--fg) }
.contact-form .row{ display:flex; gap:12px; margin-bottom:12px }
.contact-form .btn{
  min-width:140px;
  display:inline-block;
  padding:10px 16px;
  border:1px solid var(--accent);
  border-radius:6px;
  background:var(--bg);
  color:var(--fg);
  cursor:pointer;
}
@media (max-width:640px){ .contact-form .row{ flex-direction:column } }

.home-contact-box{ background:rgba(0,0,0,.6); padding:24px; border-radius:8px; max-width:420px; margin-left:auto }
@media (max-width:720px){ .home-contact-box{ margin-left:auto; margin-right:auto } }

.footer-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
footer .social{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
footer .social .ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; color: var(--muted);
  opacity:.9; transition: opacity .2s ease, color .2s ease, transform .2s ease;
}
footer .social .ico:hover{ color: var(--fg); opacity:1; transform: translateY(-1px); }
footer .social svg{width:100%;height:100%;display:block}

.page-banner{display:none; position:relative; margin:0 0 24px 0}
.page-banner img{width:100%; height:30vh; object-fit:cover; display:block; border-radius:8px}
@media (min-width:900px){ .page-banner img{ height:44vh } }
.page-banner .banner-title{ position:absolute; inset:auto 0 10% 0; text-align:center; font-size:clamp(22px,4.2vw,46px); font-weight:700; color:var(--fg) }
.page-banner .banner-title.light{ color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.35) }

.section-kicker{font-size:clamp(12px,1.4vw,14px);letter-spacing:.16em;text-transform:uppercase;opacity:.72;margin:0 0 8px 0}
.rule{border:none;border-top:1px solid var(--line);margin:0 0 18px 0}

.favs-grid-xl{display:grid;gap:28px}
@media(min-width:900px){ .favs-grid-xl{grid-template-columns:repeat(3,1fr)} }
.favs-grid-xl .card{background:none;border:none;box-shadow:none;padding:0;text-decoration:none;color:inherit}
.favs-grid-xl .card img{width:100%;height:460px;object-fit:cover;border-radius:8px;display:block}
.favs-grid-xl .caption{max-width:70ch;margin:10px auto 0;text-align:center;opacity:.92}

body.admin{ padding-bottom: 28px; }
.tabs #saveAll{ margin-left:auto; }
.savebtn{border:1px solid var(--line);background:var(--muted);padding:10px 14px;border-radius:8px;font-weight:600}
.savebtn.neutral{opacity:.7}
.savebtn.dirty{background:#FFC107;color:#000}
.savebtn.saving{background:#777;color:#fff}
.savebtn.done{background:#2E7D32;color:#fff}
.savebtn.error{background:#B00020;color:#fff}
/* ====== ITEM / GALERIA ====== */
.item-head{margin-bottom:24px}

.masonry{
  /* full-width dentro do container, mas com limite elegante */
  max-width: min(1680px, 96vw);
  margin: 8px auto 64px;
  column-gap: 24px;
  column-fill: balance;
  /* “column-width” define a largura alvo de cada coluna; o browser decide o nº de colunas */
  column-width: 360px;
}
@media (max-width: 1024px){ .masonry{ column-width: 300px; } }
@media (max-width: 640px){  .masonry{ column-width: 100%; } }

.mCard{
  break-inside: avoid;
  margin: 0 0 24px;
  border-radius: 12px;
  background: none;
  box-shadow: none;
}
.mCard .media{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--bg);
}
.mCard img,
.mCard video{
  width: 100%;
  height: auto;
  display: block;
  transform: translate3d(0,0,0) scale(var(--s,1)) translate(var(--tx,0), var(--ty,0));
  transition: transform .25s ease;
  will-change: transform;
  object-fit: cover;
}

/* Ken Burns suave quando o card entra em viewport */
.mCard.kb.in img,
.mCard.kb.in video{ animation: ken 22s ease-in-out both alternate infinite; }
@keyframes ken{
  0%   { transform: scale(1.02) translate3d(0,0,0); }
  100% { transform: scale(1.07) translate3d(0,0,0); }
}

/* Efeito hover sutil (já temos filme translúcido nos .btn; aqui só leve pan) */
.mCard:hover{ --s: 1.03; }

/* Acessibilidade: respeita “reduzir animações” */
@media (prefers-reduced-motion: reduce){
  .mCard.kb.in img, .mCard.kb.in video{ animation: none; }
  .mCard img, .mCard video{ transition: none; }
}

/* ===== Rodapé: mais respiro e melhor leitura ===== */
footer.wrap{
  padding: 20px 0 64px;            /* mais espaço até o fim da página */
}
footer.wrap .footer-row{
  padding-top: 10px;               /* solta a linha dos ícones/links */
}
footer.wrap .foot-right{ gap: 18px; }

/* ===== Cabeçalho “vidro” (blur) ===== */
header.navbar,
header{ position: sticky; top: 0; z-index: 40; }

/* aplica o “vidro” quando a classe .glass estiver no header */
header.glass{
  /* base translúcida; usa sua paleta */
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: saturate(1.15) blur(12px);
  backdrop-filter: saturate(1.15) blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
@supports not (backdrop-filter: blur(2px)){
  /* fallback: só translúcido */
  header.glass{ background: color-mix(in srgb, var(--bg) 80%, transparent); }
}

/* respiro interno do header (não deixar “colado” na linha) */
header.navbar, header.glass{ padding: 10px 16px; }

/* transições do auto‑hide */
.nav-hide{ transform: translateY(-100%); }
.nav-show{ transform: translateY(0); transition: transform .24s ease; }

/* ===== About na Home ===== */
.about-grid{
  display:grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items:center;
  max-width: var(--max);
}
.about-media img{ width:100%; height:auto; border-radius:12px; display:block; }
.about-text p{ margin: 8px 0 0; }

@media (max-width: 980px){
  .about-grid{ grid-template-columns: 1fr; }
}

/* ===== Contact na Home ===== */
.contact-grid{ max-width: var(--max); text-align:center; }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:12px; }
.btn.ghost{ background:transparent; border:1px solid var(--line); }