/* ============================================================
   The Classic Method — login.css
   Страница входа (кинофлоу). Самодостаточный takeover.
   ВЕСЬ скоуп под .page-login; html/body — через .tcm-login.
   Локальные токены на .page-login (НЕ в глобальный :root).
   ============================================================ */

html.tcm-login, body.tcm-login { height: 100%; overflow: hidden; margin: 0; }
body.tcm-login {
	background: #FBFBF9; color: #181818;
	font-family: 'Manrope', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}
body.tcm-login.lang-ja { font-family: 'Noto Sans JP', sans-serif; }

.page-login {
	--bone:#FBFBF9;--cream:#F0EBE0;--paper:#F4F1EA;--ink:#181818;--ink2:#544245;
	--burgundy:#732239;--burgundy-d:#560A24;--gold:#C9A24E;--gold-d:#a07d34;
	--deep:#7A1535;--line2:#dac0c4;--ui:#8b7a7d;
	--disp:'Bodoni Moda',Didot,Georgia,serif;--sans:'Manrope',system-ui,sans-serif;
	--ease:cubic-bezier(.22,1,.36,1);
}
.page-login * { margin: 0; padding: 0; box-sizing: border-box; }
.page-login a { color: inherit; text-decoration: none; }

/* ===== TRAVELLING LOGO ===== */
.page-login #bg { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; }
.page-login .lock { display: flex; flex-direction: column; align-items: center; transform: scale(.12); opacity: 0; will-change: transform, opacity, filter; filter: blur(18px); }
.page-login .lock .barre svg { height: 15vh; width: auto; display: block; stroke: var(--burgundy); }
.page-login .lock .tcm { font-family: var(--disp); font-optical-sizing: none; font-weight: 600; font-size: 30vh; line-height: .86; letter-spacing: .05em; text-indent: .05em; color: var(--burgundy); margin-top: .6vh; }
.page-login .lock .slogan { font-weight: 600; font-size: 1.5vh; letter-spacing: .5em; text-transform: uppercase; color: var(--burgundy); opacity: .8; margin-top: 2.4vh; }

.page-login #veil { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(120% 120% at 50% 45%, rgba(244,241,234,0) 44%, rgba(223,215,201,.66) 100%); }

/* ===== TOP BAR ===== */
.page-login #topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 22px 34px; pointer-events: none; }
.page-login #topbar .lang { display: inline-flex; border: 1px solid var(--line2); pointer-events: auto; background: rgba(251,251,249,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.page-login #topbar .lang button { font-family: var(--sans); font-size: 11px; font-weight: 600; padding: 7px 11px; background: transparent; color: var(--ui); border: 0; cursor: pointer; transition: all .2s; }
.page-login #topbar .lang button.on { background: var(--burgundy); color: #fff; }
.page-login #topbar .tosite { font-size: 12px; letter-spacing: .05em; color: var(--ink2); pointer-events: auto; }
.page-login #topbar .tosite:hover { color: var(--burgundy); }

/* ===== LOGIN (frosted glass over logo) ===== */
.page-login #login { position: fixed; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; padding: 5vh 5vw; pointer-events: none; }
.page-login .card { position: relative; width: 100%; max-width: 412px; opacity: 0; will-change: transform, opacity;
	background: rgba(251,251,249,.55); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1);
	border: 1px solid rgba(201,162,78,.55); box-shadow: 0 50px 110px -42px rgba(86,10,36,.45); padding: 46px 44px 38px; }
.page-login .card::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(201,162,78,.30); pointer-events: none; }
.page-login .card .e { font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-d); font-weight: 700; margin-bottom: 13px; }
.page-login .card h2 { font-family: var(--disp); font-optical-sizing: none; font-weight: 500; font-size: 34px; line-height: 1.02; color: var(--ink); }
body.lang-ja .page-login .card h2 { font-family: 'Noto Serif JP', serif; }
.page-login .card .lead { font-size: 13px; color: var(--ink2); line-height: 1.6; margin: 9px 0 28px; }

.page-login .view { display: none; }
.page-login .view.on { display: block; animation: tcmLgVf .4s var(--ease); }
@keyframes tcmLgVf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.page-login .fld { margin-bottom: 20px; }
.page-login .fld label { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ui); margin-bottom: 8px; }
.page-login .fld .inwrap { position: relative; }
.page-login .fld input { width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line2); padding: 10px 2px; min-height: 44px; transition: border-color .25s; }
.page-login .fld input::placeholder { color: #b6a39e; }
.page-login .fld input:focus { outline: 0; border-bottom-color: var(--burgundy); }
.page-login .fld .eye { position: absolute; right: 0; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #a98d86; cursor: pointer; padding: 6px; display: flex; transition: color .2s; }
.page-login .fld .eye:hover { color: var(--burgundy); }
.page-login .rowb { display: flex; justify-content: flex-end; margin: -6px 0 24px; }
.page-login .link { font-size: 12.5px; color: var(--burgundy); font-weight: 600; cursor: pointer; transition: color .2s; }
.page-login .link:hover { color: var(--burgundy-d); }

.page-login .submit { width: 100%; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 16px; background: var(--gold); color: #241402; border: 0; cursor: pointer; min-height: 54px; transition: background .25s var(--ease), transform .2s var(--ease); }
.page-login .submit:hover { background: #e0c07e; transform: translateY(-2px); }
.page-login .submit:disabled { opacity: .65; cursor: default; transform: none; }
.page-login .err { display: none; margin-top: 16px; color: var(--deep); font-size: 12.5px; line-height: 1.45; text-align: center; letter-spacing: .01em; }
.page-login .err.on { display: block; }
.page-login .foot { margin-top: 24px; font-size: 13px; color: var(--ink2); text-align: center; }
.page-login .foot a { color: var(--burgundy); font-weight: 600; }
.page-login .foot a:hover { color: var(--burgundy-d); }
.page-login .back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ui); cursor: pointer; margin-top: 22px; transition: color .2s; }
.page-login .back:hover { color: var(--burgundy); }
.page-login .sent-ic { width: 60px; height: 60px; border: 1px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--gold-d); margin-bottom: 22px; }
.page-login .sent-mail { color: var(--ink); font-weight: 600; }

/* ===== FINAL ===== */
.page-login #final { position: fixed; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; text-align: center; }
.page-login #final .ey { font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-d); font-weight: 700; margin-bottom: 14px; }
.page-login #final h2 { font-family: var(--disp); font-optical-sizing: none; font-weight: 500; font-size: clamp(34px, 6vw, 64px); color: var(--ink); }
body.lang-ja .page-login #final h2 { font-family: 'Noto Serif JP', serif; }
.page-login #final h2 em { font-style: italic; color: var(--burgundy); }
.page-login #final p { font-size: 14px; color: var(--ui); margin-top: 16px; letter-spacing: .02em; }
.page-login #final .dots { display: inline-flex; gap: 6px; margin-top: 22px; }
.page-login #final .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: .4; animation: tcmLgDot 1.3s ease-in-out infinite; }
.page-login #final .dots i:nth-child(2) { animation-delay: .2s; }
.page-login #final .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes tcmLgDot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

@media (max-width: 560px) {
	.page-login .lock .tcm { font-size: 24vh; }
	.page-login .card { padding: 38px 28px 32px; max-width: none; }
	.page-login .card h2 { font-size: 29px; }
	.page-login #topbar { padding: 16px 20px; }
	.page-login #topbar .tosite { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.page-login .lock { transition: none; }
	.page-login #final .dots i { animation: none; }
}