/* =============================================================================
   global.css — общие стили всего сайта
   Переменные, типографика, reset, шапка, футер, плеер
   ============================================================================= */

/* ─── 1. Дизайн-токены (CSS Custom Properties) ─────────────────────────────── */
:root {
  /* Цвета */
  --bg-default:        #FFFFFF;
  --bg-muted:          #F3EFEF;
  --bg-image-cover:    #F3EFEF;
  --bg-footer:         #1C191C;
  --overlay:           rgba(101, 90, 108, 0.4);
  --border-default:    #ebe8e8;
  --text-default:      #292429;
  --text-hover:        #000000;
  --text-footer:       #FFFFFF;

  /* Шрифты */
  /*--font-serif:       'EB Garamond', Georgia, serif;  Старый вараинт */
  --font-serif:         'Literata', Georgia, serif;
  --font-mono:          'IBM Plex Mono', 'Courier New', monospace;

  /* Типографика — Desktop */
  --text-title-size:   1.08rem;
  --text-title-lh:     1.45;
  --text-p-size:       1.15rem;
  --text-p-lh:         1.8;
  --text-mono-size:    0.95rem;
  --text-mono-lh:      1.3;

  /* Размеры статичных якорей */
  --header-height:     64px;
  --footer-height:     44px;
  --projects-height:   47vh;

  /* Ширины зон */
  --zone-craft-width:  30vw;
  --zone-poetry-width: 25vw;

  /* Анимации */
  --transition-opacity:   opacity 0.3s ease;
  --transition-transform: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-transform-smooth-scroll: transform 0.3s ease-out;

  /* z-index слои */
  --z-zones:    5;
  --z-projects: 10;
  --z-header:   30;
  --z-footer:   30;
  --z-active:   20;
  --z-sheet:    40;
  --z-overlay:  35;
}


/* ─── 2. CSS Reset & базовые стили ──────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  background-color:          var(--bg-default);
  color:                     var(--text-default);
  font-family:               var(--font-serif);
  font-size:                 var(--text-p-size);
  line-height:               var(--text-p-lh);
  font-weight:               300;
  letter-spacing:            0.01em;
  -webkit-font-smoothing:    antialiased;
  -moz-osx-font-smoothing:   grayscale;
  text-rendering:            optimizeLegibility;
  font-smooth:               always;
  overflow-x:                hidden;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

img {
  display:    block;
  max-width:  100%;
  height:     auto;
}

a {
  color:           inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

hr {
  border:     none;
  border-top: 1px solid var(--border-default);
}

button {
  background:  none;
  border:      none;
  cursor:      pointer;
  font-family: inherit;
  color:       inherit;
  padding:     0;
}

.visually-hidden {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0, 0, 0, 0);
  white-space: nowrap;
  border:     0;
}

.mono {
  font-family:  var(--font-mono);
  font-size:    var(--text-mono-size);
  line-height:  var(--text-mono-lh);
  font-weight:  400;
}


/* ─── 3. Шапка (Header) ─────────────────────────────────────────────────────── */
.site-header {
  position:         fixed;
  top:              0;
  left:             0;
  width:            100vw;
  height:           var(--header-height);
  background-color: var(--bg-default);
  z-index:          var(--z-header);
  opacity:          1;
}

.site-header::after {
  content:        '';
  position:       absolute;
  top:            50%;
  left:           0;
  right:          0;
  height:         1px;
  background:     var(--border-default);
  pointer-events: none;
  z-index:        0;
}

.header-nav {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          100%;
  padding:         0;
  position:        relative;
}

.header-zone-btn {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  pointer-events:  auto;
  background:      var(--bg-default);
  border:          none;
  padding:         16px 16px 2px;
  min-width:       65px;
  min-height:      44px;
  z-index:         1;
}

.header-zone-btn--craft {
  left: 0;
}

.header-zone-btn--poetry {
  right: 0;
}

.header-zone-icon {
  display:        block;
  mix-blend-mode: multiply;
  width:          auto;
  height:         auto;
}

.header-zone-btn--craft .header-zone-icon {
  width:  78px;
  height: 46px;
}

.header-zone-btn--poetry .header-zone-icon {
  width:  110px;
  height: 46px;
}

.header-logo {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  background:      var(--bg-default);
  padding:         0 10px 0 14px;
  position:        relative;
  z-index:         1;
}

.header-logo img {
  width:      56px;
  height:     56px;
  object-fit: contain;
}

.header-zone-btn:hover .header-zone-icon {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}


/* ─── 4. Футер (Footer) ─────────────────────────────────────────────────────── */
.site-footer {
  position:         fixed;
  bottom:           0;
  left:             0;
  width:            100vw;
  height:           var(--footer-height);
  background-color: var(--bg-footer);
  color:            var(--text-footer);
  z-index:          var(--z-footer);
  opacity:          1;
}

.footer-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  height:          100%;
  padding:         0 40px;
}

.footer-contacts {
  display:     flex;
  align-items: center;
  gap:         16px;
}

.footer-link {
  font-family:     var(--font-mono);
  font-size:       var(--text-mono-size);
  line-height:     var(--text-p-lh);
  font-weight:     400;
  color:           var(--text-footer);
  will-change:     opacity;
  transition:      var(--transition-opacity);
}

.footer-link:hover {
  opacity: 0.7;
}

.footer-player {
  color:          var(--text-footer);
  letter-spacing: 0.02em;
}

.footer-timer {
  color: var(--text-footer);
}


/* ─── 5. Overlay ─────────────────────────────────────────────────────────────── */
.site-overlay {
  position:         fixed;
  inset:            0;
  background-color: var(--overlay);
  z-index:          var(--z-overlay);
  opacity:          0;
  pointer-events:   none;
  will-change:      opacity;
  transition:       var(--transition-opacity);
}

.site-overlay.is-visible {
  opacity:        1;
  pointer-events: auto;
}


/* ─── 6. Панель проекта (Project Sheet) ─────────────────────────────────────── */
.project-sheet {
  position:         fixed;
  bottom:           0;
  left:             var(--zone-craft-width);
  width:            calc(100vw - var(--zone-craft-width) - var(--zone-poetry-width));
  height:           calc(100vh - var(--header-height));
  background-color: var(--bg-default);
  z-index:          var(--z-sheet);
  transform:        translateY(100%);
  will-change:      transform;
  transition:       transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  overflow-y:       auto;
  border-top:       1px solid var(--border-default);
}

.project-sheet[hidden] {
  display: none;
}

.project-sheet.is-open {
  transform: translateY(0);
}

.project-sheet__bar {
  position:         sticky;
  top:              0;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  height:           48px;
  border-bottom:    1px solid var(--border-default);
  background-color: var(--bg-default);
}

.project-sheet__close {
  display:     flex;
  align-items: center;
  padding:     12px 24px;
  cursor:      pointer;
  will-change: opacity;
  transition:  var(--transition-opacity);
}

.project-sheet__close:hover {
  opacity: 0.5;
}

.project-sheet__content {
  padding: 40px;
}


/* ─── 7. Адаптив: Mobile / Tablet (max-width: 1080px) ───────────────────────── */
@media (max-width: 1080px) {

  :root {
    --text-title-size:  18px;
    --text-title-lh:    1.3;
    --text-p-size:      17px;
    --text-p-lh:        1.4;
    --text-mono-size:   12px;
    --text-mono-lh:     1.2;
    --header-height:    64px;
    --footer-height:    79px;
  }

  .header-nav {
    padding: 0 20px;
  }

  .header-zone-btn {
    cursor:          pointer;
    pointer-events:  auto;
    min-width:       65px;
    min-height:      48px;
    padding:         14px 20px;
  }

  .header-zone-btn--craft .header-zone-icon {
    width:  56px;
    height: 30px;
  }

  .header-zone-btn--poetry .header-zone-icon {
    width:  70px;
    height: 30px;
  }

  .site-header {
    width: 100vw;
    left:  0;
    transform: none;
  }

  .footer-inner {
    flex-direction: column;
    justify-content: center;
    gap:     12px;
    padding: 12px 20px;
    height:  auto;
    min-height: var(--footer-height);
  }

  .project-sheet {
    left:   0;
    width:  100vw;
    height: 90vh;
  }

  .project-sheet__content {
    padding: 24px 20px;
  }
}