/* ============================================================
   KGN Landing — design tokens (from KGN Design Manual 2026)
   ============================================================ */

@font-face {
  font-family: 'Bebas Neue';
  src: url('../fonts/BebasNeue-Regular.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Bebas Neue Book';
  src: local('Bebas Neue Book'),
       url('../fonts/BebasNeue-Book.woff2') format('woff2'),
       url('../fonts/BebasNeue-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Julietta Messie';
  src: url('../fonts/JuliettaMessie.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --color-anthracite: #2b2b2b;
  --color-warm-white: #fffdf6;

  --tint-warm-1: #f6f4ed;
  --tint-warm-2: #d4d3cc;
  --tint-warm-3: #b3b1ab;
  --tint-warm-4: #918f8b;
  --tint-anth-1: #898989;
  --tint-anth-2: #ababab;
  --tint-anth-3: #cdcdcd;
  --tint-anth-4: #efefef;

  --font-display:      'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-display-book: 'Bebas Neue Book', 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-script:       'Julietta Messie', cursive;
  --font-body:         Georgia, 'Times New Roman', serif;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --max-w: 1280px;
}

/* ============================================================
   Reset
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-warm-white);
  color: var(--color-anthracite);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   Branded loader — covers the page until the 3D model (or its
   timeout/fallback) is ready, so there's no flash between the
   static SVG and the WebGL canvas swapping in.
   ============================================================ */

.kgn-loader {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--color-warm-white);
  opacity: 1;
  transition: opacity 500ms ease;
}

.kgn-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.kgn-loader__mark {
  width: 13vmin;
  min-width: 28px;
  max-width: 56px;
  animation: kgn-loader-pulse 1.3s ease-in-out infinite;
}

@keyframes kgn-loader-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1); }
}

/* ============================================================
   Grain overlay — subtle film-grain texture across the whole
   page (on-brand for a TV/production studio). Oversized + an
   animated offset so the tile edges never show.
   ============================================================ */

.grain-overlay {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: 95;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  animation: kgn-grain-shift 1.4s steps(6) infinite;
}

@keyframes kgn-grain-shift {
  0%   { transform: translate(0%, 0%); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -4%); }
  60%  { transform: translate(-4%, -2%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0%, 0%); }
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--space-3) var(--space-4);
  display: grid;
  grid-template-rows: auto 1fr;
  position: relative;
  overflow: hidden;
}

.hero-top {
  display: flex;
  align-items: center;
  z-index: 2;
}

.hero-logo img {
  height: 72px;
  width: auto;
}

.hero-stage {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
}

/* 3D canvas mount */
.stage-canvas {
  --sz: min(70vmin, 560px, max(200px, calc(100svh - 320px)));
  position: relative;
  width: var(--sz);
  height: var(--sz);
  display: grid;
  place-items: center;
}

/* Contact shadow — grounds the N whether the fallback SVG or the
   3D canvas is showing. Approximate "floor" near the base of the
   model rather than a true 3D-computed shadow. */
.stage-shadow {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 48%;
  height: 12%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(43, 43, 43, 0.32) 0%, rgba(43, 43, 43, 0.14) 45%, rgba(43, 43, 43, 0) 75%);
  filter: blur(4px);
  z-index: 0;
  pointer-events: none;
}

.stage-canvas canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Entrance animation hook — JS adds .is-3d-ready once the model
   has loaded, which triggers the canvas's own fade/scale-in. */
.stage-canvas.is-3d-ready canvas {
  opacity: 1;
  transform: scale(1);
}

.stage-fallback {
  position: relative;
  z-index: 1;
  width: 70%;
  height: 70%;
  object-fit: contain;
  opacity: 0.95;
}

.stage-canvas.is-3d-ready .stage-fallback { display: none; }

/* ============================================================
   Announcement
   "Presťahovali sme sa na" + "KGNSTUDIO.SK"
   Both lines share the same visual width by pairing a smaller
   font-size + wide letter-spacing (label) with a larger
   font-size + tight letter-spacing (link).
   ============================================================ */

.hero-announce {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
  cursor: pointer;
  transition: opacity 200ms ease;
}

.hero-announce:hover,
.hero-announce:focus-visible { opacity: 0.6; }

.hero-announce:focus-visible {
  outline: 1px solid var(--color-anthracite);
  outline-offset: 8px;
}

/* Label — "PRESŤAHOVALI SME SA"
   Smaller size, wide tracking → matches visual width of link below */
.announce-label {
  display: block;
  font-family: var(--font-display-book);
  font-size: clamp(0.6rem, 0.95vw, 0.78rem);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--tint-warm-4);
  line-height: 1;
  /* Compensate for trailing letter-spacing so text looks truly centred */
  padding-right: 0.38em;
}

/* Link — "KGNSTUDIO.SK"
   Larger size, tighter tracking → same rendered width as label.
   Mixed weights per brand spec: KGN / .SK heavier, STUDIO lighter.
   There's no true Bebas Neue Bold file in the project — Regular is
   the heaviest static cut we have, so it stands in for "bold"
   against the lighter Book cut used for STUDIO. */
.announce-link {
  display: block;
  font-family: var(--font-display-book);
  font-size: clamp(1.55rem, 2.55vw, 2rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-anthracite);
  line-height: 1;
  padding-right: 0.12em; /* trailing spacing compensation */
}

.announce-link__bold { font-family: var(--font-display); }
.announce-link__book { font-family: var(--font-display-book); }

/* ============================================================
   Footer — copyright only
   ============================================================ */

.site-footer {
  background: var(--color-warm-white);
  color: var(--color-anthracite);
  padding: var(--space-3) var(--space-4);
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-footer small {
  font-family: var(--font-display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 6px;
  color: var(--tint-warm-4);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 768px) {
  .hero { padding: var(--space-2) var(--space-3); }
  .hero-logo img { height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}