/* Portal noren: the Learn Japanese way back to the SparkleSnap portal.
   A wooden rod slides in, four indigo noren panels drop and sway, the SparkleSnap seal is
   stamped across the middle slit and おかえり ("welcome back") is brushed in, top to bottom.
   On sparklesnap.dev the visitor then walks through: the panels part to both sides.
   Same file in both repos: sparkle-snap-learn-jp/shared/assets/portal-return/portal-noren.css
   (closing) and sparkle-snap-portal/shared/frontend/portal-noren.css (opening). */
.ss-portal-noren {
    --noren-indigo: #1d3253;
    --noren-indigo-deep: #142441;
    --noren-paper: #f7f4ee;
    --noren-red: #bb1e2c;
    --noren-wood: #5a3b28;
    --noren-ease: cubic-bezier(.76, 0, .24, 1);
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
}
.ss-noren__panels {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.ss-noren__panel {
    position: relative;
    height: 100%;
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.06), transparent 60%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, var(--noren-indigo), var(--noren-indigo-deep));
    box-shadow: inset 1px 0 rgba(0,0,0,.28), inset -1px 0 rgba(255,255,255,.05), 0 18px 40px rgba(10,18,36,.25);
    transform-origin: 50% 0;
    transform: translateY(-102%);
    will-change: transform;
}
/* the hem: a slightly darker folded edge at the bottom of each cloth */
.ss-noren__panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 14px;
    background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.32));
}
.ss-noren__rod {
    position: absolute;
    z-index: 2;
    left: -2%;
    right: -2%;
    top: 0;
    height: 14px;
    border-radius: 0 0 7px 7px;
    background: linear-gradient(180deg, #7a5238, var(--noren-wood) 55%, #3c271a);
    box-shadow: 0 3px 8px rgba(20,12,6,.35);
    transform: translateY(-120%);
}
.ss-noren__seal {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 42%;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 50%;
    background: var(--noren-paper);
    box-shadow: 0 0 0 3px var(--noren-paper), 0 0 0 5px var(--noren-red), 0 16px 40px rgba(6,12,28,.45);
    opacity: 0;
    transform: scale(1.35) rotate(-10deg);
}
.ss-noren__seal img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.ss-noren__seal::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 2px solid var(--noren-paper);
    border-radius: 50%;
    opacity: 0;
}
.ss-noren__word {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: calc(42% + 84px);
    transform: translateX(-50%);
    writing-mode: vertical-rl;
    color: var(--noren-paper);
    font: 600 clamp(26px, 3.4vw, 38px)/1 "Shippori Mincho", "Noto Serif JP", "Yu Mincho", serif;
    letter-spacing: .32em;
    text-shadow: 0 1px 0 rgba(0,0,0,.25);
    clip-path: inset(0 0 100% 0);
    opacity: .94;
}
/* the word comes from data-word, so translation coverage checks don't count it as page copy */
.ss-noren__word::before { content: attr(data-word); }

/* Closing on Learn Japanese (html.ss-noren-leaving), about 1.2 s before navigation. */
html.ss-noren-leaving .ss-portal-noren,
html.ss-arriving-noren .ss-portal-noren { visibility: visible; pointer-events: auto; }
html.ss-noren-leaving .ss-noren__rod { animation: ss-noren-rod-in .32s cubic-bezier(.2,.8,.2,1) both; }
html.ss-noren-leaving .ss-noren__panel { animation: ss-noren-drop .72s var(--noren-ease) calc(.16s + var(--o) * 80ms) both; }
html.ss-noren-leaving .ss-noren__seal { animation: ss-noren-stamp .4s cubic-bezier(.34,1.56,.64,1) .74s both; }
html.ss-noren-leaving .ss-noren__seal::after { animation: ss-noren-ring .42s ease-out .86s both; }
html.ss-noren-leaving .ss-noren__word { animation: ss-noren-brush .46s cubic-bezier(.45,0,.2,1) .8s both; }

/* Arriving on the portal: hung and closed, then the visitor walks through. */
html.ss-arriving-noren .ss-noren__rod { transform: none; }
html.ss-arriving-noren .ss-noren__panel { transform: none; }
html.ss-arriving-noren .ss-noren__seal { opacity: 1; transform: none; }
html.ss-arriving-noren .ss-noren__word { clip-path: inset(0); }
html.ss-arriving-noren.ss-opening-noren .ss-noren__seal { animation: ss-noren-lift .3s ease-in both; }
html.ss-arriving-noren.ss-opening-noren .ss-noren__word { animation: ss-noren-fade .26s ease-in both; }
html.ss-arriving-noren.ss-opening-noren .ss-noren__panel { animation: ss-noren-part-left .7s var(--noren-ease) calc(.2s + var(--o) * 90ms) both; }
html.ss-arriving-noren.ss-opening-noren .ss-noren__panel:nth-child(n+3) { animation-name: ss-noren-part-right; }
html.ss-arriving-noren.ss-opening-noren .ss-noren__rod { animation: ss-noren-rod-out .34s ease-in .78s both; }

@keyframes ss-noren-rod-in { to { transform: none; } }
@keyframes ss-noren-rod-out { from { transform: none; } to { transform: translateY(-120%); } }
@keyframes ss-noren-drop {
    0% { transform: translateY(-102%) rotate(0); }
    62% { transform: translateY(0) rotate(1.4deg); }
    80% { transform: translateY(0) rotate(-.7deg); }
    92% { transform: translateY(0) rotate(.25deg); }
    100% { transform: none; }
}
@keyframes ss-noren-part-left {
    0% { transform: none; }
    30% { transform: translateX(-6%) skewY(-1.5deg); }
    100% { transform: translateX(-112%) skewY(-4deg); }
}
@keyframes ss-noren-part-right {
    0% { transform: none; }
    30% { transform: translateX(6%) skewY(1.5deg); }
    100% { transform: translateX(112%) skewY(4deg); }
}
@keyframes ss-noren-stamp { to { opacity: 1; transform: none; } }
@keyframes ss-noren-ring { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@keyframes ss-noren-brush { to { clip-path: inset(0); } }
@keyframes ss-noren-lift { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px) scale(.88); } }
@keyframes ss-noren-fade { from { opacity: .94; } to { opacity: 0; } }
@keyframes ss-noren-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ss-noren-fade-out { from { opacity: 1; } to { opacity: 0; } }

@media (max-width: 600px) {
    .ss-noren__seal { width: 92px; height: 92px; margin: -46px 0 0 -46px; }
    .ss-noren__word { top: calc(42% + 66px); }
}

/* Reduced motion: the noren is simply there, then fades; nothing drops, sways or parts. */
@media (prefers-reduced-motion: reduce) {
    .ss-portal-noren .ss-noren__rod,
    .ss-portal-noren .ss-noren__panel,
    .ss-portal-noren .ss-noren__seal,
    .ss-portal-noren .ss-noren__word { animation: none !important; transform: none !important; }
    .ss-portal-noren .ss-noren__word { transform: translateX(-50%) !important; clip-path: none; }
    .ss-portal-noren .ss-noren__seal { opacity: 1; }
    .ss-portal-noren .ss-noren__seal::after { animation: none !important; }
    html.ss-noren-leaving .ss-portal-noren { animation: ss-noren-fade-in .22s ease-out both; }
    html.ss-arriving-noren.ss-opening-noren .ss-portal-noren { animation: ss-noren-fade-out .3s ease-out both; }
}