* {
  color: white;
}

body {
  overflow-x: hidden;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

.section-center {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  z-index: 6;
  text-align: center;
  transform: translateY(-50%);
}

[type="checkbox"]:checked,
[type="checkbox"]:not(:checked) {
  position: absolute;
  left: -9999px;
}

.menu-icon:checked+label,
.menu-icon:not(:checked)+label {
  position: fixed;
  top: 63px;
  right: 75px;
  display: block;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 10;
}

.menu-icon:checked+label:before,
.menu-icon:not(:checked)+label:before {
  position: absolute;
  content: '';
  display: block;
  width: 30px;
  height: 20px;
  z-index: 20;
  top: 0;
  left: 0;
  border-top: 2px solid #ececee;
  border-bottom: 2px solid #ececee;
  transition: border-width 100ms 1500ms ease,
    top 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1),
    height 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1),
    background-color 200ms ease,
    transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-icon:checked+label:after,
.menu-icon:not(:checked)+label:after {
  position: absolute;
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  z-index: 20;
  top: 10px;
  right: 4px;
  background-color: #ececee;
  margin-top: -1px;
  transition: width 100ms 1750ms ease,
    right 100ms 1750ms ease,
    margin-top 100ms ease,
    transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-icon:checked+label:before {
  top: 10px;
  transform: rotate(45deg);
  height: 2px;
  background-color: #ececee;
  border-width: 0;
  transition: border-width 100ms 340ms ease,
    top 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    height 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1),
    background-color 200ms 500ms ease,
    transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-icon:checked+label:after {
  width: 30px;
  margin-top: 0;
  right: 0;
  transform: rotate(-45deg);
  transition: width 100ms ease,
    right 100ms ease,
    margin-top 100ms 500ms ease,
    transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1);
}

.nav {
  pointer-events: none;
  position: fixed;
  top: 33px;
  right: 50px;
  display: block;
  width: 80px;
  height: 80px;
  padding: 0;
  margin: 0;
  z-index: 9;
  overflow: hidden;
  box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.3);
  background-color: #353746;
  animation: border-transform 7s linear infinite;
  transition: top 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1),
    right 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 250ms 1100ms ease,
    width 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1),
    height 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

.lang-switch li button {
  color: black;
  border-radius: 20px;
}

@keyframes border-transform {

  0%,
  100% {
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
  }

  14% {
    border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
  }

  28% {
    border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
  }

  42% {
    border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
  }

  56% {
    border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
  }

  70% {
    border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
  }

  84% {
    border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
  }
}

.menu-icon:checked~.nav {
  pointer-events: auto;
  animation-play-state: paused;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  width: 200%;
  height: 200%;
  transition: top 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1),
    right 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 250ms 700ms ease,
    width 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1),
    height 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1);
}

.nav ul {
  position: absolute;
  top: 50%;
  left: 0;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  z-index: 6;
  text-align: center;
  transform: translateY(-50%);
  list-style: none;
}

.nav ul li {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 10px 0;
  text-align: center;
  list-style: none;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: all 250ms linear;
}

.nav ul li:nth-child(1) {
  transition-delay: 200ms;
}

.nav ul li:nth-child(2) {
  transition-delay: 150ms;
}

.nav ul li:nth-child(3) {
  transition-delay: 100ms;
}

.nav ul li:nth-child(4) {
  transition-delay: 50ms;
}

.nav ul li a {
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  font-size: 3vh;
  text-transform: uppercase;
  line-height: 1.2;
  font-weight: 800;
  display: inline-block;
  position: relative;
  color: #ececee;
  transition: all 250ms linear;
}

.nav ul li a:hover {
  text-decoration: none;
  color: #ffeba7;
}

.nav ul li a:after {
  display: block;
  position: absolute;
  top: 50%;
  content: '';
  height: 2vh;
  margin-top: -1vh;
  width: 0;
  left: 0;
  background-color: #353746;
  opacity: 0.8;
  transition: width 250ms linear;
}

.nav ul li a:hover:after {
  width: 100%;
}

.menu-icon:checked~.nav ul li {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 350ms ease,
    transform 250ms ease;
}

.menu-icon:checked~.nav ul li:nth-child(1) {
  transition-delay: 1400ms;
}

.menu-icon:checked~.nav ul li:nth-child(2) {
  transition-delay: 1480ms;
}

.menu-icon:checked~.nav ul li:nth-child(3) {
  transition-delay: 1560ms;
}

.menu-icon:checked~.nav ul li:nth-child(4) {
  transition-delay: 1640ms;
}

@media screen and (max-width: 991px) {

  .menu-icon:checked+label,
  .menu-icon:not(:checked)+label {
    right: 55px;
  }

  .nav {
    right: 30px;
  }

  .nav ul li a {
    font-size: 3vh;
  }
}

body {
  background-color: rgb(24, 23, 23);
  margin: 0;
  padding: 0;
  display: block;
}

.logo-img img {
  position: relative;
  width: 80px;
  height: auto;
  display: block;
  margin: 10px;
}

/* ===== Общая стилизация ===== */

svg {
  font-family: 'Russo One', sans-serif;
  width: 100%; height: 100%;
}
svg text {
  text-transform: uppercase;
  animation: stroke 5s infinite alternate;
  stroke-width: 2;
  stroke: #365fa0;
  font-size: 250px;
}
@keyframes stroke {
  0%   {
    fill: rgba(72,138,20,0); stroke: rgba(54,95,160,1);
    stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2;
  }
  70%  {fill: rgba(72,138,20,0); stroke: rgba(54,95,160,1); }
  80%  {fill: rgba(72,138,20,0); stroke: rgba(54,95,160,1); stroke-width: 3; }
  100% {
    fill: rgba(72,138,204,1); stroke: rgba(54,95,160,0); 
    stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
  }
}

.about {
  padding: 20px 8%;
  background: #0f0f0f;
  color: white;
  overflow: hidden;
}

.about-container {
  align-items: center;
  gap: 80px;
  max-width: 1300px;
  margin: 0 auto;
}

.about-text {
  max-width: 500px;
}

.about-text h2 {
  font-size: 64px;
  margin-bottom: 30px;
  letter-spacing: 2px;
}

.about-text p {
  font-size: 18px;
  line-height: 1.7;
}

/* ===== Текст reveal ===== */

.reveal-text {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  letter-spacing: 1.7px;
  font-weight: 600;
  opacity: 0;
  transform: translate3d(0, 270px, 0);
  transition:
    transform 3s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 6s cubic-bezier(0.55, 1, 0.36, 1);
  will-change: transform, opacity;
}

.reveal-text.show {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.delay-1 {
  transition-delay: 0.7s;
}

/* ===== Картинка reveal из центра ===== */

.about-image {
  overflow: hidden;
  width: 600px;
}

.about-image img {
  width: 70%;
  display: block;
  position: relative;
  right: 70px;

  clip-path: inset(0 50% 0 50%);
  transform: scale(1.1);

  transition:
    clip-path 4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 4s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: clip-path, transform;
}

.about-image.show img {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

.cup {
  width: 100%;
  max-width: 400px;
  height: auto;
  display: block;
  margin: 0 auto;
  position: relative;
  animation: floatCup 3s ease-out infinite;
}

@keyframes floatCup {
  0% {
    transform: translate(-50%, -50%) translateY(0px);
  }

  50% {
    transform: translate(-30%, -50%) translateY(-20px);
  }

  100% {
    transform: translate(-50%, -50%) translateY(0px);
  }
}

.cup-section {
  display: flex;
  justify-content: center;
  padding: 150px 0 50px 0;
}

@media (max-width: 768px) {
  .cup {
    max-width: 100%;
    height: auto;
    margin-left: 300px;
    display: block;
  }
}

.text p {
  font-size: 25px;
  letter-spacing: 1.9px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: 700;
}

.coffee-footer {
  background: linear-gradient(to bottom, #f5e6d3 0%, #6f4e37 40%, #3e2723 100%);
  color: #fff;
  padding: 60px 20px;
  font-family: 'Poppins', sans-serif;
}

.coffee-container {
  max-width: 1200px;
  margin: auto;
}

/* Карточки */
.coffee-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 20px;
  margin-bottom: 50px;
}

.coffee-card {
  background: transparent;
  color: #3e2723;
  text-align: center;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  transition: 0.3s;
}

.coffee-card h4 {
  color: black;
  font-weight: 700;
}

.coffee-card i {
  font-size: 28px;
  margin-bottom: 15px;
  color: #441c00;
}

.coffee-card:hover {
  transform: translateY(-8px);
}

/* Нижний блок */
.coffee-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.coffee-info {
  flex: 1;
}

.coffee-info h2 {
  font-size: 28px;
  margin-bottom: 15px;
}

.coffee-info p {
  margin-bottom: 20px;
  line-height: 1.6;
}

/* Соцсети */
.coffee-socials a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  margin-right: 10px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  transition: 0.3s;
  text-decoration: none;
}

.coffee-socials a:hover {
  background: #d7a86e;
  color: #3e2723;
}

.scroll-section {
  max-width: 900px;
  margin: 100px auto;
  transform: translateZ(0);
}

.scroll-section p {
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1.6;
  font-weight: 600;
  margin-bottom: 20px;
}

/* Word styling */
.word {
  display: inline-block;
  margin-right: 8px;

  background: linear-gradient(90deg, #f1a163 0%, #f65c3b 50%, #d4d4d8 50%, #d4d4d8 100%);

  background-size: 200% 100%;
  background-position: 100% 0;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  transition: background-position 0.20s linear;
}

.private {
  background-color: black;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 20px;
  text-align: center;
  font-weight: 800;
}