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

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

body {
  min-height: 100dvh;
  font-family: 'Raleway', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 900;
  font-variant-numeric: lining-nums tabular-nums;
  color: #fff;
  background: #1a1a1a;
}

/* ==== FIXED BACKGROUND ==== */

.bg {
  position: fixed;
  inset: 0;
  background-image: url("./images/bottlebg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
}

.bg-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
  z-index: -1;
}

/* ==== LOGO (fixed corner) ==== */

.logo {
  position: fixed;
  top: clamp(16px, 3vw, 40px);
  left: clamp(16px, 3vw, 40px);
  display: block;
  line-height: 0;
  z-index: 10;
}

.logo-svg {
  width: clamp(96px, 11vw, 176px);
  height: auto;
  display: block;
  overflow: visible;
}

.logo-svg path,
.logo-svg polygon {
  fill: #ffffff;
}

.logo-svg .layer {
  display: none;
}

.logo-svg .layer.is-active {
  display: block;
}

/* ==== CONTENT (single column, unified layout) ==== */

.content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 4vh, 48px);
  padding: 75vh clamp(16px, 3vw, 40px) clamp(48px, 10vh, 96px);
  z-index: 1;
}

/* ==== WORDMARK ==== */

.wordmark {
  position: relative;
  width: 100%;
  max-width: 70vw;
}

.wm-name {
  display: block;
  width: 100%;
  height: auto;
}

.wm-flag {
  position: absolute;
  top: -6%;
  right: 4%;
  width: 24%;
  height: auto;
  pointer-events: none;
}

.wm-gerb {
  position: absolute;
  top: 20%;
  right: -2%;
  width: 28%;
  height: auto;
  pointer-events: none;
}

/* ==== BLOCKS GRID (3 cols × 2 rows, middle 50% wider) ==== */

.blocks {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(12px, 1.8vh, 24px);
  width: 100%;
  max-width: 70vw;
}

.block {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: clamp(10px, 1.6vh, 20px) clamp(6px, 1vw, 14px);
  border: 9px solid #fff;
  min-height: clamp(90px, 14vh, 140px);
  text-align: center;
  line-height: 1;
  overflow: visible;
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  transition: opacity 0.5s ease-out, transform 0.55s cubic-bezier(0.34, 1.4, 0.5, 1);
}

.block.is-visible {
  opacity: 1;
  transform: scale(1);
}

.block .main {
  font-weight: 900;
  font-size: clamp(24px, 2.6vw, 42px);
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.block .desc {
  font-weight: 900;
  font-size: clamp(9px, 0.85vw, 12px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Decor images (gerb/flag) inside wide blocks — overflow beyond right border */

.block-decor {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  width: auto;
}

.block-wide {
  align-items: flex-start;
  text-align: left;
  padding-left: clamp(12px, 1.5vw, 24px);
  padding-right: 34%;
}

.block-decor-gerb {
  height: 115%;
  bottom: 8%;
  right: 2%;
}

.block-decor-flag {
  height: 85%;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.block .main-hand {
  font-family: 'Tangerine', cursive;
  font-weight: 700;
  color: #fff;
  font-size: clamp(96px, 8.8vw, 140px);
  line-height: 0.3;
  text-transform: none;
  letter-spacing: 0.02em;
  transform: translateY(-0.14em);
}

/* ==== TAGLINE (stretched text, full width) ==== */

.tagline {
  width: 100%;
  max-width: 70vw;
  opacity: 0.7;
}

.tagline-svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.tagline-svg-desktop { aspect-ratio: 1000 / 160; }
.tagline-svg-mobile  { display: none; aspect-ratio: 1000 / 378; }

.tagline-svg text {
  font-family: 'Raleway', sans-serif;
  font-weight: 100;
  font-size: 100px;
  fill: #fff;
}

/* ==== MOBILE PORTRAIT (< 600px) ==== */

@media (max-width: 600px) {
  .content {
    padding-left: 16px;
    padding-right: 16px;
  }

  .wordmark,
  .blocks,
  .tagline {
    max-width: 100%;
  }

  .blocks {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 12px;
  }

  .blocks > .block:nth-child(1) { order: 1; } /* мёд    */
  .blocks > .block:nth-child(3) { order: 2; } /* 2025   */
  .blocks > .block:nth-child(4) { order: 3; } /* ягоды  */
  .blocks > .block:nth-child(6) { order: 4; } /* 2026   */
  .blocks > .block:nth-child(2) { order: 5; flex-direction: column-reverse; } /* тужерино — main сверху, desc снизу */
  .blocks > .block:nth-child(5) { order: 6; } /* рецепт */

  .block {
    border-width: 6px;
    min-height: 100px;
  }

  .block-decor { display: none; }

  .block-wide {
    padding-right: clamp(6px, 1vw, 14px);
    align-items: center;
    text-align: center;
  }

  .block .main      { font-size: 26px; }
  .block .desc      { font-size: 10px; }
  .block .main-hand { font-size: 104px; }

  .logo-svg {
    width: 128px;
  }

  .tagline-svg-desktop { display: none; }
  .tagline-svg-mobile  { display: block; }
}