/* ============================================================
   flare-glass.css
   Liquid glass effect para controles e botões da Flare.
   Inspirado em: https://aave.com/design/building-glass-for-the-web
   Versão CSS — usa backdrop-filter + inset rim lighting + tint.
   ============================================================ */

/* -------------------------------------
   PILL BUTTONS (Fale com a Flare, Ver projeto, Vamos criar, etc.)
   -------------------------------------- */
.pill-button {
  background: rgba(237, 235, 221, 0.06);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 6px 22px rgba(0, 0, 0, 0.18);
  transition:
    background 0.3s ease,
    color 0.3s ease,
    transform 0.2s ease,
    box-shadow 0.3s ease;
}

.pill-button:hover {
  background: rgba(237, 235, 221, 0.95);
  color: var(--preto);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 12px 32px rgba(0, 0, 0, 0.25);
}

/* -------------------------------------
   CAROUSEL ARROWS (← / →)
   -------------------------------------- */
.carousel-btn {
  background: rgba(237, 235, 221, 0.07);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 4px 14px rgba(0, 0, 0, 0.2);
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.carousel-btn:hover {
  background: rgba(237, 235, 221, 0.92);
  color: var(--preto);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 8px 22px rgba(0, 0, 0, 0.28);
}

/* -------------------------------------
   CAROUSEL DOTS (indicador de slide)
   -------------------------------------- */
.carousel-dot {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 6px rgba(0, 0, 0, 0.15);
}

/* -------------------------------------
   MODAL BUTTONS (close/nav nos popups Vimeo, galeria, lightbox)
   -------------------------------------- */
.flare-video-modal-close,
.flare-gallery-close,
.flare-gallery-nav,
.flare-lightbox-close {
  background: rgba(237, 235, 221, 0.08) !important;
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1),
    0 4px 18px rgba(0, 0, 0, 0.2) !important;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
}

.flare-video-modal-close:hover,
.flare-gallery-close:hover,
.flare-gallery-nav:hover,
.flare-lightbox-close:hover {
  background: rgba(237, 235, 221, 0.2) !important;
  transform: scale(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

/* -------------------------------------
   FOOTER SOCIALS (Instagram + Vimeo)
   Estilo padrão pra todas as páginas — bolinha bordeaux com SVG dentro.
   -------------------------------------- */
.footer-socials {
  display: flex !important;
  gap: 1rem !important;
}
.footer-socials a {
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(76, 0, 0, 0.85) !important;
  color: var(--marfim, #EDEBDD) !important;
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 4px 14px rgba(0, 0, 0, 0.15);
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.footer-socials a:hover {
  background: rgba(22, 22, 22, 0.9) !important;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 8px 22px rgba(0, 0, 0, 0.25);
}
.footer-socials a svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}

/* -------------------------------------
   FOOTER LEGAL LINKS (Privacidade / Termos no footer-bottom)
   -------------------------------------- */
.footer-bottom-right {
  display: inline-flex;
  gap: 1.5rem;
}
.footer-bottom-right a {
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  text-decoration: none;
}
.footer-bottom-right a:hover {
  opacity: 1;
}

/* ============================================================
   HOVER REFINEMENTS — micro-animações
   Easing premium, durações sincronizadas, zoom suave em imagens
   ============================================================ */

/* Easing padrão Flare: rápido no início, suave no fim (cubic-bezier do Material) */
:root {
  --ease-flare: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.5, 1.5, 0.5, 1);
}

/* -------------------------------------
   WORK TILES (página /work) — Ken Burns sutil
   -------------------------------------- */
.work-tile {
  transition: transform 0.5s var(--ease-flare);
}
.work-tile-image img {
  transition: transform 0.8s var(--ease-flare);
}
.work-tile:hover .work-tile-image img {
  transform: scale(1.05);
}

/* -------------------------------------
   WORK CARDS (carrossel da home)
   -------------------------------------- */
.work-card {
  transition: transform 0.5s var(--ease-flare);
}
.work-card video,
.work-card img {
  transition: transform 0.9s var(--ease-flare);
}
.work-card:hover video,
.work-card:hover img {
  transform: scale(1.04);
}

/* -------------------------------------
   DISCOVER TILES (Descubra Mais) — zoom na imagem
   -------------------------------------- */
.discover-tile {
  transition: transform 0.4s var(--ease-flare);
}
.discover-tile > img {
  transition: transform 0.8s var(--ease-flare);
}
.discover-tile:hover > img {
  transform: scale(1.06);
}

/* -------------------------------------
   FRAME TILES / STILL TILES (fotos nos cases e about)
   -------------------------------------- */
.frame-tile img,
.still-tile img {
  transition: transform 0.6s var(--ease-flare), opacity 0.25s ease;
}
.frame-tile:hover img,
.still-tile:hover img {
  transform: scale(1.03);
}

/* -------------------------------------
   PILL BUTTONS — sheen sutil passando + easing refinado
   -------------------------------------- */
.pill-button {
  position: relative;
  overflow: hidden;
}
.pill-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 70%
  );
  transform: translateX(-110%);
  transition: transform 0.7s var(--ease-flare);
  pointer-events: none;
  z-index: 0;
}
.pill-button > * {
  position: relative;
  z-index: 1;
}
.pill-button:hover::before {
  transform: translateX(110%);
}

/* -------------------------------------
   NAV MENU — underline animado da esquerda
   -------------------------------------- */
nav.top .menu a {
  position: relative;
  padding-bottom: 6px;
}
nav.top .menu a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-flare);
}
nav.top .menu a:hover::after,
nav.top .menu a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* -------------------------------------
   CAROUSEL BUTTONS — escala spring sutil
   -------------------------------------- */
.carousel-btn {
  transition:
    background 0.3s var(--ease-flare),
    color 0.3s var(--ease-flare),
    transform 0.4s var(--ease-spring),
    box-shadow 0.3s var(--ease-flare) !important;
}
.carousel-btn:hover {
  transform: scale(1.08) translateY(-2px) !important;
}

/* -------------------------------------
   CAROUSEL DOTS — escala sutil no hover/active
   -------------------------------------- */
.carousel-dot {
  transition: opacity 0.25s ease, transform 0.3s var(--ease-spring), background 0.25s ease;
}
.carousel-dot:hover,
.carousel-dot.active {
  transform: scale(1.4);
}

/* -------------------------------------
   FOOTER LEGAL LINKS — underline da esquerda
   -------------------------------------- */
.footer-bottom-right a {
  position: relative;
  padding-bottom: 2px;
}
.footer-bottom-right a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-flare);
}
.footer-bottom-right a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* -------------------------------------
   FOOTER NAV LINKS (Home, Work, About, Contact)
   -------------------------------------- */
.footer-col ul li a {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  transition: opacity 0.25s ease, transform 0.3s var(--ease-flare);
}
.footer-col ul li a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-flare);
}
.footer-col ul li a:hover {
  transform: translateX(3px);
}
.footer-col ul li a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* -------------------------------------
   FOUNDER SOCIALS (about.html — bio do Lucas)
   Mesmo padrão das footer-socials.
   -------------------------------------- */
.founder-socials {
  display: flex !important;
  gap: 1rem !important;
}
.founder-socials a {
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(76, 0, 0, 0.9) !important;
  color: var(--marfim, #EDEBDD) !important;
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 4px 14px rgba(0, 0, 0, 0.15);
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.founder-socials a:hover {
  background: rgba(22, 22, 22, 0.9) !important;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 8px 22px rgba(0, 0, 0, 0.25);
}
.founder-socials a svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor;
}