/* Premium pre-login Welcome/Splash screen. Loaded on the splash page and on the admin settings
   page (for the live preview overlay) — see public/js/welcome-screen.js. */

.ws-root{position:fixed;inset:0;z-index:9999;overflow:hidden;background:var(--ws-bg,#FFFFFF);
  display:flex;align-items:center;justify-content:center;
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.ws-bg{position:absolute;inset:0;z-index:0}
.ws-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ws-bg-gradient,.ws-fallback{background:
  radial-gradient(ellipse 90% 60% at 12% 12%, rgba(74,144,217,0.16), transparent 58%),
  radial-gradient(ellipse 90% 60% at 88% 18%, rgba(126,212,224,0.16), transparent 58%),
  radial-gradient(ellipse 90% 70% at 18% 92%, rgba(143,221,154,0.13), transparent 58%),
  radial-gradient(ellipse 90% 70% at 88% 88%, rgba(244,201,120,0.13), transparent 58%),
  var(--ws-bg,#FFFFFF)}
.ws-bg-solid{background:var(--ws-bg,#FFFFFF)}
.ws-bg-image{background-size:cover;background-position:center;opacity:.9}

/* Subtle film-grain texture — a tiny inline SVG noise filter, near-zero cost, adds a premium
   "physical" depth instead of a flat digital gradient. */
.ws-noise{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
/* A soft vignette frames the scene and pulls the eye toward the centre content. */
.ws-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 80% 75% at 50% 50%, transparent 55%, rgba(20,24,38,0.05) 100%)}

.ws-content{position:relative;z-index:10;text-align:center;max-width:600px;padding:52px 44px}
/* A barely-there frosted glass stage lifts the content off a busy particle field, the way
   premium product splash/onboarding screens (Linear, Stripe, Apple) frame their centre copy. */
.ws-stage{position:absolute;inset:0;z-index:-1;border-radius:32px;
  background:rgba(255,255,255,.38);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.55);box-shadow:0 30px 80px -30px rgba(36,28,77,.18);
  opacity:0;transition:opacity 1s ease}
.ws-content.ws-show-logo .ws-stage{opacity:1}

.ws-logo-wrap{position:relative;display:inline-block;margin-bottom:22px}
.ws-logo-glow{position:absolute;left:50%;top:50%;width:220%;height:220%;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(74,144,217,.22), rgba(126,212,224,.12) 45%, transparent 72%);
  filter:blur(6px);opacity:0;transition:opacity 1s ease;z-index:-1}
.ws-content.ws-show-logo .ws-logo-glow{opacity:1}
.ws-logo{display:block;margin:0 auto;height:auto;max-width:100%;opacity:0;transform:scale(.92) translateY(8px);
  transition:opacity .7s cubic-bezier(.22,.9,.35,1),transform .7s cubic-bezier(.22,.9,.35,1);
  filter:drop-shadow(0 6px 18px rgba(36,28,77,.12))}
.ws-content.ws-show-logo .ws-logo{opacity:1;transform:scale(1) translateY(0);animation:ws-breathe 5.5s ease-in-out 1.6s infinite}
.ws-anim-none.ws-logo{transition:none;animation:none!important}
.ws-anim-fade.ws-logo{transform:none}
.ws-content.ws-show-logo .ws-anim-fade.ws-logo{transform:none}
.ws-anim-fade_slide.ws-logo{transform:translateY(8px)}
@keyframes ws-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}

.ws-line-wrap{position:relative;width:100%;max-width:220px;margin:0 auto 26px;height:2px;overflow:hidden;border-radius:2px}
.ws-line{position:absolute;inset:0;width:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#7ED4E0,#4A90D9,#7ED4E0,transparent);
  box-shadow:0 0 12px rgba(74,144,217,.45);
  transition:width .85s cubic-bezier(.22,.9,.35,1)}
.ws-content.ws-show-line .ws-line{width:100%}
.ws-line::after{content:'';position:absolute;inset:0;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  transform:translateX(-140%);animation:ws-shimmer 2.6s ease-in-out .9s 1}
.ws-content.ws-show-line .ws-line::after{animation-play-state:running}
@keyframes ws-shimmer{to{transform:translateX(320%)}}

.ws-title{font-size:12.5px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;margin-bottom:16px;
  opacity:0;transform:translateY(6px);transition:opacity .55s ease,transform .55s ease;
  background:linear-gradient(90deg,#4A90D9,#7ED4E0,#4A90D9);background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ws-content.ws-show-title .ws-title{opacity:1;transform:translateY(0);animation:ws-title-sheen 6s linear 1.2s infinite}
@keyframes ws-title-sheen{to{background-position:200% center}}

.ws-message{font-size:34px;font-weight:800;letter-spacing:-.02em;color:#1a2033;line-height:1.22;margin-bottom:12px;
  opacity:0;transform:translateY(10px);transition:opacity .6s cubic-bezier(.22,.9,.35,1),transform .6s cubic-bezier(.22,.9,.35,1)}
.ws-content.ws-show-message .ws-message{opacity:1;transform:translateY(0)}

.ws-tagline{font-size:15.5px;color:#5b6472;font-weight:500;letter-spacing:.01em;opacity:0;transform:translateY(6px);
  transition:opacity .55s ease,transform .55s ease}
.ws-content.ws-show-tagline .ws-tagline{opacity:1;transform:translateY(0)}

.ws-content.ws-reduced .ws-logo,.ws-content.ws-reduced .ws-line,.ws-content.ws-reduced .ws-title,
.ws-content.ws-reduced .ws-message,.ws-content.ws-reduced .ws-tagline,.ws-content.ws-reduced .ws-stage,.ws-content.ws-reduced .ws-logo-glow{
  opacity:1;transform:none;transition:opacity .35s ease;animation:none!important}
.ws-content.ws-visible.ws-reduced{opacity:1}

.ws-skip{position:absolute;right:22px;bottom:22px;z-index:20;display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(107,114,128,.2);color:#5b6472;font-size:12px;font-weight:600;letter-spacing:.02em;
  padding:8px 18px;border-radius:999px;cursor:pointer;transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.ws-skip:hover{background:rgba(255,255,255,.9);color:#1a2033;box-shadow:0 6px 18px -8px rgba(36,28,77,.25)}
.ws-skip::after{content:'→';font-size:13px;transition:transform .2s ease}
.ws-skip:hover::after{transform:translateX(2px)}

/* Responsive logo sizing tiers (spec §3) — the configured width is the desktop maximum. */
@media (max-width:1024px){.ws-logo{max-width:140px}.ws-content{padding:44px 32px}}
@media (max-width:640px){
  .ws-logo{max-width:110px}.ws-message{font-size:24px}.ws-tagline{font-size:13.5px}
  .ws-line-wrap{max-width:150px}.ws-content{padding:34px 22px;max-width:92vw}.ws-stage{border-radius:24px}
}

/* Live preview overlay on the admin settings page */
.ws-preview-overlay{position:fixed;inset:0;z-index:10000}
.ws-preview-close{position:absolute;top:18px;right:18px;z-index:10010;background:rgba(31,41,55,.75);
  color:#fff;border:none;width:36px;height:36px;border-radius:999px;font-size:16px;cursor:pointer}