/* ---------- Şimdi Gezegeni: the clock-in (b.simdi) ---------- */

/* The visual grammar of the Planet of Now. One verb root at its desk with
   the dash of its written name, and -Iyor, the floor manager, standing a
   little way off with his badge. The experiencer taps him and the clock-in
   plays out, stage by stage, and the four floors are four different
   clock-ins: rolling (he walks up), looking (the verb's last vowel lights
   in its family colour), the I turning into that vowel, then one of
   (clashing, cut) / (melting, melted) / (the t turning) / nothing, then
   hooked, then settled. The stages are classes on .simdi-box driven by the
   engine's clock (js/engine.js, b.simdi), so this file only ever describes
   a state and never the order. The vowel wears its family's colour in
   --fam, the same four hexes as VOWEL_COLOR in the engine: that colouring
   is the harmony lesson. */
.simdi {
  margin-top: 1.6em;
  display: flex;
  justify-content: center;
}
.simdi-row {
  position: relative;
  display: flex;
  align-items: baseline;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4.8vw, 2.2rem);
  line-height: 1.3;
  color: var(--cream);
}
/* The root: gold because it is Turkish, letter by letter so the last one
   can shake, fall or flip, and the deciding vowel can light up on its own. */
.simdi-root {
  display: inline-flex;
  align-items: baseline;
  color: var(--gold);
}
.simdi-ch, .simdi-last { display: inline-block; }
.simdi-last {
  max-width: 1.2em;
  transition: max-width 0.45s ease, color 0.4s ease, text-shadow 0.4s ease;
}
.simdi-vowel { transition: color 0.4s ease, text-shadow 0.4s ease; }
/* The dash of the written name. It goes when -Iyor joins; no story to it. */
.simdi-dash {
  display: inline-block;
  max-width: 1em;
  color: var(--lavender);
  opacity: 0.8;
  transition: max-width 0.4s ease, opacity 0.4s ease;
}
/* -Iyor: a button that reads as a badge, not a button. Cream on a thin rim,
   a clip on top, the capital I standing in for a vowel he has not chosen
   yet. He waits a little way to the right of the desk. The cursor and a
   glow on hover are the whole affordance; the hint carries the instruction. */
.simdi-yor {
  position: relative;
  display: inline-block;
  font: inherit;
  color: var(--cream);
  background: none;
  border: 1px solid rgba(243, 234, 216, 0.35);
  border-radius: 0.3em;
  padding: 0 0.32em;
  margin-left: 0.55em;
  cursor: pointer;
  transform: translateX(2.4em);
  transition: transform 0.9s cubic-bezier(0.35, 0.6, 0.3, 1), margin-left 0.5s ease,
    border-color 0.4s ease, padding 0.5s ease;
  will-change: transform;
}
.simdi-yor::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -0.28em;
  width: 0.5em;
  height: 0.16em;
  margin-left: -0.25em;
  border-radius: 0.08em;
  background: var(--lavender);
  opacity: 0.8;
  transition: opacity 0.4s ease;
}
.simdi-yor:hover, .simdi-yor:focus-visible {
  text-shadow: 0 0 14px rgba(232, 193, 106, 0.8);
  border-color: rgba(232, 193, 106, 0.6);
}
.simdi-yor:focus-visible { outline: none; }
/* The I inside the badge: the letter that is not a letter yet. */
.simdi-slot {
  display: inline-block;
  max-width: 1.2em;
  transition: max-width 0.4s ease, opacity 0.3s ease, color 0.3s ease;
}
.simdi-slot.chosen {
  color: var(--fam, var(--gold));
  text-shadow: 0 0 14px currentColor;
}
.simdi-yortext { display: inline-block; }
/* Waiting: the manager shifts his weight. */
.simdi-box:not(.rolling) .simdi-yor { animation: simdi-idle 1.6s ease-in-out infinite; }
@keyframes simdi-idle {
  0%, 100% { transform: translateX(2.4em) translateY(0); }
  50% { transform: translateX(2.4em) translateY(-2px); }
}

/* ROLLING: -Iyor walks up to the desk and stops short of it. */
.simdi-box.rolling .simdi-yor { transform: translateX(0.5em); }

/* LOOKING: the verb's last vowel lights up in its family colour. That is
   what he is reading, and it stays lit from here on. */
.simdi-box.looking .simdi-vowel {
  color: var(--fam, var(--gold));
  text-shadow: 0 0 16px currentColor;
}

/* TURNING: a letter flips on its edge and comes back as another letter.
   The I becomes the family's vowel; on the fourth floor the t becomes d.
   The engine swaps the text at the midpoint, while the glyph is edge-on. */
.simdi-slot.turning, .simdi-last.turning {
  animation: simdi-turn 0.64s cubic-bezier(0.4, 0, 0.4, 1);
}
@keyframes simdi-turn {
  0% { transform: rotateX(0deg) scale(1); }
  45% { transform: rotateX(90deg) scale(1.35); text-shadow: 0 0 22px rgba(232, 193, 106, 0.95); }
  55% { transform: rotateX(-90deg) scale(1.35); text-shadow: 0 0 22px rgba(232, 193, 106, 0.95); }
  100% { transform: rotateX(0deg) scale(1); }
}

/* CLASHING (Kat 2): the verb's last a or e and the manager's vowel stand
   nose to nose, and neither will give ground. clash-shake is in base.css. */
.simdi-box.clashing .simdi-last,
.simdi-box.clashing .simdi-slot { animation: clash-shake 0.4s ease infinite; }
.simdi-box.clashing .simdi-slot { animation-delay: 0.2s; }
/* CUT: the a or e loses. It falls off the desk and its seat closes up. */
.simdi-box.cut .simdi-last {
  max-width: 0;
  animation: simdi-fall 0.8s ease-in forwards;
}
@keyframes simdi-fall {
  0% { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(3em) rotate(-30deg) scale(0.7); }
}

/* MELTING (Kat 3): two same letters side by side become one. The manager's
   vowel slides into the verb's and is gone. */
.simdi-box.melting .simdi-slot { animation: simdi-melt 0.7s ease forwards; }
@keyframes simdi-melt {
  0% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translate(-0.9em, 0.1em) scale(0.2); }
}
.simdi-box.melted .simdi-slot { max-width: 0; opacity: 0; animation: none; }

/* HOOKED: -Iyor steps onto the desk. The dash, the rim, the clip and the
   gap all go, because he is part of a word now, not a badge on his own. */
.simdi-box.hooked .simdi-dash { max-width: 0; opacity: 0; }
.simdi-box.hooked .simdi-yor {
  transform: none;
  margin-left: 0;
  padding: 0;
  border-color: transparent;
}
.simdi-box.hooked .simdi-yor::before { opacity: 0; }

/* SETTLED: the finished verb takes the stage as scannable markup, glows
   warm and lifts once. */
.simdi-box.settled .simdi-row {
  animation: simdi-settle 0.7s ease;
  text-shadow: 0 0 18px rgba(232, 193, 106, 0.45);
}
@keyframes simdi-settle {
  0% { transform: scale(1); }
  35% { transform: scale(1.12) translateY(-4px); }
  100% { transform: scale(1); }
}
.simdi-spark {
  position: absolute;
  left: 50%;
  top: 30%;
  font-size: 0.5em;
  color: var(--gold);
  pointer-events: none;
  animation: simdi-spark 1s ease forwards;
}
@keyframes simdi-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--hx, 30px), var(--hy, -50px)) scale(1); }
}

/* Reduced motion: the engine settles the word straight from the tap, so
   none of the staging plays; the GESTURE is never skipped, -Iyor still has
   to be tapped. */
@media (prefers-reduced-motion: reduce) {
  .simdi-yor, .simdi-last, .simdi-dash, .simdi-slot, .simdi-vowel { transition: none; }
  .simdi-box:not(.rolling) .simdi-yor { animation: none; }
  .simdi-slot.turning, .simdi-last.turning, .simdi-box.cut .simdi-last,
  .simdi-box.melting .simdi-slot, .simdi-box.settled .simdi-row, .simdi-spark,
  .simdi-box.clashing .simdi-last, .simdi-box.clashing .simdi-slot { animation: none; }
  .simdi-spark { opacity: 0; }
}


/* ---------- The elevator: Şimdi's hub, and the doors on every floor ---------- */

/* The hub as a lift car (Ahmet, 2026-09-03). A floor display up top, a
   brushed panel of round buttons under it, top floor first the way a real
   panel reads, and the ordinary pills (the missions, the story, the way out)
   standing under the panel. Built by renderElevator (js/engine.js). */
.lift {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin: 1.4rem auto 0.6rem;
}
.lift-display {
  min-width: 4.2em;
  padding: 0.2em 0.9em;
  border-radius: 0.35em;
  background: #0A120F;
  border: 1px solid rgba(140, 199, 168, 0.35);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8), 0 0 14px rgba(140, 199, 168, 0.12);
  text-align: center;
  font-family: var(--sans);
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  letter-spacing: 0.2em;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(232, 193, 106, 0.75);
  opacity: 0;
  animation: pill-in 0.5s ease forwards;
}
.lift-panel {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1.1rem;
  border-radius: 0.9rem;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #2A3A38, #1C2A28 60%, #142220);
  border: 1px solid rgba(216, 240, 228, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 40px rgba(0, 0, 0, 0.45);
}
.lift-btn {
  display: flex;
  align-items: center;
  gap: 0.8em;
  font: inherit;
  color: var(--cream);
  background: none;
  border: none;
  padding: 0.25em 0.4em;
  cursor: pointer;
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  animation: pill-in 0.5s ease forwards;
  border-radius: 0.6em;
  transition: background 0.25s ease;
}
.lift-btn:hover, .lift-btn:focus-visible { background: rgba(255, 255, 255, 0.05); outline: none; }
/* The button itself: a ring with the floor number in it. Lit while the floor
   is still waiting to be walked, quiet once it has been. */
.lift-num {
  flex: none;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: clamp(0.95rem, 2.4vw, 1.15rem);
  color: var(--cream);
  background: radial-gradient(circle at 35% 30%, #3A4C48, #1A2624 70%);
  border: 2px solid rgba(243, 234, 216, 0.28);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.lift-todo .lift-num {
  color: var(--gold);
  border-color: rgba(232, 193, 106, 0.85);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 14px rgba(232, 193, 106, 0.45);
  animation: pill-todo-glow 2.4s ease-in-out infinite;
}
.lift-btn:not(.lift-todo) .lift-label { opacity: 0.55; }
.lift-btn:not(.lift-todo):hover .lift-label { opacity: 1; }
.lift-btn:hover .lift-num, .lift-btn:focus-visible .lift-num { border-color: rgba(232, 193, 106, 0.9); }
/* Pressed: the ring floods gold for the moment before the doors shut. */
.lift-btn.lift-pressed .lift-num {
  background: var(--gold);
  color: #16201C;
  border-color: var(--gold);
  box-shadow: 0 0 22px rgba(232, 193, 106, 0.9);
  animation: none;
}
.lift-shut { cursor: default; }
.lift-shut .lift-num { opacity: 0.35; }
.lift-label {
  font-family: var(--serif);
  font-size: clamp(0.9rem, 2.2vw, 1.05rem);
  transition: opacity 0.3s ease;
}
.lift-rest { margin-top: 0.9rem; }

/* The lift doors (`door: elevator`): brushed steel, mint-lit, a dark floor
   display over the seam that counts the floors off while the car rides
   (doorSwing, js/engine.js), and no lamps, because a lift has a display.
   Unlike the hull, which fades in already shut, these SLIDE: each half
   starts off its own edge of the screen and travels in to meet the other
   at the seam (the `shut` class, a transition), and on `open` the base
   slide-apart animation carries them back out. Nothing else may animate
   the halves, or the slide is lost: the ride's hum lives on the display. */
.door-elevator .door-half {
  opacity: 1;
  transition: transform 0.95s cubic-bezier(0.5, 0.05, 0.2, 1);
  will-change: transform;
}
.door-elevator .door-left { transform: translateX(-101%); }
.door-elevator .door-right { transform: translateX(101%); }
.door-layer.door-elevator.shut .door-left,
.door-layer.door-elevator.shut .door-right { transform: translateX(0); }
.door-elevator .door-half {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #5C6A6B, #3E4A4B 55%, #2A3435);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.5);
}
.door-elevator .door-face {
  background:
    linear-gradient(90deg, transparent 88%, rgba(0, 0, 0, 0.4) 100%),
    linear-gradient(180deg, transparent 0 46%, rgba(255, 255, 255, 0.06) 46% 47%, transparent 47%);
}
.door-elevator .door-right .door-face {
  background:
    linear-gradient(270deg, transparent 88%, rgba(0, 0, 0, 0.4) 100%),
    linear-gradient(180deg, transparent 0 46%, rgba(255, 255, 255, 0.06) 46% 47%, transparent 47%);
}
.door-elevator .door-lamp { display: none; }
.door-elevator .door-seam {
  background: linear-gradient(180deg, transparent, rgba(140, 199, 168, 0.8) 10%, rgba(140, 199, 168, 0.8) 90%, transparent);
  box-shadow: 0 0 16px 3px rgba(140, 199, 168, 0.3);
}
.door-floor {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.25em 1em;
  border-radius: 0.4em;
  background: #0A120F;
  border: 1px solid rgba(140, 199, 168, 0.4);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.85), 0 0 18px rgba(140, 199, 168, 0.18);
  font-family: var(--sans);
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  letter-spacing: 0.15em;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(232, 193, 106, 0.8);
  opacity: 0;
  transition: opacity 0.4s ease 0.3s;
  z-index: 1;
}
.door-layer.shut .door-floor { opacity: 1; }
.door-layer.open .door-floor { opacity: 0; transition-delay: 0s; }
.door-floor-arrow { font-size: 0.55em; opacity: 0.8; }
.door-floor-digit { display: inline-block; min-width: 1em; text-align: center; }
/* The seam lights only once the halves have met. */
.door-elevator .door-seam { transition-delay: 0.95s; }
/* The ride: the display trembles faintly while the car moves. */
.door-layer.riding .door-floor { animation: lift-hum 0.5s ease-in-out infinite; }
@keyframes lift-hum {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(1px); }
}
.door-layer.arrived .door-floor {
  animation: none;
  border-color: rgba(232, 193, 106, 0.8);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.85), 0 0 26px rgba(232, 193, 106, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .lift-display, .lift-btn { animation: none; opacity: 1; transform: none; }
  .lift-todo .lift-num { animation: none; }
  .door-layer.riding .door-floor { animation: none; }
  .door-elevator .door-half { transition: none; }
}