/* ==========================================================================
   AJAYNXT MST PREMIUM VISUAL LAYER
   Editorial typography + cinematic motion + flow-field canvas.
   No external runtime dependencies.
   ========================================================================== */

.mst-shell {
  --mst-copper: #c8682e;
  --mst-ember: #ea580c;
  --mst-ink: #0d1322;
  --mst-paper: #faf8f5;
  --mst-soft: rgba(13,19,34,.08);
  --mst-ease: cubic-bezier(.16,1,.3,1);
}

.mst-flow-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .72;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.mst-flow-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 70% 34%, rgba(200,104,46,.09), transparent 34%),
    radial-gradient(ellipse at 76% 76%, rgba(124,58,237,.07), transparent 31%),
    linear-gradient(90deg, rgba(250,248,245,.94) 0%, rgba(250,248,245,.64) 42%, rgba(250,248,245,.06) 82%);
}

.mst-film-grain {
  position: absolute;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  transform: rotate(7deg);
  animation: mstGrain .28s steps(2) infinite;
}

@keyframes mstGrain {
  0% { transform: translate3d(0,0,0) rotate(7deg); }
  25% { transform: translate3d(-2%,1%,0) rotate(7deg); }
  50% { transform: translate3d(1%,-2%,0) rotate(7deg); }
  75% { transform: translate3d(2%,2%,0) rotate(7deg); }
  100% { transform: translate3d(-1%,-1%,0) rotate(7deg); }
}

.mst-shell .hero {
  isolation: isolate;
}

.mst-shell .hero-grid,
.mst-shell .hero-stats {
  position: relative;
  z-index: 4;
}

.mst-shell .hero-copy {
  animation: mstCopyIn 1s var(--mst-ease) both;
}

@keyframes mstCopyIn {
  from { opacity: 0; transform: translate3d(0,34px,0); }
  to { opacity: 1; transform: none; }
}

.mst-shell .hero-visual {
  transform: translate3d(var(--mst-parallax-x,0px), var(--mst-parallax-y,0px), 0);
  transition: transform .45s var(--mst-ease);
  will-change: transform;
}

.mst-shell .portrait-frame {
  position: relative;
  border-color: rgba(13,19,34,.18);
  box-shadow:
    0 32px 80px rgba(13,19,34,.18),
    0 0 0 1px rgba(255,255,255,.28) inset;
}

.mst-shell .portrait-frame::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 3;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 42% 42% 14px 14px;
  pointer-events: none;
}

.mst-shell .portrait-frame::after {
  background:
    linear-gradient(180deg, rgba(10,14,24,.03) 0%, transparent 44%, rgba(8,10,17,.72) 100%),
    linear-gradient(90deg, rgba(200,104,46,.10), transparent 38%, rgba(124,58,237,.08));
}

.mst-shell .portrait-frame > img {
  filter: contrast(1.03) saturate(.94);
  transition: transform 1.1s var(--mst-ease), filter .8s var(--mst-ease);
}

.mst-shell .portrait-frame:hover > img {
  transform: scale(1.035);
  filter: contrast(1.06) saturate(1);
}

.mst-shell .hero-emblem {
  transform: rotate(-7deg) translate3d(0,0,0);
  transition: transform .65s var(--mst-ease), box-shadow .65s var(--mst-ease);
}

.mst-shell .hero-visual:hover .hero-emblem {
  transform: rotate(-3deg) translate3d(0,-8px,0);
  box-shadow: 0 24px 56px rgba(0,0,0,.42);
}

.mst-shell .float-tag {
  transition: transform .55s var(--mst-ease), box-shadow .35s ease;
}
.mst-shell .tag-code { animation: mstFloatA 5.8s ease-in-out infinite; }
.mst-shell .tag-film { animation: mstFloatB 6.4s ease-in-out infinite; }

@keyframes mstFloatA {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(7px,-9px,0) rotate(1deg); }
}
@keyframes mstFloatB {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(-7px,7px,0) rotate(-1deg); }
}

.mst-shell .project-card,
.mst-shell .service-card,
.mst-shell .social-card,
.mst-shell .process-list li {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.mst-shell .project-card::before,
.mst-shell .service-card::before,
.mst-shell .process-list li::before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  left: var(--mst-x, 50%);
  top: var(--mst-y, 50%);
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,104,46,.15), transparent 68%);
  opacity: 0;
  z-index: -1;
  transition: opacity .3s ease;
  pointer-events: none;
}

.mst-shell .project-card:hover::before,
.mst-shell .service-card:hover::before,
.mst-shell .process-list li:hover::before { opacity: 1; }

.mst-shell .project-card,
.mst-shell .service-card,
.mst-shell .social-card {
  transition:
    transform .5s var(--mst-ease),
    box-shadow .5s var(--mst-ease),
    background .4s ease,
    border-color .4s ease;
}

.mst-shell .project-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 60px rgba(13,19,34,.11);
}

.mst-shell .service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 55px rgba(13,19,34,.09);
}

.mst-shell .project-card h3,
.mst-shell .service-card h3 {
  transition: transform .5s var(--mst-ease);
}
.mst-shell .project-card:hover h3,
.mst-shell .service-card:hover h3 {
  transform: translateX(4px);
}

.mst-shell .view-more .button,
.mst-shell .hero-actions .button,
.mst-shell .booking-form .button {
  position: relative;
  overflow: hidden;
}

.mst-shell .button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .65s var(--mst-ease);
  pointer-events: none;
}
.mst-shell .button:hover::before { transform: translateX(120%); }

.mst-shell .films {
  position: relative;
  isolation: isolate;
}

.mst-shell .films::before {
  content: "";
  position: absolute;
  inset: 8% auto auto 4%;
  width: 46vw;
  height: 46vw;
  max-width: 600px;
  max-height: 600px;
  border: 1px solid rgba(239,148,107,.14);
  border-radius: 50%;
  transform: rotate(-8deg);
  animation: mstRing 22s linear infinite;
  pointer-events: none;
}
@keyframes mstRing {
  to { transform: rotate(352deg); }
}

.mst-shell .film-card {
  transition: transform .7s var(--mst-ease), filter .5s ease, box-shadow .5s ease;
}
.mst-shell .film-card:hover {
  transform: translateY(-8px) scale(1.012);
  filter: saturate(1.03);
  box-shadow: 0 25px 60px rgba(0,0,0,.28);
}
.mst-shell .film-card:hover .film-cover {
  transform: scale(1.045);
}
.mst-shell .film-cover {
  transition: transform 1s var(--mst-ease), filter .7s ease;
}

.mst-shell .film-rail {
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.mst-shell .film-card .play-mark {
  transition: transform .55s var(--mst-ease), background .35s ease;
}
.mst-shell .film-card:hover .play-mark {
  transform: translate(-50%,-50%) scale(1.12) rotate(3deg);
}

.mst-shell .section-head h2 em,
.mst-shell .hero h1 .role-word {
  text-wrap: balance;
}

.mst-shell .section-head h2 {
  max-width: 900px;
}

.mst-shell .process-list li {
  transition: background .4s ease, transform .5s var(--mst-ease);
}
.mst-shell .process-list li:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.55);
}

.mst-shell .global-strip {
  position: relative;
  overflow: hidden;
}
.mst-shell .global-strip::after {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  right: -180px;
  top: -180px;
  border: 1px solid rgba(239,148,107,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 45px rgba(239,148,107,.025), 0 0 0 90px rgba(239,148,107,.018);
  animation: mstRing 28s linear infinite reverse;
  pointer-events: none;
}

.mst-shell .booking-form {
  transition: box-shadow .5s ease, transform .5s var(--mst-ease);
}
.mst-shell .booking-form:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 70px rgba(13,19,34,.11);
}

.mst-shell .ai-trigger {
  box-shadow:
    0 12px 36px rgba(13,19,34,.18),
    0 0 0 1px rgba(200,104,46,.18);
}

@media (max-width: 760px) {
  .mst-flow-canvas { opacity: .48; }
  .mst-flow-wash {
    background:
      linear-gradient(180deg, rgba(250,248,245,.92) 0%, rgba(250,248,245,.72) 55%, rgba(250,248,245,.22) 100%);
  }
  .mst-shell .hero-visual { transform: none; }
  .mst-shell .hero-emblem { transform: rotate(-4deg); }
  .mst-shell .films::before { width: 72vw; height: 72vw; }
  .mst-shell .project-card:hover,
  .mst-shell .service-card:hover,
  .mst-shell .process-list li:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mst-film-grain,
  .mst-shell .tag-code,
  .mst-shell .tag-film,
  .mst-shell .films::before,
  .mst-shell .global-strip::after,
  .mst-shell .hero-copy { animation: none !important; }
  .mst-shell .hero-visual,
  .mst-shell .portrait-frame > img,
  .mst-shell .project-card,
  .mst-shell .service-card,
  .mst-shell .social-card,
  .mst-shell .process-list li,
  .mst-shell .film-card { transition: none !important; }
}