/* ==========================================================================
   Monsters Origin landing page — base + PC layout
   Layout unit: every element declares design coordinates (--x, --y, --w, --h)
   in PSD pixels; `.layer` converts them with --k.
   PC:     --k = stage scale (design 1920×1000, centered in each 100vh frame)
   Mobile: --k = 100vw / 768 (see responsive.css)
   ========================================================================== */

/* ---------- Reset ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
}

body {
	background: #0b1430;
	color: #333;
	font-family: Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

html[lang="th"] body {
	font-family: "Noto Sans Thai", "Leelawadee UI", "Leelawadee", Tahoma, "Sukhumvit Set", sans-serif;
}

img {
	display: block;
	max-width: none;
	border: 0;
}

h1,
h2,
p {
	margin: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

/* ---------- Utilities ---------- */
.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

html.i18n-pending #content {
	visibility: hidden;
}

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.show-mb,
.show-mb-block {
	display: none;
}

a:focus-visible,
button:focus-visible {
	outline: 3px solid #ffd54a;
	outline-offset: 4px;
	border-radius: 6px;
}

/* ---------- Scale variables ---------- */
:root {
	--s: 1;
	--u: calc(100vw / 768);
	--k: calc(var(--s) * 1px);
	--ox: calc((100% - 1920 * var(--k)) / 2);
	--oy: calc((100% - 1000 * var(--k)) / 2);
}

/* ---------- Full-frame scrolling (PC, set by JS) ---------- */
html.is-pc-mode,
html.is-pc-mode body {
	height: 100%;
	overflow: hidden;
}

html.is-pc-mode #fullpage {
	transition: transform 0.7s ease;
	will-change: transform;
}

html.is-pc-mode #fullpage.no-transition {
	transition: none;
}

/* ---------- Sections ---------- */
.section {
	position: relative;
	height: 100vh;
	min-height: 500px;
	overflow: hidden;
	background-color: #0b1430;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.frame1 {
	background-image: url(../images/frame1/bg.webp);
}

.frame2 {
	background-image: url(../images/frame2/bg.webp);
}

.frame3 {
	background-image: url(../images/frame3/bg.webp);
}

.frame4 {
	background-image: url(../images/frame4/bg.webp);
}

.fv-bg {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.6s ease;
	pointer-events: none;
}

.fv-bg.is-playing {
	opacity: 1;
}

.stage {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.stage a,
.stage button {
	pointer-events: auto;
}

/* Generic positioned element: design coordinates → screen */
.layer {
	position: absolute;
	left: calc(var(--ox) + var(--x, 0) * var(--k));
	top: calc(var(--oy) + var(--y, 0) * var(--k));
	width: calc(var(--w, 0) * var(--k));
	height: auto;
}

.layer--box {
	height: calc(var(--h, 0) * var(--k));
}

/* Anchored to the top-left corner of the viewport instead of the stage */
.layer--tl {
	left: calc(var(--x, 0) * var(--k));
	top: calc(var(--y, 0) * var(--k));
}

a.layer img,
button.layer img {
	width: 100%;
	height: auto;
}

/* ---------- Hover buttons (KyTichAtlans convention) ---------- */
.button_hover_style {
	display: block;
	transition: transform 0.25s ease, filter 0.25s ease;
}

.button_hover_style .hover {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.button_hover_style:hover .hover,
.button_hover_style:focus-visible .hover {
	opacity: 1;
}

.social-link:hover,
.social-link:focus-visible {
	transform: translateY(-2px);
	filter: brightness(1.15);
}

.fv-logo:hover,
.fv-logo:focus-visible {
	transform: scale(1.06);
	filter: brightness(1.12) drop-shadow(0 0 calc(14 * var(--k)) rgba(255, 214, 102, 0.85));
}

.fv-logo:active {
	transform: scale(0.98);
}

.arrow {
	transition: transform 0.2s ease, filter 0.2s ease;
}

.arrow:hover,
.arrow:focus-visible {
	transform: scale(1.06);
	filter: brightness(1.12);
}

.arrow:active {
	transform: scale(0.96);
}

/* ---------- Entrance animations (played when the section becomes active) ---------- */
@keyframes fadeIn {
	from {
		opacity: 0;
	}
}

@keyframes fadeInTop {
	from {
		opacity: 0;
		transform: translateY(-40px);
	}
}

/* Explicit "from": the base style of a left section is already opacity 0 */
@keyframes fadeOutTop {
	from {
		opacity: 1;
		transform: none;
	}

	to {
		opacity: 0;
		transform: translateY(-40px);
	}
}

.js .section:not(.is-active) .fadeIn,
.js .section:not(.is-active) .fadeInTop {
	opacity: 0;
}

/* .is-left = the section was active and has just been left */
.js .section.is-left .fadeIn,
.js .section.is-left .fadeInTop {
	animation: fadeOutTop 1.2s cubic-bezier(0.4, 0, 0.6, 1) both;
}

/* PC: texts leave while the page slides (0.7s), so they must clear the frame within it */
html.is-pc-mode .section.is-left .fadeIn,
html.is-pc-mode .section.is-left .fadeInTop {
	animation-duration: 0.5s;
}

.section.is-active .fadeIn {
	animation: fadeIn 1s ease-out both;
}

.section.is-active .fadeInTop {
	animation: fadeInTop 1s ease-out both;
}

.section.is-active .delay1 {
	animation-delay: 0.2s;
}

.section.is-active .delay2 {
	animation-delay: 0.4s;
}

/* ==========================================================================
   Frame 1
   ========================================================================== */
.fv-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	z-index: 2;
}

.social-link--fanpage {
	--x: 43;
	--y: 47;
	--w: 128;
}

.social-link--group {
	--x: 206;
	--y: 50;
	--w: 117;
}

.social-link--discord {
	--x: 359;
	--y: 50;
	--w: 126;
}

.fv-logo {
	--y: 29;
	--w: 278;
	left: auto;
	right: calc(29 * var(--k));
}



.slogan {
	--x: 566;
	--y: 544;
	--w: 785;
}

html[lang="th"] .slogan {
	--x: 583;
	--y: 538;
	--w: 752;
}


.slogan-fx {
	--x: 536;
	--y: 486;
	--w: 798;
	mix-blend-mode: screen;
}

.gift-code {
	--x: 340;
	--y: 796;
	--w: 200;
}

.gift-bounce {
	transform-origin: 50% 80%;
	animation: giftBob 1.8s ease-in-out infinite;
}

.gift-code:hover .gift-bounce,
.gift-code:focus-visible .gift-bounce {
	filter: brightness(1.12);
}

@keyframes giftBob {
	0%,
	100% {
		transform: translateY(0) rotate(0);
	}

	25% {
		transform: translateY(-10px) rotate(-6deg);
	}

	50% {
		transform: translateY(0) rotate(0);
	}

	75% {
		transform: translateY(-6px) rotate(6deg);
	}
}

.btn-dl {
	--y: 857;
	--w: 239;
}

.btn-dl--ios {
	--x: 544;
}

.btn-dl--android {
	--x: 841;
}

.btn-dl--apk {
	--x: 1138;
}

.btn-dl:hover,
.btn-dl:focus-visible {
	transform: translateY(-3px);
}

/* ==========================================================================
   Frame 2 — gameplay slider
   ========================================================================== */
.tit-2 {
	--x: 479;
	--y: 72;
	--w: 963;
}

html[lang="th"] .tit-2 {
	--x: 568;
	--y: 79;
	--w: 785;
}

.gameplay,
.gameplay-items,
.banner-slider {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.gameplay-item--catch .gameplay-word {
	--x: 344;
	--y: 354;
	--w: 1227;
}

.gameplay-item--catch .gameplay-char {
	--x: 466;
	--y: 253;
	--w: 1003;
}

.gameplay-item--grow .gameplay-word {
	--x: 313;
	--y: 354;
	--w: 1291;
}

.gameplay-item--grow .gameplay-char {
	--x: 596;
	--y: 372;
	--w: 830;
}

.gameplay-item--fight .gameplay-word {
	--x: 377;
	--y: 354;
	--w: 1165;
}

.gameplay-item--fight .gameplay-char {
	--x: 382;
	--y: 346;
	--w: 1189;
}

.gameplay-item--win .gameplay-word {
	--x: 540;
	--y: 359;
	--w: 839;
}

.gameplay-item--win .gameplay-char {
	--x: 572;
	--y: 306;
	--w: 890;
}

.gameplay-prev {
	--x: 336;
	--y: 780;
	--w: 102;
}

.gameplay-next {
	--x: 1483;
	--y: 780;
	--w: 102;
}

/* States: hidden items wait off to the side of the travel direction,
   `.is-current` slides in (character first, word 0.5s later),
   `.is-leaving` is pushed inward and fades out. */
.gameplay-item {
	visibility: hidden;
}

.gameplay-item.is-current,
.gameplay-item.is-leaving {
	visibility: visible;
}

.gameplay-char,
.gameplay-word {
	opacity: 0;
	transform: translateX(60%);
}

[data-dir="backward"] .gameplay-char,
[data-dir="backward"] .gameplay-word {
	transform: translateX(-60%);
}

.gameplay-item.is-current .gameplay-char,
.gameplay-item.is-current .gameplay-word {
	opacity: 1;
	transform: none;
}

.gameplay-item.is-current .gameplay-char {
	transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease-out;
}

.gameplay-item.is-current .gameplay-word {
	transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s, opacity 0.6s ease-out 0.5s;
}

.gameplay-item.is-leaving .gameplay-char,
.gameplay-item.is-leaving .gameplay-word {
	opacity: 0;
	transform: translateX(-35%) scale(0.85);
	transition: transform 0.6s ease-in, opacity 0.6s ease-in;
}

[data-dir="backward"] .gameplay-item.is-leaving .gameplay-char,
[data-dir="backward"] .gameplay-item.is-leaving .gameplay-word {
	transform: translateX(35%) scale(0.85);
}

/* Back-to-back changes (set by main.js): the word enters with the character, no 0.5s wait */
.gameplay.is-rapid .gameplay-item.is-current .gameplay-word {
	transition-delay: 0s;
}

/* ==========================================================================
   Frame 3 — banner slider
   ========================================================================== */
.tit-3 {
	--x: 499;
	--y: 82;
	--w: 923;
}

html[lang="th"] .tit-3 {
	--x: 568;
	--y: 90;
	--w: 785;
}

.gameboy {
	--x: 0;
	--y: 219;
	--w: 1176;
}

/* Matches the transparent screen of phone.webp (x 52–993, y 16–473 inside the frame) */
.banner-view {
	--x: 494;
	--y: 316;
	--w: 941;
	--h: 457;
	--radius: 30;
	border-radius: calc(var(--radius) * var(--k));
	overflow: hidden;
	touch-action: pan-y;
	pointer-events: auto;
}

.banner-track {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform 0.6s cubic-bezier(0.45, 0, 0.2, 1);
}

.banner-slide {
	flex: 0 0 100%;
	height: 100%;
}

.banner-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.phone {
	--x: 442;
	--y: 300;
	--w: 1052;
}

.flare {
	mix-blend-mode: screen;
}

.flare--1 {
	--x: 303;
	--y: -142;
	--w: 951;
}

.flare--2 {
	--x: 400;
	--y: 318;
	--w: 951;
}

.frame3-char {
	--x: 1424;
	--y: 86;
	--w: 377;
}

.frame3-pkm {
	--x: 97;
	--y: 480;
	--w: 345;
}

.banner-prev {
	--x: 433;
	--y: 487;
	--w: 102;
}

.banner-next {
	--x: 1385;
	--y: 487;
	--w: 102;
}

/* Five equal slots so the larger (glowing) active dot keeps every dot centred */
.banner-dots {
	--x: 680;
	--y: 797;
	--w: 560;
	--h: 100;
	--dot-w: 60;
	--dot-h: 58;
	--dot-active-w: 99;
	--dot-active-h: 100;
	display: flex;
	pointer-events: auto;
}

.banner-dot {
	flex: 1 1 0;
	height: 100%;
	background: url(../images/common/dot.webp) center / calc(var(--dot-w) * var(--k)) calc(var(--dot-h) * var(--k)) no-repeat;
	transition: transform 0.2s ease;
}

.banner-dot:hover {
	transform: scale(1.08);
}

.banner-dot.is-active {
	background-image: url(../images/common/dot-active.webp);
	background-size: calc(var(--dot-active-w) * var(--k)) calc(var(--dot-active-h) * var(--k));
}

/* ==========================================================================
   Frame 4 — letter
   ========================================================================== */
.letter-glow {
	--x: 280;
	--y: 128;
	--w: 1409;
	opacity: 0.79;
	mix-blend-mode: color-dodge;
}

.letter {
	--x: 429;
	--y: 329;
	--w: 1063;
}

html[lang="th"] .letter {
	--x: 423;
	--y: 319;
	--w: 1074;
}

@keyframes letterIn {
	from {
		opacity: 0;
		transform: translateY(calc(320 * var(--k)));
	}

	30% {
		opacity: 1;
	}
}

@keyframes letterOut {
	from {
		opacity: 1;
		transform: none;
	}

	to {
		opacity: 0;
		transform: translateY(calc(320 * var(--k)));
	}
}

.js .section:not(.is-active) .letter[data-reveal] {
	opacity: 0;
}

.js .section.is-active .letter[data-reveal] {
	animation: letterIn 4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.js .section.is-left .letter[data-reveal] {
	animation: letterOut 1.6s cubic-bezier(0.4, 0, 0.6, 1) both;
}

html.is-pc-mode .section.is-left .letter[data-reveal] {
	animation-duration: 0.8s;
}

/* ==========================================================================
   Footer
   ========================================================================== */
#footer.section--auto {
	height: auto;
	min-height: 0;
	background: #fff;
}

.footer-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(23 * var(--k));
	height: calc(264 * var(--k));
	padding: 0 calc(24 * var(--k));
}

.footer-icon {
	flex: 0 0 auto;
	width: calc(103 * var(--k));
	height: auto;
	border-radius: 18%;
}

.footer-text {
	font-size: max(12px, calc(22 * var(--k)));
	line-height: 1.2;
	color: #333;
}

.lang-switch {
	display: flex;
	gap: calc(16 * var(--k));
	margin-top: calc(10 * var(--k));
	font-size: max(12px, calc(20 * var(--k)));
	line-height: 1.2;
}

.lang-switch a {
	padding: 4px 0;
	color: #333;
	text-decoration: underline;
}

html[lang="en"] .lang-switch [hreflang="en"],
html[lang="th"] .lang-switch [hreflang="th"] {
	font-weight: 700;
	text-decoration: none;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html.is-pc-mode #fullpage {
		transition-duration: 0.3s;
	}

	.gift-bounce,
	.section.is-active .fadeIn,
	.section.is-active .fadeInTop,
	.js .section.is-left .fadeIn,
	.js .section.is-left .fadeInTop {
		animation: none;
	}

	.js .section:not(.is-active) .fadeIn,
	.js .section:not(.is-active) .fadeInTop {
		opacity: 1;
	}

	.gameplay-char,
	.gameplay-word,
	[data-dir="backward"] .gameplay-char,
	[data-dir="backward"] .gameplay-word,
	.gameplay-item.is-leaving .gameplay-char,
	.gameplay-item.is-leaving .gameplay-word,
	[data-dir="backward"] .gameplay-item.is-leaving .gameplay-char,
	[data-dir="backward"] .gameplay-item.is-leaving .gameplay-word {
		transform: none;
	}

	.gameplay-item.is-current .gameplay-char,
	.gameplay-item.is-current .gameplay-word,
	.gameplay-item.is-leaving .gameplay-char,
	.gameplay-item.is-leaving .gameplay-word {
		transition: opacity 0.25s linear;
	}

	.banner-track {
		transition-duration: 0.05s;
	}

	.js .section:not(.is-active) .letter[data-reveal],
	.js .section.is-active .letter[data-reveal],
	.js .section.is-left .letter[data-reveal] {
		opacity: 1;
		animation: none;
	}
}