/* Popups: story text, steps, stones, the doorway light, scene 2, the spirits */

/* Point of interest popup: sized to its content (the spirit's popup has a fixed size, see .is-wide) */
.poi-popup {
  position: relative;
  width: fit-content;
  min-width: min(360px, 100%);
  max-width: min(720px, 100%);
}

.poi-content {
  flex-direction: column;
  gap: 16px;
  padding: 36px 44px 28px;
  border-style: solid;
}

/* Story text in a popup */
.poi-text {
  margin: 0;
  max-width: 34em;
  font-size: 1.25rem;
  line-height: 1.4;
  text-align: center;
}

/* A popup's text revealed step by step (see stagedBlocks): each step keeps its room from the start.
   The button for the next step sits in its place; a revealed step has space and a faint line above. */
.poi-step {
  position: relative;
  display: grid;
  width: 100%;
  padding-top: 20px;
}

/* The step's text and its button share the same place */
.poi-step > * {
  grid-area: 1 / 1;
}

.poi-step > .ui-button {
  justify-self: center;
  align-self: start;
}

.poi-step-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.poi-step-content.is-hidden,
.poi-step > .ui-button.is-hidden {
  visibility: hidden;
}

.poi-step.is-revealed::before {
  content: "";
  position: absolute;
  top: 0;
  left: 30%;
  right: 30%;
  border-top: 1px solid rgba(207, 198, 171, 0.25);
}

/* Buttons side by side (e.g. the light in the grass: touch the light, press the symbol) */
.poi-button-row {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* A paragraph set apart from the one before it */
.poi-text.poi-after-space {
  margin-top: 12px;
}

.poi-step-content > .is-hidden {
  visibility: hidden;
}

/* In place of a button once its action is done (e.g. a spirit called forth) */
.poi-done {
  font-style: italic;
  color: var(--sunlight);
}

/* Result of an action (e.g. placing a stone) */
.poi-message {
  min-height: 1.4em;
  font-style: italic;
  color: var(--sunlight);
}

/* A message keeping its room until it's said (e.g. the dark of the mine) */
.poi-message.is-hidden {
  visibility: hidden;
}

.poi-message:empty {
  display: none;
}

/* Stone slot popup: its final size from the start, so placing a stone moves nothing.
   (Fixed width, and room kept for a two-line message even before there is one.) */
.poi-popup[data-type="stone-slot"] {
  width: min(680px, 100%);
}

.poi-popup[data-type="stone-slot"] .poi-message {
  display: block;
  min-height: 2.8em;
}

/* ---- Stones ---- */
.stone-row {
  display: flex;
  justify-content: center;
  gap: 24px;
}

/* A stone picture with its glyph carved on the front */
.stone {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}

.stone img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6));
}

.stone .stone-glyph,
.stone .glyph-with-meaning {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
}

.stone .glyph-with-meaning .stone-glyph {
  position: static;
  transform: none;
}

.stone .glyph {
  width: 56px;
  height: 56px;
  font-size: 0.95rem;
}

/* Stones that can be picked up and placed */
.stone.is-movable {
  cursor: grab;
  transition: transform 0.2s ease;
}

.stone.is-movable:hover {
  transform: translateY(-4px) scale(1.04);
}

.stone.is-movable:active {
  cursor: grabbing;
  transform: scale(0.96);
}

/* Stones in hand on the left, the slot on the right */
.slot-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

/* A stone's place beside the slot: the same size whether the stone is there or in the slot */
.stone-place {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
}

/* The slot: a box to drop a stone into */
.stone-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  border: 1px solid var(--stone-dark);
  border-radius: 6px;
  background: var(--forest-darkest);
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* ---- Doorway light: fades and swells in, with a slow shimmer while lit ---- */
.scene-light {
  position: absolute;
  width: auto;
  transform: translate(-50%, -50%) scale(0.7);
  mix-blend-mode: screen; /* adds its light to the picture underneath */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scene-light.is-lit {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: light-shimmer 3s ease-in-out 0.6s infinite;
}

@keyframes light-shimmer {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.04); }
}

/* ---- Scene 2 ---- */

/* Darkness: one half per lamp, each fading away when its lamp is lit */
/* Over the dust too (z-index), so dust on a half still in the dark is dark like the rest of it */
.scene-darkness {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(5, 9, 7, 0.8);
  pointer-events: none;
  transition: opacity 1.4s ease;
}

.scene-darkness.is-left {
  -webkit-mask-image: linear-gradient(to right, black 45%, transparent 65%);
  mask-image: linear-gradient(to right, black 45%, transparent 65%);
}

.scene-darkness.is-right {
  -webkit-mask-image: linear-gradient(to left, black 45%, transparent 65%);
  mask-image: linear-gradient(to left, black 45%, transparent 65%);
}

.scene-darkness.is-lit {
  opacity: 0;
}

/* The lamps on the scene: dim when off, glowing warm when lit */
/* In front of the outlines (a glowing outline behind it doesn't cover it), behind the dots.
   It belongs to its rock's point: hovered, that outline glows; clicked, it opens (see renderSceneExtras) */
.scene-lamp {
  position: absolute;
  z-index: 1;
  cursor: pointer;
  height: auto;
  transform: translateX(-50%);
  filter: brightness(0.45) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7));
  transition: filter 0.8s ease;
}

.scene-lamp.is-on {
  filter: drop-shadow(0 0 18px rgba(255, 160, 60, 0.75));
}

/* The wandering spirit: floats from the right to the archway on the left, pauses,
   turns back, floats back, pauses, turns again... (one loop: 60 s).
   The walker moves, the float bobs gently, the figure turns to face where it goes. */
/* Layering: the spirit passes in front of the points of interest in the background,
   except those marked as in front (e.g. the way back) */
.poi-dot {
  z-index: 1;
}

.poi-dot.is-front {
  z-index: 3;
}

/* The spirit's track: as wide as the scene, slid along with a transform, so his position is the
   track's (in % of the scene). Moving it with "transform" rather than "left" spares the browser a new
   layout and a repaint of the figure on every frame: the graphics card just slides the picture. */
.spirit-walker {
  position: absolute;
  z-index: 2;
  inset: 0;
  will-change: transform;
  animation: spirit-walk 60s ease-in-out infinite;
}

/* His body, centred on the track's left edge (his position) */
.spirit-body {
  position: absolute;
  left: 0;
  bottom: 4%;
  height: 62%;
  aspect-ratio: 604 / 806;
  transform: translateX(-50%);
}

.spirit-float {
  width: 100%;
  height: 100%;
  pointer-events: none; /* the picture itself doesn't block clicks... */
  will-change: transform;
  animation: spirit-appear 2.5s ease-out, spirit-bob 6s ease-in-out infinite;
}

.spirit-walker {
  pointer-events: none;
}

.spirit-figure {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
  animation: spirit-turn 60s linear infinite;
}

/* A spirit is clicked by his silhouette (see spiritAt): hovered, he glows, and what's behind him doesn't */
.spirit-figure.is-hovered {
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 10px rgba(255, 226, 150, 0.85)) brightness(1.08);
}

.scene-stage.is-over-spirit {
  cursor: pointer;
}

.scene-stage.is-over-spirit .poi-shape:hover {
  fill: transparent;
  stroke: transparent;
  filter: none;
}

/* Investigating: the spirits glow too (on their body, so his turning and floating carry on undisturbed) */
.scene.is-investigating .spirit-body,
.scene.is-investigating .spirit-standing {
  animation: investigate-spirit 2.4s ease-in-out;
}

@keyframes investigate-spirit {
  0%, 100% { filter: none; }
  20%, 70% { filter: drop-shadow(0 0 14px rgba(255, 214, 120, 0.9)); }
}

/* A spirit floating in place (the old farmer): placed by its centre and bottom edge, it bobs
   gently where it stands; the picture doesn't block clicks, its dot does */
.spirit-standing {
  position: absolute;
  z-index: 2;
  aspect-ratio: 327 / 604;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Standing in place, they don't turn around (only the walking spirit does): just the gentle float */
.spirit-standing .spirit-figure {
  animation: none;
}

/* While the player interacts with him, he stops */
.spirit-walker.is-paused,
.spirit-walker.is-paused * {
  animation-play-state: paused !important;
}

/* Float left past the archway and off the left side of the scene, on to the garden (0-42%),
   away only a moment (42-44%, turning around meanwhile), back in and float back (44-94%),
   pause (94-100%). He keeps his speed through the left edge (easing only at his stop on the right),
   so he isn't out of sight for long. In scene 3 he comes in from the right, as if carrying on
   (see spirit-walk-garden). */
@keyframes spirit-walk {
  0% { transform: translateX(76%); animation-timing-function: ease-in; }
  42% { transform: translateX(-15%); animation-timing-function: linear; }
  44% { transform: translateX(-15%); animation-timing-function: ease-out; }
  94% { transform: translateX(76%); }
  100% { transform: translateX(76%); }
}

/* Just summoned (scene 2): he rises on the light's spot (47%), floats right to his usual stop (76%),
   stops and turns, then carries on with his usual loop from there (which starts at that stop, going left) */
/* Scene 2: he fades as he reaches the rockfall in the garden archway (on the left), as if passing through it,
   and fades back in as he comes out again. Timed with spirit-walk (his position: about 20% across at 33% of the
   loop, 5% at 38%; coming back, 5% at 50%, 20% at 56.5%). Scene 3 (is-garden) has its own walk. */
.spirit-walker:not(.is-garden) .spirit-body {
  animation: spirit-through-arch 60s linear infinite;
}

.spirit-walker.is-rising .spirit-body {
  animation-delay: 12.5s; /* with his walk, once he has risen */
}

@keyframes spirit-through-arch {
  0%, 33% { opacity: 1; }
  38%, 50% { opacity: 0; }
  56.5%, 100% { opacity: 1; }
}

.spirit-walker.is-rising {
  animation: spirit-rise 12.5s ease-in-out forwards, spirit-walk 60s ease-in-out 12.5s infinite;
}

.spirit-walker.is-rising .spirit-figure {
  animation: spirit-turn-rise 12.5s linear forwards, spirit-turn 60s linear 12.5s infinite;
}

/* Still while he appears (0-20%), right (20-76%), stopped (76-100%) */
@keyframes spirit-rise {
  0%, 20% { transform: translateX(47%); }
  76%, 100% { transform: translateX(76%); }
}

/* Facing right as he goes, turning back during his stop */
@keyframes spirit-turn-rise {
  0%, 87.9% { transform: scaleX(-1); }
  88%, 100% { transform: scaleX(1); }
}

/* He turns while out of sight beyond the left edge, and again during his pause on the right */
@keyframes spirit-turn {
  0%, 42.9% { transform: scaleX(1); }
  43%, 99.9% { transform: scaleX(-1); }
  100% { transform: scaleX(1); }
}

@keyframes spirit-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5%); }
}

@keyframes spirit-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Scene 3, the garden: he comes in from the right (from the archway), walks to the middle,
   stays a while, turns and goes back out to the right, then is away for a while (in scene 2) */
.spirit-walker.is-garden {
  animation: spirit-walk-garden 60s ease-in-out infinite;
}

.spirit-walker.is-garden .spirit-figure {
  animation: spirit-turn-garden 60s linear infinite;
}

/* In (0-28%), stay (28-48%), out (48-76%), away (76-100%).
   He starts just past the right edge and comes in at speed, slowing down as he arrives, so he shows
   almost as soon as the scene opens; while away he drifts back to that start, out of sight. */
@keyframes spirit-walk-garden {
  0% { transform: translateX(108%); animation-timing-function: ease-out; }
  28% { transform: translateX(60%); }
  48% { transform: translateX(60%); }
  76% { transform: translateX(115%); animation-timing-function: linear; }
  100% { transform: translateX(108%); }
}

/* He faces left coming in, turns before leaving, and turns back while away */
@keyframes spirit-turn-garden {
  0%, 46.9% { transform: scaleX(1); }
  47%, 99.9% { transform: scaleX(-1); }
  100% { transform: scaleX(1); }
}

/* Lamp popup: its final size from the start */
.poi-popup[data-type="lamp"] {
  width: min(560px, 100%);
}

/* Messages after an action (a lamp pressed, a stone placed) keep room for two lines from the start */
.poi-popup[data-type="lamp"] .poi-message,
.poi-popup[data-type="stone-slot"] .poi-message {
  display: block;
  min-height: 2.8em;
}

.lamp-zoom {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 170px;
}

.lamp-zoom img {
  max-width: 240px;
  max-height: 100%;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
}

.lamp-glyphs {
  display: flex;
  justify-content: center;
  gap: 56px;
}

/* Each glyph with its Press button below */
.lamp-glyph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* While its meaning is being written, the Press button steps aside for the meaning box */
.lamp-glyph:has(.glyph.is-editing) .ui-button {
  visibility: hidden;
}


/* The engraved scenes: the spoken glyphs in two groups */
.spell-words {
  gap: 40px;
}

.spell-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Glyphs set close together as one group (e.g. the two on the doorway's lintel). Thin drawings
   sit in the middle of wide boxes, so the boxes overlap to bring the drawings themselves together;
   the translate switch keeps its usual distance */
.inscription-words.is-tight {
  gap: 0;
}

.inscription-words.is-tight > * + * {
  margin-left: -30px; /* no further: the next box would start covering the drawing before it */
}