/* =====================================================================================================
   IPN 1.9 · Sign-in showcase — the art side of member and team sign-in pages (every look, not only Aurora).
   Slides placed in Studio → Slider, or the animated default: shifting colours, floating icons, rotating features.
   ===================================================================================================== */
@property --sc-c1 { syntax: "<color>"; inherits: true; initial-value: #FF3D6E; }
@property --sc-c2 { syntax: "<color>"; inherits: true; initial-value: #8B5CF6; }
@property --sc-c3 { syntax: "<color>"; inherits: true; initial-value: #22D3EE; }

.sc { position: absolute; inset: 0; overflow: hidden; color: #fff; isolation: isolate; background: #0A0820; --sc-c1: #FF3D6E; --sc-c2: #8B5CF6; --sc-c3: #22D3EE;
  transition: --sc-c1 1.6s ease, --sc-c2 1.6s ease, --sc-c3 1.6s ease; font-family: var(--font, inherit); }
.sc[data-pal="1"] { --sc-c1: #F59E0B; --sc-c2: #E0249A; --sc-c3: #8B5CF6; }
.sc[data-pal="2"] { --sc-c1: #06B6D4; --sc-c2: #6366F1; --sc-c3: #10B981; }
.sc[data-pal="3"] { --sc-c1: #E0249A; --sc-c2: #F97316; --sc-c3: #FACC15; }
.sc[data-pal="4"] { --sc-c1: #10B981; --sc-c2: #0EA5E9; --sc-c3: #A855F7; }
.sc[data-pal="5"] { --sc-c1: #EF4444; --sc-c2: #A855F7; --sc-c3: #F59E0B; }

/* background */
.sc-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 50% 120%, #1B0F3F, #08061A 70%); }
.sc-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .75; mix-blend-mode: screen; will-change: transform; }
.sc-blob--1 { width: 70%; aspect-ratio: 1; top: -20%; inset-inline-start: -15%; background: radial-gradient(circle, var(--sc-c1), transparent 65%); animation: sc-m1 18s ease-in-out infinite alternate; }
.sc-blob--2 { width: 65%; aspect-ratio: 1; top: 20%; inset-inline-end: -25%; background: radial-gradient(circle, var(--sc-c2), transparent 65%); animation: sc-m2 22s ease-in-out infinite alternate; }
.sc-blob--3 { width: 60%; aspect-ratio: 1; bottom: -25%; inset-inline-start: 10%; background: radial-gradient(circle, var(--sc-c3), transparent 65%); animation: sc-m3 26s ease-in-out infinite alternate; opacity: .55; }
.sc-blob--4 { width: 40%; aspect-ratio: 1; top: 35%; inset-inline-start: 30%; background: radial-gradient(circle, color-mix(in srgb, var(--sc-c1) 60%, #fff), transparent 65%); animation: sc-m2 30s ease-in-out infinite alternate-reverse; opacity: .25; }
.sc-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%); animation: sc-grid 30s linear infinite; }
.sc-noise { position: absolute; inset: 0; opacity: .08; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes sc-m1 { to { transform: translate(18%, 22%) scale(1.15); } }
@keyframes sc-m2 { to { transform: translate(-20%, -12%) scale(.9); } }
@keyframes sc-m3 { to { transform: translate(14%, -18%) scale(1.2); } }
@keyframes sc-grid { to { background-position: 48px 48px; } }

/* floating icons (positions, sizes and timings are randomised by showcase.js on every visit) */
.sc-floats { position: absolute; inset: 0; z-index: 0; }
.sc-obj { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: var(--s, 56px); height: var(--s, 56px); display: grid; place-items: center; border-radius: 30%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--oc, var(--sc-c1)) 55%, transparent), color-mix(in srgb, var(--oc2, var(--sc-c2)) 30%, transparent));
  border: 1px solid rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 18px 40px -18px color-mix(in srgb, var(--oc, var(--sc-c1)) 90%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(var(--r, 0deg));
  animation: sc-in .9s var(--d0, 0s) cubic-bezier(.34,1.56,.64,1) forwards, sc-float var(--t, 7s) calc(var(--d0, 0s) + .9s) ease-in-out infinite alternate; transition: translate .6s cubic-bezier(.16,1,.3,1); }
.sc-obj .ic { width: 46%; height: 46%; color: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.sc-obj.is-swap { animation: sc-out .5s ease forwards; }
@keyframes sc-in { to { opacity: var(--o, .9); transform: translate(-50%, -50%) scale(1) rotate(var(--r, 0deg)); } }
@keyframes sc-out { to { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(calc(var(--r, 0deg) + 90deg)); } }
@keyframes sc-float { from { transform: translate(-50%, -50%) translateY(-10px) rotate(calc(var(--r, 0deg) - 6deg)); opacity: var(--o, .9); } to { transform: translate(-50%, -50%) translateY(12px) rotate(calc(var(--r, 0deg) + 6deg)); opacity: var(--o, .9); } }

/* copy + rotating features */
.sc-in { position: absolute; z-index: 1; inset-inline: clamp(24px, 5vw, 64px); bottom: clamp(28px, 7vh, 72px); display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.sc-badge { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); font-weight: 800; font-size: 13.5px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sc-badge .ic { width: 16px; height: 16px; color: color-mix(in srgb, var(--sc-c3) 70%, #fff); }
.sc-h { margin: 0; font-size: clamp(30px, 3.2vw, 50px); line-height: 1.15; font-weight: 900; letter-spacing: -.02em; text-wrap: balance; }
.sc-rot { display: inline-grid; vertical-align: bottom; overflow: hidden; padding-bottom: .08em; }
.sc-rot > span { grid-area: 1 / 1; background: linear-gradient(100deg, var(--sc-c1), var(--sc-c2) 50%, var(--sc-c3)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  transform: translateY(110%); opacity: 0; transition: transform .7s cubic-bezier(.34,1.56,.64,1), opacity .4s; white-space: nowrap; }
.sc-rot > span.is-on { transform: none; opacity: 1; }
.sc-rot > span.is-out { transform: translateY(-110%); opacity: 0; }
.sc-feats { position: relative; min-height: 104px; }
.sc-feat { position: absolute; inset: 0 0 auto; display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 22px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 30px 60px -30px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(26px) scale(.96); filter: blur(6px); transition: opacity .6s, transform .7s cubic-bezier(.34,1.56,.64,1), filter .6s; pointer-events: none; }
.sc-feat.is-on { opacity: 1; transform: none; filter: none; }
.sc-feat.is-out { opacity: 0; transform: translateY(-22px) scale(.97); filter: blur(6px); }
.sc-feat__ic { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--tone); box-shadow: 0 14px 30px -12px var(--tone-s); }
.sc-feat__ic .ic { width: 28px; height: 28px; color: #fff; }
.sc-feat.is-on .sc-feat__ic { animation: sc-pop .8s .15s cubic-bezier(.34,1.56,.64,1); }
@keyframes sc-pop { 0% { transform: scale(.6) rotate(-14deg); } 100% { transform: none; } }
.sc-feat__b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sc-feat__b strong { font-size: 18px; font-weight: 800; }
.sc-feat__b small { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.78); }
.sc-steps { display: flex; gap: 6px; }
.sc-steps i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; }
.sc-steps b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sc-c1), var(--sc-c2)); }
.sc-steps i.is-done b { width: 100%; }
.sc-steps i.is-on b { animation: sc-fill var(--sc-ms, 4200ms) linear forwards; }
@keyframes sc-fill { to { width: 100%; } }
.sc-mini { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sc-mini li { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.85); }
.sc-mini .ic { width: 15px; height: 15px; color: var(--tone-c); }
.sc-tone-1 { --tone: linear-gradient(135deg, #FF3D6E, #FF8A3D); --tone-s: rgba(255,61,110,.8); --tone-c: #FF8FA8; }
.sc-tone-2 { --tone: linear-gradient(135deg, #8B5CF6, #6366F1); --tone-s: rgba(139,92,246,.8); --tone-c: #C4B5FD; }
.sc-tone-3 { --tone: linear-gradient(135deg, #06B6D4, #3B82F6); --tone-s: rgba(6,182,212,.8); --tone-c: #7DD3FC; }
.sc-tone-4 { --tone: linear-gradient(135deg, #F59E0B, #F97316); --tone-s: rgba(245,158,11,.8); --tone-c: #FCD34D; }
.sc-tone-5 { --tone: linear-gradient(135deg, #10B981, #14B8A6); --tone-s: rgba(16,185,129,.8); --tone-c: #6EE7B7; }
.sc-tone-6 { --tone: linear-gradient(135deg, #E0249A, #A855F7); --tone-s: rgba(224,36,154,.8); --tone-c: #F0ABFC; }

/* slides mode */
.sc-slides { position: absolute; inset: 0; }
.sc-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; }
.sc-slide.is-on { opacity: 1; }
.sc-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 9s cubic-bezier(.16,1,.3,1); }
.sc-slide.is-on img { transform: scale(1); }
.sc-veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,6,26,.85), rgba(8,6,26,.1) 55%), linear-gradient(90deg, rgba(8,6,26,.35), transparent); pointer-events: none; }
.sc-cap { position: absolute; z-index: 2; inset-inline: clamp(24px, 5vw, 64px); bottom: clamp(56px, 10vh, 96px); display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.sc-slide.is-on .sc-cap > * { animation: sc-up .9s cubic-bezier(.16,1,.3,1) both; }
.sc-slide.is-on .sc-cap > :nth-child(2) { animation-delay: .1s; } .sc-slide.is-on .sc-cap > :nth-child(3) { animation-delay: .2s; }
@keyframes sc-up { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } }
.sc-kick { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; height: 32px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); font-weight: 800; font-size: 13px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sc-kick i { width: 8px; height: 8px; border-radius: 50%; background: #FF3D6E; }
.sc-cap__t { font-size: clamp(28px, 3vw, 46px); font-weight: 900; line-height: 1.15; text-shadow: 0 2px 24px rgba(0,0,0,.4); }
.sc-cap__d { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.85); }
.sc-dots { position: absolute; z-index: 3; inset-inline: clamp(24px, 5vw, 64px); bottom: clamp(24px, 5vh, 44px); display: flex; gap: 6px; max-width: 560px; }
.sc-dots i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.25); overflow: hidden; }
.sc-dots b { display: block; height: 100%; width: 0; background: #fff; }
.sc-dots i.is-done b { width: 100%; }
.sc-dots i.is-on b { animation: sc-fill var(--sc-ms, 6000ms) linear forwards; }

/* hosts: the member sign-in art panel and the Studio sign-in art panel */
.au-art.sc-host, .sa__art.sc-host { position: relative; overflow: hidden; background: #0A0820; }
.au-art.sc-host > :not(.sc), .sa__art.sc-host > :not(.sc) { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .sc *, .sc { animation: none !important; transition: none !important; }
  .sc-obj { opacity: .85; transform: translate(-50%, -50%); }
  .sc-feat:not(.is-on), .sc-slide:not(.is-on) { display: none; }
}
.sc .sc-mini li { width: auto; flex: none; margin: 0; }
.sc .sc-feat__b strong, .sc .sc-feat__b small { text-align: start; }