/* A single brand entrance; small feedback only where a visitor acts. */
.ys-intro { display: none; }
html.ys-intro-active .ys-intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 80;
  pointer-events: none; overflow: hidden; background: var(--ambient-base);
}
.ys-intro::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 34% 42% at 50% 44%, #ecc67b32, transparent 80%),
    radial-gradient(ellipse 64% 64% at 20% 12%, var(--ambient-blue), transparent 80%),
    radial-gradient(ellipse 55% 65% at 92% 88%, var(--ambient-lilac), transparent 80%);
}
.ys-intro-stage { position: relative; display: flex; flex-direction: column; align-items: center; }
.ys-intro-orbit {
  position: absolute; width: 282px; height: 282px; top: -89px;
  border: 1px solid #be995728; border-radius: 50%;
  box-shadow: 0 0 80px #d6ab4610, inset 0 0 64px #d6ab4609;
}
.ys-intro-orbit::before {
  content: ''; position: absolute; inset: 24px; border: 1px solid #be995717; border-radius: 50%;
}
.ys-intro-orbit::after {
  content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%;
  left: 38px; top: 36px; background: #e0b359; box-shadow: 0 0 12px #e0b37c;
}
.ys-intro-emblem { width: 104px; height: 104px; position: relative; }
.ys-intro-emblem img { width: 100%; height: 100%; filter: drop-shadow(0 12px 18px #b17b2228); }
.ys-intro-outline { position: absolute; inset: 0; width: 100%; height: 100%; color: #c59230; }
.ys-intro-outline path { stroke-width: .65; stroke-dasharray: 180; stroke-dashoffset: 180; }
.ys-intro-sweep {
  position: absolute; inset: 12px 0; pointer-events: none; overflow: hidden;
  mask: url('/logo-gold-ingot.svg') center / 104px 104px no-repeat;
  -webkit-mask: url('/logo-gold-ingot.svg') center / 104px 104px no-repeat;
}
.ys-intro-sweep::after {
  content: ''; display: block; width: 24px; height: 120px;
  background: linear-gradient(90deg, transparent, #fff9d4d9, transparent);
  transform: translateX(-40px) skewX(-20deg);
}
html.ys-intro-active .ys-intro-outline path { animation: ys-outline 400ms ease-out forwards; }
html.ys-intro-active .ys-intro-emblem img { animation: ys-materialize 430ms ease-out both; }
html.ys-intro-active .ys-intro-sweep::after { animation: ys-gold-sweep 520ms 80ms ease-in-out both; }
.ys-intro-title { margin: 22px 0 6px; font-size: 27px; font-weight: 650; letter-spacing: -.8px; }
.ys-intro-caption { margin: 0; font-size: 11px; letter-spacing: 3px; color: var(--sub); }
.ys-intro-index { display: flex; gap: 15px; margin-top: 30px; font-size: 9px; letter-spacing: 1px; color: var(--sub); }
.ys-intro-index span + span::before { content: '/'; margin-right: 15px; opacity: .35; }
.ys-intro-flight { position: fixed; pointer-events: none; z-index: 81; filter: drop-shadow(0 4px 9px #c1953020); }
.ys-preview-replay {
  position: fixed; right: 14px; bottom: 111px; z-index: 12;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px; border: 1px solid #c3a46565; border-radius: 20px;
  background: var(--panel); color: var(--text); font-size: 10px;
  box-shadow: 0 4px 18px #172f5810;
}
.ys-preview-replay img { width: 20px; height: 20px; }
.ys-preview-replay:disabled { cursor: default; opacity: .6; }
.search-form { transition: border-color 200ms, box-shadow 200ms, transform 200ms; }
.search-form:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px #4e85ec12, 0 10px 34px #385f9e15; }
.resource-card, .eco-card, .sponsor-card { transition: transform 180ms ease, border-color 180ms, box-shadow 180ms; }
.save { transition: color 150ms, transform 150ms; border-radius: 50%; }
.save.saved { color: #cf9b33; }
.save:focus-visible { outline-offset: 0; }
.search-form button, .shortcut, .catalog-tabs button, .theme-toggle, .float-tools button, .ys-preview-replay {
  transition: background-color 180ms, border-color 180ms, box-shadow 180ms, transform 150ms;
}
button:active, a.eco-card:active { transform: scale(.98); }
.save:active { transform: scale(.85); }
html.ys-theme-transition body, html.ys-theme-transition .resource-card,
html.ys-theme-transition .eco-card, html.ys-theme-transition .sponsor-card,
html.ys-theme-transition .sidebar, html.ys-theme-transition .topbar,
html.ys-theme-transition .personal, html.ys-theme-transition .latest-box,
html.ys-theme-transition .footer, html.ys-theme-transition .search-form {
  transition: background-color 300ms, color 250ms, border-color 250ms, box-shadow 250ms;
}
.ys-theme-wash { position: fixed; inset: 0; pointer-events: none; z-index: 70; background: var(--ambient-base); }
.ys-save-ring { position: fixed; width: 25px; height: 25px; border: 1px solid #d1a547; border-radius: 50%; pointer-events: none; z-index: 40; }
@keyframes ys-outline { to { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ys-materialize { from { opacity: 0; transform: scale(.9) translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes ys-gold-sweep { to { transform: translateX(140px) skewX(-20deg); } }
@media (hover: hover) and (pointer: fine) {
  .resource-card:hover, .eco-card:hover, .sponsor-card:hover {
    transform: translateY(-3px); border-color: #bba16f80;
    box-shadow: 0 8px 20px #38517c10, inset 0 1px 0 #ffffff25;
  }
  .save:hover { transform: scale(1.2); color: #cf9b33; }
  .shortcut:hover, .ys-preview-replay:hover { box-shadow: inset 0 0 0 1px #c3a46565; }
}
@media (max-width: 520px) {
  .ys-intro-orbit { width: 230px; height: 230px; top: -63px; }
  .ys-preview-replay { right: 8px; bottom: 96px; padding: 7px 9px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html.ys-intro-active .ys-intro, .ys-intro-flight, .ys-save-ring, .ys-theme-wash { display: none; }
  .ys-intro *, .ys-preview-replay, .resource-card, .eco-card, .sponsor-card { animation: none !important; transition: none !important; transform: none !important; }
}
@media (forced-colors: active) { .ys-intro { display: none !important; } }