/* inbs/2026 — the vizitka page (PRINCIPLES §1b: what this one identity
   needs beyond the design system). One centred screen over a glowing
   horizon: a two-line claim, one sentence, the e-mail as the single
   button, and the invoice line resting on the planet's surface. Scale,
   light and stillness carry it; the data stays to four facts.

   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(36px, 2.5rem + 1vw, 48px);
  --vizitka-claim-size: clamp(2.1rem, 7vw, 5rem);
  /* Where the planet's rim crosses the page. */
  --vizitka-horizon: 78svh;

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

/* ------------------------------------------------------------------
   The scene, bottom to top: a faint ambient wash, the planet with its
   lit rim, the pointer light (client.js; never moves without it), and
   film grain over everything — texture, and it dithers away the
   banding a near-black gradient produces on 8-bit panels.
   ------------------------------------------------------------------ */

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

/* Straight, not a planet: the curve was the one thing on the page that
   changed shape with the viewport, and a rim that reads as a horizon at
   1440px reads as a hill on a phone. A flat edge is the same edge
   everywhere, and the light above it does all the work the arc did. */
.vizitka-horizon {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: var(--vizitka-horizon);
  bottom: 0;
  pointer-events: none;
  background: #030807;
  box-shadow:
    0 -1px 3px rgb(225 255 249 / 0.55),
    0 -3px 16px rgb(190 250 238 / 0.32),
    0 -16px 60px rgb(33 207 178 / 0.28),
    0 -70px 180px 12px rgb(33 207 178 / 0.10);
}

.vizitka-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 44rem;
  height: 44rem;
  margin: -22rem 0 0 -22rem;
  pointer-events: none;
  border-radius: var(--radius-full);
  background: radial-gradient(closest-side, rgb(33 207 178 / 0.08), transparent 70%);
  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;
  /* On a mega-widescreen the corners stop being where the eye lives:
     the stage caps at 90rem and centres, so the logo and the phone
     stay in the composition instead of on the bezel. */
  width: min(100%, 90rem);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--space-8);
  padding: var(--vizitka-pad);
  min-height: 100svh;
}

.vizitka-logo {
  height: var(--vizitka-logo-height);
  width: auto;
  /* A breath more air below the mark than the text keeps among itself. */
  margin-bottom: var(--space-4);
}

/* The parent, named quietly under the claim — a tracked-out label in
   the eyebrow's voice, with Industry's measured ink-shift. */
.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(33 207 178 / 0.4);
  text-underline-offset: 4px;
  transition: color var(--motion-duration) var(--motion-easing);
}

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

/* ------------------------------------------------------------------
   The centre: claim, one sentence, one button.
   ------------------------------------------------------------------ */

.vizitka-hero {
  display: grid;
  gap: var(--space-6);
  justify-items: center;
  text-align: center;
  /* Optically centred between the top bar and the horizon, not the
     page: the foot rests low, so the flex gap alone reads bottom-heavy. */
  margin-block: auto;
  padding-bottom: 6svh;
}

.vizitka-claim {
  margin: 0;
  display: grid;
  gap: 0.04em;
  font-size: var(--vizitka-claim-size);
  font-weight: var(--font-weight-heading);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.vizitka-claim-a {
  color: var(--color-text);
}

/* The second line answers in the brand — solid endpoints, the dimmest
   being the teal itself (9.70:1 on the page; display type needs 3:1). */
.vizitka-claim-b {
  position: relative;
  background: linear-gradient(100deg, var(--color-primary-600) 0%, var(--color-primary-200) 45%, #eef7f4 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 one button. Sharp, glass, teal edge; the hover answers with
   light rather than movement. */
.vizitka-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding: 16px 30px;
  border: var(--border-width) solid rgb(33 207 178 / 0.35);
  background: rgb(255 255 255 / 0.03);
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-body);
  line-height: var(--btn-line-height);
  text-decoration: none;
  transition:
    border-color var(--motion-duration) var(--motion-easing),
    background-color var(--motion-duration) var(--motion-easing),
    box-shadow var(--motion-duration-slow) var(--motion-easing);
}

.vizitka-cta:hover {
  border-color: rgb(33 207 178 / 0.7);
  background: rgb(255 255 255 / 0.05);
  box-shadow: 0 0 28px rgb(33 207 178 / 0.22);
}

.vizitka-cta:focus-visible {
  outline: none;
  box-shadow: var(--field-focus-ring);
}

.vizitka-cta-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------------
   The foot rests on the planet: address and IČO in one quiet line,
   the register line under it.
   ------------------------------------------------------------------ */

.vizitka-foot {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  text-align: center;
}

.vizitka-strip {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-body);
}

/* The separator is the brand's slot: a short teal dash, not a dot. */
.vizitka-sep {
  display: inline-block;
  width: 10px;
  height: 2px;
  background: var(--color-primary);
  opacity: 0.55;
}

.vizitka-register {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-body);
  opacity: 0.7;
}

/* ------------------------------------------------------------------
   Small screens: the survey marks go, the horizon sits lower so the
   text keeps the room, the top bar tightens.
   ------------------------------------------------------------------ */

@media (max-width: 48rem) {
  .vizitka {
    /* Measured from the BOTTOM, not as a share of the height: the foot
       is three wrapped lines on a phone and an svh fraction put the
       edge 7px above it on a 812px screen and under it on a shorter
       one. Anchored this way the air below the edge is the same on
       every device. */
    --vizitka-horizon: calc(100svh - 11rem);
  }
}

/* ------------------------------------------------------------------
   The survey field: hairlines with a crosshair head drifting across
   the upper sky, the reference's moving marks. They exist only as
   animation — the base opacity is 0, so under reduced motion (or
   without the keyframes) the sky is simply empty.
   ------------------------------------------------------------------ */

.vizitka-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.vizitka-field i {
  position: absolute;
  left: 0;
  width: var(--w, 200px);
  height: 1px;
  opacity: 0;
  background: linear-gradient(to left, rgb(190 250 238 / 0.45), transparent);
}

.vizitka-field i::after {
  content: "+";
  position: absolute;
  right: -13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  line-height: 1;
  font-weight: var(--font-weight-bold);
  color: rgb(190 250 238 / 0.6);
}

/* The reversed lines fly right-to-left, so their anatomy mirrors: the
   crosshair head leads on the left, the tail fades behind to the right.
   A scaleX(-1) would be simpler — and would fight the keyframes for
   `transform`, so the flip is drawn, not transformed. */
.vizitka-field i:nth-child(2),
.vizitka-field i:nth-child(4) {
  background: linear-gradient(to right, rgb(190 250 238 / 0.45), transparent);
}

.vizitka-field i:nth-child(2)::after,
.vizitka-field i:nth-child(4)::after {
  right: auto;
  left: -13px;
}

.vizitka-field i:nth-child(1) { --w: 220px; top: 14%; --d: 26s; --delay: -4s;  --o: 0.35; }
.vizitka-field i:nth-child(2) { --w: 140px; top: 24%; --d: 34s; --delay: -20s; --o: 0.22; animation-direction: reverse; }
.vizitka-field i:nth-child(3) { --w: 300px; top: 33%; --d: 22s; --delay: -12s; --o: 0.30; }
.vizitka-field i:nth-child(4) { --w: 180px; top: 47%; --d: 38s; --delay: -30s; --o: 0.18; animation-direction: reverse; }
.vizitka-field i:nth-child(5) { --w: 240px; top: 58%; --d: 30s; --delay: -8s;  --o: 0.25; }
.vizitka-field i:nth-child(6) { --w: 120px; top: 66%; --d: 42s; --delay: -26s; --o: 0.15; }

/* ------------------------------------------------------------------
   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) {
  /* The gradient drifts through the answer line — type that is lit,
     not printed. One slow pass and back, ~14s. */
  .vizitka-claim-b {
    animation: vizitka-shimmer 14s ease-in-out infinite;
  }

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

  /* The ambient wash breathes once per ~11s. Opacity only — additive
     layers, nothing readable underneath changes. */
  .vizitka-glow {
    animation: vizitka-breathe 11s ease-in-out infinite;
  }

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

  /* One crossing per --d; the head leads, the tail fades behind it. */
  .vizitka-field i {
    animation: vizitka-drift var(--d, 30s) linear infinite;
    animation-delay: var(--delay, 0s);
  }

  @keyframes vizitka-drift {
    0%   { transform: translateX(-25vw); opacity: 0; }
    10%  { opacity: var(--o, 0.3); }
    90%  { opacity: var(--o, 0.3); }
    100% { transform: translateX(115vw); opacity: 0; }
  }
}