.gate-architecture {
  --gate-image: url('/gate-wide-v7.png');
  --door-opening: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' fill-rule='evenodd' d='M0 0H100V100H0Z M40.3 96.5V36C40.3 18 44.2 5.5 49.6 1H50.4C55.8 5.5 59.7 18 59.7 36V96.5Z'/%3E%3C/svg%3E");
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 240.15svh);
  height: max(100svh, 41.64vw);
  translate: -50% -50%;
  transform-origin: 50% 50%;
  perspective: 1600px;
  isolation: isolate;
}

.gate-surround,
.gate-surround::before,
.gate-leaves,
.gate-leaf,
.gate-light {
  position: absolute;
  inset: 0;
}

.gate-surround {
  z-index: 4;
  pointer-events: none;
}

.gate-surround::before {
  content: '';
  background: var(--gate-image) center / 100% 100% no-repeat;
  -webkit-mask-image: var(--door-opening);
  mask-image: var(--door-opening);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.gate-leaves {
  z-index: 3;
  perspective: 1600px;
  transform-style: preserve-3d;
}

.gate-leaf {
  z-index: 2;
  background: var(--gate-image) center / 100% 100% no-repeat;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}

.gate-left {
  transform-origin: 40.3% 50%;
  clip-path: polygon(40.3% 96.5%, 40.3% 36%, 40.5% 29%, 41.2% 21%, 42.5% 14%, 44.3% 8%, 46.7% 3.3%, 49.6% 1%, 50% 1%, 50% 96.5%);
}

.gate-right {
  transform-origin: 59.7% 50%;
  clip-path: polygon(50% 1%, 50.4% 1%, 53.3% 3.3%, 55.7% 8%, 57.5% 14%, 58.8% 21%, 59.5% 29%, 59.7% 36%, 59.7% 96.5%, 50% 96.5%);
}

.gate-leaf::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(26, 14, 8, .42), transparent 50%, rgba(26, 14, 8, .42));
  opacity: var(--door-shade, 0);
  pointer-events: none;
}

.gate-light {
  z-index: 1;
  background: radial-gradient(ellipse at 50% 52%, rgba(255, 238, 200, .14), transparent 48%);
  clip-path: polygon(40.3% 96.5%, 40.3% 36%, 40.5% 29%, 41.2% 21%, 42.5% 14%, 44.3% 8%, 46.7% 3.3%, 49.6% 1%, 50.4% 1%, 53.3% 3.3%, 55.7% 8%, 57.5% 14%, 58.8% 21%, 59.5% 29%, 59.7% 36%, 59.7% 96.5%);
  pointer-events: none;
}

@media (max-width: 700px) {
  .gate-architecture {
    --gate-image: url('/gate-mobile-v7.png');
    --door-opening: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath fill='white' fill-rule='evenodd' d='M0 0H100V100H0Z M22.4 95.3V42C22.4 30 32 17 49.6 9.7H50.4C68 17 77.6 30 77.6 42V95.3Z'/%3E%3C/svg%3E");
    width: max(100vw, 66.667svh);
    height: max(100svh, 150vw);
    perspective: 1050px;
  }

  .gate-leaves {
    perspective: 1050px;
  }

  .gate-left {
    transform-origin: 22.4% 50%;
    clip-path: polygon(22.4% 95.3%, 22.4% 42%, 23% 36%, 24.5% 31%, 27% 26%, 30.5% 21.5%, 34.5% 17.8%, 39% 14.5%, 44.5% 11.8%, 49.6% 9.7%, 50% 9.7%, 50% 95.3%);
  }

  .gate-right {
    transform-origin: 77.6% 50%;
    clip-path: polygon(50% 9.7%, 50.4% 9.7%, 55.5% 11.8%, 61% 14.5%, 65.5% 17.8%, 69.5% 21.5%, 73% 26%, 75.5% 31%, 77% 36%, 77.6% 42%, 77.6% 95.3%, 50% 95.3%);
  }

  .gate-light {
    clip-path: polygon(22.4% 95.3%, 22.4% 42%, 23% 36%, 24.5% 31%, 27% 26%, 30.5% 21.5%, 34.5% 17.8%, 39% 14.5%, 44.5% 11.8%, 49.6% 9.7%, 50.4% 9.7%, 55.5% 11.8%, 61% 14.5%, 65.5% 17.8%, 69.5% 21.5%, 73% 26%, 75.5% 31%, 77% 36%, 77.6% 42%, 77.6% 95.3%);
  }
}