/* Péndulo Online — un solo botón con animación CSS del péndulo según movimiento devuelto */

.pendulo-page { color: #f5ecd2; }

.pendulo-header { text-align: center; margin-bottom: 1.4rem; }
.pendulo-header h1 {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: #f5d088;
  text-shadow: 0 0 16px rgba(245,208,136,0.45);
  margin: 0 0 .6rem;
}
.pendulo-intro {
  max-width: 60ch;
  margin: 0 auto;
  color: rgba(245,236,210,0.85);
  line-height: 1.55;
}

.pendulo-app {
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

/* ---------- Pendulum visual ---------- */
.pendulo-stage {
  position: relative;
  width: 260px;
  height: 320px;
  display: flex;
  justify-content: center;
  padding-top: 14px;
  /* Mystic gradient frame */
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(245,208,136,0.16), transparent 60%),
    radial-gradient(circle at 50% 100%, rgba(120,80,180,0.18), transparent 65%),
    linear-gradient(160deg, #1a1030 0%, #07051a 100%);
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 1px rgba(245,208,136,0.25),
    inset 0 0 32px rgba(40,20,80,0.5),
    0 18px 32px rgba(0,0,0,0.5);
  overflow: hidden;
}

.pendulo-anchor {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff5cc 0%, #b8923a 65%, #4a3208 100%);
  box-shadow:
    0 0 12px rgba(245,208,136,0.6),
    inset 0 -2px 4px rgba(0,0,0,0.4);
  z-index: 3;
}

.pendulo-arm {
  position: absolute;
  top: 27px;            /* anchored at the pivot center */
  left: 50%;
  width: 6px;
  height: 230px;
  margin-left: -3px;
  transform-origin: 50% 0%;
  transition: transform .2s ease-out;
  pointer-events: none;
  z-index: 2;
}

.pendulo-string {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 200px;
  margin-left: -1px;
  background: linear-gradient(180deg, rgba(245,208,136,0.85) 0%, rgba(245,208,136,0.55) 100%);
  box-shadow: 0 0 4px rgba(245,208,136,0.5);
}

.pendulo-orb {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff8e0 0%, #f5d088 35%, #a3771e 75%, #3a2606 100%);
  box-shadow:
    0 0 22px rgba(245,208,136,0.7),
    inset -4px -6px 12px rgba(60,30,5,0.55),
    inset 4px 4px 8px rgba(255,250,210,0.5);
}

/* Resting wobble while idle */
.pendulo-app[data-state="ready"] .pendulo-arm {
  animation: pendulo-idle 4s ease-in-out infinite;
}
@keyframes pendulo-idle {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

/* ---------- Animations per motion ---------- */
.pendulo-app[data-state="swinging"] .pendulo-arm {
  animation: var(--pendulo-anim, none) var(--pendulo-dur, 3s) ease-in-out var(--pendulo-iter, 3);
}

.pendulo-app[data-motion="horizontal"]       { --pendulo-anim: pendulo-horizontal; --pendulo-dur: 1.1s; --pendulo-iter: 4; }
.pendulo-app[data-motion="vertical"]         { --pendulo-anim: pendulo-vertical;   --pendulo-dur: 1.1s; --pendulo-iter: 4; }
.pendulo-app[data-motion="clockwise"]        { --pendulo-anim: pendulo-clockwise;  --pendulo-dur: 1.2s; --pendulo-iter: 3; }
.pendulo-app[data-motion="counterclockwise"] { --pendulo-anim: pendulo-counter;    --pendulo-dur: 1.2s; --pendulo-iter: 3; }

@keyframes pendulo-horizontal {
  0%, 100% { transform: rotate(-28deg); }
  50%      { transform: rotate(28deg); }
}
@keyframes pendulo-vertical {
  /* Forward/back evoked by orb pulse + slight Y travel */
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(8px) scaleY(0.9); }
}
@keyframes pendulo-clockwise {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes pendulo-counter {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/* ---------- Controls ---------- */
.pendulo-controls { width: 100%; }
.pendulo-form {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  align-items: stretch;
}
.pendulo-label {
  font-size: .9rem;
  color: rgba(245,236,210,0.75);
  text-align: center;
}
.pendulo-input {
  width: 100%;
  padding: .8rem 1rem;
  background: rgba(10,5,30,0.5);
  border: 1px solid rgba(245,208,136,0.35);
  border-radius: 10px;
  color: #f5ecd2;
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
}
.pendulo-input:focus {
  outline: none;
  border-color: rgba(245,208,136,0.75);
  box-shadow: 0 0 0 3px rgba(245,208,136,0.18);
}
.pendulo-input::placeholder { color: rgba(245,236,210,0.45); }
.pendulo-ask {
  align-self: center;
  padding: .7rem 1.8rem;
  font-family: 'Cinzel', 'Times New Roman', serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Disable controls while swinging */
.pendulo-app[data-state="swinging"] .pendulo-ask,
.pendulo-app[data-state="swinging"] .pendulo-input { opacity: .55; pointer-events: none; }

/* ---------- Result ---------- */
.pendulo-result {
  width: 100%;
  text-align: center;
  background: linear-gradient(160deg, rgba(20,10,40,0.75), rgba(40,18,80,0.35));
  border: 1px solid rgba(245,208,136,0.3);
  border-radius: 16px;
  padding: 1.4rem 1.2rem 1rem;
  box-shadow: 0 14px 28px rgba(0,0,0,0.45);
  animation: pendulo-reveal .55s ease-out;
}
@keyframes pendulo-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pendulo-result-question {
  font-style: italic;
  color: rgba(245,236,210,0.7);
  margin: 0 0 1rem;
}
.pendulo-result-question:empty { display: none; }

.pendulo-verdict {
  display: inline-block;
  padding: .55rem 1.4rem;
  border-radius: 999px;
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1rem;
}
.pendulo-result[data-verdict="si"]  .pendulo-verdict {
  background: linear-gradient(160deg, #1c5a2a, #0a2a12);
  color: #c0ffce;
  border: 1px solid rgba(160,255,180,0.5);
  box-shadow: 0 0 18px rgba(60,180,80,0.45);
}
.pendulo-result[data-verdict="no"]  .pendulo-verdict {
  background: linear-gradient(160deg, #6a1818, #2a0606);
  color: #ffcaca;
  border: 1px solid rgba(255,160,160,0.5);
  box-shadow: 0 0 18px rgba(200,60,60,0.45);
}
.pendulo-result[data-strength="probable"] .pendulo-verdict { opacity: 0.85; font-size: 1.25rem; }

.pendulo-result-motion {
  color: rgba(245,236,210,0.75);
  font-style: italic;
  margin: 0 0 .8rem;
}
.pendulo-result-interpretation {
  color: #f5ecd2;
  line-height: 1.6;
  margin: 0 0 1.2rem;
  max-width: 50ch;
  margin-left: auto;
  margin-right: auto;
}

.pendulo-error {
  color: #ff9999;
  text-align: center;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pendulo-app[data-state="ready"]    .pendulo-arm { animation: none; transform: rotate(0); }
  .pendulo-app[data-state="swinging"] .pendulo-arm { animation: none; transform: rotate(0); }
  .pendulo-result { animation: none; }
}