/* =========================
   Global Reset & Base
   ========================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
/* Prevent page scroll behind the hero; modal toggles overflow via JS */
html,body{overflow:hidden}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  background:#000;
  color:#fff;
}

/* =========================
   Topbar
   ========================= */
.site-top{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;
  background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,0))
}
.brand img{height:44px;width:auto;display:block}

/* Main nav with underline animation */
.main-nav{display:flex;align-items:center;gap:10px;color:#fff;opacity:.95}
.main-nav .sep{opacity:.4}
.nav-link{position:relative;color:#fff;text-decoration:none;padding:4px 6px;display:inline-block}
.nav-link::after{content:"";position:absolute;left:6px;right:6px;bottom:0;height:1.5px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.nav-link:hover::after{transform:scaleX(1)}
.nav-link:hover{color:#ef4444}

/* Socials minimal */
.socials{display:flex;gap:8px}
.icon-btn{
  height:28px;width:28px;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;opacity:.95;text-decoration:none;border-radius:8px
}
.icon-btn:hover{color:#ef4444;opacity:1}

/* =========================
   Hero Slider
   ========================= */
.hero-slider{position:relative;height:100svh;width:100vw;overflow:hidden;background:#000}
.slides{position:absolute;inset:0;display:flex;transition:transform .7s ease}
.slide{position:relative;flex:0 0 100%;height:100%}
.slide img.bg,.slide video.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.62)}
.slide-inner{position:relative;z-index:2;height:100%;display:flex;align-items:center}

/* Left-aligned content stack */
.container{width:100%;margin:0;padding-left:80px;padding-right:24px}
.stack{display:flex;flex-direction:column;align-items:flex-start;text-align:left;row-gap:0.25rem}
.stack>*{margin-left:0;margin-right:0}
.year{letter-spacing:.18em;text-transform:uppercase;opacity:.95;margin:0 0 .25rem 0;font-size:13px;font-weight:800}
.title{font-weight:900;letter-spacing:.01em;line-height:0.85;margin:0;max-width:22ch;overflow-wrap:break-word}
.title.big{font-size:clamp(56px,12vw,140px)}
.desc{font-size:clamp(15px,2vw,20px);max-width:240ch;color:rgba(255,255,255,.92);margin:.75rem 0}

.stack {
  row-gap: 1; /* tira o gap entre elementos da stack */
}

.year {
  margin: 1;          /* elimina margem inferior */
  line-height: 1;     /* encosta verticalmente */
}

.title.big {
  margin-left: -8px; /* puxa para a esquerda, mesmo dentro do container */
}

/* "See More" with subtle flame on hover */
.link-see{display:inline-flex;align-items:center;gap:.3rem;color:#fff;text-decoration:none;margin-top:.5rem;position:relative;opacity:.7;transition:opacity .25s}
.link-see:hover{opacity:1}
.link-see::after{
  content:"";display:inline-block;width:0;height:1.2em;margin-left:.3rem;opacity:0;transition:opacity .25s,width .25s;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff2b2b'><path d='M12 2c1.5 4-1 5.5-1 7 0 1.2.8 2.2 2 2.2 2.8 0 5-2.4 5-5.3 3.5 3.2 4 7.6 1.6 10.8C17.8 20.7 15 22 12 22s-5.8-1.3-7.6-5.3C3 13.5 4.5 10.6 7.5 8c-.3 3 1.9 5.2 4.5 5.2 1.1 0 2-.9 2-2 0-2.2-2.5-2.9-2-9.2z'/></svg>");
  background-size:contain;background-repeat:no-repeat
}
.link-see:hover::after{width:1.2em;opacity:1}

/* Bottom nav + progress */
.nav{position:absolute;bottom:34px;z-index:20;height:44px;width:44px;background:transparent;border:0;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center}
.nav:hover{color:#ef4444}
.nav-prev{left:24px}.nav-next{right:24px}
.arrow{display:inline-block;width:14px;height:14px;border-top:2px solid currentColor;border-right:2px solid currentColor}
.arrow-left{transform:rotate(-135deg)}.arrow-right{transform:rotate(45deg)}
.meter{position:absolute;left:50%;transform:translateX(-50%);bottom:40px;display:flex;align-items:center;gap:16px;width:min(90vw,900px);z-index:25}
.meter .num{font-weight:700;font-size:14px;min-width:32px;text-align:center}
.meter .bar{position:relative;height:2px;background:rgba(255,255,255,.42);flex:1;border-radius:999px;overflow:hidden}
.meter .bar .fill{position:absolute;left:0;top:0;bottom:0;background:#fff;width:0}

/* CSS-only progress fill (JS sets --progress) */
.progress-track{position:relative;width:100%;height:3px;background:#262626;overflow:hidden}
#fill,.progress-fill{height:3px;background:#e10600;transform-origin:left center;transform:scaleX(var(--progress,0));transition:transform .25s linear}
@media (prefers-reduced-motion:reduce){#fill,.progress-fill{transition:none}}

/* =========================
   Modal + Galeria (versão única)
   ========================= */

/* visibility */
.modal[aria-hidden="true"],.modal-backdrop[aria-hidden="true"]{display:none}

/* backdrop */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);z-index:900
}

/* modal container */
.modal{position:fixed;inset:0;display:grid;place-items:center;z-index:1000}

/* card */
.modal-card,.modal-content{
  width:min(1100px,92vw);max-height:92vh;background:#111;
  border:none;border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.55);
  display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:16px;position:relative
}

/* close */
.modal-close{
  position:absolute;top:16px;right:18px;background:transparent;border:0;color:#eaeaea;font-size:32px;line-height:1;
  cursor:pointer;z-index:5;text-shadow:0 1px 2px rgba(0,0,0,.6)
}
.modal-close:hover{color:#fff}

/* Media area */
.modal-media{
  position:relative;background:#0b0b0b;border:none;border-radius:10px;
  min-height:38vh;max-height:52vh;overflow:hidden
}

/* === Galeria contínua (todas lado a lado) === */

/* controla a altura base da imagem */
:root { --gallery-h: 52vh; }

/* viewport */
.carousel-viewport{
  width:100%;height:100%;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:0 8px 8px;
  background:#121212;
  scrollbar-width:none;-ms-overflow-style:none;
}
.carousel-viewport::-webkit-scrollbar{display:none}

.carousel-viewport {
  padding-left: 1px;     /* espaço à esquerda */
  padding-right: 1px;    /* espaço à direita */
  padding-top: 1px;        /* encosta no topo */
  padding-bottom: 1px;   /* leve espaço em baixo */
}

/* track */
.carousel-track{
  display:flex;align-items:center;gap:8px;height:100%;
  scroll-padding-left:8px;scroll-padding-right:8px;
  background:#121212
}

/* slide: largura automática (não 100%) */
.carousel-slide{
  flex:0 0 auto;height:100%;
  display:flex;align-items:center;justify-content:center;
  scroll-snap-align:center;scroll-snap-stop:always;
  background:#121212;border-radius:10px;overflow:hidden
}

.carousel-slide img {
  height: 100% !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Setas (único estilo) */
.nav-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  background:transparent;border:0;color:#fff;
  font-size:68px;line-height:1;padding:0 .6rem;cursor:pointer;z-index:20;
  text-shadow:0 2px 6px rgba(0,0,0,.8);opacity:.9;transition:transform .2s,opacity .2s
}
.nav-btn:hover{opacity:1;transform:translateY(-50%) scale(1.1)}
.nav-btn.prev{left:12px}.nav-btn.next{right:12px}

/* contador no topo-direito */
.modal-counter{
  position:absolute;bottom:12px;right:10px;
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12);
  padding:3px 8px;font-size:12px;color:#ddd;border-radius:8px;z-index:22
}

/* info */
.modal-info{
  background:transparent;border:1px solid rgba(255,255,255,.10);
  border-radius:10px;padding:14px;color:#ddd
}
.modal-title{margin:0 0 6px;color:#fff;font-size:18px;font-weight:700}
.modal-sub{margin:0 0 10px;color:#bfbfbf;font-size:14px;line-height:1.5}
.work-description{font-size:14px;line-height:1.6}
.work-description p{margin:8px 0;display:flex;align-items:flex-start}
.work-description strong{min-width:110px;color:#e10600;font-weight:700;flex-shrink:0}
.work-description span{flex:1}

/* responsive */
@media (max-width:900px){
  :root{ --gallery-h:45vh; }           /* altura ligeiramente menor em mobile */
  .modal-card{width:min(96vw,900px);padding:14px}
  .modal-media{max-height:55vh}
}
@media (prefers-reduced-motion:reduce){
  .carousel-track,.nav-btn{transition:none!important}
}