/* Home glass v2 · clearer wallpaper, while text stays on a soft frosted veil. */
:root {
  --home-glass-bg: color-mix(in srgb, var(--surface) 70%, transparent);
  --home-glass-edge: color-mix(in srgb, var(--border) 64%, rgba(255, 255, 255, .62));
  --home-glass-shadow: 0 1px 2px rgba(76, 51, 44, .07), 0 10px 27px rgba(76, 51, 44, .09);
}

html[data-theme="dark"] {
  --home-glass-bg: color-mix(in srgb, var(--surface) 72%, transparent);
  --home-glass-edge: color-mix(in srgb, var(--border) 72%, rgba(255, 255, 255, .10));
  --home-glass-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 11px 29px rgba(0, 0, 0, .18);
}

:is(.home-whisper, .signature-card, .schedule-line, .chat-door, .today-card, .settings-bar, .rare-grid a) {
  border-color: var(--home-glass-edge);
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--home-glass-bg) 97%, transparent),
    color-mix(in srgb, var(--home-glass-bg) 72%, transparent));
  box-shadow: var(--home-glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .34);
  -webkit-backdrop-filter: blur(10px) saturate(1.06);
  backdrop-filter: blur(10px) saturate(1.06);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s ease, border-color .22s ease;
}

.home-whisper {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--rose-soft) 18%, color-mix(in srgb, var(--home-glass-bg) 90%, transparent)),
    color-mix(in srgb, var(--home-glass-bg) 68%, transparent));
}

.signature-card::before {
  content: none;
}

.signature-bow {
  position: absolute;
  z-index: 3;
  top: -22px;
  left: 22px;
  width: 66px;
  height: 41px;
  overflow: visible;
  pointer-events: none;
  transform: rotate(-2.5deg);
  transform-origin: center;
  filter: drop-shadow(0 4px 7px rgba(166, 79, 103, .18));
}

.signature-bow .bow-loop,
.signature-bow .bow-tail,
.signature-bow .bow-knot {
  stroke: color-mix(in srgb, var(--rose) 82%, #a64f67);
  stroke-width: 1.25;
  stroke-linejoin: round;
}

.signature-bow .bow-loop {
  fill: url(#signatureBowSilk);
}

.signature-bow .bow-tail {
  fill: url(#signatureBowTail);
}

.signature-bow .bow-knot {
  fill: #eea0b6;
}

.signature-bow .bow-fold,
.signature-bow .bow-shine {
  fill: none;
  stroke-linecap: round;
}

.signature-bow .bow-fold {
  stroke: rgba(173, 78, 106, .34);
  stroke-width: 1.05;
}

.signature-bow .bow-shine {
  stroke: rgba(255, 255, 255, .82);
  stroke-width: 1.2;
  stroke-linecap: round;
}

.today-card.featured {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--home-glass-bg) 97%, transparent),
    color-mix(in srgb, var(--rose-mist) 16%, color-mix(in srgb, var(--home-glass-bg) 70%, transparent)));
}

.today-card.alert {
  border-color: color-mix(in srgb, var(--amber) 58%, var(--home-glass-edge));
}

.tide-peek {
  display: grid;
  gap: 8px;
  margin-top: 2px;
  text-align: left;
  font-family: var(--home-sans);
  font-style: normal;
}

.tide-peek-row {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 13px;
}

.tide-peek-row.body {
  background: color-mix(in srgb, var(--blue-soft) 42%, transparent);
  border-color: color-mix(in srgb, var(--blue) 24%, var(--border));
}

.tide-peek-row.desire {
  background: linear-gradient(110deg,
    color-mix(in srgb, var(--rose-soft) 54%, transparent),
    color-mix(in srgb, var(--oat) 34%, transparent));
  border-color: color-mix(in srgb, var(--rose) 24%, var(--border));
}

.tide-peek-row span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
}

.tide-peek-row b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.65;
}

@media (hover: hover) and (pointer: fine) {
  :is(.home-whisper, .signature-card, .schedule-line, .chat-door, .today-card, .settings-bar, .rare-grid a):hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--rose) 24%, var(--home-glass-edge));
    box-shadow: 0 2px 3px rgba(76, 51, 44, .08), 0 15px 34px rgba(76, 51, 44, .12), inset 0 1px 0 rgba(255, 255, 255, .42);
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.home-whisper, .signature-card, .schedule-line, .chat-door, .today-card, .settings-bar, .rare-grid a) {
    transition: none;
  }
  :is(.home-whisper, .signature-card, .schedule-line, .chat-door, .today-card, .settings-bar, .rare-grid a):hover {
    transform: none;
  }
}
