/*
 * base.css — PH Studio
 * Chrome compartido (nav, footer, cursor, ambient) + estilos de páginas internas
 * (ficha de proyecto). Se carga solo fuera de la portada (ver inc/enqueue.php).
 * En la home, front-page.css cubre todo esto.
 */

*{box-sizing:border-box; margin:0; padding:0;}
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--ink); font-family:'Inter', sans-serif;
  overflow-x:hidden;
}
::selection{ background:var(--accent); color:#0B0A0C; }
h1,h2,h3,.display{ font-family:'Fraunces', serif; font-weight:500; letter-spacing:-0.01em; }
.mono{ font-family:'Space Mono', monospace; letter-spacing:0.04em; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1240px; margin:0 auto; padding:0 32px; position:relative; z-index:2; }
section{ padding:120px 0; position:relative; }

/* ambient + grain */
#ambient{ position:fixed; inset:0; z-index:0; filter:blur(60px) saturate(1.3); opacity:0.85; }
.ambient-fade{ position:fixed; inset:0; z-index:0; background:linear-gradient(180deg, rgba(11,10,12,0.2), rgba(11,10,12,0.85) 60%, var(--bg) 100%); }
.grain{
  position:fixed; inset:-100px; z-index:3; pointer-events:none; opacity:0.018; mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grain 0.8s steps(4) infinite;
}
@keyframes grain{ 0%,100%{transform:translate(0,0);} 25%{transform:translate(-2%,1%);} 50%{transform:translate(1%,-2%);} 75%{transform:translate(-1%,-1%);} }

/* nav */
header{ position:fixed; top:0; left:0; width:100%; z-index:500; padding:26px 0; }
nav{ display:flex; align-items:center; justify-content:space-between; }
.logo-mark{ display:flex; align-items:center; }
.logo-mark svg{ height:22px; width:auto; display:block; }
footer .logo-mark svg{ height:20px; }
.navlinks{ display:flex; gap:34px; font-size:13px; }
.navlinks a{ position:relative; }
.navlinks a::after{ content:''; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:var(--accent); transition:width .3s ease; }
.navlinks a:hover::after{ width:100%; }
.nav-meta{ font-size:11px; color:#fff; text-align:right; }
.nav-right{ display:flex; align-items:center; gap:18px; }
.lang-switch{ display:flex; gap:9px; font-size:11px; }
.lang-opt{ color:var(--ink-dim); letter-spacing:0.06em; transition:color .25s ease; }
.lang-opt:hover{ color:var(--ink); }
.lang-opt.is-active{ color:var(--accent); }

/* kinetic tag */
.tag-kinetic{ position:relative; display:inline-block; font-size:12px; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.tag-kinetic::after{
  content:attr(data-text); position:absolute; left:2px; top:1px; color:var(--accent-2);
  opacity:0.55; z-index:-1; animation:ghost 4s ease-in-out infinite;
}
@keyframes ghost{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(3px,-2px); } }

.btn-primary{
  position:relative; display:inline-flex; align-items:center; gap:10px; background:var(--accent);
  color:#0B0A0C; padding:17px 32px; border-radius:100px; font-weight:600; font-size:14px;
}

/* footer */
footer{ padding:60px 0 40px; border-top:1px solid var(--line); position:relative; z-index:2; }
.foot-grid{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; }
.foot-links{ display:flex; gap:24px; font-size:13px; color:var(--ink-dim); }

/* en páginas internas los .reveal quedan visibles sin depender de scroll-JS */
.reveal{ opacity:1; transform:none; }

/* ===== Ficha de proyecto (single-proyecto.php) ===== */
.project-hero{ padding:180px 0 60px; position:relative; z-index:2; }
.project-back{ display:inline-block; font-size:13px; color:var(--ink-dim); margin-bottom:34px; }
.project-back:hover{ color:var(--accent); }
.project-title{ font-size:clamp(38px,6vw,84px); line-height:1.0; max-width:1100px; }
.project-metaline{ display:flex; gap:24px; flex-wrap:wrap; margin-top:22px; font-size:13px; color:var(--ink-dim); }
.project-metaline .k{ color:var(--accent); }
.project-cover{ margin:56px 0; border-radius:16px; overflow:hidden; border:1px solid var(--line); }
.project-cover img{ width:100%; height:auto; display:block; }
.project-body{ max-width:760px; margin:0 auto; }
.project-lead{ font-size:20px; line-height:1.6; color:var(--ink); margin-bottom:32px; }
.project-prose{ font-size:16px; line-height:1.8; color:var(--ink-dim); }
.project-prose p{ margin-bottom:20px; }
.project-cta-row{ margin-top:44px; }
.project-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:56px auto; max-width:1000px; }
.project-gallery img{ width:100%; height:100%; object-fit:cover; border-radius:10px; border:1px solid var(--line); }
.project-testimonial{ max-width:760px; margin:60px auto 0; padding:36px; border-left:2px solid var(--accent); background:rgba(240,237,231,0.03); border-radius:0 12px 12px 0; }
.project-testimonial p{ font-family:'Fraunces', serif; font-style:italic; font-size:22px; line-height:1.5; }
.project-testimonial .author{ margin-top:16px; font-size:13px; color:var(--ink-dim); font-style:normal; }
.project-empty{ color:var(--ink-dim); font-size:15px; }

@media (max-width:860px){
  .project-gallery{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  .grain{ animation:none; }
}