/* Decision scene — identity card with prominent portrait + dramatic reactions. */

.scene-decision { gap: var(--sp-lg); }

/* ----- Identity card ----- */

.identity-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-xs);
  padding-bottom: var(--sp-lg);
  border-bottom: 1px solid var(--tl-border);
}

.identity-portrait-frame {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 3px solid var(--tl-accent);
  background: var(--tl-card);
  overflow: visible;
  box-shadow: var(--shadow-sage);
  position: relative;
  margin-bottom: var(--sp-sm);
}

.identity-portrait-frame::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  pointer-events: none;
}

.identity-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  transform-origin: center center;
  will-change: transform, opacity, filter;
}

.identity-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.625rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--tl-text);
}

.identity-subtitle {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  color: var(--tl-accent);
  margin: 0;
}

.identity-step {
  margin: var(--sp-xs) 0 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--type-caption);
  letter-spacing: 0.12em;
  color: var(--tl-muted);
  text-transform: uppercase;
}

/* ----- Decision body + options ----- */

.decision-body p {
  margin: 0 0 var(--sp-md) 0;
  font-size: var(--type-body-l);
  line-height: 1.55;
  color: var(--tl-text);
}

.decision-body p:last-child { margin-bottom: 0; }

.decision-options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  margin-top: var(--sp-md);
}

.btn-option {
  font-family: var(--font-sans);
  font-size: var(--type-body-m);
  font-weight: 500;
  text-align: left;
  padding: 1rem 1.125rem;
  background: var(--tl-card);
  color: var(--tl-text);
  border: 1px solid var(--tl-border-hi);
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
  min-height: 60px;
}

.btn-option:hover {
  border-color: var(--tl-accent);
  background: var(--tl-accent-soft);
  box-shadow: var(--shadow-md);
}

.btn-option:active { transform: scale(0.99); }

.btn-option:disabled {
  cursor: default;
  opacity: 0.45;
}

.btn-option.chosen {
  background: var(--tl-accent-soft);
  border-color: var(--tl-accent);
  color: var(--tl-text);
  opacity: 1;
  box-shadow: 0 0 0 1px var(--tl-accent), var(--shadow-sage);
}

/* ============================================================
   REACTIONS — bigger amplitude + ring glow tint per reaction.
   Triggered by .identity-portrait-frame.reacting-<id>; cascades
   into both the frame (glow) and the inner portrait (transform).
   ============================================================ */

/* SMUG — lean-back with overshoot + gold glow */
@keyframes reaction-portrait-smug {
  0%   { transform: rotate(0) scale(1); }
  40%  { transform: rotate(10deg) scale(1.14); }
  70%  { transform: rotate(7deg)  scale(1.10); }
  100% { transform: rotate(0)     scale(1); }
}
@keyframes reaction-frame-smug {
  0%   { box-shadow: var(--shadow-sage); }
  40%  { box-shadow: 0 0 0 6px rgba(192, 152, 88, 0.50), 0 8px 32px rgba(192, 152, 88, 0.35); }
  70%  { box-shadow: 0 0 0 4px rgba(192, 152, 88, 0.35), var(--shadow-sage); }
  100% { box-shadow: var(--shadow-sage); }
}
.identity-portrait-frame.reacting-smug .identity-portrait { animation: reaction-portrait-smug 850ms cubic-bezier(0.34, 1.4, 0.64, 1); }
.identity-portrait-frame.reacting-smug                     { animation: reaction-frame-smug    850ms ease-in-out; }

/* SWEAT — nervous shake + sage glow */
@keyframes reaction-portrait-sweat {
  0%, 100%                { transform: translateX(0)    scale(1); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-7px) scale(1.05); }
  20%, 40%, 60%, 80%      { transform: translateX(7px)  scale(1.05); }
}
@keyframes reaction-frame-sweat {
  0%, 100% { box-shadow: var(--shadow-sage); }
  50%      { box-shadow: 0 0 0 6px rgba(106, 158, 120, 0.55), 0 8px 32px rgba(106, 158, 120, 0.45); }
}
.identity-portrait-frame.reacting-sweat .identity-portrait { animation: reaction-portrait-sweat 800ms ease-in-out; }
.identity-portrait-frame.reacting-sweat                     { animation: reaction-frame-sweat    800ms ease-in-out; }

/* SHRUG — vertical bob with counter-rotation + sage glow */
@keyframes reaction-portrait-shrug {
  0%   { transform: translateY(0)    rotate(0); }
  30%  { transform: translateY(-14px) rotate(-4deg); }
  60%  { transform: translateY(-10px) rotate(4deg); }
  100% { transform: translateY(0)     rotate(0); }
}
@keyframes reaction-frame-shrug {
  0%, 100% { box-shadow: var(--shadow-sage); }
  50%      { box-shadow: 0 0 0 5px rgba(168, 200, 160, 0.45), var(--shadow-md); }
}
.identity-portrait-frame.reacting-shrug .identity-portrait { animation: reaction-portrait-shrug 800ms ease-in-out; }
.identity-portrait-frame.reacting-shrug                     { animation: reaction-frame-shrug    800ms ease-in-out; }

/* AWKWARD — tilt + flinch + red glow */
@keyframes reaction-portrait-awkward {
  0%   { transform: rotate(0)     scale(1); }
  40%  { transform: rotate(-12deg) scale(0.90); }
  70%  { transform: rotate(-9deg)  scale(0.92); }
  100% { transform: rotate(0)      scale(1); }
}
@keyframes reaction-frame-awkward {
  0%, 100% { box-shadow: var(--shadow-sage); }
  50%      { box-shadow: 0 0 0 5px rgba(176, 120, 112, 0.50), 0 8px 24px rgba(176, 120, 112, 0.35); }
}
.identity-portrait-frame.reacting-awkward .identity-portrait { animation: reaction-portrait-awkward 800ms ease-in-out; }
.identity-portrait-frame.reacting-awkward                     { animation: reaction-frame-awkward    800ms ease-in-out; }

/* SAD — shrink + dim + desaturate + muted glow */
@keyframes reaction-portrait-sad {
  0%   { transform: scale(1)    translateY(0); opacity: 1;   filter: saturate(1); }
  40%  { transform: scale(0.85) translateY(8px); opacity: 0.45; filter: saturate(0.35); }
  70%  { transform: scale(0.88) translateY(6px); opacity: 0.55; filter: saturate(0.45); }
  100% { transform: scale(1)    translateY(0); opacity: 1;   filter: saturate(1); }
}
@keyframes reaction-frame-sad {
  0%, 100% { box-shadow: var(--shadow-sage); border-color: var(--tl-accent); }
  50%      { box-shadow: 0 0 0 4px rgba(122, 142, 132, 0.40), var(--shadow-sm); border-color: rgba(122, 142, 132, 0.6); }
}
.identity-portrait-frame.reacting-sad .identity-portrait { animation: reaction-portrait-sad 850ms ease-in-out; }
.identity-portrait-frame.reacting-sad                     { animation: reaction-frame-sad    850ms ease-in-out; }