/* ==========================================================================
   KARTIK CATERERS — Site-wide Page Transition ("Wedding Curtain Wipe")
   Two maroon/gold velvet curtain panels part to reveal each page on load,
   and close — with a shimmer sweep and a gold emblem at the seam — before
   navigating to the next page. Site-wide, on every page.
   Skips instantly for prefers-reduced-motion and no-JS visitors.
   ========================================================================== */

.page-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  pointer-events: none;
}
.page-transition-overlay .pt-panel {
  position: relative;
  flex: 1;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(226,154,60,0.14), transparent 55%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.18) 0 8px, rgba(255,255,255,0.025) 8px 10px, transparent 10px 30px),
    linear-gradient(180deg, #7E181D 0%, #5A1116 35%, #3C0D10 70%, #220708 100%);
  box-shadow: inset 0 0 70px rgba(0,0,0,0.55);
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.page-transition-overlay .pt-panel-left { transform-origin: left center; }
.page-transition-overlay .pt-panel-right { transform-origin: right center; }

/* Gold shimmer sweep across the velvet */
.page-transition-overlay .pt-panel::before {
  content: "";
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(115deg,
    transparent 32%,
    rgba(226,154,60,0.20) 46%,
    rgba(255,228,176,0.32) 50%,
    rgba(226,154,60,0.20) 54%,
    transparent 68%);
  background-size: 220% 220%;
  animation: ptShimmer 3s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes ptShimmer {
  0%   { background-position: 130% 20%; }
  100% { background-position: -30% -20%; }
}

/* Tasselled fringe along the inner seam where the two panels meet */
.pt-panel-left::after,
.pt-panel-right::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 18px;
  background-repeat: repeat-y;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='28'%3E%3Cpolygon points='0,0 18,0 9,22' fill='%23E29A3C'/%3E%3Ccircle cx='9' cy='24' r='2.2' fill='%23FBF5F0'/%3E%3C/svg%3E");
  background-size: 18px 28px;
  opacity: 0.95;
  z-index: 2;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.4));
}
.pt-panel-left::after { right: -9px; }
.pt-panel-right::after { left: -9px; }

/* Gold emblem that appears at the seam when the curtains meet */
.page-transition-overlay .pt-mark {
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  z-index: 5;
  opacity: 0;
  transform: scale(0.5) rotate(45deg);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.page-transition-overlay .pt-mark::before,
.page-transition-overlay .pt-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid #E29A3C;
}
.page-transition-overlay .pt-mark::after {
  inset: 9px;
  border-width: 1px;
  border-color: rgba(226,154,60,0.65);
}

/* Default (pre-JS) state: fully covering — prevents any flash of the page underneath */
.page-transition-overlay .pt-panel { transform: scaleX(1); }

/* Revealed: JS adds this shortly after each page loads */
html.pt-revealed .page-transition-overlay .pt-panel { transform: scaleX(0); }

/* Covering: JS adds this just before navigating to the next page */
html.pt-covering .page-transition-overlay .pt-panel {
  transform: scaleX(1);
  transition-duration: 0.45s;
}
html.pt-covering .page-transition-overlay .pt-mark {
  opacity: 1;
  transform: scale(1) rotate(45deg);
  transition-delay: 0.18s;
}

@media (prefers-reduced-motion: reduce) {
  .page-transition-overlay .pt-panel,
  .page-transition-overlay .pt-panel::before,
  .page-transition-overlay .pt-mark { transition: none !important; animation: none !important; }
}