/*
Theme Name: PANO3D
Theme URI: https://pano3d.cz
Author: PANO3D
Description: Native WordPress rebuild of the PANO3D marketing site (ported from the Next.js/React version in this same repo). Black/gray brand, Montserrat + Roboto + Caveat, bilingual cs/en via Polylang.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: pano3d
*/

/* ─────────────────────────────────────────────────────────────────
   Ported 1:1 from app/globals.css (Next.js version) — see that file's
   own comments for the reasoning behind each rule. The only things
   dropped are the 3 @tailwind directives (no Tailwind build step in
   a plain WP theme) and the next/font loading comment (fonts are
   self-hosted via assets/css/fonts.css, enqueued separately in
   functions.php, ported from the exact next/font/google config in
   app/layout.tsx — see that file for weight/subset provenance).
   ───────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* overflow-x on both html and body: iOS Safari's rubber-band bounce
   can escape a body-only rule when a descendant (marquee track, bento
   tile bleed) is intentionally wider than the viewport.
   Uses `clip`, not `hidden`: setting only overflow-x to a non-visible
   value makes the UA compute overflow-y as `auto` too (CSS Overflow
   spec's "if one axis is non-visible, the other stops being visible"
   rule), which turns html/body into a real scroll container and
   breaks position:sticky for every descendant (ScrollHero's pinned
   canvas) since sticky then anchors to that container instead of the
   actual viewport. `clip` suppresses painting the overflow without
   creating a scrollport, so it has no such side effect. */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
  font-family: var(--font-body), system-ui, -apple-system, sans-serif;
  background: #0a0a0a;
  color: #fff;
  overflow-x: clip;
}

/* Display face on every heading. */
h1, h2, h3, h4 {
  font-family: var(--font-display), var(--font-body), system-ui, sans-serif;
}

/* ── Film grain ────────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed; inset: -200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: .022;
  pointer-events: none;
  z-index: 9990;
  animation: grain .5s steps(2) infinite;
}
@keyframes grain {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-3%,-3%); }
  50%  { transform: translate(3%,-1%); }
  75%  { transform: translate(-1%,3%); }
  100% { transform: translate(2%,2%); }
}

/* ── GSAP pin spacer ───────────────────────────────────────── */
.pin-spacer { overflow: visible !important; }

/* ── Section divider line grow ─────────────────────────────── */
@keyframes lineGrow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

/* ── Stat counter glow pulse ───────────────────────────────── */
@keyframes glow {
  0%, 100% { text-shadow: 0 0 20px rgba(255,255,255,.15); }
  50%       { text-shadow: 0 0 50px rgba(255,255,255,.4); }
}
.stat-glow { animation: glow 3s ease-in-out infinite; }

/* ── Technical-drawing background texture ────────────────────
   Usage: a section needs `position: relative`, then a plain
   `<div class="bg-blueprint"></div>` as its first child. */
.bg-blueprint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M0 8h16M8 0v16' stroke='rgba(255,255,255,0.16)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 60px 60px, 60px 60px, 120px 120px;
}

/* ── Button/link "light up" click feedback ───────────────────
   Any button or link briefly flashes neon red when pressed (the same
   red as the "3" in the P3D logo — the one spot of red left anywhere
   on the site). Driven by assets/js/button-glow.js (single delegated
   pointerdown listener), enqueued site-wide from functions.php. */
@keyframes btnGlowFlash {
  0%   { filter: brightness(1); box-shadow: 0 0 0 0 rgba(255,34,48,0); }
  25%  { filter: brightness(1.3); box-shadow: 0 0 26px 3px rgba(255,34,48,.7); }
  100% { filter: brightness(1); box-shadow: 0 0 0 0 rgba(255,34,48,0); }
}
.btn-glow-flash { animation: btnGlowFlash .5s ease-out; }

/* ── WordPress post body typography (blog) ───────────────────
   This block needed no changes at all to move here — it was already
   written to style raw WordPress post HTML rendered via
   dangerouslySetInnerHTML on the headless side; it's a native fit for
   Gutenberg's default post content on this native side. */
.wp-prose { color: #b3b3b3; font-size: 1rem; line-height: 1.85; }
.wp-prose h2 { color: #fff; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; margin: 2.2em 0 0.7em; }
.wp-prose h3 { color: #fff; font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; margin: 1.8em 0 0.6em; }
.wp-prose p { margin: 0 0 1.2em; }
.wp-prose a { color: #c9cbcf; text-decoration: underline; text-underline-offset: 3px; }
.wp-prose a:hover { color: #fff; }
.wp-prose strong { color: #e7e7e7; }
.wp-prose ul, .wp-prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.wp-prose li { margin-bottom: 0.4em; }
.wp-prose img { max-width: 100%; height: auto; border-radius: 14px; margin: 1.6em 0; border: 1px solid rgba(255,255,255,0.07); }
.wp-prose figure { margin: 1.6em 0; }
.wp-prose figcaption { color: rgba(255,255,255,0.3); font-size: 0.8rem; text-align: center; margin-top: 0.5em; }
.wp-prose blockquote { border-left: 2px solid #c9cbcf; padding-left: 1.2em; margin: 1.6em 0; color: #e7e7e7; font-style: italic; }
.wp-prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 0.9rem; }
.wp-prose th, .wp-prose td { border: 1px solid rgba(255,255,255,0.1); padding: 10px 14px; text-align: left; }
.wp-prose th { color: #fff; background: rgba(255,255,255,0.04); }
.wp-prose iframe { max-width: 100%; border-radius: 14px; margin: 1.6em 0; }
.wp-prose code { background: rgba(255,255,255,0.06); border-radius: 6px; padding: 2px 7px; font-size: 0.88em; color: #e7e7e7; }

/* ─────────────────────────────────────────────────────────────────
   Ported from tailwind.config.ts's theme.extend.keyframes/animation
   (fadeUp/fadeIn/scrollBounce, applied via Tailwind utility classes
   like `animate-fadeUp` in the React version). theme.json only holds
   static color/typography/spacing tokens, not @keyframes, so these
   live here instead and are applied via plain utility classes with
   the same names the components already used.
   ───────────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(22px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60%       { transform: translateY(10px); opacity: .2; }
}
.animate-fadeUp      { animation: fadeUp .7s cubic-bezier(.16,1,.3,1) both; }
.animate-fadeUp-slow { animation: fadeUp .9s .12s cubic-bezier(.16,1,.3,1) both; }
.animate-fadeIn       { animation: fadeIn .5s ease both; }
.animate-scroll        { animation: scrollBounce 1.8s ease-in-out infinite; }