/* ==========================================================================
   ACM Motion Layer v4 — studiors + waverun + teraxsol-style GSAP motion + page transitions
   Pure presentation layer. Does NOT touch app logic, APIs or MT5 code.
   Remove the <link>/<script> tags in index.html to disable completely.
   ========================================================================== */

:root {
  --acm-ease: cubic-bezier(.22, 1, .36, 1);
  --acm-ease-in: cubic-bezier(.7, 0, .84, 0);
  --acm-ease-io: cubic-bezier(.76, 0, .24, 1);
  --acm-ink: #241b34;
  --acm-orange: #ff6a2b;
}

/* --------------------------------------------------------------------------
   1. Page transition curtain
   -------------------------------------------------------------------------- */

/* The old abrupt white loader is replaced by the curtain below */
html.acm-motion .page-icon-loader { display: none !important; }

.acm-pt {
  position: fixed;
  inset: 0;
  z-index: 2147482500; /* above site UI + old loader, below intro loader */
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
}
.acm-pt.is-active { visibility: visible; pointer-events: all; }

.acm-pt__panel {
  position: absolute;
  inset: -2px 0;
  transform: translate3d(0, 101%, 0);
  will-change: transform;
}
.acm-pt__panel--a { background: var(--acm-orange); }
.acm-pt__panel--b {
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(255, 106, 43, .28) 0%, rgba(255, 106, 43, 0) 60%),
    linear-gradient(160deg, #2c2140 0%, var(--acm-ink) 55%, #17111f 100%);
}

.acm-pt__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
}
.acm-pt__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transform: translate3d(0, 14px, 0);
}
.acm-pt__logo {
  width: 64px;
  height: auto;
  filter: drop-shadow(0 8px 26px rgba(255, 106, 43, .45));
}
.acm-pt__bar {
  width: 120px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
  position: relative;
}
.acm-pt__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--acm-orange), transparent);
  animation: acm-pt-bar 1s var(--acm-ease-io) infinite;
}
@keyframes acm-pt-bar {
  from { transform: translateX(-110%); }
  to   { transform: translateX(260%); }
}

/* Cover (click-initiated): panels sweep up from the bottom */
.acm-pt.is-covering .acm-pt__panel {
  animation: acm-pt-in .52s var(--acm-ease-io) forwards;
}
.acm-pt.is-covering .acm-pt__panel--b { animation-delay: .07s; }
.acm-pt.is-covering .acm-pt__center,
.acm-pt.is-covered .acm-pt__center { animation: acm-pt-center-in .4s var(--acm-ease) .3s forwards; }
.acm-pt.is-covering .acm-pt__brand,
.acm-pt.is-covered .acm-pt__brand { animation: acm-pt-brand-in .5s var(--acm-ease) .3s forwards; }

/* Covered instantly (back / forward buttons, programmatic navigation) */
.acm-pt.is-covered .acm-pt__panel { transform: translate3d(0, 0, 0); }
.acm-pt.is-covered { animation: acm-fade-in .18s ease-out both; }

/* Reveal: panels continue upward and off the screen */
.acm-pt.is-revealing .acm-pt__panel { transform: translate3d(0, 0, 0); animation: acm-pt-out .7s var(--acm-ease-io) forwards; }
.acm-pt.is-revealing .acm-pt__panel--a { animation-delay: .08s; }
.acm-pt.is-revealing .acm-pt__center { opacity: 1; animation: acm-pt-center-out .28s ease-in forwards; }

@keyframes acm-pt-in  { from { transform: translate3d(0, 101%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes acm-pt-out { from { transform: translate3d(0, 0, 0); }    to { transform: translate3d(0, -101%, 0); } }
@keyframes acm-pt-center-in  { to { opacity: 1; } }
@keyframes acm-pt-center-out { to { opacity: 0; transform: translate3d(0, -24px, 0); } }
@keyframes acm-pt-brand-in   { to { transform: translate3d(0, 0, 0); } }
@keyframes acm-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* New page content rises in as the curtain lifts */
html.acm-motion main[data-acm-enter] {
  animation: acm-main-enter .9s var(--acm-ease) both;
}
@keyframes acm-main-enter {
  from { opacity: 0; transform: translate3d(0, 46px, 0); }
  to   { opacity: 1; transform: none; }
}


/* --------------------------------------------------------------------------
   2. studiors-style scroll motion (driven by GSAP ScrollTrigger)
   All effects use CSS variables + the independent translate/scale/rotate/
   clip-path properties, so they stack on top of the site's own Framer Motion
   animations without fighting them and never touch React's DOM structure.
   -------------------------------------------------------------------------- */

/* Title words: masked rise (studiors "process__title-main" / hero chars) */
[data-acm-tw] {
  display: inline-block;
  clip-path: inset(calc(var(--acm-c, -40) * 1%) -0.35em -0.35em -0.35em);
  translate: 0 calc(var(--acm-ty, 0) * 1%);
  rotate: calc(var(--acm-rot, 0) * 1deg);
  transform-origin: 0% 100%;
}

/* Hero shrinks into a rounded card while its content lifts away (waverun + teraxsol) */
[data-acm-hero] {
  scale: var(--acm-hs, 1);
  transform-origin: 50% 0%;
  clip-path: inset(0 round calc(var(--acm-hr, 0) * 1px));
}
[data-acm-hero-in] { translate: 0 calc(var(--acm-hy, 0) * 1%); }

/* Read-along paragraph (studiors manifesto): words light up while scrolling */
.acm-w { opacity: .16; }

/* Framed images zoom out while entering (1.18 → 1); cutouts drift (ghost parallax) */
[data-acm-iz] { scale: var(--acm-is, 1); translate: 0 calc(var(--acm-iy, 0) * 1%); }
[data-acm-ip] {
  scale: var(--acm-is, 1);
  translate: 0 calc(var(--acm-iy, 0) * 1%);
  opacity: 1;
  filter: none;
}

/* Big dark cards sink back as you scroll past them (process-card stack) */
[data-acm-stack] {
  scale: var(--acm-ss, 1);
  filter: brightness(var(--acm-sb, 1));
  transform-origin: 50% 100%;
  clip-path: inset(-15% calc(var(--acm-ci, 0) * 1%) -15% calc(var(--acm-ci, 0) * 1%) round calc(var(--acm-cr, 0) * 1px));
}

/* Card grids flip up in 3D (teraxsol) */
[data-acm-persp] { perspective: 1200px; }
[data-acm-flip] {
  rotate: x calc(var(--acm-fx, 0) * 1deg);
  translate: 0 calc(var(--acm-fy, 0) * 1px);
  transform-origin: 50% 100%;
  backface-visibility: hidden;
}

/* Ticker bars lean with scroll speed (teraxsol) */
[data-acm-skew] { transform: skewX(var(--acm-sk, 0deg)); }

/* Header hides on scroll down, returns on scroll up (teraxsol) */
header[data-acm-header] { transition: translate .55s var(--acm-ease); }
header.acm-header-hide { translate: 0 -130%; }

/* Magnetic buttons */
[data-acm-mag] { translate: var(--acm-mx, 0px) var(--acm-my, 0px); }


/* --------------------------------------------------------------------------
   Banner / hero showpiece
   -------------------------------------------------------------------------- */
/* headline lines slide apart on scroll + whole headline follows the cursor */
[data-acm-hl], [data-acm-depth] {
  translate: calc(var(--acm-lx, 0) * 1vw + var(--acm-dx, 0) * 1px) calc(var(--acm-dy, 0) * 1px) calc(var(--acm-dz, 0) * 1px);
}
/* supporting banner copy rises out of a mask */
[data-acm-rise] {
  translate: 0 calc(var(--acm-ry, 0) * 1px);
  clip-path: inset(calc(var(--acm-rc, -30) * 1%) -20% -30% -20%);
}
/* main banner visual: tilted back in 3D, flattens while scrolling, mouse tilt */
[data-acm-tilt] {
  transform: rotateX(calc((var(--acm-sx, 0) + var(--acm-mx, 0)) * 1deg)) rotateY(calc(var(--acm-my, 0) * 1deg));
  scale: var(--acm-sc, 1);
  transform-style: preserve-3d;
  will-change: transform;
}
/* orange spotlight that follows the cursor across the banner */
[data-acm-spot]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(560px circle at var(--acm-gx, 50%) var(--acm-gy, 30%), rgba(255, 106, 43, .16), rgba(255, 106, 43, 0) 62%);
  opacity: var(--acm-go, 0);
  transition: opacity .8s ease;
}

/* --------------------------------------------------------------------------
   3. Custom cursor (dot + lagging ring + label badge) — desktop only
   -------------------------------------------------------------------------- */
/* Custom cursor is off. Detail pages keep the normal pointer, same as home. */
html.acm-cursor, html.acm-cursor body, html.acm-cursor a, html.acm-cursor button,
html.acm-cursor [role="button"], html.acm-cursor label, html.acm-cursor summary,
html.acm-cursor input, html.acm-cursor textarea, html.acm-cursor select,
html.acm-cursor [contenteditable="true"], html.acm-cursor iframe { cursor: auto; }

.acm-cursor-dot, .acm-cursor-ring, .acm-cursor-badge {
  display: none !important;
  position: fixed;
  top: 0; left: 0;
  z-index: 2147483100;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
.acm-cursor-dot {
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--acm-orange);
}
.acm-cursor-ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
}
.acm-cursor-ring__in {
  display: block; width: 100%; height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(36, 27, 52, .55);
  transition: transform .35s var(--acm-ease), border-color .25s ease, background-color .25s ease;
}
html.acm-c-hover .acm-cursor-ring__in { transform: scale(1.55); border-color: var(--acm-orange); background: rgba(255, 106, 43, .08); }
html.acm-c-press .acm-cursor-ring__in { transform: scale(.8); }
html.acm-c-text .acm-cursor-ring, html.acm-c-text .acm-cursor-dot { opacity: 0 !important; }
html.acm-c-dark .acm-cursor-ring__in { border-color: rgba(255, 255, 255, .7); }

.acm-cursor-badge { margin: 0; }
.acm-cursor-badge__in {
  display: inline-flex; align-items: center; gap: 6px;
  transform: translate(18px, 14px) scale(.6);
  transform-origin: 0 0;
  opacity: 0;
  padding: 7px 11px 6px;
  border-radius: 999px;
  background: var(--acm-ink);
  color: #fff;
  font: 700 10.5px/1 "Manrope", "Inter", system-ui, sans-serif;
  letter-spacing: .12em;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(36, 27, 52, .28);
  transition: transform .35s var(--acm-ease), opacity .2s ease;
}
.acm-cursor-badge__icon { color: var(--acm-orange); font-size: 12px; letter-spacing: 0; }
html.acm-c-badge .acm-cursor-badge__in { opacity: 1; transform: translate(18px, 14px) scale(1); }
html.acm-c-badge.acm-c-left .acm-cursor-badge__in { transform: translate(calc(-100% - 18px), 14px) scale(1); transform-origin: 100% 0; }

/* --------------------------------------------------------------------------
   4. Reduced motion — everything off
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .acm-pt { display: none !important; }
  html.acm-motion .page-icon-loader { display: grid !important; }
  html.acm-motion main[data-acm-enter] { animation: none !important; }
  .acm-w { opacity: 1 !important; }
  header.acm-header-hide { translate: none !important; }
  [data-acm-tilt] { transform: none !important; scale: none !important; }
  [data-acm-hl], [data-acm-depth] { translate: none !important; }
  .acm-cursor-dot, .acm-cursor-ring, .acm-cursor-badge { display: none !important; }
}