@media (min-width: 361px) and (max-width: 431px) {

  .logo-img-pulse img {
    width: max(120vw, 1200px) !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:40%;
  }
    .hand .gallery-curve {
    margin-left: 0px;
  }

  .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:380px;
  }

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

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

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

  .petal4-cont {
    width: 90% !important;
    height: 50% !important;
    position: absolute !important;
    left: -53% !important;
    top: 10% !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: -60% !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, 900px) !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; 
    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;
    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); }
  }
}

@media (max-width: 431px) {
  .hand-pazl {
    flex-direction: column;
  }

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

  .hand {
    border-width: 8px;
  }

  .hand .gallery-curve {
    transform: scale(0.85);
  }
  .part{
    animation: puzzleMove2 5s ease-in-out infinite;
  }

  .p1 { --dx: 40px;  --dy: -40px; }
  .p2 { --dx: 0px;   --dy: -50px; }
  .p3 { --dx: -40px; --dy: -20px; }
  .p4 { --dx: -40px; --dy: 30px; }
  .p5 { --dx: 40px;  --dy: 30px; }

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

 .hand .card:hover {
    transform: none;
    filter: none;
  }

  /* включаем автоматическую анимацию */
  .hand .card {
    animation: waveHover 6s ease-in-out infinite;
  }

  /* задержки — по очереди */
  .hand .card:nth-child(1) { animation-delay: 0s; }
  .hand .card:nth-child(2) { animation-delay: 1.2s; }
  .hand .card:nth-child(3) { animation-delay: 2.4s; }
  .hand .card:nth-child(4) { animation-delay: 3.6s; }
  .hand .card:nth-child(5) { animation-delay: 4.8s; }
  @keyframes waveHover {
    0% {
      transform:
        rotateX(calc(var(--i) * 25deg))
        translateZ(300px);
      filter: brightness(1);
      z-index: 1;
    }

    20% {
      transform:
        rotateX(calc(var(--i) * 25deg))
        translateZ(360px);
      filter: brightness(1.25);
      z-index: 10;
    }

    40% {
      transform:
        rotateX(calc(var(--i) * 25deg))
        translateZ(300px);
      filter: brightness(1);
      z-index: 1;
    }

    100% {
      transform:
        rotateX(calc(var(--i) * 25deg))
        translateZ(300px);
      filter: brightness(1);
    }
  }
}