/*!
 * Kyma — auth surfaces.
 *
 * Shared full-screen shell + centered-card composition for sign-in, sign-up,
 * password recovery, and similar authentication / onboarding landing pages.
 *
 * Every value references tokens in ../style.css. No colours, fonts, or sizes
 * are redefined here — this file is purely compositional.
 *
 * Components:
 *   .k-auth-shell      — full-viewport isolated stacking context
 *   .k-auth-backdrop   — warm radial base + subtle noise texture
 *   .k-auth-waves      — absolutely positioned flowing wave lines (SVG host)
 *   .k-auth-stage      — centered grid containing the card
 *   .k-auth-card       — white card with soft shadow + rise-in animation
 *   .k-auth-brand      — centered KYMA wordmark link inside the card
 *   .k-auth-title      — serif headline with accented italic modifier
 *   .k-auth-subtitle   — one-line secondary copy under the title
 *   .k-auth-lang       — language toggle pill pinned top-right of the card
 *   .k-auth-legal      — inline Terms · Privacy row at the card bottom
 *   .k-auth-forgot     — centered "Forgot your password?" trigger
 */

/* ═══════════════════════════════════════════════════════════
   SHELL — full-bleed backdrop with centered card
   ═══════════════════════════════════════════════════════════ */
.k-auth-shell {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  isolation: isolate;
}

.k-auth-backdrop {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background:
    radial-gradient(80% 60% at 78% 18%, rgba(192,228,235,0.55) 0%, rgba(192,228,235,0) 60%),
    radial-gradient(70% 60% at 14% 86%, rgba(126,179,149,0.28) 0%, rgba(126,179,149,0) 60%),
    radial-gradient(55% 45% at 50% 50%, var(--stone-50) 0%, var(--stone-100) 100%);
}
.k-auth-backdrop::before {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; mix-blend-mode: multiply; opacity: 0.45;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.k-auth-waves {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.55;
}
.k-auth-waves svg {
  position: absolute; left: -4%; right: -4%;
  width: 108%; height: 100%; display: block;
}
.k-auth-wave { fill: none; stroke-width: 1; }
.k-auth-wave-1 { stroke: rgba(20,125,142,0.18);  animation: k-auth-drift 32s ease-in-out infinite alternate; }
.k-auth-wave-2 { stroke: rgba(48,160,179,0.14);  animation: k-auth-drift 44s ease-in-out infinite alternate-reverse; }
.k-auth-wave-3 { stroke: rgba(90,155,118,0.12);  animation: k-auth-drift 56s ease-in-out infinite alternate; }

@keyframes k-auth-drift {
  0%   { transform: translate3d(-2%, 0, 0); }
  100% { transform: translate3d( 2%, 0, 0); }
}

/* ═══════════════════════════════════════════════════════════
   STAGE — the card in the center of the viewport
   ═══════════════════════════════════════════════════════════ */
.k-auth-stage {
  flex: 1;
  display: grid; place-items: center;
  padding: var(--sp-12) var(--sp-6);
  position: relative; z-index: 1;
}

.k-auth-card {
  position: relative;
  width: 100%; max-width: 440px;
  background: var(--bg-surface);
  border: 1px solid rgba(230,224,215,0.6);
  border-radius: var(--r-3xl);
  padding: var(--sp-12) var(--sp-10) var(--sp-10);
  box-shadow:
    0 1px 2px   rgba(27,25,23,0.04),
    0 12px 24px rgba(27,25,23,0.06),
    0 40px 80px rgba(27,25,23,0.08);
  animation: k-rise 500ms var(--ease-default) both;
}

/* Card header — horizontal band holding the logo + language dropdown. */
.k-auth-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-10);
}

.k-auth-brand {
  display: inline-flex; align-items: center;
  line-height: 1;
  -webkit-user-select: none; user-select: none;
  transition: opacity var(--dur-fast);
}
.k-auth-brand:hover { opacity: 0.72; text-decoration: none; }
.k-auth-brand img   { height: 13px; width: auto; display: block; }

.k-auth-title {
  font-family: var(--font-display); font-weight: var(--w-light);
  font-size: 36px; line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  margin-bottom: 10px;
}
.k-auth-title em {
  font-style: italic; font-weight: var(--w-regular); color: var(--teal-600);
}

.k-auth-subtitle {
  font-size: 14px; color: var(--text-secondary);
  margin-bottom: var(--sp-8);
}
.k-auth-subtitle a { font-weight: var(--w-semibold); color: var(--text-brand); }
.k-auth-subtitle a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════
   LANGUAGE DROPDOWN — sits in the card header flex row.
   Uses native <details>/<summary> — no JS dependency. The menu
   pops out absolutely so opening it doesn't reflow the header.
   ═══════════════════════════════════════════════════════════ */
.k-auth-lang {
  position: relative;
  z-index: var(--z-dropdown);
}
.k-auth-lang summary { list-style: none; cursor: pointer; }
.k-auth-lang summary::-webkit-details-marker { display: none; }

.k-auth-lang-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--w-semibold);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--text-secondary);
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.k-auth-lang-trigger:hover {
  background: var(--bg-surface);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.k-auth-lang-trigger svg {
  width: 12px; height: 12px;
  transition: transform var(--dur-base) var(--ease-default);
}
.k-auth-lang[open] .k-auth-lang-trigger svg { transform: rotate(180deg); }

.k-auth-lang-flag {
  font-size: 14px; line-height: 1;
  /* Emoji flags need a non-antialiased baseline so they don't sink */
  display: inline-flex; align-items: center;
}

.k-auth-lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 180px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  animation: k-auth-lang-open 140ms var(--ease-out) both;
}
.k-auth-lang-menu form { margin: 0; }

.k-auth-lang-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  background: transparent; border: none;
  border-radius: var(--r-md);
  font-family: var(--font-body); font-size: 13px; font-weight: var(--w-medium);
  color: var(--text-primary);
  text-align: left; cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.k-auth-lang-item:hover { background: var(--bg-subtle); }
.k-auth-lang-item[aria-current="true"] {
  background: var(--bg-subtle);
  color: var(--text-brand);
}

@keyframes k-auth-lang-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   FORM EMBELLISHMENTS — reuse .k-btn / .k-input from style.css
   and lift the submit button so it matches the mockup's depth.
   ═══════════════════════════════════════════════════════════ */
.k-auth-card .k-btn-primary {
  box-shadow: 0 1px 2px rgba(8,66,78,0.18), 0 6px 18px rgba(20,125,142,0.28);
}
.k-auth-card .k-btn-primary:hover {
  box-shadow: 0 2px 4px rgba(8,66,78,0.22), 0 12px 28px rgba(20,125,142,0.32);
}
.k-auth-card .k-btn-block { margin-top: var(--sp-6); height: 52px; }

/* Diagonal gloss sweep — rides across the button on hover. The .k-btn base
   class already sets position:relative and overflow:hidden, so the ::after
   is safely clipped to the pill. */
.k-auth-card .k-btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255,255,255,0.14) 50%,
    transparent 70%);
  transform: translateX(-100%);
  transition: transform 700ms var(--ease-default);
  pointer-events: none;
}
.k-auth-card .k-btn-primary:hover::after { transform: translateX(100%); }

@media (prefers-reduced-motion: reduce) {
  .k-auth-card .k-btn-primary::after { transition: none; }
}

.k-auth-forgot {
  margin-top: var(--sp-5);
  text-align: center;
  font-size: 13px;
}
.k-auth-forgot a {
  font-weight: var(--w-semibold); color: var(--text-brand);
}
.k-auth-forgot a:hover { text-decoration: underline; text-underline-offset: 2px; }

.k-auth-legal {
  margin-top: var(--sp-10);
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  font-size: 11px; color: var(--text-disabled);
}
.k-auth-legal a { color: var(--text-muted); font-weight: var(--w-regular); }
.k-auth-legal a:hover { color: var(--text-secondary); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .k-auth-card   { padding: var(--sp-10) var(--sp-7) var(--sp-8); border-radius: var(--r-2xl); }
  .k-auth-title  { font-size: 30px; }
  .k-auth-stage  { padding: var(--sp-8) var(--sp-4); }
  .k-auth-header { margin-bottom: var(--sp-8); }
}

@media (prefers-reduced-motion: reduce) {
  .k-auth-card        { animation: none; }
  .k-auth-wave-1,
  .k-auth-wave-2,
  .k-auth-wave-3      { animation: none; }
}