/* Login presentation only. Auth forms and the shared account stylesheet stay independent. */
.login-showcase {
  --login-pad:clamp(28px,4.5vw,84px); --login-silver:#f5f5f7; --login-muted:#a1a1a6; --login-blue:#a6c8ff;
  position:relative; isolation:isolate; overflow:hidden;
  min-height:820px; padding:32px var(--login-pad) 32px;
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto minmax(var(--scene-height,340px),1fr) auto; justify-content:normal;
  background:#101012; border-right-color:#ffffff0d;
}
.login-showcase::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 59%,#294b7d22,transparent 56%),linear-gradient(150deg,#ffffff04,transparent 44%);
}
.login-brand-row { position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; }
.login-showcase .account-wordmark { color:var(--login-silver); font-size:26px; letter-spacing:-1.3px; }
.login-motion-toggle { display:grid; place-items:center; width:40px; height:40px; padding:9px; border:1px solid #ffffff12; border-radius:50%; color:#aaaab0; background:#ffffff06; transition:color .2s,background .2s; }
.login-motion-toggle:hover { color:white; background:#ffffff12; }
.login-motion-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.login-motion-toggle .motion-play { display:none; }
.login-motion-toggle[aria-pressed=true] .motion-pause { display:none; }
.login-motion-toggle[aria-pressed=true] .motion-play { display:block; }
.login-story-copy { position:relative; z-index:2; text-align:center; margin:28px -24px 4px; pointer-events:none; }
.login-showcase h1 { font-size:clamp(38px,4.05vw,70px); font-weight:650; line-height:1.06; letter-spacing:-.052em; max-width:none; margin:0; color:var(--login-silver); }
.login-showcase h1 span { color:#b9bdc8; }
.login-showcase .login-story-copy p { margin:14px auto 0; max-width:460px; color:var(--login-muted); font-size:clamp(14px,1.17vw,18px); line-height:1.55; letter-spacing:-.015em; }
.login-cinema { position:relative; z-index:1; margin:8px calc(-1 * var(--login-pad)) 8px; pointer-events:none; }
.login-scene { width:680px; height:460px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(var(--scene-scale,1)); transform-origin:50% 50%; }
/* The same animated SVG scene is reframed into three portrait viewports. */
.login-scene-defs { position:absolute; pointer-events:none; overflow:hidden; }
.login-source { position:absolute; left:145px; top:0; width:390px; opacity:1; transform:scale(.78); transform-origin:50% 0; z-index:2; }
.login-source-picture { height:219px; overflow:hidden; position:relative; border-radius:16px; border:1px solid #ffffff25; background:#172338; box-shadow:0 18px 46px #0004; }
.toon-video { display:block; width:100%; height:100%; }
.login-original-label { position:absolute; left:12px; top:11px; display:flex; align-items:center; gap:6px; padding:7px 10px; border-radius:20px; background:#11172bcf; color:#f5f5f7; font-size:11px; font-weight:600; }
.login-original-label i { width:5px; height:5px; border-radius:50%; background:#c2b2ff; }
.login-source-time { position:absolute; bottom:12px; right:12px; font:500 11px/1 system-ui,sans-serif; color:white; text-shadow:0 1px 4px #000; }
.login-original-progress { position:absolute; left:0; bottom:0; height:2px; width:100%; background:#bad6ff; transform:scaleX(.7); transform-origin:0 50%; }
.login-connectors { position:absolute; inset:0; width:680px; height:440px; opacity:.55; }
.login-connectors path { fill:none; stroke:#b7c5dc55; stroke-width:1; }
.login-cut { position:absolute; top:191px; left:277px; width:126px; height:224px; overflow:hidden; border-radius:13px; border:1px solid #ffffff28; background:#152237; box-shadow:0 14px 32px #0003; transform:translateX(var(--cut-x)); }
.login-cut::after { content:""; position:absolute; inset:60% 0 0; background:linear-gradient(transparent,#07102455); pointer-events:none; }
.login-cut-duration { position:absolute; z-index:2; left:10px; bottom:10px; color:#ffffffe6; font:500 8px/1 system-ui,sans-serif; text-shadow:0 1px 3px #000; }
.login-cut-progress { position:absolute; z-index:2; left:0; right:0; bottom:0; height:2px; transform:scaleX(.65); transform-origin:0 50%; background:#c2d8ffba; }
.login-subtitles { position:absolute; z-index:3; left:5px; right:5px; top:65%; text-align:center; font-size:13px; font-weight:700; letter-spacing:-.035em; line-height:1.18; color:white; text-shadow:0 2px 1px #0009,0 0 6px #000b; }
.login-subtitles span,.login-subtitles strong { display:block; }
.login-subtitles strong { font-weight:700; color:#eef778; }
.cut-1 .login-subtitles strong { color:#9ef5a6; }.cut-2 .login-subtitles strong { color:#b4dcff; }
.login-scene-caption { position:absolute; top:436px; width:100%; text-align:center; font-size:11px; color:#a1a1a6; }
.login-genre-label { color:#d6d7df; font-weight:550; }.login-caption-dot { padding:0 7px; opacity:.6; }
.login-showcase[data-genre="debate"] .toon-headphones,.login-showcase[data-genre="vlog"] .toon-headphones { display:none; }
.login-showcase .login-proof { position:relative; z-index:2; justify-self:center; text-align:center; margin-top:0; }
.login-proof-value { display:flex; align-items:baseline; justify-content:center; gap:9px; line-height:1; letter-spacing:-.06em; color:var(--login-silver); }
.login-counter { display:inline-flex; font-size:clamp(64px,5.5vw,92px); font-weight:600; line-height:1.05; font-variant-numeric:tabular-nums; height:1.05em; letter-spacing:-.065em; }
.login-counter-window { overflow:hidden; position:relative; width:.59em; height:1.05em; mask-image:linear-gradient(transparent,#000 9%,#000 90%,transparent); }
.login-counter-reel { display:block; width:100%; will-change:transform; }
.login-counter-digit { display:block; height:1.05em; line-height:1.05; text-align:center; }
.login-proof-unit { font-size:clamp(31px,2.6vw,44px); font-weight:500; letter-spacing:-.04em; }
.login-proof-plus { color:var(--login-blue); margin-left:2px; }
.login-showcase .login-proof p { margin:10px 0 0; font-size:13px; line-height:1.4; letter-spacing:.005em; color:var(--login-muted); max-width:none; }
.login-showcase.motion-paused * { animation-play-state:paused!important; }
/* Transform/opacity only. Independent character motion continues inside every crop. */
.login-showcase.motion-ready .login-source { animation:login-source 13s cubic-bezier(.22,1,.36,1) infinite; will-change:transform,opacity; }
.login-showcase.motion-ready .login-cut { animation:login-cut 13s cubic-bezier(.22,1,.36,1) infinite; animation-delay:calc(var(--cut-i) * 100ms); will-change:transform,opacity; }
.login-showcase.motion-ready .login-connectors,.login-showcase.motion-ready .login-scene-caption { animation:login-details 13s ease infinite; }
.login-showcase.motion-ready .login-original-progress { animation:login-progress 13s linear infinite; }
.login-showcase.motion-ready .login-subtitles { animation:login-subtitle 13s ease infinite; animation-delay:calc(var(--cut-i) * 100ms); }
.toon-head,.toon-eyes,.toon-mouth,.toon-gesture { transform-box:fill-box; }
.login-showcase.motion-ready .toon-mouth { transform-origin:50% 15%; animation:toon-talk 7.2s linear infinite; animation-delay:var(--talk-delay); }
.login-showcase.motion-ready .toon-eyes { transform-origin:50% 50%; animation:toon-blink 5.9s ease-in-out infinite; animation-delay:var(--blink-delay); }
.login-showcase.motion-ready .toon-head { transform-origin:50% 94%; animation:toon-nod 7.2s ease-in-out infinite; animation-delay:var(--talk-delay); }
.login-showcase.motion-ready .toon-gesture { transform-origin:14% 85%; animation:toon-gesture 7.2s ease-in-out infinite; animation-delay:var(--talk-delay); }
@keyframes login-source { 0% {opacity:0;transform:translateY(70px) scale(1.12)} 6%,20% {opacity:1;transform:translateY(70px) scale(1.12)} 35%,87% {opacity:1;transform:translateY(0) scale(.78)} 98%,100% {opacity:0;transform:translateY(0) scale(.78)} }
@keyframes login-cut { 0%,26% {opacity:0;transform:translate(calc(var(--cut-x) * .45),-90px) scale(.6)} 44%,86% {opacity:1;transform:translate(var(--cut-x),0) scale(1)} 97%,100% {opacity:0;transform:translate(var(--cut-x),8px) scale(.98)} }
@keyframes login-details { 0%,30% {opacity:0} 44%,86% {opacity:1} 97%,100% {opacity:0} }
@keyframes login-subtitle { 0%,40% {opacity:0;transform:translateY(5px)} 47%,86% {opacity:1;transform:translateY(0)} 97%,100% {opacity:0;transform:translateY(0)} }
@keyframes login-progress { 0% {transform:scaleX(0)} 90%,100% {transform:scaleX(1)} }
@keyframes toon-talk { 0%,4%,8%,15%,23%,29%,34%,100% {transform:scaleY(.12)} 2%,6%,12%,19%,26%,31% {transform:scaleY(1)} }
@keyframes toon-blink { 0%,42%,46%,100% {transform:scaleY(1)} 44% {transform:scaleY(.08)} }
@keyframes toon-nod { 0%,34%,100% {transform:rotate(0deg)} 10% {transform:rotate(-1.5deg)} 23% {transform:rotate(1deg)} }
@keyframes toon-gesture { 0%,34%,100% {transform:translateY(0) rotate(0deg)} 12%,20% {transform:translateY(-6px) rotate(-5deg)} }
@media(min-width:1800px) { .login-showcase { min-height:960px; padding-top:60px; padding-bottom:64px; } .login-story-copy { margin-top:60px; } }
@media(min-width:761px) and (max-height:800px) { .login-showcase { min-height:740px; padding-top:30px; padding-bottom:30px; } .login-story-copy { margin-top:28px; margin-bottom:4px; } }
@media(min-width:761px) and (max-width:1050px) { .login-showcase { --login-pad:26px; } .login-story-copy { margin-left:-14px; margin-right:-14px; } .login-showcase h1 { font-size:39px; } .login-wide-break { display:none; } }
@media(max-width:760px) {
  .login-showcase { --login-pad:24px; min-height:560px; padding:22px 24px 28px; border-right:0; border-bottom:1px solid #ffffff0e; }
  .login-showcase .account-wordmark { font-size:23px; }
  .login-story-copy { margin:24px -10px 6px; }
  .login-showcase h1 { font-size:clamp(34px,8vw,50px); line-height:1.06; margin:0; }
  .login-showcase h1 br { display:initial; }
  .login-showcase .login-story-copy p { display:block; font-size:14px; margin-top:14px; }
  .login-cinema { margin-top:10px; margin-bottom:8px; }
  .login-showcase .login-proof p { display:block; font-size:12px; margin-top:5px; }
  .login-counter { font-size:58px; }.login-proof-unit { font-size:29px; }
}
@media(prefers-reduced-motion:reduce) {
  .login-showcase .login-source { opacity:1; }
  .login-showcase .login-cut { opacity:1; }
  .login-showcase .toon-mouth { transform-origin:50% 15%; transform:scaleY(.2); }
  .login-counter-reel { will-change:auto; }
}