/* roriloty home — a painted night scene you can poke at */
:root {
    --paper: #f4ead6;
    --paper-dark: #e3d4b4;
    --ink: #2a2142;
    --night: #120d26;
    --coral: #e8805f;
    --heart: #f2a0b8;
    --font: "Mali", "Itim", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--night); }
body { font-family: var(--font); color: var(--paper); -webkit-tap-highlight-color: transparent; }

.stage {
    --W: max(100vw, 135vh);          /* painting is 3200x2370 ≈ 1.35:1, always "cover" */
    position: fixed; inset: 0; overflow: hidden; touch-action: none; user-select: none;
}
.zoom { position: absolute; inset: 0; transition: transform .9s cubic-bezier(.6, 0, .25, 1), filter .9s; will-change: transform; }
.scene {
    position: absolute; left: 50%; top: 50%;
    width: calc(var(--W) * 1.06); aspect-ratio: 3200 / 2370;
    transform: translate(-50%, -50%);
}
.layer { position: absolute; inset: 0; will-change: transform; }
.layer img { width: 100%; height: 100%; display: block; pointer-events: none; }
.l-fore { pointer-events: none; }

/* the OC breathes a little */
.oc { position: absolute; inset: 0; transform-origin: 50% 100%; animation: breathe 5.5s ease-in-out infinite; }
.oc.squish { animation: squish .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.003, 1.009); } }
@keyframes squish { 0% { transform: scale(1, 1); } 25% { transform: scale(1.035, .955); } 60% { transform: scale(.99, 1.025); } 100% { transform: scale(1, 1); } }

.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* a warm lantern that follows the pointer */
.lantern {
    position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; transition: opacity .6s;
    background: radial-gradient(circle 26vmax at var(--lx, 50%) var(--ly, 50%), rgba(255, 214, 150, .75), rgba(255, 190, 130, 0) 70%);
}
.stage.awake .lantern { opacity: 1; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(8, 5, 20, .55) 100%); }

/* ---------- hotspots ---------- */
.hot { position: absolute; inset: 0; pointer-events: none; text-decoration: none; color: inherit; outline: none; }
.hot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.zone {
    pointer-events: all; cursor: pointer; fill: rgba(244, 234, 214, .07); stroke: rgba(244, 234, 214, .8); stroke-width: 2.4; stroke-dasharray: 7 6; stroke-linejoin: round;
    vector-effect: non-scaling-stroke; animation: march 14s linear infinite, breathe-zone 3.4s ease-in-out infinite;
    transition: fill .25s, stroke .25s; filter: drop-shadow(0 0 1.5px #2a2142) drop-shadow(0 0 2px #2a2142);
}
@keyframes march { to { stroke-dashoffset: -130; } }
@keyframes breathe-zone { 0%, 100% { fill-opacity: .6; } 50% { fill-opacity: 1; } }
.zone:hover, .hot:focus-visible .zone { fill: rgba(244, 234, 214, .3); stroke: #fff; stroke-dasharray: none; stroke-width: 3.4; }
.hot:focus-visible .zone { stroke: var(--coral); }

.boop { position: absolute; left: var(--x); top: var(--y); width: calc(var(--W) * .045); aspect-ratio: 1; translate: -50% -50%; background: none; border: 0; outline: none; cursor: grab; touch-action: none; }
.boop:focus-visible { outline: 3px dashed var(--heart); outline-offset: 2px; border-radius: 50%; }

/* paper label, pinned next to its zone */
.tagpos { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; pointer-events: none; }
.tag {
    position: absolute; white-space: nowrap; font-size: clamp(.85rem, 1.25vw, 1.15rem); font-weight: 700; letter-spacing: .02em;
    color: var(--ink); background: var(--paper); padding: .35em .85em .45em;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .28), 0 8px 18px rgba(0, 0, 0, .35);
    clip-path: polygon(0 3%, 6% 0, 14% 4%, 25% 0, 38% 3%, 52% 0, 66% 4%, 80% 0, 92% 3%, 100% 1%, 99% 94%, 90% 100%, 76% 96%, 60% 100%, 44% 95%, 30% 100%, 15% 96%, 5% 100%, 0 95%);
    opacity: 0; transform: scale(.7) rotate(var(--r, -3deg)); transition: opacity .25s, transform .35s cubic-bezier(.3, 1.8, .5, 1);
}
.tag small { display: block; font-size: .72em; font-weight: 400; opacity: .7; margin-top: -.1em; }
.hot[data-side="right"] .tag { left: .6em; top: 0; translate: 0 -50%; --r: -4deg; }
.hot[data-side="left"] .tag { right: .6em; top: 0; translate: 0 -50%; --r: 3deg; }
.hot[data-side="top"] .tag { bottom: .6em; left: 0; translate: -50% 0; --r: -2deg; }
.hot:has(.zone:hover) .tag, .hot:focus-visible .tag, .stage.touch .tag { opacity: 1; transform: scale(1) rotate(var(--r, -3deg)); }
.stage.labels-off .tag { opacity: 0 !important; }
.stage.labels-off .zone { fill: transparent; stroke: transparent; animation: none; }

/* ---------- chrome ---------- */
.dock { display: none; position: absolute; left: 0; right: 0; bottom: calc(52px + env(safe-area-inset-bottom)); justify-content: center; flex-wrap: wrap; gap: .5rem; padding: 0 12px; }
.stage.touch .dock, .dock.always { display: flex; }
.dock-link { font-size: .85rem; font-weight: 700; text-decoration: none; color: var(--ink); background: var(--paper); padding: .45em 1em .5em; border-radius: 6px 12px 7px 11px; box-shadow: 0 3px 0 rgba(0, 0, 0, .3), 0 8px 16px rgba(0, 0, 0, .35); }
.dock-link:nth-child(odd) { transform: rotate(-1.5deg); } .dock-link:nth-child(even) { transform: rotate(1.2deg); }
.dock-link:active, .dock-link:focus-visible { background: var(--coral); outline: none; }
.stage.touch .tag { display: none; }
.stage.touch .hot:active .tag { display: block; }
@media (max-width: 700px) { .dock { display: flex; } .tag { display: none; } }

.mark { position: absolute; left: clamp(16px, 3vw, 44px); top: clamp(14px, 2.6vw, 38px); pointer-events: none; text-shadow: 0 2px 0 rgba(18, 13, 38, .6), 0 4px 20px rgba(18, 13, 38, .8); }
.mark h1 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); font-weight: 700; letter-spacing: .01em; line-height: 1; transform: rotate(-2deg); transform-origin: left bottom; }
.mark h1 span { color: var(--coral); }
.mark p { margin-top: .6em; font-size: clamp(.72rem, 1vw, .9rem); line-height: 1.5; opacity: .85; }

.foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 clamp(16px, 3vw, 44px) calc(clamp(12px, 2vw, 24px) + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; pointer-events: none; text-shadow: 0 2px 10px rgba(18, 13, 38, .9); }
.hint { font-size: .82rem; opacity: .8; }
.hint-touch { display: none; }
.stage.touch .hint-touch { display: inline; }
.stage.touch .hint-mouse { display: none; }
.toggle {
    pointer-events: auto; font: inherit; font-size: .78rem; color: var(--paper); cursor: pointer;
    background: rgba(18, 13, 38, .55); border: 2px dashed rgba(244, 234, 214, .5); border-radius: 999px; padding: .35em 1em; text-shadow: none;
}
.toggle:hover, .toggle:focus-visible { background: rgba(244, 234, 214, .92); color: var(--ink); border-style: solid; outline: none; }

.toast {
    position: absolute; left: 50%; bottom: 14%; transform: translate(-50%, 12px); pointer-events: none; opacity: 0;
    background: var(--paper); color: var(--ink); font-weight: 600; padding: .5em 1.1em; border-radius: 6px 14px 8px 12px;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .3), 0 14px 30px rgba(0, 0, 0, .4); transition: opacity .3s, transform .3s; max-width: 86vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0) rotate(-1deg); }

.curtain { position: absolute; inset: 0; background: var(--night); pointer-events: none; opacity: 1; transition: opacity 1.4s ease .1s; }
.stage.ready .curtain { opacity: 0; }
.stage.leaving .curtain { opacity: 1; transition: opacity .7s ease .25s; }
.stage.leaving { pointer-events: none; }

.scene { transition: transform 2.4s cubic-bezier(.2, .7, .2, 1); }
.stage:not(.ready) .scene { transform: translate(-50%, -50%) scale(1.08); }


@media (max-width: 700px) {
    .mark p { display: none; }
    .tag { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .zone, .oc { animation: none !important; }
    .zoom, .scene, .curtain { transition: none !important; }
}