/* Rolled patrika opening shared by the web invites. The invitation page itself is the patrika: the cover hides it,
   and as the lower roller travels down the screen the page is revealed above it. Add .opening to .patrika to play it:
   0 words fade · .05 thread unties and falls · .2 the roll lifts to the top · .65 it unrolls to the bottom of the screen, open at 2s.
   The rollers then stay put and the page scrolls between them (shared/autoscroll.js), as if read off the patrika.
   Closed, the roll rests at --rest just above the words. Colours come from --pt-* custom properties;
   the defaults are the sindoor patrika with a red-and-yellow mauli. */
.patrika {
  --top: calc(56px + env(safe-area-inset-top, 0px));
  --rest: max(var(--top), calc(50dvh - 190px));
  --R: 24px;
  --RW: min(calc(100vw - 28px), 560px);
  --W: var(--RW);
  --y0: calc(var(--top) + var(--R) / 2);
  --y1: calc(100dvh - var(--R) / 2 - 6px);
  --L: calc(50% - var(--W) / 2);
  --Rt: calc(50% + var(--W) / 2);
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
}
/* The page starts just below the top roller (--top + --R above), so nothing is hidden behind it at the start. */
html[data-opening="patrika"] body { padding-top: calc(56px + 24px + env(safe-area-inset-top, 0px)); }
/* On phones the page fills the screen, so the whole width unrolls. */
@media (max-width: 599px) { .patrika { --W: 100vw; } }
.pt-cover { position: absolute; inset: 0; }
.pt-cover .toran { position: absolute; inset: 0 0 auto; z-index: 6; pointer-events: none; }

/* Wooden rollers with brass finials; the lower one starts thick with the rolled-up paper. */
.pt-scroll {
  position: absolute;
  top: var(--top);
  left: 50%;
  z-index: 7;
  width: var(--RW);
  height: var(--R);
  transform: translate(-50%, calc(var(--rest) - var(--top)));
}
.pt-roll {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: var(--R);
  border-radius: 6px;
  background: var(--pt-roll, linear-gradient(180deg, #B89A62 0%, #F6EAC9 30%, #E8D6A8 55%, #C2A266 80%, #8F7038 100%));
  box-shadow: var(--pt-roll-shadow, 0 4px 8px rgba(30, 0, 3, .45)), 0 12px 14px -8px rgba(0, 0, 0, .28);
}
.pt-roll::before, .pt-roll::after {
  content: "";
  position: absolute;
  top: -6px;
  width: 14px;
  height: calc(var(--R) + 12px);
  border-radius: 7px;
  background: var(--pt-finial, linear-gradient(90deg, #6B3E10, #D9A548 45%, #F3D58A 55%, #8A5517));
  box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
}
.pt-roll::before { left: -7px; }
.pt-roll::after { right: -7px; }
.pt-roll.bot { z-index: 3; transform: scaleY(1.4); box-shadow: var(--pt-roll-shadow, 0 4px 8px rgba(30, 0, 3, .45)), 0 -12px 14px -8px rgba(0, 0, 0, .28); }

/* The thread tied round the rolled patrika. */
.pt-mauli { position: absolute; z-index: 4; left: 50%; top: -9px; width: 40px; height: 90px; margin-left: -10px; }
.pt-mauli .band {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 44px;
  border-radius: 4px;
  background: repeating-linear-gradient(-55deg, var(--pt-thread-a, #B3121B) 0 3.5px, var(--pt-thread-b, #F2B705) 3.5px 6px, var(--pt-thread-a, #B3121B) 6px 9px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
}
.pt-mauli .knot {
  position: absolute;
  left: 9px;
  top: 15px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--pt-thread-b, #F2B705) 0 25%, var(--pt-thread-a, #B3121B) 30% 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.pt-mauli .tail {
  position: absolute;
  top: 24px;
  width: 3px;
  height: 46px;
  border-radius: 2px;
  background: repeating-linear-gradient(180deg, var(--pt-thread-a, #B3121B) 0 5px, var(--pt-thread-b, #F2B705) 5px 8px);
  transform-origin: top center;
}
.pt-mauli .tail.a { left: 14px; transform: rotate(8deg); }
.pt-mauli .tail.b { left: 19px; height: 38px; transform: rotate(-12deg); }
.pt-mauli .tail::after {
  content: "";
  position: absolute;
  left: -3px;
  bottom: -8px;
  width: 9px;
  height: 10px;
  border-radius: 2px 2px 5px 5px;
  background: var(--pt-thread-a, #B3121B);
}

/* Words and button under the rolled patrika. */
.pt-closed {
  position: absolute;
  top: calc(var(--rest) + 96px);
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  text-align: center;
}

.patrika.opening { pointer-events: none; }
.patrika.opening .pt-fade { animation: ptFade .3s ease forwards; }
.patrika.opening .pt-mauli { animation: ptUntie .5s cubic-bezier(.5, 0, .8, .5) .05s forwards; }
.patrika.opening .pt-scroll { animation: ptLift .45s cubic-bezier(.5, 0, .3, 1) .2s forwards; }
.patrika.opening .pt-cover { animation: ptReveal 1.35s cubic-bezier(.45, .05, .35, 1) .65s forwards; }
.patrika.opening .pt-roll.bot { animation: ptUnroll 1.35s cubic-bezier(.45, .05, .35, 1) .65s forwards; }
@keyframes ptFade { to { opacity: 0; transform: translateY(10px); visibility: hidden; } }
@keyframes ptUntie { 25% { transform: rotate(-10deg); } 100% { transform: translateY(60px) rotate(24deg); opacity: 0; } }
@keyframes ptLift { to { transform: translate(-50%, 0); } }
/* The cover keeps everything except the strip between the rollers, which grows down to the bottom of the screen. */
@keyframes ptReveal {
  from { clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, var(--L) var(--y0), var(--L) var(--y0), var(--Rt) var(--y0), var(--Rt) var(--y0), var(--L) var(--y0)); }
  to { clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, var(--L) var(--y0), var(--L) var(--y1), var(--Rt) var(--y1), var(--Rt) var(--y0), var(--L) var(--y0)); }
}
@keyframes ptUnroll { from { transform: translateY(0) scaleY(1.4); } to { transform: translateY(calc(var(--y1) - var(--y0))) scaleY(1); } }
@keyframes ptAway { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .patrika.opening *, .patrika.opening *::before { animation-duration: .01s !important; animation-delay: 0s !important; }
  .patrika.opening .pt-cover { animation: ptAway .4s ease forwards !important; }
}