/* NVR Studios — FX pack v1.0
   Transiciones de página · reveals · cursor VER · grano cinematográfico */

/* Entrada/salida de página */
@keyframes fxPageIn { from { opacity:0 } to { opacity:1 } }
body { animation: fxPageIn 0.45s ease both }
body.fx-out { opacity:0 !important; transition: opacity 0.2s ease }

/* Grano cinematográfico (textura de productora) */
body::after {
  content: "";
  position: fixed;
  inset: -120px;
  z-index: 2147482000;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
  animation: fxGrain 8s steps(10) infinite;
}
@keyframes fxGrain {
  0%   { transform: translate(0,0) }
  10%  { transform: translate(-35px,12px) }
  20%  { transform: translate(22px,-28px) }
  30%  { transform: translate(-18px,34px) }
  40%  { transform: translate(30px,8px) }
  50%  { transform: translate(-26px,-20px) }
  60%  { transform: translate(14px,26px) }
  70%  { transform: translate(-32px,-10px) }
  80%  { transform: translate(26px,-32px) }
  90%  { transform: translate(-12px,18px) }
  100% { transform: translate(0,0) }
}

/* Reveals genéricos */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2,0.8,0.2,1);
}
[data-reveal].in-view { opacity: 1; transform: none }

/* Cursor "VER ↗" sobre piezas del portafolio */
.fx-cursor {
  position: fixed;
  left: 0; top: 0;
  z-index: 2147483000;
  width: 86px; height: 86px;
  border-radius: 50%;
  background: var(--papaya);
  color: var(--graphite);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: 0.06em;
  pointer-events: none;
  transform: translate(-50%,-50%) scale(0);
  transition: transform 0.28s cubic-bezier(0.2,0.8,0.2,1);
  will-change: left, top;
}
.fx-cursor.on { transform: translate(-50%,-50%) scale(1) }
@media (pointer: fine) {
  [data-items] { cursor: none }
  [data-items] a, [data-items] button { cursor: none }
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none }
  body::after { animation: none }
  [data-reveal] { opacity: 1; transform: none; transition: none }
  .fx-cursor { display: none }
}

/* ── Sistema de botones (pill, coherente con el nav) ── */
.nav-cta, .cta-button, .form-submit {
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.nav-cta { padding: 12px 24px !important }
.cta-button { padding: 20px 34px !important }
.btn-arr { width: 13px; height: 13px; flex: none; transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1) }
a:hover > .btn-arr, button:hover > .btn-arr { transform: translate(2px,-2px) }

/* ── Footer ── */
.foot2 { background: var(--carbon); border-top: 1px solid var(--papaya); padding: 72px 48px 0 }
.foot2-top { display: grid; grid-template-columns: 1.4fr 1fr 0.8fr 1.2fr; gap: 48px; padding-bottom: 56px }
.foot2-brand .foot-mark { width: 64px; height: 30px; margin-bottom: 20px; display: block }
.foot2-brand p { font-family: 'Helvetica Neue','Inter',Arial,sans-serif; font-size: 14px; line-height: 1.6; color: var(--aluminum); max-width: 280px }
.foot2-col { display: flex; flex-direction: column; gap: 12px }
.foot2-col h4 { font-family: 'Courier New',monospace; font-size: 10px; letter-spacing: 0.22em; color: var(--papaya); text-transform: uppercase; margin-bottom: 6px; font-weight: 400 }
.foot2-col a, .foot2-col span { font-family: 'Helvetica Neue','Inter',Arial,sans-serif; font-size: 14px; color: var(--aluminum); text-decoration: none; transition: color 0.25s ease; width: fit-content }
.foot2-col a:hover { color: var(--white) }
.foot2-social { display: flex; gap: 16px; margin-top: 8px }
.foot2-bottom { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; border-top: 0.5px solid var(--iron); padding: 22px 0; font-family: 'Courier New',monospace; font-size: 10px; letter-spacing: 0.2em; color: var(--aluminum); text-transform: uppercase }
.foot2-bottom a { color: var(--aluminum); text-decoration: none; transition: color 0.25s ease }
.foot2-bottom a:hover { color: var(--papaya) }
@media (max-width: 900px) {
  .foot2 { padding: 56px 24px 0; margin-bottom: 74px }
  .foot2-top { grid-template-columns: 1fr 1fr; gap: 36px }
  .foot2-brand { grid-column: 1/-1 }
}

/* ── Contadores ── */
[data-count] { font-variant-numeric: tabular-nums }

/* Lenis requiere scroll-behavior nativo desactivado (él hace el smoothing) */
html.lenis { scroll-behavior: auto !important }
.lenis.lenis-smooth { scroll-behavior: auto !important }

/* ── Hero geométrico en headers internos ── */
@keyframes shapeIn {
  from { opacity:0; transform:translateY(-150px) rotate(calc(var(--r) - 15deg)) }
  to   { opacity:1; transform:translateY(0) rotate(var(--r)) }
}
@keyframes shapeFloat { 0%,100% { transform:translateY(0) } 50% { transform:translateY(15px) } }
.service-head, .page-head { position:relative; overflow:hidden; padding-top:90px !important; padding-bottom:84px !important }
.service-head > *, .page-head > * { position:relative; z-index:2 }
.head-shapes { position:absolute; inset:0; z-index:0 !important; pointer-events:none }
.head-shapes .hveil { position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,122,26,0.05), transparent 45%, rgba(184,79,14,0.05)); filter:blur(60px) }
.head-shapes .hshape { position:absolute; opacity:0; animation:shapeIn 2.4s cubic-bezier(0.23,0.86,0.39,0.96) var(--d,0s) forwards }
.head-shapes .hshape .hfloat { width:var(--w); height:var(--h); animation:shapeFloat 12s ease-in-out infinite }
.head-shapes .hshape .hbar {
  width:100%; height:100%; border-radius:999px; position:relative;
  background:linear-gradient(to right, var(--c), transparent);
  border:1.5px solid rgba(255,255,255,0.13);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  box-shadow:0 8px 32px 0 rgba(255,255,255,0.07);
}
.head-shapes .hshape .hbar::after { content:""; position:absolute; inset:0; border-radius:999px; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.16), transparent 70%) }
.head-shapes .h1s { --w:480px; --h:110px; --r:12deg;  --d:0.2s; --c:rgba(255,122,26,0.13);  right:-8%; top:12% }
.head-shapes .h2s { --w:340px; --h:84px;  --r:-14deg; --d:0.45s; --c:rgba(184,79,14,0.15);  left:-6%;  bottom:8% }
.head-shapes .h3s { --w:200px; --h:56px;  --r:18deg;  --d:0.6s;  --c:rgba(255,255,255,0.06); right:22%; bottom:14% }
@media (max-width:900px) {
  .head-shapes .h1s { --w:260px; --h:64px }
  .head-shapes .h2s { --w:200px; --h:52px }
  .head-shapes .h3s { display:none }
}
@media (prefers-reduced-motion: reduce) {
  .head-shapes .hshape { animation:none; opacity:1; transform:rotate(var(--r)) }
  .head-shapes .hshape .hfloat { animation:none }
}