/* The page itself: pale blue glass with a band of light and fine grain, in plain CSS. The layer is
   fixed and promoted, so scrolling moves the page over it without a repaint; iOS has no
   background-attachment: fixed, and a fixed pseudo-element works there too. */
html { background: #e8f2fb; }
body, body.fd { background: transparent; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; transform: translateZ(0);
  background:
    url(/web/img/grain.png) 0 0 / 160px 160px,
    linear-gradient(112deg, rgba(255,255,255,0) 24%, rgba(255,255,255,.6) 38%, rgba(255,255,255,0) 52%),
    linear-gradient(112deg, rgba(255,255,255,0) 58%, rgba(255,255,255,.42) 68%, rgba(255,255,255,0) 78%),
    radial-gradient(60% 52% at 92% 4%, #c4e2fd 0, rgba(196,226,253,0) 72%),
    radial-gradient(54% 48% at 4% 34%, #ffffff 0, rgba(255,255,255,0) 72%),
    radial-gradient(66% 54% at 96% 96%, #b4d9fb 0, rgba(180,217,251,0) 72%),
    radial-gradient(52% 46% at 6% 98%, #d6e9fc 0, rgba(214,233,252,0) 72%),
    #e8f2fb;
}
/* The blue hero melts into the page instead of ending on a line. */
.hero::before {
  height: 760px;
  background: linear-gradient(180deg, #1e9cf0 0, #4fb4f5 22%, rgba(120,196,250,.6) 48%, rgba(190,226,252,.24) 74%, rgba(190,226,252,0) 100%);
}

/* The menu: over the blue hero it stays white on glass; once the page moves under it the bar
   turns to clear glass and everything on it goes dark, so it reads over any block. */
.top nav {
  background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.12));
  border-color: rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 22px rgba(10,60,110,.14);
  -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8);
}
.top::before {
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.46));
  border-bottom: 1px solid rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 #fff, 0 10px 28px rgba(20,60,110,.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
}
.logo, .top nav a, .top-login, .lang, .burger i { transition: color .25s ease, background-color .25s ease, border-color .25s ease; }
.top.stuck .logo, .top.stuck .top-login, .top.stuck .lang { color: var(--ink); }
.top.stuck .lang, .top.stuck .burger { border-color: rgba(16,20,24,.16); }
.top.stuck .lang:hover { background: rgba(16,20,24,.06); }
.top.stuck .burger i { background: var(--ink); }
.top.stuck nav { background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.4)); border-color: rgba(255,255,255,.9); box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(20,60,110,.1); }
.top.stuck nav a { color: var(--ink); }
.top.stuck nav a:hover { background: rgba(30,156,240,.1); }
.top.stuck nav a.on { color: #fff; background: linear-gradient(180deg, #3fb0f5, var(--blue)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 14px rgba(30,156,240,.3); }
.top.stuck .top-try { background: linear-gradient(180deg, #3fb0f5, var(--blue)); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 20px rgba(30,156,240,.3); }
.top.stuck .logo:focus-visible, .top.stuck .lang:focus-visible, .top.stuck .burger:focus-visible, .top.stuck .top-try:focus-visible { outline-color: var(--blue); }
@media (max-width: 960px) {
  .top.open nav, .top.stuck.open nav {
    background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.76));
    -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
  }
  .top.open nav a.on, .top.stuck.open nav a.on { color: var(--blue); background: rgba(30,156,240,.12); box-shadow: none; }
}

/* Liquid glass on the feed and the shelf: light from above, a bright rim, what is behind showing
   through. Only controls get it: a blur on every card would slow scrolling on phones. */
.fd-top {
  background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(255,255,255,.4));
  border-bottom: 1px solid rgba(255,255,255,.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 26px rgba(10,60,110,.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
}
.fd-moods { background: none; }
.fd-moods button, .show-tabs button, .show-lucky, .fd-btn, .fd-saved {
  background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.5));
  border-color: rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(10,60,110,.05), 0 6px 16px rgba(10,60,110,.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.7); backdrop-filter: blur(12px) saturate(1.7);
}
.fd-moods button[aria-selected="true"], .show-tabs button[aria-selected="true"] {
  background: linear-gradient(180deg, rgba(40,46,54,.86), rgba(16,20,24,.8));
  border-color: rgba(255,255,255,.22); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px rgba(16,20,24,.24);
}
.gender {
  background: rgba(255,255,255,.5); box-shadow: inset 0 1px 2px rgba(10,60,110,.12), 0 0 0 1px rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(12px) saturate(1.7); backdrop-filter: blur(12px) saturate(1.7);
}
.show-tabs .gender button, .fd-moods .gender button { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.show-tabs .gender button[aria-pressed="true"], .fd-moods .gender button[aria-pressed="true"] { background: #fff; box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(10,60,110,.16); }
.show-badge {
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.56));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 16px rgba(10,60,110,.16);
}
.fd-love svg {
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.56));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 12px rgba(10,60,110,.14);
}
.fd-bar button {
  background: linear-gradient(180deg, rgba(90,190,250,.86), rgba(30,156,240,.82));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 14px 32px rgba(30,156,240,.36);
  -webkit-backdrop-filter: blur(14px) saturate(1.7); backdrop-filter: blur(14px) saturate(1.7);
}

/* Every card. Sheen, bright rim and inner light make the glass; the only blur here is the hero
   card's, because a blur over a plain page shows nothing and costs a repaint on each scroll. */
.fd-card, .show-card, .h-card, .bs-card, .ext-card, .brm-card, .plan, .feat, .glass-tile,
.v-grid > li, .grid article, .split > div, #faq details {
  background: linear-gradient(155deg, rgba(255,255,255,.94) 0%, rgba(233,245,254,.66) 52%, rgba(255,255,255,.84) 100%);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow:
    inset 0 2px 1px #fff,
    inset 0 -6px 14px rgba(255,255,255,.65),
    inset 0 0 0 1px rgba(30,156,240,.05),
    0 16px 36px rgba(20,60,110,.12),
    0 2px 6px rgba(20,60,110,.06);
}
.plan.featured { border: 2px solid var(--blue); box-shadow: inset 0 2px 1px #fff, inset 0 -6px 14px rgba(255,255,255,.65), 0 24px 50px rgba(30,156,240,.25); }

/* Product cards: the photo sits inside a glass frame. */
.fd-card, .show-card { box-sizing: border-box; padding: 8px 8px 12px; border-radius: 28px; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
.fd-try, .show-shot { border-radius: 21px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 6px 16px rgba(20,60,110,.12); }
.fd-love { top: 14px; right: 14px; }
.show-badge { left: 8px; bottom: 8px; }
.show-skel { border-radius: 28px; }
@media (hover: hover) {
  .fd-card:hover, .show-card:hover { transform: translateY(-3px); box-shadow: inset 0 2px 1px #fff, inset 0 -6px 14px rgba(255,255,255,.65), 0 24px 46px rgba(30,156,240,.2); }
}

/* The two dark and blue cards in the feed: the same glass, tinted. */
.fd-fork, .fd-style { border-radius: 28px; border: 1px solid rgba(255,255,255,.3); box-shadow: inset 0 2px 1px rgba(255,255,255,.4), inset 0 -8px 18px rgba(255,255,255,.08), 0 16px 36px rgba(20,60,110,.18); }
.fd-fork { background: linear-gradient(155deg, rgba(58,66,78,.96), rgba(16,20,24,.94) 60%); }
.fd-style { background: linear-gradient(155deg, #58bcf8, #1e9cf0 50%, #0f6fc0); }
.fd-sides button { box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }

@media (max-width: 680px) {
  .fd-card, .show-card { padding: 8px 8px 12px; border-radius: 22px; }
  .fd-try, .show-shot { border-radius: 17px; }
  .fd-love { top: 10px; right: 10px; }
  .fd-fork, .fd-style { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .fd-card, .show-card { transition: none; }
}

/* Browsers without backdrop blur still need readable controls. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .top::before, .fd-top, .fd-moods button:not([aria-selected="true"]), .show-tabs button:not([aria-selected="true"]), .show-lucky, .fd-btn, .fd-saved { background: rgba(255,255,255,.94); }
  .fd-bar button { background: var(--blue); }
}