/* Scroll & Stone - door-taste.css
   Styles for the .door-taste first-taste widget injected by door-taste.js.
   Shown at all widths (the rotating "first taste" on each home door).
   Uses home.css codex variables; defined here as fallbacks so this file
   is self-contained if ever loaded in isolation. */

:root {
  --dt-gold:      var(--codex-gold,      #C9A227);
  --dt-gold-hi:   var(--codex-gold-hi,   #F0DD9A);
  --dt-ink:       var(--codex-vellum,    #F3E9D2);
  --dt-bg:        rgba(22, 34, 76, 0.72); /* codex-deep at ~72% */
}

.doors-hero .door-taste {
  position: relative;
  inset: auto;
  z-index: auto;
  display: block;
  min-height: 2.4rem;
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(240, 221, 154, 0.28);

  pointer-events: none;       /* the door itself handles the tap */
  user-select: none;
  -webkit-user-select: none;
}

.doors-hero .label {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}

.doors-hero .go {
  margin-top: auto;
  padding-top: 0.65rem;
}

.doors-hero .d-lib .door-taste {
  border-top-color: rgba(140, 110, 29, 0.28);
}

.doors-hero .d-lib .door-taste-label {
  color: var(--codex-gold-deep, #8C6E1D);
}

.doors-hero .d-lib .door-taste-value {
  color: var(--codex-ink, #2A2419);
}

.door-taste-label {
  display: block;
  font-family: var(--utility, "Inter", -apple-system, sans-serif);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dt-gold);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.door-taste-value {
  display: block;
  font-family: var(--display, "Frank Ruhl Libre", Georgia, serif);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--dt-ink);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Fade-in animation on rotation (door-taste.js adds this class) */
.door-taste-value.door-taste-in {
  animation: dt-fadein 0.45s ease both;
}

@keyframes dt-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0);   }
}

@media (prefers-reduced-motion: reduce) {
  .door-taste-value.door-taste-in {
    animation: none;
  }
}