/* ==========================================================================
GLOBAL VARIABLES & RESET
========================================================================== */
:root {
--void: #090214;
--charcoal: #150826;
--charcoal-soft: #1d0e32;
--walnut: #2b1245;
--ivory: #fbf9fc;
--paper: rgba(244, 235, 255, 0.07);
--paper-solid: #f4ebff;
--ink: #1a0f28;
--gold: #E5C185;
--gold-2: #c79f5e;
--gold-3: #a67f3f;
--gold-dim: rgba(229, 193, 133, 0.28);
--gold-faint: rgba(229, 193, 133, 0.16);
--rose: #d4b2cc;
--moonlight: #b79fd6;
--burgundy: #2b040a;
--sage: #8a6d8f;
--teal: #6a4f7a;
--frame: #5c0038;
--frame-soft: rgba(92, 0, 56, 0.42);
--indigo: #4a1f5c;
--amber: #d4b2cc;
--silver-blue: #a58fc4;
--candle: rgba(92, 0, 56, 0.22);
--loom: rgba(183, 159, 214, 0.14);
--shadow-soft: rgba(3, 1, 8, 0.55);
--serif: 'Cormorant Garamond', serif;
--sans: 'Inter', sans-serif;
--script: 'Parisienne', cursive;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
min-height: 100dvh;
background-color: var(--void);
overflow-x: hidden;
overscroll-behavior: none;
}
body {
color: var(--ivory);
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
overflow: hidden;
background:
radial-gradient(circle at 18% 10%, rgba(220, 116, 180, 0.10), transparent 24%),
radial-gradient(circle at 85% 16%, rgba(184, 165, 214, 0.11), transparent 28%),
linear-gradient(145deg, #201c31 0%, #121024 46%, #0a0913 100%);
}
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.016) 0%, transparent 42%, rgba(220, 116, 180, 0.05) 100%);
mix-blend-mode: screen;
opacity: 0.9;
}
::selection {
background: rgba(220, 116, 180, 0.24);
color: var(--ivory);
}
/* ==========================================================================
GLOBAL ENVIRONMENTAL LAYERS
========================================================================== */
.grain-overlay {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
opacity: 0.03;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}
.light-leak {
position: fixed;
top: -18%;
left: -18%;
width: 62vw;
height: 64vh;
background: radial-gradient(circle, rgba(220, 116, 180, 0.18) 0%, rgba(184, 165, 214, 0.09) 40%, transparent 72%);
z-index: 1;
pointer-events: none;
transition: opacity 3s ease;
animation: lightBreath 7s ease-in-out infinite;
}
@keyframes lightBreath {
0% { opacity: 0.82; transform: translateY(0) scale(1); }
50% { opacity: 0.9; transform: translateY(-2px) scale(1.002); }
100% { opacity: 0.82; transform: translateY(0) scale(1); }
}
/* subtle drifting dust particles */
.dust-particles {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9998;
overflow: visible;
}
.dust-particles::before, .dust-particles::after {
content: '';
position: absolute;
width: 6px;
height: 6px;
background: rgba(249, 234, 244, 0.85);
border-radius: 50%;
filter: blur(1px);
opacity: 0.05;
}
.dust-particles::before { left: 20%; top: 8%; animation: dustDrift 14s linear infinite; }
.dust-particles::after { left: 72%; top: 12%; animation: dustDrift 18s linear infinite; }
@keyframes dustDrift {
0% { transform: translateY(-6vh) translateX(0) scale(0.8); opacity: 0.03; }
50% { transform: translateY(10vh) translateX(6vw) scale(1); opacity: 0.06; }
100% { transform: translateY(28vh) translateX(-6vw) scale(0.9); opacity: 0.02; }
}
/* edge hints to imply surrounding objects */
.edge-hints {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 5;
}
.edge-hints::before, .edge-hints::after {
content: '';
position: absolute;
width: 160px;
height: 120px;
background: linear-gradient(135deg, rgba(220, 116, 180, 0.12), rgba(184, 165, 214, 0.08));
filter: blur(18px) saturate(0.6);
opacity: 0.24;
border-radius: 6px;
}
.edge-hints::before { left: -30px; top: 18%; transform: rotate(-8deg); }
.edge-hints::after { right: -28px; bottom: 14%; transform: rotate(12deg); }
.transition-whisper {
position: fixed;
left: 50%;
bottom: clamp(24px, 4vh, 44px);
transform: translateX(-50%) translateY(10px);
opacity: 0;
pointer-events: none;
z-index: 120;
font-family: var(--serif);
font-size: 0.84rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(249, 234, 244, 0.78);
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.transition-whisper.visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ==========================================================================
CINEMATIC VEIL — the "never a hard cut" transition layer.
Rooms dissolve to darkness rather than snapping between screens; on the
way out of a room, a single lingering line appears in that darkness
before the return. See playVeilTransition / playClosingShot in app.js.
========================================================================== */
.cinematic-veil {
position: fixed;
inset: 0;
z-index: 9997;
background: #04020a;
opacity: 0;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
padding: 10vh 12vw;
transition: opacity 0.7s ease;
}
.cinematic-veil.active {
opacity: 1;
pointer-events: auto;
}
.cinematic-veil-line {
font-family: var(--serif);
font-style: italic;
font-size: clamp(1.05rem, 3.2vw, 1.55rem);
line-height: 1.6;
color: var(--ivory);
text-align: center;
max-width: 32ch;
opacity: 0;
transform: translateY(8px);
transition: opacity 1s ease, transform 1s ease;
}
.cinematic-veil-line.visible {
opacity: 0.92;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.cinematic-veil,
.cinematic-veil-line {
transition-duration: 0.01ms !important;
}
}
.countdown-celebration {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
padding: 24px;
text-align: center;
background: radial-gradient(circle at center, rgba(21, 19, 34, 0.18), rgba(5, 5, 11, 0.72));
backdrop-filter: blur(8px);
z-index: 130;
opacity: 0;
pointer-events: none;
transition: opacity 0.6s ease;
}
.countdown-celebration.visible {
opacity: 1;
pointer-events: auto;
}
.celebration-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.celebration-burst,
.celebration-line,
.celebration-ambient,
.celebration-signature {
position: relative;
z-index: 1;
}
.celebration-burst {
width: min(110px, 24vw);
aspect-ratio: 1;
border-radius: 50%;
border: 1px solid rgba(92, 0, 56, 0.28);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 0 45px rgba(220, 116, 180, 0.08);
margin-bottom: 4px;
animation: celebrationPulse 2.6s ease-in-out infinite;
}
.celebration-burst::before,
.celebration-burst::after {
content: '';
position: absolute;
inset: 12px;
border-radius: 50%;
border: 1px dashed rgba(249, 234, 244, 0.16);
}
.celebration-burst::after {
inset: 28px;
border-color: rgba(92, 0, 56, 0.22);
}
.celebration-line {
font-family: var(--serif);
font-size: clamp(1rem, 2.2vw, 1.35rem);
color: rgba(249, 234, 244, 0.94);
margin: 0;
max-width: min(720px, 90vw);
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.26);
}
.celebration-line.emphasis {
font-size: clamp(1.25rem, 3.2vw, 1.8rem);
font-style: italic;
color: rgba(255, 241, 250, 0.98);
}
.celebration-ambient {
font-family: var(--sans);
font-size: 0.78rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(249, 234, 244, 0.74);
margin: 0;
}
.celebration-signature {
font-family: var(--serif);
font-size: 0.95rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(220, 116, 180, 0.86);
margin-top: 6px;
}
@keyframes celebrationPulse {
0%, 100% { transform: scale(0.96); opacity: 0.82; }
50% { transform: scale(1.04); opacity: 1; }
}
/* page-thickness suggestion (subtle) */
#book-cover::before {
content: '';
position: absolute;
right: -clamp(8px, 2.4vw, 18px);
top: 6%;
bottom: 6%;
width: clamp(8px, 2.2vw, 22px);
border-radius: 4px;
background: linear-gradient(90deg, #f7e2ef 0%, #f0d7e7 18%, #f0d7e7 82%, rgba(0, 0, 0, 0.12) 100%);
box-shadow: -8px 4px 30px rgba(0, 0, 0, 0.4);
opacity: 0.95;
pointer-events: none;
}
/* subtle shimmer on metallic/gold elements */
@keyframes goldShimmer { 0% { background-position: -120% 0; } 100% { background-position: 220% 0; } }
.signature-text, .volume-tag {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, rgba(218, 49, 148, 0.12) 50%, rgba(255, 255, 255, 0.02) 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 220% 100%;
}
.signature-text { animation: goldShimmer 6s linear infinite; }
@media (prefers-reduced-motion: reduce) {
/* Purely ambient, infinitely-looping decoration — safe to stop outright, nothing here gates content visibility */
.light-leak,
.dust-particles::before,
.dust-particles::after,
.signature-text,
.title-word,
.wax-seal,
.celebration-burst,
#cinema-intermission h1 { animation: none !important; }
/* Everything else: keep the animation so timed reveals still land on their visible end state, just make the motion itself effectively instant */
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.vellum-layer.turning { transition-duration: 0.001ms !important; }
}
/* Baseline keyboard focus visibility for every interactive element. This supplements — and, thanks to
selector specificity, never overrides — the bespoke focus treatments defined for specific components
elsewhere in this file. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 3px;
}
/* Persistent Global Return Button */
.global-back-btn {
position: fixed;
top: max(16px, env(safe-area-inset-top));
left: max(16px, env(safe-area-inset-left));
z-index: 99999;
font-family: var(--sans);
font-size: 0.7rem;
padding: 8px 14px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold);
background: rgba(14, 13, 23, 0.82);
backdrop-filter: blur(8px);
border: 1px solid rgba(92, 0, 56, 0.24);
border-radius: 999px;
cursor: pointer;
opacity: 0;
pointer-events: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 18px rgba(0, 0, 0, 0.16);
transition: opacity 0.4s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.global-back-btn.visible {
opacity: 1;
pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
.global-back-btn:hover {
background: var(--gold-faint);
color: var(--ivory);
}
}
/* ==========================================================================
SCREEN MANAGEMENT (Fixes Blank Page Issue)
========================================================================== */
.screen, .room-screen {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100dvh;
height: 100dvh;
z-index: 10;
opacity: 0;
visibility: hidden; /* Only hides inactive screens */
pointer-events: none;
transition: opacity 0.8s ease-in-out, visibility 0.8s;
}
.screen.active, .room-screen.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 20;
}
/* ==========================================================================
UTILITIES & TYPOGRAPHY
========================================================================== */
.serif { font-family: var(--serif); font-weight: 300; }
.italic { font-style: italic; }
.micro { font-size: 0.65rem; letter-spacing: 0.1em; opacity: 0.7; }
.archival-tag {
display: inline-block;
font-family: var(--sans);
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--room-accent, var(--gold));
}
.hidden { display: none !important; }
.fade-step { opacity: 0; transition: opacity 1s ease; }
.ghost-btn, .ghost-text-btn {
font-family: var(--sans);
letter-spacing: 0.18em;
cursor: pointer;
transition: all 0.25s ease;
text-transform: uppercase;
}
.ghost-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 24px;
border: 1px solid var(--room-accent-dim, rgba(229, 193, 133, 0.45));
color: var(--room-accent, #E5C185);
background: linear-gradient(180deg, rgba(43, 4, 10, 0.55), rgba(43, 4, 10, 0.82));
font-size: 0.85rem;
border-radius: 999px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 28px rgba(0, 0, 0, 0.28);
}
.ghost-text-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
border-radius: 999px;
background: rgba(43, 4, 10, 0.4);
border: 1px solid var(--room-accent-dim, rgba(229, 193, 133, 0.32));
color: var(--room-accent, #E5C185);
font-size: 0.78rem;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 10px 18px rgba(0, 0, 0, 0.18);
}
@media (hover: hover) and (pointer: fine) {
.ghost-btn:hover {
background: linear-gradient(180deg, rgba(58, 6, 14, 0.72), rgba(58, 6, 14, 0.95));
border-color: var(--room-accent, rgba(229, 193, 133, 0.85));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 26px var(--room-accent-dim, rgba(229, 193, 133, 0.22));
}
.ghost-text-btn:hover {
background: rgba(58, 6, 14, 0.6);
border-color: var(--room-accent, rgba(229, 193, 133, 0.55));
}
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideHint { 0% { transform: translateX(0); opacity: 0.5; } 50% { transform: translateX(10px); opacity: 1; } 100% { transform: translateX(0); opacity: 0.5; } }
/* ==========================================================================
ACT I: THE INVITATION (THE COVER)
========================================================================== */
#act-i-cover { background: radial-gradient(circle at top, rgba(184, 165, 214, 0.08), transparent 36%), var(--void); }
#cover-surroundings {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity 3s ease;
}
#cover-surroundings::before {
content: '';
position: absolute;
inset: 8%;
background: radial-gradient(circle at 20% 20%, rgba(220, 116, 180, 0.08), transparent 28%), radial-gradient(circle at 80% 80%, rgba(184, 165, 214, 0.06), transparent 24%);
opacity: 0.8;
pointer-events: none;
}
.ghost-obj {
position: absolute;
font-size: 2rem;
filter: grayscale(100%) opacity(0.06) drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
}
#book-cover {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, rgba(31, 28, 54, 0.98) 0%, rgba(14, 13, 23, 0.98) 100%);
background-image: radial-gradient(circle at 20% 18%, rgba(220, 116, 180, 0.10), transparent 18%),
radial-gradient(circle at 80% 80%, rgba(184, 165, 214, 0.10), transparent 26%),
linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.28));
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45), inset 0 0 80px rgba(255, 255, 255, 0.02), 0 0 0 1px rgba(92, 0, 56, 0.08);
transform: scale(1.1);
opacity: 0;
transition: transform 4s cubic-bezier(0.25, 1, 0.5, 1), opacity 2s ease, filter 0.8s ease, box-shadow 0.8s ease;
border-radius: clamp(10px, 2.5vw, 28px);
overflow: visible;
border: 1px solid rgba(92, 0, 56, 0.16);
will-change: filter, box-shadow;
}
/* interactive tactile hint when touching lower-right corner */
#book-cover.tactile {
transform: scale(1.105) translateY(-6px);
box-shadow: 0 36px 100px rgba(0, 0, 0, 0.6), inset 0 8px 40px rgba(255, 255, 255, 0.02);
}
#book-cover.tactile .title-word { background-position: 30% 6%; }
/* extra leather details: fine grain, tiny imperfections and edge wear */
#book-cover::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background-image: url("data:image/svg+xml;utf8,"),
radial-gradient(1200px at 8% 12%, rgba(255, 255, 255, 0.02), transparent 6%),
radial-gradient(800px at 92% 88%, rgba(0, 0, 0, 0.03), transparent 6%);
mix-blend-mode: multiply;
opacity: 0.28;
}
#book-cover::before {
content: '';
position: absolute;
left: 50%;
top: 7%;
bottom: 7%;
width: clamp(8px, 1.2vw, 12px);
transform: translateX(-50%);
border-radius: 999px;
background: linear-gradient(180deg, rgba(246, 212, 234, 0.92) 0%, rgba(222, 165, 202, 0.76) 100%);
box-shadow: inset 0 0 0 1px rgba(97, 44, 95, 0.12), 0 0 16px rgba(0, 0, 0, 0.16);
opacity: 0.45;
pointer-events: none;
}
#book-cover .corner-wear {
position: absolute;
width: 22px;
height: 22px;
border-radius: 6px;
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.06) 60%, transparent 100%);
opacity: 0.18;
pointer-events: none;
}
#book-cover .corner-wear.top-left { left: 6%; top: 6%; transform: rotate(-6deg); }
#book-cover .corner-wear.bottom-right { right: 6%; bottom: 6%; transform: rotate(8deg); }
#book-cover.zoomed-out {
transform: scale(1);
opacity: 1;
}
#book-cover.zoomed-out ~ #cover-surroundings {
opacity: 1;
}
.cover-typography {
text-align: center;
z-index: 20;
width: 100%; /* Ensures the container respects the screen width */
display: flex;
flex-direction: column;
align-items: center;
}
#cover-title {
display: flex;
flex-direction: column;
align-items: center;
font-family: var(--serif);
font-size: clamp(2rem, 12vw, 5rem);
font-weight: 400;
line-height: 1.05;
letter-spacing: 0.05em;
color: rgba(249, 234, 244, 0.95);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 10px rgba(0, 0, 0, 0.28), 0 12px 18px rgba(0, 0, 0, 0.16);
margin: 0;
padding: 0 10px;
position: relative;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16));
}
/* Title refinement: gold leaf on the letters (no rectangular overlay) */
.title-word {
opacity: 0;
transition: opacity 1.5s ease;
white-space: nowrap; /* Prevents long words from wrapping awkwardly */
background: linear-gradient(120deg, rgba(250, 239, 210, 0.98) 0%, rgba(219, 180, 112, 0.86) 28%, rgba(174, 125, 58, 0.82) 58%, rgba(248, 238, 214, 0.9) 100%);
background-size: 180% 180%;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
mix-blend-mode: screen;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 -4px 10px rgba(0, 0, 0, 0.48);
animation: champagneGoldShift 12s ease-in-out infinite;
}
/* micro variations in emboss depth — tiny offsets for human imperfection */
.title-word:nth-child(1) { transform: translateY(-0.2px); }
.title-word:nth-child(2) { transform: translateY(0.35px); }
.title-word:nth-child(3) { transform: translateY(-0.15px); }
.title-word {
opacity: 0;
transition: opacity 1.5s ease;
white-space: nowrap; /* Prevents long words from wrapping awkwardly */
}
.cover-meta { display: flex; flex-direction: column; align-items: center; margin-top: 26px; gap: 8px; }
.signature-text { font-family: var(--script), var(--serif); font-size: 2.4rem; color: rgba(248, 243, 235, 0.95); opacity: 0; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 8px rgba(212, 175, 55, 0.18); }
.volume-tag { font-family: var(--sans); font-weight: 500; font-size: clamp(0.85rem, 0.6rem + 1.2vw, 1.05rem); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 250, 241, 0.98); margin-top: 15px; opacity: 0.96; transition: opacity 1.5s ease; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28), 0 0 14px rgba(212, 175, 55, 0.24), 0 0 22px rgba(248, 243, 235, 0.12); line-height: 1.7; }
.volume-tag .divider { opacity: 0.82; margin: 0 6px; color: rgba(255, 250, 241, 0.96); }
.cover-epigraph { margin-top: 2vh; text-align: center; font-family: var(--serif); font-size: 1.25rem; font-style: italic; color: rgba(255, 255, 255, 0.34); z-index: 22; letter-spacing: 0.01em; }
.epi-line { opacity: 0; transition: opacity 1.5s ease; margin-bottom: 5px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }
#cover-lock { position: relative; bottom: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; transition: opacity 1.5s ease; z-index: 50; margin-top: 4vh; }
#cover-lock.locked .hint-text { color: rgba(212, 175, 55, 0.55); }
#cover-lock.locked .wax-seal { cursor: default; opacity: 0.7; filter: grayscale(0.18); }
.cover-note { display: block; margin-top: 18px; padding: 16px 18px; border: 1px solid rgba(92, 0, 56, 0.14); background: linear-gradient(135deg, rgba(31, 26, 49, 0.86), rgba(14, 13, 23, 0.92)); backdrop-filter: blur(16px) saturate(1.08); border-radius: 18px; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06); max-width: 280px; transform: rotate(-0.75deg); position: relative; transition: transform 0.45s ease, box-shadow 0.45s ease; }
.cover-note::before { content: '';
position: absolute;
top: 10px;
right: 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(249, 234, 244, 0.14);
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
}
.cover-note::after { content: 'Cover opens in';
position: absolute;
top: -12px;
left: 12px;
font-family: var(--serif);
font-size: 0.72rem;
letter-spacing: 0.06em;
color: rgba(47, 42, 65, 0.9);
text-transform: none;
background: rgba(249, 234, 244, 0.92);
padding: 6px 8px;
border-radius: 4px;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}
/* library checkout card look for the countdown area */
.cover-note {
padding-top: 22px;
background: linear-gradient(180deg, rgba(31, 26, 49, 0.92), rgba(14, 13, 23, 0.96));
border: 1px solid rgba(92, 0, 56, 0.16);
}
.cover-note-label { display: block; font-family: var(--serif); font-size: 0.82rem; font-style: italic; letter-spacing: 0.02em; color: rgba(248, 243, 235, 0.8); margin-bottom: 8px; }
.countdown-timer { display: inline-flex; align-items: center; justify-content: center; width: 100%; font-family: var(--serif); font-size: 1rem; color: var(--ivory); letter-spacing: 0.08em; background: rgba(255, 255, 255, 0.05); border: 1px dashed rgba(92, 0, 56, 0.24); border-radius: 14px; padding: 10px 14px; }
.hint-text { font-family: var(--sans); font-size: clamp(0.76rem, 2.8vw, 0.9rem); text-transform: uppercase; letter-spacing: 0.18em; color: rgba(216, 185, 120, 0.92); line-height: 1.7; max-width: min(92vw, 320px); text-align: center; }
.wax-seal { position: relative; width: 69px; height: 69px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #7b2b39 0%, #4e1624 45%, #2b0d14 100%); border: 1.5px solid rgba(184, 116, 78, 0.7); box-shadow: inset 0 12px 20px rgba(0, 0, 0, 0.45), 0 16px 30px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.03); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.28s ease; color: #d8b978; font-size: 1.725rem; opacity: 1; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.2)); animation: waxSealBreath 8s ease-in-out infinite; }
.wax-seal::before {
content: '';
position: absolute;
width: 46%;
height: 46%;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(216, 185, 120, 0.95), rgba(179, 138, 69, 0.68));
box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.08), 0 1px 0 rgba(0, 0, 0, 0.35);
transform: translateY(-2%);
opacity: 0.95;
}
.wax-seal::after {
content: '';
position: absolute;
left: 6%;
top: 6%;
width: 30%;
height: 20%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.05));
border-radius: 50%;
filter: blur(6px);
opacity: 0.18;
}
#book-cover.opening {
transform: translateY(-4px) scale(0.995);
filter: brightness(1.01) saturate(0.98);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4), inset 0 0 80px rgba(255, 255, 255, 0.02), 0 0 0 1px rgba(220, 116, 180, 0.08);
}
#book-cover.opening .cover-note {
transform: rotate(-0.35deg) translateY(-2px);
}
#book-cover.opening .wax-seal {
transform: scale(0.92) translateY(3px);
}
@media (hover: hover) and (pointer: fine) {
.wax-seal:hover { box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8), 0 0 25px rgba(212, 175, 55, 0.3); }
}
@keyframes coverBreath {
0%, 100% { box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45), inset 0 0 80px rgba(255, 255, 255, 0.02), 0 0 0 1px rgba(220, 116, 180, 0.08); filter: saturate(1) brightness(1); }
50% { box-shadow: 0 32px 88px rgba(0, 0, 0, 0.5), inset 0 0 88px rgba(255, 255, 255, 0.03), 0 0 0 1px rgba(220, 116, 180, 0.1); filter: saturate(1.01) brightness(1.01); }
}
@keyframes champagneGoldShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes waxSealBreath {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-1px) scale(1.01); }
}
/* --------------------------------------------------------------------------
Mobile adjustments: prevent cover epigraph from overlapping the wax seal
-------------------------------------------------------------------------- */
@media (max-width: 600px) {
#book-cover {
padding-bottom: 40px;
}
.cover-epigraph {
margin-top: 3vh;
font-size: clamp(0.95rem, 5vw, 1.05rem);
padding: 0 18px;
max-width: 92%;
line-height: 1.4;
color: rgba(255, 255, 255, 0.45);
z-index: 10;
word-break: break-word;
}
.cover-epigraph .epi-line {
margin-bottom: 6px;
}
/* keep the lock below the epigraph but slightly raised on mobile */
#cover-lock { margin-top: 2.2vh; gap: 16px; }
.hint-text {
font-size: clamp(0.82rem, 3.6vw, 0.96rem);
line-height: 1.8;
max-width: min(90vw, 340px);
padding: 0 8px;
}
}
/* Page turn animation for vellum swipe */
.vellum-layer.turning {
transform: perspective(900px) rotateY(-18deg) translateX(120%);
transition: transform 900ms cubic-bezier(.2,.9,.25,1), opacity 600ms ease;
opacity: 0;
}
/* ==========================================================================
ACT II: THE VELLUM
========================================================================== */
#act-ii-vellum { background: transparent; }
#act-threshold-vellum {
--room-accent: #e0a582;
--room-accent-dim: rgba(224, 165, 130, 0.45);
--room-light-pos: 50% 25%;
--room-light-color: rgba(224, 165, 130, 0.10);
background:
radial-gradient(circle at 50% 30%, rgba(224, 150, 110, 0.10), transparent 42%),
radial-gradient(circle at 50% 92%, rgba(92, 0, 56, 0.22), transparent 50%),
linear-gradient(180deg, #140a10 0%, #050308 100%);
}
.vellum-layer {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--ivory);
cursor: grab;
transition: transform 0.9s ease, opacity 0.9s ease;
background: linear-gradient(180deg, rgba(29, 14, 50, 0.92), rgba(9, 2, 20, 0.94));
background-image: linear-gradient(180deg, rgba(29, 14, 50, 0.92), rgba(9, 2, 20, 0.94)),
radial-gradient(circle at 15% 12%, var(--paper), transparent 40%);
backdrop-filter: blur(22px) saturate(1.15);
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.4), inset 0 -6px 18px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
border-radius: 28px;
transform-origin: bottom right;
will-change: transform;
border: 1px solid var(--frame-soft);
}
.vellum-layer:active { cursor: grabbing; }
.vellum-text { text-align: center; font-family: var(--serif); font-size: 1.8rem; line-height: 1.5; opacity: 0; animation: fadeIn 2s forwards 0.5s; color: rgba(251, 249, 252, 0.92); }
.peel-instruction { position: absolute; bottom: 18vh; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rose); opacity: 0.85; }
/* deckled edges and subtle fibres */
.vellum-layer::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: radial-gradient(circle at 6% 8%, rgba(0, 0, 0, 0.02), transparent 8%), radial-gradient(circle at 94% 92%, rgba(0, 0, 0, 0.02), transparent 8%);
mask-image: radial-gradient(closest-side, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 92%, rgba(0, 0, 0, 0) 100%);
opacity: 0.6;
}
.vellum-layer::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
opacity: 0.06;
}
/* peeled state and curling visual */
.vellum-layer.peeling {
transition: transform 1s cubic-bezier(.2,.9,.25,1), box-shadow 1s ease, opacity 0.6s ease;
box-shadow: 0 48px 110px rgba(0, 0, 0, 0.45);
}
/* visual corner handle */
.peel-handle {
position: absolute;
right: 12px;
bottom: 12px;
width: 56px;
height: 56px;
border-radius: 6px;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.02));
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
cursor: grab;
transform-origin: 100% 100%;
}
.peel-handle:active { cursor: grabbing; }
.peel-handle::before {
content: '';
position: absolute;
right: 8px;
bottom: 8px;
width: 0;
height: 0;
border-left: 18px solid transparent;
border-top: 18px solid rgba(255, 255, 255, 0.06);
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}
/* publisher mark */
.publisher-mark {
position: absolute;
bottom: 8vh;
font-family: var(--serif);
font-size: 0.7rem;
color: rgba(251, 249, 252, 0.14);
letter-spacing: 0.04em;
}
/* ==========================================================================
ACT III: A NOTE BEFORE WE BEGIN
========================================================================== */
#act-wonder-note {
--room-accent: #e0a582;
--room-accent-dim: rgba(224, 165, 130, 0.42);
}
.book-gutter-background {
position: absolute;
inset: 0;
background: radial-gradient(circle at top, rgba(224, 150, 110, 0.10), transparent 32%), linear-gradient(180deg, #160c12 0%, #08050a 100%);
box-shadow: inset 50px 0 100px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
justify-content: center;
padding: clamp(16px, 4vw, 36px);
width: 100%;
}
.folded-note-container { position: relative; width: min(100%, 560px); min-height: min(78vh, 720px); max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(29, 14, 50, 0.92) 0%, rgba(9, 2, 20, 0.96) 100%); background-image: linear-gradient(180deg, rgba(29, 14, 50, 0.92) 0%, rgba(9, 2, 20, 0.96) 100%), linear-gradient(145deg, var(--paper), transparent 60%); color: var(--ivory); padding: clamp(24px, 5vw, 44px); box-shadow: 2px 5px 25px rgba(0, 0, 0, 0.4), inset 0 0 40px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04); transform: rotate(-1deg); transition: transform 0.8s ease, opacity 0.8s ease; scrollbar-width: none; border: 1px solid var(--frame-soft); backdrop-filter: blur(18px); }
.folded-note-container::-webkit-scrollbar { display: none; }
.note-front, .note-back { width: 100%; transition: opacity 0.5s ease; }
.note-front.hidden, .note-back.hidden { display: none !important; }
.note-front { display: flex; flex-direction: column; flex: 1; justify-content: space-between; gap: 18px; }
.note-title { font-family: var(--sans); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--rose); margin-bottom: 30px; text-align: center; }
.note-body { flex: 1; padding-bottom: 8px; }
.note-body p { font-family: var(--serif); font-size: clamp(1rem, 1.7vw, 1.2rem); line-height: 1.7; margin-bottom: 18px; color: rgba(251, 249, 252, 0.92); }
.fold-corner { display: inline-flex; align-self: flex-end; margin-top: 8px; margin-left: auto; padding: 10px 0 0; background: transparent; border: none; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); cursor: pointer; transition: opacity 0.3s ease, color 0.3s ease; opacity: 0.85; }
@media (hover: hover) and (pointer: fine) {
.fold-corner:hover { opacity: 1; color: #f2d9a8; }
}
.note-back { text-align: center; padding: clamp(24px, 6vw, 40px) 10px 12px; }
.back-text { font-family: var(--serif); font-size: 1.6rem; margin-bottom: 40px; color: var(--ivory); }
/* ==========================================================================
ACT IV: THE CURATOR'S DESK
========================================================================== */
#act-exploration-desk, #act-iv-desk {
--room-accent: #d9b877;
--room-accent-dim: rgba(217, 184, 119, 0.45);
--room-light-pos: 50% 4%;
--room-light-color: rgba(229, 193, 133, 0.10);
overflow-y: auto;
padding: 16px 0;
background:
radial-gradient(circle at 50% 6%, rgba(229, 193, 133, 0.14) 0%, transparent 30%),
radial-gradient(circle at 85% 90%, rgba(120, 80, 40, 0.14) 0%, transparent 38%),
linear-gradient(180deg, #1c1712 0%, #0d0a08 100%);
}
.brass-plaque {
position: relative;
flex-shrink: 0;
margin-bottom: clamp(20px, 4vh, 40px);
max-width: min(92vw, 440px);
text-align: center;
color: var(--ivory);
opacity: 0;
animation: fadeIn 2s forwards 1s;
padding: 14px 22px;
border: 1px solid rgba(92, 0, 56, 0.22);
border-radius: 999px;
background: rgba(10, 10, 20, 0.7);
backdrop-filter: blur(12px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 28px rgba(0, 0, 0, 0.2);
}
.plaque-title {
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
margin-bottom: 8px;
color: rgba(249, 234, 244, 0.98);
}
.plaque-italic {
font-family: var(--serif);
font-style: italic;
font-size: 1rem;
color: rgba(249, 234, 244, 0.78);
}
.desk-surface {
position: relative;
width: min(92vw, 800px);
height: min(72vh, 620px);
margin-top: 0;
/* Dark walnut surface photo for the curator's desk -- the hub connecting
all five exhibits. Swap the url() below for a different surface. */
background-image:
radial-gradient(circle at 18% 12%, rgba(255, 214, 240, 0.10), transparent 24%),
radial-gradient(circle at 82% 88%, rgba(184, 165, 214, 0.08), transparent 26%),
linear-gradient(180deg, rgba(26, 24, 28, 0.86) 0%, rgba(12, 11, 14, 0.93) 100%),
url('https://images.pexels.com/photos/6373386/pexels-photo-6373386.jpeg?auto=compress&cs=tinysrgb&w=1200');
background-size: cover, cover, cover, cover;
background-position: center, center, center, center;
background-repeat: no-repeat;
border: 1px solid rgba(92, 0, 56, 0.16);
border-radius: 28px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 24px 60px rgba(0, 0, 0, 0.24);
overflow: hidden;
}
.desk-surface::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 30px), radial-gradient(circle at 30% 20%, rgba(255, 196, 234, 0.12), transparent 26%), radial-gradient(circle at 70% 80%, rgba(184, 165, 214, 0.08), transparent 28%);
pointer-events: none;
}
.desk-surface::after {
content: '';
position: absolute;
inset: 14px;
border: 1px solid rgba(92, 0, 56, 0.12);
border-radius: 20px;
pointer-events: none;
background: radial-gradient(circle at 70% 24%, rgba(129, 42, 105, 0.22), transparent 30%), radial-gradient(circle at 28% 78%, rgba(123, 52, 108, 0.12), transparent 28%);
}
.desk-object {
position: absolute;
background: transparent;
border: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
cursor: pointer;
transform: translate(-50%, -50%) rotate(var(--obj-rotate, 0deg));
opacity: 0;
transition: transform 0.5s cubic-bezier(.34, 1.56, .64, 1), filter 0.45s ease;
animation: fadeIn 2s forwards;
width: 140px;
padding: 0 0 8px;
text-align: center;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.desk-object:nth-child(1) { animation-delay: 1.0s; } .desk-object:nth-child(2) { animation-delay: 1.3s; } .desk-object:nth-child(3) { animation-delay: 1.6s; } .desk-object:nth-child(4) { animation-delay: 1.9s; } .desk-object:nth-child(5) { animation-delay: 2.2s; }
@media (hover: hover) and (pointer: fine) {
.desk-object:hover {
transform: translate(-50%, -55%) rotate(calc(var(--obj-rotate, 0deg) + 1deg));
filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.28)) drop-shadow(0 0 20px rgba(218, 49, 148, 0.20));
}
}
/* Lift -- pressed/held, on any input device. Faster, snappier transition than
the resting state so the pickup feels immediate; releasing falls back to
the bouncy base transition for a soft, physical "return". */
.desk-object.lifted {
transition: transform 0.18s cubic-bezier(.2, .8, .2, 1), filter 0.18s ease;
transform: translate(-50%, -64%) scale(1.08) rotate(calc(var(--obj-rotate, 0deg) + 2.5deg));
filter: drop-shadow(0 26px 26px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 26px rgba(218, 49, 148, 0.26));
}
.desk-object.lifted .artifact {
transform: scale(1.05);
}
.desk-surface.fade-out, .brass-plaque.fade-out {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.45s ease, transform 0.45s ease;
}
.artifact {
font-size: 2.45rem;
filter: grayscale(16%) contrast(122%) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.26));
transition: filter 0.5s ease, transform 0.3s ease;
}
.desk-object.completed .artifact { filter: grayscale(0%) contrast(100%) drop-shadow(0 6px 12px rgba(220, 116, 180, 0.18)); }
.museum-tag {
font-family: var(--sans);
font-size: 0.58rem;
line-height: 1.45;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(249, 234, 244, 0.72);
border-bottom: 1px solid transparent;
padding-bottom: 2px;
transition: color 0.3s ease;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.desk-object.completed .museum-tag { color: var(--gold); border-bottom: 1px solid var(--gold-dim); }
/* ==========================================================================
ACT V: THE DISCOVERY (THE FIVE CURIOSITIES)
========================================================================== */
/* --- Shared Room Structure --- */
.room-screen {
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
display: flex;
background: radial-gradient(circle at top, rgba(184, 165, 214, 0.08), transparent 30%), linear-gradient(180deg, var(--void) 0%, #151127 100%);
}
.room-screen::before, .room-screen::after {
content: '';
margin: auto;
}
.room-screen::-webkit-scrollbar {
display: none;
}
.room-content {
flex-shrink: 0;
width: 85%;
max-width: 650px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
padding: 80px 0;
position: relative;
overflow: hidden;
isolation: isolate;
}
.room-content::before {
content: '';
position: absolute;
inset: 12px;
border: 1px solid rgba(255, 255, 255, 0.04);
border-radius: 34px;
pointer-events: none;
opacity: 0.7;
}
.room-content::after {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at var(--room-light-pos, 50% 0%), var(--room-light-color, rgba(255, 255, 255, 0.04)), transparent 68%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
background-size: cover, 140px 140px;
background-repeat: no-repeat, repeat;
pointer-events: none;
opacity: 0.45;
}
/* Observations — cool slate-blue, like moonlight through glass */
#room-jar {
--room-accent: #9db3c4;
--room-accent-dim: rgba(157, 179, 196, 0.42);
--room-light-pos: 78% 8%;
--room-light-color: rgba(157, 179, 196, 0.12);
background:
radial-gradient(circle at 78% 8%, rgba(150, 170, 190, 0.10), transparent 32%),
linear-gradient(180deg, var(--void) 0%, #0c131a 100%);
}
#room-jar .room-content {
background:
radial-gradient(circle at 20% 0%, rgba(90, 105, 126, 0.18), transparent 34%),
linear-gradient(180deg, rgba(12, 12, 22, 0.94) 0%, rgba(23, 23, 43, 0.97) 100%);
border: 1px solid rgba(90, 105, 126, 0.2);
border-radius: 34px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 28px 70px rgba(5, 5, 8, 0.2);
padding: 64px 26px 56px;
}
#room-jar .room-content::before {
background: radial-gradient(circle at 15% 12%, rgba(255, 255, 255, 0.06), transparent 30%);
}
/* Curated Objects — warm gold gallery track-lighting */
#room-audio {
--room-accent: #E5C185;
--room-accent-dim: rgba(229, 193, 133, 0.42);
--room-light-pos: 24% 8%;
--room-light-color: rgba(229, 193, 133, 0.12);
background:
radial-gradient(circle at 24% 8%, rgba(229, 193, 133, 0.10), transparent 32%),
linear-gradient(180deg, var(--void) 0%, #17111f 100%);
}
#room-audio .room-content {
background:
radial-gradient(circle at 20% 10%, rgba(120, 71, 124, 0.16), transparent 34%),
linear-gradient(180deg, rgba(15, 13, 29, 0.94) 0%, rgba(30, 24, 41, 0.97) 100%);
border: 1px solid rgba(184, 165, 214, 0.16);
border-radius: 34px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 28px 70px rgba(5, 5, 8, 0.2);
padding: 64px 26px 56px;
}
#room-audio .room-content::before {
background: radial-gradient(circle at 80% 20%, rgba(220, 116, 180, 0.08), transparent 34%);
}
/* Keepsakes — soft blush, sentimental */
#room-carrying {
--room-accent: #e3a0c2;
--room-accent-dim: rgba(227, 160, 194, 0.42);
--room-light-pos: 50% 6%;
--room-light-color: rgba(232, 169, 201, 0.13);
background:
radial-gradient(circle at 50% 8%, rgba(232, 169, 201, 0.12), transparent 32%),
linear-gradient(180deg, var(--void) 0%, #190f1c 100%);
}
#room-carrying .room-content {
background:
radial-gradient(circle at 20% 10%, rgba(204, 67, 154, 0.18), transparent 32%),
linear-gradient(180deg, rgba(13, 10, 21, 0.96) 0%, rgba(7, 5, 12, 0.98) 100%);
border: 1px solid rgba(92, 0, 56, 0.18);
border-radius: 34px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 28px 70px rgba(5, 5, 8, 0.2);
}
/* Future Rooms — teal / aged verdigris */
#room-key {
--room-accent: #7bb8a3;
--room-accent-dim: rgba(123, 184, 163, 0.42);
--room-light-pos: 78% 10%;
--room-light-color: rgba(123, 168, 155, 0.12);
background:
radial-gradient(circle at 78% 10%, rgba(123, 168, 155, 0.10), transparent 32%),
linear-gradient(180deg, var(--void) 0%, #0d1815 100%);
}
#room-key .room-content {
/* Vintage card-catalog photo -- an archive of rooms not yet built. */
background-image:
radial-gradient(circle at 20% 10%, rgba(123, 143, 155, 0.18), transparent 32%),
linear-gradient(180deg, rgba(10, 16, 17, 0.82) 0%, rgba(11, 9, 15, 0.92) 100%),
url('https://images.pexels.com/photos/6333856/pexels-photo-6333856.jpeg?auto=compress&cs=tinysrgb&w=1200');
background-size: cover, cover, cover;
background-position: center, center, center 38%;
background-repeat: no-repeat;
border: 1px solid rgba(123, 143, 155, 0.2);
border-radius: 34px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 28px 70px rgba(5, 5, 8, 0.2);
padding: 64px 26px 56px;
}
/* Now Showing — theater crimson with a warm marquee glow */
#room-cinema {
--room-accent: #d9a05c;
--room-accent-dim: rgba(217, 160, 92, 0.45);
--room-light-pos: 50% 4%;
--room-light-color: rgba(229, 193, 133, 0.14);
background:
radial-gradient(circle at 50% 4%, rgba(229, 193, 133, 0.12), transparent 30%),
radial-gradient(circle at 50% 100%, rgba(91, 15, 30, 0.2), transparent 42%),
linear-gradient(180deg, var(--void) 0%, #170a10 100%);
}
#room-cinema .room-content {
background:
radial-gradient(circle at 20% 8%, rgba(157, 140, 190, 0.18), transparent 32%),
linear-gradient(180deg, rgba(16, 15, 25, 0.96) 0%, rgba(25, 22, 38, 0.96) 100%);
border: 1px solid rgba(157, 140, 190, 0.18);
border-radius: 34px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 28px 70px rgba(5, 5, 8, 0.2);
padding: 64px 26px 56px;
}
.room-intro {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
margin-bottom: 28px;
max-width: 600px;
}
.room-title {
font-size: clamp(2rem, 4vw, 3rem);
color: var(--ivory);
margin: 0;
}
.room-screen.settle-out {
opacity: 0;
transform: translateY(14px);
filter: brightness(0.7);
transition: opacity 1.8s ease, transform 1.8s ease, filter 1.8s ease;
pointer-events: none;
}
.carrying-room {
min-height: 100dvh;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
overflow: hidden;
background:
radial-gradient(circle at 50% 10%, rgba(220, 116, 180, 0.16), transparent 34%),
radial-gradient(circle at 50% 100%, rgba(184, 165, 214, 0.08), transparent 36%),
linear-gradient(145deg, #0a0a21 0%, #070612 54%, #181337 100%);
}
.carrying-stage {
position: relative;
width: min(100%, 460px);
max-width: 460px;
min-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 20px;
padding: 28px 20px 32px;
border-radius: 34px;
background:
radial-gradient(circle at 50% 8%, rgba(255, 229, 248, 0.12), transparent 26%),
linear-gradient(180deg, rgba(25, 22, 54, 0.96) 0%, rgba(8, 7, 17, 0.98) 100%);
box-shadow: inset 0 0 0 1px rgba(255, 229, 246, 0.06), 0 28px 72px rgba(0, 0, 0, 0.34);
border: 1px solid rgba(92, 0, 56, 0.18);
}
.carrying-light {
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(243, 172, 216, 0.26), transparent 48%);
pointer-events: none;
opacity: 0;
}
/* Scene introduction: Candle fade — the light catches unevenly, like a
flame taking hold, rather than a flat linear fade. */
.carrying-stage.light-on .carrying-light {
opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
.carrying-stage.light-on .carrying-light {
animation: candle-catch 2s ease-out 0.3s both;
}
@keyframes candle-catch {
0% { opacity: 0; }
22% { opacity: 0.55; }
34% { opacity: 0.3; }
50% { opacity: 0.8; }
62% { opacity: 0.58; }
100% { opacity: 1; }
}
}
.carrying-ground {
position: absolute;
bottom: 0;
width: 100%;
height: 26%;
background: radial-gradient(circle at 50% 0%, rgba(255, 242, 251, 0.74), rgba(241, 170, 215, 0.28) 34%, transparent 68%);
filter: blur(0.4px);
pointer-events: none;
}
.keepsake-box {
position: relative;
width: min(80vw, 320px);
aspect-ratio: 1.08 / 1;
border-radius: 24px;
background-image:
radial-gradient(circle at 20% 12%, rgba(255, 228, 245, 0.14), transparent 30%),
linear-gradient(180deg, rgba(20, 16, 38, 0.52) 0%, rgba(8, 7, 17, 0.88) 100%),
url('https://images.pexels.com/photos/36824941/pexels-photo-36824941.jpeg?auto=compress&cs=tinysrgb&w=800');
background-size: cover, cover, cover;
background-position: center, center, center 62%;
background-repeat: no-repeat;
border: 1px solid rgba(92, 0, 56, 0.18);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 26px 54px rgba(0, 0, 0, 0.28);
cursor: pointer;
overflow: hidden;
transition: transform 0.4s ease, box-shadow 0.4s ease;
transform-origin: center bottom;
touch-action: manipulation;
}
.keepsake-box:active {
transform: translateY(0) scale(0.997);
}
@media (hover: hover) and (pointer: fine) {
.keepsake-box:hover {
transform: translateY(-2px);
box-shadow: 0 48px 110px rgba(0, 0, 0, 0.28);
}
}
.keepsake-box::before {
content: '';
position: absolute;
inset: 8% 6% 52% 6%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 92%);
border-radius: 20px 20px 14px 14px;
pointer-events: none;
}
.keepsake-box::after {
content: '';
position: absolute;
left: 6%;
right: 6%;
top: 8%;
height: 42%;
background-image:
linear-gradient(180deg, rgba(255, 228, 247, 0.2) 0%, rgba(40, 30, 55, 0.76) 100%),
url('https://images.pexels.com/photos/36824941/pexels-photo-36824941.jpeg?auto=compress&cs=tinysrgb&w=800');
background-size: cover, cover;
background-position: center, center 30%;
background-repeat: no-repeat;
border-radius: 24px 24px 20px 20px;
transform-origin: top center;
transform: perspective(800px) rotateX(0deg);
transition: transform 1.2s ease;
box-shadow: inset 0 8px 10px rgba(0, 0, 0, 0.22), 0 8px 16px rgba(0, 0, 0, 0.18);
}
.keepsake-box.box-open {
transform: translateY(-6px);
}
.keepsake-box.box-open::after {
transform: perspective(800px) rotateX(18deg) translateY(-6px);
}
.carrying-label {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
max-width: 92%;
opacity: 0;
transition: opacity 0.8s ease;
background: rgba(9, 8, 20, 0.82);
border: 1px solid rgba(92, 0, 56, 0.18);
border-radius: 28px;
padding: 24px 24px 20px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 24px 60px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(8px);
color: var(--ivory);
}
.carrying-label.visible {
opacity: 1;
}
.carrying-subtitle {
display: block;
max-width: 320px;
color: rgba(249, 234, 244, 0.74);
line-height: 1.85;
font-size: 1rem;
margin-top: 2px;
padding: 0 4px;
}
.carrying-label::before {
content: '';
position: absolute;
inset: 0;
border-radius: 28px;
pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 36%);
}
.carrying-stage::before {
content: '';
position: absolute;
inset: 20px 18px 62px;
border-radius: 28px;
background: radial-gradient(circle at 50% 12%, rgba(255, 226, 244, 0.14), transparent 40%), radial-gradient(circle at 50% 95%, rgba(255, 195, 235, 0.08), transparent 45%);
pointer-events: none;
}
.keepsake-tag {
display: inline-block;
font-family: var(--sans);
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #f0dcae;
background: rgba(229, 193, 133, 0.16);
border-radius: 999px;
padding: 6px 12px;
align-self: flex-start;
margin-top: 6px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.keepsake-item {
position: relative;
overflow: visible;
}
.keepsake-item::before {
content: '';
position: absolute;
top: 14px;
left: 18px;
width: 38px;
height: 6px;
background: linear-gradient(90deg, rgba(229, 193, 133, 0.9), rgba(240, 220, 174, 0.5));
border-radius: 999px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
pointer-events: none;
transition: opacity 0.35s ease, transform 0.35s ease;
}
.keepsake-item.keepsake-string::before {
width: 44px;
left: 16px;
}
.keepsake-item.keepsake-envelope::before {
width: 48px;
left: 14px;
}
.keepsake-item.keepsake-seal::before {
width: 32px;
left: 20px;
}
.keepsake-item.keepsake-tiny::before {
width: 28px;
left: 24px;
}
.carrying-label .room-title {
font-size: clamp(2rem, 6vw, 2.8rem);
color: var(--ivory);
}
.carrying-label .room-copy {
color: rgba(251, 249, 252, 0.86);
max-width: 320px;
line-height: 1.8;
}
.keepsake-collection {
width: 100%;
display: grid;
gap: 14px;
padding-top: 4px;
opacity: 0;
transform: translateY(16px);
transition: opacity 0.8s ease, transform 0.8s ease;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.keepsake-collection.visible {
opacity: 1;
transform: translateY(0);
}
.keepsake-surface {
width: 100%;
min-height: 40px;
border-radius: 16px;
background: linear-gradient(135deg, #ece2f9 0%, #d3bfe8 100%);
border: 1px solid rgba(229, 193, 133, 0.4);
box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.4), inset 0 -6px 10px rgba(0, 0, 0, 0.04), 0 8px 16px rgba(0, 0, 0, 0.12);
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.keepsake-item.keepsake-folded .keepsake-surface {
background-image:
linear-gradient(135deg, rgba(236, 226, 249, 0.62), rgba(211, 191, 232, 0.68)),
url('https://images.pexels.com/photos/11503479/pexels-photo-11503479.jpeg?auto=compress&cs=tinysrgb&w=600');
background-size: cover;
background-position: center;
}
.keepsake-item.keepsake-string .keepsake-surface {
background-image:
linear-gradient(135deg, rgba(236, 226, 249, 0.62), rgba(211, 191, 232, 0.68)),
url('https://images.pexels.com/photos/12518241/pexels-photo-12518241.jpeg?auto=compress&cs=tinysrgb&w=600');
background-size: cover;
background-position: center;
}
.keepsake-item.keepsake-tiny:not(.keep-presence) .keepsake-surface {
background-image:
linear-gradient(135deg, rgba(236, 226, 249, 0.66), rgba(211, 191, 232, 0.7)),
url('https://images.pexels.com/photos/8777750/pexels-photo-8777750.jpeg?auto=compress&cs=tinysrgb&w=600');
background-size: cover;
background-position: center;
}
.keepsake-item.keepsake-tiny.keep-presence .keepsake-surface {
background-image:
linear-gradient(135deg, rgba(20, 16, 38, 0.5), rgba(8, 7, 17, 0.64)),
url('https://images.pexels.com/photos/35410294/pexels-photo-35410294.jpeg?auto=compress&cs=tinysrgb&w=600');
background-size: cover;
background-position: center;
}
.keepsake-item {
display: grid;
align-items: start;
gap: 10px;
width: 100%;
padding: 18px 18px 16px;
border-radius: 18px;
background: linear-gradient(180deg, rgba(21, 8, 38, 0.9), rgba(9, 2, 20, 0.94));
border: 1px solid rgba(229, 193, 133, 0.3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 28px rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
text-align: left;
will-change: transform;
position: relative;
overflow: hidden;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.keepsake-item::before {
content: '';
position: absolute;
left: 18px;
top: 16px;
width: 26px;
height: 6px;
background: rgba(229, 193, 133, 0.75);
border-radius: 999px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
.keepsake-item:hover {
transform: translateY(-1px);
box-shadow: 0 20px 36px rgba(0, 0, 0, 0.4);
background: linear-gradient(180deg, rgba(27, 12, 46, 0.94), rgba(11, 3, 22, 0.96));
border-color: rgba(229, 193, 133, 0.5);
}
}
.keepsake-item.opened {
transform: translateY(-4px);
border-color: rgba(229, 193, 133, 0.55);
background: linear-gradient(180deg, rgba(27, 12, 46, 0.95), rgba(9, 2, 20, 0.97));
}
.keepsake-item:focus-visible {
outline: 2px solid rgba(229, 193, 133, 0.7);
outline-offset: 4px;
}
.keepsake-item .keepsake-copy {
grid-row: 2;
color: #241c2e;
line-height: 1.72;
font-family: var(--serif);
background: rgba(240, 231, 251, 0.96);
padding: 0 14px;
border-radius: 18px;
border: 1px solid rgba(229, 193, 133, 0.4);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
opacity: 0;
transform-origin: 50% 0%;
transform: perspective(700px) rotateX(-20deg) scaleY(0.4) translateY(4px);
overflow: hidden;
max-height: 0;
display: block;
transition: max-height 0.5s cubic-bezier(.22,1,.36,1), transform 0.5s cubic-bezier(.22,1,.36,1), opacity 0.32s ease, padding 0.5s cubic-bezier(.22,1,.36,1);
}
.keepsake-item.opened .keepsake-copy {
max-height: min(52vh, 320px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
opacity: 1;
transform: perspective(700px) rotateX(0deg) scaleY(1) translateY(0);
padding: 14px 14px 16px;
}
.keepsake-item h3 {
font-family: var(--serif);
font-size: 1.2rem;
margin: 0;
color: #2a1b3d;
}
.keepsake-item p {
margin: 0;
font-size: 1rem;
color: #362646;
}
.keepsake-item.keepsake-folded {
min-height: 90px;
}
.keepsake-item.keepsake-string {
min-height: 110px;
position: relative;
}
.keepsake-item.keepsake-string .keepsake-string-wrap {
position: absolute;
right: 18px;
top: 26px;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
}
.keepsake-item.keepsake-string .string-line {
position: absolute;
width: 34px;
height: 2px;
background: #E5C185;
border-radius: 1px;
transition: transform 0.8s ease;
}
.keepsake-item.keepsake-string.untied .string-line {
transform: rotate(45deg) translate(10px, 10px);
opacity: 0;
}
.keepsake-item.keepsake-envelope {
min-height: 100px;
}
.keepsake-item.keepsake-envelope .envelope-shell {
width: 100%;
height: 42px;
border-radius: 14px 14px 8px 8px;
background-image:
linear-gradient(180deg, rgba(236, 226, 249, 0.6), rgba(211, 191, 232, 0.66)),
url('https://images.pexels.com/photos/281962/pexels-photo-281962.jpeg?auto=compress&cs=tinysrgb&w=600');
background-size: cover;
background-position: center;
border: 1px solid rgba(229, 193, 133, 0.42);
position: relative;
overflow: hidden;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.keepsake-item.keepsake-envelope .envelope-shell::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100%;
background: linear-gradient(135deg, transparent 45%, rgba(229, 193, 133, 0.2) 45%, rgba(229, 193, 133, 0.2) 55%, transparent 55%);
transform-origin: top;
transform: rotateX(0deg);
transition: transform 1.1s ease;
}
.keepsake-item.keepsake-envelope.opened .envelope-shell::after {
transform: rotateX(90deg);
}
.keepsake-item.keepsake-envelope .envelope-letter {
opacity: 0;
transform-origin: 50% 0%;
transform: perspective(700px) rotateX(-16deg) translateY(-14px) scale(0.94);
max-height: 0;
overflow: hidden;
padding: 0 16px;
transition: max-height 0.5s cubic-bezier(.22,1,.36,1), opacity 0.34s ease 0.1s, transform 0.5s cubic-bezier(.22,1,.36,1) 0.06s, padding 0.5s cubic-bezier(.22,1,.36,1);
color: #241c2e;
line-height: 1.75;
font-family: var(--serif);
background: rgba(240, 231, 251, 0.96);
border-radius: 16px;
border: 1px solid rgba(229, 193, 133, 0.4);
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.4);
}
.keepsake-item.keepsake-envelope.opened .envelope-letter {
opacity: 1;
transform: perspective(700px) rotateX(0deg) translateY(0) scale(1);
max-height: min(60vh, 360px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 16px 16px 18px;
}
.keepsake-item.keepsake-seal {
min-height: 100px;
position: relative;
}
.seal-card {
width: 100%;
min-height: 48px;
border-radius: 18px;
background-image:
linear-gradient(180deg, rgba(236, 226, 249, 0.5), rgba(211, 191, 232, 0.58)),
url('https://images.pexels.com/photos/7190500/pexels-photo-7190500.jpeg?auto=compress&cs=tinysrgb&w=600');
background-size: cover;
background-position: center;
border: 1px solid rgba(229, 193, 133, 0.42);
position: relative;
transition: transform 0.42s ease, box-shadow 0.42s ease;
}
.seal-card::after {
content: '';
position: absolute;
left: calc(50% - 12px);
top: 8px;
width: 24px;
height: 24px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #7B2B39 0%, #4E1624 55%, #2B0D14 100%);
box-shadow: inset 0 2px 4px rgba(255, 220, 180, 0.25), 0 0 8px rgba(0, 0, 0, 0.3);
transition: transform 0.9s ease, opacity 0.42s ease;
}
.keepsake-item.keepsake-seal.opened .seal-card {
transform: translateY(-4px);
box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.0);
}
.keepsake-item.keepsake-seal.opened .seal-card::after {
transform: translateY(14px) rotate(-18deg) scale(0.7);
opacity: 0;
}
.keepsake-item.keepsake-tiny {
min-height: auto;
width: min(100%, 180px);
justify-self: center;
padding: 12px 14px;
gap: 8px;
align-items: center;
transition: width 0.35s ease, padding 0.35s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.keepsake-item.keepsake-tiny .keepsake-surface {
width: 100%;
max-width: 112px;
height: 28px;
border-radius: 999px;
background: linear-gradient(180deg, #ece2f9 0%, #d3bfe8 100%);
border: 1px solid rgba(229, 193, 133, 0.4);
transition: max-width 0.35s ease, height 0.35s ease, transform 0.35s ease;
}
.keepsake-item.keepsake-tiny .keepsake-tag {
margin-top: 0;
}
/* Once opened, drop the "closed pill" constraints so the reveal reads like
every other keepsake card instead of squeezing into a ~82px column. */
.keepsake-item.keepsake-tiny.opened {
width: 100%;
align-items: start;
padding: 18px 18px 16px;
}
.keepsake-item.keepsake-tiny.opened .keepsake-surface {
max-width: none;
height: 40px;
transform: scale(0.97);
}
.keepsake-item.keepsake-tiny.opened .keepsake-copy {
width: 100%;
}
.keep-presence {
opacity: 0;
transform: translateY(8px);
transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.5s ease;
}
.keep-presence .keepsake-copy {
width: 100%;
text-align: left;
align-self: stretch;
}
.keep-presence .keepsake-copy h3,
.keep-presence .keepsake-copy p {
text-align: left;
}
.keep-presence.revealed {
opacity: 1;
transform: translateY(0);
}
.keep-presence.opened {
animation: keepPresencePulse 1.8s ease-in-out;
}
@keyframes keepPresencePulse {
0%, 100% { box-shadow: 0 18px 34px rgba(0, 0, 0, 0.12); }
50% { box-shadow: 0 24px 44px rgba(218, 49, 148, 0.18); }
}
.carrying-final-tag {
opacity: 0;
color: rgba(249, 234, 244, 0.9);
font-family: var(--serif);
font-size: 1rem;
letter-spacing: 0.03em;
text-align: center;
padding: 14px 20px;
border-radius: 18px;
background: rgba(9, 8, 20, 0.8);
border: 1px solid rgba(92, 0, 56, 0.16);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 20px 45px rgba(0, 0, 0, 0.09);
transition: opacity 0.8s ease, transform 0.8s ease;
margin-top: 12px;
width: min(100%, 320px);
}
.carrying-final-tag.visible {
opacity: 1;
transform: translateY(-4px);
}
.carrying-final-tag.visible {
opacity: 1;
}
.carrying-corridor {
position: absolute;
inset: 0;
background: radial-gradient(circle at top, rgba(255, 229, 245, 0.12), transparent 32%), linear-gradient(180deg, rgba(31, 20, 47, 0.08), rgba(6, 5, 10, 0.42));
opacity: 0;
transition: opacity 1.6s ease;
pointer-events: none;
z-index: -1;
}
.carrying-corridor.visible {
opacity: 1;
}
@media (max-width: 500px) {
.carrying-stage {
width: min(100%, 100vw);
max-width: 100vw;
min-height: 88vh;
padding-bottom: 24px;
}
.keepsake-item {
padding: 16px 14px 14px;
}
.keepsake-item.keepsake-tiny {
width: min(100%, 112px);
}
}
.jar-button {
background: transparent;
border: none;
cursor: pointer;
margin: 12px 0 18px;
transition: transform 0.25s ease, filter 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.jar-button:hover {
transform: scale(1.03);
filter: drop-shadow(0 0 18px rgba(218, 49, 148, 0.28));
}
}
.observation-display {
min-height: 140px;
width: min(100%, 560px);
padding: 20px 24px;
border: 1px solid var(--gold-faint);
background: rgba(255, 255, 255, 0.03);
opacity: 0;
transform: translateY(12px);
transition: opacity 0.45s ease, transform 0.45s ease;
}
.observation-display.revealed {
opacity: 1;
transform: translateY(0);
}
.obs-category {
color: var(--gold);
margin-bottom: 10px;
}
.obs-text {
font-size: 1.25rem;
line-height: 1.7;
color: var(--ivory);
}
.notebook-room {
padding-top: 24px;
}
/* Mobile-first: base rules below target small screens. Everything is scaled
up for wider viewports inside the single min-width block near the bottom
of this section, instead of being bolted on afterwards. */
.notebook-shell {
position: relative;
width: 100%;
max-width: 620px;
/* --ink-line is the shared grid unit: the ruled line spacing on the page
AND the handwriting's line-height both lock to this one number, so
lines and words can never drift apart from each other. */
--ink-line: 1.8rem;
/* Dark leather texture -- the notebook's outer cover. */
background-image:
radial-gradient(circle at top left, rgba(43, 18, 69, 0.72) 0%, rgba(29, 14, 50, 0.82) 45%, rgba(9, 2, 20, 0.93) 100%),
url('https://images.pexels.com/photos/6045262/pexels-photo-6045262.jpeg?auto=compress&cs=tinysrgb&w=1200');
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat;
border-radius: 16px;
padding: 16px 16px 30px;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), inset 0 0 0 1px var(--frame-soft);
overflow: hidden;
}
/* Scene introduction: Paper reveal — the notebook unfurls open top-to-bottom
rather than simply appearing. Retriggered on every visit via app.js
(resetNotebookRoom -> playPaperReveal), since .room-screen visibility
toggles by opacity/visibility, not display:none. */
@media (prefers-reduced-motion: no-preference) {
.notebook-shell.paper-reveal {
animation: paper-reveal 1.1s cubic-bezier(.22,.9,.28,1) both;
}
@keyframes paper-reveal {
0% { clip-path: inset(0 0 100% 0); opacity: 0.4; transform: translateY(-10px); }
60% { opacity: 1; }
100% { clip-path: inset(0 0 0 0); opacity: 1; transform: translateY(0); }
}
}
.book-spine {
position: absolute;
top: 10px;
left: 22px;
width: 5px;
height: calc(100% - 20px);
background: linear-gradient(180deg, #E5C185 0%, #5c0038 55%, #2b040a 100%);
border-radius: 3px;
box-shadow: 0 0 10px rgba(229, 193, 133, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.book-spine::after {
content: '';
position: absolute;
left: 0;
bottom: -9px;
width: 0;
height: 0;
border-left: 2.5px solid transparent;
border-right: 2.5px solid transparent;
border-top: 9px solid #2b040a;
}
.notebook-pages {
position: relative;
margin-left: 26px;
/* Fallback only, for the instant before JS measures the real content
(and for no-JS). app.js sets an inline min-height on this element
sized to the tallest page so nothing is ever clipped. */
min-height: 440px;
border-radius: 14px;
background-image: linear-gradient(180deg, rgba(29, 14, 50, 0.94) 0%, rgba(9, 2, 20, 0.97) 100%), linear-gradient(160deg, var(--paper), transparent 55%);
box-shadow: inset 0 0 0 1px var(--frame-soft), 0 10px 32px rgba(0, 0, 0, 0.3);
padding: 18px 14px 14px;
overflow: hidden;
transition: min-height 0.35s ease;
}
.notebook-page {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
background: rgba(21, 8, 38, 0.96);
/* Pink vertical margin rule runs the full height of the page. It lives
on the page itself (not .page-body) because, unlike the horizontal
writing lines, it doesn't need to line up with anything — it's just a
constant vertical rule the way a real margin line is. */
background-image: linear-gradient(90deg, rgba(255, 110, 160, 0.4) 1.5px, transparent 1.5px);
background-repeat: no-repeat;
background-size: auto 100%;
background-position: 30px 0;
padding: 18px 14px 14px 2.9rem;
border-radius: 12px;
border: 1px solid var(--frame-soft);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
opacity: 0;
transform: translateX(30px) rotate(0.5deg) scale(0.98);
transition: transform 0.9s ease, opacity 0.9s ease;
/* Safety net only — app.js keeps .notebook-pages tall enough that this
should never actually need to clip anything. */
overflow: hidden;
}
.notebook-page.active {
opacity: 1;
transform: translateX(0) rotate(0deg) scale(1);
z-index: 2;
}
.notebook-page.turned {
opacity: 0;
transform: translateX(-40px) rotate(-2deg) scale(0.96);
z-index: 1;
}
.page-header {
text-align: left;
margin-bottom: 18px;
flex: 0 0 auto;
}
.page-number {
display: inline-block;
font-family: var(--sans);
font-size: 0.66rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--rose);
margin-bottom: 8px;
}
.page-subtitle {
font-family: var(--serif);
font-size: 0.9rem;
line-height: 1.6;
color: rgba(212, 178, 204, 0.85);
white-space: pre-wrap;
}
.page-heading {
font-family: var(--serif);
font-size: 1.35rem;
line-height: 1.3;
color: var(--ivory);
margin-top: 6px;
}
/* The ruled writing area. The lined background lives here — not on
.notebook-page — so the first line always starts exactly where the
handwriting starts, no matter how tall the header above it happens to be.
It also grows to fill any leftover space on shorter pages (flex: 1), so
the lines run all the way down like an real half-used notebook page
instead of stopping abruptly. */
.page-body {
flex: 1 1 auto;
font-family: var(--serif);
max-width: 100%;
background-image: linear-gradient(transparent calc(var(--ink-line) - 1px), rgba(255, 255, 255, 0.15) var(--ink-line));
background-size: 100% var(--ink-line);
background-position: 0 0;
}
.page-body p {
font-family: 'Caveat', cursive;
font-weight: 600;
font-size: 1.2rem;
line-height: var(--ink-line);
color: #f8f4ff;
margin: 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.page-body p + p {
/* Skip exactly one ruled line between paragraphs, same as the line
spacing itself, so the next paragraph still lands on a line. */
margin-top: var(--ink-line);
}
.margin-note {
flex: 0 0 auto;
display: block;
text-align: right;
margin-top: 12px;
font-family: var(--sans);
font-size: 0.68rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rose);
opacity: 0.8;
}
.page-corner {
position: absolute;
right: 12px;
bottom: 12px;
z-index: 5; /* must beat .notebook-page.active's z-index:2, or every tap on this tab is silently swallowed by the page underneath it */
width: 76px;
height: 76px;
background: linear-gradient(135deg, #f0d5a0 0%, #E5C185 55%, #a67f3f 100%);
border-radius: 0 16px 0 0;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 0 0 16px rgba(229, 193, 133, 0.18);
display: flex;
align-items: flex-end;
justify-content: center;
padding: 10px 8px 10px;
cursor: pointer;
font-family: var(--sans);
font-size: 0.68rem;
letter-spacing: 0.13em;
color: #2b040a;
text-transform: uppercase;
user-select: none;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.page-corner:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45), 0 0 22px rgba(229, 193, 133, 0.3);
background: linear-gradient(135deg, #f6e0b3 0%, #E5C185 55%, #b98d47 100%);
}
}
.page-corner span {
display: block;
text-align: center;
line-height: 1.15;
font-weight: 700;
letter-spacing: 0.16em;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.25);
}
.page-corner.dragging {
transform: translateY(-2px) rotate(-3deg);
}
/* Everything above is mobile-first base. From here up, open up the spacing,
type sizes and the ruled-line grid for tablet/desktop. */
@media (min-width: 769px) {
.notebook-shell {
--ink-line: 2rem;
padding: 24px 24px 38px;
border-radius: 20px;
}
.book-spine {
left: 30px;
}
.notebook-pages {
margin-left: 38px;
min-height: 520px;
border-radius: 16px;
padding: 28px 26px 16px;
}
.notebook-page {
padding: 28px 24px 24px 4.5rem;
border-radius: 14px;
}
.page-header {
margin-bottom: 28px;
}
.page-number {
font-size: 0.75rem;
letter-spacing: 0.22em;
margin-bottom: 12px;
}
.page-subtitle {
font-size: 1rem;
}
.page-heading {
font-size: 1.7rem;
margin-top: 8px;
}
.page-body p {
font-size: 1.5rem;
}
.margin-note {
font-size: 0.72rem;
}
.page-corner {
right: 18px;
bottom: 18px;
width: 96px;
height: 96px;
padding: 12px 10px 14px;
font-size: 0.78rem;
}
}
.gallery-room {
width: min(100%, 940px);
max-width: none;
padding: 40px 20px 60px;
align-items: center;
justify-content: center;
gap: 18px;
}
.gallery-opening,
.gallery-stage,
.gallery-closing {
width: min(100%, 900px);
position: relative;
}
.gallery-opening::before,
.gallery-closing::before {
content: '';
position: absolute;
inset: 0;
border-radius: 24px;
border: 1px solid rgba(92, 0, 56, 0.12);
pointer-events: none;
opacity: 0.7;
}
.gallery-stage {
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
}
.gallery-frame {
display: grid;
grid-template-columns: minmax(280px, 1.2fr) minmax(220px, 0.8fr);
gap: 20px;
padding: 20px;
border: 1px solid rgba(92, 0, 56, 0.22);
background: linear-gradient(135deg, rgba(249, 234, 244, 0.08), rgba(20, 19, 35, 0.2));
box-shadow: 0 0 40px rgba(0, 0, 0, 0.28);
border-radius: 24px;
}
.gallery-artwork {
min-height: 320px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(8, 8, 16, 0.25));
position: relative;
overflow: hidden;
border-radius: 16px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.gallery-artwork::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 28% 22%, rgba(229, 193, 133, 0.12), transparent 55%);
pointer-events: none;
}
.gallery-artwork .exhibit-svg {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: 100%;
padding: 30px;
box-sizing: border-box;
}
.gallery-artwork .gallery-photo {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
filter: sepia(0.35) saturate(0.65) brightness(0.55) contrast(1.05) hue-rotate(-10deg);
}
/* Signature motion per exhibit — one quiet gesture each, never more */
@media (prefers-reduced-motion: no-preference) {
.gallery-artwork .exhibit-svg {
opacity: 0;
animation: exhibit-settle 0.9s ease forwards;
}
@keyframes exhibit-settle {
from { opacity: 0; transform: scale(0.97); }
to { opacity: 1; transform: scale(1); }
}
.exhibit-compass .compass-needle {
transform-box: fill-box;
transform-origin: center;
animation: compass-drift 10s ease-in-out infinite;
}
@keyframes compass-drift {
0%, 100% { transform: rotate(-7deg); }
50% { transform: rotate(5deg); }
}
.exhibit-pen .ink-flourish {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: ink-write 6.5s ease-in-out infinite;
}
@keyframes ink-write {
0% { stroke-dashoffset: 1; opacity: 0; }
10% { opacity: 0.85; }
58% { stroke-dashoffset: 0; opacity: 0.85; }
82% { opacity: 0.85; }
100% { stroke-dashoffset: 0; opacity: 0; }
}
.exhibit-perfume .mist-wisp {
opacity: 0;
transform-box: fill-box;
transform-origin: center;
filter: blur(1.4px);
}
.exhibit-perfume .mist-1 { animation: mist-rise 5s ease-in-out infinite; }
.exhibit-perfume .mist-2 { animation: mist-rise 5.4s ease-in-out infinite 1.3s; }
.exhibit-perfume .mist-3 { animation: mist-rise 5.8s ease-in-out infinite 2.6s; }
@keyframes mist-rise {
0% { opacity: 0; transform: translateY(0) scale(0.8); }
30% { opacity: 0.5; }
100% { opacity: 0; transform: translateY(-48px) scale(1.4); }
}
.exhibit-window .light-sweep {
transform-box: fill-box;
animation: light-drift 13s ease-in-out infinite;
}
@keyframes light-drift {
0%, 100% { transform: translateX(-8px); opacity: 0.32; }
50% { transform: translateX(118px); opacity: 0.58; }
}
.exhibit-book .book-page-right {
transform-box: fill-box;
transform-origin: left center;
animation: page-breathe 7s ease-in-out infinite;
}
@keyframes page-breathe {
0%, 100% { transform: skewY(0deg); }
50% { transform: skewY(-1deg); }
}
.exhibit-book .bookmark {
transform-box: fill-box;
transform-origin: top center;
animation: bookmark-sway 6s ease-in-out infinite;
}
@keyframes bookmark-sway {
0%, 100% { transform: rotate(-1.5deg); }
50% { transform: rotate(1.5deg); }
}
/* --- Scene introductions: one-time flourish each exhibit opens with,
distinct from the idle loops above. Re-plays every time renderExhibit()
swaps `.gallery-artwork`'s class, since the class is freshly applied. */
/* Compass — Spotlight: a beam finds it and settles. */
.gallery-artwork.exhibit-compass::after {
content: '';
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.85), rgba(255, 241, 214, 0.28) 20%, transparent 48%);
mix-blend-mode: screen;
opacity: 0;
animation: spotlight-find 1.6s ease-out forwards;
}
@keyframes spotlight-find {
0% { opacity: 0; transform: scale(0.25); }
30% { opacity: 0.9; transform: scale(0.8); }
60% { opacity: 0.45; transform: scale(1); }
100% { opacity: 0; transform: scale(1.15); }
}
/* Perfume — Glass reflections: a highlight catches the glass and moves on. */
.gallery-artwork.exhibit-perfume::after {
content: '';
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 47%, rgba(255, 255, 255, 0.08) 53%, transparent 70%);
mix-blend-mode: screen;
opacity: 0;
transform: translateX(-130%);
animation: glass-catch-light 1.8s ease-out forwards;
}
@keyframes glass-catch-light {
0% { transform: translateX(-130%); opacity: 0; }
16% { opacity: 0.9; }
60% { opacity: 0.35; }
100% { transform: translateX(130%); opacity: 0; }
}
/* Book — Dust: disturbed dust catches the light and settles. */
.gallery-artwork.exhibit-book::after {
content: '';
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0;
background-repeat: no-repeat;
background-size: 3px 3px;
background-image:
radial-gradient(circle, rgba(229, 193, 133, 0.95) 1px, transparent 1.6px),
radial-gradient(circle, rgba(251, 249, 252, 0.8) 1px, transparent 1.6px),
radial-gradient(circle, rgba(229, 193, 133, 0.7) 1px, transparent 1.6px),
radial-gradient(circle, rgba(251, 249, 252, 0.6) 1px, transparent 1.6px),
radial-gradient(circle, rgba(229, 193, 133, 0.85) 1px, transparent 1.6px),
radial-gradient(circle, rgba(251, 249, 252, 0.65) 1px, transparent 1.6px);
background-position:
18% 6%, 34% 2%, 52% 10%, 68% 4%, 78% 12%, 46% 0%;
animation: dust-settle 2.6s ease-out forwards;
}
@keyframes dust-settle {
0% { opacity: 0; background-position: 18% -14%, 34% -22%, 52% -10%, 68% -24%, 78% -8%, 46% -26%; }
22% { opacity: 0.95; }
70% { opacity: 0.5; }
100% { opacity: 0; background-position: 18% 88%, 34% 84%, 52% 92%, 68% 80%, 78% 94%, 46% 86%; }
}
/* Pen — Ink bloom: a drop of ink spreads into the page as it opens. */
.gallery-artwork.exhibit-pen::after {
content: '';
position: absolute;
top: 46%;
left: 42%;
width: 14px;
height: 14px;
z-index: 2;
pointer-events: none;
border-radius: 50%;
background: radial-gradient(circle, rgba(30, 12, 20, 0.9), rgba(30, 12, 20, 0.5) 55%, transparent 75%);
opacity: 0;
animation: ink-bloom 1.8s ease-out forwards;
}
@keyframes ink-bloom {
0% { opacity: 0; transform: scale(0.2); }
20% { opacity: 0.8; transform: scale(1); }
100% { opacity: 0; transform: scale(11); }
}
/* Window — Light leak: a warm sliver of light spills across the glass. */
.gallery-artwork.exhibit-window::after {
content: '';
position: absolute;
inset: -10% -20%;
z-index: 2;
pointer-events: none;
background: linear-gradient(100deg, transparent 42%, rgba(255, 224, 180, 0.6) 50%, rgba(255, 220, 240, 0.14) 56%, transparent 66%);
mix-blend-mode: screen;
opacity: 0;
transform: translateX(-140%);
animation: exhibit-light-leak 1.7s ease-out forwards;
}
@keyframes exhibit-light-leak {
0% { opacity: 0; transform: translateX(-140%); }
22% { opacity: 0.85; }
100% { opacity: 0; transform: translateX(140%); }
}
}
.gallery-mute-toggle {
position: absolute;
top: 10px;
right: 10px;
z-index: 5;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--gold-faint);
background: rgba(9, 2, 20, 0.4);
color: var(--gold);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.5;
transition: opacity 0.3s ease, border-color 0.3s ease;
}
.gallery-mute-toggle:hover,
.gallery-mute-toggle:focus-visible {
opacity: 1;
border-color: var(--gold-dim);
}
.gallery-mute-toggle .exhibit-wave {
transition: opacity 0.3s ease;
}
.gallery-mute-toggle .mute-strike {
display: none;
position: absolute;
inset: 0;
pointer-events: none;
}
.gallery-mute-toggle .mute-strike::before {
content: '';
position: absolute;
left: 6px;
right: 6px;
top: 50%;
height: 1px;
background: var(--gold);
transform: translateY(-50%) rotate(-40deg);
}
.gallery-mute-toggle.is-muted .exhibit-wave {
opacity: 0.2;
}
.gallery-mute-toggle.is-muted .mute-strike {
display: block;
}
.gallery-caption {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
text-align: left;
}
.gallery-number {
font-size: 0.7rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--gold);
}
.gallery-title {
font-family: var(--serif);
font-size: 1.6rem;
color: var(--ivory);
}
.gallery-note {
font-family: var(--serif);
font-size: 1rem;
line-height: 1.7;
color: rgba(247, 235, 243, 0.8);
}
.gallery-nav {
display: flex;
justify-content: center;
gap: 14px;
margin-top: 24px;
}
.gallery-progress {
display: flex;
gap: 7px;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.gallery-progress .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(229, 193, 133, 0.28);
transition: background 0.35s ease, transform 0.35s ease;
}
.gallery-progress .dot.active {
background: #E5C185;
transform: scale(1.35);
}
.gallery-frame {
touch-action: pan-y;
}
.gallery-nav-btn {
width: 46px;
height: 46px;
border: 1px solid rgba(229, 193, 133, 0.45);
border-radius: 50%;
background: rgba(43, 4, 10, 0.55);
color: #E5C185;
font-weight: 700;
cursor: pointer;
box-shadow: 0 12px 22px rgba(0, 0, 0, 0.3);
transition: background 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.gallery-nav-btn:hover {
background: rgba(58, 6, 14, 0.75);
box-shadow: 0 16px 28px rgba(0, 0, 0, 0.35), 0 0 20px rgba(229, 193, 133, 0.2);
}
}
.gallery-closing {
padding: 24px;
border: 1px solid rgba(92, 0, 56, 0.22);
background: linear-gradient(135deg, rgba(249, 234, 244, 0.06), rgba(20, 19, 35, 0.18));
text-align: center;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.gallery-closing p {
margin: 0;
font-size: 1.25rem;
line-height: 1.6;
}
.token-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 10px;
}
.token-reader {
margin-top: 24px;
padding: 24px;
width: min(100%, 560px);
border: 1px solid var(--gold-faint);
background: rgba(255, 255, 255, 0.03);
}
.token-title {
font-size: 0.8rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 16px;
}
.token-body {
font-size: 1.25rem;
line-height: 1.7;
color: var(--ivory);
}
/* Fullscreen one-at-a-time viewer for the future rooms, opened by "Turn the
brass key". Structurally the same pattern as .poster-detail (cinema room):
a fixed sheet, swipe/keys/buttons to move between entries, dots for
progress. Colors pull from the room's own --room-accent (teal) rather than
the poster viewer's gold, so it still reads as this room's own object. */
.room-key-viewer {
position: fixed;
inset: 0;
padding: max(28px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
background: linear-gradient(165deg, rgba(10, 16, 17, 0.98) 0%, rgba(11, 9, 15, 0.99) 100%);
backdrop-filter: blur(24px);
opacity: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
transition: opacity 0.35s ease, transform 0.35s ease;
transform: translateY(16px);
z-index: 300;
}
.room-key-viewer.hidden {
display: none;
}
.room-key-viewer.open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.room-key-viewer-sheet {
display: flex;
flex-direction: column;
gap: 14px;
text-align: left;
width: 100%;
max-width: 440px;
margin: auto 0;
padding: 12px 0 4px;
touch-action: pan-y;
}
.room-key-viewer-tag {
color: var(--room-accent, #7bb8a3);
}
.room-key-viewer-title {
font-family: var(--serif);
font-size: clamp(1.4rem, 4vw, 1.8rem);
color: var(--ivory);
margin: 0;
}
.room-key-viewer-text {
font-family: var(--serif);
font-style: italic;
font-size: 1.05rem;
line-height: 1.85;
color: rgba(251, 249, 252, 0.9);
}
.room-key-progress {
display: flex;
flex-wrap: wrap;
gap: 7px;
align-items: center;
justify-content: center;
width: 100%;
max-width: 440px;
margin-top: 22px;
}
.room-key-progress .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--room-accent-dim, rgba(123, 184, 163, 0.32));
transition: background 0.35s ease, transform 0.35s ease;
}
.room-key-progress .dot.active {
background: var(--room-accent, #7bb8a3);
transform: scale(1.35);
}
.room-key-swipe-hint {
text-align: center;
width: 100%;
font-family: var(--sans);
font-size: 0.62rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(212, 178, 204, 0.5);
margin-top: 10px;
opacity: 0;
animation: fadeIn 1.2s ease 0.6s forwards;
}
.room-key-nav {
display: flex;
gap: 12px;
flex-wrap: wrap;
width: 100%;
max-width: 440px;
margin-top: 20px;
padding-bottom: 8px;
}
.room-key-nav .ghost-text-btn {
min-width: 110px;
padding: 12px 16px;
border-radius: 14px;
border: 1px solid var(--room-accent-dim, rgba(123, 184, 163, 0.32));
background: rgba(10, 16, 17, 0.55);
color: var(--room-accent, #7bb8a3);
font-size: 0.95rem;
}
@media (hover: hover) and (pointer: fine) {
.room-key-nav .ghost-text-btn:hover {
background: rgba(10, 16, 17, 0.8);
}
}
.cinema-room {
max-width: 900px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
position: relative;
}
.cinema-room::before {
content: '';
position: absolute;
inset: -6% 8% 10%;
background: radial-gradient(circle, rgba(220, 116, 180, 0.10), transparent 64%);
filter: blur(26px);
pointer-events: none;
opacity: 0.7;
}
.projector-switch {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 28px;
border-radius: 999px;
background: linear-gradient(180deg, #5c2d5d 0%, #301b3e 100%);
color: #f3d2e8;
font-family: var(--sans);
font-size: 0.85rem;
letter-spacing: 0.18em;
text-transform: uppercase;
border: 1px solid rgba(238, 179, 218, 0.22);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 30px rgba(0, 0, 0, 0.18);
cursor: pointer;
transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
.projector-switch:hover {
background: linear-gradient(180deg, #6d3a61 0%, #46234f 100%);
}
}
.projector-switch:active {
transform: translateY(0);
}
.projection-scene {
width: 100%;
max-width: 920px;
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 28px;
align-items: start;
opacity: 0;
pointer-events: none;
transition: opacity 0.8s ease;
}
.projection-scene.visible {
opacity: 1;
pointer-events: auto;
}
.projection-setup {
position: relative;
min-height: 430px;
border: 1px solid rgba(92, 0, 56, 0.28);
border-radius: 22px;
padding: 34px 28px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 60px rgba(0, 0, 0, 0.42);
}
/* Now Showing — a real, silently looping reel sitting behind the projector
body, so the lens appears to be conjuring it rather than sitting beside
it. Kept low-opacity and desaturated-dark so it reads as ambient light
inside the blackberry void rather than a hard video rectangle. */
.projection-reel {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 22px;
opacity: 0;
filter: saturate(1.08) contrast(1.05) brightness(0.88);
transition: opacity 2.2s ease 0.6s;
pointer-events: none;
}
.projection-scene.visible .projection-reel {
opacity: 0.4;
}
@media (prefers-reduced-motion: reduce) {
.projection-reel {
transition: none;
}
}
.projection-setup::before {
content: '';
position: absolute;
inset: 18px 18px 18px;
background: radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.08), transparent 52%);
pointer-events: none;
border-radius: 18px;
}
.projection-setup::after {
content: '';
position: absolute;
inset: 12px;
border: 1px solid rgba(92, 0, 56, 0.12);
border-radius: 20px;
pointer-events: none;
}
.projector-body {
position: relative;
width: 180px;
height: 120px;
/* No longer a solid block — it was sitting in front of the reel and
covering it like a bar. Only the lens itself (below) stays visible;
this box just anchors the lens's position and the firing animation. */
background: transparent;
border-radius: 16px 16px 10px 10px;
}
.projector-lens {
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.4), rgba(143, 109, 132, 0.95) 35%, #13101a 100%);
box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.25), 0 0 0 2px rgba(255, 255, 255, 0.08);
}
/* Projector warming — the lamp gradually catches before it fires, rather
than snapping on. .firing (added ~950ms after .visible, in app.js) takes
over mid-warm-up as the ignition moment. */
@media (prefers-reduced-motion: no-preference) {
.projection-scene.visible .projector-lens {
animation: lens-warm-up 1.6s cubic-bezier(.2,.8,.2,1) 0.4s forwards;
}
@keyframes lens-warm-up {
0% { filter: brightness(0.35) saturate(0.6); }
22% { filter: brightness(0.6) saturate(0.75); }
40% { filter: brightness(0.42) saturate(0.65); }
100% { filter: brightness(1) saturate(1); }
}
}
/* Projector firing & lens pulse */
.projector-body.firing {
transform: translateY(-6px) rotate(-1deg);
transition: transform 0.45s cubic-bezier(0.2,0.9,0.2,1);
}
.projector-body.firing .projector-lens {
animation: lensPulse 1.4s ease-in-out 0s 1;
box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.35), 0 0 18px rgba(255, 200, 238, 0.12);
}
@keyframes lensPulse {
0% { transform: scale(1); opacity: 0.95; }
30% { transform: scale(1.08); opacity: 1; }
60% { transform: scale(1.02); opacity: 0.98; }
100% { transform: scale(1); opacity: 0.95; }
}
.projection-beam {
position: absolute;
inset: 0;
pointer-events: none;
}
.projection-beam::before {
content: '';
position: absolute;
left: 70px;
top: 104px;
width: 220px;
height: 260px;
background: radial-gradient(circle at 50% 0%, rgba(254, 210, 239, 0.24), transparent 55%);
filter: blur(8px);
opacity: 0;
transform: scaleY(0.65);
}
.projection-scene.visible .projection-beam::before {
animation: beam-warm-up 1.7s cubic-bezier(.2,.8,.2,1) 0.5s forwards;
}
@media (prefers-reduced-motion: reduce) {
.projection-scene.visible .projection-beam::before {
animation: none;
opacity: 1;
transform: scaleY(1);
}
}
@keyframes beam-warm-up {
0% { opacity: 0; transform: scaleY(0.55); filter: blur(10px) brightness(0.5); }
22% { opacity: 0.28; transform: scaleY(0.6); filter: blur(9px) brightness(0.65); }
40% { opacity: 0.16; transform: scaleY(0.62); filter: blur(9px) brightness(0.55); }
68% { opacity: 0.7; transform: scaleY(0.9); filter: blur(8px) brightness(1.05); }
100% { opacity: 1; transform: scaleY(1); filter: blur(8px) brightness(1); }
}
.dust-layer {
position: absolute;
inset: 0;
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 25%), radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 12%), radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.02) 0%, transparent 8%);
opacity: 0;
transition: opacity 1.4s ease 0.8s;
}
.projection-scene.visible .dust-layer {
opacity: 1;
}
.poster-wall {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
align-items: start;
counter-reset: poster-count;
}
.poster-card {
position: relative;
min-height: 160px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 20px;
border: 1px solid var(--frame-soft);
background: linear-gradient(165deg, rgba(29, 14, 50, 0.9) 0%, rgba(17, 8, 30, 0.94) 55%, rgba(9, 2, 20, 0.96) 100%);
background-image: linear-gradient(165deg, rgba(29, 14, 50, 0.9) 0%, rgba(17, 8, 30, 0.94) 55%, rgba(9, 2, 20, 0.96) 100%), linear-gradient(150deg, var(--paper), transparent 55%);
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.35);
border-radius: 18px;
cursor: pointer;
transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
text-align: left;
opacity: 0;
transform: translateY(18px) rotate(0.2deg) scale(0.995);
counter-increment: poster-count;
overflow: hidden;
}
.poster-card::before {
content: '0' counter(poster-count);
position: absolute;
top: 14px;
right: 16px;
font-family: var(--serif);
font-style: italic;
font-size: 2.6rem;
line-height: 1;
color: rgba(229, 193, 133, 0.18);
pointer-events: none;
z-index: 2;
}
.poster-art {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.poster-svg {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: 100%;
}
.poster-photo {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.85;
filter: sepia(0.3) saturate(0.6) brightness(0.6) contrast(1.05) hue-rotate(-8deg);
}
.poster-card::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(9, 2, 20, 0.05) 0%, rgba(9, 2, 20, 0.35) 55%, rgba(9, 2, 20, 0.86) 100%);
pointer-events: none;
}
.poster-card .one-sheet-label,
.poster-card .one-sheet-title {
position: relative;
z-index: 2;
}
@media (prefers-reduced-motion: no-preference) {
.poster-photo {
animation: poster-photo-drift 24s ease-in-out infinite alternate;
}
@keyframes poster-photo-drift {
0% { transform: scale(1.02) translate(0, 0); }
100% { transform: scale(1.09) translate(-1.5%, -1.5%); }
}
.poster-star { transform-box: fill-box; transform-origin: center; opacity: 0.35; }
.poster-rest .star-1 { animation: poster-twinkle 4s ease-in-out infinite; }
.poster-rest .star-2 { animation: poster-twinkle 4.6s ease-in-out infinite 0.6s; }
.poster-rest .star-3 { animation: poster-twinkle 5.2s ease-in-out infinite 1.2s; }
.poster-rest .star-4 { animation: poster-twinkle 4.8s ease-in-out infinite 1.8s; }
@keyframes poster-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.95; } }
.poster-life .life-rays { transform-box: fill-box; transform-origin: 150px 150px; animation: rays-breathe 9s ease-in-out infinite; }
@keyframes rays-breathe { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.06); } }
.poster-life .star-1 { animation: poster-twinkle 4.4s ease-in-out infinite; }
.poster-life .star-2 { animation: poster-twinkle 5s ease-in-out infinite 0.7s; }
.poster-life .star-3 { animation: poster-twinkle 4.7s ease-in-out infinite 1.4s; }
.poster-morning .morning-curtain { transform-box: fill-box; transform-origin: top left; animation: curtain-sway 7s ease-in-out infinite; }
@keyframes curtain-sway { 0%, 100% { transform: skewX(0deg); } 50% { transform: skewX(-2deg); } }
.poster-door .door-light { transform-box: fill-box; transform-origin: left center; animation: door-glow 6s ease-in-out infinite; }
@keyframes door-glow { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.26; } }
.poster-courage .courage-flame { transform-box: fill-box; transform-origin: center bottom; animation: courage-flicker 4.2s ease-in-out infinite; }
@keyframes courage-flicker { 0%, 100% { transform: scale(1); opacity: 0.85; } 50% { transform: scale(1.06, 1.1); opacity: 1; } }
.poster-courage .star-1 { animation: poster-twinkle 4.3s ease-in-out infinite; }
.poster-courage .star-2 { animation: poster-twinkle 4.9s ease-in-out infinite 0.5s; }
.poster-courage .star-3 { animation: poster-twinkle 5.3s ease-in-out infinite 1s; }
.poster-conviction .conviction-glow { transform-box: fill-box; transform-origin: center; animation: conviction-pulse 5s ease-in-out infinite; }
@keyframes conviction-pulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } }
.poster-conviction .star-1 { animation: poster-twinkle 4.5s ease-in-out infinite; }
.poster-conviction .star-2 { animation: poster-twinkle 5.1s ease-in-out infinite 0.6s; }
.poster-conviction .star-3 { animation: poster-twinkle 4.8s ease-in-out infinite 1.3s; }
.bloom-node { transform-box: fill-box; transform-origin: center; }
.bloom-node.n1 { animation: bloom-pulse 5s ease-in-out infinite; }
.bloom-node.n2 { animation: bloom-pulse 5.4s ease-in-out infinite 0.4s; }
.bloom-node.n3 { animation: bloom-pulse 5.6s ease-in-out infinite 0.8s; }
.bloom-node.n4 { animation: bloom-pulse 4.8s ease-in-out infinite 1.2s; }
.bloom-node.n5 { animation: bloom-pulse 5.2s ease-in-out infinite 1.6s; }
.bloom-node.n6 { animation: bloom-pulse 6s ease-in-out infinite 2s; }
@keyframes bloom-pulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }
}
@media (hover: hover) and (pointer: fine) {
.poster-card:hover {
border-color: rgba(92, 0, 56, 0.7);
box-shadow: 0 22px 40px rgba(0, 0, 0, 0.45);
}
}
.poster-card.selected {
transform: translateY(0) rotate(0deg) scale(1.01);
border-color: rgba(229, 193, 133, 0.55);
}
.one-sheet-label {
display: block;
font-family: var(--sans);
font-size: 0.65rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--rose);
margin-bottom: 10px;
position: relative;
}
.one-sheet-label::after {
content: '';
display: block;
width: 28px;
height: 1px;
margin-top: 8px;
background: linear-gradient(90deg, rgba(229, 193, 133, 0.55), rgba(229, 193, 133, 0.05));
}
.one-sheet-title {
font-family: var(--serif);
font-size: 1.3rem;
line-height: 1.3;
color: var(--ivory);
position: relative;
}
.projection-scene { position: relative; }
.poster-detail {
position: fixed;
inset: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: none;
margin: 0;
padding: max(28px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
border: none;
border-radius: 0;
background: linear-gradient(165deg, rgba(29, 14, 50, 0.98) 0%, rgba(9, 2, 20, 0.99) 100%);
box-shadow: none;
backdrop-filter: blur(24px);
opacity: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
transition: opacity 0.35s ease, transform 0.35s ease;
transform: translateY(16px);
z-index: 300;
}
.poster-detail.open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* Poster entrance animation */
.poster-card {
opacity: 0;
transform: translateY(14px) scale(0.995);
}
.poster-card.entered {
opacity: 1;
transform: translateY(0) rotate(0deg) scale(1);
transition: transform 0.55s cubic-bezier(0.2,0.85,0.2,1), opacity 0.5s ease;
}
/* subtle beam shimmer */
.projection-beam::after {
content: '';
position: absolute;
left: 70px;
top: 120px;
width: 200px;
height: 200px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.00));
filter: blur(12px);
opacity: 0;
transform: translateX(-8px);
transition: opacity 0.9s ease 0.6s, transform 1.1s ease 0.6s;
}
.projection-scene.visible .projection-beam::after {
opacity: 1;
transform: translateX(0);
}
.poster-detail-sheet {
display: flex;
flex-direction: column;
gap: 14px;
text-align: left;
width: 100%;
max-width: 420px;
margin: auto 0;
padding: 12px 0 4px;
}
.poster-art.poster-art-detail {
position: relative;
inset: auto;
aspect-ratio: 3 / 4;
max-height: 220px;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(229, 193, 133, 0.25);
background: linear-gradient(165deg, rgba(29, 14, 50, 0.7) 0%, rgba(9, 2, 20, 0.85) 100%);
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Buttons remain in the DOM and fully operable for keyboard/screen-reader
use; sighted pointer/touch users navigate by swipe and close by tapping
outside the sheet, so no visible button chrome is needed. */
.poster-nav {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
max-width: 420px;
margin-top: 20px;
padding-bottom: 8px;
}
.poster-progress {
display: flex;
gap: 7px;
align-items: center;
justify-content: center;
width: 100%;
max-width: 420px;
margin-top: 22px;
}
.poster-progress .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(229, 193, 133, 0.28);
transition: background 0.35s ease, transform 0.35s ease;
}
.poster-progress .dot.active {
background: #E5C185;
transform: scale(1.35);
}
.poster-swipe-hint {
text-align: center;
width: 100%;
font-family: var(--sans);
font-size: 0.62rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(212, 178, 204, 0.5);
margin-top: 10px;
opacity: 0;
animation: fadeIn 1.2s ease 0.6s forwards;
}
.poster-detail-sheet {
touch-action: pan-y;
}
.poster-nav .ghost-text-btn {
min-width: 110px;
padding: 12px 16px;
border-radius: 14px;
border: 1px solid rgba(229, 193, 133, 0.32);
background: rgba(43, 4, 10, 0.5);
color: #E5C185;
font-size: 0.95rem;
}
@media (hover: hover) and (pointer: fine) {
.poster-nav .ghost-text-btn:hover {
background: rgba(58, 6, 14, 0.7);
}
}
.poster-tagline,
.poster-note {
font-family: var(--serif);
color: rgba(251, 249, 252, 0.88);
line-height: 1.8;
}
.poster-tagline {
font-size: 1.05rem;
font-style: italic;
}
.poster-note {
font-size: 1rem;
opacity: 0.9;
}
.cinema-intermission {
position: fixed;
inset: 0;
background: #111111;
color: #ffe6f5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
transition: opacity 0.35s ease;
}
.cinema-intermission.active {
opacity: 1;
}
.cinema-intermission h1 {
font-family: var(--serif);
font-size: clamp(2rem, 4vw, 3.4rem);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 22px;
}
.cinema-intermission p {
max-width: 36rem;
font-family: var(--serif);
font-size: 1.1rem;
line-height: 1.9;
text-align: center;
color: rgba(255, 230, 245, 0.88);
}
@media (max-width: 768px) {
.projection-scene {
grid-template-columns: 1fr;
}
.projection-setup {
min-height: 320px;
padding: 22px;
}
.poster-card {
min-height: 140px;
padding: 18px;
}
.poster-title {
font-size: 1.4rem;
}
.projection-beam::before {
left: 40px;
width: 160px;
height: 220px;
}
}
/* --- Curiosity I: Collected Observations (Jar) --- */
@media (hover: hover) and (pointer: fine) {
#jar-container:hover {
transform: scale(1.05) !important;
filter: drop-shadow(0 0 20px rgba(218, 49, 148, 0.3));
}
}
#jar-container:active {
transform: scale(0.95) !important;
}
/* --- Curiosity II: If I Were Curating You --- */
.player-shell {
transition: box-shadow 0.6s ease;
border-radius: 2px;
}
@media (hover: hover) and (pointer: fine) {
.player-shell:hover {
box-shadow: 0 0 50px rgba(0, 0, 0, 0.9), 0 0 20px rgba(218, 49, 148, 0.1) !important;
}
}
/* --- Curiosity III: Things Worth Carrying (Tokens) --- */
.token-btn {
min-width: 130px;
transition: all 0.4s ease;
}
@media (hover: hover) and (pointer: fine) {
.token-btn:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
}
.token-btn.viewed {
border-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.3);
}
/* --- Curiosity V: Now Showing (Cinema) --- */
#cinema-intermission h1 {
animation: pulseText 2s infinite alternate;
}
@keyframes pulseText {
0% { opacity: 1; text-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
100% { opacity: 0.5; text-shadow: 0 0 0px transparent; }
}
/* ==========================================================================
ACT VI: THE LONG TABLE
========================================================================== */
#act-vi-table { background: radial-gradient(circle at top, rgba(184, 165, 214, 0.06), transparent 28%), linear-gradient(180deg, #0d0d18 0%, #050508 100%); align-items: flex-start; justify-content: center; opacity: 0; transform: translateY(16px); transition: opacity 0.8s cubic-bezier(.23,1,.32,1), transform 0.8s cubic-bezier(.23,1,.32,1); }
#act-vi-table.active { opacity: 1; transform: translateY(0); }
#act-truth-table {
--room-accent: #c9a876;
--room-accent-dim: rgba(201, 168, 118, 0.4);
--room-light-pos: 50% 12%;
--room-light-color: rgba(200, 180, 150, 0.09);
background:
radial-gradient(circle at 50% 15%, rgba(200, 180, 150, 0.08), transparent 34%),
linear-gradient(180deg, #0f0c0a 0%, #08070a 60%, #0a0610 100%);
}
.table-transition-sheen {
position: fixed;
inset: 0;
background: radial-gradient(circle at center, rgba(220, 116, 180, 0.12) 0%, rgba(9, 8, 16, 0.24) 34%, rgba(4, 3, 7, 0.82) 100%);
backdrop-filter: blur(8px);
opacity: 0;
pointer-events: none;
z-index: 60;
transition: opacity 0.8s ease;
}
.table-transition-sheen.active { opacity: 1; }
.table-environment { width: 100%; height: 100%; display: flex; flex-direction: column; }
.table-header-overlay { position: absolute; top: 8vh; left: 5vw; z-index: 20; opacity: 0; animation: fadeIn 3s forwards 1s; }
.table-header-overlay h2 { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(225, 114, 184, 0.92); margin-bottom: 8px; }
.table-header-overlay p { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: rgba(255, 220, 241, 0.82); max-width: 36rem; }
.table-swipe-hint {
position: absolute;
left: 50%;
bottom: 6vh;
z-index: 20;
display: flex;
align-items: center;
gap: 8px;
transform: translateX(-50%);
font-family: var(--sans);
font-size: 0.62rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 224, 243, 0.55);
white-space: nowrap;
opacity: 0;
animation: fadeIn 1.4s ease 1.6s forwards;
transition: opacity 0.6s ease;
}
.table-swipe-hint.hint-dismissed {
opacity: 0 !important;
}
.table-swipe-arrow {
display: inline-block;
font-size: 0.85rem;
}
@media (prefers-reduced-motion: no-preference) {
.table-swipe-arrow {
animation: table-swipe-drift 1.6s ease-in-out infinite;
}
}
@keyframes table-swipe-drift {
0%, 100% { transform: translateX(0); opacity: 0.75; }
50% { transform: translateX(6px); opacity: 1; }
}
.horizontal-scroll-track { flex-grow: 1; width: 100vw; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; display: flex; align-items: center; -ms-overflow-style: none; scrollbar-width: none; }
.horizontal-scroll-track::-webkit-scrollbar { display: none; }
.table-surface { display: flex; align-items: center; padding: 0 40vw 0 50vw; gap: 18vw; min-height: 62vh; border-top: 1px solid rgba(92, 0, 56, 0.16); background: radial-gradient(circle at 24% 15%, rgba(220, 116, 180, 0.08), transparent 26%), linear-gradient(120deg, rgba(18, 16, 31, 0.94) 0%, rgba(18, 17, 33, 0.9) 58%, rgba(8, 7, 12, 0.38) 100%); }
.table-item { scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 320px; max-width: 360px; padding: 28px 24px; opacity: 0.28; transition: opacity 0.8s ease, transform 0.8s ease, border-color 0.8s ease, box-shadow 0.8s ease; cursor: default; border-radius: 30px; background: linear-gradient(180deg, rgba(31, 26, 49, 0.86), rgba(18, 17, 35, 0.92)); border: 1px solid rgba(249, 234, 244, 0.10); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 22px 56px rgba(0, 0, 0, 0.24); position: relative; overflow: hidden; }
.table-item::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 12% 15%, rgba(255, 255, 255, 0.08), transparent 15%), radial-gradient(circle at 70% 90%, rgba(255, 255, 255, 0.04), transparent 12%), linear-gradient(180deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 100% 22px, 100% 22px, 100% 100%; opacity: 0.14; pointer-events: none; mix-blend-mode: screen; }
.table-item::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(92, 0, 56, 0.08); border-radius: 24px; pointer-events: none; }
.table-item.in-view { opacity: 1; transform: translateY(-10px); border-color: rgba(255, 220, 241, 0.18); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.30); }
.item-artifact { font-size: 2.9rem; margin-bottom: 22px; filter: drop-shadow(0 0 20px rgba(255, 192, 231, 0.24)); }
.handwritten-note { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: rgba(255, 238, 249, 0.98); line-height: 1.9; transform: rotate(0); opacity: 0.98; letter-spacing: 0.02em; margin: 0; background: rgba(255, 235, 248, 0.12); padding: 18px 18px 16px; border-radius: 22px; border: 1px solid rgba(255, 220, 241, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); }
.transition-marker { min-width: 350px; }
.center-text { transform: rotate(0); color: rgba(255, 224, 243, 0.98); font-size: 1.25rem; line-height: 1.9; letter-spacing: 0.02em; }
.chair-zone { min-width: 320px; position: relative; margin-left: 10vw; cursor: default; }
.seat-caption { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 224, 243, 0.88); margin-bottom: 28px; opacity: 0.95; }
.chair-icon { background: rgba(255, 232, 247, 0.08); color: rgba(255, 224, 243, 0.98); border: 1px solid rgba(255, 220, 241, 0.12); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; transition: transform 0.35s ease, box-shadow 0.35s ease; filter: drop-shadow(0 0 18px rgba(255, 190, 230, 0.18)); padding: 16px; border-radius: 20px; position: relative; }
.chair-icon .chair-emoji { font-size: 3rem; line-height: 1; }
.chair-icon .chair-hint { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 224, 243, 0.92); }
/* A quiet ring pulse — same restrained language as the wax seal on the
cover — so the chair reads as something to press, not just a picture.
Uses ::before deliberately: ::after is already spoken for by the
hover-only outline defined further down. */
.chair-icon::before {
content: '';
position: absolute;
inset: -6px;
border: 1px solid rgba(255, 220, 241, 0.32);
border-radius: 26px;
pointer-events: none;
opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
.chair-icon { animation: chairBreath 4.5s ease-in-out infinite; }
.chair-icon::before { animation: chairRingPulse 2.6s ease-out infinite; }
}
@keyframes chairBreath {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-2px); }
}
@keyframes chairRingPulse {
0% { opacity: 0.45; transform: scale(1); }
70% { opacity: 0; transform: scale(1.14); }
100% { opacity: 0; transform: scale(1.14); }
}
@media (hover: hover) and (pointer: fine) {
.chair-icon:hover { transform: translateY(-1px); box-shadow: 0 20px 36px rgba(0, 0, 0, 0.24); }
}
.envelope-container { position: absolute; bottom: 40px; display: flex; flex-direction: column; align-items: center; opacity: 0; transition: opacity 3s ease 1.5s; pointer-events: none; }
.envelope-icon { font-size: 2rem; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8)); }
.envelope-label { font-family: var(--script), var(--serif); font-size: 1.35rem; color: #E5C185; margin-top: 10px; }
.infinite-table-void { min-width: 50vw; height: 10px; }
.artifact-cluster {
min-width: 320px;
padding: 24px 20px;
background: linear-gradient(180deg, rgba(29, 14, 50, 0.92) 0%, rgba(9, 2, 20, 0.96) 100%);
border-radius: 24px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 24px 54px rgba(0, 0, 0, 0.28);
gap: 18px;
border: 1px solid rgba(92, 0, 56, 0.22);
}
.cluster-shell {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 18px;
background: linear-gradient(135deg, rgba(251, 232, 244, 0.82), rgba(239, 202, 227, 0.72));
border-radius: 18px;
border: 1px solid rgba(122, 63, 103, 0.14);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.05);
}
.cluster-piece {
font-size: 1.45rem;
line-height: 1;
display: inline-flex;
width: 42px;
height: 42px;
align-items: center;
justify-content: center;
border-radius: 12px;
background: linear-gradient(135deg, rgba(240, 184, 220, 0.95), rgba(215, 140, 190, 0.9));
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(117, 55, 98, 0.12);
}
.empty-wood {
min-width: 260px;
padding: 24px 20px;
border-radius: 24px;
/* Candlelit wooden table -- where the metaphors run out and we just talk. */
background-image:
linear-gradient(180deg, rgba(8, 7, 13, 0.82) 0%, rgba(8, 7, 13, 0.93) 100%),
url('https://images.pexels.com/photos/15100120/pexels-photo-15100120.jpeg?auto=compress&cs=tinysrgb&w=1200');
background-size: cover, cover;
background-position: center, center 30%;
background-repeat: no-repeat;
box-shadow: inset 0 0 80px rgba(255, 138, 220, 0.06);
color: #f6d7ed;
backdrop-filter: blur(1px);
gap: 18px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.empty-wood .handwritten-note {
color: rgba(255, 224, 246, 0.92);
font-size: 1.15rem;
line-height: 1.85;
}
.table-setting {
display: flex;
gap: 14px;
margin-bottom: 18px;
}
.cup-icon {
width: 52px;
height: 52px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(43, 4, 10, 0.5);
border: 1px solid rgba(229, 193, 133, 0.35);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
font-size: 1.65rem;
}
.chair-zone {
min-width: 320px;
padding: 24px 20px;
gap: 24px;
border-radius: 24px;
background: linear-gradient(180deg, rgba(29, 14, 50, 0.9), rgba(9, 2, 20, 0.94));
border: 1px solid var(--frame-soft);
box-shadow: 0 24px 54px rgba(0, 0, 0, 0.35);
position: relative;
overflow: hidden;
}
.chair-interaction {
display: flex;
justify-content: center;
align-items: center;
}
.chair-zone::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at top, rgba(92, 0, 56, 0.22), transparent 60%);
pointer-events: none;
}
.seat-caption {
font-family: var(--serif);
font-size: 1rem;
line-height: 1.7;
color: rgba(251, 249, 252, 0.88);
max-width: 280px;
}
.chair-icon {
background: #492651;
color: #ffdcf3;
width: 94px;
height: 104px;
border-radius: 24px;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 2.3rem;
border: 1px solid rgba(255, 227, 245, 0.18);
box-shadow: 0 22px 38px rgba(0, 0, 0, 0.18);
transition: transform 0.35s ease, box-shadow 0.35s ease;
position: relative;
padding: 10px 8px;
}
.chair-emoji {
font-size: 2.2rem;
line-height: 1;
}
.chair-hint {
font-family: var(--serif);
font-size: 0.76rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 224, 243, 0.92);
}
.chair-icon::after {
content: '';
position: absolute;
inset: -5px;
border: 1px solid rgba(92, 0, 56, 0.0);
border-radius: 28px;
transition: border-color 0.25s ease;
pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
.chair-icon:hover {
transform: translateY(-1px);
box-shadow: 0 26px 42px rgba(0, 0, 0, 0.22);
}
.chair-icon:hover::after,
.chair-icon:focus-visible::after {
border-color: rgba(92, 0, 56, 0.45);
}
}
.envelope-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin-top: 10px;
}
.envelope-icon {
font-size: 2rem;
}
.envelope-label {
font-family: var(--script), var(--serif);
font-size: 1.1rem;
color: #E5C185;
}
.handwritten-note.center-text {
max-width: 320px;
margin: 0 auto;
font-size: 1.1rem;
line-height: 1.8;
}
/* ==========================================================================
ACT VII: THE FINAL LETTER
========================================================================== */
#act-vii-finale { background: linear-gradient(180deg, #050508 0%, #0a0a12 100%); }
#act-home-finale {
--room-accent: #e0b378;
--room-accent-dim: rgba(224, 179, 120, 0.4);
--room-light-pos: 50% 30%;
--room-light-color: rgba(229, 170, 110, 0.12);
background:
radial-gradient(circle at 50% 30%, rgba(229, 170, 110, 0.12), transparent 42%),
radial-gradient(circle at 50% 90%, rgba(92, 0, 56, 0.14), transparent 50%),
linear-gradient(180deg, #08050a 0%, #030208 100%);
}
.candlelight-void { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at center, rgba(92, 0, 56, 0.16) 0%, rgba(9, 2, 20, 0.08) 45%, transparent 70%); }
.handmade-letter-wrapper { width: min(100%, 600px); height: min(85vh, 85vh); position: relative; background: linear-gradient(180deg, rgba(29, 14, 50, 0.94) 0%, rgba(9, 2, 20, 0.98) 100%); background-image: linear-gradient(180deg, rgba(29, 14, 50, 0.94) 0%, rgba(9, 2, 20, 0.98) 100%), linear-gradient(150deg, var(--paper), transparent 55%); color: var(--ivory); box-shadow: 0 0 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05); overflow: hidden; border-radius: 6px; border: 1px solid var(--frame-soft); backdrop-filter: blur(20px); }
.handed-letter-wrapper::before, .handmade-letter-wrapper::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 10%, rgba(92, 0, 56, 0.2), transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 36%); pointer-events: none; }
.candlelight-void::before {
content: '';
position: absolute;
inset: 6%;
border: 1px solid var(--frame-soft);
border-radius: 8px;
pointer-events: none;
}
#pre-letter-pause { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(29, 14, 50, 0.94) 0%, rgba(9, 2, 20, 0.98) 100%); z-index: 5; transition: opacity 2s ease; overflow-y: auto; padding: 24px; }
#pre-letter-pause p { font-size: 1.4rem; color: var(--ivory); margin-bottom: 10px; opacity: 0; }
#pre-letter-pause p.delay-line { font-style: italic; color: rgba(251, 249, 252, 0.6); }
.folio-page { position: absolute; inset: 0; padding: clamp(24px, 5vh, 48px) clamp(20px, 5vw, 40px); display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s ease; }
.folio-page.hidden { display: none; }
.folio-page::-webkit-scrollbar { display: none; }
#folio-page-1.slide-out { transform: translateX(-100%); opacity: 0; }
/* A small keepsake photo tucked into the letter — swap the ![]()
src in the
HTML for a personal photo; this framing (card, tape, tilt) stays the same. */
.tucked-photo {
align-self: center;
width: min(58%, 220px);
margin: 0 0 5vh;
padding: 10px 10px 26px;
background: var(--paper-solid);
border-radius: 2px;
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
transform: rotate(-3deg);
position: relative;
}
.tucked-photo::before {
content: '';
position: absolute;
top: -10px;
left: 50%;
width: 54px;
height: 18px;
transform: translateX(-50%) rotate(-2deg);
background: rgba(244, 235, 255, 0.22);
border: 1px solid rgba(244, 235, 255, 0.28);
backdrop-filter: blur(1px);
}
.tucked-photo-img {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
filter: sepia(0.2) saturate(0.85) contrast(1.02);
}
.poem-intro { font-family: var(--sans); font-size: 0.8rem; line-height: 1.6; margin-bottom: 6vh; color: rgba(251, 249, 252, 0.6); }
.poem-title { font-family: var(--serif); font-size: 2.5rem; margin-bottom: 4vh; color: var(--ivory); }
.poem-stanza { font-family: var(--serif); font-size: 1.3rem; line-height: 1.8; margin-bottom: 3vh; color: rgba(251, 249, 252, 0.9); }
.poem-signoff { font-family: var(--serif); font-style: italic; color: var(--rose); margin-top: 4vh; }
#btn-read-letter { margin-top: auto; align-self: flex-end; color: var(--gold); }
#folio-page-2.hidden { transform: translateX(100%); opacity: 0; pointer-events: none; }
#folio-page-2.active { transform: translateX(0); opacity: 1; pointer-events: auto; }
.letter-body p { font-family: var(--serif); font-size: 1.15rem; line-height: 1.8; margin-bottom: 2.5vh; color: rgba(251, 249, 252, 0.92); }
.letter-signoff { font-family: var(--script), var(--serif); font-size: 2.4rem; margin-top: 4vh; color: var(--gold); }
.maker-mark { text-align: center; font-family: var(--sans); font-size: 0.55rem; letter-spacing: 0.25em; color: rgba(251, 249, 252, 0.4); text-transform: uppercase; margin-top: 8vh; padding-top: 4vh; border-top: 1px solid rgba(255, 255, 255, 0.08); opacity: 0; transition: opacity 1.2s ease; }
.maker-mark.visible { opacity: 1; }
/* The typewriter caret that trails the letter as it types itself out. It's
a single reused element that follows along paragraph by paragraph, so it
never leaves a stray blinking mark behind on finished lines. */
.typing-cursor { display: inline-block; width: 2px; height: 1em; margin-left: 1px; background: var(--gold); vertical-align: text-bottom; }
@media (prefers-reduced-motion: no-preference) {
.typing-cursor { animation: cursor-blink 0.9s steps(1) infinite; }
}
@keyframes cursor-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* Sits in the corner of the letter's frame itself (not inside the
scrolling letter body), so it stays put as the page scrolls to follow
the typing instead of drifting off with the text. Only interactive
while the typing is actually in progress. */
.letter-skip-hint {
position: absolute;
right: clamp(16px, 4vw, 28px);
bottom: clamp(14px, 3vh, 24px);
z-index: 6;
font-family: var(--sans);
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(251, 249, 252, 0.5);
background: rgba(9, 8, 20, 0.55);
border: none;
border-radius: 999px;
padding: 8px 14px;
cursor: pointer;
opacity: 0;
transform: translateY(4px);
pointer-events: none;
transition: opacity 0.5s ease, transform 0.5s ease, color 0.3s ease;
}
.letter-skip-hint.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.letter-skip-hint:hover, .letter-skip-hint:focus-visible { color: var(--gold); }
/* ==========================================================================
MOBILE FIXES: THE CURATOR'S DESK
========================================================================== */
/* 1. Constrain the width so long labels gracefully wrap to a second line */
.desk-object {
width: 140px;
text-align: center;
}
.museum-tag {
line-height: 1.5;
white-space: normal;
}
@media (max-width: 768px) {
.room-content {
width: min(100%, 100%);
padding: 60px 18px;
}
.gallery-room {
width: 100%;
max-width: 100%;
padding: 20px 14px 42px;
gap: 18px;
}
.gallery-opening,
.gallery-stage,
.gallery-closing {
width: 100%;
}
.gallery-frame {
grid-template-columns: 1fr;
gap: 18px;
}
.gallery-caption {
text-align: center;
align-items: center;
justify-content: center;
}
.gallery-caption p,
.gallery-caption h3 {
margin: 0 auto;
}
.gallery-artwork {
min-height: 260px;
}
/* Keep the experience pinned to the viewport on small screens */
html, body {
overflow-x: hidden;
overflow-y: hidden;
height: 100%;
min-height: 100dvh;
}
/* Ensure hiding still works */
#poster-detail.hidden { display: none !important; }
.poster-nav {
display: flex;
gap: 10px;
margin-top: 18px;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
}
.poster-nav .ghost-text-btn {
min-width: 92px;
padding: 12px 14px;
border-radius: 12px;
font-size: 0.92rem;
}
/* Sticky nav for very small screens so controls remain accessible */
@media (max-width: 480px) {
.poster-nav {
position: static;
left: auto;
right: auto;
bottom: auto;
padding: 0;
background: transparent;
justify-content: flex-start;
box-shadow: none;
z-index: auto;
}
}
/* ACT VI: long table mobile-view adjustments */
#act-vi-table {
align-items: flex-start;
justify-content: flex-start;
}
.table-header-overlay {
top: 5vw;
left: 5vw;
width: calc(100% - 10vw);
}
.horizontal-scroll-track {
width: 100%;
padding-bottom: 14vh;
}
.table-surface {
padding: 0 8vw 0 12vw;
gap: 14vw;
min-height: 56vh;
align-items: flex-start;
}
.table-item {
min-width: 240px;
padding: 22px 18px;
border-radius: 24px;
background: rgba(14, 8, 27, 0.92);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.artifact-cluster,
.empty-wood,
.chair-zone {
min-width: calc(100vw - 20vw);
max-width: 420px;
margin: 0 auto;
}
.table-item:not(.chair-zone) {
padding: 20px;
}
.cluster-shell {
gap: 8px;
padding: 14px;
}
.cluster-piece {
width: 36px;
height: 36px;
font-size: 1.25rem;
}
.handwritten-note {
font-size: 1.15rem;
line-height: 1.8;
}
.empty-wood .handwritten-note,
.handwritten-note.center-text {
font-size: 1.05rem;
}
.table-setting {
justify-content: center;
gap: 10px;
}
.cup-icon {
width: 46px;
height: 46px;
font-size: 1.35rem;
}
.chair-zone {
min-width: calc(100vw - 22vw);
padding: 22px 18px;
gap: 18px;
}
.seat-caption {
font-size: 0.95rem;
max-width: 100%;
}
.chair-icon {
width: 68px;
height: 68px;
font-size: 2rem;
}
.envelope-label {
font-size: 0.9rem;
}
.infinite-table-void {
min-width: 30vw;
}
.table-item.in-view {
transform: translateY(-4px);
}
.table-header-overlay p {
font-size: 1rem;
}
.table-header-overlay h2 {
font-size: 0.65rem;
}
/* Keep the chair and envelope reveal within the narrative flow */
.envelope-container {
opacity: 0;
transition: opacity 1.8s ease 0.7s;
}
.chair-zone .envelope-container.visible {
opacity: 1;
}
.chair-zone button {
width: 88px;
height: 88px;
}
.chair-zone .seat-caption {
margin-bottom: 18px;
}
/* Prevent overscroll from dragging the entire page when scrolling the track */
.horizontal-scroll-track {
overscroll-behavior-x: contain;
}
#obj-jar { top: 40% !important; left: 8% !important; right: auto !important; }
#obj-audio { top: 12% !important; left: 10% !important; right: auto !important; }
#obj-cinema { top: 28% !important; right: 10% !important; left: auto !important; }
#obj-carrying { top: 68% !important; left: 28% !important; }
#obj-key { top: 56% !important; right: 12% !important; left: auto !important; }
/* Extra-tight phones */
@media (max-width: 420px) {
#obj-jar { top: 44% !important; left: 6% !important; }
#obj-audio { top: 8% !important; left: 8% !important; }
#obj-cinema { top: 26% !important; right: 8% !important; }
#obj-carrying { top: 72% !important; left: 22% !important; }
#obj-key { top: 60% !important; right: 8% !important; }
}
/* Very narrow phones: preserve a scattered desk feel instead of stacking everything vertically */
@media (max-width: 480px) {
.desk-surface {
height: min(84vh, 720px);
padding: 0;
margin-top: 0;
overflow: hidden;
}
.desk-object {
width: 112px;
padding: 0 0 6px;
opacity: 1 !important;
animation: none !important;
transform: translate(-50%, -50%) rotate(var(--obj-rotate, 0deg)) !important;
}
.desk-object .artifact { font-size: 1.75rem; }
.museum-tag {
text-align: center;
font-size: 0.5rem;
line-height: 1.3;
}
.global-back-btn { top: 12px; left: 12px; }
}
.gallery-nav {
flex-wrap: wrap;
gap: 12px;
}
.desk-surface {
height: 82vh; /* Gives a little more vertical breathing room on small screens */
margin-top: 0;
padding-top: 20px;
}
.desk-object {
width: 130px;
gap: 8px;
}
.artifact {
font-size: 2rem;
}
/* Overrides the wide inline HTML percentages with safe mobile coordinates */
#obj-audio { top: 15% !important; left: 50% !important; }
#obj-jar { top: 35% !important; left: 22% !important; }
#obj-cinema { top: 55% !important; left: 78% !important; right: auto !important; }
#obj-carrying { top: 73% !important; left: 22% !important; }
#obj-key { top: 92% !important; left: 63% !important; right: auto !important; }
}
/* ==========================================================================
FINALE CLOSE BUTTON
========================================================================== */
.finale-actions {
display: flex;
justify-content: center;
width: 100%;
margin-top: 40px;
padding-bottom: 20px;
z-index: 100;
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: opacity 1s ease, transform 1s ease;
}
.finale-actions.visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.finale-btn {
background: rgba(43, 4, 10, 0.5);
border: 1px solid rgba(229, 193, 133, 0.4);
color: #E5C185;
font-family: 'Inter', sans-serif;
font-size: 0.8rem;
letter-spacing: 0.25em;
text-transform: uppercase;
padding: 12px 24px;
cursor: pointer;
border-radius: 999px;
transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
text-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
.finale-btn:hover {
background: rgba(58, 6, 14, 0.72);
border-color: rgba(229, 193, 133, 0.8);
color: #f6e0b3;
box-shadow: 0 0 20px rgba(229, 193, 133, 0.22);
transform: translateY(-2px);
}
}