/* OMT V38 — client-ready polish, showcase clarity, product unlock console and mobile finishing */

/* ── Prevent OS-level bounce / rubber-band from fighting ScrollSmoother ── */
html,
body {
  overscroll-behavior: none;
}

/* ── How to Play intro paragraph — reduced size ───────────── */
.omt-intro-statement {
  font-size: clamp(16px, 1.5vw, 22px) !important;
  line-height: 1.6 !important;
}
@media (max-width: 767px) {
  .omt-intro-statement {
    font-size: clamp(14px, 4.2vw, 18px) !important;
    line-height: 1.55 !important;
  }
}

/* ── Hero box sequence ─────────────────────────────────────── */
.mxd-hero-02__box {
  position: absolute;
  top: 50%;
  left: 50%;
  /* centering handed to GSAP (xPercent/yPercent) — no CSS transform */
  z-index: 3;
  width: clamp(700px, 88vw, 1400px);
  pointer-events: none;
  will-change: transform, opacity;
  display: grid;
}
.mxd-hero-02__box img {
  grid-area: 1 / 1;          /* stack closed and open on the same cell */
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 36px 72px rgba(0,0,0,.70));
  backface-visibility: hidden;
}
.mxd-hero-02__box .omt-box--open {
  opacity: 0.35;
}
@media (max-width: 767px) {
  .mxd-hero-02__box { width: clamp(340px, 92vw, 560px); }
}

/* Logo entrance glow */
@keyframes omt-logo-glow-in {
  0%   { filter: drop-shadow(0 0 0px rgba(248,200,0,0)) drop-shadow(0 20px 44px rgba(0,0,0,.38)); }
  35%  { filter: drop-shadow(0 0 40px rgba(248,200,0,.90)) drop-shadow(0 0 80px rgba(248,200,0,.45)) drop-shadow(0 20px 44px rgba(0,0,0,.38)); }
  70%  { filter: drop-shadow(0 0 22px rgba(248,200,0,.55)) drop-shadow(0 20px 44px rgba(0,0,0,.38)); }
  100% { filter: drop-shadow(0 0 0px rgba(248,200,0,0)) drop-shadow(0 20px 44px rgba(0,0,0,.38)); }
}
.omt-site-loader.omt-site-loader--simple .omt-site-loader__logo {
  animation: omt-logo-glow-in 1.8s cubic-bezier(.22,.6,.36,1) 0.3s both;
}
:root{
  --omt38-yellow:#f8c800;
  --omt38-black:#02030a;
  --omt38-navy:#050021;
  --omt38-blue:#0f00d4;
  --omt38-line:rgba(93,101,255,.34);
  --omt38-cyan:#50c7ff;
  --omt38-green:#45f0a0;
}

/* Final hero gateway: use the supplied artwork cleanly with no dimming layer on the image itself. */
.mxd-hero-02__cover-img::before,
.mxd-hero-02__cover-img::after{display:none!important;content:none!important}
.mxd-hero-02__cover-img img{
  opacity:1!important;
  filter:none!important;
  object-fit:cover!important;
  object-position:center center!important;
}

/* Studio Focus — crystal-clear polish. No scan lines or vertical edge stripes. */
#omt-home-content .studio-showcase-thumb{
  overflow:hidden!important;
  background:#02040d!important;
  box-shadow:0 14px 42px rgba(0,0,0,.22)!important;
}
#omt-home-content .studio-showcase-thumb::after{display:none!important;content:none!important}
#omt-home-content .studio-showcase-thumb::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  opacity:1!important;
  background:
    radial-gradient(circle at 18% 10%,rgba(103,176,255,.16),transparent 34%),
    linear-gradient(180deg,rgba(3,5,20,.05) 0%,rgba(3,7,28,.015) 50%,rgba(0,2,14,.16) 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(124,153,255,.09)!important;
  transition:background .42s ease,box-shadow .42s ease,opacity .42s ease!important;
}
#omt-home-content .studio-showcase-thumb img{
  filter:brightness(1.045) saturate(1.08) contrast(1.025)!important;
  transition:transform .72s cubic-bezier(.16,.78,.2,1),filter .48s ease!important;
}
#omt-home-content .studio-showcase-thumb:hover::before{
  opacity:.70!important;
  background:
    radial-gradient(circle at 38% 18%,rgba(255,255,255,.14),transparent 31%),
    radial-gradient(circle at 78% 75%,rgba(20,38,255,.11),transparent 34%),
    linear-gradient(180deg,rgba(3,5,20,.01),rgba(0,2,14,.08))!important;
  box-shadow:inset 0 0 0 1px rgba(248,200,0,.18),0 0 30px rgba(31,49,255,.06)!important;
}
#omt-home-content .studio-showcase-thumb:hover img{
  transform:scale(1.075)!important;
  filter:brightness(1.09) saturate(1.12) contrast(1.035)!important;
}

/* Five OMT verbs — four units per track prevents the moving field from running out of copy. */
#omt-moving-text .wrapper-text{
  width:max-content!important;
  min-width:max-content!important;
  flex-wrap:nowrap!important;
}
#omt-moving-text .wrapper-text>span{
  flex:0 0 auto!important;
  padding-right:.30em!important;
  white-space:nowrap!important;
}

/* Remove the colored lead-in below the preceding section: the product artwork begins at the seam. */
.design-choose-area.design-choose-2-style{
  margin-bottom:0!important;
  padding-bottom:0!important;
}
#omt-single-showcase{
  margin-top:0!important;
  padding-top:0!important;
  overflow:hidden!important;
}
#omt-single-showcase .tp-showcase-slider-main,
#omt-single-showcase .omt-single-showcase,
#omt-single-showcase .swiper-wrapper,
#omt-single-showcase .swiper-slide{
  margin-top:0!important;
  padding-top:0!important;
}
#omt-single-showcase .tp-showcase-slider-bg{
  inset:0!important;
  min-height:100svh!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
}
#omt-single-showcase .tp-showcase-slider-bg::after{
  opacity:1!important;
  background:
    linear-gradient(90deg,rgba(2,2,10,.83) 0%,rgba(3,3,18,.58) 32%,rgba(3,3,18,.18) 58%,rgba(2,2,10,.08) 100%),
    linear-gradient(180deg,rgba(2,2,10,.16),transparent 45%,rgba(2,2,10,.18))!important;
}
#omt-single-showcase .tp-showcase-slider-content{
  max-width:min(710px,86vw)!important;
}
#omt-single-showcase .omt-product-launch-copy{
  max-width:650px!important;
  color:rgba(255,255,255,.86)!important;
}

/* Custom community unlock console — integrated count, segmented rail and OMT market language. */
.omt-unlock-console{
  position:relative;
  width:min(650px,84vw);
  margin:28px 0 30px;
  padding:18px 20px 17px;
  overflow:hidden;
  border:1px solid rgba(90,78,232,.62);
  border-top:4px solid #251b94;
  background:
    radial-gradient(circle at 92% 120%,rgba(15,0,212,.45),transparent 45%),
    linear-gradient(135deg,rgba(3,3,13,.96),rgba(9,7,48,.95));
  box-shadow:0 22px 52px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.025);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
}
.omt-unlock-console::before{
  content:"";
  position:absolute;
  width:105px;height:105px;right:-54px;top:-55px;
  border:1px solid rgba(248,200,0,.20);
  transform:rotate(45deg);
  pointer-events:none;
}
.omt-unlock-console__head{display:flex;align-items:center;justify-content:space-between;gap:22px;position:relative;z-index:1}
.omt-unlock-console__signal{display:grid;grid-template-columns:9px auto;grid-template-rows:auto auto;column-gap:9px;row-gap:5px;align-items:center}
.omt-unlock-console__signal i{grid-row:1/3;width:8px;height:8px;border-radius:50%;background:var(--omt38-green);box-shadow:0 0 14px rgba(69,240,160,.72);animation:omt38Signal 1.4s ease-in-out infinite}
.omt-unlock-console__signal span{color:#fff;font:700 11px/1 Inter,sans-serif;letter-spacing:.16em}
.omt-unlock-console__signal small{color:rgba(255,255,255,.42);font:600 8px/1 Inter,sans-serif;letter-spacing:.17em}
.omt-unlock-console__count{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.omt-unlock-console__count strong{color:var(--omt38-yellow);font:700 clamp(34px,3.1vw,50px)/.9 "ClashDisplay-Bold",Inter,sans-serif;letter-spacing:-.025em}
.omt-unlock-console__count span{color:#fff;font:600 15px/1 Inter,sans-serif;letter-spacing:.04em}
.omt-unlock-console__track{position:relative;z-index:1;display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-top:18px;height:12px}
.omt-unlock-console__track>span{border:1px solid rgba(112,124,255,.25);background:rgba(255,255,255,.055);transform:skewX(-18deg)}
.omt-unlock-console__track>span:first-child{border-color:rgba(248,200,0,.36);background:rgba(248,200,0,.08)}
.omt-unlock-console__track>b{position:absolute;top:-2px;bottom:-2px;left:-7%;width:7%;background:linear-gradient(90deg,transparent,rgba(83,184,255,.65),transparent);filter:blur(.2px);animation:omt38Scanner 3.4s linear infinite}
.omt-unlock-console__foot{position:relative;z-index:1;display:flex;justify-content:space-between;gap:18px;margin-top:12px;color:rgba(255,255,255,.38);font:600 8px/1 Inter,sans-serif;letter-spacing:.13em}
.omt-unlock-console__foot span:last-child{color:rgba(248,200,0,.62)}
@keyframes omt38Signal{50%{opacity:.35;transform:scale(.72)}}
@keyframes omt38Scanner{to{left:108%}}

/* Client-ready mobile pass: contain oversized motion typography, keep key art readable, and preserve usable controls. */
@media(max-width:991px){
  #omt-home-content .studio-showcase-thumb:hover img{transform:none!important}
  #omt-single-showcase .tp-showcase-slider-content{max-width:min(680px,90vw)!important}
  .omt-unlock-console{width:min(660px,88vw)}
}
@media(max-width:767px){
  .omt-header-shell{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:0!important}
  .omt-header-shell .tp-header-logo img{width:96px!important;max-width:96px!important}
  .omt-header-shell__utility{display:flex!important;align-items:center!important;gap:8px!important}
  .omt-sound-toggle{width:38px!important;height:38px!important;min-width:38px!important}
  .mxd-hero-02__cover-img img{object-position:66% center!important}
  #omt-moving-text .wrapper-text>span{padding-right:.22em!important}
  #omt-single-showcase .tp-showcase-slider-bg{background-position:63% center!important;min-height:100svh!important}
  #omt-single-showcase .tp-showcase-slider-bg::after{
    background:linear-gradient(180deg,rgba(2,2,10,.44) 0%,rgba(2,2,10,.63) 45%,rgba(2,2,10,.72) 100%)!important;
  }
  #omt-single-showcase .tp-showcase-slider-content{max-width:92vw!important;padding-inline:3px!important}
  #omt-single-showcase .tp-showcase-slider-title{font-size:clamp(42px,13vw,68px)!important;line-height:.95!important}
  .omt-product-launch-copy{font-size:14px!important;line-height:1.55!important}
  .omt-unlock-console{width:92vw;margin:20px 0 24px;padding:16px 15px 15px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
  .omt-unlock-console__head{align-items:flex-end;gap:12px}
  .omt-unlock-console__signal span{font-size:9px;letter-spacing:.13em}
  .omt-unlock-console__signal small{font-size:7px}
  .omt-unlock-console__count{gap:7px}
  .omt-unlock-console__count strong{font-size:32px}
  .omt-unlock-console__count span{font-size:12px}
  .omt-unlock-console__track{gap:3px;height:10px;margin-top:15px}
  .omt-unlock-console__foot{font-size:7px;letter-spacing:.08em;gap:8px}
  .design-choose-area.design-choose-2-style{padding-bottom:0!important}
  .design-choose-item p br{display:none!important}
  .design-choose-title-box p{font-size:20px!important;line-height:1.45!important}
}
@media(max-width:480px){

  .omt-unlock-console__foot span:first-child{display:none}
  .omt-unlock-console__foot{justify-content:flex-end}
}
@media(prefers-reduced-motion:reduce){
  .omt-unlock-console__signal i,.omt-unlock-console__track>b{animation:none!important}
}
/* Moving-text bullet: nudge right on mobile only */
@media(max-width:767px){
  #omt-moving-text .des-text-item span::after{right:-30px!important}
}

/* Production fallback: the product artwork is present even before the generic background helper runs. */
#omt-single-showcase .tp-showcase-slider-bg{
  background-image:url('../img/omt-updates/inside-game-product-banner.webp')!important;
}
#omt-single-showcase .tp-showcase-slider-bg{
  transform:none!important;
}

/* ── Mobile toggle menu ──────────────────────────────────────────────────── */

/* Hamburger button — hidden on desktop */
.omt-menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:40px;
  height:40px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
  flex-shrink:0;
  position:relative;
  z-index:100001;
}
.omt-menu-toggle__bar{
  display:block;
  width:22px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .25s ease, width .3s cubic-bezier(.4,0,.2,1);
  transform-origin:center;
}
.omt-menu-toggle.is-open .omt-menu-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.omt-menu-toggle.is-open .omt-menu-toggle__bar:nth-child(2){opacity:0;width:0}
.omt-menu-toggle.is-open .omt-menu-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Full-screen panel — always rendered, toggled via opacity/visibility for smooth transition */
.omt-mobile-panel{
  position:fixed;
  inset:0;
  z-index:100000;
  background:rgba(4,4,22,.97);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  overflow-y:auto;
  /* closed state */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-10px);
  transition:opacity .35s cubic-bezier(.4,0,.2,1),
             visibility .35s cubic-bezier(.4,0,.2,1),
             transform .35s cubic-bezier(.4,0,.2,1);
}
.omt-mobile-panel.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}
.omt-mobile-panel nav ul{
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
  text-align:center;
}
.omt-mobile-panel nav ul li{
  border-bottom:1px solid rgba(255,255,255,.08);
  opacity:0;
  transform:translateY(18px);
  transition:opacity .3s ease, transform .3s ease;
}
.omt-mobile-panel nav ul li:first-child{border-top:1px solid rgba(255,255,255,.08)}
/* Stagger each link in */
.omt-mobile-panel.is-open nav ul li:nth-child(1){opacity:1;transform:translateY(0);transition-delay:.07s}
.omt-mobile-panel.is-open nav ul li:nth-child(2){opacity:1;transform:translateY(0);transition-delay:.12s}
.omt-mobile-panel.is-open nav ul li:nth-child(3){opacity:1;transform:translateY(0);transition-delay:.17s}
.omt-mobile-panel.is-open nav ul li:nth-child(4){opacity:1;transform:translateY(0);transition-delay:.22s}
.omt-mobile-panel.is-open nav ul li:nth-child(5){opacity:1;transform:translateY(0);transition-delay:.27s}
.omt-mobile-panel.is-open nav ul li:nth-child(6){opacity:1;transform:translateY(0);transition-delay:.32s}
.omt-mobile-panel nav a{
  display:block;
  font-family:"ClashDisplay-Semibold","ClashDisplay",Inter,Arial,sans-serif;
  font-size:clamp(24px,7vw,42px);
  font-weight:600;
  color:rgba(255,255,255,.88);
  letter-spacing:.04em;
  padding:22px 32px;
  text-decoration:none;
  transition:color .22s ease, letter-spacing .22s ease;
}
.omt-mobile-panel nav a:hover,
.omt-mobile-panel nav a:focus{color:#f8c800;letter-spacing:.08em}

/* Close button — top-right corner of the panel */
.omt-mobile-panel__close{
  position:absolute;
  top:20px;
  right:20px;
  width:44px;
  height:44px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .22s ease, border-color .22s ease, transform .22s ease;
}
.omt-mobile-panel__close:hover{
  background:rgba(248,200,0,.15);
  border-color:rgba(248,200,0,.5);
  transform:rotate(90deg);
}
.omt-mobile-panel__close span{
  position:absolute;
  width:18px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:background .22s ease;
}
.omt-mobile-panel__close span:nth-child(1){transform:rotate(45deg)}
.omt-mobile-panel__close span:nth-child(2){transform:rotate(-45deg)}
.omt-mobile-panel__close:hover span{background:#f8c800}

/* Mobile breakpoint — show hamburger, hide desktop nav, fix header layout */
@media(max-width:767px){
  .omt-menu-toggle{display:flex}
  #omt-desktop-nav{display:none!important}
  .omt-header-shell{
    display:flex!important;
    justify-content:space-between!important;
    align-items:center!important;
    gap:0!important;
  }
  .omt-header-shell__utility{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
  }
  body.omt-menu-open{overflow:hidden!important}
}

/* Navigation CTA — Play / Early Access */
.omt-header-nav a.omt-nav-cta,
.omt-mobile-panel nav a.omt-nav-cta {
  padding: 14px 40px;
  min-width: 190px;
  text-align: center;
  letter-spacing: .04em;
  background: #f8c800;
  color: #050032 !important;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
  transition: background .25s ease, transform .25s ease;
}
.omt-header-nav a.omt-nav-cta::after { display: none; }
.omt-header-nav a.omt-nav-cta:hover,
.omt-mobile-panel nav a.omt-nav-cta:hover { background: #fff; color: #050032 !important; transform: translateY(-2px); }
.omt-mobile-panel nav a.omt-nav-cta { display: inline-block; margin-top: 10px; }
@media (max-width: 1399px) {
  .omt-header-nav ul { gap: 18px; }
  .omt-header-nav a { font-size: 12.5px; }
}



/* Parallax — One More Trade Victory image */
#omt-studio-about .studio-about-thumb.thumb-1 img.omt-parallax-victory { height: 124%; will-change: transform; }

/* Company modal: remove the yellow code badge (e.g. AFS) from the top-left */
.omt-modal-card-badge{display:none!important}

/* Tablet / small laptop (768–1199px, e.g. 1024×768): logo no longer overlaps the nav, sound button is icon-only */
@media (min-width: 768px) and (max-width: 1199px) {
  .omt-header-shell { grid-template-columns: 140px minmax(0, 1fr) auto; gap: 12px; }
  .omt-header-shell .tp-header-logo img { width: 140px !important; max-width: 140px !important; }
  .omt-header-nav ul { gap: 14px !important; }
  .omt-sound-toggle { width: 42px !important; min-width: 42px !important; height: 42px !important; padding: 0 !important; justify-content: center; }
}

/* ~1024px: smaller yellow dot after each word, sitting on the baseline so it is not clipped */
@media (min-width: 992px) and (max-width: 1199px) {
  #omt-moving-text .des-text-item span::after {
    width: 28px !important;
    height: 28px !important;
    top: auto !important;
    bottom: 6px !important;
  }
}

/* ~768–991px (e.g. 911): smaller dot on the baseline so the full yellow circle shows */
@media (min-width: 768px) and (max-width: 991px) {
  #omt-moving-text .des-text-item span::after {
    width: 24px !important;
    height: 24px !important;
    top: auto !important;
    bottom: 6px !important;
  }
}

/* Below 992px the "Explore companies" button sits under the description text */
@media (max-width: 991px) {
  .design-project-btn.omt-project-btn-stack { margin-top: 28px; }
}