/* ==========================================================================
   BAZA PRODUCTION - Home (one-page experience)
   Section order: hero, about, ecosystem + directions, developers,
   work, services, team, contact.
   ========================================================================== */

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  max-height: 1600px;
  overflow: clip;
  isolation: isolate;
}
.hero__canvas {
  position: absolute; inset: 0;
  z-index: var(--z-canvas);
  width: 100%; height: 100%;
}
/* The BAZA mark: ten separate SVG cells. With WebGL, hero.js pins it to the
   lattice (left/top/size from the shader geometry); without WebGL it falls
   back to the CSS placement below. Vector at every size, never resampled.
   Each cell sits in its own 3D box (.hero__flip) so it can turn over around
   a horizontal axis hidden behind the logo plane: down, through the depth,
   back in from the top. */
.hero__mark {
  position: absolute;
  z-index: var(--z-canvas);
  right: 16%; top: 50%;
  height: min(64%, 900px);
  aspect-ratio: 5 / 8;
  transform: translateY(-56%);
  pointer-events: none;
}
.hero__mark.is-pinned { right: auto; top: 0; left: 0; height: auto; transform: none; will-change: transform; }
.hero__cell {
  position: absolute;
  width: 40%; height: 25%;                          /* one diamond: 2 x 2 of the 5 x 8 box */
  transform-style: preserve-3d;
}
.hero__flip {
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  backface-visibility: visible;                     /* a lid: its underside shows while it turns */
  will-change: transform;
}
.hero__flip svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero__base { fill: #f6d84d; }
.hero__f1 { fill: #fde053; }                       /* four facets under a light from the top left */
.hero__f2 { fill: #f8da4f; }
.hero__f3 { fill: #efd14a; }
.hero__f4 { fill: #f3d54c; }
.hero__sheen { fill: url(#hero-sheen); }
.hero__hits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero__hit { fill: transparent; pointer-events: all; }   /* static hit areas: never move with the cell */
.motion .hero__mark { visibility: hidden; }            /* until placed, so it never jumps */
.motion .hero__mark.is-pinned, .motion .hero__mark.is-ready { visibility: visible; }
@media (max-width: 899px) {
  .hero__mark { right: auto; left: 50%; height: min(44%, 420px); transform: translate(-50%, -50%); }
}


.hero__inner {
  position: relative;
  z-index: var(--z-content);
  height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-top: calc(var(--header-h) + clamp(24px, 5vh, 72px));
  padding-bottom: clamp(16px, 2.4vw, 40px);
  pointer-events: none;
}
.hero__inner a { pointer-events: auto; }
.hero__top { max-width: 34rem; display: grid; gap: 22px; }
.hero__lede {
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -0.012em;
  color: var(--c-fg);
  max-width: 26ch;
}
.hero__desc { max-width: 38ch; color: var(--c-fg-2); font-size: var(--fs-sm); line-height: 1.55; }

/* Monitor turned upright (portrait desktop): the hero reads like a poster -
   mark centred and large, bigger opening lines. */
@media (min-width: 900px) and (max-aspect-ratio: 5/6) {
  .hero__mark { right: auto; left: 50%; height: min(45%, 900px); transform: translate(-50%, -50%); }
  .hero__top { max-width: 44rem; gap: 26px; }
  .hero__lede { font-size: var(--fs-xl); }
  .hero__desc { font-size: var(--fs-base); max-width: 42ch; }
}
.hero__meta {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-bottom: clamp(12px, 1.4vw, 22px);
  color: var(--c-fg-3);
  font-size: var(--fs-xs);
}
.hero__scroll { display: inline-flex; align-items: center; gap: 12px; }
.hero__scroll-line {
  position: relative;
  width: 1px; height: 28px;
  background: var(--c-line-2);
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 100%; height: 40%;
  background: var(--c-accent);
  animation: scroll-hint 2.4s var(--ease-in-out) infinite;
}
@keyframes scroll-hint {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(260%); }
}

.hero__title {
  display: flex; flex-wrap: wrap; column-gap: 0.22em;
  font-size: 17.2vw;                             /* refined by fit-text.js */
  font-weight: 650;
  line-height: 0.84;
  letter-spacing: -0.035em;                      /* tighter made Z bite into A */
  margin-left: -0.03em;
  white-space: nowrap;
}
.hero__word { display: block; }
@media (min-width: 900px) {
  .hero__title { font-size: 11.4vw; flex-wrap: nowrap; }
  .hero__meta-year { display: inline; }
}
@media (max-width: 899px) {
  .hero__title { flex-direction: column; }
  .hero__meta-year { display: none; }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about__label { grid-column: 1 / -1; margin-bottom: 28px; align-self: start; }
.about__statement { grid-column: 1 / -1; }
.about__statement em { font-style: normal; color: var(--c-accent); }
.about__facts {
  grid-column: 1 / -1;
  display: grid; gap: 28px;
  margin-top: var(--space-l);
}
.about__fact {
  display: grid; gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--c-line);
  color: var(--c-fg-2);
  max-width: 36ch;
}
@media (min-width: 900px) {
  .about__label { grid-column: 1 / span 3; margin: 0.9em 0 0; }
  .about__statement { grid-column: 4 / -1; }
  .about__facts { grid-column: 4 / -1; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
}

/* ==========================================================================
   ECOSYSTEM + DIRECTIONS
   ========================================================================== */
.eco { padding-top: 0; }
.eco__head { row-gap: 24px; }
.eco__label { grid-column: 1 / -1; align-self: start; }
.eco__title { grid-column: 1 / -1; font-size: var(--fs-2xl); }
.eco__lead { grid-column: 1 / -1; max-width: 30ch; }
@media (min-width: 900px) {
  .eco__label { grid-column: 1 / span 3; margin-top: 0.9em; }
  .eco__title { grid-column: 4 / -1; }
  .eco__lead { grid-column: 4 / span 5; }
}

.eco__diagram { display: none; margin-block: var(--space-l) clamp(40px, 5vw, 90px); }
.eco__svg { width: 100%; height: auto; overflow: visible; }
.eco__paths path { stroke: var(--c-line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.eco__pill { fill: var(--c-bg); stroke: var(--c-line-2); vector-effect: non-scaling-stroke; }
.eco__pill-mark { fill: var(--c-accent); }
.eco__pill-text, .eco__nodes text {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  fill: var(--c-fg);
}
.eco__nodes text { text-anchor: middle; fill: var(--c-fg-2); }
.eco__nodes rect { fill: var(--c-accent); }
.eco__pulses circle { fill: var(--c-accent); }
@media (min-width: 760px) { .eco__diagram { display: block; } }

/* --- Directions: five discipline panels --- */
.panels {
  display: flex;
  gap: 12px;
  margin-inline: calc(var(--pad) * -1);
  padding-inline: var(--pad);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.panels::-webkit-scrollbar { display: none; }
.eco__diagram + .panels { margin-top: 36px; }   /* phones: the diagram is hidden, keep air under the lede */
@media (min-width: 760px) { .eco__diagram + .panels { margin-top: 0; } }
/* touch: a quiet "swipe" cue under the row - a diamond gliding along a hairline */
.swipe-hint { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 28px; color: var(--c-fg-2); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; transition: opacity 0.8s var(--ease-out); }
.swipe-hint.is-done { opacity: 0; }
.swipe-hint__rail { position: relative; width: 84px; height: 1px; background: var(--c-line); }
.swipe-hint__rail i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; background: var(--c-accent); transform: rotate(45deg); animation: swipe-hint 2.4s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
@keyframes swipe-hint { 0% { transform: translateX(0) rotate(45deg); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateX(76px) rotate(45deg); opacity: 1; } 100% { transform: translateX(76px) rotate(45deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .swipe-hint__rail i { animation: none; left: 76px; } }
.eco__head + .panels { margin-top: var(--space-head); }

.panel {
  position: relative;
  flex: 0 0 min(78vw, 360px);
  aspect-ratio: 9 / 15;
  scroll-snap-align: start;
  overflow: hidden;
  background: #0b0b0c;
  isolation: isolate;
}
.panel::before {                       /* discipline colour edge */
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px;
  z-index: 2;
  background: var(--dir);
  transform-origin: left center;
  transition: transform 1s var(--ease-out);
}
.panel::after {                        /* legibility gradient */
  content: "";
  position: absolute; inset: 40% 0 0 0;
  z-index: 0;
  background: linear-gradient(180deg, transparent, rgb(8 8 9 / 0.92) 78%);
  pointer-events: none;
}
.panel__media { position: absolute; inset: 0; z-index: -1; perspective: 1100px; overflow: hidden; }
.panel__obj {                            /* tilts with the pointer (directions.js) */
  position: absolute; inset: -5%;
  transform-style: preserve-3d;
  will-change: transform;
}
.panel__video {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: filter 0.9s var(--ease-out);
}
.panel__glow {
  position: absolute; inset: 0;
  background: radial-gradient(38% 26% at var(--gx, 50%) var(--gy, 42%), color-mix(in srgb, var(--dir) 42%, transparent), transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
  pointer-events: none;
}
.panel.is-active .panel__glow { opacity: 0.75; }
.panel__link { position: absolute; inset: 0; z-index: 3; }
.panel__link:focus-visible { outline-offset: -6px; }
.panel__go {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--dir);
}
.panel__go svg { width: 12px; height: 12px; }

/* Cursor badge that replaces the pointer over the panels (fine pointers) */
.panels-cursor {
  position: fixed; top: 0; left: 0;
  z-index: 45;
  width: 96px; height: 96px;
  margin: -48px 0 0 -48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--dir, var(--c-accent));
  color: #0a0a0b;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  pointer-events: none;
  transform: scale(0);
  visibility: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .js .panels, .js .panels .panel__link { cursor: none; }
}

.panel__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: clamp(18px, 1.6vw, 30px);
}
.panel__idx { display: block; color: var(--dir); font-size: var(--fs-sm); margin-bottom: 10px; }
.panel__name {
  font-size: clamp(1.75rem, 2.3vw, 3rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}
.panel__pre { display: none; }
.panel__head { margin-top: 10px; color: var(--c-fg); font-size: var(--fs-base); line-height: 1.3; max-width: 24ch; }
.panel__more { display: grid; grid-template-rows: 1fr; }
.panel__more > div { overflow: hidden; min-width: 0; }
.panel__desc { margin-top: 12px; color: var(--c-fg-2); font-size: var(--fs-sm); line-height: 1.5; max-width: 34ch; }
.panel__tags { margin-top: 14px; color: var(--c-fg-3); max-width: 34ch; }

@media (min-width: 900px) {
  .swipe-hint { display: none; }
  .panels {
    height: clamp(560px, 84vh, 1000px);
    gap: 1px;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    background: var(--c-line);
  }
  .panel {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: auto;
    transition: flex-grow 1s var(--ease-out);
  }
  .panel::before { transform: scaleX(0); }
  .panel.is-active { flex-grow: 2.1; }
  .panel.is-active::before { transform: none; }
  .panels.has-active .panel:not(.is-active) .panel__video { filter: brightness(0.45) saturate(0.7); }
  .panel__head { min-width: 18ch; min-height: 2.6em; }
  .panel__more {
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.9s var(--ease-out), opacity 0.6s var(--ease-out);
  }
  .panel__more > div { width: 34ch; max-width: calc(100% + 0px); }
  .panel.is-active .panel__more { grid-template-rows: 1fr; opacity: 1; transition-delay: 0.15s; }
  .panel__go { opacity: 0; transform: translateY(8px); transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out); }
  .panel.is-active .panel__go { opacity: 1; transform: none; transition-delay: 0.25s; }
}

/* ==========================================================================
   BAZA DEVELOPERS
   ========================================================================== */
.dev { background: var(--c-bg-2); border-block: 1px solid var(--c-line); overflow: clip; }
.dev__grid { row-gap: clamp(56px, 8vw, 120px); align-items: center; }
.dev__copy, .dev__product { grid-column: 1 / -1; }
.dev__title { margin-top: 28px; font-size: min(var(--fs-2xl), 12.4vw); }
.dev__lead { margin-top: 28px; max-width: 28ch; }
.dev__list { margin-top: var(--space-m); border-bottom: 1px solid var(--c-line); }
.dev__list li {
  display: flex; align-items: baseline; gap: 20px;
  padding-block: 14px;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
}
.dev__list .t-mono { font-size: var(--fs-xs); color: var(--c-fg-3); min-width: 2ch; }
.dev__products { margin-top: var(--space-s); }
.dev__products ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dev__products li {
  padding: 9px 14px;
  border: 1px solid var(--c-line-2);
  border-radius: 999px;
  font-size: var(--fs-sm);
  color: var(--c-fg);
}
.dev__products li::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 10px;
  vertical-align: 0.12em;
  background: var(--c-developers);
  transform: rotate(45deg);
}
.dev__caption {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 20px;
  font-size: var(--fs-sm);
  color: var(--c-fg-2);
}
@media (min-width: 1000px) {
  .dev__copy { grid-column: 1 / span 5; }
  .dev__product { grid-column: 7 / -1; }
  .dev__title { font-size: min(var(--fs-2xl), 5.6vw); }
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services__head { row-gap: 24px; margin-bottom: var(--space-l); }
.services__head .label { grid-column: 1 / -1; align-self: start; }
.services__lead { grid-column: 1 / -1; }
.services__cols { display: grid; gap: 56px var(--gap); }
.svc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 20px; }
.svc__head { container-type: inline-size; }
.svc__verb {
  /* every language: one size for the row, set by its longest verb (--len, from the build), never wider than a column */
  font-size: min(var(--fs-2xl), calc(100cqi / (var(--len, 8) * 0.72)));
  transition: color 0.6s var(--ease-out);
}
.svc__list { margin-top: var(--space-s); }
.svc__list li {
  padding-block: 12px;
  border-top: 1px solid var(--c-line);
  color: var(--c-fg-2);
  font-size: var(--fs-md);
  letter-spacing: -0.01em;
  transition: color 0.4s var(--ease-out), padding 0.6s var(--ease-out);
}
@media (hover: hover) {
  .svc:hover .svc__verb { color: var(--c-accent); }
  .svc:hover .svc__list li { color: var(--c-fg); }
  .svc__list li:hover { padding-left: 10px; }
}
@media (min-width: 900px) {
  .services__head .label { grid-column: 1 / span 3; margin-top: 0.9em; }
  .services__lead { grid-column: 4 / -1; }
  .services__cols { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   TEAM
   ========================================================================== */
.team { overflow: clip; }
.team__label { grid-column: 1 / -1; margin-bottom: 28px; align-self: start; }
.team__statement { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .team__label { grid-column: 1 / span 3; margin: 0.9em 0 0; }
  .team__statement { grid-column: 4 / -1; }
}
.team__photo { margin-top: var(--space-l); }
.team__frame { position: relative; aspect-ratio: 21 / 9; overflow: hidden; background: var(--c-surface); }
.team__frame picture { position: absolute; inset: 0; }
.team__frame img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }
@media (max-width: 599px) { .team__frame { aspect-ratio: 4 / 3; } }
.marquee {
  display: grid; gap: 0.1em;
  margin-block: var(--space-l);
  font-size: clamp(3rem, 9.5vw, 12rem);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}
.marquee__row {
  display: flex; align-items: center;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
}
.marquee__row span { padding-inline: 0.28em; }
.marquee__row i {
  width: 0.16em; height: 0.16em;
  background: var(--c-accent);
  transform: rotate(45deg);
  flex: none;
}
.marquee__row--ghost span { color: transparent; -webkit-text-stroke: 1px rgb(237 235 230 / 0.34); }
.marquee__row--ghost i { background: transparent; box-shadow: inset 0 0 0 1px var(--c-accent); }
.team__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-md);
}
.team__foot .container { border: 0; }
.inline-icon { display: inline-block; width: 0.8em; height: 0.8em; margin-left: 4px; vertical-align: -0.02em; }


/* ==========================================================================
   WHAT WE DO WELL - four full, uncropped frames on a calm, structured
   grid. Each container takes the photo's own aspect ratio, so nothing
   inside it is cropped; only column spans vary, for a considered
   asymmetry (not a collage). No captions, no copy beyond the title.
   ========================================================================== */
.wwd__head { margin-bottom: var(--space-m); }
.wwd__title { font-size: var(--fs-3xl); }

.wwd__grid { display: grid; gap: 56px var(--gap); }
.wwd__fig { margin: 0; }
.wwd__frame { overflow: hidden; background: var(--c-surface); }
.wwd__fig--aerospace  .wwd__frame { aspect-ratio: 1.7778; }
.wwd__fig--automotive .wwd__frame { aspect-ratio: 0.667; }
.wwd__fig--music      .wwd__frame { aspect-ratio: 1.4147; }
.wwd__fig--sound      .wwd__frame { aspect-ratio: 1.5004; }
.wwd__frame picture { display: block; width: 100%; height: 100%; }
.wwd__frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .wwd__fig:hover .wwd__frame img { transform: scale(1.03); }
}
.wwd__meta {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  padding-top: 16px;
}
.wwd__card-title { font-size: var(--fs-md); font-weight: 550; letter-spacing: -0.015em; }
.wwd__desc { grid-column: 1; color: var(--c-fg-2); font-size: var(--fs-sm); }
.wwd__tag { grid-column: 2; grid-row: 1; color: var(--c-fg-3); align-self: center; }

.wwd__cta {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px;
  margin-top: var(--space-m);
}
.wwd__cta p { max-width: 42ch; color: var(--c-fg-2); }

@media (min-width: 900px) {
  .wwd__head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
  .wwd__head .label { grid-column: 1 / span 3; align-self: start; margin-top: 1.2em; }
  .wwd__title { grid-column: 4 / -1; }
  .wwd__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: clamp(56px, 6vw, 120px); }
  .wwd__fig--aerospace  { grid-column: 1 / 9; }
  .wwd__fig--automotive { grid-column: 9 / 13; }
  .wwd__fig--music      { grid-column: 1 / 7; }
  .wwd__fig--sound      { grid-column: 7 / 13; align-self: end; }
  .wwd__cta { grid-template-columns: 1fr auto; align-items: end; }
}
@media (max-width: 899px) {
  .wwd__fig--automotive { width: 80%; justify-self: end; }
}

/* ==========================================================================
   Locale adjustments - Cyrillic runs wider than Latin
   ========================================================================== */
:lang(ru) .eco__title, :lang(uk) .eco__title { font-size: min(var(--fs-2xl), 10.4vw); }

.wwd__link { display: block; color: inherit; }
/* drawn arrow (a text "↗" turns into an emoji on iPhone) */
.wwd__link .wwd__card-title::after {
  content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-left: 0.32em; vertical-align: 0.12em;
  background: var(--c-fg-3); transition: background-color 0.3s var(--ease-out);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 10.5 10.5 3.5M5 3.5h5.5V9' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 10.5 10.5 3.5M5 3.5h5.5V9' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wwd__link:hover .wwd__card-title::after, .wwd__link:focus-visible .wwd__card-title::after { background: var(--tone, var(--c-accent)); }