/* The Sary-OS welcome card (public/saryos-welcome.js). Every rule is scoped to
   #saryos-welcome. It follows the skin: Dark (Noir Platinum) is black glass
   with platinum letters and a gloss-black main key with a platinum edge (the
   skin's own key rule paints it); Light (Aurora) is the Translucent glass with
   white letters and the aurora gradient on the main key. Both carry a slow
   aurora edge. Above the Portal and the Dashboard (100460), below the sign-in
   overlays (100650) and the arrival veil (100700). */
#saryos-welcome {
  --swc-modal: var(--lg-modal, rgba(10, 10, 10, .94)); --swc-line: var(--lg-line, rgba(255, 255, 255, .1));
  --swc-text: var(--lg-text, #f5f5f5); --swc-muted: var(--lg-muted, #a3a3a3);
  --swc-a1: #8b5cf6; --swc-a2: #ec4899; --swc-a3: #f59e0b;
  position: fixed; inset: 0; z-index: 100480; display: grid; place-items: center; padding: 16px;
  font: 15px/1.55 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--swc-text);
  -webkit-tap-highlight-color: transparent;
}
#saryos-welcome * { box-sizing: border-box; }
#saryos-welcome .swc-scrim { position: absolute; inset: 0; background: rgba(1, 2, 8, .5); opacity: 0; transition: opacity .6s ease; }
#saryos-welcome.is-in .swc-scrim { opacity: 1; }

#saryos-welcome .swc-card {
  position: relative; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
  padding: 30px 30px 26px; border-radius: 26px; border: 1px solid transparent;
  background: linear-gradient(var(--swc-modal), var(--swc-modal)) padding-box,
    linear-gradient(120deg, rgba(139, 92, 246, .75), rgba(236, 72, 153, .6), rgba(245, 158, 11, .55), rgba(139, 92, 246, .75)) border-box;
  background-size: 100% 100%, 300% 100%;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 0 60px rgba(236, 72, 153, .14), inset 0 1px 0 rgba(255, 255, 255, .08);
  opacity: 0; transform: translateY(18px) scale(.985);
  transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
  animation: swc-edge 9s linear infinite;
}
#saryos-welcome.is-in .swc-card { opacity: 1; transform: none; }
/* A soft aurora wash across the top of the card. */
#saryos-welcome .swc-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 140px; border-radius: 26px 26px 0 0; pointer-events: none;
  background: radial-gradient(60% 100% at 18% 0%, rgba(139, 92, 246, .22), transparent 70%),
    radial-gradient(50% 90% at 62% 0%, rgba(236, 72, 153, .16), transparent 70%),
    radial-gradient(40% 80% at 95% 0%, rgba(245, 158, 11, .12), transparent 70%);
}
#saryos-welcome .swc-card > * { position: relative; }
@keyframes swc-edge { to { background-position: 0 0, 300% 0; } }

#saryos-welcome .swc-kicker { display: inline-block; font: 700 13px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--swc-muted); }
#saryos-welcome .swc-kicker b { color: var(--swc-text); }
#saryos-welcome h2 { margin: 14px 0 4px; font: 800 clamp(24px, 4.6vw, 30px)/1.15 Inter, -apple-system, sans-serif; letter-spacing: -.01em; color: var(--swc-text); }
#saryos-welcome .swc-lead { margin: 0 0 14px; font-weight: 600; color: var(--swc-text); opacity: .86; }
#saryos-welcome p { margin: 0 0 10px; color: var(--swc-muted); }
#saryos-welcome .swc-trial {
  display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 4px; padding: 13px 15px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(139, 92, 246, .16), rgba(236, 72, 153, .1) 55%, rgba(245, 158, 11, .08));
  border: 1px solid rgba(236, 72, 153, .28); color: var(--swc-muted);
}
#saryos-welcome .swc-trial i { margin-top: 3px; color: #f5b8de; }
#saryos-welcome .swc-trial strong { color: var(--swc-text); }
#saryos-welcome .swc-act { display: flex; gap: 10px; margin-top: 20px; }
#saryos-welcome .swc-btn {
  appearance: none; flex: 1; min-height: 48px; padding: 0 18px; border-radius: 14px; border: 1px solid var(--swc-line);
  background: rgba(255, 255, 255, .06); color: var(--swc-text); font: 700 15px/1 Inter, -apple-system, sans-serif;
  cursor: pointer; touch-action: manipulation; transition: transform .12s ease, filter .15s ease;
}
#saryos-welcome .swc-btn:hover { filter: brightness(1.1); }
#saryos-welcome .swc-btn:active { transform: scale(.98); }
#saryos-welcome .swc-btn:focus-visible { outline: 2px solid var(--lg-accent, #e5e4e2); outline-offset: 2px; }
#saryos-welcome .swc-btn.primary { flex: 1.4; }

/* Light: the aurora gradient on the main key, white letters. */
:root:root[data-glass="light"] #saryos-welcome .swc-btn.primary,
:root:root:not([data-glass]) #saryos-welcome .swc-btn.primary {
  background: linear-gradient(108deg, transparent 38%, rgba(255, 255, 255, .5) 50%, transparent 62%) no-repeat, linear-gradient(90deg, #8b5cf6, #ec4899, #f59e0b) !important;
  background-size: 280% 100%, 100% 100% !important; animation: swc-sheen 3.6s linear infinite;
  border-color: transparent !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
  box-shadow: inset 0 0 0 .6px rgba(255, 255, 255, .3), 0 4px 14px rgba(236, 72, 153, .4) !important;
}
:root:root[data-glass="light"] #saryos-welcome .swc-btn:not(.primary) {
  background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .26) !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
}
/* Dark: the skin's gloss-black keys paint both buttons; the main one keeps
   its platinum edge from that rule. This is the fallback before the skin
   loads. */
:root[data-glass="dark"] #saryos-welcome .swc-btn.primary { background: linear-gradient(180deg, #202022, #040404); border-color: rgba(229, 228, 226, .7); color: #fff; }
@keyframes swc-sheen { 0% { background-position: 130% 0, 0 0; } 60%, 100% { background-position: -40% 0, 0 0; } }

/* Phone: 16 px gutters, full-width buttons stacked. */
@media (max-width: 560px) {
  #saryos-welcome { padding: 16px; align-items: end; }
  #saryos-welcome .swc-card { padding: 24px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 22px; }
  #saryos-welcome .swc-act { flex-direction: column; }
  #saryos-welcome .swc-btn, #saryos-welcome .swc-btn.primary { flex: none; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #saryos-welcome .swc-card, #saryos-welcome .swc-scrim { transition: opacity .3s ease; transform: none; }
  #saryos-welcome .swc-card, #saryos-welcome .swc-btn.primary { animation: none !important; }
}