/* Find the quiet: immersive scenes for the four Mind reflections.
   Same world as /quiet/ (Passing traffic): full screen, dark sky, breathing mark,
   breath cue bottom left, state bottom right. Each scene reveals its photo as you settle. */
:root { --mist:#ECEFEA; --ember:#E8572A; --dawn:#F2C14E; --lough:#2F6F6A; --lough-light:#8FC1BB; --bg:#05080b; --reveal:0; --blur:6px; --mark-y:42%; --mark-size:min(24vw, 20vh, 190px); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--mist); overflow: hidden; font-family: "Bricolage Grotesque", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body { touch-action: none; }
button { font: inherit; }
.viewport { position: fixed; inset: 0; overflow: hidden; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* the photo: dark, tinted and soft at first; clear and in colour once you settle */
.photo-bg { position: absolute; inset: -4%; background-position: var(--photo-pos, center); background-size: cover; background-repeat: no-repeat;
  filter: grayscale(calc(1 - var(--reveal))) brightness(calc(.26 + var(--reveal) * .62)) blur(calc(var(--blur) * (1 - var(--reveal)))) contrast(1.05);
  transform: translate3d(var(--px,0), var(--py,0), 0) scale(1.03); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.tint { position: absolute; inset: 0; pointer-events: none; background: var(--tint, radial-gradient(120% 90% at 50% 40%, rgba(20,60,70,.35), rgba(5,8,11,.85) 75%)); opacity: calc(1 - var(--reveal) * .55); mix-blend-mode: multiply; }
.shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(5,8,11,.55), transparent 22%, transparent 55%, rgba(5,8,11,.82)); }
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* the mark */
.mark { position: absolute; left: 50%; top: var(--mark-y); width: var(--mark-size); aspect-ratio: 1; pointer-events: none;
  transform: translate(-50%, -50%) translate3d(var(--mx,0), var(--my,0), 0); transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.mark-inner { width: 100%; height: 100%; transform: translateY(var(--sink, 0px)) scale(var(--breath, 1), calc(var(--breath, 1) * var(--squash, 1))); transform-origin: 50% 70%; }
.mark svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 10px rgba(200,235,240,var(--glow-a,.5))) drop-shadow(0 0 40px rgba(120,190,220,var(--glow-b,.3))); }
.mark .loop { stroke-dasharray: 300; stroke-dashoffset: 300; animation: draw 3.2s cubic-bezier(.65,0,.35,1) .3s forwards; }
.mark .dot { opacity: 0; animation: dotin 1s ease 3s forwards; transform-origin: 85.1px 35.4px; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes dotin { from { opacity: 0; transform: scale(.2); } to { opacity: var(--dot-o, 1); transform: scale(1); } }

/* chrome, matching /quiet/ */
.top { position: absolute; top: 0; left: 0; right: 0; padding: max(14px, 2.6vh) max(16px, 4vw); gap: 12px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; z-index: 5; }
.top a { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--mist); text-decoration: none; font-weight: 800; letter-spacing: -.02em; font-size: clamp(14px, 1.3vw, 18px); min-height: 44px; }
.brand svg { width: 28px; height: 28px; }
.btn { appearance: none; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mist);
  background: rgba(10,18,24,.5); border: 1px solid rgba(236,239,234,.25); padding: 10px 16px; border-radius: 999px; cursor: pointer; min-height: 44px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.btn:hover { border-color: var(--ember); color: var(--mist); }
.btn:focus-visible, .hit:focus-visible, .stone:focus-visible, .metric:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.btn.solid { background: var(--ember); border-color: var(--ember); color: #16201C; }

.ui { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 max(16px, 4vw) max(20px, 3.2vh); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; pointer-events: none; z-index: 4; }
.cue { white-space: nowrap; font-family: "JetBrains Mono", monospace; font-size: clamp(10px, 1vw, 13px); letter-spacing: .14em; text-transform: uppercase; color: var(--lough-light); display: grid; }
.cue span { grid-area: 1/1; transition: opacity .7s; }
.state { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; transition: opacity .45s; }
.state .big { font-weight: 800; letter-spacing: -.03em; font-size: clamp(26px, 3.6vw, 56px); line-height: 1; transition: color 1.2s; }
.state .small { font-size: clamp(13px, 1.15vw, 16px); color: rgba(236,239,234,.78); max-width: 34ch; line-height: 1.35; }
.state.fade { opacity: 0; }

.intro { position: absolute; left: 50%; top: var(--intro-y, 74%); transform: translate(-50%,-50%); width: min(90vw, 560px); text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; transition: opacity 1.4s; pointer-events: none; z-index: 3; text-shadow: 0 1px 10px #000; }
.intro p { margin: 0; font-family: "JetBrains Mono", monospace; font-size: clamp(11px, 1.1vw, 14px); letter-spacing: .14em; text-transform: uppercase; color: var(--lough-light); line-height: 1.6; }
.intro p + p { color: rgba(236,239,234,.62); }
.intro .kicker { color: var(--dawn); }
.hidden { opacity: 0 !important; pointer-events: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the ending: same for every scene */
.closing { position: absolute; left: 50%; bottom: max(28px, 5vh); transform: translateX(-50%); width: min(92vw, 640px); text-align: center; z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 22px; opacity: 0; pointer-events: none; transition: opacity 2s; }
.closing.on { opacity: 1; pointer-events: auto; }
.closing .label { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--dawn); }
.closing .question { margin: 0; font-weight: 600; font-size: clamp(24px, 3.4vw, 42px); line-height: 1.12; letter-spacing: -.02em; text-shadow: 0 2px 24px rgba(0,0,0,.7); }
.closing .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ending .ui .cue { opacity: .4; }
.closing .seal { width: 46px; height: 46px; overflow: visible; }
.closing .seal .loop2 { stroke-dasharray: 300; stroke-dashoffset: 300; }
.closing.on .seal .loop2 { animation: draw 3s cubic-bezier(.65,0,.35,1) .2s forwards; }
.closing .seal circle { opacity: 0; transform-origin: 85.1px 35.4px; }
.closing.on .seal circle { animation: dotin 1s ease 3s forwards; }
.ending .mark, .ending .grip-word, .ending .soft-word, .ending .hud, .ending .stone, .ending .hit, .ending .state { opacity: 0 !important; pointer-events: none; transition: opacity 1.8s; }
.ending .shade { background: linear-gradient(to bottom, rgba(5,8,11,.5), transparent 20%, transparent 50%, rgba(5,8,11,.9)); }
.mark { transition: transform 1.4s cubic-bezier(.2,.7,.2,1), opacity 1.8s; }
@media (prefers-reduced-motion: reduce) { .closing.on .seal .loop2 { animation: none; stroke-dashoffset: 0; } .closing.on .seal circle { animation: none; opacity: 1; } }

/* invisible hit area over the mark (keyboard + touch) */
.hit { position: absolute; left: 50%; top: var(--mark-y); width: calc(var(--mark-size) * 1.5); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: transparent; border: 0; cursor: pointer; z-index: 3; color: transparent; }

/* ---- effort ---- */
.grip-word { position: absolute; transform: translate(-50%, -50%); font-family: "JetBrains Mono", monospace; font-size: clamp(13px, 1.4vw, 19px); letter-spacing: .18em; text-transform: uppercase; color: #ff8a5c; text-shadow: 0 0 14px rgba(232,87,42,.7); pointer-events: none; transition: opacity 1.6s, filter 1.6s; z-index: 2; white-space: nowrap; }
.grip-word.gone { opacity: 0; filter: blur(10px); }
.soft-word { position: absolute; left: 50%; top: calc(var(--mark-y) + 17vh); transform: translate(-50%, -50%); font-family: "JetBrains Mono", monospace; font-size: clamp(13px, 1.4vw, 18px); letter-spacing: .18em; text-transform: uppercase; color: var(--dawn); opacity: 0; transition: opacity 2s; pointer-events: none; z-index: 2; white-space: nowrap; text-shadow: 0 0 16px rgba(0,0,0,.8); }
.soft-word.on { opacity: 1; }
.effort .hit { cursor: grab; }

/* ---- recovery ---- */
.stone { position: absolute; left: 50%; transform: translate(-50%, 0) rotate(var(--rot, 0deg)); height: 46px; padding: 0 22px; border-radius: 16px; z-index: 3;
  font-family: "JetBrains Mono", monospace; font-size: clamp(12px, 1.1vw, 15px); letter-spacing: .1em; text-transform: uppercase; color: rgba(236,239,234,.92);
  background: linear-gradient(180deg, rgba(60,72,74,.78), rgba(22,30,32,.86)); border: 1px solid rgba(143,193,187,.28); box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center; white-space: nowrap; cursor: default; touch-action: none; transition: border-color .4s, box-shadow .4s; }
.stone.is-top { cursor: grab; border-color: rgba(232,87,42,.85); box-shadow: 0 10px 24px rgba(0,0,0,.45), 0 0 0 4px rgba(232,87,42,.12), inset 0 1px 0 rgba(255,255,255,.1); }
.stone.dragging { cursor: grabbing; transition: none; }
.stone.lifted { pointer-events: none; }

/* ---- movement ---- */
.hud { position: absolute; left: 50%; top: max(84px, 13vh); transform: translateX(-50%); display: flex; gap: clamp(8px, 2vw, 28px); z-index: 3; }
.metric { appearance: none; background: rgba(5,8,11,.55); border: 1px solid rgba(232,87,42,.5); border-radius: 14px; padding: 10px clamp(10px, 1.6vw, 20px) 12px; color: var(--mist); cursor: pointer; min-width: clamp(92px, 12vw, 160px);
  display: flex; flex-direction: column; align-items: center; gap: 4px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity 1.6s, filter 1.6s, transform 1.6s, border-color .3s; }
.metric:hover { border-color: var(--ember); }
.metric .k { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(236,239,234,.6); }
.metric .v { font-family: "JetBrains Mono", monospace; font-weight: 500; font-size: clamp(17px, 2.2vw, 30px); letter-spacing: .02em; color: #ff8a5c; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(232,87,42,.45); }
.metric .x { font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(236,239,234,.4); }
.metric.off { opacity: 0; filter: blur(8px); transform: translateY(-12px) scale(.94); pointer-events: none; }

@media (max-width: 600px) {
  .brand span { display: none; }
  .btn { padding: 10px 12px; font-size: 11px; }
  .state .small { max-width: 24ch; }
  .metric { min-width: 0; padding: 8px 10px 10px; }
  .metric .x { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mark .loop { animation: none; stroke-dashoffset: 0; }
  .mark .dot { animation: none; opacity: 1; }
  .photo-bg, .mark { transition: none; }
}