/* Luwy first impression: onboarding, sign in, sign up, baseline.
 * Same cocoa / caramel / cream palette as the app. Calm motion that says "someone cared about this". */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

/* A very soft caramel glow behind the content, so the page feels lit rather than flat. */
body.lwy-first { background-image: radial-gradient(60% 40% at 50% -6%, color-mix(in srgb, var(--sprinkle) 55%, transparent), transparent 70%); background-repeat: no-repeat; }
html[data-theme="dark"] body.lwy-first { background-image: radial-gradient(60% 40% at 50% -6%, color-mix(in srgb, var(--mug) 14%, transparent), transparent 70%); }

/* ------------------------------------------------------------ entrance cascade */
.lwy-first .auth-card > *, .lwy-first .setup > .setup-top, .lwy-first .setup > .bar, .lwy-first .setup > .eyebrow, .lwy-first .setup > h1 { animation: lwy-f-rise .7s var(--ease-out) backwards; }
.lwy-first .auth-card > *:nth-child(2) { animation-delay: 70ms; } .lwy-first .auth-card > *:nth-child(3) { animation-delay: 130ms; }
.lwy-first .auth-card > *:nth-child(4) { animation-delay: 190ms; } .lwy-first .auth-card > *:nth-child(n+5) { animation-delay: 250ms; }
@keyframes lwy-f-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.lwy-first .auth-card form > * { animation: lwy-f-rise .6s var(--ease-out) backwards; }
.lwy-first .auth-card form > *:nth-child(1) { animation-delay: 160ms; } .lwy-first .auth-card form > *:nth-child(2) { animation-delay: 220ms; }
.lwy-first .auth-card form > *:nth-child(3) { animation-delay: 280ms; } .lwy-first .auth-card form > *:nth-child(n+4) { animation-delay: 340ms; }

/* ------------------------------------------------------------ inputs and buttons */
.lwy-first .field { transition: border-color .2s var(--ease-soft), box-shadow .35s var(--ease-out), background-color .2s; }
.lwy-first .field:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--mug) 30%, transparent); }
.lwy-first .btn.primary { position: relative; overflow: hidden; transition: transform .16s var(--ease-spring), background-color .2s, box-shadow .3s var(--ease-out); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--cocoa-deep) 70%, transparent); }
.lwy-first .btn.primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--sprinkle) 45%, transparent) 50%, transparent 65%); transform: translateX(-130%); }
@media (hover: hover) and (pointer: fine) { .lwy-first .btn.primary:hover:not(:disabled)::after { transform: translateX(130%); transition: transform .8s var(--ease-out); } }
.lwy-first .btn.primary:active:not(:disabled) { transform: scale(.97); }
.lwy-first .btn.primary:disabled { opacity: 1; cursor: progress; }
.lwy-first .btn.primary:disabled::after { transform: none; animation: lwy-f-sweep 1.3s linear infinite; }
@keyframes lwy-f-sweep { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
.lwy-first .error:not(:empty) { animation: lwy-f-shake .42s var(--ease-soft); }
@keyframes lwy-f-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

/* ------------------------------------------------------------ onboarding steps */
.lwy-first .setup .bar { height: 6px; }
.lwy-first .setup .bar i { transition: width .7s var(--ease-out); border-radius: 6px; background: linear-gradient(90deg, var(--mug), color-mix(in srgb, var(--mug) 70%, var(--sprinkle))); position: relative; }
.lwy-first .setup .bar i::after { content: ""; position: absolute; right: -1px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--mug); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mug) 28%, transparent); }
.lwy-first .setup .panel.active { animation: lwy-f-step-fwd .55s var(--ease-out) backwards; }
.lwy-first .setup[data-dir="back"] .panel.active { animation-name: lwy-f-step-back; }
@keyframes lwy-f-step-fwd { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes lwy-f-step-back { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.lwy-first .setup .panel.active .choice { animation: lwy-f-rise .5s var(--ease-out) backwards; }
.lwy-first .setup .panel.active .choice:nth-child(2) { animation-delay: 50ms; } .lwy-first .setup .panel.active .choice:nth-child(3) { animation-delay: 100ms; }
.lwy-first .setup .panel.active .choice:nth-child(4) { animation-delay: 150ms; } .lwy-first .setup .panel.active .choice:nth-child(5) { animation-delay: 200ms; }
.lwy-first .setup .panel.active .choice:nth-child(n+6) { animation-delay: 250ms; }
.lwy-first .choice { border-radius: 14px; padding-left: 12px; padding-right: 12px; transition: background-color .2s, transform .18s var(--ease-spring); }
.lwy-first .choice:active { transform: scale(.985); }
.lwy-first .choice::after { transition: transform .35s var(--ease-spring), background-color .2s, border-color .2s; }
.lwy-first .choice[aria-pressed="true"] { background: color-mix(in srgb, var(--sprinkle) 38%, var(--paper)); }
.lwy-first .choice[aria-pressed="true"]::after { animation: lwy-f-check .45s var(--ease-spring); }
@keyframes lwy-f-check { 0% { transform: scale(.6); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } }
.lwy-f-note { min-height: 20px; margin: -18px 0 18px; font: 500 13px/1.4 var(--sans); color: var(--muted); transition: opacity .3s; }
.lwy-f-note.swap { opacity: 0; }

/* ------------------------------------------------------------ welcome intro */
.lwy-intro { position: fixed; inset: 0; z-index: 9500; display: grid; place-content: center; justify-items: center; gap: 22px; padding: 24px; text-align: center; background: var(--paper); transition: opacity .6s var(--ease-soft), visibility .6s; }
.lwy-intro.out { opacity: 0; visibility: hidden; }
.lwy-mark { position: relative; width: 104px; height: 104px; border-radius: 30px; background: #241510; display: grid; place-items: center; box-shadow: 0 24px 50px -22px rgba(36, 21, 16, .7); animation: lwy-f-mark .9s var(--ease-spring) both; }
.lwy-mark b { font: 600 66px/1 var(--serif, "Fraunces", Georgia, serif); color: #F5EADD; transform: translate(-4px, -2px); letter-spacing: -.02em; }
.lwy-mark i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #E19E4E; right: 30px; bottom: 27px; animation: lwy-f-drop .7s var(--ease-spring) .55s both; }
@keyframes lwy-f-mark { from { opacity: 0; transform: scale(.6) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes lwy-f-drop { from { opacity: 0; transform: translateY(-34px) scale(.4); } to { opacity: 1; transform: none; } }
.lwy-intro h2 { font: 600 26px/1.2 var(--serif, "Fraunces", Georgia, serif); letter-spacing: -.01em; color: var(--ink); max-width: 18ch; margin: 0; animation: lwy-f-rise .8s var(--ease-out) .75s both; }
.lwy-intro p { font: 400 15px/1.5 var(--sans); color: var(--muted); max-width: 30ch; margin: 0; animation: lwy-f-rise .8s var(--ease-out) .95s both; }
.lwy-intro button { margin-top: 6px; border: 0; background: transparent; color: var(--muted); font: 600 13px/1 var(--sans); padding: 10px 14px; border-radius: 12px; cursor: pointer; animation: lwy-f-rise .8s var(--ease-out) 1.4s both; }

/* ------------------------------------------------------------ saving moment */
.lwy-saving { position: fixed; inset: 0; z-index: 9400; display: grid; place-content: center; justify-items: center; gap: 16px; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: lwy-f-fade .4s var(--ease-soft) both; }
@keyframes lwy-f-fade { from { opacity: 0; } to { opacity: 1; } }
.lwy-saving svg { width: 76px; height: 76px; }
.lwy-saving circle { fill: var(--mug); transform-origin: center; animation: lwy-f-check .6s var(--ease-spring) both; }
.lwy-saving path { fill: none; stroke: #2B1A12; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: lwy-f-draw .5s var(--ease-out) .35s forwards; }
@keyframes lwy-f-draw { to { stroke-dashoffset: 0; } }
.lwy-saving b { font: 600 22px/1.2 var(--serif, "Fraunces", Georgia, serif); color: var(--ink); animation: lwy-f-rise .6s var(--ease-out) .5s both; }
.lwy-saving span { font: 400 14px/1.4 var(--sans); color: var(--muted); animation: lwy-f-rise .6s var(--ease-out) .65s both; }

@media (prefers-reduced-motion: reduce) {
  .lwy-first *, .lwy-first *::before, .lwy-first *::after, .lwy-intro *, .lwy-saving * { animation: none !important; transition-duration: .01s !important; }
  .lwy-intro { transition: none; }
}