/* Sign in + Sign up (book p14, p19). Desktop (768px+): split 50/50, LEFT a royal-blue panel with the mail loop
   + three trust lines, RIGHT the form. Phone: a short static strip above the form.
   Tokens only (styles/tokens.css); shared buttons, fields, checkbox, notices and spinner come from base.css.
   Motion: transform / opacity only (z-index and fill steps for the flap at 90deg). 768px+ one 7.5s loop: a template
   goes into the envelope, the flap closes in front of it, stamp, postmark, it flies off, next template.
   After a successful log in / sign up the letter seals and flies once (1.8s). Reduced motion = still frame. */

.auth {
	display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; align-content: start;
	background: var(--color-page);
}

/* ---------------------------------------------------------------- visual panel */
.auth__visual {
	--k: .34;
	position: relative; overflow: hidden; isolation: isolate;
	display: grid; align-content: center; justify-items: center;
	margin: var(--space-4) var(--page-gutter) 0; padding: var(--space-4);
	border-radius: var(--radius-modal);
	background: var(--band-blue); color: var(--on-band-blue);
}
.auth__pitch { display: none; }

.scene { position: relative; width: 100%; height: calc(400px * var(--k)); }
.scene__stage {
	position: absolute; left: 50%; top: 0; width: 440px; height: 400px;
	transform: translateX(-50%) scale(var(--k)); transform-origin: top center;
}
/* White envelope, soft blue inside, blue seams. */
.scene__envelope { position: absolute; left: 60px; top: 180px; width: 320px; height: 196px; perspective: 900px; }
.scene__back, .scene__front, .scene__flap { position: absolute; inset: 0; border-radius: var(--radius-card); }
.scene__back { background: var(--color-info-bg); box-shadow: var(--shadow-raised); }
/* Front pocket: an SVG so the V seam can be drawn (a clip-path would cut a border off). */
.scene__front { z-index: 3; width: 100%; height: 100%; overflow: visible; }
.scene__front-body { fill: var(--color-surface); }
.scene__front-seam { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linejoin: round; }
/* The flap. Open = flipped up behind the letter (its soft blue inside shows); closed = white with blue seams.
   It swaps layers and faces exactly when it stands upright (90deg), so it always folds down IN FRONT of the letter. */
.scene__flap {
	z-index: 1; bottom: auto; height: 62%; border-radius: 0;
	transform-origin: 50% 0; transform: rotateX(180deg); backface-visibility: visible;
}
.scene__flap svg { display: block; width: 100%; height: 100%; overflow: visible; }
.scene__flap-paper { fill: var(--color-info-bg); }
.scene__flap-seam { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linejoin: round; }
/* The pocket clips the letter at the envelope's bottom edge, so it can slide in but never shows below. */
.scene__pocket { position: absolute; z-index: 2; left: -40px; right: -40px; top: -260px; bottom: 6px; overflow: hidden; }
.scene__letter {
	position: absolute; left: 82px; top: 84px; width: 236px; height: 295px;
	overflow: hidden; border-radius: var(--radius-control); background: var(--color-surface);
	box-shadow: var(--shadow-card);
}
.scene__letter img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* Fallback when the library has no thumbnails yet: a tiny schematic email. */
.scene__mini { display: grid; gap: 10px; padding: 18px; }
.scene__mini i { display: block; height: 14px; border-radius: 4px; background: var(--color-surface-tint); }
.scene__mini i:first-child { height: 90px; background: var(--color-info-bg); }
.scene__mini b { display: block; width: 50%; height: 30px; border-radius: 6px; background: var(--color-primary); }
.scene__lines { position: absolute; z-index: 4; left: 34px; bottom: 30px; display: grid; gap: 10px; }
.scene__lines i { display: block; width: 112px; height: 8px; border-radius: var(--radius-pill); background: var(--color-border); }
.scene__lines i:nth-child(2) { width: 76px; }
/* Royal-blue stamp with the white mark, on white perforated paper; a blue postmark ring over it. */
.scene__stamp {
	position: absolute; z-index: 6; right: 18px; top: 14px; width: 60px; height: 72px; overflow: visible;
	transform: rotate(6deg); filter: drop-shadow(0 2px 3px rgba(9, 9, 20, .18));
}
.scene__stamp-paper { fill: var(--color-surface); }
.scene__stamp-ink { fill: var(--color-primary); }
.scene__stamp-mark { fill: var(--color-on-primary); }
.scene__postmark {
	position: absolute; z-index: 5; right: 50px; top: 2px; width: 100px; height: 100px;
	color: var(--color-primary); opacity: .85; transform: rotate(-14deg);
	font-family: var(--font-mono);
}
/* Name of the template in the letter, under the envelope (1280px+). */
.scene__tag {
	position: absolute; z-index: 7; left: 50%; bottom: 0; display: none; max-width: 100%; transform: translateX(-50%);
	padding: 4px 12px; border-radius: var(--radius-pill);
	font-size: var(--font-size-small); font-weight: var(--font-weight-label); line-height: var(--line-height-label);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	color: var(--on-band-blue); background: var(--color-primary-active);
}

/* Still frame (phone strip, reduced motion, and the base under the loop): letter half in, flap open, stamped. */
.scene__letter { transform: translateY(70px); }

/* The loop (768px+, motion allowed). All parts share one 7.5s duration, so they stay in step.
   auth.js swaps the template on each iteration, while the stage is faded out. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
	.scene__stage { animation: sc-loop 7.5s var(--motion-ease) infinite; }
	.scene__letter { animation: sc-letter 7.5s var(--motion-ease) infinite; }
	.scene__flap { animation: sc-flap 7.5s linear infinite; }
	.scene__flap-paper { animation: sc-face 7.5s linear infinite; }
	.scene__stamp { animation: sc-stamp 7.5s var(--motion-ease) infinite; }
	.scene__postmark { animation: sc-mark 7.5s var(--motion-ease) infinite; }
	.scene__tag { animation: sc-tag 7.5s var(--motion-ease) infinite; }
}
@keyframes sc-loop {
	0% { opacity: 0; transform: translateX(-50%) translateY(16px) scale(var(--k)); }
	6%, 80% { opacity: 1; transform: translateX(-50%) scale(var(--k)); }
	93%, 100% { opacity: 0; transform: translateX(-50%) translate(calc(150px * var(--k)), calc(-110px * var(--k))) rotate(-9deg) scale(calc(var(--k) * .8)); }
}
@keyframes sc-letter {
	0%, 16% { transform: translateY(0); }
	38%, 100% { transform: translateY(186px); }
}
/* The 90deg keyframe pins the layer swap, so easing can never let the flap close while still behind the letter. */
@keyframes sc-flap {
	0%, 40% { transform: rotateX(180deg); z-index: 1; animation-timing-function: ease-in; }
	47% { transform: rotateX(90deg); z-index: 1; }
	47.01% { transform: rotateX(90deg); z-index: 4; animation-timing-function: ease-out; }
	54%, 100% { transform: rotateX(0deg); z-index: 4; }
}
@keyframes sc-face {
	0%, 47% { fill: var(--color-info-bg); }
	47.01%, 100% { fill: var(--color-surface); }
}
@keyframes sc-stamp {
	0%, 55% { opacity: 0; transform: translate(-30px, -50px) rotate(-24deg) scale(1.9); }
	61% { opacity: 1; transform: rotate(6deg) scale(.9); }
	65%, 100% { opacity: 1; transform: rotate(6deg) scale(1); }
}
@keyframes sc-mark {
	0%, 63% { opacity: 0; transform: rotate(-14deg) scale(1.35); }
	68%, 100% { opacity: .85; transform: rotate(-14deg) scale(1); }
}
@keyframes sc-tag {
	0%, 4% { opacity: 0; transform: translateX(-50%) translateY(6px); }
	10%, 78% { opacity: 1; transform: translateX(-50%); }
	88%, 100% { opacity: 0; transform: translateX(-50%) translateY(-6px); }
}

/* Success (auth.js adds .is-success to .auth), 768px+: the letter seals and flies once, then the sealed envelope
   comes back and stays. The phone strip stays still and the small envelope in the success panel plays instead. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
	.auth.is-success .scene__stage { animation: ss-fly 1.8s var(--motion-ease) both; }
	.auth.is-success .scene__letter { animation: ss-letter 1.8s var(--motion-ease) both; }
	.auth.is-success .scene__flap { animation: ss-flap 1.8s linear both; }
	.auth.is-success .scene__flap-paper { animation: ss-face 1.8s linear both; }
	.auth.is-success .scene__stamp { animation: ss-stamp 1.8s var(--motion-ease) both; }
	.auth.is-success .scene__postmark { animation: ss-mark 1.8s var(--motion-ease) both; }
	.auth.is-success .scene__tag { animation: none; opacity: 0; }
}
@keyframes ss-letter { 0% { transform: translateY(70px); } 24%, 100% { transform: translateY(186px); } }
@keyframes ss-flap {
	0%, 24% { transform: rotateX(180deg); z-index: 1; animation-timing-function: ease-in; }
	32% { transform: rotateX(90deg); z-index: 1; }
	32.01% { transform: rotateX(90deg); z-index: 4; animation-timing-function: ease-out; }
	40%, 100% { transform: rotateX(0deg); z-index: 4; }
}
@keyframes ss-face { 0%, 32% { fill: var(--color-info-bg); } 32.01%, 100% { fill: var(--color-surface); } }
@keyframes ss-stamp {
	0%, 40% { opacity: 0; transform: translate(-30px, -50px) rotate(-24deg) scale(1.9); }
	48% { opacity: 1; transform: rotate(6deg) scale(.9); }
	52%, 100% { opacity: 1; transform: rotate(6deg) scale(1); }
}
@keyframes ss-mark {
	0%, 50% { opacity: 0; transform: rotate(-14deg) scale(1.35); }
	56%, 100% { opacity: .85; transform: rotate(-14deg) scale(1); }
}
@keyframes ss-fly {
	0%, 62% { opacity: 1; transform: translateX(-50%) scale(var(--k)); }
	80% { opacity: 0; transform: translateX(-50%) translate(calc(170px * var(--k)), calc(-130px * var(--k))) rotate(-12deg) scale(calc(var(--k) * .7)); }
	81% { opacity: 0; transform: translateX(-50%) translateY(16px) scale(var(--k)); }
	100% { opacity: 1; transform: translateX(-50%) scale(var(--k)); }
}
/* Reduced motion: the still frame; success shows the sealed, stamped envelope at once. Beats base.css's global rule. */
@media (prefers-reduced-motion: reduce) {
	.scene__stage, .scene__letter, .scene__flap, .scene__flap-paper, .scene__stamp, .scene__postmark, .scene__tag { animation: none !important; }
	.auth.is-success .scene__letter { transform: translateY(186px); }
	.auth.is-success .scene__flap { transform: rotateX(0deg); z-index: 4; }
	.auth.is-success .scene__flap-paper { fill: var(--color-surface); }
	.auth.is-success .scene__tag { opacity: 0; }
}

/* ---------------------------------------------------------------- form side */
.auth__main { display: grid; justify-items: center; align-content: start; overflow-x: clip; padding: var(--space-6) var(--page-gutter) var(--space-7); }
.auth__box { position: relative; width: min(440px, 100%); }
.auth__pane { display: grid; gap: var(--space-5); }
.auth__pane[hidden] { display: none; }
.auth__head { display: grid; gap: var(--space-4); justify-items: start; }
.auth__title {
	font-size: var(--font-size-h2); font-weight: var(--font-weight-h2);
	line-height: var(--line-height-h2); letter-spacing: var(--letter-spacing-h2);
}
.auth__head p { color: var(--color-text-muted); }
.auth__head p strong { color: var(--color-text); font-weight: 600; overflow-wrap: anywhere; }
.auth__head-icon {
	display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
	color: var(--color-warning); background: var(--color-warning-bg);
}
.auth__checking { display: inline-flex; align-items: center; gap: var(--space-2); }

.auth__google .auth__google-icon { width: 20px; height: 20px; }
.auth__divider { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-small); }
.auth__divider::before, .auth__divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }

.auth__form { display: grid; gap: var(--space-5); }
.field__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.auth__small-link { font-size: var(--font-size-small); font-weight: var(--font-weight-label); }

/* Password with a 44px Show button inside the field (book p14). The name stays "Show password", aria-pressed = state. */
.field__pass { position: relative; }
.field .field__pass input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { padding-right: 52px; }
.field__eye {
	position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
	display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
	color: var(--color-text-muted); background: none; border: 0; border-radius: var(--radius-control); cursor: pointer;
}
.field__eye .icon { width: 20px; height: 20px; }
@media (hover: hover) { .field__eye:hover { color: var(--color-text); background: var(--color-surface-tint); } }
.field__eye[aria-pressed="true"] { color: var(--color-primary); }
.field__eye-off, .field__eye[aria-pressed="true"] .field__eye-on { display: none; }
.field__eye[aria-pressed="true"] .field__eye-off { display: block; }

/* Strength hint: a hint only, the rule is 10+ characters. Bars + words, never color alone. */
.strength { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); }
.strength i { height: 4px; border-radius: var(--radius-pill); background: var(--color-border); }
.strength[data-strength="1"] i:nth-child(-n+1) { background: var(--color-error); }
.strength[data-strength="2"] i:nth-child(-n+2) { background: var(--color-warning); }
.strength[data-strength="3"] i:nth-child(-n+3), .strength[data-strength="4"] i { background: var(--color-success); }

.auth__terms .check { align-items: flex-start; padding-top: 10px; min-height: 44px; }
.auth__terms .check span { line-height: var(--line-height-small); }

/* Loading (book p12): spinner + verb, variant colors kept (base.css greys out :disabled, the busy state is not that). */
.auth__spinner {
	display: none; width: 16px; height: 16px; flex: none;
	border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
}
.is-loading .auth__spinner { display: inline-block; animation: ete-spin .8s linear infinite; }
.btn.is-loading:disabled { color: var(--color-primary); background: var(--color-surface); border-color: var(--color-primary); cursor: progress; }
.btn--primary.is-loading:disabled { color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary); }

.auth__alt { text-align: center; color: var(--color-text-muted); }
.auth__alt a, .auth__alt .auth__linkbtn { font-weight: var(--font-weight-label); }
.auth__linkbtn {
	padding: 0; font: inherit; font-weight: var(--font-weight-label); color: inherit; background: none; border: 0; cursor: pointer;
	text-decoration: underline; text-underline-offset: .2em;
}
.auth__alt .auth__linkbtn { color: var(--color-link); }
.auth__noscript { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-card); color: var(--color-warning); background: var(--color-warning-bg); }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Status boxes: ink + icon + text (book p12). Types: info, success, warning, error. */
.auth__status {
	position: relative; display: grid; gap: var(--space-3);
	padding: var(--space-4) var(--space-4) var(--space-4) 48px; border-radius: var(--radius-card);
	color: var(--color-info); background: var(--color-info-bg);
	--status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
}
.auth__status::before {
	content: ''; position: absolute; left: 16px; top: 18px; width: 20px; height: 20px; background: currentColor;
	-webkit-mask: var(--status-icon) center / contain no-repeat; mask: var(--status-icon) center / contain no-repeat;
}
.auth__status[hidden] { display: none; }
.auth__status--success {
	color: var(--color-success); background: var(--color-success-bg);
	--status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}
.auth__status--warning {
	color: var(--color-warning); background: var(--color-warning-bg);
	--status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
.auth__status--error {
	color: var(--color-error); background: var(--color-error-bg);
	--status-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}
.auth__status a { color: inherit; font-weight: var(--font-weight-label); }
.auth__status-actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.auth__status-actions a, .auth__status-actions button { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------------------------------------------------------------- success panel ("You are logged in" / "Check your email") */
.auth-sent { display: grid; gap: var(--space-5); justify-items: start; }
.auth-sent[hidden] { display: none; }
.auth-sent:focus { outline: none; }
.auth-sent__title {
	display: flex; align-items: center; gap: var(--space-3);
	font-size: var(--font-size-h2); font-weight: var(--font-weight-h2); line-height: var(--line-height-h2); letter-spacing: var(--letter-spacing-h2);
}
.auth-sent__title::before {
	content: ''; flex: none; width: 32px; height: 32px; background: var(--color-success);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.auth-sent__text { color: var(--color-text-muted); }
.auth-sent__text strong { color: var(--color-text); font-weight: 600; overflow-wrap: anywhere; }
.auth-sent__actions { display: grid; gap: var(--space-3); width: 100%; }
.auth-sent .auth__status, .auth-sent .auth__alt { width: 100%; }

/* Small envelope (phone only; 768px+ the big one on the left plays). The letter seals, a royal-blue stamp lands and
   it flies off along a blue dashed trail, then comes back sealed. Same 90deg flap swap as the big one. */
.auth-sent__art { position: relative; width: 240px; height: 150px; }
.sent-env { position: absolute; left: 30px; top: 34px; width: 180px; height: 112px; perspective: 600px; }
.sent-env > span { position: absolute; inset: 0; border-radius: var(--radius-control); }
.sent-env__back { background: var(--color-info-bg); box-shadow: var(--shadow-card); }
.sent-env__letter {
	z-index: 2; left: 22px !important; right: 22px !important; top: -30px !important; bottom: 40px !important;
	background: var(--color-surface); border: 1px solid var(--color-border);
	box-shadow: inset 0 24px 0 var(--color-info-bg);
}
/* Front pocket: white, with the blue V seam drawn as two thin diagonals. */
.sent-env__front {
	z-index: 3; clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
	background:
		linear-gradient(to top right, transparent calc(50% - 1.5px), var(--color-accent) calc(50% - 1px), var(--color-accent) calc(50% + 1px), transparent calc(50% + 1.5px)) 0 0 / 50% 56% no-repeat,
		linear-gradient(to top left, transparent calc(50% - 1.5px), var(--color-accent) calc(50% - 1px), var(--color-accent) calc(50% + 1px), transparent calc(50% + 1.5px)) 100% 0 / 50% 56% no-repeat,
		var(--color-surface);
}
.sent-env__flap {
	z-index: 4; bottom: auto !important; height: 62%; border-radius: 0 !important;
	clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0;
	background-color: var(--color-surface);
	background-image:
		linear-gradient(to top right, transparent calc(50% + .5px), var(--color-accent) calc(50% + 1px), var(--color-accent) calc(50% + 3px), transparent calc(50% + 3.5px)),
		linear-gradient(to top left, transparent calc(50% + .5px), var(--color-accent) calc(50% + 1px), var(--color-accent) calc(50% + 3px), transparent calc(50% + 3.5px));
	background-size: 50% 100%; background-position: 0 0, 100% 0; background-repeat: no-repeat;
}
/* Royal-blue stamp, perforated edge (white dotted border over the blue), white mark. */
.sent-env__stamp {
	z-index: 5; inset: auto 10px auto auto !important; top: 6px !important; width: 30px; height: 36px; border-radius: 0 !important;
	display: grid; place-items: center;
	background: var(--color-primary); border: 3px dotted var(--color-surface);
	transform: rotate(6deg);
}
.sent-env__mark { width: 18px; height: auto; }
.sent-env__mark path { fill: var(--color-on-primary); }
.sent-trail {
	position: absolute; left: 120px; top: 20px; width: 110px; height: 2px; transform-origin: left; transform: rotate(-36deg) scaleX(0);
	background: repeating-linear-gradient(90deg, var(--color-accent) 0 8px, transparent 8px 14px); opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.auth-sent.is-playing .sent-env { animation: se-fly 1.8s var(--motion-ease) both; }
	.auth-sent.is-playing .sent-env__letter { animation: se-letter 1.8s var(--motion-ease) both; }
	.auth-sent.is-playing .sent-env__flap { animation: se-flap 1.8s linear both; }
	.auth-sent.is-playing .sent-env__stamp { animation: se-stamp 1.8s var(--motion-ease) both; }
	.auth-sent.is-playing .sent-trail { animation: se-trail 1.8s var(--motion-ease) both; }
}
@keyframes se-letter { 0% { transform: translateY(-24px); } 24%, 100% { transform: translateY(40px); } }
@keyframes se-flap { /* same 90deg layer swap as sc-flap; soft blue inside while open, white once closed */
	0%, 24% { transform: rotateX(180deg); z-index: 1; background-color: var(--color-info-bg); animation-timing-function: ease-in; }
	32% { transform: rotateX(90deg); z-index: 1; background-color: var(--color-info-bg); }
	32.01% { transform: rotateX(90deg); z-index: 4; background-color: var(--color-surface); animation-timing-function: ease-out; }
	40%, 100% { transform: rotateX(0); z-index: 4; background-color: var(--color-surface); }
}
@keyframes se-stamp {
	0%, 40% { opacity: 0; transform: translate(-14px, -24px) rotate(-20deg) scale(1.8); }
	48% { opacity: 1; transform: rotate(6deg) scale(.92); }
	52%, 100% { opacity: 1; transform: rotate(6deg); }
}
@keyframes se-fly {
	0%, 62% { opacity: 1; transform: none; }
	80% { opacity: 0; transform: translate(170px, -120px) rotate(-16deg) scale(.55); }
	81% { opacity: 0; transform: translateY(12px); }
	100% { opacity: 1; transform: none; }
}
@keyframes se-trail {
	0%, 62% { opacity: 0; transform: rotate(-36deg) scaleX(0); }
	76% { opacity: 1; transform: rotate(-36deg) scaleX(1); }
	92%, 100% { opacity: 0; transform: rotate(-36deg) scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
	.auth-sent .sent-env, .auth-sent .sent-env > span, .auth-sent .sent-trail { animation: none !important; }
	.sent-env__letter { transform: translateY(40px); }
	.sent-env__flap { transform: none; z-index: 4; }
}

/* While the success panel shows, the form pane steps back. */
.auth__box.is-sent > .auth__pane { display: none; }

/* ---------------------------------------------------------------- tablet + desktop: split 50/50 */
@media (min-width: 768px) {
	.auth { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: calc(100svh - var(--header-height)); }
	.auth__visual {
		--k: .6;
		position: sticky; top: calc(var(--header-height) + var(--space-4));
		height: calc(100svh - var(--header-height) - var(--space-6)); min-height: 560px;
		margin: var(--space-4) 0 var(--space-4) var(--space-4); padding: var(--panel-padding);
		align-content: center; gap: var(--space-6);
		border-radius: var(--radius-panel);
	}
	.admin-bar .auth__visual { top: calc(var(--header-height) + var(--space-4) + 32px); height: calc(100svh - var(--header-height) - var(--space-6) - 32px); }
	.auth__pitch { display: grid; gap: var(--space-5); width: 100%; max-width: 520px; }
	.auth__tagline {
		font-family: var(--font-display); font-size: var(--font-size-h3); font-weight: 300;
		line-height: var(--line-height-h3); letter-spacing: var(--letter-spacing-h3); text-wrap: balance;
	}
	.auth__trust { display: grid; gap: var(--space-3); }
	.auth__trust li { display: flex; gap: var(--space-3); align-items: flex-start; }
	.auth__trust .icon { width: 20px; height: 20px; margin-top: 2px; }
	.auth__main { align-content: center; min-height: calc(100svh - var(--header-height)); padding: var(--space-7) var(--page-gutter); }
	.auth-sent__art { display: none; }
}
@media (min-width: 1024px) { .auth__visual { --k: .78; } }
@media (min-width: 1280px) {
	.scene { height: calc(400px * var(--k) + 48px); }
	.scene__tag { display: inline-block; }
}
@media (min-width: 1280px) and (min-height: 820px) { .auth__visual { --k: 1; } }
@media (min-width: 1600px) and (min-height: 950px) { .auth__visual { --k: 1.15; } }