/* ==========================================================================
   ANIMA · GLASS LAYER
   Full-screen sky, floating translucent surfaces, white edge light.
   Loaded after theme-sky.css.
   ========================================================================== */

html {
  background: #cfeafa;
}

body {
  position: relative;
  isolation: isolate;
  background: transparent;
}

.sky-backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: #cfeafa url("../assets/backdrops/sky-atmosphere.jpg") center / cover no-repeat;
}

.sky-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.08) 52%, rgba(255, 255, 255, 0.2) 100%),
    radial-gradient(circle at 78% 19%, rgba(255, 255, 255, 0.26), transparent 20%);
}

.sky-backdrop::after {
  content: "";
  position: absolute;
  top: 12%;
  right: 18%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 12px 4px rgba(255, 255, 255, 0.9),
    0 0 48px 16px rgba(147, 210, 241, 0.55);
  opacity: 0.75;
}

::selection {
  background: rgba(128, 199, 232, 0.6);
  color: #092a40;
}

/* The header turns into a floating glass capsule once you leave the hero. */
.site-header.is-scrolled {
  top: 10px;
  right: clamp(10px, 1.7vw, 24px);
  left: clamp(10px, 1.7vw, 24px);
  height: 62px;
  padding: 0 clamp(16px, 2vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 999px;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42) 60%, rgba(255, 255, 255, 0.56));
  box-shadow:
    0 18px 45px rgba(28, 79, 111, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(28px) saturate(1.22);
  backdrop-filter: blur(28px) saturate(1.22);
  transition:
    top 0.45s var(--ease),
    right 0.45s var(--ease),
    left 0.45s var(--ease),
    height 0.45s var(--ease),
    padding 0.45s var(--ease),
    border-radius 0.45s var(--ease),
    background 0.45s var(--ease),
    border-color 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}

.site-header.is-scrolled .brand-seal {
  width: 33px;
  height: 33px;
  font-size: 18px;
}

.site-header.is-scrolled .brand-text strong {
  font-size: 14px;
}

.site-header.is-scrolled .library-trigger {
  background: rgba(255, 255, 255, 0.3);
}

/* Section veils: the fixed sky remains visible between the glass. */
.intro {
  background:
    linear-gradient(180deg, rgba(247, 252, 255, 0.06) 0%, rgba(247, 252, 255, 0.26) 58%, rgba(247, 252, 255, 0.35) 100%);
}

.collection {
  background:
    linear-gradient(180deg, rgba(247, 252, 255, 0.08) 0%, rgba(235, 248, 255, 0.3) 38%, rgba(248, 252, 255, 0.32) 100%);
}

.journal {
  background:
    linear-gradient(180deg, rgba(235, 249, 255, 0.18) 0%, rgba(248, 252, 255, 0.38) 100%);
}

.closing {
  background:
    linear-gradient(180deg, rgba(248, 252, 255, 0.16) 0%, rgba(222, 243, 255, 0.28) 100%);
}

.genre-ticker {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.26);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  backdrop-filter: blur(20px) saturate(1.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.site-footer {
  background: rgba(250, 253, 255, 0.34);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
  backdrop-filter: blur(24px) saturate(1.12);
}

/* Float the whole filter deck as a single sheet of glass. */
.filter-panel {
  position: relative;
  padding: 5px 22px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 24px;
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.2) 66%, rgba(234, 249, 255, 0.36));
  box-shadow:
    0 28px 70px rgba(24, 76, 108, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(30px) saturate(1.2);
  backdrop-filter: blur(30px) saturate(1.2);
}

.filter-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.2), transparent 38%);
  pointer-events: none;
}

.mood-row {
  border-top-color: rgba(255, 255, 255, 0.52);
}

.search-field {
  border-bottom-color: rgba(37, 89, 124, 0.2);
}

.search-field kbd {
  background: rgba(255, 255, 255, 0.28);
}

.search-clear {
  background: rgba(255, 255, 255, 0.34);
}

.select-wrap select {
  background: rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.fav-filter {
  background: rgba(255, 255, 255, 0.28);
}

.fav-filter b {
  background: rgba(255, 255, 255, 0.38);
}

.filter-tag {
  background: rgba(255, 255, 255, 0.34);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.active-filters {
  padding: 13px 4px 0;
}

/* Art prints with translucent frames + a glass caption plate. */
.card-poster {
  border-radius: 6px;
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.52),
    0 18px 38px rgba(24, 78, 112, 0.13);
}

.card-poster::after {
  background:
    linear-gradient(180deg, rgba(5, 28, 43, 0.48) 0%, rgba(5, 28, 43, 0.08) 24%, transparent 38%, transparent 58%, rgba(5, 28, 43, 0.64) 100%),
    linear-gradient(0deg, rgba(5, 28, 43, 0.24), transparent 25%);
  opacity: 0.78;
}

.card-index,
.card-type {
  text-shadow: 0 1px 7px rgba(4, 24, 37, 0.8), 0 0 14px rgba(4, 24, 37, 0.3);
}

.anime-card:hover .card-poster {
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.64),
    0 28px 54px rgba(22, 73, 106, 0.22);
}

.card-info {
  margin-top: 9px;
  padding: 12px 14px 14px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(241, 251, 255, 0.18));
  box-shadow:
    0 14px 32px rgba(26, 80, 113, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transition:
    transform 0.45s var(--ease),
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.anime-card:hover .card-info {
  border-color: rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(241, 251, 255, 0.26));
  box-shadow:
    0 18px 38px rgba(26, 80, 113, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transform: translateY(-3px);
}

.card-title {
  color: var(--paper-bright);
}

.card-meta {
  color: rgba(68, 103, 125, 0.92);
}

.empty-state {
  background: rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  box-shadow:
    0 24px 60px rgba(27, 80, 113, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.grid-footer {
  border-top-color: rgba(255, 255, 255, 0.52);
}

/* Journal: frosted glass, not white cards. */
.stats-card,
.activity-card {
  border-color: rgba(255, 255, 255, 0.62);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(237, 250, 255, 0.2));
  box-shadow:
    0 24px 60px rgba(27, 80, 113, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(28px) saturate(1.18);
  backdrop-filter: blur(28px) saturate(1.18);
}

.activity-button:hover {
  background: rgba(255, 255, 255, 0.16);
}

.activity-item {
  border-bottom-color: rgba(255, 255, 255, 0.42);
}

.activity-empty {
  border-color: rgba(255, 255, 255, 0.56);
  background: rgba(255, 255, 255, 0.12);
}

.activity-foot {
  border-top-color: rgba(255, 255, 255, 0.42);
}

.note-card {
  border-color: rgba(255, 255, 255, 0.7);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(233, 249, 255, 0.38));
  box-shadow:
    0 28px 65px rgba(27, 80, 113, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(26px) saturate(1.12);
  backdrop-filter: blur(26px) saturate(1.12);
}

.taste-track {
  background: rgba(255, 255, 255, 0.3);
}

.ring-track {
  stroke: rgba(255, 255, 255, 0.55);
}

/* Hero micro-panel picks up the same transparency. */
.hero-screening {
  width: fit-content;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
}

.hero-poster {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Modals become smoky glass over the sky. */
.modal-scrim {
  background: rgba(218, 239, 250, 0.62);
  -webkit-backdrop-filter: blur(26px) saturate(0.92);
  backdrop-filter: blur(26px) saturate(0.92);
}

.detail-panel {
  border-color: rgba(255, 255, 255, 0.7);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(239, 250, 255, 0.58));
  box-shadow:
    0 45px 110px rgba(19, 57, 82, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(38px) saturate(1.18);
  backdrop-filter: blur(38px) saturate(1.18);
}

.detail-content {
  background: transparent;
}

.detail-visual {
  background: rgba(218, 241, 252, 0.82);
}

.detail-visual-wash {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.4) 55%, rgba(255, 255, 255, 0.78) 100%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.66) 0%, transparent 50%);
}

.detail-tech {
  border-top-color: rgba(255, 255, 255, 0.55);
}

.modal-close {
  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}

.random-panel {
  border-color: rgba(255, 255, 255, 0.72);
  background:
    radial-gradient(circle at 50% 23%, rgba(228, 247, 255, 0.7), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.65), rgba(235, 249, 255, 0.44));
  box-shadow:
    0 45px 105px rgba(19, 57, 82, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(36px) saturate(1.18);
  backdrop-filter: blur(36px) saturate(1.18);
}

.random-poster-wrap {
  background: rgba(255, 255, 255, 0.76);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, 0.5),
    0 25px 55px rgba(24, 72, 102, 0.18);
}

.drawer-scrim {
  background: rgba(218, 239, 250, 0.58);
  -webkit-backdrop-filter: blur(14px) saturate(0.95);
  backdrop-filter: blur(14px) saturate(0.95);
}

.drawer-panel {
  border-left-color: rgba(255, 255, 255, 0.7);
  background:
    radial-gradient(circle at 82% 0%, rgba(232, 248, 255, 0.56), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(235, 249, 255, 0.5));
  box-shadow:
    -28px 0 90px rgba(19, 57, 82, 0.18),
    inset 1px 0 0 rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(34px) saturate(1.18);
  backdrop-filter: blur(34px) saturate(1.18);
}

.library-summary {
  border-color: rgba(255, 255, 255, 0.52);
}

.library-tabs {
  border-bottom-color: rgba(255, 255, 255, 0.52);
}

.library-item {
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

.library-item:hover {
  background: rgba(255, 255, 255, 0.16);
}

.drawer-foot {
  border-top-color: rgba(255, 255, 255, 0.52);
}

.toast {
  border-color: rgba(255, 255, 255, 0.72);
  border-left-color: var(--gold);
  background: rgba(255, 255, 255, 0.58);
  box-shadow:
    0 18px 45px rgba(19, 57, 82, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  backdrop-filter: blur(24px) saturate(1.2);
}

/* Mobile glass menu + comfort sizes. */
@media (max-width: 900px) {
  .site-header.is-scrolled {
    top: 8px;
    right: 9px;
    left: 9px;
    height: 58px;
    padding: 0 14px;
  }

  .detail-poster {
    top: auto;
    bottom: 18px;
    left: 22px;
    width: 104px;
  }

  .site-nav {
    border-color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.52);
    box-shadow:
      0 22px 50px rgba(19, 57, 82, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(28px) saturate(1.18);
    backdrop-filter: blur(28px) saturate(1.18);
  }

  .filter-panel {
    padding: 5px 15px;
    border-radius: 19px;
  }

  .detail-panel {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(239, 250, 255, 0.68));
  }

  .drawer-panel {
    background:
      radial-gradient(circle at 82% 0%, rgba(232, 248, 255, 0.56), transparent 30%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(235, 249, 255, 0.62));
  }
}

@media (max-width: 620px) {
  .filter-panel {
    padding: 4px 12px;
    border-radius: 17px;
  }

  .detail-poster {
    bottom: 14px;
    left: 16px;
    width: 86px;
  }

  .card-info {
    margin-top: 7px;
    padding: 10px 11px 12px;
    border-radius: 11px;
  }

  .hero-screening {
    padding: 7px 11px;
  }

  .stats-card,
  .activity-card,
  .note-card {
    border-radius: 16px;
  }

  .journal-heading .heading-row h2 {
    font-size: clamp(34px, 10.2vw, 50px);
    line-height: 1.16;
  }
}

/* If the browser cannot blur, keep the UI readable with more opacity. */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .site-header.is-scrolled,
  .site-nav,
  .filter-panel,
  .stats-card,
  .activity-card,
  .note-card,
  .detail-panel,
  .random-panel,
  .drawer-panel,
  .toast {
    background: rgba(250, 253, 255, 0.94);
  }
}