/* ══════════════════════════════════════════════════════════════════════
   Immersive landing hero — ported from a React/three-fiber/GSAP concept to
   this project's vanilla stack (Three.js + GSAP via CDN, no build step).

   Everything here is ADDITIVE and scoped to the hero: header, footer,
   portal section and the SEO block keep their own styles in landing.css.

   Progressive enhancement is load-bearing. The hero content is fully
   visible by DEFAULT; the blur-in reveal only applies once landing-hero.js
   has confirmed GSAP is present and adds `html.xh-ready`. If the CDN, WebGL
   or JS fails, the page still renders a clean static hero.
   ══════════════════════════════════════════════════════════════════════ */

:root{ --xh-ink:#020202; }

/* Deepen the page to the concept's near-black and kill the old radial so it
   doesn't fight the WebGL field. */
body{ background:var(--xh-ink); }
.landing-bg{ background:var(--xh-ink); }
.landing-bg::after{
  /* faint centre lift kept as the WebGL fallback backdrop */
  background:radial-gradient(ellipse 90% 60% at 50% 38%,rgba(255,255,255,.04),transparent 72%);
}

/* WebGL field: fixed behind everything, non-interactive. Sits above the
   plain .landing-bg fallback (z0) but below header (z100) and content. */
#xhWebgl{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:var(--xh-ink);
  opacity:0; transition:opacity 1.1s var(--ease,cubic-bezier(.16,1,.3,1));
}
#xhWebgl.is-on{ opacity:1; }
#xhWebgl canvas{ display:block; width:100%!important; height:100%!important; }

/* Fine film grain + vignette over the whole hero — the concept's "bento
   mask". Pure CSS, no image request. */
.xh-grain{
  position:fixed; inset:0; z-index:2; pointer-events:none; mix-blend-mode:overlay;
  opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.xh-vignette{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse 75% 70% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%);
}

/* ── Hero layout: a single brand column — wordmark + CTA, centered ── */
.hero-section{
  position:relative; z-index:10;
  min-height:100svh; min-height:100vh;
  display:flex; align-items:stretch; justify-content:center;
  padding:calc(var(--hd-h) + 28px) clamp(20px,5vw,80px) 96px;
  text-align:left;
  /* Clip the oversized wordmark's spill so it can never create a horizontal
     scrollbar; the portal section below is separate and unaffected. */
  overflow:hidden;
}
.xh{
  width:100%; max-width:1440px; min-width:0;
  display:flex; align-items:stretch;
}
.xh-left{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(32px,6vh,56px);
}

/* ── The wordmark: TAMPER over MARKET, second line outlined + kicked left ── */
.xh-mark{ margin:0; padding-right:clamp(0px,3vw,40px); }
.xh-mark-line{
  display:block;
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:700;
  font-size:clamp(3.4rem,13vw,12rem);
  line-height:.8; letter-spacing:-.04em; text-transform:uppercase;
  color:#fff;
  will-change:transform;
}
.xh-mark-1{
  background:linear-gradient(180deg,#fff 0%,#fff 58%,#9aa0a6 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* Outlined second word, shifted left so the two lines interlock instead of
   stacking flush — the "прикольно" offset the brief asked for. */
.xh-mark-2{
  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.6px rgba(255,255,255,.6);
  text-stroke:1.6px rgba(255,255,255,.6);
  transform:translateX(-.16em);
  transition:-webkit-text-stroke .4s var(--ease,cubic-bezier(.16,1,.3,1));
}
.xh-mark:hover .xh-mark-2{ -webkit-text-stroke:1.6px rgba(96,165,250,.85); }
/* Browsers without text-stroke: fall back to a translucent fill so the word
   never disappears. */
@supports not ((-webkit-text-stroke:1px #000) or (text-stroke:1px #000)){
  .xh-mark-2{ color:rgba(255,255,255,.42); -webkit-text-fill-color:rgba(255,255,255,.42); }
}

/* Magnetic CTA — circle + label. GSAP nudges .xh-cta toward the cursor. */
.xh-cta{
  display:inline-flex; align-items:center; gap:22px;
  background:none; border:0; padding:6px; cursor:pointer;
  font-family:inherit; color:#fff; width:fit-content; will-change:transform;
  -webkit-tap-highlight-color:transparent; text-decoration:none;
}
.xh-cta-ring{
  width:58px; height:58px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:background .5s var(--ease,cubic-bezier(.16,1,.3,1));
}
.xh-cta-ring svg{ width:19px; height:19px; stroke:#fff; fill:none; transition:stroke .5s; }
.xh-cta:hover .xh-cta-ring{ background:#fff; }
.xh-cta:hover .xh-cta-ring svg{ stroke:#0a0a0a; }
.xh-cta-label{ font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }

/* Scroll hint sits above the WebGL field. */
.scroll-hint{ z-index:10; color:rgba(255,255,255,.32); }

/* Reveal hidden-state is applied by GSAP (gsap.set) at runtime, never by
   CSS — so if the GSAP CDN fails the hero is simply visible, never blank. */

/* ── Responsive ── */
@media(max-width:1000px){
  .xh-left{ gap:36px; }
  .xh-mark-2{ transform:translateX(-.1em); }
}
@media(max-width:600px){
  .hero-section{ padding:calc(var(--hd-h) + 18px) 18px 84px; }
  .xh-left{ gap:30px; }
  .xh-mark-line{ font-size:clamp(3rem,20vw,6rem); }
  .xh-mark-2{ transform:translateX(-.06em); -webkit-text-stroke-width:1.2px; }
}

/* ── Reduced motion: no WebGL, no looping animation, everything static ── */
@media(prefers-reduced-motion:reduce){
  #xhWebgl,.xh-grain{ display:none; }
}
@media(hover:none){
  .xh-mark:hover .xh-mark-2{ -webkit-text-stroke:1.6px rgba(255,255,255,.6); }
}