/* ==========================================================================
   PSYOURA: 4. INTERACTIVE
   The ten things that respond. Every one of them is a real button underneath,
   so the whole site works from a keyboard.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE TREE: hero illustration with six clickable regions
   -------------------------------------------------------------------------- */
.tree-stage { position: relative; width: 100%; max-width: 920px; margin-inline: auto; }
.tree-stage .psy-tree { width: 100%; height: auto; color: var(--leaf); }
.psy-tree .t-sky    { color: var(--gold); }
.psy-tree .t-canopy { color: var(--fern); }
.psy-tree .t-roots  { color: var(--moss); }
.psy-tree .t-tree   { color: var(--leaf); }
.psy-tree .t-ground { color: var(--fern); }
.psy-tree .t-person { color: var(--cream); }

/* each hotspot is a real <button>, absolutely placed over the drawing */
.spot {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: .45rem;
  background: transparent; border: 0; padding: .2rem; cursor: pointer;
  font-family: var(--body); font-size: var(--s--2); letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; color: var(--gold);
  white-space: nowrap;
  transition: transform 240ms var(--ease);
}
.spot--flip { flex-direction: row-reverse; }
.spot i {
  width: 2.2rem; height: 2.2rem; border-radius: 50%; flex: none; display: block;
  border: 1.5px dashed color-mix(in srgb, var(--gold) 70%, transparent);
  background: radial-gradient(circle, rgba(242,199,92,.20), transparent 70%);
  transition: background 300ms var(--ease), border-color 300ms var(--ease), transform 300ms var(--ease);
}
.spot:hover i, .spot:focus-visible i { background: radial-gradient(circle, rgba(242,199,92,.42), transparent 72%); border-color: var(--gold); transform: scale(1.12); }
.spot span { opacity: .82; transition: opacity 240ms var(--ease); }
.spot:hover span { opacity: 1; }
.spot.is-open i { background: radial-gradient(circle, rgba(216,238,155,.5), transparent 72%); border-style: solid; border-color: var(--lime); }
@media (max-width: 780px) { .spot span { display: none; } .spot i { width: 1.6rem; height: 1.6rem; } }

/* the panel a hotspot opens */
.tree-answer {
  margin-top: var(--sp5); border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--cream) 8%, transparent);
  padding: clamp(1.3rem, 3vw, 2.2rem);
  display: grid; gap: var(--sp3); min-height: 150px;
}
.tree-answer .q { font-family: var(--display); font-size: var(--s3); line-height: 1.16; max-width: 22ch; }
.tree-answer .a { color: var(--soft); max-width: 58ch; }
.tree-answer .prompt { font-family: var(--hand); font-size: 1.5rem; color: var(--gold); }

/* --------------------------------------------------------------------------
   FEELING CHECK: "How are you really feeling today?"
   -------------------------------------------------------------------------- */
.feelings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: .8rem; }
.feeling {
  display: grid; justify-items: center; gap: .55rem; padding: var(--sp4) .6rem var(--sp3);
  background: transparent; border: 1px solid var(--rule); cursor: pointer;
  font-family: var(--body); font-size: var(--s--1); color: var(--type);
  border-radius: 14px 10px 15px 9px;
  transition: background-color 320ms var(--ease), border-color 320ms var(--ease), transform 240ms var(--ease);
}
.feeling .dd { width: 2.6rem; height: 2.6rem; color: var(--feel, var(--accent-dec)); transition: transform 320ms var(--ease); }
.feeling:hover, .feeling:focus-visible {
  background: color-mix(in srgb, var(--feel, var(--accent-dec)) 14%, transparent);
  border-color: var(--feel, var(--accent-dec)); transform: translateY(-3px);
}
.feeling:hover .dd { transform: scale(1.1) rotate(-3deg); }
.feeling.is-chosen {
  background: color-mix(in srgb, var(--feel, var(--accent-dec)) 22%, transparent);
  border-color: var(--feel, var(--accent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--feel, var(--accent)) 45%, transparent);
}

.feeling-response {
  margin-top: var(--sp5); display: grid; gap: var(--sp3);
  padding: clamp(1.3rem, 3vw, 2.2rem); border: 1px solid var(--rule);
  border-left: 3px solid var(--feel, var(--rule));
  background: var(--surface); min-height: 132px;
  transition: border-color 420ms var(--ease);
}
.feeling-response .r-title { font-family: var(--display); font-size: var(--s2); }
.feeling-response .r-body { color: var(--soft); max-width: 58ch; }
.feeling-response .r-ask { font-family: var(--hand); font-size: 1.5rem; color: var(--feel, var(--accent)); }
.feeling-response .r-idle { color: var(--faint); font-size: var(--s--1); }

/* --------------------------------------------------------------------------
   PICK A THOUGHT: drifting bubbles
   -------------------------------------------------------------------------- */
.thoughts-field {
  position: relative; display: flex; flex-wrap: wrap; gap: .7rem;
  justify-content: center; align-items: center; padding-block: var(--sp3);
}
.thought {
  font-family: var(--body); font-size: var(--s0); line-height: 1.35;
  padding: .75rem 1.2rem; cursor: pointer; color: var(--type);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 22px 20px 24px 18px;
  max-width: 20rem; text-align: left;
  transition: background-color 280ms var(--ease), border-color 280ms var(--ease),
              transform 280ms var(--ease), box-shadow 280ms var(--ease);
}
/* Scattered by hand rather than animated. A button that never stops moving is
   hard to hit and falls foul of WCAG 2.2.2 (pause, stop, hide). */
.thought:nth-child(1) { transform: translateY(-10px) rotate(-1.4deg); }
.thought:nth-child(2) { transform: translateY(6px) rotate(.9deg); }
.thought:nth-child(3) { transform: translateY(-4px) rotate(1.6deg); }
.thought:nth-child(4) { transform: translateY(11px) rotate(-.8deg); }
.thought:nth-child(5) { transform: translateY(-8px) rotate(1.1deg); }
.thought:nth-child(6) { transform: translateY(3px) rotate(-1.7deg); }
.thought:nth-child(7) { transform: translateY(-12px) rotate(.6deg); }
.thought:nth-child(8) { transform: translateY(8px) rotate(-1.1deg); }
.thought:hover, .thought:focus-visible {
  background: color-mix(in srgb, var(--accent-dec) 18%, transparent);
  border-color: var(--accent-dec);
  transform: translateY(-3px) rotate(0deg);
  box-shadow: 4px 5px 0 -2px color-mix(in srgb, var(--ink) 8%, transparent);
}
.thought.is-open {
  background: color-mix(in srgb, var(--accent-dec) 28%, transparent);
  border-color: var(--accent); transform: translateY(-2px) rotate(0deg);
}

.thought-answer {
  margin-top: var(--sp5); padding: clamp(1.3rem, 3vw, 2.2rem);
  border: 1px solid var(--rule); background: var(--surface);
  display: grid; gap: var(--sp3); min-height: 140px;
}
.thought-answer .t-said { font-family: var(--display); font-size: var(--s2); line-height: 1.2; max-width: 26ch; }
.thought-answer .t-body { color: var(--soft); max-width: 58ch; }
.thought-answer .t-body p + p { margin-top: var(--sp3); }

/* --------------------------------------------------------------------------
   THE EXPERIENCE: ten questions
   -------------------------------------------------------------------------- */
.experience {
  position: relative; border: 1px solid var(--rule); background: var(--surface);
  padding: clamp(1.5rem, 4vw, 2.8rem);
  box-shadow: 7px 8px 0 -3px color-mix(in srgb, var(--ink) 8%, transparent);
  min-height: 460px; max-width: 760px; display: flex; flex-direction: column;
  transition: background-color var(--world-fade) var(--ease), border-color var(--world-fade) var(--ease);
}
.xp-progress { display: flex; align-items: center; gap: .7rem; font-size: var(--s--2); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: var(--sp4); flex-wrap: wrap; }
.xp-dots { display: flex; gap: .3rem; }
.xp-dot { width: .46rem; height: .46rem; border-radius: 50%; border: 1px solid var(--rule); background: transparent; transition: background-color 400ms var(--ease), border-color 400ms var(--ease); }
.xp-dot.is-done { background: var(--accent-dec); border-color: var(--accent-dec); }
.xp-dot.is-now { border-color: var(--accent); border-width: 2px; }
.xp-q { font-family: var(--display); font-size: var(--s3); line-height: 1.14; margin-bottom: var(--sp4); max-width: 24ch; }
.xp-options { display: grid; gap: .65rem; }
.xp-option {
  display: grid; grid-template-columns: auto minmax(0,1fr); gap: .9rem; align-items: center;
  text-align: left; font-family: var(--body); font-size: var(--s0); color: var(--type);
  background: transparent; border: 1px solid var(--rule); border-radius: 14px 10px 15px 9px;
  padding: .85rem 1.1rem; cursor: pointer;
  transition: background-color 300ms var(--ease), border-color 300ms var(--ease), transform 200ms var(--ease);
}
.xp-option:hover, .xp-option:focus-visible { border-color: var(--accent-dec); background: color-mix(in srgb, var(--accent-dec) 14%, transparent); transform: translateX(3px); }
.xp-option .pip { width: .85rem; height: .85rem; border-radius: 50%; border: 1.5px solid var(--rule); flex: none; transition: background-color 300ms var(--ease), border-color 300ms var(--ease); }
.xp-option:hover .pip { background: var(--accent-dec); border-color: var(--accent-dec); }
.xp-foot { margin-top: auto; padding-top: var(--sp4); display: flex; justify-content: space-between; align-items: center; gap: var(--sp3); flex-wrap: wrap; }

.xp-result { display: grid; gap: var(--sp3); }
.xp-word { font-family: var(--display); font-size: var(--s4); line-height: 1.05; color: var(--accent); }
.xp-block { border-top: 1px solid var(--rule); padding-top: var(--sp3); margin-top: var(--sp2); display: grid; gap: .5rem; }
.xp-block h4 { font-family: var(--body); font-size: var(--s--2); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.xp-block p { color: var(--soft); }
.xp-block .hand { font-size: 1.45rem; }

/* --------------------------------------------------------------------------
   NATURE AS A FRIEND
   -------------------------------------------------------------------------- */
.elements { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(118px, 100%), 1fr)); gap: .8rem; }
.element {
  display: grid; justify-items: center; gap: .5rem; padding: var(--sp4) .5rem var(--sp3);
  background: transparent; border: 1px solid var(--rule); cursor: pointer;
  font-family: var(--body); font-size: var(--s--1); color: var(--type);
  transition: background-color 340ms var(--ease), border-color 340ms var(--ease), transform 260ms var(--ease);
}
.element .dd { width: 2.8rem; height: 2.8rem; transition: transform 340ms var(--ease); }
.element:hover, .element:focus-visible { background: color-mix(in srgb, var(--accent-dec) 18%, transparent); border-color: var(--accent-dec); transform: translateY(-4px); }
.element:hover .dd { transform: scale(1.12) rotate(2deg); }
.element.is-chosen { background: color-mix(in srgb, var(--accent-dec) 28%, transparent); border-color: var(--accent); }
.element-answer {
  margin-top: var(--sp3); padding: clamp(1.4rem, 3.4vw, 2.6rem); border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--accent-dec) 8%, transparent);
  display: grid; gap: var(--sp2); min-height: 150px;
  max-width: 760px; margin-inline: auto; text-align: center; justify-items: center;
}
.element-answer .e-kicker {
  font-size: var(--s--2); text-transform: uppercase; letter-spacing: .2em;
  font-weight: 600; color: var(--accent);
}
/* The affirmation is the thing people came for, so it is the largest thing
   in the panel and it is written in the hand rather than the display face. */
.element-answer .e-affirm {
  font-family: var(--hand); font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.6rem);
  line-height: 1.22; color: var(--type); max-width: 24ch; margin-bottom: var(--sp2);
}
.element-answer .e-line {
  font-family: var(--display); font-size: var(--s2); line-height: 1.2; max-width: 30ch;
}
/* the affirmation is centred because it is a single line to hold onto; the
   paragraph under it is not, because centred paragraphs are hard to read */
.element-answer .e-body { color: var(--soft); max-width: 58ch; text-align: left; }
.element-answer.is-open { border-color: var(--accent-dec); }

/* --------------------------------------------------------------------------
   NEED A MINUTE: breathing circle + 3·2·1
   -------------------------------------------------------------------------- */
.reset-stage { display: grid; justify-items: center; gap: var(--sp4); text-align: center; min-height: 380px; align-content: center; }
.breath { position: relative; width: 230px; height: 230px; display: grid; place-items: center; }
.breath__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--accent-dec);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-dec) 24%, transparent), transparent 70%);
  /* driven from JS, so the size and the words can never disagree */
  transform: scale(var(--b, .55));
}
.breath__ring:nth-child(2) { opacity: .55; transform: scale(calc(var(--b, .55) * .86)); }
.breath__ring:nth-child(3) { opacity: .32; transform: scale(calc(var(--b, .55) * .72)); }
.breath__mid { position: relative; display: grid; gap: .2rem; justify-items: center; }
.breath__word { font-family: var(--display); font-size: var(--s2); color: var(--type); line-height: 1; }
.breath__num {
  font-family: var(--display); font-size: var(--s4); color: var(--accent);
  line-height: 1; font-variant-numeric: tabular-nums;
}
.breath__of { font-size: var(--s--1); color: var(--faint); letter-spacing: .1em; text-transform: uppercase; }

.howto {
  display: grid; gap: .5rem; justify-items: center; max-width: 34ch;
  padding: var(--sp3); border: 1px dashed var(--rule); border-radius: 3px;
}
.howto__title { font-size: var(--s--1); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.howto ol { margin: 0; padding-left: 1.2rem; text-align: left; display: grid; gap: .3rem; }
.howto li { color: var(--soft); font-size: var(--s--1); }

@media (prefers-reduced-motion: reduce) {
  .breath__ring, .breath__ring:nth-child(2), .breath__ring:nth-child(3) { transform: scale(.85); }
}

.reset-step { font-family: var(--display); font-size: var(--s3); line-height: 1.18; max-width: 20ch; }
.reset-sub { color: var(--soft); max-width: 44ch; }
.reset-choices { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* --------------------------------------------------------------------------
   A QUESTION FOR YOU
   -------------------------------------------------------------------------- */
.prompt-card {
  border: 1px solid var(--rule); padding: clamp(1.6rem, 4vw, 3rem);
  display: grid; gap: var(--sp4); background: var(--surface); min-height: 260px;
  align-content: center; justify-items: start;
}
.prompt-q { font-family: var(--display); font-size: var(--s4); line-height: 1.16; max-width: 20ch; }
.prompt-space {
  width: 100%; min-height: 120px; font-family: var(--hand); font-size: 1.5rem;
  line-height: 1.5; color: var(--type); background: transparent;
  border: 0; border-bottom: 1px dashed var(--rule); padding: .5rem 0; resize: vertical;
  background-image: repeating-linear-gradient(transparent, transparent 35px, var(--rule) 35px, var(--rule) 36px);
}
.prompt-space:focus { outline-offset: 6px; }

/* --------------------------------------------------------------------------
   THE GROWING PLANT: footer corner
   -------------------------------------------------------------------------- */
.plant { display: flex; align-items: flex-end; gap: .9rem; }
.plant__pot { width: 3.4rem; height: 4.2rem; position: relative; }
.plant__pot .dd { width: 100%; height: 100%; color: var(--leaf); }
.plant__label { font-size: var(--s--2); color: #8FA694; line-height: 1.35; max-width: 22ch; }
.plant__label b { display: block; color: var(--gold); font-family: var(--hand); font-size: 1.15rem; font-weight: 400; }

/* --------------------------------------------------------------------------
   HIDDEN MARKS: small found things
   -------------------------------------------------------------------------- */
.find {
  background: transparent; border: 0; padding: .2rem; cursor: pointer; line-height: 0;
  opacity: .5; transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.find .dd { width: 1.9rem; height: 1.9rem; }
.find:hover, .find:focus-visible { opacity: 1; transform: scale(1.16) rotate(-4deg); }
.find.is-found .dd { color: var(--gold); }
/* Gold on a light ground measured 1.28:1, which is invisible. The reward for
   finding the hidden thing should be readable. --amber-ink is the same hue
   with enough depth to pass on paper. */
.found-note {
  font-family: var(--hand); font-size: 1.3rem; color: var(--amber-ink);
  opacity: 0; transform: translateY(6px); transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.found-note.is-shown { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   THE UNIVERSE MOMENT: final scene
   -------------------------------------------------------------------------- */
.universe { position: relative; overflow: hidden; text-align: center; }
.universe__scene { max-width: 620px; margin-inline: auto; opacity: .92; }
.universe__scene .psy-tree { color: var(--leaf); }
.universe__line { font-family: var(--display); font-size: var(--s4); line-height: 1.16; max-width: 20ch; margin-inline: auto; }
.universe__line--2 { font-family: var(--hand); font-size: 1.9rem; color: var(--gold); max-width: 26ch; }
.starfield { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.starfield i {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: var(--gold); opacity: .5;
  animation: twinkle 5s ease-in-out infinite;
}
@keyframes twinkle { 0%,100% { opacity: .22; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .starfield i { animation: none; } }

/* --------------------------------------------------------------------------
   CLICKABLE STARS: ten of them hold a line. The rest are just sky.
   -------------------------------------------------------------------------- */
.starfield { pointer-events: none; }
.star-live {
  position: absolute; pointer-events: auto; appearance: none; cursor: pointer;
  width: 30px; height: 30px; padding: 0; margin: -15px 0 0 -15px;
  background: none; border: 0; border-radius: 50%; color: var(--gold);
  display: grid; place-items: center;
}
.star-live:before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 9px 2px color-mix(in srgb, var(--gold) 55%, transparent);
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
  animation: twinkle 4.4s ease-in-out infinite;
}
.star-live:hover:before, .star-live:focus-visible:before {
  transform: scale(2.1);
  box-shadow: 0 0 18px 6px color-mix(in srgb, var(--gold) 70%, transparent);
}
.star-live:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.star-live[aria-pressed="true"]:before { background: var(--leaf); color: var(--leaf); animation: none; transform: scale(1.5); }
@media (prefers-reduced-motion: reduce) { .star-live:before { animation: none; } }

.star-say {
  max-width: 44ch; margin: var(--sp4) auto 0; min-height: 5.5rem;
  display: grid; place-items: center; text-align: center;
}
.star-say p {
  font-family: var(--hand); font-size: 1.55rem; line-height: 1.34; color: var(--type);
  opacity: 0; transform: translateY(8px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.star-say p.is-in { opacity: 1; transform: none; }
.star-hint { font-size: var(--s--1); color: var(--faint); letter-spacing: .1em; text-transform: uppercase; }
.star-count { font-variant-numeric: tabular-nums; }

/* The tree and the two big lines are decoration. They must not swallow a
   click meant for a star sitting behind them. */
.star-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.star-layer .star-live { pointer-events: auto; }

/* --------------------------------------------------------------------------
   THE LANDSCAPE: six things to notice, all in one scene
   -------------------------------------------------------------------------- */
.scene { max-width: 960px; margin: var(--sp5) auto var(--sp4); color: var(--type); }
.landscape { width: 100%; height: auto; display: block; }
.nel { cursor: pointer; opacity: .88; transition: opacity 500ms var(--ease); outline: none; }
.nel:hover, .nel:focus-visible { opacity: 1; }
.nel:focus-visible path { stroke: var(--accent); }
.nel.is-chosen { opacity: 1; }
.nel.is-chosen path { stroke: var(--accent); stroke-width: 3.6; }
.scene.has-pick .nel:not(.is-chosen) { opacity: .4; }
@media (prefers-reduced-motion: reduce) { .nel { transition: none; } }

/* --------------------------------------------------------------------------
   MAKING THE TREE OBVIOUSLY PRESSABLE
   People were missing the hotspots entirely, so they now say so, pulse
   gently until one has been opened, and keep their label on small screens.
   -------------------------------------------------------------------------- */
.tree-cue {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  font-size: var(--s--1); color: var(--type); opacity: .82; text-align: center;
}
.tree-cue__dot {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  border: 1.5px dashed var(--accent);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 70%);
}
.spot i { position: relative; }
.spot i::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--gold); opacity: 0;
  animation: spot-pulse 2.6s ease-out infinite;
}
.spot:nth-of-type(2) i::after { animation-delay: .35s; }
.spot:nth-of-type(3) i::after { animation-delay: .7s; }
.spot:nth-of-type(4) i::after { animation-delay: 1.05s; }
.spot:nth-of-type(5) i::after { animation-delay: 1.4s; }
.spot:nth-of-type(6) i::after { animation-delay: 1.75s; }
@keyframes spot-pulse {
  0%   { transform: scale(.82); opacity: 0; }
  28%  { opacity: .75; }
  100% { transform: scale(1.5); opacity: 0; }
}
/* once somebody has opened one, they have understood. Stop nagging. */
.tree-stage.is-used .spot i::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .spot i::after { animation: none; opacity: .5; } }
@media (max-width: 780px) {
  .spot span { display: inline; font-size: 9px; letter-spacing: .08em; }
  .spot i { width: 1.7rem; height: 1.7rem; }
}