/* Shree 777 landing, round-2 designs: shared effect styles (toast, ripple, skeleton shimmer, reveal).
   Colours come from the theme's variables; flat colours only. Every hidden-before-reveal state is behind
   .js AND prefers-reduced-motion: no-preference, so JS-off and reduced-motion visitors see everything. */
.s7-toasts { position: fixed; z-index: 60; left: 50%; top: 12px; transform: translateX(-50%); width: min(420px, calc(100% - 24px)); display: grid; gap: 8px; pointer-events: none; }
.s7-toast { pointer-events: auto; display: block; text-decoration: none; background: #fff; color: var(--ink); border: 1px solid var(--line); border-left: 5px solid var(--amber); border-radius: 12px; padding: 10px 14px; box-shadow: 0 10px 28px rgba(58, 42, 0, .18); opacity: 0; transform: translateY(-10px); transition: opacity .3s, transform .3s; }
.s7-toast.on { opacity: 1; transform: none; }
.s7-toast b { display: block; font-weight: 800; }
.s7-toast span { display: block; font: 700 1.05rem var(--fm); color: var(--accent); }
[data-ripple] { position: relative; overflow: hidden; }
.s7-rip { position: absolute; border-radius: 50%; background: currentColor; opacity: .22; transform: scale(0); animation: s7rip .6s ease-out forwards; pointer-events: none; }
@keyframes s7rip { to { transform: scale(1); opacity: 0; } }
/* Skeleton shimmer while live.json is being fetched (html.s7-busy, set by fx.js). Flat colour band. */
.s7-sk { position: relative; overflow: hidden; }
.s7-busy .s7-sk::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .55); transform: translateX(-100%); animation: s7sk 1s ease-in-out infinite; pointer-events: none; }
@keyframes s7sk { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
  .js .rv.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .s7-busy .s7-sk::after { animation: none; transform: none; background: rgba(255, 255, 255, .35); } }
/* 200% page zoom (~195px viewport): the round-2 download docks shrink to just the button */
@media (max-width: 300px) {
  [class*="-dock"] > img, [class*="-dock"] > span:nth-child(2) { display: none; }
  [class*="-dock"] { justify-content: center; padding: 5px; }
  [class*="-dock"] .btn { flex: 1; }
}