/* ==========================================================================
   Base Styles
   --------------------------------------------------------------------------
   Global tokens, reset rules, shared motion primitives, and common utilities
   consumed by section-level stylesheets.
   ========================================================================== */

/* Global font asset */
@font-face {
  font-family: "JK JING THAYKHRAW";
  src: url("../../assests/fonts/JK_JING-THAYKHRAW.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Base element reset and typography */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "JK JING THAYKHRAW", sans-serif;
  color: #1c1c1c;
}

html {
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  overflow-x: hidden;
  overflow-x: clip;
  background: #fff;
  font-family: "JK JING THAYKHRAW", sans-serif;
}

:root {
  /* Shared scroll-reveal motion variables */
  --reveal-duration: 780ms;
  --reveal-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --compact-ui: 0.78;
  --compact-type: 0.82;
  --compact-space: 0.86;
  --compact-height: 0.82;
  --section-screen-height: 100vh;
}

@supports (height: 100dvh) {
  :root {
    --section-screen-height: 100dvh;
  }
}

@supports (height: 100svh) {
  @media (max-width: 900px) {
    :root {
      --section-screen-height: 100svh;
    }
  }
}

body.menu-open {
  overflow: hidden;
}

button {
  font: inherit;
}

img {
  max-width: 100%;
  height: auto;
}


/* Shared section background containers */
.bg-frame {
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

@supports (width: 100dvw) {
  .bg-frame {
    width: 100dvw;
    min-width: 100dvw;
    max-width: 100dvw;
    margin-inline: calc(50% - 50dvw);
  }
}

.bg-page-1 {
  background-image: url("../../assests/main_web/page1/bg_page.jpg");
  overflow: visible;
  z-index: 3;
  height: clamp(
    calc(520px * var(--compact-height)),
    calc(56vw * var(--compact-height)),
    calc(960px * var(--compact-height))
  );
}

.bg-page-2 {
  background-image: url("../../assests/main_web/page2/bg_page.jpg");
  z-index: 2;
  height: clamp(
    calc(540px * var(--compact-height)),
    calc(58vw * var(--compact-height)),
    calc(980px * var(--compact-height))
  );
}

.bg-page-3 {
  background-image: url("../../assests/main_web/page3/bg_page.jpg");
  z-index: 1;
  height: clamp(
    calc(560px * var(--compact-height)),
    calc(60vw * var(--compact-height)),
    calc(1000px * var(--compact-height))
  );
}

/* Generic image-button primitive */
.image-button {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.image-button img {
  display: block;
  width: 100%;
  height: auto;
}

.section-content {
  width: min(100vw, 960px);
  height: 100%;
  margin: 0 auto;
  padding-top: 26px;
  text-align: center;
  position: relative;
}

.section-title {
  margin: 0;
  font-size: clamp(72px, 7.4vw, 102px);
  font-weight: 900;
  line-height: 0.92;
  color: #111;
  text-shadow: 3px 3px 0 #fff;
}

.section-title span {
  color: #ffb320;
}

/* Scroll reveal utility classes */
.reveal-on-scroll {
  --reveal-delay: 0ms;
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.985);
  transition:
    opacity var(--reveal-duration) var(--reveal-ease) var(--reveal-delay),
    transform var(--reveal-duration) var(--reveal-ease) var(--reveal-delay);
  will-change: opacity, transform;
}

.reveal-on-scroll.reveal-left {
  transform: translate3d(-34px, 0, 0);
}

.reveal-on-scroll.reveal-right {
  transform: translate3d(34px, 0, 0);
}

.reveal-on-scroll.reveal-pop {
  transform: translate3d(0, 18px, 0) scale(0.94);
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.image-button,
.header-nav-button,
.char-tab-image {
  transition: transform 220ms ease, filter 220ms ease, opacity 220ms ease;
}

.image-button:hover,
.header-nav-button:hover,
.char-tab-image:hover {
  transform: translateY(-3px) scale(1.01);
  filter: drop-shadow(0 10px 18px rgba(19, 27, 66, 0.18));
}

.image-button:active,
.header-nav-button:active,
.char-tab-image:active {
  transform: translateY(-1px) scale(0.99);
}

.play-btn {
  animation: play-btn-pulse 3.2s ease-in-out infinite;
}

.char-tab-image.is-active img {
  animation: tab-float 2.4s ease-in-out infinite;
  transform-origin: center bottom;
}

/* Shared button animation keyframes */
@keyframes play-btn-pulse {
  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
  }
  50% {
    filter: drop-shadow(0 8px 18px rgba(30, 58, 138, 0.26));
  }
}

@keyframes tab-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

/* Large desktop adjustments */
@media (min-width: 1600px) {
  .bg-page-1 {
    height: calc(960px * var(--compact-height));
  }

  .bg-page-2 {
    height: calc(980px * var(--compact-height));
  }

  .bg-page-3 {
    height: calc(1000px * var(--compact-height));
  }

  .section-content {
    width: min(96vw, 1760px);
  }
}

/* Mid-to-large desktop adjustments */
@media (max-width: 1599px) and (min-width: 1201px) {
  .bg-page-1 {
    height: clamp(
      calc(700px * var(--compact-height)),
      calc(57vw * var(--compact-height)),
      calc(920px * var(--compact-height))
    );
  }

  .bg-page-2 {
    height: clamp(
      calc(720px * var(--compact-height)),
      calc(58vw * var(--compact-height)),
      calc(940px * var(--compact-height))
    );
  }

  .bg-page-3 {
    height: clamp(
      calc(730px * var(--compact-height)),
      calc(59vw * var(--compact-height)),
      calc(960px * var(--compact-height))
    );
  }
}

/* Tablet adjustments */
@media (max-width: 1200px) {
  .bg-page-1 {
    height: auto;
    min-height: clamp(
      calc(560px * var(--compact-height)),
      calc(78vw * var(--compact-height)),
      calc(760px * var(--compact-height))
    );
  }

  .bg-page-2 {
    height: auto;
    min-height: clamp(
      calc(580px * var(--compact-height)),
      calc(82vw * var(--compact-height)),
      calc(800px * var(--compact-height))
    );
  }

  .bg-page-3 {
    height: auto;
    min-height: clamp(
      calc(600px * var(--compact-height)),
      calc(86vw * var(--compact-height)),
      calc(840px * var(--compact-height))
    );
  }

  .section-content {
    width: min(96vw, 1140px);
    height: auto;
  }
}

/* Mobile adjustments */
@media (max-width: 900px) {
  .section-content {
    width: min(96vw, 960px);
    height: auto;
  }
}

/* Viewport-based section sizing */
.bg-page-1,
.bg-page-2,
.bg-page-3 {
  height: var(--section-screen-height);
  min-height: var(--section-screen-height);
}

/* Tighten compact tokens on short screens so content fits strict full-height sections */
@media (max-height: 900px) {
  :root {
    --compact-ui: 0.74;
    --compact-type: 0.78;
    --compact-space: 0.82;
  }
}

@media (max-height: 780px) {
  :root {
    --compact-ui: 0.70;
    --compact-type: 0.74;
    --compact-space: 0.78;
  }
}

@media (max-height: 680px) {
  :root {
    --compact-ui: 0.64;
    --compact-type: 0.68;
    --compact-space: 0.72;
  }
}

/* Section snap classes toggled by JS */
html.section-snap-enabled {
  scroll-behavior: auto;
}

body.section-snap-enabled {
  overflow-y: auto;
}

/* Reduced motion accessibility support */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .play-btn,
  .char-tab-image.is-active img {
    animation: none !important;
  }

  .image-button,
  .header-nav-button,
  .char-tab-image {
    transition: none !important;
  }
}