:root {
  --bg: #121211;
  --bone: #ecebe5;
  --bone-dim: rgb(236 235 229 / .62);
  --ink: #121211;

  --f-mark: "UnifrakturMaguntia", "Old English Text MT", serif;
  --f-ui: "Golos Text", "Segoe UI", system-ui, sans-serif;

  --pad: clamp(1rem, 2.6vw, 2.25rem);
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--bone);
  font: 500 1rem/1.4 var(--f-ui);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--bone); color: var(--ink); }

a { color: inherit; }

/* ───────── Сцена ───────── */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  /* студийный фон: светлее за моделью, темнее к краям — чтобы чёрный костюм читался */
  background:
    radial-gradient(ellipse 34% 58% at 50% 60%, rgb(236 235 229 / .085), transparent 72%),
    radial-gradient(ellipse 85% 95% at 50% 55%, #2a2a27 0%, #171716 55%, #0b0b0a 100%);
}

/* плёночное зерно */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.3 0 0 0 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .09;
}

.bar,
.drop {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--pad);
}

.bar {
  grid-row: 1;
  grid-column: 1;
  align-items: center;
  font: 600 .72rem/1 var(--f-ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.bar__link {
  padding: .6rem 0;
  margin: -.6rem 0;
  text-decoration: none;
  transition: color .2s;
}

.bar__link:hover { color: var(--bone); }

.bar__link:focus-visible,
.drop__cta:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 4px;
}

/* сцена занимает весь экран, шапка и низ лежат поверх */
.stage {
  --hat: min(31vw, 56svh);   /* ширина шапки в кадре */
  --split: var(--hat);       /* шапка стоит между «GU» и «TX» */

  grid-row: 1 / -1;
  grid-column: 1;
  position: relative;
}

/* ───────── Логотип ───────── */

.mark {
  position: absolute;
  z-index: 1;
  top: 47%;
  left: 50%;
  translate: -50% -50%;
  margin: 0;
  font-family: var(--f-mark);
  font-weight: 400;
  font-size: min(calc((94vw - var(--split)) / 2.87), 58vh);
  line-height: 1;
  white-space: nowrap;
  color: var(--bone);
}

.mark__in {
  display: flex;
  gap: var(--split);
}

/* ───────── 3D-шапка ───────── */

.beanie {
  position: absolute;
  z-index: 2;
  top: 47%;
  left: 50%;
  translate: -50% -50%;
  width: calc(var(--hat) / .74);  /* камера кадрирует шапку на 74% ширины */
  aspect-ratio: 1;
  touch-action: pan-y;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.beanie.is-dragging { cursor: grabbing; }

.beanie:focus-visible {
  outline: 2px solid var(--bone-dim);
  outline-offset: -2px;
}

.beanie canvas,
.beanie__poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.beanie__poster {
  object-fit: contain;
  pointer-events: none;
  transition: opacity .4s ease;
}

.beanie canvas {
  opacity: 0;
  transition: opacity .4s ease;
}

.beanie.is-live canvas { opacity: 1; }
.beanie.is-live .beanie__poster { opacity: 0; }

/* ───────── Низ ───────── */

.drop {
  grid-row: 3;
  grid-column: 1;
  align-items: flex-end;
}

.drop__title {
  margin: 0;
  font: 700 clamp(1rem, .85rem + .5vw, 1.3rem)/1.15 var(--f-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.drop__title span {
  display: block;
  color: var(--bone-dim);
}

.drop__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 3.25rem;
  padding: 0 1.5rem;
  background: var(--bone);
  color: var(--ink);
  font: 600 .95rem/1 var(--f-ui);
  letter-spacing: .01em;
  text-decoration: none;
  transition: background-color .2s;
  -webkit-tap-highlight-color: transparent;
}

.drop__cta svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .35s var(--ease-out);
}

@media (hover: hover) {
  .drop__cta:hover { background: #fff; }
  .drop__cta:hover svg { transform: translate(2px, -2px); }
}

.drop__cta:active { background: #d9d8d1; }

/* ───────── Телефон и вертикальные экраны ───────── */

@media (max-width: 767px), (orientation: portrait) {
  .stage {
    --split: 0px;
    grid-row: 2;
    min-height: 56svh;
  }

  .mark {
    top: 0;
    translate: -50% 0;
    font-size: min(30vw, 15rem);
  }

  /* шапка занимает всё место под логотипом */
  .beanie {
    top: calc(min(30vw, 15rem) * .9);
    bottom: 0;
    translate: -50% 0;
    width: 100%;
    aspect-ratio: auto;
  }
}

@media (max-width: 767px) {
  .drop {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding-top: .75rem;
  }

  .drop__title span { display: inline; }
}

/* ───────── Появление ───────── */

@media (prefers-reduced-motion: no-preference) {
  .mark { animation: mark-in 1.1s var(--ease-out) both; }
  .beanie { animation: hat-in 1.2s var(--ease-out) .15s both; }
  .bar, .drop { animation: fade .9s ease .7s both; }
}

@keyframes mark-in {
  from { opacity: 0; scale: 1.06; }
}

@keyframes hat-in {
  from { opacity: 0; transform: translateY(4%) scale(.96); }
}

@keyframes fade {
  from { opacity: 0; }
}