/* Portal shoji: the transition from the Interactive Studio back to the main portal.
   Six paper slats slide shut from alternating ends, a red thread is drawn across them and
   the SparkleSnap seal is stamped in the middle. The homepage then opens the same screen
   from the centre outwards, so the two pages feel like one movement.
   Used by site/pages/interactive-studio.html (closing) and site/pages/home.html (opening). */
.ss-portal-shoji {
    --shoji-paper: #f7f4ee;
    --shoji-ink: #1a1a1a;
    --shoji-red: #bb1e2c;
    --shoji-ease: cubic-bezier(.76, 0, .24, 1);
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
}
.ss-shoji__slat {
    position: relative;
    height: 100%;
    background:
        linear-gradient(90deg, rgba(26,26,26,.05), transparent 16%, transparent 84%, rgba(26,26,26,.07)),
        repeating-linear-gradient(0deg, rgba(120,98,70,.035) 0 1px, transparent 1px 7px),
        var(--shoji-paper);
    box-shadow: inset -1px 0 rgba(26,26,26,.12), 0 0 30px rgba(26,26,26,.07);
    transform: translateY(-101%);
    will-change: transform;
}
.ss-shoji__slat:nth-child(even) { transform: translateY(101%); }
/* kumiko lattice: two quiet cross bars per panel */
.ss-shoji__slat::before,
.ss-shoji__slat::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(26,26,26,.1);
}
.ss-shoji__slat::before { top: 28%; }
.ss-shoji__slat::after { top: 72%; }
.ss-shoji__thread {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: var(--shoji-red);
    box-shadow: 0 0 0 1px rgba(187,30,44,.08);
    transform: scaleX(0);
    transform-origin: left center;
}
.ss-shoji__seal {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 112px;
    height: 112px;
    margin: -56px 0 0 -56px;
    border-radius: 50%;
    background: var(--shoji-paper);
    box-shadow: 0 0 0 2px var(--shoji-red), 0 0 0 9px var(--shoji-paper), 0 18px 44px rgba(26,26,26,.18);
    opacity: 0;
    transform: scale(1.35) rotate(-10deg);
}
.ss-shoji__seal img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.ss-shoji__seal::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid var(--shoji-red);
    border-radius: 50%;
    opacity: 0;
}

/* Closing on the Studio (body.studio-portal-leaving), about 1.1 s before navigation. */
.studio-portal-leaving .ss-portal-shoji,
html.ss-arriving .ss-portal-shoji { visibility: visible; pointer-events: auto; }
.studio-portal-leaving .ss-shoji__slat { animation: ss-shoji-shut .56s var(--shoji-ease) calc(var(--i) * 55ms) both; }
.studio-portal-leaving .ss-shoji__thread { animation: ss-thread-draw .42s cubic-bezier(.65,0,.35,1) .42s both; }
.studio-portal-leaving .ss-shoji__seal { animation: ss-seal-stamp .42s cubic-bezier(.34,1.56,.64,1) .6s both; }
.studio-portal-leaving .ss-shoji__seal::after { animation: ss-seal-ring .44s ease-out .72s both; }

/* Arriving on the homepage: start closed, then open from the centre outwards. */
html.ss-arriving .ss-shoji__slat { transform: none; }
html.ss-arriving .ss-shoji__thread { transform: none; }
html.ss-arriving .ss-shoji__seal { opacity: 1; transform: none; }
html.ss-arriving.ss-opening .ss-shoji__seal { animation: ss-seal-lift .3s ease-in both; }
html.ss-arriving.ss-opening .ss-shoji__thread { transform-origin: right center; animation: ss-thread-retract .34s cubic-bezier(.65,0,.35,1) .1s both; }
html.ss-arriving.ss-opening .ss-shoji__slat { animation: ss-shoji-open-up .62s var(--shoji-ease) calc(.22s + var(--o) * 60ms) both; }
html.ss-arriving.ss-opening .ss-shoji__slat:nth-child(even) { animation-name: ss-shoji-open-down; }

@keyframes ss-shoji-shut { to { transform: translateY(0); } }
@keyframes ss-shoji-open-up { from { transform: none; } to { transform: translateY(-101%); } }
@keyframes ss-shoji-open-down { from { transform: none; } to { transform: translateY(101%); } }
@keyframes ss-thread-draw { to { transform: scaleX(1); } }
@keyframes ss-thread-retract { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes ss-seal-stamp { to { opacity: 1; transform: none; } }
@keyframes ss-seal-ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.65); } }
@keyframes ss-seal-lift { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px) scale(.88); } }
@keyframes ss-shoji-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ss-shoji-fade-out { from { opacity: 1; } to { opacity: 0; } }

@media (max-width: 600px) {
    .ss-portal-shoji { grid-template-columns: repeat(3, 1fr); }
    .ss-shoji__slat:nth-child(n+4) { display: none; }
    .ss-shoji__seal { width: 88px; height: 88px; margin: -44px 0 0 -44px; }
}

/* Reduced motion: a quiet paper fade with the seal already in place, no sliding. */
@media (prefers-reduced-motion: reduce) {
    .ss-portal-shoji .ss-shoji__slat,
    .ss-portal-shoji .ss-shoji__thread,
    .ss-portal-shoji .ss-shoji__seal { animation: none !important; transform: none !important; }
    .ss-portal-shoji .ss-shoji__seal { opacity: 1; }
    .ss-portal-shoji .ss-shoji__seal::after { animation: none !important; }
    .studio-portal-leaving .ss-portal-shoji { animation: ss-shoji-fade-in .22s ease-out both; }
    html.ss-arriving.ss-opening .ss-portal-shoji { animation: ss-shoji-fade-out .3s ease-out both; }
}