/* ==========================================================================
   OBJETOS Y CRIATURAS — recipientes, reacciones, descubrimiento
   ========================================================================== */

.object { position: relative; z-index: 1; outline: none; -webkit-tap-highlight-color: transparent; }
.object__art { position: relative; transition: transform 1s var(--ease-organic); }
.object.is-near .object__art { transform: translateY(-6px); }
.object:focus-visible .object__art { outline: 1px dashed var(--c-6); outline-offset: 10px; }
.vessel { width: 100%; height: auto; overflow: visible; }

.object__tag { text-align: center; transition: opacity .6s; }
.object__num { display: block; font: 500 9px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--c-6); }
.object__name { display: block; margin-top: 6px; font-size: 1.3rem; letter-spacing: .04em; color: var(--c-8); transition: color .5s; }
.object__price { display: block; margin-top: 8px; font: 400 11px/1 var(--sans); letter-spacing: .18em; color: var(--c-7); }
.object__price::before { content: '— '; color: var(--c-5); }
.object.is-near .object__name { color: var(--c-9); }
.object__mark {
  position: absolute;
  top: 6%; right: 10%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--glow-green);
  box-shadow: 0 0 10px 2px rgba(156, 199, 154, .5);
  opacity: 0;
  transition: opacity 1s;
}
.object.is-adopted .object__mark { opacity: 1; }

/* Etiqueta colgante en la estantería */
.object--shelf { width: 84%; margin-bottom: 2px; }
.object--shelf .object__tag {
  position: absolute;
  left: 50%;
  top: calc(100% + 30px);
  padding: 8px 14px 9px;
  background: #c3b48c;
  color: #1d170e;
  transform: translateX(-50%) rotate(-2deg);
  transform-origin: 50% -20px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .5);
  white-space: nowrap;
  animation: tag-sway 5s ease-in-out infinite alternate;
}
.object--shelf .object__tag::before { content: ''; position: absolute; left: 50%; top: -16px; width: 1px; height: 16px; background: #806b42; }
.object--shelf .object__num { color: #594c32; }
.object--shelf .object__name { margin-top: 4px; font-size: 1.05rem; color: #1d170e; font-style: italic; }
.object--shelf.is-near .object__name { color: #000; }

.object--table { justify-self: center; width: min(100%, 300px); transition: opacity .9s, scale .9s var(--ease-organic), translate 1s var(--ease-organic); }
.object--table .object__art { rotate: var(--tilt, 0deg); }
.object--table .object__tag { margin-top: 16px; }
.object.is-away { opacity: .1; scale: .94; pointer-events: none; }
.object.is-new { animation: emerge 2.8s var(--ease-organic) both; }
@keyframes emerge { from { opacity: 0; scale: .8; filter: brightness(3); } to { opacity: 1; scale: 1; filter: none; } }

/* Reacciones de los recipientes */
.v-rise { transform: translateY(var(--rise, 40px)); transition: transform 1.3s cubic-bezier(.5, 0, .2, 1); }
.is-near .v-rise, .is-peeking .v-rise { transform: translateY(var(--rise-near, 10px)); }
.is-peeking .v-rise { transition-duration: 2s; }
.v-lid { transform-box: fill-box; transform-origin: 0% 100%; transition: transform 1s var(--ease-organic); }
.is-near .v-lid { transform: rotate(-12deg) translate(-4px, -10px); }
.v-inner { transition: transform 1.4s var(--ease-organic); }
.is-near .v-inner { transform: translateY(-5px); }
.v-tag { transform-box: fill-box; transform-origin: 0 0; animation: tag-sway 4s ease-in-out infinite alternate; }

/* ---------- Criaturas ---------- */

.c-eye { transform-box: fill-box; transform-origin: center; transform: scaleY(.08); transition: transform .7s var(--ease-organic); }
.c-eye circle { transform-box: fill-box; transform-origin: center; }
.is-near .c-eye, .is-peeking .c-eye, .is-awake .c-eye { transform: scaleY(1); }
.is-near .c-eye circle, .is-awake .c-eye circle, .peeker .c-eye circle, .drawer__creature .c-eye circle { animation: blink 5.5s infinite; }
@keyframes blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
.c-eyes { transition: transform .3s ease-out; }
.c-glow { opacity: .2; transition: opacity 1.6s ease; }
.is-near .c-glow, .is-awake .c-glow, .is-peeking .c-glow, .drawer__creature .c-glow { opacity: 1; }
.c-abdomen { animation: pulse 4s ease-in-out infinite; }
.c-body { transform-box: fill-box; transform-origin: 50% 100%; animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, .988); } }
.c-float { animation: float 7s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.c-leaf { transform-box: fill-box; transform-origin: 0% 50%; animation: leaf-sway 5s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -.8s); }
@keyframes leaf-sway { from { rotate: -4deg; } to { rotate: 5deg; } }
.is-near .c-leaf { animation-duration: 1.2s; }
.c-wing--l { transform-box: fill-box; transform-origin: 100% 50%; animation: flutter 3.4s ease-in-out infinite; }
.c-wing--r { transform-box: fill-box; transform-origin: 0% 50%; animation: flutter 3.4s ease-in-out infinite; }
.is-near .c-wing--l, .is-near .c-wing--r, .is-awake .c-wing--l, .is-awake .c-wing--r { animation-duration: .45s; }
@keyframes flutter { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.86); } }
.c--fae .c-wing { transform-box: fill-box; transform-origin: 0% 50%; animation: fae-wing 9s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
.is-awake .c--fae .c-wing, .is-near .c--fae .c-wing { animation-duration: 2.4s; }
@keyframes fae-wing { 0%, 100% { rotate: 0deg; } 50% { rotate: 3deg; } }
.c-mouth { opacity: 0; transition: opacity 1s .8s; }
.is-awake .c-mouth { opacity: 1; }

/* ---------- Descubrimiento ---------- */

.discovery { position: fixed; inset: 0; z-index: 24; visibility: hidden; pointer-events: none; transition: visibility 0s 1s; }
.discovery.is-open { visibility: visible; pointer-events: auto; transition: none; }
.discovery__veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 38% 50%, rgba(18, 24, 17, .94), rgba(4, 5, 4, .985) 70%); opacity: 0; transition: opacity 1s ease; }
.discovery.is-open .discovery__veil { opacity: 1; }
.discovery__frame { position: absolute; inset: 0; pointer-events: none; }
.discovery__frame svg { width: 100%; height: 100%; overflow: visible; }
.discovery__frame .leaf { pointer-events: visiblePainted; }
.discovery__scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 4vw;
  padding: 10vh 8vw 8vh;
}
.discovery__stage { position: relative; height: min(76vh, 680px); display: flex; align-items: center; justify-content: center; }
.discovery__light {
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--glow, #9cc79a) 22%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 2.4s ease;
}
.discovery.is-awake .discovery__light { opacity: 1; }
.discovery.is-bonded .discovery__light { opacity: 1; filter: brightness(1.6); }
.discovery__creature { position: relative; width: 100%; height: 100%; opacity: 0; transform: scale(.9) translateY(24px); transition: opacity 1.6s ease .2s, transform 2.4s var(--ease-organic) .2s; }
.discovery.is-open .discovery__creature { opacity: .32; transform: scale(.95) translateY(10px); }
.discovery.is-awake .discovery__creature { opacity: 1; transform: none; }
.discovery__svg { width: 100%; height: 100%; }
.discovery__whisper { position: absolute; bottom: 6%; left: 0; right: 0; margin: 0; text-align: center; font-family: var(--fell); font-style: italic; color: var(--c-6); opacity: 0; transition: opacity .8s; }
.discovery.is-open:not(.is-awake) .discovery__whisper { opacity: .9; transition-delay: .5s; }
.discovery__awake { position: absolute; bottom: 2%; left: 0; right: 0; margin: 0; text-align: center; font-style: italic; font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--c-8); opacity: 0; transform: translateY(10px); transition: opacity 1.4s .4s, transform 1.6s .4s var(--ease-organic); }
.discovery.is-awake .discovery__awake { opacity: 1; transform: none; }

.discovery__info > * { opacity: 0; transform: translateY(16px); transition: opacity 1.2s, transform 1.4s var(--ease-organic); }
.discovery.is-informed .discovery__info > * { opacity: 1; transform: none; }
.discovery.is-informed .discovery__info > :nth-child(2) { transition-delay: .1s; }
.discovery.is-informed .discovery__info > :nth-child(3) { transition-delay: .25s; }
.discovery.is-informed .discovery__info > :nth-child(4) { transition-delay: .4s; }
.discovery.is-informed .discovery__info > :nth-child(5) { transition-delay: .55s; }
.discovery.is-informed .discovery__info > :nth-child(6) { transition-delay: .75s; }
.discovery__num { margin: 0; font: 500 10px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--c-6); }
.discovery__name { margin: 12px 0 18px; font-size: clamp(2.3rem, 4.6vw, 4rem); line-height: 1; letter-spacing: .05em; text-transform: uppercase; color: var(--c-9); }
.discovery__epithet { margin: 0 0 22px; padding-left: 18px; border-left: 1px solid var(--c-5); font-family: var(--fell); font-style: italic; font-size: clamp(1.15rem, 2vw, 1.4rem); color: var(--c-7); }
.discovery__desc { margin: 0 0 28px; font-size: 1.2rem; line-height: 1.6; color: var(--ink-soft); max-width: 520px; }
.discovery__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin: 0; }
.discovery__facts div:nth-child(-n + 2) { grid-column: span 2; }
.discovery__facts dt { font: 500 9px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--c-6); }
.discovery__facts dd { margin: 6px 0 0; font-size: 1.08rem; line-height: 1.45; color: var(--c-8); }
.discovery__buy { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(89, 76, 50, .45); }
.discovery__label { display: block; font: 500 9px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--c-6); }
.discovery__price { display: block; margin-top: 8px; font-size: 2rem; line-height: 1; color: var(--c-9); }
.discovery__close {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: var(--gutter);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font: 500 10px/1 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-7);
  opacity: 0;
  transition: opacity .8s .6s, color .4s;
}
.discovery.is-open .discovery__close { opacity: 1; }
.discovery__close:hover { color: var(--c-9); }
.discovery__close i { position: relative; width: 16px; height: 16px; }
.discovery__close i::before, .discovery__close i::after { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: currentColor; transform: rotate(45deg); }
.discovery__close i::after { transform: rotate(-45deg); }

@media (max-width: 860px) {
  .discovery__scroll { display: block; padding: 70px 16px 60px; }
  .discovery__stage { height: 54vh; margin-bottom: 20px; }
  .discovery__close span { display: none; }
  .discovery__facts { grid-template-columns: 1fr; }
  .discovery__facts div:nth-child(n) { grid-column: auto; }
  .discovery__buy { flex-direction: column; align-items: stretch; }
  .discovery__buy .seal-btn { width: 100%; }
}