/* Rils Agency - animated auth portal
 * ----------------------------------
 * The login and register pages were plain WordPress forms on a flat panel.
 * This dresses them as a glass card floating over a slow aurora, with
 * floating labels, a focus glow, a password reveal eye and a staged entrance.
 *
 * Nothing here changes the forms themselves. The markup, the field names and
 * the wp-login.php action are untouched, so authentication keeps working
 * exactly as before and Nextend's Google button still slots in. If this file
 * failed to load the pages would simply look plain again.
 */

.rils-auth {
	position: relative;
	min-height: calc(100vh - var(--rils-header-h, 84px));
	display: grid;
	place-items: center;
	padding: 48px 20px 72px;
	overflow: hidden;
}

/* ---------------------------------------------------------------- aurora */

.rils-auth__sky {
	position: absolute;
	inset: -30% -10% -10%;
	z-index: 0;
	pointer-events: none;
}

.rils-auth__blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: .5;
	will-change: transform;
}

.rils-auth__blob--a {
	width: 46vmax; height: 46vmax;
	left: -12vmax; top: 2vmax;
	background: radial-gradient(circle at 30% 30%, rgba(231, 184, 63, .55), transparent 62%);
	animation: rils-drift-a 22s ease-in-out infinite;
}

.rils-auth__blob--b {
	width: 40vmax; height: 40vmax;
	right: -10vmax; top: 12vmax;
	background: radial-gradient(circle at 60% 40%, rgba(96, 132, 255, .38), transparent 62%);
	animation: rils-drift-b 27s ease-in-out infinite;
}

.rils-auth__blob--c {
	width: 34vmax; height: 34vmax;
	left: 32%; bottom: -14vmax;
	background: radial-gradient(circle at 50% 50%, rgba(231, 184, 63, .3), transparent 65%);
	animation: rils-drift-c 31s ease-in-out infinite;
}

@keyframes rils-drift-a {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); }
}
@keyframes rils-drift-b {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
	50%      { transform: translate3d(-5vmax, 6vmax, 0) scale(.92); }
}
@keyframes rils-drift-c {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(4vmax, -5vmax, 0); }
}

/* Fine grain so the gradient never looks like flat banding. */
.rils-auth__grain {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: .05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ the card */

.rils-auth__card {
	position: relative;
	z-index: 2;
	width: min(100%, 440px);
	padding: 38px 34px 30px;
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(16, 26, 48, .82), rgba(11, 18, 36, .9));
	border: 1px solid rgba(255, 255, 255, .1);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	box-shadow:
		0 28px 70px rgba(0, 0, 0, .5),
		inset 0 1px 0 rgba(255, 255, 255, .12);
	animation: rils-card-in .7s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes rils-card-in {
	from { opacity: 0; transform: translateY(26px) scale(.97); }
	to   { opacity: 1; transform: none; }
}

/* A slow sheen that travels along the card edge. */
.rils-auth__card::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(120deg,
		transparent 20%,
		rgba(231, 184, 63, .55) 45%,
		rgba(255, 255, 255, .3) 52%,
		transparent 78%);
	background-size: 260% 100%;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	animation: rils-sheen 7s linear infinite;
	pointer-events: none;
}

@keyframes rils-sheen {
	from { background-position: 130% 0; }
	to   { background-position: -130% 0; }
}

/* ------------------------------------------------------------- heading */

.rils-auth__badge {
	width: 62px; height: 62px;
	margin: 0 auto 16px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: radial-gradient(circle at 40% 35%, rgba(231, 184, 63, .3), rgba(231, 184, 63, .08));
	border: 1px solid rgba(231, 184, 63, .4);
	box-shadow: 0 0 0 6px rgba(231, 184, 63, .07);
	animation: rils-badge-float 4.5s ease-in-out infinite;
}

.rils-auth__badge svg { width: 26px; height: 26px; fill: var(--rils-gold, #E7B83F); }

@keyframes rils-badge-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}

.rils-auth h3.rils-portal__h,
.rils-auth__card h3 {
	margin: 0 0 4px;
	text-align: center;
	font-family: var(--rils-font-head, Sora, sans-serif);
	font-size: 25px;
	letter-spacing: -.01em;
	color: var(--rils-ink, #F5F7FA);
}

.rils-auth__sub {
	margin: 0 0 24px;
	text-align: center;
	font-size: 14px;
	color: var(--rils-muted, #9AA6BA);
}

/* --------------------------------------------------------- the fields */

.rils-auth .rils-field {
	position: relative;
	margin: 0 0 18px;
}

/* The global form styling in rils-tokens.css sets padding with !important on
 * every input on the site. That rule was winning here, so the left gutter
 * never appeared and the icon sat on top of the typed email. These have to
 * shout back to reclaim the space. */
.rils-auth .rils-field input[type="text"],
.rils-auth .rils-field input[type="email"],
.rils-auth .rils-field input[type="password"] {
	width: 100%;
	padding: 23px 46px 7px 52px !important;
	height: 62px !important;
	border-radius: 14px !important;
	border: 1px solid rgba(255, 255, 255, .12) !important;
	background: rgba(5, 10, 24, .6) !important;
	color: var(--rils-ink, #F5F7FA) !important;
	font-size: 15px;
	line-height: 1.2;
	text-overflow: ellipsis;
	transition: border-color .25s, box-shadow .25s, background .25s;
	box-shadow: none;
}

.rils-auth .rils-field input:focus {
	outline: none;
	border-color: rgba(231, 184, 63, .75) !important;
	background: rgba(5, 10, 24, .85) !important;
	box-shadow: 0 0 0 4px rgba(231, 184, 63, .13);
}

/* The label starts inside the box and lifts as soon as there is content. */
.rils-auth .rils-field label {
	position: absolute;
	left: 52px;
	top: 21px;
	margin: 0;
	font-size: 15px;
	color: var(--rils-muted, #9AA6BA);
	pointer-events: none;
	transition: transform .22s cubic-bezier(.22, 1, .36, 1), font-size .22s, color .22s;
	transform-origin: left top;
	white-space: nowrap;
}

/* The label lifts when the field has content OR is focused.
 *
 * :placeholder-shown is what makes this reliable. The script gives every
 * input a blank placeholder, so the moment ANYTHING sits in the box - typed,
 * pasted, or filled in by the browser's password manager - the placeholder
 * stops showing and the label gets out of the way. The earlier version
 * depended on a JavaScript class, which never fired on autofill, so saved
 * logins appeared with the label printed straight over the email address. */
.rils-auth .rils-field input:focus + label,
.rils-auth .rils-field input:not(:placeholder-shown) + label,
.rils-auth .rils-field input:-webkit-autofill + label,
.rils-auth .rils-field.is-filled label {
	transform: translateY(-13px) scale(.76);
	color: var(--rils-gold, #E7B83F);
}

/* Chrome paints autofilled boxes pale blue and black-on-white. Hold the dark
 * field and light text instead. */
.rils-auth .rils-field input:-webkit-autofill,
.rils-auth .rils-field input:-webkit-autofill:hover,
.rils-auth .rils-field input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--rils-ink, #F5F7FA);
	-webkit-box-shadow: 0 0 0 1000px #0A1122 inset;
	        box-shadow: 0 0 0 1000px #0A1122 inset;
	caret-color: var(--rils-ink, #F5F7FA);
	transition: background-color 9999s ease-out 0s;
}

.rils-auth .rils-field__ico {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 17px; height: 17px;
	fill: var(--rils-muted, #9AA6BA);
	transition: fill .25s;
	pointer-events: none;
	z-index: 1;
}

.rils-auth .rils-field.is-focus .rils-field__ico { fill: var(--rils-gold, #E7B83F); }

/* Password reveal */
.rils-auth .rils-eye {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px; height: 34px;
	display: grid;
	place-items: center;
	border: 0;
	background: transparent;
	cursor: pointer;
	border-radius: 8px;
}

.rils-auth .rils-eye svg { width: 18px; height: 18px; fill: var(--rils-muted, #9AA6BA); transition: fill .2s; }
.rils-auth .rils-eye:hover svg { fill: var(--rils-gold, #E7B83F); }
.rils-auth .rils-eye__off { display: none; }
.rils-auth .rils-eye.is-on .rils-eye__on  { display: none; }
.rils-auth .rils-eye.is-on .rils-eye__off { display: block; }

/* --------------------------------------------------------- submit row */

.rils-auth .login-remember,
.rils-auth .rils-authrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 20px;
	font-size: 13.5px;
	color: var(--rils-muted, #9AA6BA);
}

.rils-auth .login-remember label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.rils-auth input[type="checkbox"] { accent-color: var(--rils-gold, #E7B83F); width: 15px; height: 15px; }

.rils-auth .login-submit { margin: 0; }

.rils-auth input[type="submit"],
.rils-auth button.rils-btn {
	position: relative;
	width: 100%;
	height: 52px;
	border: 0;
	border-radius: 13px;
	font-family: var(--rils-font-head, Sora, sans-serif);
	font-size: 15.5px;
	font-weight: 600;
	color: #14100A;
	background: linear-gradient(135deg, #F2C94C, #E7B83F);
	cursor: pointer;
	overflow: hidden;
	transition: transform .15s, box-shadow .25s, filter .2s;
	box-shadow: 0 12px 28px rgba(231, 184, 63, .26);
}

.rils-auth input[type="submit"]:hover,
.rils-auth button.rils-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(231, 184, 63, .34); }
.rils-auth input[type="submit"]:active { transform: translateY(0); }

/* ------------------------------------------------------------ footers */

.rils-auth__alt {
	position: relative;
	margin: 22px 0 16px;
	text-align: center;
	font-size: 12.5px;
	color: var(--rils-muted, #9AA6BA);
}

.rils-auth__alt::before,
.rils-auth__alt::after {
	content: "";
	position: absolute;
	top: 50%;
	width: calc(50% - 34px);
	height: 1px;
	background: rgba(255, 255, 255, .1);
}
.rils-auth__alt::before { left: 0; }
.rils-auth__alt::after  { right: 0; }

.rils-auth .rils-portal__foot,
.rils-auth__foot {
	margin: 18px 0 0;
	text-align: center;
	font-size: 13.5px;
	color: var(--rils-muted, #9AA6BA);
}

.rils-auth a { color: var(--rils-gold, #E7B83F); text-decoration: none; }
.rils-auth a:hover { text-decoration: underline; }

/* Google button from Nextend, brought into the card's language. */
.rils-auth .nsl-container { margin: 0 0 4px; }
.rils-auth .nsl-container .nsl-button { border-radius: 13px !important; overflow: hidden; }

/* Messages */
.rils-auth .rils-authnote {
	margin: 0 0 18px;
	padding: 12px 14px;
	border-radius: 12px;
	font-size: 13.5px;
	line-height: 1.5;
}
.rils-auth .rils-authnote--bad  { background: rgba(220, 76, 70, .12); border: 1px solid rgba(220, 76, 70, .35); color: #FFD9D7; }
.rils-auth .rils-authnote--good { background: rgba(60, 180, 120, .12); border: 1px solid rgba(60, 180, 120, .35); color: #D4F5E4; }
.rils-auth .rils-authnote ul { margin: 0; padding-left: 18px; }

/* WordPress's own error box on the login page */
.rils-auth #login_error,
.rils-auth .message {
	margin: 0 0 18px;
	padding: 12px 14px;
	border-radius: 12px;
	background: rgba(220, 76, 70, .12);
	border: 1px solid rgba(220, 76, 70, .35);
	color: #FFD9D7;
	font-size: 13.5px;
}

/* --------------------------------------------------------- responsive */

/* The shortcodes wrap their form in .rils-authbox, which carries its own
 * panel background, border and padding from the components sheet. Inside the
 * glass card that reads as a box within a box. Strip its chrome so the card
 * is the only surface. */
.rils-auth .rils-authbox {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}

.rils-auth form { margin: 0; }
.rils-auth p { margin: 0 0 16px; }

/* Until the script wraps a field, its label sits above the input as normal
 * text. Without this it inherits the theme's heavier styling and looks
 * mismatched next to the ones that did get wrapped. */
.rils-auth label {
	display: block;
	margin: 0 0 7px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--rils-muted, #9AA6BA);
}

/* Inside a wrapped field the label floats, so undo the block spacing. */
.rils-auth .rils-field label { display: inline; margin: 0; font-weight: 400; }

/* Remember me sits on its own line and reads as a control, not a heading. */
.rils-auth .login-remember label {
	display: inline-flex;
	margin: 0;
	font-size: 13.5px;
	font-weight: 400;
}

/* Google, in the card's language rather than its own black slab. */
.rils-auth .nsl-container .nsl-button-google {
	background-color: rgba(255, 255, 255, .05) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16) !important;
	color: var(--rils-ink, #F5F7FA) !important;
	border-radius: 13px !important;
	height: 50px;
	align-items: center;
	transition: background-color .2s, box-shadow .2s;
}

.rils-auth .nsl-container .nsl-button-google:hover {
	background-color: rgba(255, 255, 255, .09) !important;
	box-shadow: inset 0 0 0 1px rgba(231, 184, 63, .5) !important;
}

.rils-auth .nsl-container .nsl-button-label-container {
	font-family: var(--rils-font-body, Manrope, sans-serif) !important;
	font-size: 14.5px !important;
	font-weight: 500;
	margin: 0 18px 0 4px !important;
}

.rils-auth .nsl-container .nsl-button-label-container b { font-weight: 600; }
.rils-auth .nsl-container-buttons { padding: 0; }

/* The register form's helper line under the password. */
.rils-auth small,
.rils-auth .rils-hint {
	display: block;
	margin: -8px 0 16px;
	font-size: 12.5px;
	color: var(--rils-muted, #9AA6BA);
	opacity: .85;
}

/* --------------------------------------------------------- responsive */

@media (max-width: 520px) {
	.rils-auth { padding: 30px 16px 56px; }
	.rils-auth__card { padding: 30px 22px 24px; border-radius: 18px; }
	.rils-auth h3.rils-portal__h { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.rils-auth__blob,
	.rils-auth__badge,
	.rils-auth__card,
	.rils-auth__card::before { animation: none !important; }
}