/*
 * The panda on the student login card - the live theme's copy.
 * Generated from the preview theme's stylesheet so the two cannot drift;
 * only the colours that used the other theme's custom properties are
 * rewritten, to this site's own gold and navy.
 */

/* ==========================================================================
   The panda above the student login card.

   Drawn entirely in CSS - circles, radii and two pseudo-elements for the
   mouth. No image file, so there is nothing to block or fail to load, and it
   scales cleanly. panda-login.js builds the markup and toggles two states:
   .is-peeking while the password field has focus, .is-looking while the
   username is being typed.
   ========================================================================== */
.cc-panda {
	--cc-panda-dark: #2f2a2a;
	--cc-pupil-x: 0px;
	--cc-pupil-y: 0px;
	position: relative;
	/* z-index stays auto on purpose. The panda is the card's previous sibling,
	   so with no stacking context of its own its parts are painted in document
	   order and the card covers them - which is what puts the head behind the
	   form. The paws then opt back out with a z-index of their own. */
	z-index: auto;
	width: 150px;
	height: 132px;
	/* The overlap is what decides how high the panda sits. -18px keeps the
	   chin tucked behind the card's top edge - the point of the layering -
	   while lifting the head clear of it. It started at -44, which buried the
	   face and put the raised paws right on the boundary. */
	margin: 0 auto -18px;
	pointer-events: none;
}

/* ---- ears ---- */
.cc-panda__ear {
	position: absolute;
	top: 2px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--cc-panda-dark);
}
.cc-panda__ear--l { left: 8px; }
.cc-panda__ear--r { right: 8px; }

/* ---- face ---- */
.cc-panda__face {
	position: absolute;
	left: 50%;
	top: 14px;
	width: 128px;
	height: 114px;
	margin-left: -64px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 10px 24px rgba(18, 41, 79, .22);
}

/* ---- eye patches, eyes, pupils ---- */
.cc-panda__patch {
	position: absolute;
	top: 48px;
	width: 44px;
	height: 40px;
	border-radius: 50%;
	background: var(--cc-panda-dark);
}
.cc-panda__patch--l { left: 20px; transform: rotate(-14deg); }
.cc-panda__patch--r { right: 20px; transform: rotate(14deg); }
.cc-panda__eye {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border-radius: 50%;
	background: #fff;
}
.cc-panda__pupil {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 9px;
	height: 9px;
	margin: -4.5px 0 0 -4.5px;
	border-radius: 50%;
	background: var(--cc-panda-dark);
	transform: translate(var(--cc-pupil-x), var(--cc-pupil-y));
	transition: transform .18s ease;
}

/* ---- blush, nose, mouth ---- */
.cc-panda__blush {
	position: absolute;
	top: 74px;
	width: 20px;
	height: 11px;
	border-radius: 50%;
	background: rgba(232, 176, 75, .40);
}
.cc-panda__blush--l { left: 16px; }
.cc-panda__blush--r { right: 16px; }
.cc-panda__nose {
	position: absolute;
	left: 50%;
	top: 80px;
	width: 17px;
	height: 12px;
	margin-left: -8.5px;
	border-radius: 50% 50% 50% 50% / 40% 40% 70% 70%;
	background: var(--cc-panda-dark);
}
/* two small arcs under the nose */
.cc-panda__mouth {
	position: absolute;
	left: 50%;
	top: 92px;
	width: 34px;
	height: 12px;
	margin-left: -17px;
}
.cc-panda__mouth::before,
.cc-panda__mouth::after {
	content: "";
	position: absolute;
	top: 0;
	width: 17px;
	height: 11px;
	border: 2px solid var(--cc-panda-dark);
	border-top: 0;
	border-left: 0;
	border-right: 0;
	border-radius: 0 0 50% 50%;
}
.cc-panda__mouth::before { left: 0; }
.cc-panda__mouth::after  { right: 0; }

/* ---- paws ---- */
/* Taller than wide - these read as arms hanging over the card, not as two
   wide pads. The first attempt widened them instead, which just made a bar
   across the header. 68px tall against the panda's 132px box means they run
   past its bottom edge and down over the card, which is the point. */
.cc-panda__paw {
	position: absolute;
	top: 92px;
	z-index: 2;             /* in front of the card - the panda holds it */
	width: 44px;
	height: 68px;
	border-radius: 22px 22px 14px 14px;
	background: var(--cc-panda-dark);
	transition: transform .32s cubic-bezier(.34, 1.4, .64, 1);
}
.cc-panda__paw--l { left: 16px; }
.cc-panda__paw--r { right: 16px; }

/* Three toes across the top of each paw - the end that lands on the eyes.
   They sit in the same dark as the paw and overlap it, so they do not read as
   separate blobs; what changes is the outline, which is what makes it look
   like a paw. The middle one stands slightly higher, as a real one does. */
.cc-panda__finger {
	position: absolute;
	top: -5px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--cc-panda-dark);
}
.cc-panda__finger--1 { left: 1px; }
.cc-panda__finger--2 { left: 14.5px; top: -8px; }
.cc-panda__finger--3 { left: 28px; }
/* A claw on each toe. Set just inside the toe's outer edge so it reads as a
   nail on the tip rather than a dot in the middle. */
.cc-panda__finger::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 2.5px;
	width: 7px;
	height: 6px;
	margin-left: -3.5px;
	border-radius: 50% 50% 40% 40%;
	background: #fff;
}

/* Password focused: the arms come up and the hands land on the eyes. The 30px
   gap between them leaves the nose and mouth showing, so the panda reads as
   covering its eyes rather than its whole face. */
/* The rise was walked down by measurement: at -48 the toes sat 8px onto the
   forehead, at -42 still 2px above the eye patch. -34 is the lowest that keeps
   the eyes fully covered - at -32 the paw top clears the eye and it shows
   again - so -35 is that floor with a pixel to spare. */
.cc-panda.is-peeking .cc-panda__paw--l { transform: translate(6px, -35px) rotate(-8deg); }
.cc-panda.is-peeking .cc-panda__paw--r { transform: translate(-6px, -35px) rotate(8deg); }

/* ==========================================================================
   The panda's moods.

   Each is a class the script puts on .cc-panda; the motion is all here. The
   login is a plain POST that reloads the page, so a failed attempt is read off
   the error the plugin prints and shown on the way back - and a success can
   never be shown, because the server redirects first. That is why the happy
   state is "sending", not "logged in".
   ========================================================================== */

/* ---- idle: a blink every few seconds, and one ear that twitches ---------- */
.cc-panda__eye {
	transform-origin: center;
	animation: cc-blink 6s infinite;
}
@keyframes cc-blink {
	0%, 92%, 100% { transform: scaleY(1); }
	95%           { transform: scaleY(.08); }
}
/* The ear is a 48px circle, so rotating it - the obvious way to write a
   twitch - changes nothing you can see. It has to move or change shape. */
.cc-panda__ear--r { animation: cc-ear 7s ease-in-out infinite; }
@keyframes cc-ear {
	0%, 86%, 100% { transform: translate(0, 0) scale(1); }
	89%           { transform: translate(2px, -4px) scale(1.10, .92); }
	93%           { transform: translate(-1px, -1px) scale(.97, 1.04); }
}

/* ---- typing in the username: the pupils give a little hop ---------------- */
.cc-panda.is-typing .cc-panda__pupil {
	transform: translate(var(--cc-pupil-x), calc(var(--cc-pupil-y) - 1.5px)) scale(1.15);
}

/* ---- password revealed: the paws part instead of sealing the eyes -------- */
.cc-panda.is-peeking.is-gap .cc-panda__paw--l { transform: translate(-2px, -35px) rotate(-15deg); }
.cc-panda.is-peeking.is-gap .cc-panda__paw--r { transform: translate(2px, -35px) rotate(15deg); }

/* ---- the last attempt failed -------------------------------------------- */
.cc-panda.is-sad .cc-panda__mouth { transform: rotate(180deg) translateY(6px); }
/* one paw stays half up, as if peeking through */
.cc-panda.is-sad .cc-panda__paw--l { transform: translate(6px, -35px) rotate(-8deg); }
.cc-panda.is-sad .cc-panda__eye--dummy { display: none; }
.cc-shake { animation: cc-shake .55s cubic-bezier(.36, .07, .19, .97); }
@keyframes cc-shake {
	10%, 90% { transform: translateX(-3px); }
	20%, 80% { transform: translateX(5px); }
	30%, 50%, 70% { transform: translateX(-8px); }
	40%, 60% { transform: translateX(8px); }
}

/* ---- submitted with a field empty --------------------------------------- */
.cc-panda.is-curious .cc-panda__face { transform: rotate(-8deg); }
.cc-panda.is-curious { transform: rotate(2deg); }
/* the field that was left blank */
.site-content input.cc-empty {
	border-color: #e8b04b !important;
	box-shadow: 0 0 0 3px rgba(232, 176, 75, .22) !important;
}

/* ---- submitted, waiting on the server ----------------------------------- */
.cc-panda.is-sending .cc-panda__paw--r {
	transform-origin: bottom center;
	animation: cc-wave .5s ease-in-out 3;
}
@keyframes cc-wave {
	0%, 100% { transform: translate(-6px, -20px) rotate(10deg); }
	50%      { transform: translate(-6px, -20px) rotate(-22deg); }
}

/* ---- late evening -------------------------------------------------------- */
.cc-panda.is-sleepy .cc-panda__eye { animation: cc-blink 4s infinite; transform: scaleY(.55); }
.cc-panda.is-sleepy .cc-panda__mouth { transform: scale(.7); }

/* ---- the speech bubble: caps lock, and the "?" on an empty submit -------- */
.cc-panda__bubble {
	position: absolute;
	left: 50%;
	top: -16px;
	transform: translate(-50%, 6px);
	padding: 4px 10px;
	border-radius: 12px;
	background: var(--cc-panda-dark);
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
	z-index: 4;
}
.cc-panda.is-talking .cc-panda__bubble {
	opacity: 1;
	transform: translate(-50%, 0);
}
/* caps lock also lifts the ears, like a raised eyebrow */
.cc-panda.has-caps .cc-panda__ear { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
	.cc-panda__eye,
	.cc-panda__ear--r,
	.cc-panda.is-sending .cc-panda__paw--r,
	.cc-shake { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cc-panda__paw,
	.cc-panda__pupil { transition: none; }
}

/* .wlsm-auth-container is a flex row, so the panda first landed beside the
   card rather than above it - and was squeezed to 111px by flex shrink.
   Stack the column and stop it shrinking. The card must not clip the overlap
   either. */
.wlsm-auth-container:has(.cc-panda) {
	flex-direction: column;
	align-items: center;
}
.wlsm-auth-container:has(.cc-panda) .wlsm-auth-card {
	overflow: visible;
	position: relative;
	z-index: 1;             /* covers the head, stays under the paws */
}
.cc-panda { flex: 0 0 auto; }

/* ==========================================================================
   Login card header - tightened.

   The plugin gives it min-height:186px and stacks four things inside: a
   "Secure Access" chip, the college crest, the title and a subtitle. Measured
   at 254px, which is taller than the form beneath it, and the panda now sits
   on top of it as well.

   Everything is kept - the crest is only scaled down, not dropped - and the
   height comes out of the padding, the chip, the crest and the title's own
   leading instead.
   ========================================================================== */
.site-content .wlsm-auth-header {
	min-height: 0 !important;
	padding: 14px 20px 16px !important;
}
.site-content .wlsm-auth-badge {
	padding: 5px 12px !important;
	font-size: 10px !important;
	line-height: 1.2 !important;
}
/* The crest is dropped rather than shrunk. It sat directly under the panda,
   which put the panda's paws across it, and the college logo is already the
   largest thing in the site header immediately above this card - so nothing is
   lost by it, and it was the single biggest block of height left. */
.site-content .wlsm-auth-brand-mark {
	display: none !important;
}
.site-content .wlsm-auth-title {
	margin: 4px 0 4px !important;
	font-size: 19px !important;
	line-height: 1.25 !important;
}
.site-content .wlsm-auth-subtitle {
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
}