/*
Theme Name: Phantom Grid
Theme URI: https://phantom.land
Author: Tu Nombre
Author URI: https://tudominio.com
Description: Homepage con grid infinito estilo Phantom.land. Posts dinámicos via REST API, imagen destacada como preview, categorías como tags, click abre overlay con contenido completo.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: phantom-grid
Tags: full-width-template, custom-background, threejs, interactive

== INSTALACIÓN RÁPIDA ==

1. Sube esta carpeta a /wp-content/themes/phantom-grid/
2. Activa el tema en Apariencia → Temas
3. Ve a Ajustes → Lectura → "Tu portada muestra" → Página estática
4. Asigna cualquier página como "Portada"
5. WordPress usará front-page.php automáticamente

== ESTRUCTURA DE ARCHIVOS ==

phantom-grid/
├── style.css          ← Este archivo (requerido por WP)
├── functions.php      ← Soporte de funciones del tema
├── front-page.php     ← Template del grid (home)
├── header.php         ← Header con nav (personalizable)
├── footer.php         ← Footer mínimo
└── index.php          ← Fallback requerido por WP

== PERSONALIZACIÓN ==

En Apariencia → Personalizar puedes ajustar:
- phantom_header_height : Alto del header en px (default: 70)
- phantom_posts_per_page: Cuántos posts cargar (default: 24)

== REQUISITOS ==

- WordPress 6.0+
- PHP 7.4+
- Posts con imagen destacada asignada
- REST API habilitada (por defecto en WP)
*/

/* ── Base reset ── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background: #080808;
  color: #f0ece4;
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Header base ── */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  background: rgba(8, 8, 8, 0.35);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  height: 70px;
  display: flex;
  align-items: center;
  padding: 0 2rem;
  justify-content: space-between;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* nav como flex-item dentro de .header-right */
.header-right .main-navigation {
  display: flex;
  align-items: center;
}

.site-branding a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}

/* ── Audio button (header) ── */
.ph-hdr-audio-btn {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  outline: none;
  padding: 0;
  color: rgba(255,255,255,.38);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s;
  flex-shrink: 0;
}
.ph-hdr-audio-btn:hover        { color: #fff; }
.ph-hdr-audio-btn.on           { color: rgba(255,255,255,.75); }
.ph-hdr-audio-btn.on:hover     { color: #fff; }

/* Ecualizador tipo Winamp */
.ph-hdr-bars {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 14px;
  flex-shrink: 0;
}
.ph-hdr-bars span {
  display: block;
  width: 2.5px;
  border-radius: 1px 1px 0 0;
  background: currentColor;
  transform-origin: bottom;
  animation-timing-function: steps(6, end); /* efecto pixelado retro */
  animation-iteration-count: infinite;
  animation-duration: var(--aud-dur, 0.72s);
}
/* alturas base distintas → cada barra tiene su "personalidad" */
.ph-hdr-bars span:nth-child(1) { height: 5px;  animation-name: eq1; animation-delay: 0s }
.ph-hdr-bars span:nth-child(2) { height: 12px; animation-name: eq2; animation-delay:.09s }
.ph-hdr-bars span:nth-child(3) { height: 8px;  animation-name: eq3; animation-delay:.18s }
.ph-hdr-bars span:nth-child(4) { height: 14px; animation-name: eq1; animation-delay:.04s }
.ph-hdr-bars span:nth-child(5) { height: 6px;  animation-name: eq2; animation-delay:.13s }

@keyframes eq1 { 0%{height:2px} 25%{height:10px} 50%{height:5px}  75%{height:13px} 100%{height:2px} }
@keyframes eq2 { 0%{height:8px} 20%{height:3px}  50%{height:14px} 80%{height:5px}  100%{height:8px} }
@keyframes eq3 { 0%{height:12px}30%{height:4px}  60%{height:9px}  90%{height:14px} 100%{height:12px}}

/* OFF — barras planas, opacidad baja */
.ph-hdr-audio-btn:not(.on) .ph-hdr-bars span {
  animation: none;
  height: 3px !important;
  opacity: .35;
}

/* Nav */
.main-navigation ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 2rem;
}

.main-navigation a {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  transition: color .2s;
}

.main-navigation a:hover {
  color: #fff;
}

/* ── Hamburger button ── */
.ph-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  flex-shrink: 0;
}
.ph-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: rgba(255,255,255,.65);
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.ph-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.ph-hamburger.open span:nth-child(2) { opacity: 0; }
.ph-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Nav overlay móvil ── */
#ph-nav-overlay {
  display: none;
}

@media(max-width:768px){
  .header-right .main-navigation { display: none; }
  #ph-hdr-audio    { display: none; }
  .ph-hamburger    { display: flex; }

  #ph-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(8,8,8,.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 290;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #ph-nav-overlay.open {
    opacity: 1;
    pointer-events: all;
  }
  .ph-nav-mob-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.2rem;
  }
  .ph-nav-mob-list a {
    font-family: 'DM Sans', sans-serif;
    font-size: 26px;
    font-weight: 300;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
    text-decoration: none;
    transition: color .2s;
  }
  .ph-nav-mob-list a:hover,
  .ph-nav-mob-list .current-menu-item a { color: #fff; }
}

/* Footer */
#site-footer {
  background: #080808;
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 2rem;
  text-align: center;
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(255,255,255,.2);
  text-transform: uppercase;
}