/*
Theme Name: Studio143 Minimal Portfolio v2
Theme URI: https://example.com/studio143
Author: Studio143
Author URI: https://example.com
Description: Thème WordPress portfolio minimaliste sur-mesure utilisant GSAP + Barba.js. Pages : accueil, projets, contact, pop-up infos. Version 2 avec transitions SPA.
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: studio143
*/

@font-face {
  font-family: 'PP Fraktion Mono';
  src: url('https://lucaswilhelm.b-cdn.net/fonts/PPFraktionMono-Regular.woff2') format('woff2'),
       url('https://lucaswilhelm.b-cdn.net/fonts/PPFraktionMono-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0e0f11;
  --text: #e8eaed;
  --muted: #8b8d93;
  --card: #16181d;
  --radius: 12px;
  --font: 'PP Fraktion Mono', 'Suisse Intl', 'Neue Haas Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
*, input, textarea, button, select { font-family: var(--font); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga","calt","ss01";
}
html, body.home { height: 100%; overflow: hidden; }
/* Sizing/padding pinned to the container so it survives the body.className swap
   that Barba does mid-transition (otherwise the outgoing main snaps to default
   padding:3rem + auto-height the instant the slide starts). */
main[data-barba-namespace="home"] { height: 100vh; height: 100dvh; padding: 0; }
main[data-barba-namespace="infos"] { padding: 0; margin: 0; max-width: none; }

a { color: inherit; text-decoration: none; }

main { padding: 3rem clamp(1.5rem, 4vw, 3rem); margin: 0; }

/* Barba slide transition (home ↔ projects).
   With sync:true both containers are in the DOM at once — stack them on top of each other
   so they slide laterally instead of one above the other. */
body.is-sliding { overflow: hidden; }
body.is-sliding [data-barba="container"] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  will-change: transform;
}

.button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1.1rem; border: none; background: none; color: var(--text); font-size: 0.92rem; cursor: pointer; transition: transform 0.15s ease, opacity 0.15s ease; }
.button:hover { transform: translateY(-2px); opacity: 1; }

.figure { margin: 2rem 0; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,0.08); }
.figure img { display: block; width: 100%; height: auto; }

.info-pop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: #fff; z-index: 200; display: none; overflow-y: scroll; -webkit-overflow-scrolling: touch; overscroll-behavior: none; }
.info-pop.visible { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; padding: 0; align-content: center; }
.info-pop p { color: #ccc; }
.info-pop .close { grid-column: 1 / -1; justify-self: center; background: none; border: none; color: #fff; cursor: pointer; font-size: 12px; text-transform: uppercase; z-index: 201; margin-bottom: 0.858rem; }
.info-pop .close .lw-underline { background: #fff; }
.info-pop .close:hover .lw-underline { transform: scaleX(1); }

.wp-block-image img { border-radius: var(--radius); width: 100%; height: auto; }

/* ─── Splash preloader ───
   Sits above everything until the JS preloader finishes warming Barba's HTML
   cache and the browser's HTTP cache for every preview video. Rendered server-side
   in header.php so it's visible on first paint, before any script downloads. */
#splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  will-change: opacity;
  transition: opacity 0.6s ease;
}
#splash-screen.is-hidden { opacity: 0; pointer-events: none; }
#splash-screen.is-removed { display: none; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; padding: 1rem; }
.splash-logo { font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text); }
.splash-progress { width: min(280px, 60vw); height: 1px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.splash-progress-fill { width: 0%; height: 100%; background: var(--text); will-change: width; }
.splash-percent { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.05em; }
/* Lock body scroll while the splash is up so iOS rubber-band doesn't reveal stuff underneath */
body.is-preloading { overflow: hidden; }