/* Kayıp Eşya — Soru's lost and found (js/tasks/kayip.js).
   Three fog lanes at three depths: the far shelf (o) small and blurred at the
   top, şu in the middle, bu big and close at the bottom. Depth is the lesson,
   so depth is the styling: size, blur and speed all fall out of the lane. */

.ky-court {
  /* The width lives in a custom property so the crossing keyframes below can
     travel exactly one court, whatever the screen. Narrow enough that the
     love meter (fixed at the screen's right edge) stands OUTSIDE the box:
     the meter is the judge, not a guest in the closet (Ahmet, 2026-08-02). */
  --ky-w: min(44em, 84vw);
  position: relative;
  width: var(--ky-w);
  height: min(52vh, 30em);
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(79, 182, 166, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(11, 10, 31, 0.35), rgba(26, 18, 48, 0.55));
  border: 1px solid rgba(154, 147, 184, 0.16);
}

/* The borders between the kingdoms: two faint dashed lines where bu's land
   ends and şu's begins, and where şu's ends and o's begins. The lanes are
   the lesson, so the map gets drawn (Ahmet, 2026-08-02). */
.ky-court::before,
.ky-court::after,
.depths::before,
.depths::after {
  content: '';
  position: absolute;
  left: 4%;
  right: 4%;
  height: 1px;
  background: repeating-linear-gradient(90deg,
    rgba(232, 193, 106, 0.32) 0 10px, transparent 10px 20px);
  pointer-events: none;
  z-index: 1;
}
.ky-court::before, .depths::before { top: 32%; }
.ky-court::after,  .depths::after  { top: 64%; }

/* Phones: the gutter must hold the meter with air to spare, not by six
   pixels. The closet narrows; the judge keeps its bench. */
@media (max-width: 480px) {
  .ky-court, .depths { --ky-w: 78vw; }
}

.ky-lane {
  position: absolute;
  left: 0; right: 0;
  overflow: hidden;
}
/* Fog thickens with distance. */
.ky-lane.far  { top: 4%;  height: 26%; background: linear-gradient(180deg, transparent, rgba(243, 234, 216, 0.055), transparent); }
.ky-lane.mid  { top: 34%; height: 28%; background: linear-gradient(180deg, transparent, rgba(243, 234, 216, 0.035), transparent); }
.ky-lane.near { top: 66%; height: 30%; background: linear-gradient(180deg, transparent, rgba(243, 234, 216, 0.02), transparent); }

/* Each lane wears its own word, faint, at the left edge: the map is the
   furniture here, because the map IS the lesson. */
.ky-lane-word {
  position: absolute;
  left: 0.7em;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  color: var(--gold);
  opacity: 0.4;
  pointer-events: none;
}
.ky-lane.far  .ky-lane-word { font-size: 0.85rem; }
.ky-lane.mid  .ky-lane-word { font-size: 1.05rem; }
.ky-lane.near .ky-lane-word { font-size: 1.3rem; }

/* The drifters: foggy, sized by distance, crossing their lane. */
.ky-drift {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  line-height: 1;
  will-change: transform;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
.ky-lane.far  .ky-drift { font-size: 1.5rem; filter: blur(2.2px) saturate(0.7); opacity: 0.78; }
.ky-lane.mid  .ky-drift { font-size: 2.1rem; filter: blur(1.2px) saturate(0.8); opacity: 0.88; }
.ky-lane.near .ky-drift { font-size: 2.9rem; filter: blur(0.5px); opacity: 0.96; }
.ky-drift.ltr { animation: ky-cross-ltr linear forwards; }
.ky-drift.rtl { animation: ky-cross-rtl linear forwards; }
@keyframes ky-cross-ltr {
  from { transform: translate(-2.2em, -50%); }
  to   { transform: translate(calc(var(--ky-w, 90vw) + 1em), -50%); }
}
@keyframes ky-cross-rtl {
  from { transform: translate(calc(var(--ky-w, 90vw) + 1em), -50%); }
  to   { transform: translate(-2.2em, -50%); }
}
.ky-drift.pinned { animation: none; }

/* Found: the emoji pops off... */
.ky-drift.popped { animation: ky-pop 0.55s ease-out forwards; filter: none; }
@keyframes ky-pop {
  0%   { transform: translateY(-50%) scale(1); opacity: 1; }
  45%  { transform: translateY(-58%) scale(1.35); opacity: 1; }
  100% { transform: translateY(-70%) scale(0.2); opacity: 0; }
}

/* ...and the word takes its place and falls to the ground. */
.ky-word {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  color: var(--gold);
  font-size: 1.2rem;
  text-shadow: 0 0 16px rgba(232, 193, 106, 0.5);
  pointer-events: none;
  animation: ky-fall 1.1s cubic-bezier(0.3, 0, 0.7, 1) forwards;
  z-index: 3;
}
@keyframes ky-fall {
  0%   { translate: 0 0; opacity: 0; scale: 0.7; }
  18%  { opacity: 1; scale: 1.15; }
  35%  { translate: 0 0; scale: 1; }
  100% { translate: 0 var(--fall, 120px); scale: 0.9; opacity: 1; }
}

/* The pile of found things along the ground line. */
.ky-ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  min-height: 1.8em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 0.2em 0.8em;
  padding: 0.2em 0.8em;
  border-top: 1px solid rgba(232, 193, 106, 0.18);
  background: linear-gradient(180deg, transparent, rgba(232, 193, 106, 0.05));
  z-index: 2;
}
.ky-found {
  font-family: var(--serif);
  font-size: 0.85rem;
  color: var(--gold);
  opacity: 0;
  animation: ky-found-in 0.5s ease forwards;
}
@keyframes ky-found-in { to { opacity: 0.85; } }

/* The six questions: two rows of three, distance running left to right. */
.ky-pills {
  display: grid;
  grid-template-columns: repeat(3, minmax(6.2em, auto));
  gap: 0.45em 0.55em;
  justify-content: center;
  margin-top: 1em;
}
.ky-pill { opacity: 1; transform: none; animation: none; }
/* A question used right once is a question you own now. */
.ky-pill.owned { border-color: rgba(232, 193, 106, 0.7); }

/* The break: shards of the glyph fly apart (ask.js's seams, kayıp's colors). */
.ky-shard {
  position: fixed;
  z-index: 6;
  pointer-events: none;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  line-height: 1;
  transform: translate(-50%, -50%);
  animation: ky-shard-fly 0.8s ease-out forwards;
}
@keyframes ky-shard-fly {
  0% { opacity: 1; transform: translate(-50%, -50%); }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--sx, 0px)), calc(-50% + var(--sy, 70px))) rotate(var(--sr, 40deg)) scale(0.75);
  }
}

/* ---------- the depths demo (engine beat, b.depths) ----------
   The same three lanes as scenery: the family at work before the game asks
   anything. One sample drifter loops in each lane forever. */
.depths {
  --ky-w: min(40em, 84vw);
  position: relative;
  width: var(--ky-w);
  height: min(34vh, 19em);
  margin: 1.2em auto 0;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(11, 10, 31, 0.3), rgba(26, 18, 48, 0.5));
  border: 1px solid rgba(154, 147, 184, 0.14);
}
.depths .ky-lane-word { opacity: 0.75; }
.depths .ky-drift.ltr { animation: ky-demo-ltr linear infinite; }
.depths .ky-drift.rtl { animation: ky-demo-rtl linear infinite; }
@keyframes ky-demo-ltr {
  from { transform: translate(-2.2em, -50%); }
  to   { transform: translate(calc(var(--ky-w, 84vw) + 1em), -50%); }
}
@keyframes ky-demo-rtl {
  from { transform: translate(calc(var(--ky-w, 84vw) + 1em), -50%); }
  to   { transform: translate(-2.2em, -50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ky-drift.ltr, .ky-drift.rtl { animation-duration: 30s !important; }
  .depths .ky-drift { animation: none; left: 40%; }
  .ky-word { animation-duration: 0.2s; }
}