/* ══════════════════════════════════════════════════════════════════════════
   WorldMates — Modern visual layer for the welcome/login/register page.
   Loaded LAST, after welcome.css. Same "additive layer" approach as
   chat-modern.css: never touch the page's structural/animation-timing
   properties (the sign-in/sign-up mode-swap choreography in welcome.css is
   a carefully coordinated multi-element transition — .container-v5:before's
   1.8s blob move, .signin-signup's 1s+0.7s-delay slide, .form-class's
   0.2s+0.7s-delay fade all have to land in sync). This file only adds color,
   shadow, blur, and hover/focus polish — it never redefines `transition`
   durations/delays on any of those three selectors.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --wmc-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wmc-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── 1. Ambient drift behind the whole page ──────────────────────────────
   Additional slow-moving glow layered UNDER the existing purple blob
   (.container-v5:before, z-index:6) — this one sits at a lower z-index and
   never touches transform/transition on the existing blob itself. */

@keyframes wmc-welcome-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(4%, -3%) scale(1.06); }
}

.container-v5 {
  position: relative;
}
.container-v5::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 85% 15%, rgb(98 60 168 / 8%), transparent 70%),
    radial-gradient(ellipse 50% 40% at 10% 85%, rgb(98 60 168 / 6%), transparent 70%);
  animation: wmc-welcome-drift 22s ease-in-out infinite;
}

/* ── 2. Form card — glass treatment ───────────────────────────────────────
   .form-class already has its own opacity/transform transition tied to the
   mode-swap; only background/shadow/border are added here (new properties,
   not overrides of the existing transition timing). */

.form-class {
  border-radius: 28px;
}
.form-class.sign-in-form,
.form-class.sign-up-form {
  background: rgb(255 255 255 / 55%);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 20px 60px rgb(98 60 168 / 12%), inset 0 1px 0 rgb(255 255 255 / 60%);
}

.title {
  background: linear-gradient(135deg, #444, #6938a8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ── 3. Inputs — glass + focus glow ───────────────────────────────────────
   Adds properties welcome.css doesn't set (box-shadow, transition on those
   new properties only) — does not touch welcome.css's own layout rules. */

.input-field {
  background-color: rgb(255 255 255 / 70%);
  border: 1px solid rgb(98 60 168 / 10%);
  box-shadow: 0 2px 10px rgb(0 0 0 / 4%);
  transition: box-shadow .2s var(--wmc-smooth), border-color .2s var(--wmc-smooth);
}
.input-field:focus-within {
  border-color: rgb(98 60 168 / 35%);
  box-shadow: 0 2px 16px rgb(98 60 168 / 14%), 0 0 0 3px rgb(98 60 168 / 12%);
}

.input-field select {
  background-color: rgb(255 255 255 / 70%);
}

/* ── 4. Buttons — gradient + lift ─────────────────────────────────────────
   .btn-welcome's own `transition: 0.5s` already covers background-color;
   adding transform/box-shadow to that same transition is additive (multiple
   comma-separated properties on one `transition` don't conflict). */

.btn-welcome {
  background: linear-gradient(135deg, #6938a8, #5b42aa);
  box-shadow: 0 6px 20px rgb(98 60 168 / 30%);
  transition: transform .18s var(--wmc-spring), box-shadow .25s var(--wmc-smooth), background .5s;
}
.btn-welcome:hover {
  background: linear-gradient(135deg, #7a45c2, #6938a8);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgb(98 60 168 / 42%);
}
.btn-welcome:active {
  transform: translateY(0);
}

.btn-welcome.transparent {
  transition: transform .18s var(--wmc-spring), border .3s, background-color .3s;
}
.btn-welcome.transparent:hover {
  transform: translateY(-2px);
}

/* ── 5. Social login icons — hover scale + glow ──────────────────────────── */

.social-icon {
  transition: transform .18s var(--wmc-spring), box-shadow .2s var(--wmc-smooth), color .2s, border-color .2s;
}
.social-icon:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 6px 16px rgb(68 129 235 / 30%);
}

/* ── 6. Entrance animation — staggered fade/slide on load ─────────────────
   Applied via a `.wmc-ready` class the bootstrap script adds one frame after
   load (see container.phtml), so the animation always plays once, cleanly,
   regardless of network timing — never gates on :hover or anything stateful. */

@keyframes wmc-field-in {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.form-class .tag_field,
.form-class .input-field,
.form-class .btn-welcome,
.form-class .social-media {
  opacity: 0;
}
.wmc-ready .form-class.sign-in-form .tag_field,
.wmc-ready .form-class.sign-in-form .input-field,
.wmc-ready .form-class.sign-in-form .btn-welcome,
.wmc-ready .form-class.sign-in-form .social-media,
.wmc-ready .form-class.sign-up-form .tag_field,
.wmc-ready .form-class.sign-up-form .input-field,
.wmc-ready .form-class.sign-up-form .btn-welcome,
.wmc-ready .form-class.sign-up-form .social-media {
  animation: wmc-field-in .5s var(--wmc-smooth) both;
}
.wmc-ready .form-class .input-field:nth-of-type(1) { animation-delay: .05s; }
.wmc-ready .form-class .input-field:nth-of-type(2) { animation-delay: .1s; }
.wmc-ready .form-class .input-field:nth-of-type(3) { animation-delay: .15s; }
.wmc-ready .form-class .btn-welcome { animation-delay: .2s; }
.wmc-ready .form-class .social-media { animation-delay: .25s; }

/* If JS never adds .wmc-ready (script blocked/failed), don't leave the form
   invisible — fail safe to fully visible after a short ceiling. */
.form-class .tag_field,
.form-class .input-field,
.form-class .btn-welcome,
.form-class .social-media {
  animation: wmc-field-in .01s linear .8s both;
}

/* ── 7. Reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .container-v5::after,
  .form-class .tag_field,
  .form-class .input-field,
  .form-class .btn-welcome,
  .form-class .social-media {
    animation: none !important;
    opacity: 1 !important;
  }
  .btn-welcome,
  .btn-welcome.transparent,
  .social-icon {
    transition: none !important;
  }
}