/* Package A — auth & onboarding (login, register wizard, OTP, password
 * reset, PDPA page + consent banner, /appeal). Every class is sf-auth-*.
 * Builds on pages.css (.sf-auth grid, .sf-auth-art, .sf-form, .sf-field). */

/* ---------- Card + headings ---------- */
.sf-auth-card { padding: 34px; }
.sf-auth-card .sf-auth-title, .sf-auth-title { font: 800 26px/1.3 var(--v2-display); margin: 6px 0 18px; text-transform: uppercase; letter-spacing: .3px; }
.sf-auth-lead { color: var(--v2-muted); font-size: 13px; line-height: 1.7; margin: -6px 0 18px; overflow-wrap: anywhere; }
.sf-auth-lead b { color: var(--v2-text); }
.sf-auth-link { color: var(--v2-accent); font-size: inherit; }
.sf-auth-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.sf-auth-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.sf-auth-row .sf-auth-link { font-size: 12px; }
.sf-auth-after { margin-top: 16px; }
.sf-auth-foot { margin-top: 20px; font-size: 12px; color: var(--v2-muted); text-align: center; line-height: 1.7; }
.sf-auth-wide { width: 100%; justify-content: center; }
.sf-auth-linkbtn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 0; background: none; border: 0; font-size: 12px; color: var(--v2-accent); cursor: pointer; }
.sf-auth-linkbtn .icon { width: 15px; height: 15px; }
.sf-auth-linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }
.sf-auth-linkbtn:disabled { color: var(--v2-muted); cursor: default; text-decoration: none; }

/* ---------- Login / register tab pair ---------- */
.sf-auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #ffffff1f; margin: 4px 0 22px; }
.sf-auth-tabs a { padding: 12px 10px; text-align: center; font-size: 13px; color: var(--v2-muted); transition: color .15s, background .15s; }
.sf-auth-tabs a:hover { color: var(--v2-text); }
.sf-auth-tabs a.is-on { color: var(--v2-accent); background: #00f0ff12; box-shadow: inset 0 -2px 0 var(--v2-accent); }

/* ---------- Step rail ---------- */
.sf-auth-steps { display: flex; align-items: center; gap: 8px; list-style: none; margin: 10px 0 22px; padding: 0; }
.sf-auth-step { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--v2-muted); white-space: nowrap; }
.sf-auth-step i { flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid #ffffff33; font: 700 11px var(--v2-mono); font-style: normal; }
.sf-auth-step i .icon { width: 13px; height: 13px; }
.sf-auth-step.is-on { color: var(--v2-text); }
.sf-auth-step.is-on i { background: var(--v2-accent); border-color: var(--v2-accent); color: var(--v2-bg); box-shadow: 0 0 14px #00f0ff55; }
.sf-auth-step.is-done i { border-color: var(--v2-accent); color: var(--v2-accent); }
.sf-auth-steps-bar { flex: 1 1 12px; min-width: 12px; height: 1px; background: #ffffff24; }
.sf-auth-steps-bar.is-done { background: var(--v2-accent); }

/* ---------- Inline notices ---------- */
.sf-auth-notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 18px; border: 1px solid #00f0ff55; background: #00f0ff0d; color: #c9fbff; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.sf-auth-notice .icon { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; }
.sf-auth-notice.is-warn { border-color: #ffcf0066; background: #ffcf000d; color: #ffe27a; }
.sf-auth-notice.is-bad { border-color: #ff006e66; background: #ff006e12; color: #ff9cc4; }

/* ---------- Password: reveal + strength meter ---------- */
.sf-auth-pw { position: relative; }
.sf-auth-pw .sf-input { padding-right: 50px; }
.sf-auth-reveal { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 46px; display: grid; place-items: center; color: var(--v2-muted); background: none; border: 0; cursor: pointer; }
.sf-auth-reveal:hover, .sf-auth-reveal[aria-pressed="true"] { color: var(--v2-accent); }
.sf-auth-reveal svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.sf-auth-reveal[aria-pressed="true"] svg { stroke-dasharray: none; opacity: .9; }
.sf-auth-meter { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.sf-auth-meter[hidden] { display: none; }
.sf-auth-meter span { flex: 1; height: 3px; background: #ffffff1a; transition: background .2s; }
.sf-auth-meter b { flex: 0 0 64px; text-align: right; font: 700 11px var(--v2-mono); }

/* ---------- OTP ---------- */
.sf-auth-otp .sf-input { font: 700 26px/1 var(--v2-mono); letter-spacing: 12px; text-align: center; padding-left: 24px; }
.sf-auth-otp .sf-input::placeholder { letter-spacing: 6px; }
.sf-auth-otp-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; font-size: 12px; color: var(--v2-muted); margin-top: -4px; }

/* ---------- Social sign-in ---------- */
.sf-auth-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 14px; font: 400 10px var(--v2-mono); letter-spacing: 2px; text-transform: uppercase; color: var(--v2-muted); }
.sf-auth-divider::before, .sf-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--v2-line); }
.sf-auth-social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sf-auth-social-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 12px; border: 1px solid #ffffff24; background: #ffffff06; color: var(--v2-text); font-size: 13px; font-weight: 600; transition: border-color .15s, background .15s; }
.sf-auth-social-btn svg { flex: 0 0 18px; width: 18px; height: 18px; }
a.sf-auth-social-btn:hover { border-color: var(--v2-accent); background: #00f0ff0d; }
.sf-auth-social-btn.is-off { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }
.sf-auth-social-short { display: none; }
.sf-auth-social-note { margin-top: 10px; font-size: 11px; line-height: 1.6; color: var(--v2-muted); text-align: center; }
.sf-auth-tos { align-items: flex-start; line-height: 1.7; }
.sf-auth-tos input { margin-top: 3px; flex: 0 0 16px; }

/* ---------- Forgot password: sent state ---------- */
.sf-auth-sent { text-align: center; padding: 6px 0 18px; }
.sf-auth-sent-mark { width: 56px; height: 56px; margin: 0 auto 12px; display: grid; place-items: center; border: 1px solid var(--v2-accent); color: var(--v2-accent); box-shadow: 0 0 22px #00f0ff33; }
.sf-auth-sent-mark .icon { width: 26px; height: 26px; }
.sf-auth-sent h3 { font: 800 18px var(--v2-display); text-transform: uppercase; }
.sf-auth-sent p { font-size: 13px; color: var(--v2-muted); margin: 8px 0 12px; line-height: 1.7; }
.sf-auth-addr { display: inline-block; max-width: 100%; padding: 8px 14px; border: 1px dashed #00f0ff66; font: 700 13px var(--v2-mono); color: var(--v2-accent); overflow-wrap: anywhere; }
.sf-auth-resend { justify-content: center; margin: 16px 0 6px; font-size: 12px; color: var(--v2-muted); }
.sf-auth-tips { list-style: none; display: grid; gap: 8px; margin: 14px 0 0; padding: 14px 16px; background: #ffffff05; border: 1px solid var(--v2-line); font-size: 12px; color: var(--v2-muted); line-height: 1.6; }
.sf-auth-tips li { position: relative; padding-left: 16px; }
.sf-auth-tips li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--v2-accent); }
.sf-auth-aside { display: grid; gap: 6px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--v2-line); font-size: 12px; color: var(--v2-muted); }

/* ---------- PDPA page + consent banner ---------- */
.sf-auth-pdpa-page { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 34px; align-items: start; }
.sf-auth-pdpa-prefs { position: sticky; top: 150px; }
.sf-auth-pdpa-prefs .sf-note { margin: -8px 0 14px; }
.sf-auth-pdpa-prefs .sf-actions { margin-top: 16px; }
.sf-auth-pdpa-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sf-auth-pdpa-cats.is-stack { grid-template-columns: 1fr; }
.sf-auth-pdpa-cats[hidden] { display: none; }
.sf-auth-cat { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border: 1px solid var(--v2-line); background: #ffffff05; cursor: pointer; }
.sf-auth-cat input { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--v2-accent); }
.sf-auth-cat input:disabled { accent-color: #8a8a99; }
.sf-auth-cat span { display: grid; gap: 3px; min-width: 0; }
.sf-auth-cat b { font-size: 13px; font-weight: 700; }
.sf-auth-cat em { font: 700 9px/1 var(--v2-mono); font-style: normal; letter-spacing: 1px; padding: 3px 6px; margin-left: 6px; color: #ffcf00; border: 1px solid #ffcf0055; vertical-align: middle; }
.sf-auth-cat small { font-size: 12px; color: var(--v2-muted); line-height: 1.55; }
.sf-auth-pdpa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 0 16px 16px; pointer-events: none; }
.sf-auth-pdpa[hidden] { display: none; }
.sf-auth-pdpa-card { pointer-events: auto; max-width: 1040px; max-height: calc(100vh - 32px); overflow: auto; margin: 0 auto; padding: 16px 18px; background: var(--v2-surface); border: 1px solid #00f0ff55; box-shadow: 0 24px 60px #000d, inset 0 0 40px #00f0ff08; }
.sf-auth-pdpa-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.sf-auth-pdpa-text { flex: 1 1 380px; min-width: 0; font-size: 12.5px; line-height: 1.6; color: var(--v2-muted); }
.sf-auth-pdpa-text b { display: block; margin-bottom: 3px; font-size: 14px; color: var(--v2-text); }
.sf-auth-pdpa-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.sf-auth-pdpa .sf-auth-pdpa-cats { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--v2-line); }
.sf-auth-pdpa-foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; }

/* ---------- /appeal ---------- */
.sf-auth-appeal { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.sf-auth-appeal aside .sf-panel + .sf-panel { margin-top: 18px; }
.sf-auth-drop { display: block; position: relative; border: 1px dashed #00f0ff55; background: #00f0ff08; cursor: pointer; }
.sf-auth-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.sf-auth-drop span { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; padding: 20px 14px; font-size: 13px; color: var(--v2-accent); }
.sf-auth-drop small { width: 100%; text-align: center; font: 400 10px var(--v2-mono); letter-spacing: 1px; color: var(--v2-muted); }
.sf-auth-drop:hover { border-color: var(--v2-accent); }
.sf-auth-files { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.sf-auth-file { position: relative; width: 96px; display: grid; gap: 4px; }
.sf-auth-file img, .sf-auth-file > span { width: 96px; height: 96px; object-fit: cover; display: grid; place-items: center; background: var(--v2-surface-2); border: 1px solid var(--v2-line); color: var(--v2-accent); }
.sf-auth-file small { font-size: 10px; color: var(--v2-muted); overflow-wrap: anywhere; }
.sf-auth-file button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; display: grid; place-items: center; background: #0a0014e6; border: 1px solid #ff006e88; color: #ff5c9d; cursor: pointer; }
.sf-auth-file button .icon { width: 13px; height: 13px; }
.sf-auth-hist { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--v2-line); justify-items: start; }
.sf-auth-hist:last-child { border-bottom: 0; }
.sf-auth-hist small { font-size: 11px; color: var(--v2-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .sf-auth-pdpa-page, .sf-auth-appeal { grid-template-columns: 1fr; }
  .sf-auth-pdpa-prefs { position: static; }
}
@media (max-width: 680px) {
  .sf-auth { padding: 26px 0 60px; min-height: 0; }
  .sf-auth-card { padding: 22px 18px; }
  .sf-auth-card .sf-auth-title { font-size: 21px; }
  .sf-auth-step:not(.is-on) span { display: none; }
  .sf-auth-social-full { display: none; }
  .sf-auth-social-short { display: inline; }
  .sf-auth-otp .sf-input { font-size: 22px; letter-spacing: 8px; }
  .sf-auth-pdpa { padding: 0 10px 10px; }
  .sf-auth-pdpa-card { padding: 14px; }
  .sf-auth-pdpa-text { flex-basis: 100%; }
  .sf-auth-pdpa-btns { margin-left: 0; width: 100%; }
  .sf-auth-pdpa-btns .button { flex: 1 1 auto; justify-content: center; gap: 8px; padding-inline: 12px; }
  .sf-auth-pdpa .sf-auth-pdpa-cats { grid-template-columns: 1fr; }
}

/* ═══ Art column (2026-09-27): copy + card stage, entrance, idle motion, hover ═══ */
.sf-auth { gap: clamp(30px, 4vw, 70px); }
.sf-auth-art { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(250px, .92fr); gap: 10px 18px; align-items: center; min-height: 560px; }
.sf-auth-copy { position: relative; z-index: 2; }

/* entrance: every .sf-auth-in rises in turn (--d = step) */
.sf-auth-in { opacity: 0; translate: 0 22px; animation: sf-auth-rise .75s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--d, 0) * 110ms + 120ms); }
@keyframes sf-auth-rise { to { opacity: 1; translate: 0 0; } }

.sf-auth-art h1 { position: relative; font: 900 clamp(40px, 4.7vw, 78px)/.95 var(--v2-display); text-transform: uppercase; letter-spacing: -2px; margin-top: 12px; }
.sf-auth-art h1 span { display: block; width: max-content; max-width: 100%; background: linear-gradient(100deg, var(--v2-accent) 0%, #b8feff 22%, var(--v2-pink) 48%, #b8feff 74%, var(--v2-accent) 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sf-auth-sheen 7s linear infinite; filter: drop-shadow(0 0 22px #00f0ff38); }
@keyframes sf-auth-sheen { to { background-position: -260% 0; } }
/* hover: a short RGB-split glitch on the heading */
.sf-auth-art h1:hover { animation: sf-auth-glitch .45s steps(2) 2; }
@keyframes sf-auth-glitch {
  0% { text-shadow: 3px 0 #ff006e, -3px 0 #00f0ff; transform: translate(0); }
  25% { text-shadow: -4px 1px #ff006e, 4px -1px #00f0ff; transform: translate(-2px, 1px) skewX(-4deg); }
  50% { text-shadow: 2px -1px #ff006e, -2px 1px #00f0ff; transform: translate(2px, -1px); }
  75% { text-shadow: -1px 0 #ff006e, 1px 0 #00f0ff; transform: translate(-1px, 0) skewX(3deg); }
  100% { text-shadow: none; transform: none; }
}
.sf-auth-art p { color: var(--v2-muted); margin-top: 20px; max-width: 440px; font-size: 14px; line-height: 1.8; }

/* feature chips */
.sf-auth-perks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 460px; }
.sf-auth-perks li { position: relative; display: flex; gap: 10px; align-items: center; padding: 10px 12px; font-size: 12.5px; line-height: 1.35; color: #ddd5ea; background: #ffffff05; border: 1px solid #ffffff17; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); transition: border-color .25s, background .25s, color .25s, box-shadow .25s; overflow: hidden; }
.sf-auth-perks li::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, #00f0ff22 50%, transparent 70%); translate: -120% 0; transition: translate .6s ease; pointer-events: none; }
.sf-auth-perk-ic { flex: 0 0 30px; height: 30px; display: grid; place-items: center; color: var(--v2-accent); border: 1px solid #00f0ff55; background: #00f0ff0d; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), background .25s, color .25s; }
.sf-auth-perk-ic .icon { width: 15px; height: 15px; }
.sf-auth-perks li:hover { color: #fff; border-color: #00f0ff77; background: #00f0ff0b; box-shadow: 0 8px 24px #00f0ff14; }
.sf-auth-perks li:hover::after { translate: 120% 0; }
.sf-auth-perks li:hover .sf-auth-perk-ic { transform: rotate(-12deg) scale(1.15); background: var(--v2-accent); color: var(--v2-bg); }

/* ── card stage ── */
.sf-auth-stage { position: relative; width: 100%; max-width: 420px; justify-self: center; aspect-ratio: 1 / 1.1; perspective: 1100px; }
.sf-auth-glow { position: absolute; inset: 14% 10%; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #00f0ff30, transparent 55%), radial-gradient(circle at 60% 65%, #ff006e26, transparent 60%); filter: blur(10px); animation: sf-auth-pulse 5s ease-in-out infinite; }
@keyframes sf-auth-pulse { 50% { opacity: .55; transform: scale(1.08); } }
.sf-auth-ring { position: absolute; border-radius: 50%; pointer-events: none; }
.sf-auth-ring.is-a { inset: 6%; border: 1px dashed #00f0ff45; animation: sf-auth-spin 46s linear infinite; }
.sf-auth-ring.is-b { inset: 17%; border: 1px solid transparent; border-top-color: #ff006e99; border-left-color: #ff006e33; animation: sf-auth-spin 14s linear infinite reverse; }
.sf-auth-ring.is-c { inset: 27%; border: 2px dotted #ffffff1f; animation: sf-auth-spin 70s linear infinite; }
@keyframes sf-auth-spin { to { transform: rotate(360deg); } }
.sf-auth-hud i { position: absolute; width: 22px; height: 22px; border: 2px solid var(--v2-accent); opacity: .8; animation: sf-auth-hud 3.2s ease-in-out infinite; }
.sf-auth-hud i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.sf-auth-hud i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.sf-auth-hud i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.sf-auth-hud i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
@keyframes sf-auth-hud { 50% { opacity: .35; } }
.sf-auth-floor { position: absolute; left: 18%; right: 18%; bottom: 9%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, #00f0ff55, transparent); filter: blur(6px); animation: sf-auth-pulse 4s ease-in-out infinite; }
/* the globe behind the fan (2026-09-29, owner: "ด้านหลังการ์ดทำเป็นลูกโลกหมุนๆดีกว่า") — the home
   hero's planet, drawn by pkg-hero-globe.js; it takes the place of the three spinning rings
   and the glow. The sphere (.72 of the canvas) is about as wide as the stage, so its rim
   shows round the fan; the rest of the canvas square is room for its two orbit rings,
   faded out at the edge. Centre layout (register): behind the form, see further down. */
.sf-auth-globe { position: absolute; left: 50%; top: 46%; z-index: 0; width: 136%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; -webkit-mask-image: radial-gradient(closest-side, #000 88%, transparent); mask-image: radial-gradient(closest-side, #000 88%, transparent); }
.sf-auth-globe.is-on { opacity: 1; }
.sf-auth-globe.is-handoff { transition-duration: .3s; } /* it glided here from the page before */
.sf-auth-globe canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sf-auth-stage:has(.sf-auth-globe) :is(.sf-auth-ring, .sf-auth-glow) { display: none; }

/* the fan: --rx/--ry come from the pointer (pkg-auth.js) */
.sf-auth-fan { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .8s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
.sf-auth-stage.is-tracking .sf-auth-fan { transition-duration: .18s; transition-timing-function: ease-out; }
.sf-auth-fcard { --tx: 0%; --ty: 0%; --r: 0deg; --s: 1; --z: 0px; position: absolute; grid-area: 1 / 1; width: 44%; margin: 0; transform: translateZ(var(--z)) translate(var(--tx), var(--ty)) rotate(var(--r)) scale(var(--s)); transition: transform .55s cubic-bezier(.22, 1, .36, 1), filter .4s ease; will-change: transform; opacity: 0; translate: 0 90px; animation: sf-auth-deal .9s cubic-bezier(.2, .9, .25, 1.15) forwards; animation-delay: calc(var(--i) * 140ms + 350ms); cursor: pointer; }
@keyframes sf-auth-deal { to { opacity: 1; translate: 0 0; } }
.sf-auth-fcard.is-left { --tx: -52%; --ty: 6%; --r: -13deg; z-index: 1; }
.sf-auth-fcard.is-right { --tx: 52%; --ty: 6%; --r: 13deg; z-index: 1; }
.sf-auth-fcard.is-front { --ty: -3%; --s: 1.07; --z: 24px; z-index: 3; }
.sf-auth-float { position: relative; display: block; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 44px #000c, 0 0 0 1px #ffffff22; animation: sf-auth-bob 5.5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.8s); transition: box-shadow .35s; }
@keyframes sf-auth-bob { 50% { translate: 0 -10px; } }
.sf-auth-float img { display: block; width: 100%; height: auto; }
.sf-auth-foil { position: absolute; inset: 0; opacity: 0; mix-blend-mode: color-dodge; background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), #ffffff66, transparent 42%), linear-gradient(125deg, #00f0ff40, #ff006e38, #ffcf0030, #00f0ff40); transition: opacity .3s; pointer-events: none; }
.sf-auth-shine { position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 38%, #ffffff66 50%, transparent 62%); translate: -110% 0; animation: sf-auth-glint 7s ease-in-out infinite; animation-delay: calc(var(--i) * 1.3s + 2s); pointer-events: none; }
@keyframes sf-auth-glint { 0%, 70% { translate: -110% 0; } 88%, 100% { translate: 110% 0; } }

/* pointer over the stage: the fan opens and the card nearest the pointer
   (left third / middle / right third — pkg-auth.js sets data-active) comes
   FORWARD in 3D. Zones, not :hover, so the card never slides out from under
   the pointer and flickers; translateZ, not z-index, so it really is in front. */
.sf-auth-stage[data-active] .sf-auth-fcard.is-left { --tx: -68%; --ty: 8%; --r: -19deg; }
.sf-auth-stage[data-active] .sf-auth-fcard.is-right { --tx: 68%; --ty: 8%; --r: 19deg; }
.sf-auth-stage[data-active] .sf-auth-fcard.is-front { --ty: -6%; --s: 1.08; }
.sf-auth-stage[data-active] .sf-auth-fcard { filter: brightness(.7) saturate(.85); }
.sf-auth-stage[data-active="left"] .sf-auth-fcard.is-left,
.sf-auth-stage[data-active="right"] .sf-auth-fcard.is-right,
.sf-auth-stage[data-active="front"] .sf-auth-fcard.is-front { --z: 90px; --s: 1.14; --r: 0deg; filter: none; }
.sf-auth-stage[data-active="left"] .sf-auth-fcard.is-left { --tx: -58%; --ty: -2%; }
.sf-auth-stage[data-active="right"] .sf-auth-fcard.is-right { --tx: 58%; --ty: -2%; }
.sf-auth-stage[data-active="front"] .sf-auth-fcard.is-front { --ty: -9%; --s: 1.16; }
.sf-auth-stage[data-active="left"] .sf-auth-fcard.is-left .sf-auth-float,
.sf-auth-stage[data-active="right"] .sf-auth-fcard.is-right .sf-auth-float,
.sf-auth-stage[data-active="front"] .sf-auth-fcard.is-front .sf-auth-float { box-shadow: 0 30px 60px #000d, 0 0 0 1px #00f0ffaa, 0 0 36px #00f0ff66; }
.sf-auth-stage[data-active="left"] .sf-auth-fcard.is-left .sf-auth-foil,
.sf-auth-stage[data-active="right"] .sf-auth-fcard.is-right .sf-auth-foil,
.sf-auth-stage[data-active="front"] .sf-auth-fcard.is-front .sf-auth-foil { opacity: .8; }
.sf-auth-fcard.is-lit .sf-auth-shine { animation: sf-auth-glint-now .8s ease-out; }
.sf-auth-stage { cursor: pointer; }
@keyframes sf-auth-glint-now { from { translate: -110% 0; } to { translate: 110% 0; } }

/* sparks drifting up through the stage */
.sf-auth-spark { position: absolute; left: var(--x); bottom: 6%; width: 4px; height: 4px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c), 0 0 2px #fff; opacity: 0; animation: sf-auth-drift var(--t) linear infinite; animation-delay: var(--dl); pointer-events: none; }
@keyframes sf-auth-drift { 0% { opacity: 0; translate: 0 0; } 12% { opacity: .9; } 80% { opacity: .6; } 100% { opacity: 0; translate: 18px -330px; } }

/* form panel: a light sweeping along its top edge */
.sf-auth-card { position: relative; overflow: hidden; animation: sf-auth-card-in .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: .15s; }
@keyframes sf-auth-card-in { from { opacity: 0; translate: 24px 0; } to { opacity: 1; translate: 0 0; } }
.sf-auth-card::before { content: ''; position: absolute; top: 0; left: 0; width: 40%; height: 2px; background: linear-gradient(90deg, transparent, var(--v2-accent), transparent); box-shadow: 0 0 12px var(--v2-accent); animation: sf-auth-edge 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes sf-auth-edge { 0% { translate: -100% 0; } 60%, 100% { translate: 260% 0; } }

@media (max-width: 1320px) {
  .sf-auth-art { grid-template-columns: 1fr; min-height: 0; gap: 26px; }
  .sf-auth-stage { max-width: 330px; justify-self: start; margin-left: 4%; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-auth-in, .sf-auth-fcard, .sf-auth-card { opacity: 1; translate: none; animation: none; }
  .sf-auth-art h1 span, .sf-auth-glow, .sf-auth-ring, .sf-auth-hud i, .sf-auth-floor, .sf-auth-float, .sf-auth-shine, .sf-auth-card::before { animation: none; }
  .sf-auth-spark { display: none; }
  .sf-auth-fan, .sf-auth-fcard { transition: none; }
}
.effects-off .sf-auth-in, .effects-off .sf-auth-fcard, .effects-off .sf-auth-card { opacity: 1; translate: none; animation: none; }
.effects-off .sf-auth-art h1 span, .effects-off .sf-auth-ring, .effects-off .sf-auth-float, .effects-off .sf-auth-shine, .effects-off .sf-auth-glow, .effects-off .sf-auth-hud i, .effects-off .sf-auth-floor, .effects-off .sf-auth-card::before { animation: none; }
.effects-off .sf-auth-spark { display: none; }

/* ═══ Centre layout (register) + the login ⇄ register slide ═══ */
.sf-auth.is-center { position: relative; grid-template-columns: minmax(0, 480px); justify-content: center; overflow-x: clip; }
.sf-auth.is-center .sf-auth-card { position: relative; z-index: 2; }
.sf-auth.is-center .sf-auth-art { position: absolute; inset: 0; display: block; min-height: 0; pointer-events: none; }
.sf-auth.is-center .sf-auth-copy { display: none; }
.sf-auth.is-center .sf-auth-stage { position: absolute; left: 50%; top: 50%; width: min(820px, 100%); max-width: none; aspect-ratio: 1; translate: -50% -50%; }
.sf-auth.is-center .sf-auth-hud i { width: 34px; height: 34px; }
.sf-auth.is-center .sf-auth-fcard { width: 210px; animation-name: sf-auth-peek; animation-duration: 1s; animation-delay: calc(var(--i) * 120ms + 250ms); }
.sf-auth.is-center .sf-auth-fcard.is-left { --tx: -168%; --ty: 2%; --r: -11deg; --from: 170%; }
.sf-auth.is-center .sf-auth-fcard.is-right { --tx: 168%; --ty: 2%; --r: 11deg; --from: -170%; }
.sf-auth.is-center .sf-auth-fcard.is-front { display: none; }
.sf-auth.is-center .sf-auth-floor { display: none; }
/* the globe behind the form (owner: "ด้านหลังอยากให้เป็นลูกโลก"): its rim shows either side of
   the form, under the two peeking cards. pkg-auth.js GLOBE_CENTER = this width. */
.sf-auth.is-center .sf-auth-globe { top: 50%; width: 118%; }
@keyframes sf-auth-peek { from { opacity: 0; translate: var(--from) 0; } to { opacity: 1; translate: 0 0; } }

/* the slide: pkg-auth.js sets --sf-dx on the card, adds .is-swapping, then navigates.
   The art fades out piece by piece, except a globe that glides to where the next page's
   globe sits (.is-flying; pkg-auth.js sets its transform) — that one takes over there.
   visibility: the floor / sparks animate their own opacity. */
.sf-auth .sf-auth-card { transition: transform .55s cubic-bezier(.65, 0, .35, 1), box-shadow .55s; }
.sf-auth.is-swapping .sf-auth-card { transform: translateX(var(--sf-dx, 0)); box-shadow: 0 0 60px #00f0ff33; }
.sf-auth.is-swapping :is(.sf-auth-copy, .sf-auth-stage > :not(.is-flying)) { transition: opacity .35s ease, visibility 0s linear .35s, translate .45s ease; opacity: 0; visibility: hidden; }
.sf-auth.is-swapping:not(.is-center) .sf-auth-copy { translate: -40px 0; }
.sf-auth-globe.is-flying { transition: transform .56s cubic-bezier(.65, 0, .35, 1), opacity .3s ease; }
/* arriving from the other layout: the card is already in place — no entrance */
.sf-auth.is-arrived .sf-auth-card { animation: none; }

@media (max-width: 1080px) {
  .sf-auth.is-center { grid-template-columns: 1fr; }
  .sf-auth.is-center .sf-auth-art { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-auth.is-center .sf-auth-fcard { animation: none; opacity: 1; translate: none; }
  .sf-auth .sf-auth-card, .sf-auth.is-swapping :is(.sf-auth-copy, .sf-auth-stage > *) { transition: none; }
}
.effects-off .sf-auth.is-center .sf-auth-fcard { animation: none; opacity: 1; translate: none; }

/* notched chip keeps its diagonal edge (see pages.css "Notched corners") */
.sf-auth-perks li { --sf-edge: #ffffff17; background-image: linear-gradient(to top right, transparent calc(50% - .9px), var(--sf-edge) calc(50% - .9px), var(--sf-edge) calc(50% + .9px), transparent calc(50% + .9px)); background-size: 10px 10px; background-position: right top; background-repeat: no-repeat; background-origin: border-box; }
.sf-auth-perks li:hover { --sf-edge: #00f0ff77; }
.sf-auth.is-center .sf-auth-hud { display: none; }

/* ═══ Heading charge — Persona 5 style (pkg-fx-charge.js): hover longer → more lightning ═══
   The login's own levels: a halftone flash, the red "slab" behind the heading,
   the meter and the fan answering the strikes. Level lives in
   .sf-auth-art[data-charge]. The bolts, bursts, shards and focus lines are
   shared with /tournaments — pkg-fx-charge.css. */
.sf-auth-page main { overflow-x: clip; } /* the slash / bolts never cause a sideways scrollbar */
.sf-auth-headline { position: relative; }
.sf-auth-art h1 { cursor: crosshair; isolation: isolate; transform-origin: 20% 60%; transition: text-shadow .2s steps(2), transform .25s cubic-bezier(.3, 1.6, .5, 1), color .15s; }
.sf-auth-art h1:hover { animation: none; }

/* red + black slabs behind the heading (wipe in at level 3 / 4) */
.sf-auth-art h1::before, .sf-auth-art h1::after { content: ''; position: absolute; z-index: -1; pointer-events: none; transform-origin: left center; transition: transform .22s cubic-bezier(.3, 1.4, .5, 1); }
.sf-auth-art h1::before { left: -18px; right: -30px; top: 6%; bottom: 2%; background: var(--p5-red); border: 4px solid var(--p5-ink); box-shadow: 10px 10px 0 var(--p5-ink); transform: skewX(-14deg) rotate(-2.5deg) scaleX(0); clip-path: polygon(0 8%, 97% 0, 100% 88%, 3% 100%); }
.sf-auth-art h1::after { left: 8%; right: -8px; top: 52%; bottom: -10%; background: var(--p5-ink); transform: skewX(18deg) rotate(3deg) scaleX(0); transform-origin: right center; }

/* level 1: hard offset shadow + tilt */
.sf-auth-art[data-charge="1"] h1 { transform: rotate(-2deg) skewX(-4deg); text-shadow: 3px 3px 0 var(--p5-ink), 6px 6px 0 var(--p5-red); }
/* level 2: bigger offsets, stepped jitter */
.sf-auth-art[data-charge="2"] h1 { transform: rotate(-3deg) skewX(-6deg); text-shadow: 4px 4px 0 var(--p5-ink), 8px 8px 0 var(--p5-red), -2px -2px 0 #fff3; animation: sf-p5-jitter .14s steps(2) infinite; }
/* level 3: the red slab lands, letters go white */
.sf-auth-art[data-charge="3"] h1, .sf-auth-art[data-charge="4"] h1 { color: #fff; text-shadow: 4px 4px 0 var(--p5-ink), 7px 7px 0 var(--p5-ink); }
.sf-auth-art[data-charge="3"] h1 { transform: rotate(-4deg) skewX(-8deg); animation: sf-p5-shake .1s steps(2) infinite; }
.sf-auth-art[data-charge="3"] h1::before, .sf-auth-art[data-charge="4"] h1::before { transform: skewX(-14deg) rotate(-2.5deg) scaleX(1); }
.sf-auth-art[data-charge="3"] h1 span, .sf-auth-art[data-charge="4"] h1 span { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; filter: none; }
/* level 4: black slab too, heavier shake */
.sf-auth-art[data-charge="4"] h1 { transform: rotate(-5deg) skewX(-10deg) scale(1.04); animation: sf-p5-shake .06s steps(2) infinite; }
.sf-auth-art[data-charge="4"] h1::after { transform: skewX(18deg) rotate(3deg) scaleX(1); }

/* halftone strike flash across the art column */
.sf-auth-art::before { content: ''; position: absolute; inset: -50px -20px; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, var(--p5-red) 32%, transparent 34%) 0 0 / 13px 13px;
  -webkit-mask-image: radial-gradient(ellipse at 25% 32%, #000 0%, #000a 30%, transparent 62%); mask-image: radial-gradient(ellipse at 25% 32%, #000 0%, #000a 30%, transparent 62%); }
.sf-auth-art.is-strike::before { animation: sf-p5-flash .22s steps(2) forwards; }
/* the stage answers the strikes */
.sf-auth-art[data-charge="4"] .sf-auth-float { box-shadow: 0 24px 44px #000c, 0 0 0 3px var(--p5-ink), 6px 6px 0 3px var(--p5-red); }
.sf-auth-art.is-strike .sf-auth-hud i { border-color: var(--p5-red); opacity: 1; }
/* leaving: a red/black slash sweeps across the art */
.sf-auth-art::after { content: ''; position: absolute; left: -10%; top: 18%; width: 60%; height: 34%; z-index: 6; pointer-events: none; background: linear-gradient(180deg, var(--p5-ink) 0 14%, var(--p5-red) 14% 86%, var(--p5-ink) 86%); transform: skewY(-9deg) translateX(-140%); opacity: 0; }
.sf-auth-art.is-discharge::after { animation: sf-p5-slash .5s cubic-bezier(.7, 0, .3, 1) forwards; }

/* charge meter: red parallelograms, black ink */
.sf-auth-meter { display: inline-flex; gap: 4px; margin-left: 12px; vertical-align: middle; opacity: 0; transition: opacity .15s; }
.sf-auth-meter i { width: 16px; height: 8px; border: 2px solid var(--p5-ink); background: #ffffff22; transform: skewX(-24deg); box-shadow: 2px 2px 0 var(--p5-ink); }
.sf-auth-art[data-charge] .sf-auth-meter { opacity: 1; }
.sf-auth-art[data-charge="1"] .sf-auth-meter i:nth-child(-n+1),
.sf-auth-art[data-charge="2"] .sf-auth-meter i:nth-child(-n+2),
.sf-auth-art[data-charge="3"] .sf-auth-meter i:nth-child(-n+3),
.sf-auth-art[data-charge="4"] .sf-auth-meter i { background: var(--p5-red); }
.sf-auth-art[data-charge="4"] .sf-auth-meter i { animation: sf-p5-meter .16s steps(2) infinite; }
@keyframes sf-p5-meter { 50% { background: #fff; } }

@media (prefers-reduced-motion: reduce) { .sf-auth-meter, .sf-auth-art::after { display: none; } }
.effects-off .sf-auth-meter, .effects-off .sf-auth-art::after { display: none; }

/* impact: the heading recoils, the card fan quakes */
.sf-auth-art h1 { transition: text-shadow .2s steps(2), transform .25s cubic-bezier(.3, 1.6, .5, 1), color .15s, scale .06s; }
.sf-auth-art h1.is-hit { scale: 1.06; }
.sf-auth-fan.is-quake { animation: sf-p5-quake .22s steps(4); }