/* The basket: catch the troubles, let the good things land (js/tasks/sepet.js).
   Shared task classes (.task-note) live in base.css. The palette is Yok
   Gezegeni's own washed rose-grey (#C98CA8) for everything that goes wrong,
   and the house gold for everything that goes right, so the two readings never
   need a word between them. */

/* The sky. Fixed and behind the chrome, and deaf: the basket is steered from
   window events, so nothing here needs to take a pointer and the map orb, the
   scanner and the menu all stay reachable through it. */
.sepet-court {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

/* ---------- the basket ---------- */

.sepet-basket {
  position: absolute;
  bottom: 11vh;
  left: 50%;
  width: 7.4em;
  height: 3.4em;
  z-index: 2; /* a thing that gets past it falls BEHIND it, which is the picture */
  transform: translateX(-50%);
  /* A basket, not a box: the mouth is wider than the floor. */
  clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%);
  border: 2px solid rgba(232, 193, 106, 0.65);
  background: linear-gradient(rgba(232, 193, 106, 0.14), rgba(232, 193, 106, 0.04));
  display: flex;
  align-items: center;
  justify-content: center;
  /* No transition on `left`. The basket is the hand: wherever the pointer is,
     it is already underneath, with nothing easing in behind it (Ahmet,
     2026-07-30). A basket with weight is a basket that misses. */
}
/* The weave, so it reads as a basket at a glance and not a bucket. */
.sepet-basket::after {
  content: "";
  position: absolute;
  inset: 0.9em 0.3em 0.3em;
  border-top: 1px solid rgba(232, 193, 106, 0.22);
  border-bottom: 1px solid rgba(232, 193, 106, 0.16);
}
/* The catching line, drawn where the catching actually happens. */
.sepet-mouth {
  position: absolute;
  left: 0.2em; right: 0.2em;
  top: 0;
  height: 0;
  border-top: 2px dashed rgba(232, 193, 106, 0.5);
}
.sepet-label {
  position: relative;
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--gold);
  text-shadow: 0 0 16px rgba(232, 193, 106, 0.5);
  letter-spacing: 0.04em;
  transform: translateY(0.15em);
}
/* Something went in. */
.sepet-basket.take { animation: sepet-take 0.42s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes sepet-take {
  0%   { transform: translateX(-50%) scaleY(1); }
  35%  { transform: translateX(-50%) translateY(0.22em) scaleY(0.86); }
  100% { transform: translateX(-50%) scaleY(1); }
}

/* ---------- what falls ---------- */

.sepet-chip {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
  transform: translate(-50%, -110%);
  will-change: transform;
}
.sepet-face {
  font-size: 1.9rem;
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(232, 193, 106, 0.3));
}
.sepet-word {
  font-family: var(--serif);
  font-size: clamp(0.9rem, 2.6vw, 1.1rem);
  color: var(--cream);
  white-space: nowrap;
}
.sepet-chip.bad .sepet-word { color: #E4B7C6; }
.sepet-chip.bad .sepet-face { filter: drop-shadow(0 0 12px rgba(201, 140, 168, 0.45)); }
.sepet-chip.good .sepet-word { color: var(--gold); }

.sepet-chip.fall { animation: sepet-fall var(--dur, 4400ms) linear forwards; }
@keyframes sepet-fall {
  from { transform: translate(-50%, -110%); }
  to   { transform: translate(-50%, var(--drop, 80vh)); }
}

/* Stopped where the fall had actually got to. Every ending below is measured
   from --at, so nothing ever snaps back to the top of the sky to leave. This
   rule must come FIRST: the three endings share its specificity and win on
   source order alone. */
.sepet-chip.pinned { transform: translate(-50%, var(--at, 0px)); }

/* Caught: it shrinks into the basket and is gone. */
.sepet-chip.caught {
  opacity: 0;
  transform: translate(-50%, var(--at, 0px)) scale(0.35);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
/* Taken by mistake: it climbs back out and leaves the planet for good. */
.sepet-chip.taken {
  opacity: 0;
  transform: translate(-50%, calc(var(--at, 0px) - 7em)) scale(0.8);
  transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.3, 0, 0.6, 1);
}
/* Landed, and it should not have. It shivers where it fell, then soaks in. */
.sepet-chip.hit {
  animation: sepet-shiver 0.5s ease 3, sepet-soak 0.5s ease 1.5s forwards;
}
.sepet-chip.hit .sepet-word { color: #C98CA8; }
@keyframes sepet-shiver {
  0%, 100% { transform: translate(-50%, var(--at, 0px)); }
  25%  { transform: translate(calc(-50% - 3px), var(--at, 0px)); }
  75%  { transform: translate(calc(-50% + 3px), var(--at, 0px)); }
}
@keyframes sepet-soak { to { opacity: 0; } }

/* The görev is over. Whatever is still falling has nowhere to be. */
.sepet-court.done .sepet-chip {
  opacity: 0;
  transition: opacity 0.7s ease;
}

.sepet-thud {
  position: absolute;
  bottom: 13vh;
  width: 1.4em;
  height: 1.4em;
  margin-left: -0.7em;
  border-radius: 50%;
  border: 2px solid rgba(201, 140, 168, 0.8);
  animation: sepet-thud 0.85s ease-out forwards;
}
@keyframes sepet-thud {
  from { opacity: 0.9; transform: scale(0.2); }
  to   { opacity: 0; transform: scale(3.4); }
}

/* ---------- the sentence the basket writes ---------- */

.sepet-say {
  position: absolute;
  z-index: 3; /* over the basket it is rising out of */
  bottom: 15vh;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 3.4vw, 1.5rem);
  white-space: nowrap;
  animation: sepet-rise 2s ease-out forwards;
  text-shadow: 0 0 20px rgba(232, 193, 106, 0.4);
}
.sepet-say.sad {
  color: #C98CA8;
  text-shadow: 0 0 20px rgba(201, 140, 168, 0.4);
}
/* A sad sentence is still made of the same words, so the gold is dimmed rather
   than replaced: the learner reads Sevgi yok and sees it is the same shape. */
.sepet-say.sad .m-root { color: #D9A8BE; }
@keyframes sepet-rise {
  0%   { opacity: 0; transform: translateX(-50%) translateY(1.2em); }
  22%  { opacity: 1; transform: translateX(-50%) translateY(0); }
  70%  { opacity: 1; transform: translateX(-50%) translateY(-1.6em); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-3.4em); }
}

/* ---------- the ground, and what the gezegen got to keep ---------- */

.sepet-ground {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 13vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.5em;
  padding-bottom: 1.6vh;
  border-bottom: 1px solid rgba(216, 196, 160, 0.16);
}
.sepet-kept {
  font-size: 1.5rem;
  animation: sepet-keep 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) backwards;
  filter: drop-shadow(0 0 12px rgba(232, 193, 106, 0.5));
}
@keyframes sepet-keep {
  from { opacity: 0; transform: translateY(-1.6em) scale(0.5); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .sepet-basket { width: 6em; height: 2.9em; bottom: 13vh; }
  .sepet-label { font-size: 1.15rem; }
  .sepet-face { font-size: 1.5rem; }
  .sepet-kept { font-size: 1.2rem; }
  .sepet-ground { height: 15vh; gap: 0.35em; }
  .sepet-thud { bottom: 15vh; }
  .sepet-say { bottom: 17vh; }
}

/* Reduced motion keeps the fall, because the fall IS the game (the module
   slows it down instead). Everything decorative around it stops. */
@media (prefers-reduced-motion: reduce) {
  .sepet-basket.take { animation: none; }
  .sepet-chip.hit { animation: sepet-soak 0.3s ease 0.9s forwards; }
  .sepet-kept { animation-duration: 0.01s; }
  .sepet-thud { animation-duration: 0.3s; }
}