/* The shared atmosphere and motion of the sign-in surfaces (welcome, join, login),
   App Store shell only. native-fx.js builds the .yic-fx layer; everything is scoped
   to html.native, so the web pages are untouched.
   The look, signed off in the preview: pure black, a soft gold light pulsing in from
   the top and bottom edges, a quiet moving market behind the content, a faint dark
   halo behind elements and text so they stand clear of it. No glows under buttons. */

html.native { --fx-ease: cubic-bezier(.22, 1, .36, 1); }
html.native body { background: #000; }
.yic-fx { display: none; }
html.native .yic-fx { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
html.native .yic-fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .6; }

/* The edge light: a full-width gradient, never a blob, breathing between 32% and 50%. */
html.native .yic-edge { position: absolute; left: 0; right: 0; height: 46%; }
html.native .yic-edge.t { top: 0; background: linear-gradient(to bottom, rgba(227, 178, 60, .5) 0%, rgba(227, 178, 60, .28) 18%, rgba(227, 178, 60, .11) 42%, rgba(227, 178, 60, .03) 70%, rgba(227, 178, 60, 0) 100%); animation: yic-pulse 6s ease-in-out infinite; }
html.native .yic-edge.b { bottom: 0; background: linear-gradient(to top, rgba(227, 178, 60, .5) 0%, rgba(227, 178, 60, .28) 18%, rgba(227, 178, 60, .11) 42%, rgba(227, 178, 60, .03) 70%, rgba(227, 178, 60, 0) 100%); animation: yic-pulse 6s ease-in-out infinite 3s; }
@keyframes yic-pulse { 0%, 100% { opacity: .32; } 50% { opacity: .5; } }
/* A surge when something lands (the join celebration). */
html.native.success .yic-edge { animation: yic-surge 1.6s ease-out forwards; }
@keyframes yic-surge { 0% { opacity: .4; } 25% { opacity: 1; filter: brightness(2.2); } 100% { opacity: .45; } }

/* Content sits above the layer, on a clear ground. */
html.native .stage,
html.native .auth,
html.native .panel { position: relative; z-index: 1; background: transparent; }

/* A ripple under a finger on a gold button. */
html.native .yic-btn--pill, html.native .step .ask .go, html.native .yic-btn--native { overflow: hidden; }
html.native .yic-rip { position: absolute; z-index: 2; border-radius: 50%; background: rgba(255, 255, 255, .5); transform: scale(0); animation: yic-rip .6s ease-out forwards; pointer-events: none; }
@keyframes yic-rip { to { transform: scale(1); opacity: 0; } }

/* Headings that rise out of a mask, word by word. */
html.native .yw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
html.native .yw > span { display: inline-block; transform: translateY(110%); filter: blur(6px); opacity: 0; animation: yic-rise .7s var(--fx-ease) forwards; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes yic-rise { to { transform: none; filter: blur(0); opacity: 1; } }

/* The same rise for a whole block (the join prompts), and the label settling. */
@keyframes yic-block { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes yic-label { from { opacity: 0; letter-spacing: .5em; } to { opacity: 1; letter-spacing: .22em; } }
@keyframes yic-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* A gold underline draws across a field when it takes focus. */
html.native .ip { position: relative; }
html.native .ip::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #f8dc8e, transparent); transform: scaleX(0); transition: transform .55s var(--fx-ease); pointer-events: none; }
html.native .ip:focus-within::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  html.native .yic-edge, html.native.success .yic-edge { animation: none; opacity: .4; }
  html.native .yw > span { animation: none; transform: none; filter: none; opacity: 1; }
  html.native .yic-rip { display: none; }
}