/* Luxoret Motion: the stage every template plays on. Built by build.py, do not edit fly-motion.css by hand. */
.mo-stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; transform-origin: 0 0; font-family: Inter, system-ui, sans-serif; color: #fff; background: #0A0A0B; }
.mo-stage.r916 { width: 1080px; height: 1920px; }
.mo-stage * { box-sizing: border-box; animation-duration: var(--dur, 6s); animation-iteration-count: infinite; animation-fill-mode: both; }
.mo-stage [data-fit] { display: inline-block; white-space: nowrap; }
.mo-stage img[hidden] { display: none !important; }
.mo-stage > .mo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; animation: none; }
/* Over the user's own picture, or with no background at all, the template's own backdrop steps aside */
.mo-stage.has-bg, .mo-stage.mo-clear { background: transparent !important; }
.mo-stage.has-bg .bgx, .mo-stage.mo-clear .bgx, .mo-stage.mo-clear > .mo-bg { display: none !important; }

/* /fly/motion library page */
.mo-console { max-width: 1480px; margin: 0 auto; padding: 4px 28px 80px; }
@media (max-width: 860px) { .mo-console { padding: 4px 16px 60px; } }
.mo-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 0 0 20px; }
.mo-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.mo-tabs button { padding: 8px 14px; border: 1px solid #232327; border-radius: 999px; background: #121214; color: #F4F4F5; font: 600 14px Inter, sans-serif; cursor: pointer; }
.mo-tabs button span { margin-left: 4px; font-weight: 500; color: #C9C9CE; }
.mo-tabs button.on { background: #D2FF3A; border-color: #D2FF3A; color: #0A0A0B; }
.mo-tabs button.on span { color: #0A0A0B; }
.mo-search { flex: 0 1 280px; min-width: 0; padding: 9px 14px; border: 1px solid #232327; border-radius: 999px; background: #0F0F11; color: #F4F4F5; font: 14px Inter, sans-serif; }
.mo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 22px; align-items: stretch; }
@media (max-width: 520px) { .mo-grid { grid-template-columns: 1fr; } }
.mo-card { display: flex; flex-direction: column; border: 1px solid #26262b; border-radius: 18px; background: #141417; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.mo-card:hover { transform: translateY(-3px); border-color: #34343b; box-shadow: 0 18px 44px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.4); }
.mo-card[hidden] { display: none; }
.mo-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }

.mo-meta { flex: 1; display: flex; flex-direction: column; padding: 14px 16px 16px; }
.mo-meta .mo-ctl { margin-top: auto; }
.mo-meta h2 { margin: 0 0 4px; font: 700 18px Inter, sans-serif; color: #F4F4F5; }
.mo-meta p { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: #C9C9CE; }
.mo-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mo-ctl input[type=text] { flex: 1 1 140px; min-width: 0; padding: 8px 10px; border: 1px solid #232327; border-radius: 10px; background: #0F0F11; color: #F4F4F5; font: 13px Inter, sans-serif; }
.mo-ctl input[type=color] { width: 38px; height: 34px; padding: 2px; border: 1px solid #232327; border-radius: 10px; background: #0F0F11; cursor: pointer; }
.mo-ctl button, .mo-up span { padding: 8px 12px; border: 0; border-radius: 999px; background: #D2FF3A; color: #0A0A0B; font: 800 13px Inter, sans-serif; cursor: pointer; }
.mo-ctl .mo-replay, .mo-up span { background: transparent; color: #F4F4F5; border: 1px solid #232327; display: inline-block; }
.mo-up { cursor: pointer; }
.mo-ctl .mo-export[disabled] { opacity: .6; cursor: wait; }
.mo-cost { font-weight: 600; margin-left: 4px; }
.mo-out { margin-top: 12px; }
.mo-out video { display: block; width: 100%; border-radius: 12px; background: #000; }
.mo-dl { display: inline-block; margin-top: 8px; padding: 8px 14px; border-radius: 999px; background: #D2FF3A; color: #0A0A0B; font: 800 13px Inter, sans-serif; text-decoration: none; }
.mo-err { margin: 10px 0 0; font-size: 13px; color: #FF6B6B; }
.mo-ctl .mo-fmt { padding: 8px 10px; border: 1px solid #232327; border-radius: 10px; background: #0F0F11; color: #F4F4F5; font: 600 13px Inter, sans-serif; }
.mo-frame.mo-checker { background-color: #2a2a2e; background-image: linear-gradient(45deg, #3a3a40 25%, transparent 25%, transparent 75%, #3a3a40 75%), linear-gradient(45deg, #3a3a40 25%, transparent 25%, transparent 75%, #3a3a40 75%); background-size: 24px 24px; background-position: 0 0, 12px 12px; }

/* data-bars */
.mo-stage.tpl-data-bars { background: #0d1117; }
.mo-stage.tpl-data-bars .title { position: absolute; left: 160px; top: 110px; font-size: 64px; font-weight: 800; color: #fff; animation-name: data-bars-fade; }
.mo-stage.tpl-data-bars .mo-num { position: absolute; right: 160px; top: 90px; font-size: 120px; font-weight: 900; color: var(--a); font-variant-numeric: tabular-nums; animation-name: data-bars-fade; }
.mo-stage.tpl-data-bars .bars { position: absolute; left: 160px; right: 160px; bottom: 150px; height: 620px; display: flex; align-items: flex-end; gap: 60px; border-bottom: 4px solid #3a3f47; }
.mo-stage.tpl-data-bars .b { flex: 1; background: var(--a); border-radius: 12px 12px 0 0; transform: scaleY(0); transform-origin: bottom; animation-name: data-bars-grow; }
.mo-stage.tpl-data-bars .b:nth-child(1) { height: 30%; animation-delay: 0s; } .mo-stage.tpl-data-bars .b:nth-child(2) { height: 48%; animation-delay: .15s; } .mo-stage.tpl-data-bars .b:nth-child(3) { height: 42%; animation-delay: .3s; } .mo-stage.tpl-data-bars .b:nth-child(4) { height: 70%; animation-delay: .45s; } .mo-stage.tpl-data-bars .b:nth-child(5) { height: 100%; animation-delay: .6s; }
.mo-stage.tpl-data-bars .b:nth-child(-n+4) { opacity: .45; }
@keyframes data-bars-grow { 0%,4% { transform: scaleY(0); } 30%,82% { transform: scaleY(1); } 94%,100% { transform: scaleY(0); } }
@keyframes data-bars-fade { 0%,3% { opacity: 0; transform: translateY(20px); } 12%,85% { opacity: 1; transform: none; } 95%,100% { opacity: 0; } }

/* data-compare */
.mo-stage.tpl-data-compare { background: #0A0E14; }
.mo-stage.tpl-data-compare .tt { position: absolute; left: 0; right: 0; top: 90px; text-align: center; }
.mo-stage.tpl-data-compare .tt span { font-size: 76px; font-weight: 800; color: #fff; animation-name: data-compare-f; }
.mo-stage.tpl-data-compare .col { position: absolute; bottom: 150px; width: 380px; height: 700px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.mo-stage.tpl-data-compare .c1 { left: 520px; } .mo-stage.tpl-data-compare .c2 { right: 520px; }
.mo-stage.tpl-data-compare .vl { font-size: 90px; font-weight: 900; color: #fff; margin-bottom: 14px; font-variant-numeric: tabular-nums; animation-name: data-compare-f; }
.mo-stage.tpl-data-compare .br { width: 100%; border-radius: 18px 18px 0 0; transform-origin: bottom; animation-name: data-compare-g; }
.mo-stage.tpl-data-compare .c1 .br { height: 32%; background: #334155; }
.mo-stage.tpl-data-compare .c2 .br { height: 100%; background: var(--a); animation-delay: .3s; }
.mo-stage.tpl-data-compare .c2 .vl { color: var(--a); }
.mo-stage.tpl-data-compare .lb { position: absolute; bottom: 70px; width: 380px; text-align: center; font-size: 48px; font-weight: 700; color: #E4E4E7; animation-name: data-compare-f; }
.mo-stage.tpl-data-compare .l1 { left: 520px; } .mo-stage.tpl-data-compare .l2 { right: 520px; }
.mo-stage.tpl-data-compare .base { position: absolute; left: 400px; right: 400px; bottom: 146px; height: 4px; background: #334155; }
@keyframes data-compare-g { 0%,6% { transform: scaleY(0); } 36%,84% { transform: scaleY(1); } 94%,100% { transform: scaleY(0); } }
@keyframes data-compare-f { 0%,4% { opacity: 0; } 14%,86% { opacity: 1; } 94%,100% { opacity: 0; } }

/* data-counter */
.mo-stage.tpl-data-counter { background: radial-gradient(circle at 50% 45%, #231a0c, #0a0806 70%); }
.mo-stage.tpl-data-counter .nm { position: absolute; left: 0; right: 0; top: 280px; text-align: center; animation-name: data-counter-in; }
.mo-stage.tpl-data-counter .nm span { font-size: 300px; line-height: 1; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.mo-stage.tpl-data-counter .nm .ps { color: var(--a); }
.mo-stage.tpl-data-counter .lb { position: absolute; left: 0; right: 0; top: 650px; text-align: center; }
.mo-stage.tpl-data-counter .lb span { font-size: 70px; font-weight: 700; color: var(--a); letter-spacing: .04em; animation-name: data-counter-lb; }
@keyframes data-counter-in { 0%,3% { opacity: 0; transform: scale(.8); } 12%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }
@keyframes data-counter-lb { 0%,30% { opacity: 0; transform: translateY(30px); } 40%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }

/* data-line */
.mo-stage.tpl-data-line { background: #060C09; }
.mo-stage.tpl-data-line .gd { position: absolute; left: 150px; right: 150px; top: 300px; bottom: 140px; background-image: linear-gradient(rgba(255,255,255,.06) 2px, transparent 2px); background-size: 100% 128px; }
.mo-stage.tpl-data-line svg { position: absolute; left: 150px; top: 300px; width: 1620px; height: 640px; overflow: visible; }
.mo-stage.tpl-data-line .ln { fill: none; stroke: var(--a); stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2200; stroke-dashoffset: 2200; animation-name: data-line-draw; }
.mo-stage.tpl-data-line .ar { fill: var(--a); opacity: .12; animation-name: data-line-area; }
.mo-stage.tpl-data-line .dt { position: absolute; left: 1750px; top: 330px; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--a); box-shadow: 0 0 0 14px color-mix(in srgb, var(--a) 25%, transparent); animation-name: data-line-dot; }
.mo-stage.tpl-data-line .tt { position: absolute; left: 150px; top: 90px; }
.mo-stage.tpl-data-line .tt span { font-size: 64px; font-weight: 800; color: #fff; animation-name: data-line-f; }
.mo-stage.tpl-data-line .vl { position: absolute; right: 150px; top: 70px; text-align: right; animation-name: data-line-f; }
.mo-stage.tpl-data-line .vl b { display: block; font-size: 130px; line-height: 1; font-weight: 900; color: var(--a); font-variant-numeric: tabular-nums; }
.mo-stage.tpl-data-line .vl span { font-size: 40px; font-weight: 600; color: #fff; }
@keyframes data-line-draw { 0%,6% { stroke-dashoffset: 2200; } 44%,86% { stroke-dashoffset: 0; } 96%,100% { stroke-dashoffset: 2200; } }
@keyframes data-line-area { 0%,36% { opacity: 0; } 48%,86% { opacity: .12; } 94%,100% { opacity: 0; } }
@keyframes data-line-dot { 0%,42% { transform: scale(0); } 48% { transform: scale(1.3); } 52%,86% { transform: none; } 94%,100% { transform: scale(0); } }
@keyframes data-line-f { 0%,4% { opacity: 0; } 14%,86% { opacity: 1; } 94%,100% { opacity: 0; } }

/* data-ring */
.mo-stage.tpl-data-ring { background: #07100C; }
.mo-stage.tpl-data-ring .rg { position: absolute; left: 180px; top: 190px; width: 700px; height: 700px; }
.mo-stage.tpl-data-ring .rg svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mo-stage.tpl-data-ring .rg .bg { fill: none; stroke: #1b2a23; stroke-width: 44; }
.mo-stage.tpl-data-ring .rg .fg { fill: none; stroke: var(--a); stroke-width: 44; stroke-linecap: round; stroke-dasharray: 1885; stroke-dashoffset: 1885; animation-name: data-ring-fill; }
.mo-stage.tpl-data-ring .pc { position: absolute; left: 180px; top: 190px; width: 700px; height: 700px; display: grid; place-items: center; }
.mo-stage.tpl-data-ring .pc b { font-size: 200px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.mo-stage.tpl-data-ring .pc b i { font-style: normal; font-size: 110px; color: var(--a); }
.mo-stage.tpl-data-ring .lb { position: absolute; left: 1000px; top: 450px; }
.mo-stage.tpl-data-ring .lb span { font-size: 86px; line-height: 1.1; font-weight: 800; color: #fff; animation-name: data-ring-lb; }
@keyframes data-ring-fill { 0%,4% { stroke-dashoffset: 1885; } 40%,86% { stroke-dashoffset: calc(1885px - 1885px * var(--pct, .87)); } 96%,100% { stroke-dashoffset: 1885; } }
@keyframes data-ring-lb { 0%,20% { opacity: 0; transform: translateX(60px); } 32%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }

/* data-stats */
.mo-stage.tpl-data-stats { background: #0E0A12; }
.mo-stage.tpl-data-stats .row { position: absolute; left: 150px; right: 150px; top: 290px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; }
.mo-stage.tpl-data-stats .tile { height: 500px; padding: 60px 40px; border-radius: 36px; background: #1a1320; border: 3px solid #2e2238; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; animation-name: data-stats-up; }
.mo-stage.tpl-data-stats .tile:nth-child(2) { animation-delay: .15s; } .mo-stage.tpl-data-stats .tile:nth-child(3) { animation-delay: .3s; }
.mo-stage.tpl-data-stats .vl { font-size: 150px; line-height: 1; font-weight: 900; color: var(--a); font-variant-numeric: tabular-nums; }
.mo-stage.tpl-data-stats .lb { margin-top: 20px; font-size: 44px; font-weight: 600; color: #fff; }
@keyframes data-stats-up { 0%,4% { opacity: 0; transform: translateY(80px); } 16%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; transform: translateY(-40px); } }

/* intro-glitch */
.mo-stage.tpl-intro-glitch { background: #050507; }
.mo-stage.tpl-intro-glitch .scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 6px); animation-name: intro-glitch-scan; }
.mo-stage.tpl-intro-glitch .line { position: absolute; left: 0; right: 0; top: 380px; text-align: center; }
.mo-stage.tpl-intro-glitch .w { position: relative; font-size: 230px; line-height: 1; font-weight: 900; letter-spacing: .04em; color: #fff; animation-name: intro-glitch-in; }
.mo-stage.tpl-intro-glitch .w::before, .mo-stage.tpl-intro-glitch .w::after { content: attr(data-copy); position: absolute; left: 0; top: 0; width: 100%; height: 100%; mix-blend-mode: screen; }
.mo-stage.tpl-intro-glitch .w::before { color: var(--a); animation: intro-glitch-r var(--dur, 6s) infinite both; }
.mo-stage.tpl-intro-glitch .w::after { color: #FF2D6F; animation: intro-glitch-b var(--dur, 6s) infinite both; }
.mo-stage.tpl-intro-glitch .tg { position: absolute; left: 0; right: 0; top: 690px; text-align: center; }
.mo-stage.tpl-intro-glitch .tg span { font-size: 40px; font-weight: 700; letter-spacing: .35em; color: var(--a); animation-name: intro-glitch-tag; }
@keyframes intro-glitch-in { 0%,4% { opacity: 0; } 5% { opacity: 1; transform: translateX(-30px) skewX(20deg); } 7% { transform: translateX(40px); } 9% { transform: translateX(-10px) skewX(-15deg); } 12%,84% { opacity: 1; transform: none; } 85% { transform: translateX(30px) skewX(10deg); } 87% { transform: translateX(-20px); } 90%,100% { opacity: 0; } }
@keyframes intro-glitch-r { 0%,4% { transform: none; clip-path: inset(0 0 100% 0); } 5% { transform: translate(-18px, 6px); clip-path: inset(10% 0 55% 0); } 8% { transform: translate(14px, -4px); clip-path: inset(60% 0 10% 0); } 12%,40% { transform: none; clip-path: inset(0 0 100% 0); } 42% { transform: translate(-12px, 0); clip-path: inset(30% 0 40% 0); } 44%,84% { transform: none; clip-path: inset(0 0 100% 0); } 86% { transform: translate(20px, 0); clip-path: inset(20% 0 30% 0); } 90%,100% { clip-path: inset(0 0 100% 0); } }
@keyframes intro-glitch-b { 0%,4% { transform: none; clip-path: inset(0 0 100% 0); } 6% { transform: translate(18px, -6px); clip-path: inset(45% 0 20% 0); } 9% { transform: translate(-14px, 4px); clip-path: inset(5% 0 70% 0); } 12%,60% { transform: none; clip-path: inset(0 0 100% 0); } 62% { transform: translate(12px, 0); clip-path: inset(55% 0 15% 0); } 64%,84% { transform: none; clip-path: inset(0 0 100% 0); } 87% { transform: translate(-20px, 0); clip-path: inset(50% 0 10% 0); } 90%,100% { clip-path: inset(0 0 100% 0); } }
@keyframes intro-glitch-tag { 0%,18% { opacity: 0; letter-spacing: .8em; } 30% { opacity: 1; letter-spacing: .35em; } 84% { opacity: 1; } 90%,100% { opacity: 0; } }
@keyframes intro-glitch-scan { 0% { transform: translateY(0); } 100% { transform: translateY(60px); } }

/* intro-letters */
.mo-stage.tpl-intro-letters { background: #FFF6E9; color: #1A1A1A; }
.mo-stage.tpl-intro-letters .blob { position: absolute; left: 50%; top: 50%; width: 1300px; height: 800px; margin: -400px 0 0 -650px; border-radius: 48% 52% 45% 55%; background: var(--a); opacity: .16; animation-name: intro-letters-blob; }
.mo-stage.tpl-intro-letters .line { position: absolute; left: 0; right: 0; top: 330px; text-align: center; }
.mo-stage.tpl-intro-letters .w { font-size: 260px; line-height: 1.1; font-weight: 900; color: #1A1A1A; }
.mo-stage.tpl-intro-letters .w .ch { display: inline-block; color: var(--a); -webkit-text-stroke: 8px #1A1A1A; paint-order: stroke fill; animation-name: intro-letters-drop; animation-delay: calc(var(--i) * .09s); }
.mo-stage.tpl-intro-letters .tg { position: absolute; left: 0; right: 0; top: 700px; text-align: center; }
.mo-stage.tpl-intro-letters .tg span { font-size: 56px; font-weight: 800; color: #1A1A1A; animation-name: intro-letters-tag; }
@keyframes intro-letters-drop { 0%,4% { opacity: 0; transform: translateY(-700px) rotate(-20deg); } 16% { opacity: 1; transform: translateY(30px) rotate(4deg); } 20% { transform: translateY(-20px); } 24%,80% { opacity: 1; transform: none; } 88%,100% { opacity: 0; transform: translateY(80px); } }
@keyframes intro-letters-tag { 0%,34% { opacity: 0; transform: scale(.6); } 42% { opacity: 1; transform: scale(1.08); } 46%,84% { opacity: 1; transform: none; } 92%,100% { opacity: 0; } }
@keyframes intro-letters-blob { 0% { transform: scale(.9) rotate(0); } 50% { transform: scale(1.05) rotate(8deg); } 100% { transform: scale(.9) rotate(0); } }

/* intro-minimal */
.mo-stage.tpl-intro-minimal { background: #F4F1EC; color: #111; }
.mo-stage.tpl-intro-minimal .m-rule { position: absolute; left: 360px; right: 360px; top: 560px; height: 3px; background: #111; transform-origin: center; animation-name: intro-minimal-rule; }
.mo-stage.tpl-intro-minimal .logo { position: absolute; left: 50%; top: 200px; height: 150px; max-width: 480px; translate: -50% 0; object-fit: contain; animation-name: intro-minimal-fade; }
.mo-stage.tpl-intro-minimal .mask { position: absolute; left: 0; right: 0; top: 380px; height: 180px; overflow: hidden; text-align: center; }
.mo-stage.tpl-intro-minimal .w { font-family: "Playfair Display", Georgia, serif; font-size: 150px; line-height: 180px; font-weight: 500; color: #111; animation-name: intro-minimal-rise; }
.mo-stage.tpl-intro-minimal .tg { position: absolute; left: 0; right: 0; top: 600px; text-align: center; }
.mo-stage.tpl-intro-minimal .tg span { font-size: 38px; letter-spacing: .3em; text-transform: uppercase; color: #6B5B45; animation-name: intro-minimal-fade; }
.mo-stage.tpl-intro-minimal .dot { position: absolute; left: 50%; top: 553px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--a); border: 3px solid #111; animation-name: intro-minimal-dot; }
@keyframes intro-minimal-rule { 0%,5% { transform: scaleX(0); } 22%,84% { transform: scaleX(1); } 94%,100% { transform: scaleX(0); } }
@keyframes intro-minimal-rise { 0%,20% { transform: translateY(190px); } 36%,84% { transform: none; } 92%,100% { transform: translateY(190px); } }
@keyframes intro-minimal-fade { 0%,34% { opacity: 0; } 48%,84% { opacity: 1; } 92%,100% { opacity: 0; } }
@keyframes intro-minimal-dot { 0%,18% { transform: scale(0); } 24% { transform: scale(1.4); } 28%,84% { transform: scale(1); } 92%,100% { transform: scale(0); } }

/* intro-neon */
.mo-stage.tpl-intro-neon { background: radial-gradient(ellipse at 50% 45%, #1b0f1d 0%, #07050a 65%); }
.mo-stage.tpl-intro-neon .line { position: absolute; left: 0; right: 0; top: 360px; text-align: center; }
.mo-stage.tpl-intro-neon .w { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 220px; font-weight: 700; color: #fff; text-shadow: 0 0 10px var(--a), 0 0 30px var(--a), 0 0 70px var(--a), 0 0 120px var(--a); animation-name: intro-neon-flick; animation-timing-function: steps(1, end); }
.mo-stage.tpl-intro-neon .tg { position: absolute; left: 0; right: 0; top: 700px; text-align: center; }
.mo-stage.tpl-intro-neon .tg span { font-size: 48px; font-weight: 700; letter-spacing: .4em; color: #fff; text-shadow: 0 0 8px #fff, 0 0 24px var(--a); animation-name: intro-neon-tag; }
.mo-stage.tpl-intro-neon .glow { position: absolute; left: 50%; top: 50%; width: 1400px; height: 700px; margin: -350px 0 0 -700px; border-radius: 50%; background: var(--a); filter: blur(160px); opacity: .18; animation-name: intro-neon-glow; animation-timing-function: steps(1, end); }
@keyframes intro-neon-flick { 0% { opacity: 0; } 8% { opacity: 1; } 9% { opacity: .1; } 11% { opacity: 1; } 12% { opacity: .2; } 15%,58% { opacity: 1; } 59% { opacity: .3; } 60%,88% { opacity: 1; } 92%,100% { opacity: 0; } }
@keyframes intro-neon-glow { 0% { opacity: 0; } 8% { opacity: .18; } 9% { opacity: 0; } 11% { opacity: .18; } 12% { opacity: .02; } 15%,88% { opacity: .18; } 92%,100% { opacity: 0; } }
@keyframes intro-neon-tag { 0%,26% { opacity: 0; } 27% { opacity: 1; } 28% { opacity: .2; } 30%,88% { opacity: 1; } 92%,100% { opacity: 0; } }

/* intro-ring */
.mo-stage.tpl-intro-ring { background: radial-gradient(circle at 50% 50%, #1a1a1f 0%, #050506 70%); }
.mo-stage.tpl-intro-ring .ring { position: absolute; left: 50%; top: 50%; width: 960px; height: 960px; margin: -480px 0 0 -480px; border-radius: 50%; border: 6px solid var(--a); animation-name: intro-ring-ring; }
.mo-stage.tpl-intro-ring .logo { position: absolute; left: 50%; top: 250px; height: 200px; max-width: 520px; translate: -50% 0; object-fit: contain; animation-name: intro-ring-mark; }
.mo-stage.tpl-intro-ring .line { position: absolute; left: 0; right: 0; top: 430px; text-align: center; }
.mo-stage.tpl-intro-ring.has-logo .line { top: 500px; }
.mo-stage.tpl-intro-ring .mark { position: relative; overflow: hidden; font-size: 150px; line-height: 1; font-weight: 900; letter-spacing: 0.08em; color: #fff; animation-name: intro-ring-mark; }
.mo-stage.tpl-intro-ring.has-logo .mark { font-size: 110px; }
.mo-stage.tpl-intro-ring .mark::after { content: ""; position: absolute; top: 0; bottom: 0; width: 220px; left: -300px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: intro-ring-sweep var(--dur, 6s) infinite both; }
.mo-stage.tpl-intro-ring .tg { position: absolute; left: 0; right: 0; top: 620px; text-align: center; }
.mo-stage.tpl-intro-ring.has-logo .tg { top: 660px; }
.mo-stage.tpl-intro-ring .tg span { font-size: 34px; font-weight: 600; letter-spacing: 0.3em; color: var(--a); animation-name: intro-ring-tag; }
@keyframes intro-ring-ring { 0% { transform: scale(0); opacity: 0; } 15% { transform: scale(1.1); opacity: 1; } 25% { transform: scale(1); } 80% { transform: scale(1); opacity: 1; } 95%,100% { transform: scale(1.4); opacity: 0; } }
@keyframes intro-ring-mark { 0%,12% { transform: scale(.6); opacity: 0; filter: blur(20px); } 28% { transform: scale(1); opacity: 1; filter: blur(0); } 82% { opacity: 1; } 95%,100% { opacity: 0; transform: scale(1.05); } }
@keyframes intro-ring-sweep { 0%,35% { left: -300px; } 55%,100% { left: 110%; } }
@keyframes intro-ring-tag { 0%,35% { opacity: 0; transform: translateY(30px); } 50% { opacity: 1; transform: none; } 82% { opacity: 1; } 95%,100% { opacity: 0; } }

/* intro-split */
.mo-stage.tpl-intro-split { background: #0B0B0E; }
.mo-stage.tpl-intro-split .door { position: absolute; top: 0; bottom: 0; width: 50%; background: var(--a); z-index: 2; }
.mo-stage.tpl-intro-split .d1 { left: 0; animation-name: intro-split-left; }
.mo-stage.tpl-intro-split .d2 { right: 0; animation-name: intro-split-right; }
.mo-stage.tpl-intro-split .logo { position: absolute; left: 50%; top: 250px; height: 180px; max-width: 520px; translate: -50% 0; object-fit: contain; animation-name: intro-split-in; }
.mo-stage.tpl-intro-split .line { position: absolute; left: 0; right: 0; top: 400px; text-align: center; }
.mo-stage.tpl-intro-split.has-logo .line { top: 460px; }
.mo-stage.tpl-intro-split .w { font-size: 200px; line-height: 1; font-weight: 900; letter-spacing: .02em; color: #fff; animation-name: intro-split-in; }
.mo-stage.tpl-intro-split .m-rule { position: absolute; left: 50%; top: 640px; width: 520px; height: 6px; margin-left: -260px; background: var(--a); transform-origin: left; animation-name: intro-split-rule; }
.mo-stage.tpl-intro-split.has-logo .m-rule { top: 700px; }
.mo-stage.tpl-intro-split .tg { position: absolute; left: 0; right: 0; top: 680px; text-align: center; }
.mo-stage.tpl-intro-split.has-logo .tg { top: 740px; }
.mo-stage.tpl-intro-split .tg span { font-size: 52px; font-weight: 500; color: #E4E4E7; animation-name: intro-split-tag; }
@keyframes intro-split-left { 0%,8% { transform: none; } 24%,80% { transform: translateX(-101%); } 92%,100% { transform: none; } }
@keyframes intro-split-right { 0%,8% { transform: none; } 24%,80% { transform: translateX(101%); } 92%,100% { transform: none; } }
@keyframes intro-split-in { 0%,12% { opacity: 0; transform: scale(.92); } 28%,86% { opacity: 1; transform: none; } 92%,100% { opacity: 0; } }
@keyframes intro-split-rule { 0%,26% { transform: scaleX(0); } 40%,84% { transform: scaleX(1); } 92%,100% { transform: scaleX(0); } }
@keyframes intro-split-tag { 0%,34% { opacity: 0; transform: translateY(20px); } 46%,84% { opacity: 1; transform: none; } 92%,100% { opacity: 0; } }

/* intro-stripes */
.mo-stage.tpl-intro-stripes { background: #0A0A0B; }
.mo-stage.tpl-intro-stripes .s { position: absolute; top: -300px; width: 260px; height: 1700px; transform: rotate(20deg) translateX(-2600px); }
.mo-stage.tpl-intro-stripes .s1 { left: 300px; background: var(--a); animation-name: intro-stripes-s; }
.mo-stage.tpl-intro-stripes .s2 { left: 620px; background: #fff; animation-name: intro-stripes-s; animation-delay: .12s; }
.mo-stage.tpl-intro-stripes .s3 { left: 940px; background: var(--a); animation-name: intro-stripes-s; animation-delay: .24s; }
.mo-stage.tpl-intro-stripes .logo { position: absolute; left: 50%; top: 230px; height: 180px; max-width: 520px; translate: -50% 0; object-fit: contain; animation-name: intro-stripes-punch; }
.mo-stage.tpl-intro-stripes .line { position: absolute; left: 0; right: 0; top: 360px; text-align: center; }
.mo-stage.tpl-intro-stripes.has-logo .line { top: 430px; }
.mo-stage.tpl-intro-stripes .w { font-family: "Bebas Neue", Oswald, Impact, sans-serif; font-size: 330px; line-height: 1; color: #fff; font-style: italic; animation-name: intro-stripes-punch; }
.mo-stage.tpl-intro-stripes .tg { position: absolute; left: 0; right: 0; top: 720px; text-align: center; }
.mo-stage.tpl-intro-stripes.has-logo .tg { top: 770px; }
.mo-stage.tpl-intro-stripes .tg span { display: inline-block; padding: 10px 28px; background: var(--a); color: #0A0A0B; font-size: 54px; font-weight: 900; letter-spacing: .12em; font-style: italic; animation-name: intro-stripes-tag; }
@keyframes intro-stripes-s { 0% { transform: rotate(20deg) translateX(-2600px); } 22% { transform: rotate(20deg) translateX(2600px); } 100% { transform: rotate(20deg) translateX(2600px); } }
@keyframes intro-stripes-punch { 0%,14% { opacity: 0; transform: scale(1.8); } 20% { opacity: 1; transform: scale(.94); } 24%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; transform: scale(.9); } }
@keyframes intro-stripes-tag { 0%,26% { opacity: 0; transform: translateX(-80px); } 34%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }

/* intro-typewriter */
.mo-stage.tpl-intro-typewriter { background: #0A0F0C; }
.mo-stage.tpl-intro-typewriter .line { position: absolute; left: 0; right: 0; top: 420px; text-align: center; }
.mo-stage.tpl-intro-typewriter .w { position: relative; font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 140px; font-weight: 700; color: var(--a); animation-name: intro-typewriter-type; animation-timing-function: steps(14, end); }
.mo-stage.tpl-intro-typewriter .cur { display: inline-block; width: 28px; height: 150px; margin-left: 10px; vertical-align: -18px; background: var(--a); animation-name: intro-typewriter-blink; animation-duration: 1s; animation-timing-function: steps(1, end); }
.mo-stage.tpl-intro-typewriter .tg { position: absolute; left: 0; right: 0; top: 640px; text-align: center; }
.mo-stage.tpl-intro-typewriter .tg span { font-family: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 42px; color: #C9C9CE; animation-name: intro-typewriter-tag; }
@keyframes intro-typewriter-type { 0%,5% { clip-path: inset(0 100% 0 0); } 40%,86% { clip-path: inset(0 0 0 0); } 94%,100% { clip-path: inset(0 100% 0 0); } }
@keyframes intro-typewriter-blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
@keyframes intro-typewriter-tag { 0%,44% { opacity: 0; } 54%,86% { opacity: 1; } 94%,100% { opacity: 0; } }

/* outro-credits */
.mo-stage.tpl-outro-credits { background: #000; }
.mo-stage.tpl-outro-credits .roll { position: absolute; left: 0; right: 0; top: 1080px; text-align: center; animation-name: outro-credits-roll; animation-timing-function: linear; }
.mo-stage.tpl-outro-credits .tt { display: block; margin-bottom: 160px; font-family: "Playfair Display", Georgia, serif; font-size: 140px; font-weight: 700; letter-spacing: .08em; color: var(--a); }
.mo-stage.tpl-outro-credits .rl { display: block; font-size: 42px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: #D4D4D8; }
.mo-stage.tpl-outro-credits .nm { display: block; margin: 12px 0 120px; font-size: 84px; font-weight: 700; color: #fff; }
@keyframes outro-credits-roll { 0% { transform: translateY(0); } 100% { transform: translateY(-2250px); } }

/* outro-cta */
.mo-stage.tpl-outro-cta { background: #07120B; }
.mo-stage.tpl-outro-cta .hd { position: absolute; left: 0; right: 0; top: 230px; text-align: center; }
.mo-stage.tpl-outro-cta .hd span { font-size: 120px; font-weight: 900; color: #fff; animation-name: outro-cta-hd; }
.mo-stage.tpl-outro-cta .bt { position: absolute; left: 0; right: 0; top: 480px; text-align: center; }
.mo-stage.tpl-outro-cta .bt span { display: inline-block; padding: 40px 110px; border-radius: 999px; background: var(--a); font-size: 90px; font-weight: 900; letter-spacing: .04em; color: #03140a; animation-name: outro-cta-bt; }
.mo-stage.tpl-outro-cta .bt span::after { content: ""; position: absolute; }
.mo-stage.tpl-outro-cta .pu { position: absolute; left: 50%; top: 545px; width: 760px; height: 190px; margin-left: -380px; border-radius: 999px; border: 6px solid var(--a); animation-name: outro-cta-pu; }
.mo-stage.tpl-outro-cta .sb { position: absolute; left: 0; right: 0; top: 800px; text-align: center; }
.mo-stage.tpl-outro-cta .sb span { font-size: 56px; font-weight: 600; color: #E4E4E7; animation-name: outro-cta-sb; }
@keyframes outro-cta-hd { 0%,3% { opacity: 0; transform: translateY(40px); } 14%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }
@keyframes outro-cta-bt { 0%,16% { opacity: 0; transform: scale(.5); } 24% { opacity: 1; transform: scale(1.08); } 28% { transform: none; } 50% { transform: scale(1.05); } 56%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }
@keyframes outro-cta-pu { 0%,28% { opacity: 0; transform: scale(1); } 32% { opacity: .9; } 48%,100% { opacity: 0; transform: scale(1.35, 1.6); } }
@keyframes outro-cta-sb { 0%,30% { opacity: 0; } 40%,86% { opacity: 1; } 94%,100% { opacity: 0; } }

/* outro-socials */
.mo-stage.tpl-outro-socials { background: linear-gradient(135deg, #1b1020, #09060b); }
.mo-stage.tpl-outro-socials .hd { position: absolute; left: 240px; top: 160px; }
.mo-stage.tpl-outro-socials .hd span { font-size: 110px; font-weight: 900; color: #fff; animation-name: outro-socials-f; }
.mo-stage.tpl-outro-socials .it { position: absolute; left: 240px; display: flex; align-items: center; gap: 36px; animation-name: outro-socials-s; }
.mo-stage.tpl-outro-socials .i1 { top: 400px; } .mo-stage.tpl-outro-socials .i2 { top: 580px; animation-delay: .2s; } .mo-stage.tpl-outro-socials .i3 { top: 760px; animation-delay: .4s; }
.mo-stage.tpl-outro-socials .it i { width: 110px; height: 110px; border-radius: 30px; background: var(--a); flex: none; }
.mo-stage.tpl-outro-socials .it span { font-size: 68px; font-weight: 700; color: #fff; }
@keyframes outro-socials-f { 0%,3% { opacity: 0; } 12%,86% { opacity: 1; } 94%,100% { opacity: 0; } }
@keyframes outro-socials-s { 0%,10% { opacity: 0; transform: translateX(-120px); } 22%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }

/* outro-subscribe */
.mo-stage.tpl-outro-subscribe { background: linear-gradient(135deg, #15151a, #07070a); }
.mo-stage.tpl-outro-subscribe .thanks { position: absolute; left: 0; right: 0; top: 110px; text-align: center; font-size: 96px; font-weight: 900; color: #fff; animation-name: outro-subscribe-in; }
.mo-stage.tpl-outro-subscribe .v { position: absolute; top: 330px; width: 620px; height: 350px; border-radius: 24px; border: 4px solid #2c2c33; background: linear-gradient(135deg, #24242b, #121216); animation-name: outro-subscribe-card; }
.mo-stage.tpl-outro-subscribe .v::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -40px 0 0 -26px; border-left: 70px solid rgba(255,255,255,.7); border-top: 40px solid transparent; border-bottom: 40px solid transparent; }
.mo-stage.tpl-outro-subscribe .v1 { left: 260px; } .mo-stage.tpl-outro-subscribe .v2 { right: 260px; animation-delay: .2s; }
.mo-stage.tpl-outro-subscribe .sub { position: absolute; left: 50%; top: 780px; width: 520px; margin-left: -260px; padding: 34px 0; border-radius: 999px; text-align: center; font-size: 56px; font-weight: 900; background: var(--a); color: #fff; animation-name: outro-subscribe-sub; }
.mo-stage.tpl-outro-subscribe .cursor { position: absolute; left: 1150px; top: 900px; width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 70px solid #fff; transform: rotate(-30deg); animation-name: outro-subscribe-cursor; }
@keyframes outro-subscribe-in { 0%,3% { opacity: 0; transform: translateY(-40px); } 12%,88% { opacity: 1; transform: none; } 97%,100% { opacity: 0; } }
@keyframes outro-subscribe-card { 0%,8% { opacity: 0; transform: translateY(60px); } 20%,88% { opacity: 1; transform: none; } 97%,100% { opacity: 0; } }
@keyframes outro-subscribe-sub { 0%,20% { opacity: 0; transform: scale(.6); } 28% { opacity: 1; transform: scale(1); } 52% { transform: scale(1); } 55% { transform: scale(.92); background: var(--a); } 58%,88% { transform: scale(1); background: #3a3a40; } 97%,100% { opacity: 0; } }
@keyframes outro-subscribe-cursor { 0%,28% { opacity: 0; transform: translate(300px, 200px) rotate(-30deg); } 36% { opacity: 1; } 52%,80% { opacity: 1; transform: translate(0, 0) rotate(-30deg); } 88%,100% { opacity: 0; } }

/* outro-thanks */
.mo-stage.tpl-outro-thanks { background: #0A0A0B; }
.mo-stage.tpl-outro-thanks .logo { position: absolute; left: 50%; top: 200px; height: 220px; max-width: 600px; translate: -50% 0; object-fit: contain; animation-name: outro-thanks-in; }
.mo-stage.tpl-outro-thanks .br { position: absolute; left: 0; right: 0; top: 250px; text-align: center; }
.mo-stage.tpl-outro-thanks.has-logo .br { display: none; }
.mo-stage.tpl-outro-thanks .br span { font-size: 170px; font-weight: 900; letter-spacing: .06em; color: #fff; animation-name: outro-thanks-in; }
.mo-stage.tpl-outro-thanks .ln { position: absolute; left: 0; right: 0; top: 520px; text-align: center; }
.mo-stage.tpl-outro-thanks .ln span { font-size: 66px; font-weight: 600; color: #E4E4E7; animation-name: outro-thanks-ln; }
.mo-stage.tpl-outro-thanks .ur { position: absolute; left: 0; right: 0; top: 680px; text-align: center; }
.mo-stage.tpl-outro-thanks .ur span { display: inline-block; padding: 22px 60px; border-radius: 999px; background: var(--a); font-size: 60px; font-weight: 800; color: #0A0A0B; animation-name: outro-thanks-ur; }
@keyframes outro-thanks-in { 0%,4% { opacity: 0; transform: scale(.85); } 16%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }
@keyframes outro-thanks-ln { 0%,18% { opacity: 0; transform: translateY(30px); } 30%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }
@keyframes outro-thanks-ur { 0%,30% { opacity: 0; transform: scale(.6); } 38% { opacity: 1; transform: scale(1.06); } 42%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }

/* promo-banner */
.mo-stage.tpl-promo-banner { background: linear-gradient(135deg, #1c1917, #0c0a09); }
.mo-stage.tpl-promo-banner .bn { position: absolute; left: -100px; right: -100px; top: 370px; height: 260px; background: var(--a); transform: rotate(-4deg); animation-name: promo-banner-bn; }
.mo-stage.tpl-promo-banner .hd { position: absolute; left: 0; right: 0; top: 400px; text-align: center; transform: rotate(-4deg); }
.mo-stage.tpl-promo-banner .hd span { font-size: 170px; line-height: 1; font-weight: 900; color: #0c0a09; animation-name: promo-banner-hd; }
.mo-stage.tpl-promo-banner .sb { position: absolute; left: 0; right: 0; top: 720px; text-align: center; }
.mo-stage.tpl-promo-banner .sb span { font-size: 58px; font-weight: 700; color: #fff; animation-name: promo-banner-sb; }
@keyframes promo-banner-bn { 0%,4% { transform: rotate(-4deg) translateX(-2300px); } 16%,86% { transform: rotate(-4deg); } 96%,100% { transform: rotate(-4deg) translateX(2300px); } }
@keyframes promo-banner-hd { 0%,12% { opacity: 0; transform: translateX(-200px); } 22%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; transform: translateX(200px); } }
@keyframes promo-banner-sb { 0%,26% { opacity: 0; transform: translateY(30px); } 36%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }

/* promo-burst */
.mo-stage.tpl-promo-burst { background: #FFF1E6; color: #1A1A1A; }
.mo-stage.tpl-promo-burst .burst { position: absolute; left: 260px; top: 250px; width: 580px; height: 580px; animation-name: promo-burst-pop; }
.mo-stage.tpl-promo-burst .star { position: absolute; inset: 0; background: var(--a); clip-path: polygon(50% 0%, 58% 18%, 75% 7%, 75% 27%, 93% 25%, 83% 42%, 100% 50%, 83% 58%, 93% 75%, 75% 73%, 75% 93%, 58% 82%, 50% 100%, 42% 82%, 25% 93%, 25% 73%, 7% 75%, 17% 58%, 0% 50%, 17% 42%, 7% 25%, 25% 27%, 25% 7%, 42% 18%); animation-name: promo-burst-spin; animation-timing-function: linear; }
.mo-stage.tpl-promo-burst .off { position: absolute; inset: 0; display: grid; place-items: center; font-size: 130px; font-weight: 900; color: #fff; }
.mo-stage.tpl-promo-burst .m-txt { position: absolute; left: 960px; top: 390px; }
.mo-stage.tpl-promo-burst .hd { display: block; font-size: 140px; line-height: 1; font-weight: 900; color: #1A1A1A; animation-name: promo-burst-in; }
.mo-stage.tpl-promo-burst .sb { display: block; margin-top: 24px; font-size: 54px; font-weight: 600; color: #27272A; animation-name: promo-burst-in2; }
@keyframes promo-burst-pop { 0%,4% { transform: scale(0) rotate(-90deg); } 16% { transform: scale(1.12) rotate(10deg); } 20%,86% { transform: none; } 94%,100% { transform: scale(0); } }
@keyframes promo-burst-spin { 0% { transform: rotate(0); } 100% { transform: rotate(60deg); } }
@keyframes promo-burst-in { 0%,14% { opacity: 0; transform: translateX(80px); } 26%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }
@keyframes promo-burst-in2 { 0%,22% { opacity: 0; transform: translateX(80px); } 34%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }

/* promo-countdown */
.mo-stage.tpl-promo-countdown { background: #0A0A0B; }
.mo-stage.tpl-promo-countdown .n { position: absolute; left: 0; right: 0; top: 250px; text-align: center; font-size: 520px; font-weight: 900; line-height: 1; color: #fff; opacity: 0; }
.mo-stage.tpl-promo-countdown .n3 { animation-name: promo-countdown-n3; } .mo-stage.tpl-promo-countdown .n2 { animation-name: promo-countdown-n2; } .mo-stage.tpl-promo-countdown .n1 { animation-name: promo-countdown-n1; }
.mo-stage.tpl-promo-countdown .ring { position: absolute; left: 50%; top: 50%; width: 700px; height: 700px; margin: -350px 0 0 -350px; border-radius: 50%; border: 10px solid var(--a); opacity: 0; animation-name: promo-countdown-ring; }
.mo-stage.tpl-promo-countdown .sale { position: absolute; left: 0; right: 0; top: 330px; text-align: center; opacity: 0; animation-name: promo-countdown-sale; }
.mo-stage.tpl-promo-countdown .sale b { display: block; display: block; font-size: 250px; font-weight: 900; color: var(--a); line-height: 1; }
.mo-stage.tpl-promo-countdown .sale > span { display: block; margin-top: 30px; font-size: 64px; font-weight: 700; color: #fff; letter-spacing: .15em; }
@keyframes promo-countdown-n3 { 0% { opacity: 0; transform: scale(1.6); } 3% { opacity: 1; transform: scale(1); } 15% { opacity: 1; } 17%,100% { opacity: 0; transform: scale(.6); } }
@keyframes promo-countdown-n2 { 0%,17% { opacity: 0; transform: scale(1.6); } 20% { opacity: 1; transform: scale(1); } 32% { opacity: 1; } 34%,100% { opacity: 0; transform: scale(.6); } }
@keyframes promo-countdown-n1 { 0%,34% { opacity: 0; transform: scale(1.6); } 37% { opacity: 1; transform: scale(1); } 49% { opacity: 1; } 51%,100% { opacity: 0; transform: scale(.6); } }
@keyframes promo-countdown-ring { 0%,50% { opacity: 0; transform: scale(.2); } 56% { opacity: 1; transform: scale(1.3); } 66%,100% { opacity: 0; transform: scale(2); } }
@keyframes promo-countdown-sale { 0%,52% { opacity: 0; transform: scale(.5); } 58% { opacity: 1; transform: scale(1.1); } 62%,92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

/* promo-coupon */
.mo-stage.tpl-promo-coupon { background: radial-gradient(circle at 50% 40%, #2a1f47, #0c0914 70%); }
.mo-stage.tpl-promo-coupon .tk { position: absolute; left: 50%; top: 230px; width: 1240px; height: 620px; margin-left: -620px; border-radius: 40px; background: #fff; animation-name: promo-coupon-in; }
.mo-stage.tpl-promo-coupon .tk::before, .mo-stage.tpl-promo-coupon .tk::after { content: ""; position: absolute; top: 50%; width: 110px; height: 110px; margin-top: -55px; border-radius: 50%; background: #120d1f; }
.mo-stage.tpl-promo-coupon .tk::before { left: -55px; } .mo-stage.tpl-promo-coupon .tk::after { right: -55px; }
.mo-stage.tpl-promo-coupon .hd { position: absolute; left: 0; right: 0; top: 80px; text-align: center; }
.mo-stage.tpl-promo-coupon .hd span { font-size: 76px; font-weight: 900; color: #111; }
.mo-stage.tpl-promo-coupon .cd { position: absolute; left: 50%; top: 250px; width: 820px; margin-left: -410px; padding: 36px 0; border: 6px dashed var(--a); border-radius: 24px; text-align: center; }
.mo-stage.tpl-promo-coupon .cd span { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 120px; font-weight: 700; letter-spacing: .08em; color: var(--a); animation-name: promo-coupon-code; }
.mo-stage.tpl-promo-coupon .sb { position: absolute; left: 0; right: 0; top: 500px; text-align: center; }
.mo-stage.tpl-promo-coupon .sb span { font-size: 44px; font-weight: 600; color: #27272A; }
@keyframes promo-coupon-in { 0%,4% { opacity: 0; transform: translateY(120px) rotate(-4deg); } 16%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; transform: translateY(-60px); } }
@keyframes promo-coupon-code { 0%,24% { opacity: 0; filter: blur(16px); letter-spacing: .5em; } 38%,86% { opacity: 1; filter: blur(0); letter-spacing: .08em; } 100% { opacity: 1; } }

/* promo-limited */
.mo-stage.tpl-promo-limited { background: #0B0B0C; }
.mo-stage.tpl-promo-limited .bd { position: absolute; left: 0; right: 0; top: 220px; text-align: center; }
.mo-stage.tpl-promo-limited .bd span { display: inline-block; padding: 16px 44px; border-radius: 14px; background: var(--a); font-size: 60px; font-weight: 900; letter-spacing: .1em; color: #fff; animation-name: promo-limited-flash; animation-timing-function: steps(1, end); }
.mo-stage.tpl-promo-limited .hd { position: absolute; left: 0; right: 0; top: 400px; text-align: center; }
.mo-stage.tpl-promo-limited .hd span { font-size: 150px; line-height: 1.05; font-weight: 900; color: #fff; animation-name: promo-limited-in; }
.mo-stage.tpl-promo-limited .sb { position: absolute; left: 0; right: 0; top: 620px; text-align: center; }
.mo-stage.tpl-promo-limited .sb span { font-size: 54px; font-weight: 600; color: #D4D4D8; animation-name: promo-limited-in; }
.mo-stage.tpl-promo-limited .tm { position: absolute; left: 360px; right: 360px; top: 790px; height: 18px; border-radius: 99px; background: #27272a; overflow: hidden; }
.mo-stage.tpl-promo-limited .tm i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--a); transform-origin: left; animation-name: promo-limited-run; animation-timing-function: linear; }
@keyframes promo-limited-flash { 0%,4% { opacity: 0; } 6%,20% { opacity: 1; } 22% { opacity: .2; } 24%,30% { opacity: 1; } 32% { opacity: .2; } 34%,88% { opacity: 1; } 94%,100% { opacity: 0; } }
@keyframes promo-limited-in { 0%,10% { opacity: 0; transform: scale(.9); } 22%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }
@keyframes promo-limited-run { 0%,14% { transform: scaleX(1); } 88% { transform: scaleX(.04); } 100% { transform: scaleX(.04); } }

/* promo-marquee */
.mo-stage.tpl-promo-marquee { background: #0A0A0B; }
.mo-stage.tpl-promo-marquee .row { position: absolute; left: 0; white-space: nowrap; font-weight: 900; font-size: 240px; line-height: 1; text-transform: uppercase; }
.mo-stage.tpl-promo-marquee .r1 { top: 150px; color: var(--a); animation-name: promo-marquee-l; animation-timing-function: linear; }
.mo-stage.tpl-promo-marquee .r2 { top: 420px; color: transparent; -webkit-text-stroke: 4px #fff; animation-name: promo-marquee-r; animation-timing-function: linear; }
.mo-stage.tpl-promo-marquee .r3 { top: 690px; color: #fff; animation-name: promo-marquee-l; animation-timing-function: linear; }
.mo-stage.tpl-promo-marquee .row span { margin-right: 80px; }
.mo-stage.tpl-promo-marquee .row span::after { content: "\2022"; margin-left: 80px; }
@keyframes promo-marquee-l { 0% { transform: translateX(0); } 100% { transform: translateX(-2400px); } }
@keyframes promo-marquee-r { 0% { transform: translateX(-2400px); } 100% { transform: translateX(0); } }

/* promo-price */
.mo-stage.tpl-promo-price { background: #0B0F0C; }
.mo-stage.tpl-promo-price .it { position: absolute; left: 0; right: 0; top: 190px; text-align: center; }
.mo-stage.tpl-promo-price .it span { font-size: 80px; font-weight: 800; color: #fff; animation-name: promo-price-a; }
.mo-stage.tpl-promo-price .op { position: absolute; left: 0; right: 0; top: 360px; text-align: center; }
.mo-stage.tpl-promo-price .op span { position: relative; font-size: 150px; font-weight: 800; color: #D4D4D8; animation-name: promo-price-a; }
.mo-stage.tpl-promo-price .op span::after { content: ""; position: absolute; left: -10px; right: -10px; top: 52%; height: 12px; background: #EF4444; transform: rotate(-8deg) scaleX(0); transform-origin: left; animation: promo-price-cross var(--dur, 6s) infinite both; }
.mo-stage.tpl-promo-price .np { position: absolute; left: 0; right: 0; top: 520px; text-align: center; }
.mo-stage.tpl-promo-price .np span { font-size: 280px; line-height: 1; font-weight: 900; color: var(--a); animation-name: promo-price-slam; }
.mo-stage.tpl-promo-price .nt { position: absolute; left: 0; right: 0; top: 870px; text-align: center; }
.mo-stage.tpl-promo-price .nt span { display: inline-block; padding: 12px 34px; border-radius: 999px; border: 3px solid var(--a); font-size: 44px; font-weight: 700; color: #fff; animation-name: promo-price-b; }
@keyframes promo-price-a { 0%,3% { opacity: 0; transform: translateY(30px); } 12%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }
@keyframes promo-price-cross { 0%,20% { transform: rotate(-8deg) scaleX(0); } 30%,100% { transform: rotate(-8deg) scaleX(1); } }
@keyframes promo-price-slam { 0%,32% { opacity: 0; transform: scale(3); } 38% { opacity: 1; transform: scale(.9); } 42%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }
@keyframes promo-price-b { 0%,44% { opacity: 0; transform: translateY(30px); } 54%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }

/* promo-punch */
.mo-stage.tpl-promo-punch { background: #0A0A0B; }
.mo-stage.tpl-promo-punch .w { position: absolute; left: 0; right: 0; text-align: center; font-weight: 900; text-transform: uppercase; opacity: 0; }
.mo-stage.tpl-promo-punch .w1 { top: 330px; font-size: 260px; color: var(--a); animation-name: promo-punch-a; }
.mo-stage.tpl-promo-punch .w2 { top: 330px; font-size: 200px; color: #fff; animation-name: promo-punch-b; }
.mo-stage.tpl-promo-punch .m-w3 { top: 380px; font-size: 150px; color: #0A0A0B; animation-name: promo-punch-c; }
.mo-stage.tpl-promo-punch .fill { position: absolute; inset: 0; background: var(--a); transform: scaleY(0); transform-origin: bottom; animation-name: promo-punch-fill; }
@keyframes promo-punch-a { 0% { opacity: 0; transform: scale(2.2); } 6% { opacity: 1; transform: scale(1); } 28% { opacity: 1; transform: scale(1.05); } 32%,100% { opacity: 0; transform: scale(.8); } }
@keyframes promo-punch-b { 0%,32% { opacity: 0; transform: translateY(120px); } 38% { opacity: 1; transform: none; } 60% { opacity: 1; } 64%,100% { opacity: 0; transform: translateY(-120px); } }
@keyframes promo-punch-fill { 0%,62% { transform: scaleY(0); transform-origin: bottom; } 68%,93% { transform: scaleY(1); transform-origin: bottom; } 94% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(0); transform-origin: top; } }
@keyframes promo-punch-c { 0%,66% { opacity: 0; transform: scale(.7); } 72% { opacity: 1; transform: scale(1.08); } 76%,89% { opacity: 1; transform: scale(1); } 92%,100% { opacity: 0; transform: scale(1); } }

/* promo-soon */
.mo-stage.tpl-promo-soon { background: #05070B; }
.mo-stage.tpl-promo-soon .cs { position: absolute; left: 0; right: 0; top: 230px; text-align: center; }
.mo-stage.tpl-promo-soon .cs span { font-size: 64px; font-weight: 700; letter-spacing: .6em; color: var(--a); animation-name: promo-soon-a; }
.mo-stage.tpl-promo-soon .wt { position: absolute; left: 0; right: 0; top: 330px; text-align: center; }
.mo-stage.tpl-promo-soon .wt span { font-size: 110px; font-weight: 900; color: #fff; animation-name: promo-soon-b; }
.mo-stage.tpl-promo-soon .dt { position: absolute; left: 0; right: 0; top: 480px; text-align: center; }
.mo-stage.tpl-promo-soon .dt span { font-family: "Bebas Neue", Oswald, Impact, sans-serif; font-size: 260px; line-height: 1; color: #fff; animation-name: promo-soon-c; }
.mo-stage.tpl-promo-soon .bar { position: absolute; left: 460px; right: 460px; top: 830px; height: 14px; border-radius: 99px; background: #1f2530; overflow: hidden; }
.mo-stage.tpl-promo-soon .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--a); transform-origin: left; animation-name: promo-soon-fill; animation-timing-function: ease-in-out; }
@keyframes promo-soon-a { 0%,4% { opacity: 0; letter-spacing: 1.2em; } 16%,86% { opacity: 1; letter-spacing: .6em; } 94%,100% { opacity: 0; } }
@keyframes promo-soon-b { 0%,12% { opacity: 0; transform: translateY(30px); } 24%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }
@keyframes promo-soon-c { 0%,22% { opacity: 0; transform: scale(.8); } 34%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }
@keyframes promo-soon-fill { 0%,20% { transform: scaleX(0); } 84% { transform: scaleX(.97); } 100% { transform: scaleX(.97); } }

/* quote-classic */
.mo-stage.tpl-quote-classic { background: #0F0E0C; }
.mo-stage.tpl-quote-classic .qm { position: absolute; left: 180px; top: 60px; font-family: "Playfair Display", Georgia, serif; font-size: 520px; line-height: 1; font-weight: 700; color: var(--a); animation-name: quote-classic-qm; }
.mo-stage.tpl-quote-classic .qt { position: absolute; left: 260px; right: 260px; top: 360px; font-family: "Playfair Display", Georgia, serif; font-size: 96px; line-height: 1.2; font-weight: 500; color: #fff; }
.mo-stage.tpl-quote-classic .qt .ch { display: inline-block; animation-name: quote-classic-w; animation-delay: calc(var(--i) * .12s); }
.mo-stage.tpl-quote-classic .who { position: absolute; left: 260px; bottom: 170px; }
.mo-stage.tpl-quote-classic .who span { font-size: 48px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--a); animation-name: quote-classic-who; }
.mo-stage.tpl-quote-classic .who span::before { content: ""; display: inline-block; width: 80px; height: 4px; margin: 0 24px 14px 0; vertical-align: middle; background: var(--a); }
@keyframes quote-classic-qm { 0%,3% { opacity: 0; transform: scale(.5); } 12%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }
@keyframes quote-classic-w { 0%,8% { opacity: 0; transform: translateY(30px); } 16%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }
@keyframes quote-classic-who { 0%,46% { opacity: 0; transform: translateX(-40px); } 56%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }

/* quote-fact */
.mo-stage.tpl-quote-fact { background: #041513; }
.mo-stage.tpl-quote-fact .m-q { position: absolute; left: 0; right: 0; top: 170px; text-align: center; }
.mo-stage.tpl-quote-fact .m-q span { display: inline-block; padding: 20px 50px; border-radius: 999px; background: var(--a); font-size: 70px; font-weight: 900; color: #04201c; animation-name: quote-fact-q; }
.mo-stage.tpl-quote-fact .ft { position: absolute; left: 260px; right: 260px; top: 400px; text-align: center; font-size: 84px; line-height: 1.3; font-weight: 700; color: #fff; transform-origin: top; animation-name: quote-fact-ft; }
@keyframes quote-fact-q { 0%,3% { opacity: 0; transform: scale(.4) rotate(-8deg); } 12% { opacity: 1; transform: scale(1.08); } 16%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }
@keyframes quote-fact-ft { 0%,20% { opacity: 0; transform: perspective(1200px) rotateX(-80deg); } 34%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }

/* quote-highlight */
.mo-stage.tpl-quote-highlight { background: #FFFDF7; color: #111; }
.mo-stage.tpl-quote-highlight .tx { position: absolute; left: 200px; right: 200px; top: 320px; font-size: 120px; line-height: 1.3; font-weight: 800; color: #111; }
.mo-stage.tpl-quote-highlight .a { display: block; animation-name: quote-highlight-a; }
.mo-stage.tpl-quote-highlight .b { position: relative; display: inline-block; z-index: 0; animation-name: quote-highlight-a; }
.mo-stage.tpl-quote-highlight .b::before { content: ""; position: absolute; left: -16px; right: -16px; top: 18%; bottom: 6%; z-index: -1; background: var(--a); border-radius: 8px; transform: scaleX(0) skewX(-6deg); transform-origin: left; animation: quote-highlight-mark var(--dur, 6s) infinite both; }
@keyframes quote-highlight-a { 0%,4% { opacity: 0; transform: translateY(30px); } 14%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }
@keyframes quote-highlight-mark { 0%,24% { transform: scaleX(0) skewX(-6deg); } 40%,86% { transform: scaleX(1) skewX(-6deg); } 94%,100% { transform: scaleX(1) skewX(-6deg); opacity: 0; } }

/* quote-post */
.mo-stage.tpl-quote-post { background: linear-gradient(135deg, #1e293b, #0b1120); }
.mo-stage.tpl-quote-post .pc { position: absolute; left: 50%; top: 200px; width: 1180px; margin-left: -590px; padding: 60px 70px; border-radius: 40px; background: #fff; box-shadow: 0 30px 80px rgba(0,0,0,.4); animation-name: quote-post-in; }
.mo-stage.tpl-quote-post .hd { display: flex; align-items: center; gap: 28px; }
.mo-stage.tpl-quote-post .av { position: relative; width: 120px; height: 120px; border-radius: 50%; background: var(--a); overflow: hidden; flex: none; }
.mo-stage.tpl-quote-post .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mo-stage.tpl-quote-post .av .ini { position: absolute; inset: 0; display: grid; place-items: center; font-size: 58px; font-weight: 900; color: #fff; }
.mo-stage.tpl-quote-post.has-photo .av .ini { display: none; }
.mo-stage.tpl-quote-post .nm { display: block; font-size: 52px; font-weight: 800; color: #111; }
.mo-stage.tpl-quote-post .hn { display: block; font-size: 38px; color: #3F3F46; }
.mo-stage.tpl-quote-post .bd { margin-top: 36px; font-size: 58px; line-height: 1.35; font-weight: 500; color: #111; }
.mo-stage.tpl-quote-post .ft { display: flex; align-items: center; gap: 18px; margin-top: 40px; font-size: 48px; font-weight: 800; color: #111; font-variant-numeric: tabular-nums; }
.mo-stage.tpl-quote-post .ht { width: 60px; height: 60px; color: #ef4444; animation-name: quote-post-heart; }
@keyframes quote-post-in { 0%,4% { opacity: 0; transform: translateY(120px) scale(.94); } 14%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; transform: translateY(-60px); } }
@keyframes quote-post-heart { 0%,30% { transform: scale(1); } 34% { transform: scale(1.5); } 38%,100% { transform: scale(1); } }

/* quote-review */
.mo-stage.tpl-quote-review { background: #FAFAF9; color: #111; }
.mo-stage.tpl-quote-review .st { position: absolute; left: 0; right: 0; top: 190px; text-align: center; font-size: 150px; letter-spacing: 20px; }
.mo-stage.tpl-quote-review .st i { display: inline-block; font-style: normal; color: #E7E5E4; position: relative; }
.mo-stage.tpl-quote-review .st i::after { content: "\2605"; position: absolute; left: 0; top: 0; color: var(--a); transform: scale(0); animation: quote-review-star var(--dur, 6s) infinite both; animation-delay: inherit; }
.mo-stage.tpl-quote-review .st i:nth-child(2) { animation-delay: .12s; } .mo-stage.tpl-quote-review .st i:nth-child(3) { animation-delay: .24s; } .mo-stage.tpl-quote-review .st i:nth-child(4) { animation-delay: .36s; } .mo-stage.tpl-quote-review .st i:nth-child(5) { animation-delay: .48s; }
.mo-stage.tpl-quote-review .rv { position: absolute; left: 240px; right: 240px; top: 440px; text-align: center; font-size: 76px; line-height: 1.3; font-weight: 700; color: #111; animation-name: quote-review-rv; }
.mo-stage.tpl-quote-review .who { position: absolute; left: 0; right: 0; bottom: 150px; text-align: center; }
.mo-stage.tpl-quote-review .who span { font-size: 46px; font-weight: 600; color: #3F3F46; animation-name: quote-review-who; }
@keyframes quote-review-star { 0%,4% { transform: scale(0) rotate(-90deg); } 12% { transform: scale(1.3); } 16%,86% { transform: none; } 94%,100% { transform: scale(0); } }
@keyframes quote-review-rv { 0%,22% { opacity: 0; transform: translateY(30px); } 34%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }
@keyframes quote-review-who { 0%,40% { opacity: 0; } 50%,86% { opacity: 1; } 94%,100% { opacity: 0; } }

/* title-bar */
.mo-stage.tpl-title-bar { background: linear-gradient(160deg, #2b3a4a, #0f1418); }
.mo-stage.tpl-title-bar .scene { position: absolute; inset: 0; background: radial-gradient(circle at 70% 35%, rgba(255,255,255,.12), transparent 45%); }
.mo-stage.tpl-title-bar .bar { position: absolute; left: 120px; top: 780px; width: 14px; height: 170px; background: var(--a); animation-name: title-bar-bar; }
.mo-stage.tpl-title-bar .box { position: absolute; left: 134px; top: 780px; height: 170px; padding: 0 60px 0 40px; display: flex; flex-direction: column; justify-content: center; background: rgba(10,10,11,.88); clip-path: inset(0 100% 0 0); animation-name: title-bar-box; }
.mo-stage.tpl-title-bar .name { font-size: 72px; font-weight: 800; color: #fff; white-space: nowrap; }
.mo-stage.tpl-title-bar .role { font-size: 40px; font-weight: 600; color: var(--a); white-space: nowrap; }
@keyframes title-bar-bar { 0%,5% { transform: scaleY(0); } 15%,80% { transform: scaleY(1); } 92%,100% { transform: scaleY(0); } }
@keyframes title-bar-box { 0%,12% { clip-path: inset(0 100% 0 0); } 28%,75% { clip-path: inset(0 0 0 0); } 88%,100% { clip-path: inset(0 100% 0 0); } }

/* title-callout */
.mo-stage.tpl-title-callout { background: linear-gradient(135deg, #1f2937, #0b0f15); }
.mo-stage.tpl-title-callout .ring { position: absolute; left: 520px; top: 560px; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; border: 8px solid var(--a); animation-name: title-callout-ring; }
.mo-stage.tpl-title-callout .ln { position: absolute; left: 600px; top: 480px; width: 460px; height: 6px; background: var(--a); transform-origin: left; transform: rotate(-24deg) scaleX(0); animation-name: title-callout-ln; }
.mo-stage.tpl-title-callout .box { position: absolute; left: 1030px; top: 250px; padding: 30px 44px; border-radius: 20px; background: var(--a); animation-name: title-callout-box; }
.mo-stage.tpl-title-callout .lb { display: block; font-size: 66px; font-weight: 900; color: #111; }
.mo-stage.tpl-title-callout .sb { display: block; font-size: 36px; font-weight: 600; color: #18181B; }
@keyframes title-callout-ring { 0%,4% { transform: scale(2); opacity: 0; } 14% { transform: scale(.9); opacity: 1; } 18%,84% { transform: none; opacity: 1; } 50% { transform: scale(1.08); } 92%,100% { opacity: 0; } }
@keyframes title-callout-ln { 0%,16% { transform: rotate(-24deg) scaleX(0); } 28%,84% { transform: rotate(-24deg) scaleX(1); } 92%,100% { transform: rotate(-24deg) scaleX(0); } }
@keyframes title-callout-box { 0%,26% { opacity: 0; transform: scale(.7); } 34% { opacity: 1; transform: scale(1.05); } 38%,84% { opacity: 1; transform: none; } 92%,100% { opacity: 0; } }

/* title-chapter */
.mo-stage.tpl-title-chapter { background: #0E0D0B; }
.mo-stage.tpl-title-chapter .l { position: absolute; left: 50%; width: 900px; margin-left: -450px; height: 2px; background: var(--a); transform-origin: center; animation-name: title-chapter-l; }
.mo-stage.tpl-title-chapter .l1 { top: 380px; } .mo-stage.tpl-title-chapter .l2 { top: 700px; }
.mo-stage.tpl-title-chapter .chn { position: absolute; left: 0; right: 0; top: 420px; text-align: center; }
.mo-stage.tpl-title-chapter .chn span { font-size: 40px; font-weight: 700; letter-spacing: .5em; color: var(--a); animation-name: title-chapter-a; }
.mo-stage.tpl-title-chapter .tt { position: absolute; left: 0; right: 0; top: 500px; text-align: center; }
.mo-stage.tpl-title-chapter .tt span { font-family: "Playfair Display", Georgia, serif; font-size: 120px; font-weight: 700; font-style: italic; color: #fff; animation-name: title-chapter-b; }
@keyframes title-chapter-l { 0%,4% { transform: scaleX(0); } 20%,84% { transform: scaleX(1); } 94%,100% { transform: scaleX(0); } }
@keyframes title-chapter-a { 0%,14% { opacity: 0; letter-spacing: 1em; } 28%,84% { opacity: 1; letter-spacing: .5em; } 92%,100% { opacity: 0; } }
@keyframes title-chapter-b { 0%,22% { opacity: 0; filter: blur(14px); } 38%,84% { opacity: 1; filter: blur(0); } 92%,100% { opacity: 0; } }

/* title-follow */
.mo-stage.tpl-title-follow { background: linear-gradient(135deg, #2a2230, #110d14); }
.mo-stage.tpl-title-follow .fcard { position: absolute; right: 120px; top: 110px; display: flex; align-items: center; gap: 26px; padding: 26px 40px 26px 26px; border-radius: 28px; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.4); animation-name: title-follow-in; }
.mo-stage.tpl-title-follow .ic { width: 92px; height: 92px; border-radius: 24px; background: var(--a); display: grid; place-items: center; font-size: 60px; font-weight: 900; color: #fff; animation-name: title-follow-pop; }
.mo-stage.tpl-title-follow .m-txt { display: flex; flex-direction: column; }
.mo-stage.tpl-title-follow .hd { font-size: 52px; font-weight: 800; color: #111; }
.mo-stage.tpl-title-follow .ct { font-size: 34px; font-weight: 600; color: #27272A; }
.mo-stage.tpl-title-follow .m-btn { margin-left: 16px; padding: 18px 30px; border-radius: 999px; background: #111; color: #fff; font-size: 34px; font-weight: 800; animation-name: title-follow-btn; }
@keyframes title-follow-in { 0%,6% { transform: translateX(900px); } 18%,84% { transform: none; } 94%,100% { transform: translateX(900px); } }
@keyframes title-follow-pop { 0%,16% { transform: scale(0); } 24% { transform: scale(1.2); } 28%,100% { transform: none; } }
@keyframes title-follow-btn { 0%,44% { transform: none; background: #111; } 48% { transform: scale(.9); } 52%,84% { transform: none; background: var(--a); } 100% { background: var(--a); } }

/* title-location */
.mo-stage.tpl-title-location { background: #E9E4D8; }
.mo-stage.tpl-title-location .map { position: absolute; left: -10%; top: -10%; width: 120%; height: 120%; transform-origin: 62% 46%; animation-name: title-location-zoom; animation-timing-function: ease-out; }
.mo-stage.tpl-title-location .map svg { width: 100%; height: 100%; display: block; }
.mo-stage.tpl-title-location .pinw { position: absolute; left: 1150px; top: 430px; }
.mo-stage.tpl-title-location .pin { position: absolute; left: -45px; top: -110px; width: 90px; height: 90px; border-radius: 50% 50% 50% 0; background: var(--a); transform: rotate(-45deg); box-shadow: 0 10px 30px rgba(0,0,0,.35); animation-name: title-location-pin; }
.mo-stage.tpl-title-location .pin::after { content: ""; position: absolute; left: 27px; top: 27px; width: 36px; height: 36px; border-radius: 50%; background: #fff; }
.mo-stage.tpl-title-location .rip { position: absolute; left: -60px; top: -20px; width: 120px; height: 40px; border-radius: 50%; border: 5px solid var(--a); animation-name: title-location-rip; }
.mo-stage.tpl-title-location .box { position: absolute; left: 120px; bottom: 120px; padding: 30px 46px 30px 36px; border-left: 12px solid var(--a); border-radius: 0 20px 20px 0; background: rgba(10,10,11,.88); animation-name: title-location-box; }
.mo-stage.tpl-title-location .pl { display: block; font-size: 78px; font-weight: 800; color: #fff; line-height: 1.05; }
.mo-stage.tpl-title-location .wh { display: block; margin-top: 6px; font-size: 40px; font-weight: 600; color: var(--a); }
@keyframes title-location-zoom { 0% { transform: scale(1); } 30%,100% { transform: scale(1.25); } }
@keyframes title-location-pin { 0%,20% { transform: translateY(-600px) rotate(-45deg); opacity: 0; } 30% { transform: translateY(12px) rotate(-45deg); opacity: 1; } 34%,86% { transform: rotate(-45deg); opacity: 1; } 94%,100% { transform: rotate(-45deg) scale(0); opacity: 0; } }
@keyframes title-location-rip { 0%,29% { opacity: 0; transform: scale(.3); } 31% { opacity: 1; } 48%,100% { opacity: 0; transform: scale(2.4); } }
@keyframes title-location-box { 0%,32% { opacity: 0; transform: translateX(-80px); } 42%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }

/* title-news */
.mo-stage.tpl-title-news { background: linear-gradient(160deg, #3a3f48, #16181c); }
.mo-stage.tpl-title-news .m-wrap { position: absolute; left: 0; right: 0; bottom: 110px; animation-name: title-news-in; }
.mo-stage.tpl-title-news .top { display: flex; align-items: stretch; height: 120px; }
.mo-stage.tpl-title-news .lb { display: flex; align-items: center; padding: 0 44px; background: var(--a); font-size: 54px; font-weight: 900; letter-spacing: .06em; color: #fff; }
.mo-stage.tpl-title-news .hl { flex: 1; display: flex; align-items: center; padding: 0 44px; background: #fff; overflow: hidden; }
.mo-stage.tpl-title-news .hl span { font-size: 56px; font-weight: 800; color: #111; }
.mo-stage.tpl-title-news .tk { height: 70px; background: #111; overflow: hidden; white-space: nowrap; }
.mo-stage.tpl-title-news .tk span { display: inline-block; padding-left: 100%; line-height: 70px; font-size: 38px; font-weight: 600; color: #fff; animation-name: title-news-tick; animation-timing-function: linear; }
@keyframes title-news-in { 0%,4% { transform: translateY(260px); } 14%,86% { transform: none; } 96%,100% { transform: translateY(260px); } }
@keyframes title-news-tick { 0%,10% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

/* title-pill */
.mo-stage.tpl-title-pill { background: linear-gradient(135deg, #3b3450, #151320); }
.mo-stage.tpl-title-pill .pill { position: absolute; left: 110px; bottom: 120px; display: flex; align-items: center; gap: 28px; height: 150px; padding: 0 60px 0 18px; border-radius: 999px; background: rgba(255,255,255,.96); box-shadow: 0 20px 60px rgba(0,0,0,.35); transform-origin: left center; animation-name: title-pill-pill; }
.mo-stage.tpl-title-pill .av { position: relative; width: 114px; height: 114px; border-radius: 50%; background: var(--a); overflow: hidden; flex: none; }
.mo-stage.tpl-title-pill .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mo-stage.tpl-title-pill .av .ini { position: absolute; inset: 0; display: grid; place-items: center; font-size: 54px; font-weight: 900; color: #fff; }
.mo-stage.tpl-title-pill.has-photo .av .ini { display: none; }
.mo-stage.tpl-title-pill .m-txt { display: flex; flex-direction: column; animation-name: title-pill-txt; }
.mo-stage.tpl-title-pill .nm { font-size: 60px; font-weight: 800; color: #111; line-height: 1.05; }
.mo-stage.tpl-title-pill .hd { font-size: 40px; font-weight: 600; color: var(--a); filter: brightness(.8); }
@keyframes title-pill-pill { 0%,6% { transform: scale(0); opacity: 0; } 16% { transform: scale(1.04); opacity: 1; } 20%,82% { transform: none; opacity: 1; } 92%,100% { transform: scale(0); opacity: 0; } }
@keyframes title-pill-txt { 0%,14% { opacity: 0; transform: translateX(-30px); } 26%,80% { opacity: 1; transform: none; } 88%,100% { opacity: 0; } }

/* title-underline */
.mo-stage.tpl-title-underline { background: linear-gradient(180deg, #243140 0%, #0d1219 100%); }
.mo-stage.tpl-title-underline .box { position: absolute; left: 140px; bottom: 150px; }
.mo-stage.tpl-title-underline .nm { display: block; font-size: 84px; font-weight: 800; color: #fff; animation-name: title-underline-up; }
.mo-stage.tpl-title-underline .ln { height: 6px; margin: 16px 0 18px; background: var(--a); transform-origin: left; animation-name: title-underline-ln; }
.mo-stage.tpl-title-underline .rl { display: block; font-size: 42px; font-weight: 500; color: #E4E4E7; animation-name: title-underline-up2; }
@keyframes title-underline-ln { 0%,6% { transform: scaleX(0); } 22%,80% { transform: scaleX(1); } 92%,100% { transform: scaleX(0); transform-origin: right; } }
@keyframes title-underline-up { 0%,12% { opacity: 0; transform: translateY(40px); } 24%,82% { opacity: 1; transform: none; } 92%,100% { opacity: 0; } }
@keyframes title-underline-up2 { 0%,18% { opacity: 0; transform: translateY(-20px); } 30%,82% { opacity: 1; transform: none; } 92%,100% { opacity: 0; } }

/* vert-caption */
.mo-stage.tpl-vert-caption { background: linear-gradient(180deg, #262626 0%, #0a0a0a 100%); }
.mo-stage.tpl-vert-caption .cp { position: absolute; left: 70px; right: 70px; top: 1150px; text-align: center; font-size: 110px; line-height: 1.15; font-weight: 900; text-transform: uppercase; color: #fff; -webkit-text-stroke: 10px #000; paint-order: stroke fill; }
.mo-stage.tpl-vert-caption .cp .ch { display: inline-block; animation-name: vert-caption-hi; animation-delay: calc(var(--i) * .5s); animation-timing-function: steps(1, end); animation-fill-mode: none; }
.mo-stage.tpl-vert-caption .ph { position: absolute; left: 50%; top: 280px; width: 720px; height: 720px; margin-left: -360px; border-radius: 40px; background: linear-gradient(135deg, #3f3f46, #18181b); }
.mo-stage.tpl-vert-caption .ph::after { content: "Your video here"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 54px; font-weight: 700; color: #D4D4D8; }
@keyframes vert-caption-hi { 0% { color: var(--a); transform: scale(1.12); } 8.3%,100% { color: #fff; transform: none; } }

/* vert-countdown */
.mo-stage.tpl-vert-countdown { background: #050A0C; }
.mo-stage.tpl-vert-countdown .n { position: absolute; left: 0; right: 0; top: 560px; text-align: center; font-size: 700px; line-height: 1; font-weight: 900; color: #fff; opacity: 0; }
.mo-stage.tpl-vert-countdown .n3 { animation-name: vert-countdown-n3; } .mo-stage.tpl-vert-countdown .n2 { animation-name: vert-countdown-n2; } .mo-stage.tpl-vert-countdown .n1 { animation-name: vert-countdown-n1; }
.mo-stage.tpl-vert-countdown .ring { position: absolute; left: 50%; top: 50%; width: 800px; height: 800px; margin: -400px 0 0 -400px; border-radius: 50%; border: 14px solid var(--a); opacity: 0; animation-name: vert-countdown-ring; }
.mo-stage.tpl-vert-countdown .rv { position: absolute; left: 0; right: 0; top: 780px; text-align: center; opacity: 0; animation-name: vert-countdown-rv; }
.mo-stage.tpl-vert-countdown .rv b { display: block; font-size: 190px; line-height: 1; font-weight: 900; color: var(--a); }
.mo-stage.tpl-vert-countdown .rv > span { display: block; margin-top: 50px; font-size: 76px; font-weight: 700; color: #fff; }
@keyframes vert-countdown-n3 { 0% { opacity: 0; transform: scale(1.6); } 3% { opacity: 1; transform: none; } 15% { opacity: 1; } 17%,100% { opacity: 0; transform: scale(.6); } }
@keyframes vert-countdown-n2 { 0%,17% { opacity: 0; transform: scale(1.6); } 20% { opacity: 1; transform: none; } 32% { opacity: 1; } 34%,100% { opacity: 0; transform: scale(.6); } }
@keyframes vert-countdown-n1 { 0%,34% { opacity: 0; transform: scale(1.6); } 37% { opacity: 1; transform: none; } 49% { opacity: 1; } 51%,100% { opacity: 0; transform: scale(.6); } }
@keyframes vert-countdown-ring { 0%,50% { opacity: 0; transform: scale(.2); } 56% { opacity: 1; transform: scale(1.2); } 66%,100% { opacity: 0; transform: scale(2); } }
@keyframes vert-countdown-rv { 0%,52% { opacity: 0; transform: scale(.5); } 58% { opacity: 1; transform: scale(1.08); } 62%,92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* vert-follow */
.mo-stage.tpl-vert-follow { background: linear-gradient(180deg, #1f0a10 0%, #07030a 100%); }
.mo-stage.tpl-vert-follow .tp { position: absolute; left: 0; right: 0; top: 400px; text-align: center; }
.mo-stage.tpl-vert-follow .tp span { font-size: 130px; font-weight: 900; color: #fff; animation-name: vert-follow-a; }
.mo-stage.tpl-vert-follow .av { position: absolute; left: 50%; top: 680px; width: 380px; height: 380px; margin-left: -190px; border-radius: 50%; border: 10px solid var(--a); background: #2a1117; overflow: hidden; animation-name: vert-follow-av; }
.mo-stage.tpl-vert-follow .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mo-stage.tpl-vert-follow .av .ini { position: absolute; inset: 0; display: grid; place-items: center; font-size: 170px; font-weight: 900; color: var(--a); }
.mo-stage.tpl-vert-follow.has-photo .av .ini { display: none; }
.mo-stage.tpl-vert-follow .hd { position: absolute; left: 0; right: 0; top: 1110px; text-align: center; }
.mo-stage.tpl-vert-follow .hd span { font-size: 80px; font-weight: 800; color: #fff; animation-name: vert-follow-a; }
.mo-stage.tpl-vert-follow .bt { position: absolute; left: 0; right: 0; top: 1300px; text-align: center; }
.mo-stage.tpl-vert-follow .bt span { display: inline-block; padding: 36px 110px; border-radius: 999px; background: var(--a); font-size: 80px; font-weight: 900; color: #fff; animation-name: vert-follow-bt; }
@keyframes vert-follow-a { 0%,4% { opacity: 0; transform: translateY(50px); } 16%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }
@keyframes vert-follow-av { 0%,10% { transform: scale(0); } 20% { transform: scale(1.08); } 24%,86% { transform: none; } 94%,100% { transform: scale(0); } }
@keyframes vert-follow-bt { 0%,26% { opacity: 0; transform: scale(.5); } 34%,50% { opacity: 1; transform: none; } 54% { transform: scale(.9); } 58%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }

/* vert-hook */
.mo-stage.tpl-vert-hook { background: #0A0A0B; }
.mo-stage.tpl-vert-hook .hk { position: absolute; left: 80px; right: 80px; top: 520px; font-size: 128px; line-height: 1.08; font-weight: 900; text-transform: uppercase; color: #fff; }
.mo-stage.tpl-vert-hook .hk .ch { display: inline-block; animation-name: vert-hook-w; animation-delay: calc(var(--i) * .14s); }
.mo-stage.tpl-vert-hook .hk .ch:nth-child(3n) { color: var(--a); }
.mo-stage.tpl-vert-hook .sb { position: absolute; left: 80px; right: 80px; bottom: 380px; text-align: center; }
.mo-stage.tpl-vert-hook .sb span { display: inline-block; padding: 20px 44px; border-radius: 999px; background: var(--a); font-size: 58px; font-weight: 800; color: #fff; animation-name: vert-hook-sb; }
@keyframes vert-hook-w { 0%,4% { opacity: 0; transform: scale(1.8); } 8% { opacity: 1; transform: scale(.94); } 10%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }
@keyframes vert-hook-sb { 0%,46% { opacity: 0; transform: translateY(60px); } 54%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }

/* vert-quote */
.mo-stage.tpl-vert-quote { background: linear-gradient(170deg, #2e1f4d 0%, #0f0a1a 100%); }
.mo-stage.tpl-vert-quote .qm { position: absolute; left: 90px; top: 420px; font-family: "Playfair Display", Georgia, serif; font-size: 360px; line-height: 1; color: var(--a); animation-name: vert-quote-qm; }
.mo-stage.tpl-vert-quote .qt { position: absolute; left: 100px; right: 100px; top: 720px; font-family: "Playfair Display", Georgia, serif; font-size: 100px; line-height: 1.2; font-weight: 500; color: #fff; }
.mo-stage.tpl-vert-quote .qt .ch { display: inline-block; animation-name: vert-quote-w; animation-delay: calc(var(--i) * .13s); }
.mo-stage.tpl-vert-quote .who { position: absolute; left: 100px; bottom: 430px; }
.mo-stage.tpl-vert-quote .who span { font-size: 54px; font-weight: 700; color: var(--a); animation-name: vert-quote-who; }
@keyframes vert-quote-qm { 0%,3% { opacity: 0; transform: translateY(-60px); } 12%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }
@keyframes vert-quote-w { 0%,8% { opacity: 0; filter: blur(10px); } 16%,86% { opacity: 1; filter: blur(0); } 94%,100% { opacity: 0; } }
@keyframes vert-quote-who { 0%,50% { opacity: 0; } 58%,86% { opacity: 1; } 94%,100% { opacity: 0; } }

/* vert-sale */
.mo-stage.tpl-vert-sale { background: var(--a); color: #111; }
.mo-stage.tpl-vert-sale .sp { position: absolute; left: -300px; right: -300px; height: 160px; background: #111; transform: rotate(-12deg); }
.mo-stage.tpl-vert-sale .s1 { top: 260px; animation-name: vert-sale-s1; } .mo-stage.tpl-vert-sale .s2 { bottom: 300px; animation-name: vert-sale-s2; }
.mo-stage.tpl-vert-sale .tp { position: absolute; left: 0; right: 0; top: 285px; text-align: center; transform: rotate(-12deg); }
.mo-stage.tpl-vert-sale .tp span { font-size: 96px; font-weight: 900; letter-spacing: .06em; color: var(--a); }
.mo-stage.tpl-vert-sale .of { position: absolute; left: 0; right: 0; top: 620px; text-align: center; }
.mo-stage.tpl-vert-sale .of span { font-family: "Bebas Neue", Oswald, Impact, sans-serif; font-size: 560px; line-height: 1; color: #111; animation-name: vert-sale-of; }
.mo-stage.tpl-vert-sale .sb { position: absolute; left: 0; right: 0; top: 1200px; text-align: center; }
.mo-stage.tpl-vert-sale .sb span { font-size: 70px; font-weight: 800; color: #111; animation-name: vert-sale-f; }
.mo-stage.tpl-vert-sale .ct { position: absolute; left: 0; right: 0; bottom: 330px; text-align: center; transform: rotate(-12deg); }
.mo-stage.tpl-vert-sale .ct span { font-size: 90px; font-weight: 900; color: var(--a); animation-name: vert-sale-f; }
@keyframes vert-sale-s1 { 0%,3% { transform: rotate(-12deg) translateX(-1800px); } 14%,86% { transform: rotate(-12deg); } 96%,100% { transform: rotate(-12deg) translateX(1800px); } }
@keyframes vert-sale-s2 { 0%,10% { transform: rotate(-12deg) translateX(1800px); } 22%,86% { transform: rotate(-12deg); } 96%,100% { transform: rotate(-12deg) translateX(-1800px); } }
@keyframes vert-sale-of { 0%,14% { opacity: 0; transform: scale(2); } 22% { opacity: 1; transform: scale(.94); } 26%,86% { opacity: 1; transform: none; } 94%,100% { opacity: 0; } }
@keyframes vert-sale-f { 0%,26% { opacity: 0; } 34%,86% { opacity: 1; } 94%,100% { opacity: 0; } }