/* OSRSAHK effects layer — maximum visual complexity, no motion reduction. */

::view-transition-old(root), ::view-transition-new(root){
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(.2,.8,.2,1);
}
::view-transition-old(root){ animation-name: fx-page-out; }
::view-transition-new(root){ animation-name: fx-page-in; }
@keyframes fx-page-out { to{ opacity: 0; transform: translate3d(0,-12px,0) scale(.992); } }
@keyframes fx-page-in { from{ opacity: 0; transform: translate3d(0,14px,0) scale(.992); } }

.site-header[data-header]{ view-transition-name: fx-site-header; }
.home-hero__media, .client-hero__media{ view-transition-name: fx-hero-media; }

/* ---- HEADER SCROLL FEEDBACK ---- */
.fx-enabled .site-header{ isolation: isolate; }
.fx-enabled .site-header::after{
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  pointer-events: none;
  opacity: .22;
  background: linear-gradient(90deg,transparent,rgb(242 123 53 / 18%) 20%,rgb(242 123 53 / 78%) 50%,rgb(242 123 53 / 18%) 80%,transparent);
  transform: scaleX(.48);
  transition: opacity 260ms var(--ease-standard), transform 340ms var(--ease-standard);
}
.fx-enabled .site-header.is-scrolled::after{ opacity: .95; transform: scaleX(1); }
.fx-enabled .site-header.is-scrolled{ box-shadow: 0 16px 48px rgb(0 0 0 / 50%), 0 0 36px rgb(178 74 28 / 12%); }

/* ---- HERO 3D DEPTH ---- */
.fx-enabled .fx-hero-plane{
  --fx-base-y: 0px;
  --fx-pointer-x: 0px;
  --fx-pointer-y: 0px;
  --fx-scroll-y: 0px;
  --fx-rotate-x: 0deg;
  --fx-rotate-y: 0deg;
  transform:
    perspective(1400px)
    translate3d(var(--fx-pointer-x), calc(var(--fx-base-y) + var(--fx-pointer-y) + var(--fx-scroll-y)), 0)
    rotateX(var(--fx-rotate-x))
    rotateY(var(--fx-rotate-y));
  transform-style: preserve-3d;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), filter 240ms var(--ease-standard);
  will-change: transform;
}
.fx-enabled .fx-hero-copy{ transform-origin: 16% 50%; }
.fx-enabled .fx-hero-media{
  transform-origin: 50% 45%;
  filter: drop-shadow(0 38px 60px rgb(0 0 0 / 45%)) drop-shadow(0 0 40px rgb(178 74 28 / 10%));
}
.fx-enabled .fx-hero-media:hover{
  filter: drop-shadow(0 42px 70px rgb(0 0 0 / 55%)) drop-shadow(0 0 38px rgb(178 74 28 / 22%)) drop-shadow(0 0 12px rgb(255 182 125 / 14%));
}
.fx-enabled .fx-hero-copy .hero-title{
  text-shadow: 0 6px 28px rgb(0 0 0 / 62%), 0 0 80px rgb(178 74 28 / 10%), 0 0 14px rgb(242 123 53 / 8%);
}
/* Hero text parallax: translate-only, no rotate/perspective — rotating
   text is what makes glyphs render blurry, so this stays crisp while
   still reacting to the cursor. Buttons are never in this attribute set. */
.fx-enabled [data-fx-text-parallax]{
  --fx-text-x: 0px;
  --fx-text-y: 0px;
  transform: translate3d(var(--fx-text-x), var(--fx-text-y), 0);
  transition: transform 280ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.fx-enabled .fx-hero-backdrop{
  --fx-bg-y: 0px;
  transform: translate3d(0,var(--fx-bg-y),0) scaleY(1.07);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.fx-enabled .home-hero, .fx-enabled .client-hero{
  box-shadow: inset 0 0 220px 70px rgb(0 0 0 / 54%);
}
@media (min-width: 940px) {
  .fx-enabled .home-hero__media.fx-hero-plane{ --fx-base-y: 48px; }
  .fx-enabled .client-hero__media.fx-hero-plane{ --fx-base-y: 78px; }
  
}
@media (max-width: 680px) {
  .fx-enabled .client-hero__media.fx-hero-plane{ --fx-base-y: 36px; }
}

/* ---- HERO GLINT ---- */
.fx-glint-once{ position: relative; isolation: isolate; }
.fx-glint-once::after{
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(112deg,transparent 24%,rgb(255 215 178 / 24%) 47%,transparent 70%);
  transform: translateX(-115%);
}
.fx-enabled .fx-glint-once.fx-glint-play::after{ animation: fx-frame-glint 780ms cubic-bezier(.2,.8,.2,1) 1; }
@keyframes fx-frame-glint {
  0%{ opacity: 0; transform: translateX(-115%); }
  18%{ opacity: .95; }
  100%{ opacity: 0; transform: translateX(115%); }
}

/* ---- SCROLL REVEAL (amplified) ---- */
.fx-enabled [data-fx-reveal-item]{
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 720ms cubic-bezier(.16,1,.3,1),
    translate 720ms cubic-bezier(.16,1,.3,1),
    filter 720ms cubic-bezier(.16,1,.3,1);
  transition-delay: var(--fx-delay,0ms);
}
.fx-enabled .fx-story-section[data-fx-state="pending"] [data-fx-reveal-item]{
  opacity: 0;
  translate: 0 42px;
  filter: blur(5px);
}
.fx-enabled .fx-story-section[data-fx-state="revealed"] [data-fx-reveal-item]{
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
}
.fx-title-accent{ position: relative; width: fit-content; max-width: 100%; padding-bottom: 12px; }
.fx-title-accent::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(160px,44%);
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg,var(--color-copper-bright),rgb(242 123 53 / 0%));
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 560ms cubic-bezier(.16,1,.3,1) 180ms;
  box-shadow: 0 0 18px rgb(242 123 53 / 34%);
}
.fx-story-section[data-fx-state="revealed"] .fx-title-accent::after, .fx-title-accent.fx-title-drawn::after{ transform: scaleX(1); }

/* ---- BUY CART ROLL ---- */
@keyframes fx-buy-cart-roll{
  0%{ transform: translate3d(0,0,0) rotate(0deg); }
  30%{ transform: translate3d(4px,-2px,0) rotate(-6deg); }
  65%{ transform: translate3d(2px,0,0) rotate(3deg); }
  100%{ transform: translate3d(0,0,0) rotate(0deg); }
}
@media (hover: hover) and (pointer: fine) {
  .fx-enabled .primary-nav .nav-buy:hover::before, .fx-enabled .primary-nav .nav-buy:focus-visible::before, .fx-enabled .button--buy:hover::before, .fx-enabled .button--buy:focus-visible::before{
    animation: fx-buy-cart-roll 480ms cubic-bezier(.2,.82,.2,1) both;
    filter: drop-shadow(0 0 12px rgb(242 123 53 / 52%));
  }
}
.fx-enabled .primary-nav .nav-buy:active::before, .fx-enabled .button--buy:active::before{ transform: translate3d(1px,1px,0) scale(.92); }

/* ---- CTA BUTTONS SWEEP ---- */
.fx-enabled .home-hero__actions .button--primary, .fx-enabled .client-hero__actions .button--primary, .fx-enabled .primary-nav .nav-buy, .fx-enabled .primary-nav .nav-patreon, .fx-enabled .primary-nav .nav-cta, .fx-enabled .button--buy, .fx-enabled .button--dfg, .fx-enabled .product-header__top-actions .button--primary{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.fx-enabled .home-hero__actions .button--primary::after, .fx-enabled .client-hero__actions .button--primary::after, .fx-enabled .primary-nav .nav-buy::after, .fx-enabled .primary-nav .nav-patreon::after, .fx-enabled .primary-nav .nav-cta::after, .fx-enabled .button--buy::after, .fx-enabled .button--dfg::after, .fx-enabled .product-header__top-actions .button--primary::after{
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2px;
  pointer-events: none;
  background: linear-gradient(112deg,transparent 20%,rgb(255 255 255 / 24%) 48%,transparent 76%);
  transform: translateX(-135%);
  transition: transform 620ms cubic-bezier(.2,.8,.2,1);
}
.fx-enabled .home-hero__actions .button--primary:hover::after, .fx-enabled .home-hero__actions .button--primary:focus-visible::after, .fx-enabled .client-hero__actions .button--primary:hover::after, .fx-enabled .client-hero__actions .button--primary:focus-visible::after, .fx-enabled .primary-nav .nav-buy:hover::after, .fx-enabled .primary-nav .nav-buy:focus-visible::after, .fx-enabled .primary-nav .nav-patreon:hover::after, .fx-enabled .primary-nav .nav-patreon:focus-visible::after, .fx-enabled .primary-nav .nav-cta:hover::after, .fx-enabled .primary-nav .nav-cta:focus-visible::after, .fx-enabled .button--buy:hover::after, .fx-enabled .button--buy:focus-visible::after, .fx-enabled .button--dfg:hover::after, .fx-enabled .button--dfg:focus-visible::after, .fx-enabled .product-header__top-actions .button--primary:hover::after, .fx-enabled .product-header__top-actions .button--primary:focus-visible::after{ transform: translateX(135%); }

/* ---- CARDS (amplified lift + spotlight) ---- */
.fx-enabled [data-fx-card]{
  position: relative;
  isolation: isolate;
  transition:
    translate 260ms var(--ease-standard),
    border-color 260ms var(--ease-standard),
    box-shadow 340ms var(--ease-standard),
    filter 260ms var(--ease-standard);
}
.fx-enabled [data-fx-card]::after{
  content: "";
  position: absolute;
  z-index: 0;
  inset: -2px;
  pointer-events: none;
  opacity: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 28% 10%,rgb(242 123 53 / 22%),transparent 50%);
  transition: opacity 300ms var(--ease-standard);
}
.fx-enabled [data-fx-card] > *{ position: relative; z-index: 1; }
.fx-enabled [data-fx-card]:hover, .fx-enabled [data-fx-card]:focus-within{
  translate: 0 -10px;
  border-color: var(--color-interactive-border);
  box-shadow: var(--shadow-interactive-strong), 0 0 40px rgb(178 74 28 / 14%);
  filter: brightness(1.04);
}
.fx-enabled [data-fx-card]:hover::after, .fx-enabled [data-fx-card]:focus-within::after{ opacity: 1; }
.fx-enabled [data-fx-card] .card-title, .fx-enabled [data-fx-card] > strong{ transition: color 240ms var(--ease-standard), translate 240ms var(--ease-standard); }
.fx-enabled [data-fx-card]:hover .card-title, .fx-enabled [data-fx-card]:focus-within .card-title, .fx-enabled [data-fx-card]:hover > strong, .fx-enabled [data-fx-card]:focus-within > strong{
  color: var(--color-copper-pale);
  translate: 0 -2px;
}

/* ---- GRADIENT TEXT (faster cycle) ---- */
.fx-particle-canvas{
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .78;
}
.fx-enabled .home-hero, .fx-enabled .client-hero{ isolation: isolate; }
.fx-enabled .hero-title{
  background: linear-gradient(112deg, var(--color-text) 0%, var(--color-copper-pale) 18%, var(--color-copper-bright) 38%, var(--color-text) 58%, var(--color-copper-pale) 78%, var(--color-text) 100%);
  background-size: 320% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fx-gradient-shift 6s cubic-bezier(.45,0,.55,1) infinite alternate;
}
.fx-enabled .section-heading{
  background: linear-gradient(112deg, var(--color-copper-pale) 0%, var(--color-copper-bright) 22%, var(--color-copper-strong) 48%, var(--color-copper-bright) 74%, var(--color-copper-pale) 100%);
  background-size: 240% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fx-gradient-shift 7s cubic-bezier(.45,0,.55,1) infinite alternate;
}
.fx-enabled .card-title{
  background: linear-gradient(112deg, var(--color-copper-pale) 0%, var(--color-copper-bright) 35%, var(--color-copper-strong) 55%, var(--color-copper-bright) 75%, var(--color-copper-pale) 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fx-gradient-shift 8s cubic-bezier(.45,0,.55,1) infinite alternate;
}
/* Header wordmark gets the same treatment, tuned subtler (slower cycle, tighter background-size) for small text. The footer brand/product-title/
   copyright gradient lives in app.css instead of here — it has to run on
   every page, including legal/download pages that never load this file. */
.fx-enabled .brand__text strong, .fx-enabled .product-brand strong{
  background: linear-gradient(112deg, var(--color-text) 0%, var(--color-copper-pale) 22%, var(--color-copper-bright) 45%, var(--color-text) 68%, var(--color-copper-pale) 88%, var(--color-text) 100%);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fx-gradient-shift 9s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes fx-gradient-shift {
  0%{ background-position: 0% 50%; }
  100%{ background-position: 100% 50%; }
}
/* Off-screen animation pause: JS toggles this on the gradient-text elements
   via IntersectionObserver so the infinite background-position animation
   doesn't keep compositing off-screen. The `html` prefix is a deliberate
   specificity bump so this reliably beats the footer gradient rules in
   app.css (which load first — a tie would otherwise go the wrong way). */
html.fx-enabled .fx-anim-off{ animation-play-state: paused; }

/* ---- WORD STAGGER ENTRANCE (amplified) ---- */
.fx-enabled .hero-title span{
  display: inline;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  filter: blur(2px);
  background: inherit;
  background-size: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fx-word-enter 640ms cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: var(--fx-word-delay, 0ms);
}
@keyframes fx-word-enter {
  to{ opacity: 1; transform: translate3d(0,0,0); filter: blur(0); }
}

/* ---- DETAILS OPEN ---- */
.fx-details-open{ animation: fx-details-open 340ms cubic-bezier(.2,.8,.2,1); }
@keyframes fx-details-open {
  from{ opacity: 0; translate: 0 -10px; }
  to{ opacity: 1; translate: 0 0; }
}

/* ---- SECTION PARALLAX ---- */
.fx-enabled .fx-story-media{
  --fx-section-y: 0px;
  --fx-image-scale: 1;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: translate3d(0, var(--fx-section-y), 0) scale(var(--fx-image-scale));
  transition: transform 580ms cubic-bezier(.2,.8,.2,1), clip-path 720ms cubic-bezier(.16,1,.3,1);
  filter: drop-shadow(0 16px 34px rgb(0 0 0 / 28%)) drop-shadow(0 0 20px rgb(178 74 28 / 6%));
}

/* ---- LOGO ENTRANCE (amplified) ---- */
.fx-enabled .brand__mark, .fx-enabled .product-brand img{
  animation: fx-logo-enter 600ms cubic-bezier(.16,1,.3,1) 80ms both;
}
@keyframes fx-logo-enter {
  from{ opacity: 0; transform: scale(.76) rotate(-6deg); filter: blur(4px); }
  to{ opacity: 1; transform: scale(1) rotate(0deg); filter: blur(0); }
}

/* ---- SCROLL PROGRESS BAR ---- */
.fx-enabled::before{
  content: "";
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--color-copper-deep), var(--color-copper-bright), var(--color-copper-pale), var(--color-copper-bright));
  background-size: 200% 100%;
  width: calc(var(--fx-scroll-progress, 0) * 100%);
  transform-origin: left center;
  animation: fx-bar-glow 3s ease-in-out infinite alternate;
  box-shadow: 0 0 10px rgb(242 123 53 / 34%);
}
@keyframes fx-bar-glow {
  0%{ background-position: 0% 50%; }
  100%{ background-position: 100% 50%; }
}

/* ---- MAGNETIC HOVER ---- */
.fx-enabled [data-fx-magnetic]{
  --fx-mx: 0px;
  --fx-my: 0px;
  transform: translate3d(var(--fx-mx), var(--fx-my), 0);
  transition: transform 400ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.fx-enabled [data-fx-magnetic].fx-magnetized{
  transition: transform 80ms cubic-bezier(.16,1,.3,1);
}
@media (hover: none), (pointer: coarse) {
  .fx-enabled [data-fx-magnetic]{ transform: none; transition: none; will-change: auto; }
}

/* ---- CTA PULSE (amplified) ---- */
.fx-cta-pulse{
  animation:
    fx-cta-pulse 680ms cubic-bezier(.16,1,.3,1) 1,
    fx-cta-glow 900ms ease-out 660ms 1;
}
@keyframes fx-cta-pulse {
  0%{ transform: scale(1); }
  24%{ transform: scale(1.08); }
  52%{ transform: scale(.97); }
  76%{ transform: scale(1.015); }
  100%{ transform: scale(1); }
}
@keyframes fx-cta-glow {
  0%{ box-shadow: 0 0 0 0 rgb(242 123 53 / 60%); }
  100%{ box-shadow: 0 0 28px 12px rgb(242 123 53 / 0%); }
}

/* ---- LANGUAGE SWITCHER ---- */
.fx-enabled .language-nav a{
  transition: translate 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard), background 200ms var(--ease-standard);
}
.fx-enabled .language-nav a:hover, .fx-enabled .language-nav a:focus-visible{
  translate: 0 -3px;
  box-shadow: 0 6px 20px rgb(178 74 28 / 22%), 0 0 0 1px rgb(255 167 85 / 20%);
}
.fx-enabled .language-nav a:active{ translate: 0 0; }

/* ---- NAV INDICATOR UNDERLINE ---- */
.fx-enabled .primary-nav a, .fx-enabled .product-nav a{
  position: relative;
}
.fx-enabled .primary-nav a::after, .fx-enabled .product-nav a::after{
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-copper-strong), var(--color-copper-bright), var(--color-copper-pale));
  transform: translateX(-50%);
  transition: width 300ms cubic-bezier(.16,1,.3,1);
  pointer-events: none;
  box-shadow: 0 0 8px rgb(242 123 53 / 28%);
}
.fx-enabled .primary-nav a:hover::after, .fx-enabled .primary-nav a:focus-visible::after, .fx-enabled .product-nav a:hover::after, .fx-enabled .product-nav a:focus-visible::after{
  width: calc(100% - 6px);
}
.fx-enabled .primary-nav a[aria-current]::after, .fx-enabled .product-nav a[aria-current]::after{
  width: calc(100% - 6px);
  background: linear-gradient(90deg, var(--color-copper-bright), var(--color-copper-pale));
  box-shadow: 0 0 10px rgb(242 123 53 / 36%);
}

.fx-enabled .home-hero__actions .button--secondary, .fx-enabled .client-hero__actions .button--secondary{
  padding: 0 28px;
  border-color: var(--color-border-soft);
  color: var(--color-text);
  backface-visibility: hidden;
  will-change: box-shadow;
  pointer-events: auto;
  transform: none;
  translate: 0;
  scale: 1;
  rotate: 0deg;
  transition:
    background 200ms var(--ease-standard),
    color 200ms var(--ease-standard),
    box-shadow 280ms var(--ease-standard);
}
.fx-enabled .home-hero__actions .button--secondary:hover, .fx-enabled .home-hero__actions .button--secondary:focus-visible, .fx-enabled .client-hero__actions .button--secondary:hover, .fx-enabled .client-hero__actions .button--secondary:focus-visible{
  transform: none;
  translate: 0;
  scale: 1;
  rotate: 0deg;
  background: var(--surface-accent-hover);
  color: var(--color-heading-accent);
  box-shadow: var(--shadow-interactive-strong);
  filter: none;
}

/* ---- IMAGE EFFECTS ---- */

@property --fx-image-scale{
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

/* Clip-path + scale reveal: section images slide-unveil on scroll with stagger cascade.
   Each image enters sequentially — no click needed, fully dynamic. */
.fx-enabled .fx-story-section[data-fx-state="pending"] .fx-story-media{
  --fx-image-scale: 0.94;
  clip-path: inset(14% 0 0 0);
  transition-delay: var(--fx-image-delay, 0ms);
}
.fx-enabled .fx-story-section[data-fx-state="revealed"] .fx-story-media{
  --fx-image-scale: 1;
  clip-path: inset(0);
}

/* Overlay sweep: subtle copper shimmer slides across section screenshots on hover. */
.fx-enabled .fx-story-media::after{
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 30%, rgb(242 123 53 / 8%) 49%, transparent 68%);
  transform: translateX(-130%);
  transition: transform 620ms cubic-bezier(.2,.8,.2,1);
}
.fx-enabled .fx-story-media:hover::after, .fx-enabled .fx-story-media:focus-within::after{
  transform: translateX(130%);
}

/* All-but-me: focus shift — hovered card stays sharp, siblings dim. Buttons remain crisp. */
@supports selector(:has(*)){
  .fx-enabled [data-stagger]:has([data-fx-card]:hover) [data-fx-card]:not(:hover){
    opacity: .66;
    scale: .975;
    transition: opacity 380ms var(--ease-standard), scale 380ms var(--ease-standard);
  }
  .fx-enabled [data-stagger]:has([data-fx-card]:hover) [data-fx-card]:not(:hover) .card-title,
  .fx-enabled [data-stagger]:has([data-fx-card]:hover) [data-fx-card]:not(:hover) img,
  .fx-enabled [data-stagger]:has([data-fx-card]:hover) [data-fx-card]:not(:hover) strong{
    filter: blur(1.4px);
    transition: filter 380ms var(--ease-standard);
  }
}

/* Image hover: scale, saturation, copper ring — images come alive on interaction. */
.fx-enabled .fx-story-media, .fx-enabled .media-frame, .fx-enabled .client-media{
  box-shadow: 0 0 0 0 rgb(242 123 53 / 0%);
  scale: 1;
  filter: saturate(.88) brightness(1);
  transition:
    box-shadow 380ms var(--ease-standard),
    scale 380ms var(--ease-standard),
    filter 420ms var(--ease-standard);
}
.fx-enabled .fx-story-media img, .fx-enabled .media-frame img, .fx-enabled .client-media img{
  transition: transform 420ms var(--ease-standard);
}
.fx-enabled .fx-story-media:hover, .fx-enabled .media-frame:hover, .fx-enabled .client-media:hover, .fx-enabled .fx-story-media:focus-within, .fx-enabled .media-frame:focus-within{
  box-shadow: 0 0 0 1px rgb(242 123 53 / 30%), 0 0 26px rgb(178 74 28 / 12%);
  scale: 1.04;
  filter: saturate(1.08) brightness(1.06);
}
.fx-enabled .fx-story-media:hover img, .fx-enabled .media-frame:hover img, .fx-enabled .client-media:hover img{
  transform: scale(1.03);
}

/* Edge vignette: darkens image borders for cinematic depth — applied to the container. */
.fx-enabled .fx-story-media, .fx-enabled .client-media{
  --fx-vignette: radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / 28%) 100%);
}
.fx-enabled .fx-story-media::before{
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: var(--fx-vignette);
}

/* ---- CSS IMAGE SLIDER ---- */

.fx-image-slider{
  position: relative;
  overflow: hidden;
}
.fx-slider-track{
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 520ms cubic-bezier(.16,1,.3,1);
  will-change: transform;
}
.fx-slider-slide{
  flex: 0 0 100%;
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fx-slider-slide__link{
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
}
.fx-slider-slide img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  pointer-events: none;
}
.fx-slider-prev, .fx-slider-next{
  position: absolute;
  z-index: 5;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 50%;
  background: rgb(0 0 0 / 38%);
  color: var(--color-text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 240ms var(--ease-standard), background 240ms var(--ease-standard), box-shadow 240ms var(--ease-standard);
  backdrop-filter: blur(6px);
}
.fx-slider-prev{ left: 10px; }
.fx-slider-next{ right: 10px; }
.fx-image-slider:hover .fx-slider-prev, .fx-image-slider:hover .fx-slider-next, .fx-image-slider:focus-within .fx-slider-prev, .fx-image-slider:focus-within .fx-slider-next{
  opacity: 1;
}
.fx-slider-prev:hover, .fx-slider-next:hover{
  background: rgb(0 0 0 / 58%);
  box-shadow: 0 0 12px rgb(242 123 53 / 25%);
  border-color: rgb(242 123 53 / 40%);
}
.fx-slider-dots{
  position: absolute;
  z-index: 5;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.fx-slider-dots button{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 22%);
  background: rgb(0 0 0 / 30%);
  cursor: pointer;
  padding: 0;
  transition: background 240ms var(--ease-standard), border-color 240ms var(--ease-standard), box-shadow 240ms var(--ease-standard);
}
.fx-slider-dots button.active{
  background: var(--color-copper-bright);
  border-color: var(--color-copper-pale);
  box-shadow: 0 0 8px rgb(242 123 53 / 42%);
}

/* ---- MOBILE/TOUCH ADJUSTMENTS ---- */
@media (max-width: 939px), (hover: none), (pointer: coarse){
  .fx-enabled .fx-hero-plane{ --fx-pointer-x: 0px; --fx-pointer-y: 0px; --fx-rotate-x: 0deg; --fx-rotate-y: 0deg; }
  .fx-enabled [data-fx-card]:hover, .fx-enabled [data-fx-card]:focus-within{ translate: 0 -4px; }
}