/* fx.css — capa visual compartida (fondo animado, animaciones, cursor, CTA)
   para páginas secundarias. Depende de las variables :root de cada página. */

/* ---- grain ---- */
.grain{position:fixed;inset:0;z-index:120;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---- cursor personalizado ---- */
#cursor,#cursor-ring{position:fixed;top:0;left:0;z-index:150;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%)}
#cursor{width:6px;height:6px;background:var(--champagne)}
#cursor-ring{width:36px;height:36px;border:1px solid rgba(195,162,110,.5);transition:width .35s var(--ease),height .35s var(--ease),border-color .35s}
body.cursor-hover #cursor-ring{width:64px;height:64px;border-color:var(--champagne)}
@media(pointer:coarse){#cursor,#cursor-ring{display:none}}

/* ---- fondo animado en el hero ---- */
.page-hero,.post-hero,.legal-hero{position:relative;overflow:hidden}
.page-hero #gl,.post-hero #gl,.legal-hero #gl{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.page-hero::after,.post-hero::after,.legal-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(125% 105% at 50% 118%,rgba(10,12,15,.92) 0%,rgba(10,12,15,.3) 46%,rgba(10,12,15,.72) 100%)}
.page-hero > .wrap,.post-hero > .wrap,.legal-hero > .lh-wrap{position:relative;z-index:2}

/* ---- sistema de reveal ---- */
.line-mask{display:block;overflow:hidden}
.line-mask > span{display:block;transform:translateY(112%);transition:transform 1.15s var(--ease)}
.in .line-mask > span{transform:translateY(0)}
.fade-up{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.in .fade-up{opacity:1;transform:none}
.scale-in{opacity:0;transform:scale(.96);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.in .scale-in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.18s}.d3{transition-delay:.3s}.d4{transition-delay:.42s}.d5{transition-delay:.54s}

/* ---- botón de contacto en el header ---- */
.nav-cta{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--champagne);color:var(--obsidian);border:1px solid var(--champagne);
  padding:8px 18px;border-radius:100px;text-decoration:none;transition:background .25s,color .25s;white-space:nowrap}
.nav-cta:hover{background:transparent;color:var(--champagne)}
.m-only{display:none}
@media(max-width:820px){.nav-cta{display:none}.nav-links .m-only{display:block}}

@media (prefers-reduced-motion: reduce){
  #cursor,#cursor-ring{display:none!important}
  .line-mask > span,.fade-up,.scale-in{transform:none;opacity:1}
}