/* inmake/2026 — the teaser (PRINCIPLES §1b: what this one identity
   needs beyond the design system). The inbs vizitka's stage in the
   brand violet, saying less on purpose: mark, one line with a working
   cursor, whose it is. The sky holds ghost wireframes of web layouts —
   inmake builds webs out of blocks, so the blocks are the background.

   The knobs a variant would turn sit here at the top as custom
   properties, so "modifiable" means editing values, not selectors. */

.vizitka {
  --vizitka-pad: clamp(1.5rem, 5vw, 4rem);
  --vizitka-logo-height: clamp(52px, 3.5rem + 1.6vw, 78px);
  --vizitka-claim-size: clamp(1.9rem, 5.5vw, 4rem);
  /* Nothing rests on the floor here, so the horizon sits low — a lit
     baseline closing the page, not a surface holding anything. */
  --vizitka-horizon: calc(100svh - 7rem);

  min-height: 100svh;
  display: grid;
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
}

/* ------------------------------------------------------------------
   The scene, bottom to top: ambient wash, the flat lit horizon, the
   wireframe sky, the pointer haze, film grain over everything.
   ------------------------------------------------------------------ */

.vizitka-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 50% -14%, rgb(133 53 245 / 0.10), transparent 65%);
}

/* Straight, as the family settled it: a flat edge is the same edge on
   every viewport, and the light above it does all the work. */
.vizitka-horizon {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: var(--vizitka-horizon);
  bottom: 0;
  pointer-events: none;
  background: #060410;
  box-shadow:
    0 -1px 3px rgb(240 232 255 / 0.5),
    0 -3px 16px rgb(198 160 252 / 0.3),
    0 -16px 60px rgb(133 53 245 / 0.28),
    0 -70px 180px 12px rgb(133 53 245 / 0.10);
}

/* ---- The wireframe sky --------------------------------------------
   Two web layouts drawn as hairline blocks — a nav, a hero, cards, a
   footer. Below every word (z-index 1 against the stage's 3), dim
   enough to read as weather rather than content, and breathing so
   slowly the movement is only visible if watched for. `.vb-solid`
   rects are the "ink" elements (logo, heading, buttons) — filled at a
   whisper so the layouts read as designs, not just boxes.
   ------------------------------------------------------------------ */

.vizitka-blocks {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  fill: none;
  stroke: rgb(168 128 249 / 0.14);
  stroke-width: 1;
}

.vizitka-blocks .vb-solid {
  fill: rgb(168 128 249 / 0.10);
  stroke: none;
}

/* Six stations, and the sky takes turns: each ghost grows out of the
   dark at its own place — opacity and scale together, which is what
   reads as "appearing" rather than "fading" — holds, and dissolves.
   Offset by a sixth of a shared 36s cycle, so at any moment one layout
   is materialising somewhere while another goes.

   Straight, not tilted: these are web layouts, and a web layout's
   whole posture is the right angle. And two stations sit in the
   CENTRE, behind the claim — everything here paints under the stage
   (z-index 1 against its 3), so a ghost passing behind the words costs
   them nothing and the sky stops avoiding the middle of the page.

   Base opacity 0: the elements are permanent, their visibility is the
   animation — which keeps reduced motion honest, the override pinning
   two of them on, still, at full size. */
.vizitka-blocks--a { width: clamp(150px, 16vw, 240px); left: 6%;  top: 10%; opacity: 0; }
.vizitka-blocks--b { width: clamp(170px, 18vw, 270px); right: 7%; top: 40%; opacity: 0; }
.vizitka-blocks--c { width: clamp(150px, 15vw, 230px); left: 33%; top: 16%; opacity: 0; }
.vizitka-blocks--d { width: clamp(130px, 13vw, 200px); right: 30%; top: 56%; opacity: 0; }
.vizitka-blocks--e { width: clamp(140px, 14vw, 210px); left: 9%;  top: 55%; opacity: 0; }
.vizitka-blocks--f { width: clamp(140px, 14vw, 220px); right: 10%; top: 9%; opacity: 0; }

/* Under reduced motion the cycle never runs, so two ghosts are simply
   there — the still version of the same sky. */
@media (prefers-reduced-motion: reduce) {
  .vizitka-blocks--a,
  .vizitka-blocks--b {
    opacity: 1;
  }
}

/* On a phone the sky is the text's room; two stations take turns in
   the corners and the rest sit out. */
@media (max-width: 40rem) {
  .vizitka-blocks--a,
  .vizitka-blocks--c,
  .vizitka-blocks--d,
  .vizitka-blocks--e {
    display: none;
  }

  .vizitka-blocks--b {
    width: 46vw;
    right: -10%;
    top: 8%;
  }

  .vizitka-blocks--f {
    width: 42vw;
    right: auto;
    left: -6%;
    top: 60%;
  }
}

.vizitka-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  /* The fog, at the size and thinness the family measured on inbs:
     doubling the diameter quarters the plausible alpha. */
  width: 88rem;
  height: 88rem;
  margin: -44rem 0 0 -44rem;
  pointer-events: none;
  border-radius: var(--radius-full);
  background: radial-gradient(closest-side, rgb(133 53 245 / 0.055), transparent 100%);
  opacity: 0;
  transition: opacity 600ms var(--motion-easing);
}

.vizitka.has-cursor .vizitka-cursor {
  opacity: 1;
}

.vizitka-grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.05;
  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='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */

.vizitka-stage {
  position: relative;
  z-index: 3;
  width: min(100%, 90rem);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  padding: var(--vizitka-pad);
  min-height: 100svh;
}

.vizitka-hero {
  display: grid;
  gap: var(--space-6);
  justify-items: center;
  text-align: center;
  margin-block: auto;
  padding-bottom: 6svh;
}

.vizitka-logo {
  height: var(--vizitka-logo-height);
  width: auto;
  margin-bottom: var(--space-4);
}

.vizitka-claim {
  margin: 0;
  font-size: var(--vizitka-claim-size);
  font-weight: var(--font-weight-heading);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  /* The line is lit, not printed — the family gradient, violet through
     ice and back. Solid endpoints; the dimmest is the acting 600 at
     6.70:1, far past the 3:1 display type needs. */
  background: linear-gradient(100deg, var(--color-primary-600) 0%, var(--color-primary-200) 45%, #f1eef9 75%, var(--color-primary-400) 100%);
  background-size: 180% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-primary);
}

/* The cursor is the claim's own last character, set apart: solid brand
   ink so the blink reads as a terminal caret and not as text flashing.

   `inline-block` + `will-change` are the fix, not polish: the parent
   paints its text through `background-clip: text`, and Chrome caches
   that text as one texture — a child's opacity animation then updates
   the computed value every frame while the pixels never repaint. (Which
   is also why sampling getComputedStyle "proved" the blink while a real
   Chrome showed none: the computed value is the animation, the screen
   is the texture.) Promoted to its own compositor layer, the caret
   blinks on the compositor and the cached texture stops mattering. */
.vizitka-caret {
  -webkit-text-fill-color: var(--color-primary-700);
  display: inline-block;
  will-change: opacity;
}

.vizitka-byline {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  line-height: var(--leading-ui);
}

.vizitka-byline a {
  color: inherit;
  font-weight: var(--font-weight-bold);
  text-decoration-color: rgb(133 53 245 / 0.5);
  text-underline-offset: 4px;
  transition: color var(--motion-duration) var(--motion-easing);
}

.vizitka-byline a:hover {
  color: var(--color-primary-700);
}

/* ------------------------------------------------------------------
   The living layer — gated: under reduced motion the page is simply
   still, and loses nothing it needs. Frequencies stay far under 3Hz.
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .vizitka-claim {
    animation: vizitka-shimmer 14s ease-in-out infinite;
  }

  @keyframes vizitka-shimmer {
    0%, 100% { background-position: 0% 0; }
    50%      { background-position: 100% 0; }
  }

  .vizitka-glow {
    animation: vizitka-breathe 11s ease-in-out infinite;
  }

  @keyframes vizitka-breathe {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
  }

  /* The cursor works: 0.94Hz, steps, the terminal blink. It is the
     claim's own punctuation, which is why it earns motion on a page
     this still. */
  .vizitka-caret {
    animation: vizitka-caret-blink 1.06s steps(1, end) infinite;
  }

  @keyframes vizitka-caret-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
  }

  /* The appearing cycle: a ghost GROWS out of the dark — scale and
     opacity arrive together, hold while still swelling gently, and
     dissolve a touch past full size, like a window opening toward the
     viewer. One set of keyframes, six phase offsets — negative delays,
     so the sky is already mid-cycle on load instead of empty. */
  .vizitka-blocks {
    animation: vizitka-appear 36s ease-in-out infinite;
  }

  .vizitka-blocks--a { animation-delay: 0s; }
  .vizitka-blocks--b { animation-delay: -6s; }
  .vizitka-blocks--c { animation-delay: -12s; }
  .vizitka-blocks--d { animation-delay: -18s; }
  .vizitka-blocks--e { animation-delay: -24s; }
  .vizitka-blocks--f { animation-delay: -30s; }

  @keyframes vizitka-appear {
    0%   { opacity: 0; scale: 0.72; }
    9%   { opacity: 1; scale: 0.94; }
    38%  { opacity: 1; scale: 1.08; }
    46%  { opacity: 0; scale: 1.16; }
    100% { opacity: 0; scale: 0.72; }
  }
}

/* ------------------------------------------------------------------
   The foot: the platform's own credit, resting on the lit horizon.
   Same manner as the sibling page — muted until the pointer asks.
   ------------------------------------------------------------------ */

.vizitka-foot {
  display: grid;
  justify-items: center;
}

.vizitka-powered {
  display: block;
  width: fit-content;
  color: var(--color-text-muted);
  opacity: 0.6;
  transition:
    opacity var(--motion-duration) var(--motion-easing),
    color var(--motion-duration) var(--motion-easing);
}

.vizitka-powered:hover {
  opacity: 1;
  color: var(--color-primary-700);
}

.vizitka-powered svg {
  display: block;
}