:root {
  --bg: #0a0a0a;
  --fg: #ffffff;
  --muted: #9a9a9a;
  --line: rgba(255, 255, 255, 0.14);
  --red: #e11d2a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage { position: fixed; inset: 0; overflow: hidden; }

.container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 64px);
}
.bar { display: flex; justify-content: space-between; align-items: center; }

/* ── Portrait ─────────────────────────────── */
/* Размытая копия снимка — заполняет боковые поля, без резкого края */
.portrait-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #0a0a0a url("assets/portrait.png") no-repeat center center;
  background-size: cover;
  filter: grayscale(1) blur(46px) brightness(0.42) saturate(0.85);
  transform: scale(1.25);
}
/* Чёткое фото: подогнано по высоте, боковые края растворяются в размытую подложку */
.portrait {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent url("assets/portrait.png") no-repeat center center;
  background-size: auto 100%;
  filter: grayscale(1) contrast(1.04) brightness(0.98);
  transform: scale(1.02);
  opacity: 0;
  animation: fadein 1.6s ease 0.1s forwards;
  will-change: transform;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
}

/* ── Scrim for legibility ─────────────────── */
.scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(0deg, rgba(7,7,7,0.94) 0%, rgba(7,7,7,0.3) 28%, rgba(7,7,7,0) 46%),
    linear-gradient(90deg, rgba(7,7,7,0.55) 0%, rgba(7,7,7,0) 42%);
  pointer-events: none;
}

/* ── Red diagonal accent ──────────────────── */
.accent {
  position: absolute;
  left: -8%;
  bottom: 20%;
  width: 86%;
  height: 92px;
  background: linear-gradient(90deg, transparent 0%, var(--red) 28%, #ff414d 58%, transparent 100%);
  transform: rotate(-17deg);
  transform-origin: left center;
  z-index: 2;
  opacity: 0;
  filter: blur(0.4px);
  box-shadow: 0 0 70px rgba(225, 29, 42, 0.45);
  pointer-events: none;
  animation: slash 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}
.accent::after {
  content: "";
  position: absolute;
  left: 6%;
  top: -10px;
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 120, 130, 0.8), transparent);
}

/* ── Decorative rings ─────────────────────── */
.ring {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  z-index: 4;
  opacity: 0;
  animation: fadein 1.2s ease 1s forwards;
}
.ring--1 { width: 14px; height: 14px; top: 34%; right: 26%; }
.ring--2 { width: 9px; height: 9px; top: 62%; right: 18%; border-color: var(--red); }

/* ── Top bar ──────────────────────────────── */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  padding-top: clamp(20px, 3vw, 34px);
  opacity: 0;
  animation: fadein 1s ease 0.2s forwards;
}
.brand { font-weight: 800; letter-spacing: 0.32em; font-size: 18px; }
.meta { font-size: 11px; letter-spacing: 0.28em; color: var(--muted); text-transform: uppercase; }

/* ── Hero ─────────────────────────────────── */
.hero {
  position: absolute; left: 0; right: 0;
  bottom: clamp(72px, 15vh, 168px);
  z-index: 4;
}
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted);
  margin-bottom: clamp(16px, 2.2vw, 26px);
  opacity: 0;
  animation: fadein 1s ease 0.3s forwards;
}
.eyebrow::before { content: ""; width: 46px; height: 1px; background: var(--red); }

.headline {
  font-weight: 900; line-height: 0.84; letter-spacing: -0.02em;
  text-transform: uppercase;
  font-size: clamp(3.2rem, 13vw, 10rem);
}
.headline span { display: block; overflow: hidden; }
.headline i {
  display: block; font-style: normal;
  transform: translateY(110%);
  animation: rise 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.headline span:nth-child(1) i { animation-delay: 0.15s; }
.headline span:nth-child(2) i { animation-delay: 0.28s; color: var(--red); }
.headline span:nth-child(3) i { animation-delay: 0.41s; }

.subline {
  margin-top: clamp(18px, 2.6vw, 32px);
  font-size: clamp(13px, 1.4vw, 17px);
  color: #d8d8d8; letter-spacing: 0.02em; max-width: 40ch;
  opacity: 0;
  animation: fadein 1s ease 0.7s forwards;
}

/* ── Vertical labels ──────────────────────── */
.vlabel {
  position: absolute; top: 50%; z-index: 5;
  font-size: 10px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--muted);
  writing-mode: vertical-rl;
  opacity: 0;
  animation: fadein 1s ease 0.9s forwards;
}
.vlabel--l { left: clamp(14px, 2.2vw, 30px); transform: translateY(-50%); }
.vlabel--r { right: clamp(14px, 2.2vw, 30px); transform: translateY(-50%) rotate(180deg); }

/* ── Bottom bar ───────────────────────────── */
.bottombar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding-bottom: clamp(18px, 2.6vw, 30px);
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted);
  opacity: 0;
  animation: fadein 1s ease 1s forwards;
}
.bottombar .bar { justify-content: flex-start; gap: 14px; }
.sep { display: inline-flex; align-items: center; }
.dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }

/* ── Grain ────────────────────────────────── */
.grain {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Animations ───────────────────────────── */
@keyframes rise { to { transform: translateY(0); } }
@keyframes fadein { to { opacity: 1; } }
@keyframes slash { from { opacity: 0; transform: rotate(-17deg) translateX(-40px); } to { opacity: 0.92; transform: rotate(-17deg) translateX(0); } }

/* ── Mobile ───────────────────────────────── */
@media (max-width: 760px) {
  .portrait { background-position: 73% center; }
  .scrim {
    background: linear-gradient(0deg, rgba(7,7,7,0.96) 8%, rgba(7,7,7,0.3) 40%, rgba(7,7,7,0) 60%);
  }
  .vlabel { display: none; }
  .headline { font-size: clamp(2.9rem, 17vw, 4.6rem); }
  .hero { bottom: clamp(58px, 13vh, 100px); }
  .subline { max-width: 32ch; }
  .accent { height: 64px; bottom: 68%; }
  .ring--1 { right: 16%; top: 30%; }
  .ring--2 { right: 30%; top: 24%; }
}

/* ── Планшеты / iPad (портрет) ───────────── */
@media (min-width: 761px) and (max-width: 1024px) {
  .portrait { background-position: 73% center; }
  .accent { bottom: 55%; }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; }
  .portrait { transform: scale(1.02); opacity: 1; }
}