/* css/smells.css — the nose and what it finds (js/smells.js).
   Shared by the Burası neresi? görev and by the beat that teaches it, so the
   field looks the same whether a task or the engine put it there. */

/* Edge to edge, and it must never take a tap: everything it covered it also
   swallowed, and the answer pill under it could be seen and not pressed
   (Ahmet, 2026-08-15). The nose is followed from the window instead. */
.sm-field {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  touch-action: none;
}
/* The pointer IS the nose while a field is open, so the arrow goes away over
   the room itself. It cannot ride on the BODY (Ahmet, 2026-08-15): opening the
   portal mid-sniff left the whole app with no cursor, because the map is not
   the beat and nothing there was ever going to take the class off again.
   Scoped to the stage, the chrome always keeps its arrow — the portal, Lexi,
   the profile and the sound button are things you aim at, not things you
   smell — and a leak can only ever cost the cursor inside one room. */
body.smelling #stage, body.smelling #stage * { cursor: none; }

/* The nose: a soft round glow that finds things by proximity. It gives almost
   no light of its own — it is a sense, not a torch. */
.sm-nose {
  position: absolute;
  top: 0; left: 0;
  width: 34vmin; height: 34vmin;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
    rgba(243, 234, 216, 0.055) 0%,
    rgba(243, 234, 216, 0.03) 42%,
    transparent 70%);
}

/* A smell. Invisible until the nose is near, and it fades UP as you close in,
   so sweeping the room feels like getting warmer rather than flicking a
   switch. The outer element is carried across the room by the JS; the inner
   puff does the in-place curl, because two animations on one element means
   the second one simply wins. */
.sm-smell {
  position: absolute;
  top: 0; left: 0;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s linear;
  filter: drop-shadow(0 0 12px rgba(232, 193, 106, 0.35));
  will-change: transform, opacity;
}
.sm-puff {
  display: inline-block;
  animation: sm-wiggle var(--wig, 4.5s) ease-in-out infinite;
}
/* A smell that is a WORD reads at text size, not at emoji size, and it carries
   its own gold from the markup. */
.sm-smell.sm-word {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 3.2vw, 1.5rem);
  white-space: nowrap;
}
@keyframes sm-wiggle {
  0%   { transform: translate(-7px, 3px)  rotate(-7deg) skewX(4deg)  scale(0.94); }
  22%  { transform: translate(3px, -6px)  rotate(5deg)  skewX(-3deg) scale(1.05); }
  41%  { transform: translate(8px, 2px)   rotate(9deg)  skewX(5deg)  scale(0.97); }
  63%  { transform: translate(1px, 7px)   rotate(-4deg) skewX(-5deg) scale(1.06); }
  81%  { transform: translate(-6px, -3px) rotate(-9deg) skewX(3deg)  scale(0.95); }
  100% { transform: translate(-7px, 3px)  rotate(-7deg) skewX(4deg)  scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
  .sm-smell { transition: none; }
  .sm-puff { animation: none; }
}