/* ==========================================================================
   PAXION — BASE
   Reset, tipografia base, textura de fundo, grid técnico, cursor custom.
   ========================================================================== */

*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html, body{ background:var(--bg); }

body{
  color:var(--text);
  font-family:var(--font-sans);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
}

a{ color:inherit; text-decoration:none; }
ul, ol{ list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; }
svg{ display:block; }

::selection{ background:var(--accent); color:var(--bg-deep); }

.mono{ font-family:var(--font-mono); }

/* ---------------------------------------------------------------------- */
/* Layout containers                                                      */
/* ---------------------------------------------------------------------- */
.wrap{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); position:relative; }

.section{ padding:var(--space-8) 0; position:relative; }
.section-tight{ padding:var(--space-7) 0; }

/* ---------------------------------------------------------------------- */
/* Global background layers: noise texture + faint grid                    */
/* ---------------------------------------------------------------------- */
.bg-field{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 900px 600px at 15% 0%, rgba(76,224,179,.06), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 20%, rgba(84,214,255,.05), transparent 60%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 40%, var(--bg) 100%);
}

.bg-grid{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(var(--line) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(ellipse 100% 90% at 50% 0%, #000 40%, transparent 92%);
}

.bg-texture{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.6; mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.02) 0px,
    rgba(255,255,255,0.02) 1px,
    transparent 1px,
    transparent 10px
  );
}

/* ---------------------------------------------------------------------- */
/* Technical corner marks — used on frames, images, hero, sections         */
/* ---------------------------------------------------------------------- */
.corners{ position:relative; }
.corners::before, .corners::after,
.corners .c-tl, .corners .c-tr, .corners .c-bl, .corners .c-br{ position:absolute; width:14px; height:14px; pointer-events:none; }
.corners::before{ content:''; top:-1px; left:-1px; border-top:1px solid var(--line-strong); border-left:1px solid var(--line-strong); }
.corners::after{ content:''; bottom:-1px; right:-1px; border-bottom:1px solid var(--line-strong); border-right:1px solid var(--line-strong); }
.corners .c-tr{ top:-1px; right:-1px; border-top:1px solid var(--line-strong); border-right:1px solid var(--line-strong); }
.corners .c-bl{ bottom:-1px; left:-1px; border-bottom:1px solid var(--line-strong); border-left:1px solid var(--line-strong); }

/* ---------------------------------------------------------------------- */
/* Section index / labels                                                  */
/* ---------------------------------------------------------------------- */
.index-label{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:12px; margin-bottom:22px;
}
.index-label::before{ content:''; width:28px; height:1px; background:var(--accent); display:inline-block; }
.index-label .dim{ color:var(--text-faint); }

.rule{ height:1px; width:100%; background:var(--line); }
.rule-strong{ height:1px; width:100%; background:var(--line-strong); }

h1, h2, h3, h4{ font-weight:500; letter-spacing:-0.01em; line-height:1.08; }

.eyebrow-x{ color:var(--accent); }

/* ---------------------------------------------------------------------- */
/* Custom cursor (desktop only)                                            */
/* ---------------------------------------------------------------------- */
.px-cursor{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:16px; height:16px; border-radius:50%; border:1px solid var(--accent);
  transform:translate(-50%,-50%); mix-blend-mode:difference;
  transition:width var(--duration-ui) var(--ease-out), height var(--duration-ui) var(--ease-out),
             border-color var(--duration-ui) var(--ease-out), background var(--duration-ui) var(--ease-out);
  display:none;
}
.px-cursor.is-active{ display:block; }
.px-cursor.is-link{ width:44px; height:44px; background:rgba(76,224,179,.1); }
.px-cursor.is-view{
  width:72px; height:72px; background:var(--accent); mix-blend-mode:normal;
  display:flex; align-items:center; justify-content:center;
  color:var(--bg-deep); font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
}
.px-cursor.is-view::after{ content:'VIEW'; }

@media (hover:none), (pointer:coarse){
  .px-cursor{ display:none !important; }
}