/*
 * front-page.css — PH Studio
 * Estilos de la portada, portados 1:1 del mockup v8 aprobado
 * (mockups/2026-07-15-studio-home-mockup-v8-logo-literata.html).
 * El bloque :root vive en tokens.css (mismos valores); aquí no se repite.
 * Solo se carga en la portada (ver inc/enqueue.php, is_front_page()).
 */

*{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:150px 0; position:relative; }

/* ambient gradient canvas + grain, fixed behind everything */
#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%);} }

/* preloader */
#preloader{
  position:fixed; inset:0; z-index:3000; background:var(--bg);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
}
.pre-logo{ font-family:'Fraunces'; font-size:15px; letter-spacing:0.3em; color:var(--ink-dim); margin-bottom:18px; text-transform:uppercase; }
.pre-count{ font-family:'Fraunces'; font-size:clamp(60px,12vw,140px); font-weight:300; font-style:italic; display:flex; }
.pre-count span{ color:var(--accent); font-style:normal; }
.pre-bar{ width:220px; height:1px; background:var(--line); margin-top:26px; position:relative; overflow:hidden; }
.pre-bar i{ position:absolute; left:0; top:0; height:100%; width:0%; background:var(--accent); }
.pre-curtain{ position:fixed; inset:0; background:var(--bg); z-index:2999; transform:translateY(0); }

/* 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{ font-family:'Fraunces'; font-weight:600; font-size:19px; }
.logo i{ color:var(--accent); font-style:italic; }
.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 ghost 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); } }

/* hero */
.hero{ min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-top:120px; position:relative; overflow:hidden; z-index:0; }
#heroShaderMount{ position:absolute; inset:0; z-index:0; }
#heroShaderMount canvas{ display:block; width:100%; height:100%; }
#heroShaderFallback{ position:absolute; inset:0; z-index:0; background:linear-gradient(160deg, rgba(0,70,80,0.55), rgba(0,190,170,0.32) 55%, rgba(123,84,230,0.22) 100%); }
#heroGrid{ position:absolute; inset:0; z-index:1; mix-blend-mode:screen; opacity:0.55; }
.hero::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(11,10,12,0) 30%, rgba(11,10,12,0.65) 100%);
}
.hero .wrap{ z-index:3; }
.headline{ font-size:clamp(42px,7.4vw,100px); line-height:0.98; max-width:1150px; font-weight:500; }
.headline em{ font-style:italic; color:var(--accent); font-weight:500; }
.headline .word{ display:inline-block; overflow:hidden; vertical-align:top; }
.headline .word span{ display:inline-block; transform:translateY(115%); }
.sub{ max-width:540px; font-size:17px; color:#fff; margin-top:30px; line-height:1.65; }
.hero-cta{ margin-top:46px; }
.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;
}
.hero .btn-primary{ color:#fff; }
.stats{ display:flex; gap:44px; margin-top:90px; flex-wrap:wrap; }
.stat .num{ font-family:'Fraunces'; font-size:38px; font-style:italic; font-weight:500; }
.stat .label{ font-size:11px; color:var(--ink-dim); margin-top:6px; text-transform:uppercase; letter-spacing:0.04em; }

@keyframes scrollx{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

/* giant background type */
.bg-type{
  position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%);
  font-family:'Fraunces'; font-style:italic; font-weight:300; color:transparent;
  -webkit-text-stroke:1px rgba(240,237,231,0.06); font-size:clamp(120px,19vw,300px);
  white-space:nowrap; z-index:0; pointer-events:none; animation:scrollx 40s linear infinite;
}

.section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:60px; flex-wrap:wrap; gap:20px; }
.section-head h2{ font-size:clamp(30px,4vw,50px); }
.section-head p{ max-width:340px; color:var(--ink-dim); font-size:14px; line-height:1.65; }

.services-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.service-card{ background:rgba(11,10,12,0.55); backdrop-filter:blur(6px); padding:42px; position:relative; transition:background .4s ease; }
.service-card:hover{ background:rgba(255,90,60,0.06); }
.service-card .num{ font-family:'Space Mono'; color:var(--ink-dim); font-size:12px; }
.service-card h3{ font-size:25px; margin:20px 0 12px; font-weight:500; }
.service-card p{ color:var(--ink-dim); font-size:14px; line-height:1.65; max-width:380px; }
.service-card .arrow{ position:absolute; top:42px; right:42px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:transform .35s ease, background .35s ease, border-color .35s ease; }
.service-card:hover .arrow{ transform:rotate(45deg); background:var(--accent); border-color:var(--accent); }

.portfolio-list{ display:flex; flex-direction:column; position:relative; z-index:2; }
.project-row{ display:grid; grid-template-columns:70px 1fr 260px 120px; align-items:center; padding:36px 0; border-bottom:1px solid var(--line); cursor:pointer; transition:padding-left .4s ease; }
.project-row:hover{ padding-left:22px; }
.project-row .index{ font-family:'Space Mono'; color:var(--ink-dim); font-size:12px; }
.project-row h3{ font-size:clamp(24px,3.2vw,38px); font-weight:500; transition:color .3s ease; }
.project-row:hover h3{ color:var(--accent); }
.project-row .client{ color:var(--ink-dim); font-size:13px; }
.project-row .year{ font-family:'Space Mono'; color:var(--ink-dim); font-size:12px; text-align:right; }
.project-preview{
  position:fixed; width:300px; height:200px; pointer-events:none; z-index:400; top:0; left:0;
  clip-path:circle(0% at 50% 50%); transition:clip-path .5s cubic-bezier(.22,1,.36,1);
  box-shadow:0 40px 70px rgba(0,0,0,0.5); border-radius:6px; overflow:hidden;
}
.project-preview.active{ clip-path:circle(75% at 50% 50%); }
.project-preview img{ width:100%; height:100%; object-fit:cover; transform:scale(1.15); transition:transform .6s ease; }

.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; position:relative; z-index:2; }
.process-step .num{ font-family:'Fraunces'; font-size:42px; font-style:italic; color:var(--accent); }
.process-step h3{ font-size:17px; margin:16px 0 8px; font-weight:500; }
.process-step p{ color:var(--ink-dim); font-size:13px; line-height:1.6; }

.cta-final{ background:var(--paper); color:#0B0A0C; border-radius:32px; padding:100px 60px; text-align:center; position:relative; overflow:hidden; z-index:2; }
.cta-final h2{ font-size:clamp(34px,5.2vw,68px); max-width:780px; margin:0 auto 34px; color:#0B0A0C; }
.cta-final .btn-primary{ background:#0B0A0C; color:var(--paper); }

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); }

.reveal{ opacity:0; transform:translateY(36px); }

@media (max-width:860px){
  .services-grid{ grid-template-columns:1fr; }
  .process-grid{ grid-template-columns:repeat(2,1fr); }
  .project-row{ grid-template-columns:36px 1fr; row-gap:6px; }
  .project-row .client, .project-row .year{ grid-column:2; font-size:11px; }
  .project-preview{ display:none; }
  .bg-type{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .bg-type, .grain{ animation:none; }
  .headline .word span{ transform:none; }
  .reveal{ opacity:1; transform:none; }
  #preloader, .pre-curtain{ display:none; }
}