/* IPN 1.8 · Member sign-in / sign-up art. Phones: the form only, full screen. Wide screens: animated floating objects (default) or the admin's photo slider. */
.au2 { --au-ink: #fff; }
.au-art2 { background: #0B0A1F; }
/* animated background */
.au-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: radial-gradient(70% 60% at 20% 10%, #3B1366 0%, transparent 60%), radial-gradient(60% 60% at 90% 90%, #6B0F2B 0%, transparent 60%), linear-gradient(160deg, #120B2E 0%, #0B0A1F 55%, #1A0B24 100%); }
.au-bg__b { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: auBlob 18s ease-in-out infinite alternate; }
.au-bg__b--1 { width: 46%; aspect-ratio: 1; inset: 8% auto auto 6%; background: #E11D48; }
.au-bg__b--2 { width: 40%; aspect-ratio: 1; inset: auto 4% 10% auto; background: #7C3AED; animation-delay: -6s; }
.au-bg__b--3 { width: 30%; aspect-ratio: 1; inset: 42% auto auto 46%; background: #F59E0B; opacity: .28; animation-delay: -11s; }
.au-bg__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent); }
@keyframes auBlob { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6%, -5%) scale(1.12); } 100% { transform: translate(-5%, 6%) scale(.92); } }
/* floating objects (icons from the sprite) */
.au-float { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.au-obj { --tx: 0px; --ty: 0px; position: absolute; left: var(--x); top: var(--y); display: grid; place-items: center; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .3); color: #fff; background: linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 20px 40px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.35); -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%); translate: var(--tx) var(--ty); transition: translate .6s cubic-bezier(.2,.8,.2,1); }
.au-obj > .ic { width: 46% !important; height: 46% !important; animation: auFloat calc(7s + var(--i) * .6s) ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); }
.au-obj { animation: auBob calc(8s + var(--i) * .7s) ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); }
@keyframes auBob { 0%, 100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-18px) rotate(7deg); } }
@keyframes auFloat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.au-obj--ticket { color: #FDA4AF; } .au-obj--tv { color: #93C5FD; } .au-obj--mic-vocal { color: #F9A8D4; } .au-obj--crown { color: #FCD34D; background: linear-gradient(145deg, rgba(245,158,11,.35), rgba(245,158,11,.06)); }
.au-obj--calendar-days { color: #C4B5FD; } .au-obj--qr-code { color: #A7F3D0; } .au-obj--star { color: #FDE68A; } .au-obj--music { color: #FBCFE8; } .au-obj--clapperboard { color: #FECACA; } .au-obj--gift { color: #FDBA74; }
.au-obj--ticket, .au-obj--tv { background: linear-gradient(145deg, rgba(225,29,72,.35), rgba(225,29,72,.06)); }
.au-obj--tv { background: linear-gradient(145deg, rgba(59,130,246,.32), rgba(59,130,246,.06)); }
/* keep the text block readable over the objects */
.au-art2 .au-art__in { z-index: 1; background: linear-gradient(0deg, rgba(11,10,31,.85) 30%, transparent); padding-top: 120px; }
.au--anim .au-art2 .au-art__in { background: linear-gradient(0deg, rgba(11,10,31,.75) 25%, transparent); }
.au-art2 .au-art__in li i { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); }
/* photo slider */
.au-slides { position: absolute; inset: 0; z-index: -2; }
.au-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.4s ease, transform 7s ease-out; }
.au-slides img.is-on { opacity: 1; transform: scale(1); }
.au--photos .au-art__veil { background: linear-gradient(180deg, rgba(11,10,31,.25), rgba(11,10,31,.15) 40%, rgba(11,10,31,.85)), linear-gradient(160deg, rgba(225,29,72,.35), transparent 50%, rgba(124,58,237,.35)); }
.au-dots { position: absolute; z-index: 2; top: 24px; inset-inline-end: 24px; display: flex; gap: 6px; }
.au-dots i { width: 22px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.35); transition: background .3s, width .3s; }
.au-dots i.is-on { width: 34px; background: #fff; }
/* form side */
.au2 .au-main { position: relative; }
/* phones and small tablets: form first, full screen, no art */
@media (max-width: 900px) {
  .au2 { grid-template-columns: 1fr; min-height: 100svh; }
  .au2 .au-art { display: none; }
  .au2 .au-main { min-height: 100svh; padding: max(14px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)); background: radial-gradient(90% 40% at 100% 0%, color-mix(in srgb, #E11D48 10%, transparent), transparent 70%), radial-gradient(80% 40% at 0% 100%, color-mix(in srgb, #7C3AED 9%, transparent), transparent 70%); }
  .au2 .au-top { display: flex; }
  .au2 .au-card { margin: 18px 0 auto; padding: 8px 0 18px; }
  .au2 .au-head__ic { width: 48px; height: 48px; border-radius: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .au-bg__b, .au-obj, .au-obj > .ic { animation: none !important; }
  .au-obj { transition: none; }
  .au-slides img { transition: opacity .01s; transform: none; }
}
