@media (min-width: 1px) and (max-width: 360px) {
	.logo-img-pulse img {
        width: max(160vw, 400px);
	}

	.eyes-wrapper {
    width: min(90vw, 350px);
    display: flex;
    gap: clamp(24px, 5vw, 64px);
    }

  .logo-img-pulse img {
    width: max(80vw, 400px) !important;
  }

  .eyes-wrapper {
    width: min(90vw, 350px) !important;
    display: flex !important;
    gap: clamp(24px, 5vw, 64px) !important;
  }

  .corner-images {
    opacity: 0 !important;
  }

  .union {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    padding: 0 4% !important;
  }

  .tall-cont,
  .cent-cont,
  .right-cont,
  .bottom-cont {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
  }

  .cent-cont,
  .right-cont {
    aspect-ratio: auto !important;
  }

  .tall-cont {
    min-height: 800px !important;
  }

  .cent-cont {
    min-height: 560px !important;
  }

  .right-cont {
    min-height: 400px !important;
  }

  .bottom-cont {
    min-height: 200px !important;
    padding-left: 36px !important;
  }

  .curtain-box {
    height: 300px !important;
  }

  .txt-end {
    text-align: center;
    color: white;
    transform: scale(0.95);
    transition: opacity 0.8s ease, transform 0.8s ease;
    z-index: 2;
    opacity: 0;
    margin-top: 0px;
    position: relative;
    bottom:53%;
  }

  .txt-end p {
    font-family: "PastryChef";
    font-size: 28px !important;
    margin-bottom: 12px;
    z-index: 0;
  }

  .txt-end span {
    font-size: 17px;
    opacity: 0.8;
  }
  .theend{
    height: 700px;
  }
  .hand .gallery-curve {
    margin-left: 0px;
  }
  .petal-cont {
    width: 100% !important;
    height: 50% !important;
    position: absolute !important;
    left: -60% !important;
    top: -5% !important;
    transform: rotate(10deg) ;
  }

  .petal2-cont {
    width: 100% !important;
    height: 50% !important;
    position: absolute !important;
    right: -60% !important;
    top: -3% !important;
    transform: rotate(0deg) ;
  }

  .petal3-cont {
    width: 90% !important;
    height: 50% !important;
    position: absolute !important;
    right: -53% !important;
    top: 0% !important;
    transform: rotate(0deg) ;
  }

  .petal4-cont {
    width: 90% !important;
    height: 50% !important;
    position: absolute !important;
    left: -53% !important;
    top: 0 !important;
    transform: rotate(10deg) ;
  }

  .run-stroke {
    font-size: 50px !important;
  }

  .marquee-container {
    height: 100px !important;
    margin-top: 30px !important;
  }

  @keyframes marquee {
    0% { transform: translate3d(0,0,0)  }
    100% { transform: translate3d(-50%,0,0)}
  }

  .theend {
    margin-top: 50px !important;
  }

  .curtain-box:hover .curtain.left,
  .curtain-box:active .curtain.left {
    transform: translate(-130%, -50%) !important;
  }

  .curtain-box:hover .curtain.right,
  .curtain-box:active .curtain.right {
    transform: translate(30%, -50%) scaleX(-1) !important;
  }

  .curtain-box:hover .center-content,
  .curtain-box:active .center-content {
    opacity: 1 !important;
    transform: scale(1) !important;
    transition-delay: 0.5s !important;
  }

  .hand-pazl {
    flex-direction: column !important;
    margin-top: 100px !important;
  }

  .hand,
  .pazl {
    width: 100% !important;
    aspect-ratio: 1 / 2 !important;
    max-height: clamp(320px, 100vw, 900px) !important;
  }
  .pazl{
    min-width: 100%;
  }

  .hand {
    border-width: 8px !important;
  }

  .hand .gallery-curve {
    transform: scale(0.65) !important;
  }

  .part {
    animation: puzzleMove2 5s ease-in-out infinite !important;
  }

  @keyframes puzzleMove2 {
    0% { transform: translate(-50%, -50%) scale(1.3)  }
    40%, 60% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.3)  }
    100% { transform: translate(-50%, -50%) scale(1.3) }
  }

  .first-c,
  .second-c {
    display: block !important;
    position: absolute !important;
    overflow: hidden !important;
    left: -50% !important;
  }

  .first-c {
    top: 40% !important;
  }

  .second-c {
    top: -40% !important;
  }

  .logo-img-spin {
    animation: spin 15s linear infinite !important;
    transform-origin: center !important;
  }

  .logo-img-spin img {
   
    opacity: 0.9 !important;
    filter: drop-shadow(0 0 45px rgba(1, 15, 209, 0.25)) !important;
    animation: pulse 1s ease-in-out infinite !important;
  }

  .second-c img,
  .first-c img {
    width: max(100vw, 700px) !important;
    
  }

  @keyframes spin {
    from { transform: rotate(0deg)  }
    to   { transform: rotate(360deg)  }
  }

  @keyframes pulse {
    0%, 100% { transform: scale(1)  }
    50% { transform: scale(1.1) }
  }

  .logo-img-rotate.second {
    display: block !important;
  }



  .logo-preview .logo-txt {
    font-size: 18vw !important;
    letter-spacing: clamp(4px, 1.5vw, 20px) !important;
  }
   .curtain-box {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 856px; /* высота мобильной шторки по Figma */
    background: url("../img/z-mob.svg") no-repeat center top;
    background-size: cover;
    display: flex;
    flex-direction: column; /* маски по вертикали */
    justify-content: flex-start;
    align-items: center;
    overflow: visible; /* чтобы анимация масок не обрезалась */
    margin-top: 5vh;
  }
.center-content img{
  width: 100px;
}
  /* убираем старые шторки */
  .curtain.left,
  .curtain.right {
    display: none;
  }

  /* центрированный контент с масками */
  .center-content {
    position: relative;
    display: flex;
    flex-direction: column; /* расположение масок сверху вниз */
    justify-content: flex-start;
    align-items: center;
    gap: 1rem; /* расстояние между масками */
    opacity: 1; /* сразу видно */
    transform: scale(1);
    transition: none; /* убираем hover эффекты */
    width: 100%;
    z-index: 1;
    margin-top: 20px; /* отступ сверху от шторки */
  }

  .center-content img {
    width: 50%; /* подбирается под мобильный экран */
    max-width: 260px; /* пример */
    height: auto;
    animation: fadeSwing 1.1s ease-in-out infinite; /* сохраняем анимацию */
  }

  @keyframes fadeSwing {
      0% { opacity: 1; transform: rotate(-15deg); }
      50% { opacity: 0.7; transform: rotate(15deg); }
      100% { opacity: 1; transform: rotate(-15deg); }
  }
}