/* entry-glass-20261004-1 — six destinations in one quiet glass collection. */
.motion-site .entry-gallery {
  --entry-ink: #273652;
  --entry-muted: #5b6983;
  --entry-surface: rgba(255,255,255,.34);
  --entry-shadow: rgba(70,88,142,.09);
  --entry-rule: rgba(100,123,163,.15);
  --entry-icon-surface: rgba(255,255,255,.48);
}
.motion-site .entry-gallery .section-heading { margin-bottom: 22px; }
.motion-site .entry-gallery .card-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
  perspective: 1100px;
}
.motion-site .entry-gallery .destination {
  --entry-accent: #6c6eb6;
  --entry-glow: rgba(162,140,233,.39);
  --entry-reflection: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: 25px 26px 20px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 24px;
  color: var(--entry-ink);
  background: var(--entry-surface);
  box-shadow: 0 10px 28px var(--entry-shadow), inset 0 2px 3px rgba(255,255,255,.72), inset 0 -2px 8px rgba(155,171,222,.2);
  backdrop-filter: blur(12px) saturate(1.38);
  -webkit-backdrop-filter: blur(12px) saturate(1.38);
  transform-style: preserve-3d;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .3s ease;
}
.motion-site .entry-gallery .destination.library { --entry-accent: #597c9c; --entry-glow: rgba(112,195,220,.43); }
.motion-site .entry-gallery .destination.notes { --entry-accent: #8d6998; --entry-glow: rgba(218,144,196,.37); }
.motion-site .entry-gallery .destination.collection { --entry-accent: #696daf; --entry-glow: rgba(139,148,224,.42); }
.motion-site .entry-gallery .destination.score-card { --entry-accent: #94719a; --entry-glow: rgba(222,151,203,.41); }
.motion-site .entry-gallery .destination.dance-card { --entry-accent: #4f827e; --entry-glow: rgba(109,202,186,.4); }
.motion-site .entry-gallery .destination::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 1;
  transform: none;
  background:
    radial-gradient(ellipse 44% 38% at var(--card-lx,50%) var(--card-ly,35%),rgba(255,255,255,var(--entry-reflection)),transparent 100%),
    radial-gradient(ellipse 115% 110% at 105% -8%,transparent 40%,rgba(255,255,255,.42) 41%,rgba(255,255,255,.08) 46%,transparent 56%),
    radial-gradient(ellipse 110% 95% at -12% 105%,transparent 48%,rgba(255,255,255,.33) 49%,transparent 58%),
    radial-gradient(ellipse at 96% 4%,var(--entry-glow),transparent 70%),
    radial-gradient(ellipse at 4% 98%,rgba(102,201,226,.3),transparent 66%),
    radial-gradient(ellipse at 88% 96%,rgba(225,154,199,.22),transparent 57%),
    linear-gradient(124deg,rgba(255,255,255,.57),rgba(255,255,255,.12) 34%,rgba(255,255,255,.36) 58%,rgba(193,183,244,.14) 78%,rgba(255,255,255,.3));
}
.motion-site .entry-gallery .destination::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 1px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(130deg,rgba(255,255,255,.95),rgba(151,218,239,.62) 22%,rgba(221,176,226,.24) 43%,rgba(255,255,255,.2) 55%,rgba(183,165,240,.54) 78%,rgba(249,186,214,.64)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
  box-shadow: none;
}
.motion-site .entry-gallery .card-top { display: flex; flex-wrap: nowrap; align-items: center; gap: 11px; margin-bottom: 22px; }
.motion-site .entry-gallery .tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.68);
  color: var(--entry-accent);
  background: linear-gradient(140deg,rgba(255,255,255,.4),var(--entry-glow)),var(--entry-icon-surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72),0 4px 10px rgba(90,112,149,.05);
  transform: none;
}
.motion-site .entry-gallery .tile-icon .icon { width: 23px; height: 23px; }
.motion-site .entry-gallery .badge { display: inline-flex; color: var(--entry-muted); font-size: 12px; white-space: nowrap; }
.motion-site .entry-gallery .card-top .arrow { width: 17px; height: 17px; color: var(--entry-accent); opacity: .7; }
.motion-site .entry-gallery .card-kicker { color: var(--entry-accent); font-size: 10px; line-height: 1.5; letter-spacing: .16em; margin: 0 0 7px; }
.motion-site .entry-gallery .destination h3 { color: var(--entry-ink); font-size: 21px; line-height: 1.45; letter-spacing: -.025em; margin: 0 0 9px; }
.motion-site .entry-gallery .destination > p:not(.card-kicker) { color: var(--entry-muted); font-size: 13px; line-height: 1.85; margin: 0 0 21px; }
.motion-site .entry-gallery .card-cta { color: var(--entry-ink); margin-top: auto; padding-top: 14px; border-top: 1px solid var(--entry-rule); font-size: 12px; }
.motion-site .entry-gallery .card-cta > span { color: var(--entry-accent); }
.motion-site .entry-gallery .destination:hover,
.motion-site .entry-gallery .destination:focus-visible {
  transform: none !important;
  background: var(--entry-surface);
  border-color: rgba(255,255,255,.82);
  box-shadow: 0 16px 32px var(--entry-shadow),inset 0 1px 0 rgba(255,255,255,.7);
}
.motion-site .entry-gallery .destination:hover::before,
.motion-site .entry-gallery .destination:focus-visible::before { opacity: 1; transform: none; }
.motion-site .entry-gallery .destination:hover .tile-icon,
.motion-site .entry-gallery .destination:focus-visible .tile-icon { transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.72),0 4px 14px var(--entry-glow); }
.motion-site .entry-gallery .destination:focus-visible { outline: 2px solid var(--entry-accent); outline-offset: 4px; }
html[data-theme="dark"] .motion-site .entry-gallery {
  --entry-ink: #e8edf8;
  --entry-muted: #b3bed2;
  --entry-surface: rgba(19,27,46,.53);
  --entry-shadow: rgba(0,0,0,.2);
  --entry-rule: rgba(183,203,238,.15);
  --entry-icon-surface: rgba(138,166,208,.08);
}
html[data-theme="dark"] .motion-site .entry-gallery .destination { --entry-accent: #b4b8e9; border-color: rgba(168,193,235,.17); }
html[data-theme="dark"] .motion-site .entry-gallery .destination.library,
html[data-theme="dark"] .motion-site .entry-gallery .destination.dance-card { --entry-accent: #a0d7da; }
html[data-theme="dark"] .motion-site .entry-gallery .destination.notes,
html[data-theme="dark"] .motion-site .entry-gallery .destination.score-card { --entry-accent: #dbb7d9; }
html[data-theme="dark"] .motion-site .entry-gallery .destination::before { opacity: .68; }
html[data-theme="dark"] .motion-site .entry-gallery .destination::after { opacity: .48; }
html[data-theme="dark"] .motion-site .entry-gallery .tile-icon { border-color: rgba(197,216,251,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
/* Ordinary night mode uses smoked glass: color stays within the dark scene,
   while the small pointer reflection becomes visible during interaction. */
html[data-theme="dark"] body.motion-site:not(.yu7-selected) .entry-gallery {
  --entry-surface: rgba(12,17,29,.52);
  --entry-shadow: rgba(0,0,0,.16);
  --entry-rule: rgba(154,177,219,.11);
  --entry-icon-surface: rgba(130,158,205,.035);
}
html[data-theme="dark"] body.motion-site:not(.yu7-selected) .entry-gallery .destination {
  background: var(--entry-surface);
  border-color: rgba(174,194,237,.105);
  box-shadow: 0 10px 28px rgba(0,0,0,.16),inset 0 1px 0 rgba(200,220,255,.06);
}
html[data-theme="dark"] body.motion-site:not(.yu7-selected) .entry-gallery .destination::before {
  opacity: .52;
  background:
    radial-gradient(ellipse 38% 32% at var(--card-lx,50%) var(--card-ly,35%),rgba(175,200,244,var(--entry-reflection)),transparent 100%),
    radial-gradient(ellipse 115% 110% at 105% -8%,transparent 40%,rgba(192,212,255,.07) 41%,transparent 53%),
    radial-gradient(ellipse at 98% 0,var(--entry-glow),transparent 72%),
    radial-gradient(ellipse at 0 100%,rgba(85,173,202,.13),transparent 64%),
    radial-gradient(ellipse at 96% 100%,rgba(188,110,172,.1),transparent 57%);
}
html[data-theme="dark"] body.motion-site:not(.yu7-selected) .entry-gallery .destination::after { opacity: .2; }
html[data-theme="dark"] body.motion-site:not(.yu7-selected) .entry-gallery .tile-icon {
  background: linear-gradient(140deg,rgba(149,172,218,.08),var(--entry-glow)),rgba(17,23,39,.3);
  border-color: rgba(166,191,230,.13);
  box-shadow: inset 0 1px 0 rgba(203,218,247,.09);
}
html[data-theme="dark"] body.motion-site:not(.yu7-selected) .entry-gallery .destination:hover,
html[data-theme="dark"] body.motion-site:not(.yu7-selected) .entry-gallery .destination:focus-visible {
  background: var(--entry-surface);
  border-color: rgba(174,194,237,.18);
  box-shadow: 0 22px 42px rgba(0,0,0,.26),inset 0 1px 0 rgba(200,220,255,.12);
}
html[data-theme="dark"] body.motion-site:not(.yu7-selected) .entry-gallery .destination:hover::before,
html[data-theme="dark"] body.motion-site:not(.yu7-selected) .entry-gallery .destination:focus-visible::before { opacity: .73; }
html[data-theme="dark"] body.motion-site:not(.yu7-selected) .entry-gallery .destination:hover::after,
html[data-theme="dark"] body.motion-site:not(.yu7-selected) .entry-gallery .destination:focus-visible::after { opacity: .34; }
/* The optional car world keeps the existing scene palette under these cards. */
html body.motion-site.yu7-selected .entry-gallery {
  --entry-ink: #e3eaf0;
  --entry-muted: #c7d3df;
  --entry-surface: rgba(255,255,255,.04);
  --entry-shadow: rgba(0,0,0,.12);
  --entry-rule: rgba(255,255,255,.15);
  --entry-icon-surface: rgba(255,255,255,.04);
}
html body.motion-site.yu7-selected .entry-gallery .card-grid .destination {
  --entry-accent: #c3d4e6;
  --entry-glow: rgba(180,203,223,.2);
  box-shadow: 0 10px 24px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.12);
}
html body.motion-site.yu7-selected .entry-gallery .card-grid .destination::before { opacity: .14; }
html body.motion-site.yu7-selected .entry-gallery .card-grid .destination::after { opacity: .25; }
html body.motion-site.yu7-selected .entry-gallery .card-grid .tile-icon { background: rgba(255,255,255,.06); color: #d3e1ed; border-color: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
html body.motion-site.yu7-selected .entry-gallery .card-top .arrow,
html body.motion-site.yu7-selected .entry-gallery .card-cta > span { color: #cad8e4; }
/* Give the merged navigation the same tinted volume without changing its
   existing scroll morph, hit areas, or the automotive world's palette. */
body.motion-site.ambient-page:not(.yu7-selected) {
  --entry-nav-glass: radial-gradient(ellipse at 7% 0,rgba(140,220,239,.34),transparent 48%),radial-gradient(ellipse at 94% 100%,rgba(222,164,222,.29),transparent 48%),linear-gradient(115deg,rgba(255,255,255,.76),rgba(224,232,255,.5) 44%,rgba(255,255,255,.64));
  --entry-nav-edge: rgba(255,255,255,.85);
  --entry-nav-shadow: inset 0 2px 2px rgba(255,255,255,.82),inset 0 -2px 5px rgba(166,172,225,.19),0 12px 34px rgba(76,91,143,.13);
}
body.motion-site.ambient-page:not(.yu7-selected) .header.is-scrolled {
  background: var(--entry-nav-glass) !important;
  border-color: var(--entry-nav-edge) !important;
  box-shadow: var(--entry-nav-shadow) !important;
}
body.motion-site.ambient-page:not(.yu7-selected) .header.is-scrolled::before {
  background: radial-gradient(ellipse 72% 300% at 80% -105%,transparent 48%,rgba(255,255,255,.3) 50%,transparent 53%),linear-gradient(115deg,transparent 20%,rgba(255,255,255,.22) 48%,transparent 72%);
}
html[data-theme="dark"] body.motion-site.ambient-page:not(.yu7-selected) {
  --entry-nav-glass: radial-gradient(ellipse at 7% 0,rgba(92,162,192,.22),transparent 48%),radial-gradient(ellipse at 94% 100%,rgba(155,108,172,.24),transparent 48%),linear-gradient(115deg,rgba(23,34,57,.86),rgba(22,26,46,.72) 44%,rgba(39,29,56,.84));
  --entry-nav-edge: rgba(189,203,243,.3);
  --entry-nav-shadow: inset 0 1px 2px rgba(229,237,255,.25),inset 0 -1px 4px rgba(164,146,218,.18),0 12px 34px rgba(0,0,0,.25);
}
/* Only the existing sign-in dialog receives this material. The wallpaper,
   authenticated workspace, dialog geometry and form behavior are untouched. */
body.ink-login-screen #login-panel.ink-login #open-access {
  isolation: isolate;
  color: #293b55;
  border-color: rgba(255,255,255,.88);
  background:
    radial-gradient(ellipse at 0 8%,rgba(139,214,232,.35),transparent 65%),
    radial-gradient(ellipse at 100% 0,rgba(175,157,234,.35),transparent 65%),
    radial-gradient(ellipse at 98% 100%,rgba(230,162,201,.3),transparent 62%),
    linear-gradient(140deg,rgba(255,255,255,.8),rgba(242,247,255,.68) 50%,rgba(249,246,255,.7));
  box-shadow: 0 28px 85px rgba(37,50,78,.25),inset 0 2px 3px rgba(255,255,255,.95),inset 0 -2px 10px rgba(159,173,222,.24);
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
}
body.ink-login-screen #login-panel.ink-login #open-access::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse 150% 95% at 120% -12%,transparent 45%,rgba(255,255,255,.52) 46%,transparent 54%),radial-gradient(ellipse 130% 110% at -25% 115%,transparent 45%,rgba(255,255,255,.26) 46%,transparent 57%);
}
body.ink-login-screen #login-panel.ink-login #open-access::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(140deg,rgba(255,255,255,.98),rgba(123,207,230,.68) 28%,rgba(211,169,232,.42) 48%,rgba(255,255,255,.75) 60%,rgba(226,161,202,.75)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
body.ink-login-screen #login-panel.ink-login #open-access::backdrop {
  background: rgba(37,48,66,.2);
  backdrop-filter: blur(8px) saturate(.85);
  -webkit-backdrop-filter: blur(8px) saturate(.85);
}
body.ink-login-screen #login-panel.ink-login #open-access #open-access-title { color: #293a55; }
body.ink-login-screen #login-panel.ink-login #open-access #open-welcome,
body.ink-login-screen #login-panel.ink-login #open-access #open-password-hint,
body.ink-login-screen #login-panel.ink-login #open-access .open-form-eyebrow { color: #5b6b82; }
body.ink-login-screen #login-panel.ink-login #open-access #login-form label { color: #405872; }
body.ink-login-screen #login-panel.ink-login #open-access #password {
  background: linear-gradient(120deg,rgba(255,255,255,.71),rgba(245,247,255,.46));
  border-color: rgba(139,166,199,.53);
  color: #293e55;
  box-shadow: inset 0 1px 3px rgba(67,94,123,.07),0 1px 0 rgba(255,255,255,.78);
}
body.ink-login-screen #login-panel.ink-login #open-access #password:focus-visible { outline: 2px solid #748dbd; outline-offset: 3px; }
body.ink-login-screen #login-panel.ink-login #open-access #login-form .primary {
  border-color: rgba(105,130,175,.65);
  background: radial-gradient(ellipse at 8% 0,rgba(155,221,235,.38),transparent 65%),radial-gradient(ellipse at 94% 100%,rgba(218,164,224,.36),transparent 70%),linear-gradient(115deg,#436a88,#63628e);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(231,245,255,.5),inset 0 -1px 2px rgba(51,62,96,.18),0 7px 18px rgba(76,96,149,.18);
}
body.ink-login-screen #login-panel.ink-login #open-access #login-form .primary:hover { filter: brightness(1.07); }
body.ink-login-screen #login-panel.ink-login #open-access .open-close {
  background: linear-gradient(140deg,rgba(255,255,255,.75),rgba(214,226,246,.4));
  border-color: rgba(255,255,255,.86);
  color: #526783;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.8),0 3px 10px rgba(62,85,125,.06);
}
body.ink-login-screen #login-panel.ink-login #open-access .open-reveal { color: #607494; }
body.ink-login-screen #login-panel.ink-login #open-access .open-reveal:hover { background: rgba(165,193,225,.22); }
body.ink-login-screen #login-panel.ink-login #open-access .open-card-foot { color: #63758e; border-color: rgba(137,166,202,.25); }
@media (max-width: 800px) {
  body.motion-site.ambient-page:not(.yu7-selected) .header,
  body.motion-site.ambient-page:not(.yu7-selected) .header:not(.is-scrolled) {
    background: var(--entry-nav-glass) !important;
    border-color: var(--entry-nav-edge) !important;
    box-shadow: var(--entry-nav-shadow) !important;
  }
}
@media (max-width: 1000px) {
  .motion-site .entry-gallery .card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
}
@media (max-width: 600px) {
  .motion-site .entry-gallery .section-heading { margin-bottom: 18px; gap: 6px; }
  .motion-site .entry-gallery .section-heading > span { font-size: 12px; }
  .motion-site .entry-gallery .card-grid { grid-template-columns: minmax(0,1fr); gap: 13px; }
  .motion-site .entry-gallery .destination { padding: 21px 23px 18px; border-radius: 22px; }
  .motion-site .entry-gallery .card-top { margin-bottom: 16px; }
  .motion-site .entry-gallery .destination h3 { font-size: 20px; }
  .motion-site .entry-gallery .destination > p:not(.card-kicker) { margin-bottom: 16px; }
  .motion-site .entry-gallery .destination > p br { display: block; }
}
/* entry-motion-20261004-1: reuse the existing pointer tilt and light position.
   The mouse effect is deliberately opt-in; touch, frozen and reduced-motion
   states keep a stable card, including while focused or pressed. */
.motion-site .entry-gallery .destination h3,
.motion-site .entry-gallery .destination .card-cta > span {
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .motion-site .entry-gallery .destination:hover,
  .motion-site .entry-gallery .destination:focus-visible {
    --entry-reflection: .48;
    transform: perspective(1000px) translate3d(0,-9px,18px) rotateX(calc(2deg + var(--card-rx,0deg))) rotateY(calc(-2deg + var(--card-ry,0deg))) scale(1.018) !important;
    box-shadow: 0 24px 48px var(--entry-shadow),inset 0 2px 3px rgba(255,255,255,.72),inset 0 -2px 8px rgba(155,171,222,.2);
  }
  .motion-site .entry-gallery .destination.is-tilting {
    transform: perspective(1000px) translate3d(0,calc(-9px * var(--card-lift,0)),calc(18px * var(--card-lift,0))) rotateX(calc(2deg * var(--card-lift,0) + var(--card-rx,0deg))) rotateY(calc(-2deg * var(--card-lift,0) + var(--card-ry,0deg))) scale(calc(1 + .018 * var(--card-lift,0))) !important;
    transition: box-shadow .3s ease,background .3s ease;
  }
  .motion-site .entry-gallery .destination:hover .tile-icon,
  .motion-site .entry-gallery .destination:focus-visible .tile-icon {
    transform: translate3d(0,-5px,26px) rotate(-7deg) scale(1.1);
  }
  .motion-site .entry-gallery .destination:hover h3,
  .motion-site .entry-gallery .destination:focus-visible h3 { transform: translate3d(0,-2px,14px); }
  .motion-site .entry-gallery .destination:hover .card-top .arrow,
  .motion-site .entry-gallery .destination:focus-visible .card-top .arrow { transform: translate3d(4px,-4px,18px); }
  .motion-site .entry-gallery .destination:hover .card-cta > span,
  .motion-site .entry-gallery .destination:focus-visible .card-cta > span { transform: translateX(5px); }
}
html body.motion-site:has(#motion-pause:checked, #private-motion-pause:checked) .entry-gallery .destination {
  --entry-reflection: 0;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
html body.motion-site:has(#motion-pause:checked, #private-motion-pause:checked) .entry-gallery .destination *,
html body.motion-site:has(#motion-pause:checked, #private-motion-pause:checked) .entry-gallery .destination::before,
html body.motion-site:has(#motion-pause:checked, #private-motion-pause:checked) .entry-gallery .destination::after { transform: none !important; transition: none !important; animation: none !important; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  html body.motion-site .entry-gallery .destination {
    --entry-reflection: 0;
    transform: none !important;
    transition: none !important;
  }
  html body.motion-site .entry-gallery .destination *:not(.score-flow-track),
  html body.motion-site .entry-gallery .destination::before,
  html body.motion-site .entry-gallery .destination::after { transform: none !important; transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
  .motion-site .entry-gallery .destination { background: Canvas; border-color: CanvasText; color: CanvasText; }
  .motion-site .entry-gallery .destination::before,
  .motion-site .entry-gallery .destination::after { display: none; }
}