/* ═══════════════════════════════════════════════════════════
   PAGE: VIDEO (video.html)
   accent = âmbar (--c-film)
═══════════════════════════════════════════════════════════ */

[data-page="video"] {
  --accent: var(--c-film);
  --accent-2: #F0BC5A;
  --accent-deep: #B27A12;
}

::selection { background: var(--accent); color: #15161F; }

/* ───── Showcase canvas (player de filme) ───── */
.canvas {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}

.canvas .cb {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  opacity: .45;
  mix-blend-mode: screen;
}

.canvas .lbl {
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}

.canvas .play {
  position: relative;
  z-index: 2;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.canvas .play::after {
  content: "";
  border-left: 16px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left: 4px;
}

.scrub {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--dim);
}

.scrub .bar {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.scrub .bar::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 38%;
  background: var(--accent);
}

/* ═══════════════════════════════════════════════════════════
   VIMEO GRID — thumbnails do portfólio
═══════════════════════════════════════════════════════════ */

.vimeo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.vcard {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  transition:
    transform .4s ease,
    border-color .35s ease,
    filter .35s ease,
    opacity .35s ease;
}

/* Hover-spotlight: card sob mouse fica vivo, irmãos dimmam */
.vimeo-grid.grid-hovered .vcard {
  filter: grayscale(.28) brightness(.78);
  opacity: .82;
}

.vimeo-grid .vcard:hover {
  filter: grayscale(0) brightness(1) !important;
  opacity: 1 !important;
}

.vcard:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
}

.vcard:hover .vplay {
  opacity: 1;
  transform: scale(1);
}

.vcard:hover .vcover { filter: brightness(.75); }

.vthumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.vcover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter .4s ease, opacity .6s ease;
  filter: brightness(.82);
  opacity: 0;
}

.vcover.loaded { opacity: 1; }

.vbg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #12131A, #0B0C12);
  z-index: 0;
}

.vplay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .3s ease, transform .3s ease;
  z-index: 3;
}

.vplay .vcircle {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 255, 255, .4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vplay svg {
  width: 22px;
  height: 22px;
  color: #fff;
  margin-left: 3px;
}

.vnum-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .7);
  background: rgba(0, 0, 0, .5);
  padding: 4px 8px;
  border-radius: 100px;
  z-index: 4;
}

.vmeta {
  padding: 14px 16px 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.vmeta h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
}

.vmeta .vc {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--dim);
  margin-top: 3px;
}

.vmeta .vnum {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  color: var(--line);
  flex-shrink: 0;
}

@media (max-width: 900px) { .vimeo-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .vimeo-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════
   LIGHTBOX — player do Vimeo em modal
═══════════════════════════════════════════════════════════ */

.lbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.lbox.open {
  opacity: 1;
  pointer-events: all;
}

.lbox-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

.lbox-inner {
  position: relative;
  width: 100%;
  max-width: 1100px;
  z-index: 2;
}

.lbox-inner .ratio {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .8);
}

.lbox-inner .ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.lbox-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .25s ease;
  font-size: 18px;
  line-height: 1;
}

.lbox-close:hover { background: rgba(255, 255, 255, .25); }