/* =============================================
   YUNAR STUDIO — effects.css
   Micro-interações, efeitos e animações vivas
   ============================================= */

:root {
  --shadow-card:  0 24px 60px rgba(0,0,0,.5);
  --shadow-hover: 0 40px 100px rgba(0,0,0,.7);
  --glow-soft:    0 0 40px rgba(240,236,228,.06);
}

/* =============================================
   RIPPLE (injetado via JS nos botões)
   ============================================= */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  transform: scale(0);
  animation: rippleAnim .55s linear forwards;
  pointer-events: none;
  z-index: 0;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* =============================================
   BOTÃO PRIMÁRIO — shimmer + magnetic
   ============================================= */
.btn-primary {
  overflow: hidden;
  transition:
    background    .2s ease,
    transform     .35s cubic-bezier(.16,1,.3,1),
    box-shadow    .35s ease,
    letter-spacing .25s ease;
}

/* Faixa de luz que passa */
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 55%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.18) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left 0s;
}
.btn-primary:hover::after {
  left: 160%;
  transition: left .55s ease;
}
.btn-primary:hover {
  letter-spacing: .04em;
  box-shadow: 0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(240,236,228,.15);
}
.btn-primary:active {
  transform: translateY(1px) scale(.97) !important;
  transition-duration: .1s;
}

/* =============================================
   BOTÃO GHOST — underline elástico
   ============================================= */
.btn-ghost {
  transition: color .2s ease, letter-spacing .25s ease;
}
.btn-ghost:hover { letter-spacing: .05em; }

/* =============================================
   NAV — link com texto duplo (flip vertical)
   ============================================= */
.nl:not(.nl--cta) {
  display: inline-flex;
  flex-direction: column;
  overflow: hidden;
  height: 1.2em;
}
.nl:not(.nl--cta)::before {
  content: attr(data-label);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.16,1,.3,1);
  color: var(--white);
  position: absolute;
}
/* Aplica via wrapper de span para funcionar sem JS extra */

/* Nav logo hover glow */
.nav-logo:hover .nl-mark {
  border-color: rgba(240,236,228,.28);
  box-shadow: 0 0 20px rgba(240,236,228,.07);
}
.nl-mark {
  transition: border-color .3s ease, box-shadow .3s ease;
}

/* CTA nav — pulse borda */
.nl--cta {
  overflow: hidden;
  transition: background .2s ease, border-color .2s ease, letter-spacing .2s ease;
}
.nl--cta:hover { letter-spacing: .06em; }

/* =============================================
   HERO — atmosfera viva
   ============================================= */

/* Orb de luz flutuante */
.hero::after {
  content: '';
  position: absolute;
  width: 700px; height: 450px;
  background: radial-gradient(ellipse, rgba(240,236,228,.025), transparent 70%);
  border-radius: 50%;
  top: 15%; right: 0%;
  pointer-events: none;
  animation: orbDrift 10s ease-in-out infinite;
  filter: blur(60px);
  z-index: 0;
}
@keyframes orbDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(-30px,20px) scale(1.08); }
  66%      { transform: translate(20px,-15px) scale(.93); }
}

/* Eyebrow dot — anel pulsante */
.eyebrow-dot {
  box-shadow: 0 0 0 0 rgba(240,236,228,.4);
  animation: dotRing 2.5s ease infinite;
}
@keyframes dotRing {
  0%  { box-shadow: 0 0 0 0   rgba(240,236,228,.4); }
  70% { box-shadow: 0 0 0 8px rgba(240,236,228,0);  }
  100%{ box-shadow: 0 0 0 0   rgba(240,236,228,0);  }
}

/* Badge — float */
.hero-badge {
  animation: badgeFloat 4s ease-in-out infinite;
}
@keyframes badgeFloat {
  0%,100% { transform: translateY(0);    }
  50%     { transform: translateY(-7px); }
}

/* Badge dot */
.badge-dot {
  animation: dotRing 2s ease infinite;
}

/* Stats — número com underline animado */
.hstat-num {
  position: relative;
  display: inline-block;
}
.hstat-num::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 1px;
  background: var(--white-3);
  transition: width .5s cubic-bezier(.16,1,.3,1);
}
.hero-stats:hover .hstat-num::after { width: 100%; }

/* =============================================
   CARDS "PARA QUEM" — hover rico
   ============================================= */
.pq-card {
  transition:
    background     .3s ease,
    transform      .45s cubic-bezier(.16,1,.3,1),
    box-shadow     .45s ease;
}
.pq-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-card);
}

/* Ícone rotaciona levemente */
.pqc-icon {
  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .3s ease, color .3s ease;
}
.pq-card:hover .pqc-icon {
  transform: rotate(-10deg) scale(1.15);
  border-color: var(--border-2);
  color: var(--white);
}

/* Linha top cresce */
.pq-card::before {
  transition: background .3s ease;
  height: 2px;
}
.pq-card:hover::before {
  background: rgba(240,236,228,.25);
}

/* Título com spacing */
.pq-card h3 {
  transition: letter-spacing .3s ease;
}
.pq-card:hover h3 { letter-spacing: .02em; }

/* =============================================
   SERVIÇOS — sweep + número animado
   ============================================= */
.srv-item {
  border-left: 2px solid transparent;
  transition:
    border-left-color .3s ease,
    padding-left      .4s cubic-bezier(.16,1,.3,1),
    background        .3s ease;
}
.srv-item:hover {
  border-left-color: rgba(240,236,228,.18);
}

.srv-num {
  transition: transform .4s cubic-bezier(.16,1,.3,1), color .2s ease;
}
.srv-item:hover .srv-num {
  transform: scale(1.35) translateX(4px);
  color: var(--white-2);
}

.srv-body h3 {
  transition: letter-spacing .3s ease;
}
.srv-item:hover .srv-body h3 { letter-spacing: .06em; }

.srv-arrow {
  transition: transform .35s cubic-bezier(.16,1,.3,1), color .2s ease;
}
.srv-item:hover .srv-arrow {
  transform: rotate(-45deg) scale(1.3);
  color: var(--white);
}

/* Tags aparecem no hover */
.srv-tags {
  transition: opacity .3s ease;
}
.srv-item:hover .srv-tags span {
  border-color: var(--border-2);
  color: var(--white-2);
}

/* =============================================
   PORTFÓLIO — reveal em camadas
   ============================================= */
.pf-item {
  transition:
    border-color .2s ease,
    transform    .5s cubic-bezier(.16,1,.3,1),
    box-shadow   .5s ease;
}
.pf-item:hover { box-shadow: var(--shadow-hover); }

/* Zoom + saturação na imagem */
.pf-img {
  filter: brightness(.88) saturate(.75);
  transition: transform .7s cubic-bezier(.16,1,.3,1), filter .5s ease;
}
.pf-item:hover .pf-img {
  transform: scale(1.07);
  filter: brightness(1) saturate(1.05);
}

/* Overlay sobe de baixo */
.pf-over {
  transform: translateY(12px);
  transition: opacity .35s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.pf-item:hover .pf-over {
  opacity: 1;
  transform: translateY(0);
}

/* Elementos internos em stagger */
.pf-over-tag {
  transform: translateY(10px); opacity: 0;
  transition: transform .3s ease .05s, opacity .3s ease .05s;
}
.pf-item:hover .pf-over-tag { transform: translateY(0); opacity: 1; }

.pf-over h3 {
  transform: translateY(12px); opacity: 0;
  transition: transform .35s ease .1s, opacity .35s ease .1s;
}
.pf-item:hover .pf-over h3 { transform: translateY(0); opacity: 1; }

.pf-over p {
  transform: translateY(12px); opacity: 0;
  transition: transform .35s ease .15s, opacity .35s ease .15s;
}
.pf-item:hover .pf-over p { transform: translateY(0); opacity: 1; }

.pf-over a {
  transform: translateY(10px); opacity: 0;
  transition: transform .3s ease .2s, opacity .3s ease .2s;
  display: inline-flex; align-items: center; gap: 6px;
}
.pf-item:hover .pf-over a { transform: translateY(0); opacity: 1; }

/* Arrow no link */
.pf-over a svg,
.pf-over a::after {
  transition: transform .25s ease;
}
.pf-over a:hover::after { transform: translate(4px,-4px); }

/* Meta hover */
.pf-meta {
  transition: background .25s ease;
}
.pf-item:hover .pf-meta {
  background: rgba(240,236,228,.03);
}

/* CTA do portfólio */
.pf-cta-link {
  transition: color .2s ease;
}
.pfc-arrow {
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.pf-cta-link:hover .pfc-arrow {
  transform: translate(10px,-10px);
}

/* =============================================
   PROCESSO — efeito sweep + número
   ============================================= */
.proc-item {
  position: relative;
  transition: padding-left .4s cubic-bezier(.16,1,.3,1);
  overflow: hidden;
}
.proc-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 100%;
  background: var(--white-4);
  transition: width .4s cubic-bezier(.16,1,.3,1);
  z-index: 0;
}
.proc-item:hover::before { width: 100%; }
.proc-item:hover { padding-left: 16px; }

.proc-n {
  transition: color .3s ease, transform .4s cubic-bezier(.16,1,.3,1);
  position: relative; z-index: 1;
}
.proc-item:hover .proc-n {
  color: rgba(240,236,228,.1);
  transform: scale(1.04) translateX(6px);
}
.proc-item h3,
.proc-item p { position: relative; z-index: 1; }
.proc-item h3 {
  transition: letter-spacing .3s ease;
}
.proc-item:hover h3 { letter-spacing: .05em; }

/* =============================================
   FAQ — refinamentos
   ============================================= */
.faq-item {
  border-left: 2px solid transparent;
  transition: border-left-color .3s ease, background .25s ease;
}
.faq-item[open] {
  border-left-color: rgba(240,236,228,.18);
  background: var(--white-5);
}
.faq-item:hover:not([open]) { background: rgba(240,236,228,.02); }

.faq-q { transition: color .2s ease, padding-left .3s ease; }
.faq-item[open] .faq-q {
  padding-left: 12px;
  color: var(--white);
}

.faq-a {
  animation: faqSlide .35s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes faqSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =============================================
   CONTATO — cards deslizam
   ============================================= */
.ct-card {
  transition:
    border-color .25s ease,
    background   .25s ease,
    transform    .4s cubic-bezier(.16,1,.3,1),
    box-shadow   .4s ease;
}
.ct-card:not(.static):hover {
  transform: translateX(8px);
  box-shadow: var(--shadow-card);
}

.ctc-icon {
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .25s ease, color .25s ease;
}
.ct-card:hover .ctc-icon {
  transform: rotate(-10deg) scale(1.1);
  border-color: var(--border-2);
  color: var(--white);
}

.ctc-val { transition: color .2s ease; }
.ct-card:hover .ctc-val { color: var(--white); }

/* =============================================
   CTA STRIP — hover atmosfera
   ============================================= */
.cta-strip {
  position: relative; overflow: hidden;
}
.cta-strip::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(240,236,228,.025);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease;
}
.cta-strip:hover::before { transform: scaleX(1); }

/* Separador que gira */
.ctas-sep {
  display: inline-block;
  animation: sepSpin 10s linear infinite;
}
@keyframes sepSpin {
  to { transform: rotate(360deg); }
}

/* =============================================
   SCROLL PROGRESS BAR
   ============================================= */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%; height: 2px;
  background: var(--white);
  z-index: 2000;
  opacity: .5;
  transition: width .08s linear;
  pointer-events: none;
}

/* =============================================
   FOOTER — links com slide
   ============================================= */
.ft-top nav a {
  display: inline-block;
  transition: color .2s ease, transform .25s ease;
}
.ft-top nav a:hover {
  color: var(--white-2);
  transform: translateX(5px);
}

/* =============================================
   SECTION TAG — linha animada
   ============================================= */
.sec-tag::before {
  transition: width .4s cubic-bezier(.16,1,.3,1);
}
.sec-tag:hover::before { width: 48px; }

/* =============================================
   SOBRE — deco parallax
   ============================================= */
.sobre-deco {
  will-change: transform;
  transition: transform .1s linear;
}

/* =============================================
   MOBILE — states ativos e sem hover pesado
   ============================================= */
@media (max-width: 768px) {
  /* Remove efeitos de hover pesados */
  .hero::after                { display: none; }
  .srv-item:hover             { padding-left: 0; }
  .srv-item::before           { display: none; }
  .proc-item:hover            { padding-left: 0; }
  .proc-item::before          { display: none; }
  .hero-badge                 { animation: none; }
  .ctas-sep                   { animation: none; }
  .pf-img                     { filter: brightness(1) saturate(1); }

  /* Overlay sempre visível */
  .pf-over {
    opacity: 1 !important;
    transform: none !important;
    background: linear-gradient(to top, rgba(8,8,8,.9) 0%, rgba(8,8,8,.3) 50%, transparent 100%) !important;
    backdrop-filter: none !important;
  }
  .pf-over-tag, .pf-over h3, .pf-over p, .pf-over a {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Active states touch */
  .btn-primary:active  { transform: scale(.96) !important; }
  .pq-card:active      { transform: scale(.98); }
  .pf-item:active      { transform: scale(.99); }
  .ct-card:not(.static):active { transform: translateX(4px) scale(.99); }
}

/* =============================================
   REDUCED MOTION
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .scroll-progress { transition: none; }
}