/* Shared festive motion layer: curtain, toran, petal shower, reveals */
html.is-closed, html.is-closed body { overflow: hidden; }

/* ---------- Toran (marigold garland) ---------- */
.toran-wrap { flex-shrink: 0; align-self: stretch; line-height: 0; position: relative; z-index: 2; pointer-events: none; }
.toran { display: block; width: 100%; height: auto; max-width: none !important; overflow: visible; }
.toran__strand { transform-box: fill-box; transform-origin: 50% 0; animation: toran-sway 4s ease-in-out infinite alternate; }
@keyframes toran-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }

/* ---------- Curtain ---------- */
.curtain { position: fixed; inset: 0; z-index: 60; display: flex; cursor: pointer; overflow: hidden; }
.curtain__panel {
  flex: 1; height: 100%; position: relative;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.30) 0, rgba(0,0,0,.05) 9px, rgba(255,255,255,.10) 16px, rgba(0,0,0,.05) 23px, rgba(0,0,0,.30) 32px),
    var(--pattern, none),
    linear-gradient(180deg, var(--fabric) 0%, var(--fabric2) 100%);
  background-size: auto, 26px 44px, auto;
  transition: transform 2s cubic-bezier(.7,0,.2,1), opacity .7s ease 1.55s;
  will-change: transform;
}
.curtain__panel--l { transform-origin: 0 50%; box-shadow: inset -30px 0 40px rgba(0,0,0,.35); }
.curtain__panel--r { transform-origin: 100% 50%; box-shadow: inset 30px 0 40px rgba(0,0,0,.35); }
.curtain__panel::after { content: ""; position: absolute; top: 0; bottom: 0; width: 7px; background:
  repeating-linear-gradient(180deg, var(--trim) 0 6px, rgba(0,0,0,.3) 6px 7px, var(--trim) 7px 12px, rgba(255,255,255,.35) 12px 13px); }
.curtain__panel--l::after { right: 0; }
.curtain__panel--r::after { left: 0; }
.curtain__panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background:
  radial-gradient(circle at 8px 0, var(--trim) 0 6px, transparent 6.5px) 0 0 / 16px 18px repeat-x; opacity: .9; }
.curtain__toran { position: absolute; left: 0; right: 0; top: 0; z-index: 2; line-height: 0; transition: transform 1.3s cubic-bezier(.6,0,.3,1) .35s; }
.curtain__seal {
  position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%);
  width: 196px; height: 196px; border-radius: 50%; border: 1.5px solid var(--seal-ink);
  background: var(--seal-bg); color: var(--seal-text); cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 0 0 7px var(--seal-bg), 0 0 0 8.5px var(--seal-ink), 0 18px 50px rgba(0,0,0,.45);
  transition: transform .6s cubic-bezier(.5,0,.3,1), opacity .5s ease;
  font: inherit;
}
.curtain__seal::after { content: ""; position: absolute; inset: -18px; border-radius: 50%; border: 1px solid var(--seal-ink); opacity: 0; animation: seal-pulse 2.2s ease-out infinite; }
@keyframes seal-pulse { 0% { transform: scale(.9); opacity: .7; } 100% { transform: scale(1.25); opacity: 0; } }
.curtain__seal:focus-visible { outline: 2px solid var(--seal-ink); outline-offset: 14px; }
.seal__icon { width: 30px; height: 30px; margin-bottom: 4px; }
.seal__name { font-family: var(--seal-font); font-style: italic; font-size: 21px; line-height: 1.1; }
.seal__title { font-family: var(--seal-font); font-size: 27px; line-height: 1.05; color: var(--seal-ink); }
.seal__hint { margin-top: 10px; font-family: var(--seal-font2); font-size: 10px; letter-spacing: 4px; text-transform: uppercase; opacity: .8; }

.curtain.open { cursor: default; pointer-events: none; }
.curtain.open .curtain__panel--l { transform: scaleX(.12); opacity: 0; }
.curtain.open .curtain__panel--r { transform: scaleX(.12); opacity: 0; }
.curtain.open .curtain__seal { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
.curtain.open .curtain__toran { transform: translateY(-110%); }

/* ---------- Petal shower ---------- */
.petal-layer { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; perspective: 600px; }
.petal { position: absolute; top: 0; will-change: transform; filter: drop-shadow(0 2px 2px rgba(0,0,0,.18)); }
.petal svg { display: block; width: 100%; height: 100%; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .toran__strand, .curtain__seal::after { animation: none; }
  .curtain__panel, .curtain__seal, .curtain__toran { transition-duration: .3s; transition-delay: 0s; }
  .reveal { transform: none; transition: opacity .4s ease; }
}