/* ==========================================================================
   NEW ART production — страница-заглушка
   1. Шрифты
   2. Переменные и база
   3. Шапка
   4. Разделитель
   5. Основная сцена и иллюстрации
   6. Контент
   7. Анимации
   8. Адаптив
   ========================================================================== */

/* ---------- 1. Шрифты -----------------------------------------------------
   Styrene A LC — лицензионный шрифт (Commercial Type).
   Положите файлы в папку /fonts с указанными именами — они подхватятся
   автоматически. Пока файлов нет, используется запасной Inter.          */

@font-face{
  font-family:'Styrene A LC';
  src:url('../fonts/StyreneALC-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Styrene A LC';
  src:url('../fonts/StyreneALC-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Styrene A LC';
  src:url('../fonts/StyreneALC-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---------- 2. Переменные и база ---------------------------------------- */

:root{
  --ink:#1a1a1a;
  --ink-soft:#333333;
  --accent:#ffae00;
  --paper:#ffffff;
  --font:'Styrene A LC','Inter','Helvetica Neue',Arial,sans-serif;

  /* реальная высота экрана (учитывает адресную строку на мобильных),
     значение подставляет js/main.js */
  --vh:1vh;
}

*{box-sizing:border-box;}

html,body{margin:0;padding:0;}

body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  height:100vh;            /* десктоп: ровно в высоту экрана */
  height:calc(var(--vh) * 100);
  overflow:hidden;         /* десктоп: без скролла */
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ---------- 3. Шапка ----------------------------------------------------- */

.header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  padding:clamp(14px,2.6vh,34px) clamp(24px,4vw,64px) clamp(12px,1.8vh,22px);
  flex:none;
}

.logo{
  height:clamp(38px,5.2vh,58px);
  width:auto;
  display:block;
}

.tagline{
  text-align:right;
  line-height:1.2;
  max-width:52%;
}
.tagline__lead{
  font-weight:600;
  font-size:clamp(15px,1.55vw,26px);
  letter-spacing:.04em;
  color:var(--ink);
}
.tagline__sub{
  margin-top:6px;
  font-weight:400;
  font-size:clamp(10px,1.05vw,15px);
  letter-spacing:.06em;
  color:var(--ink-soft);
}

/* ---------- 4. Разделитель ----------------------------------------------- */

.divider{
  height:4px;
  width:100%;
  flex:none;
  background:var(--accent);
  transform-origin:left center;
  animation:grow .85s cubic-bezier(.2,.7,.2,1) both;
}

/* ---------- 5. Основная сцена и иллюстрации ------------------------------ */

.stage{
  position:relative;
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(18px,3.6vh,56px) clamp(20px,4vw,48px);
  overflow:hidden;
}

/* иллюстрации прижаты к нижним внешним углам */
.arch{
  position:absolute;
  bottom:0;
  height:100%;
  width:auto;
  z-index:0;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
  animation:fade 1.1s ease .15s both;
}
.arch--left{left:0;}
.arch--right{right:0;}

/* ---------- 6. Контент --------------------------------------------------- */

.content{
  position:relative;
  z-index:1;
  width:100%;
  max-width:690px;
  text-align:center;
}

.services{
  list-style:none;
  margin:0;
  padding:0;
}
.services li{
  font-weight:400;
  font-size:clamp(22px,min(3vw,4.7vh),50px);
  letter-spacing:.005em;
  line-height:1.18;
  color:var(--ink);
  text-transform:uppercase;
}

.note{
  margin-top:clamp(22px,4.8vh,74px);
  font-weight:400;
  font-size:clamp(15px,min(1.55vw,2.5vh),25px);
  line-height:1.45;
  letter-spacing:.01em;
  text-transform:uppercase;
}

.contact{
  margin-top:clamp(16px,3.2vh,44px);
  font-weight:400;
  font-size:clamp(15px,min(1.55vw,2.5vh),25px);
  line-height:1.6;
  letter-spacing:.01em;
  text-transform:uppercase;
}

.contact__link{
  font-weight:600;
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-thickness:2px;
  white-space:nowrap;
  transition:color .2s ease;
}
.contact__link:hover,
.contact__link:focus-visible{color:var(--accent);}

.cta{
  margin-top:clamp(16px,3.2vh,44px);
  display:inline-flex;
  align-items:center;
  gap:12px;
  border:2px solid var(--ink);
  padding:clamp(11px,1.6vh,18px) clamp(26px,3vw,44px);
  font-weight:500;
  font-size:clamp(15px,min(1.35vw,2.1vh),22px);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  background:transparent;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;
}
.cta:hover,
.cta:focus-visible{
  background:var(--accent);
  border-color:var(--accent);
  color:#1a1a1a;
}
.cta__icon{
  flex:none;
  transition:transform .25s ease;
}
.cta:hover .cta__icon,
.cta:focus-visible .cta__icon{transform:translate(2px,-2px);}

/* ---------- 7. Анимации -------------------------------------------------- */

.content > *{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;}
.content .services{animation-delay:.28s;}
.content .note    {animation-delay:.40s;}
.content .contact {animation-delay:.50s;}
.content .cta     {animation-delay:.60s;}

@keyframes grow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

/* ---------- 8. Адаптив --------------------------------------------------- */

@media (max-width:1200px){
  .arch{height:80%;opacity:.5;}
  .content{max-width:600px;}
}

@media (max-width:900px){
  .arch{height:62%;opacity:.14;}
}

@media (max-width:640px){
  /* телефоны: страница дышит и скроллится */
  body{height:auto;min-height:100vh;overflow-y:auto;}

  .header{flex-direction:column;align-items:flex-start;gap:12px;padding:20px 22px 15px;}
  .logo{height:46px;}
  .tagline{text-align:left;max-width:100%;}
  .tagline__lead{font-size:18px;}
  .tagline__sub{font-size:12px;margin-top:5px;}

  .stage{
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    padding:30px 22px 0;
    overflow:visible;
  }

  .content{order:1;max-width:100%;}
  .services li{font-size:clamp(24px,7vw,34px);line-height:1.22;}
  .note{margin-top:32px;font-size:clamp(15px,4.4vw,19px);}
  .contact{margin-top:24px;font-size:clamp(15px,4.4vw,19px);}
  .contact__link{white-space:normal;}
  .cta{margin-top:26px;font-size:15px;padding:14px 30px;}

  /* иллюстрации перестроены в нижнюю ленту-основание */
  .arch-wrap{
    order:2;
    position:static;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:0;
    width:100%;
    margin-top:clamp(30px,9vw,54px);
  }
  .arch{
    position:static;
    left:auto;right:auto;bottom:auto;
    height:auto;
    width:50%;
    max-width:220px;
    opacity:1;
    object-fit:contain;
    object-position:bottom center;
  }
}

@media (prefers-reduced-motion:reduce){
  .divider,
  .arch,
  .content > *{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}