/* ============================================
   STATUS — баннер на один экран
   BUILT. NOT SHOWN. / ESTD. 2026 / UFA LOCAL BRAND
   ============================================ */

:root{
  --black:  #0a0a0a;
  --white:  #f2f2f0;
  --grey:   #8a8a86;
  --line:   rgba(242,242,240,.22);
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'Space Grotesk', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html, body{ height:100%; }

body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:var(--white); color:var(--black); }

.scene{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(20px, 4vw, 48px);
  overflow:hidden;
  isolation:isolate;
}

/* ---------- фон ---------- */

.bg{
  position:absolute; inset:-4%;
  z-index:-3;
  background:
    url('../img/bg.png') center 30% / cover no-repeat,
    radial-gradient(120% 120% at 20% 40%, #1a1a1a 0%, #0a0a0a 70%);
  filter:grayscale(1) contrast(1.05) brightness(.8);
  will-change:transform;
}

.shade{
  position:absolute; inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.55) 42%, rgba(10,10,10,.15) 78%),
    linear-gradient(0deg, rgba(10,10,10,.75) 0%, rgba(10,10,10,0) 28%, rgba(10,10,10,0) 72%, rgba(10,10,10,.55) 100%);
}

/* плёночное зерно */
.grain{
  position:absolute; inset:0;
  z-index:-1;
  opacity:.07;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- верхняя / нижняя рамки ---------- */

.frame{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.frame-top{ padding-bottom:24px; }
.frame-bottom{ padding-top:24px; }

.brand-mark{
  font-family:var(--font-display);
  font-size:clamp(22px, 2.4vw, 30px);
  letter-spacing:.08em;
  line-height:1;
}
.brand-mark span{ color:var(--grey); }

.frame-meta{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--grey);
  text-transform:uppercase;
  white-space:nowrap;
}

/* ---------- вертикальная строка справа ---------- */

.side-note{
  position:absolute;
  right:clamp(20px, 4vw, 48px);
  top:50%;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.32em;
  color:rgba(242,242,240,.35);
  text-transform:uppercase;
  user-select:none;
}

/* ---------- центр ---------- */

.hero{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:860px;
  padding:40px 0;
}

.kicker{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.28em;
  color:var(--grey);
  text-transform:uppercase;
  margin-bottom:clamp(18px, 3vh, 28px);
}

.headline{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(56px, 13vw, 168px);
  line-height:.92;
  letter-spacing:.015em;
  text-transform:uppercase;
}

.subline{
  margin-top:clamp(20px, 3.5vh, 32px);
  font-size:clamp(14px, 1.4vw, 16px);
  line-height:1.7;
  color:rgba(242,242,240,.72);
  max-width:44ch;
}

/* ---------- кнопки ---------- */

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:clamp(28px, 5vh, 44px);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 30px;
  font-family:var(--font-body);
  font-size:13px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--line);
  transition:background .35s ease, color .35s ease, border-color .35s ease;
}

.btn-solid{ background:var(--white); color:var(--black); border-color:var(--white); }
.btn-solid:hover{ background:transparent; color:var(--white); }

.btn-line{ background:transparent; color:var(--white); }
.btn-line:hover{ background:var(--white); color:var(--black); border-color:var(--white); }

.btn:focus-visible{ outline:1px solid var(--white); outline-offset:4px; }

/* ---------- появление ---------- */

.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .9s ease, transform .9s ease;
}
.reveal.in{ opacity:1; transform:none; }

/* ---------- адаптив ---------- */

@media (max-width:720px){
  .side-note{ display:none; }
}
@media (max-width:560px){
  .frame-coords{ display:none; }
  .frame-top .frame-meta{ font-size:10px; letter-spacing:.1em; }
  .btn{ width:100%; justify-content:center; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .bg{ transform:none !important; }
}