.inv--scroll{--inv-bg: radial-gradient(80% 60% at 50% 40%,#4a3524,#2a1d13 80%);--inv-ink: #3b2a1a;--inv-accent: #a08b5e;--inv-surface: #efe3c8;--pv-chip: #efe3c8;--sc-ink: #3b2a1a;--sc-olive: #5d6b3a;--sc-wood: linear-gradient(180deg,#8a6338 0%,#5a3d22 55%,#3e2915 100%);--inv-hint: #e8d6ad;font-family: var(--font-display)}.sc-scene{display: grid;justify-items: center;gap: 1.8rem}.sc-kicker{font-family: "Aref Ruqaa",var(--font-display);font-size: 1.6rem;color: #e8d6ad;animation: sc-fade 1.2s both 0.3s}.sc-roll{position: relative;width: min(76vw,19rem);height: 4.4rem;animation: sc-in 1.4s var(--ease-out) both 0.1s,sc-bob 5s var(--ease-in-out) infinite 1.6s}.sc-roll__body{position: absolute;inset: 0;border-radius: 2.2rem / 50%;background: linear-gradient(180deg,rgb(255 255 255 / 0.35) 0%,transparent 30%,rgb(0 0 0 / 0.08) 60%,rgb(0 0 0 / 0.28) 100%),repeating-linear-gradient(90deg,#ead9b5 0 3px,#e3cfa6 3px 6px);box-shadow: 0 18px 30px -16px rgb(0 0 0 / 0.6)}.sc-roll__body::before,.sc-roll__body::after{content: "";position: absolute;top: 50%;width: 1.5rem;height: 1.5rem;translate: 0 -50%;border-radius: 50%;background: radial-gradient(circle at 35% 35%,#b38a55,#5a3d22)}.sc-roll__body::before{right: -1.1rem}.sc-roll__body::after{left: -1.1rem}.sc-roll__ribbon{position: absolute;top: -0.3rem;bottom: -0.3rem;left: 50%;width: 1.6rem;translate: -50% 0;background: linear-gradient(90deg,#5d6b3a,#76864b 50%,#5d6b3a);display: grid;place-items: center;transition: transform 0.6s var(--ease-in-out),opacity 0.4s}.sc-roll__seal{width: 2.4rem;height: 2.4rem;border-radius: 50%;display: grid;place-items: center;background: radial-gradient(circle at 35% 30%,#8c3a2c,#5b1e14);color: #e8d6ad;box-shadow: 0 4px 10px -3px rgb(0 0 0 / 0.5)}.sc-roll__seal svg{width: 55%}.inv--scroll[data-state="opening"] .sc-roll__ribbon{transform: translateY(160%) rotate(12deg);opacity: 0}.inv--scroll[data-state="opening"] .sc-roll{animation: sc-out 0.4s both 0.5s}.inv--scroll[data-state="opening"] .sc-kicker{animation: sc-out 0.3s both}.sc-stage{position: relative;min-height: 100vh;min-height: 100svh;padding: 4.5rem 1rem 1.5rem}.sc-sheet{position: relative;max-width: 29rem;min-height: calc(100svh - 6rem);margin-inline: auto;display: grid;grid-template-rows: 1fr auto;background: radial-gradient(120% 60% at 50% 0%,rgb(255 250 235 / 0.6),transparent 60%),radial-gradient(140% 100% at 50% 50%,#f1e6cc 55%,#ddc89c 100%);box-shadow: inset 0 0 60px rgb(120 90 40 / 0.25);clip-path: inset(calc(50vh - 4.5rem) 0 calc(100% - 50vh + 4.5rem) 0);transition: clip-path 1.2s cubic-bezier(0.6,0,0.25,1) 0.6s}.inv--scroll:is([data-state="opening"],[data-state="open"]) .sc-sheet{clip-path: inset(0 0 calc(100% - 100vh + 4.5rem) 0)}.inv--scroll[data-state="open"] .sc-sheet{clip-path: none}.sc-rod{position: absolute;z-index: 2;inset-inline: max(0.25rem,calc(50% - 15.5rem));height: 1.1rem;border-radius: 0.55rem;background: var(--sc-wood);box-shadow: 0 6px 12px -6px rgb(0 0 0 / 0.6)}.sc-rod::before,.sc-rod::after{content: "";position: absolute;top: 50%;width: 1.4rem;height: 1.4rem;translate: 0 -50%;border-radius: 50%;background: radial-gradient(circle at 35% 35%,#b38a55,#5a3d22)}.sc-rod::before{right: -0.7rem}.sc-rod::after{left: -0.7rem}.sc-rod--top,.sc-rod--ghost{top: 3.9rem;transform: translateY(calc(50vh - 4.5rem));transition: transform 1.2s cubic-bezier(0.6,0,0.25,1) 0.6s,opacity 0.3s}.inv--scroll:is([data-state="opening"],[data-state="open"]) .sc-rod--top{transform: none}.inv--scroll[data-state="opening"] .sc-rod--ghost{transform: translateY(calc(100vh - 5.6rem))}.inv--scroll[data-state="open"] .sc-rod--ghost{opacity: 0;transform: translateY(calc(100vh - 5.6rem))}.inv--scroll:not([data-state="opening"]):not([data-state="open"]) .sc-rod--top,.inv--scroll:not([data-state="opening"]):not([data-state="open"]) .sc-rod--ghost{opacity: 0}.sc-rod--bottom{position: relative;inset: auto;display: block;margin: 0 -0.75rem -0.55rem}.sc-text{display: grid;justify-items: center;gap: 1.1rem;text-align: center;padding: 3rem 1.75rem 2.5rem;color: var(--sc-ink)}.sc-basmala{font-family: "Aref Ruqaa",var(--font-display);color: var(--sc-olive);font-size: 1.2rem}.sc-title{font-family: "Aref Ruqaa",var(--font-display);font-weight: 400;font-size: clamp(2.3rem,9vw,3rem);color: var(--sc-ink);outline: none}.sc-flourish{width: 12rem;color: var(--sc-olive)}.sc-body{font-size: 1.2rem;line-height: 2}.sc-names{display: grid;font-family: "Aref Ruqaa",var(--font-display);font-size: clamp(2.6rem,11vw,3.6rem);line-height: 1.35;color: #5b1e14}.sc-names span{font-size: 0.5em;color: var(--sc-olive)}.sc-lines{display: grid;gap: 0.35rem;font-size: 1.2rem}.sc-lines li{display: flex;align-items: center;justify-content: center;gap: 0.6rem}.sc-end{font-family: "Aref Ruqaa",var(--font-display);font-size: 1.4rem;color: var(--sc-olive)}.sc-after{display: grid;justify-items: center;gap: 0.9rem;font-family: var(--font-body)}.inv--scroll .inv-map{color: var(--sc-olive)}.inv--scroll:is([data-state="opening"],[data-state="open"]) .sc-text>*{animation: sc-ink 1s var(--ease-out) both calc(1.4s + var(--i) * 0.15s)}@keyframes sc-fade{from{opacity: 0}to{opacity: 1}}@keyframes sc-out{to{opacity: 0}}@keyframes sc-in{from{opacity: 0;transform: translateY(-40px) rotate(-4deg)}to{opacity: 1;transform: none}}@keyframes sc-bob{0%,100%{transform: translateY(0) rotate(0)}50%{transform: translateY(-5px) rotate(0.6deg)}}@keyframes sc-ink{from{opacity: 0;transform: translateY(10px)}to{opacity: 1;transform: none}}