/* Elyxium Group homepage — feedback for the existing controls and index. */
.group-motion .cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background 240ms var(--ease), color 240ms var(--ease),
    transform 140ms var(--ease);
}

.group-motion .cta::before {
  content: "";
  position: absolute;
  top:var(--button-y,100%);
  left:var(--button-x,50%);
  width:var(--button-disc,640px);
  height:var(--button-disc,640px);
  border-radius:50%;
  z-index: 0;
  pointer-events: none;
  background:currentColor;
  opacity: .12;
  transform:translate(-50%,-50%) scale(0);
  transition:transform 420ms var(--ease),opacity 180ms linear;
}

.group-motion .cta:focus-visible::before {
  transform:translate(-50%,-50%) scale(1);
}

.group-motion .cta:active,
.group-motion .cta.group-pressed {
  transform: none;
  box-shadow:inset 0 0 0 1px currentColor;
}
.group-motion .group-control-label{position:relative;z-index:1;pointer-events:none;}
/* If the shared reveal layer provides magnetic coordinates, use them inside
   the button rather than moving its hit area. Press owns transform; hover
   owns individual translate, so the two responses never overwrite each other. */
.group-motion .cta.group-control{transform:none;will-change:auto}
.group-motion .cta.group-control .group-control-label{
  translate:clamp(-2px,var(--mx,0px),2px) clamp(-1px,var(--my,0px),1px);
}
.group-motion .cta.group-pressed::before{transform:translate(-50%,-50%) scale(1);opacity:.23;transition-duration:120ms}
.group-motion .group-control:is(.lnk,.rcard__acts a).group-pressed{color:var(--ink)}
.group-motion .lnk.group-control::after{width:36px;flex:0 0 36px;transform-origin:left center;}
.group-motion .lnk.group-control:is(:hover,:focus-visible)::after{width:36px;transform:translateX(3px) scaleX(1.45)}
.group-motion .lnk.group-control.group-pressed::after{transform:translateX(3px) scaleX(.65);transition-duration:100ms}
.group-motion .rcard__acts .group-control::after{transition-duration:280ms}
.group-motion .rcard__acts .group-control:focus-visible::after{transform:scaleX(1);transform-origin:left center}
.group-motion .rcard__acts .group-control.group-pressed::after{transform:scaleX(.65);transform-origin:left center;transition-duration:100ms}
.group-motion .group-control:focus-visible{outline:2px solid var(--gold-deep);outline-offset:5px}
.group-motion .cta:disabled::before{display:none}

/* A fixed hit area, with only its existing rule moving toward the destination. */
@media screen and (min-width:1100px) and (prefers-reduced-motion:no-preference){
  .group-motion .lnk::after{transform-origin:left center;transition:transform 280ms var(--ease),width 280ms var(--ease),opacity 180ms linear}
  .group-motion .lnk:is(:hover,:focus-visible)::after{transform:translateX(4px);opacity:1}
}

.group-motion .cta:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 4px;
}

.group-motion .hero .cta:focus-visible {
  outline-color: var(--lite);
}

/* One hairline moves between the existing destinations. Without the module,
   the original per-link underline remains available. */
.group-motion .nav.group-nav-controls a::after {
  display: none;
}

.group-motion .nav .group-nav-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background: var(--gold);
  pointer-events: none;
  transform-origin: left center;
  transform: translate3d(var(--group-nav-x, 0px), var(--group-nav-y, 0px), 0)
    scaleX(var(--group-nav-width, 1));
  opacity: 0;
  transition: transform 320ms var(--ease), opacity 160ms linear;
}

.group-motion .nav.group-nav-visible .group-nav-line {
  opacity: 1;
}

.group-motion .nav.group-nav-snap .group-nav-line {
  transition: none;
}

.group-motion .nav a:focus-visible {
  color: var(--ink);
  outline-offset: 5px;
}

.group-motion .nav a.nav-access:focus-visible {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: var(--cream);
}

@media (min-width: 861px) {
  .group-motion .nav.group-nav-controls {
    position: relative;
  }
}

/* Articles remain reading content. A focusable article has no button role,
   click handler, pointer cursor, or concealed secondary action. */
.group-motion #services .idx__cell {
  position: relative;
  isolation: isolate;
}

.group-motion #services .idx__cell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--cream-warm);
  opacity: 0;
  transition: opacity 240ms var(--ease);
}

.group-motion #services .idx__cell .ico {
  transform: translate3d(0, 0, 0);
  transition: transform 300ms var(--ease), opacity 180ms linear;
}

.group-motion #services .idx__cell:focus-within::before {
  opacity: .78;
}

.group-motion #services .idx__cell:focus-within .ico {
  transform: translate3d(3px, -2px, 0);
  opacity: 1;
}

.group-motion #services .idx__cell:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: -2px;
}

.group-motion .lnk:focus-visible::after {
  width: 56px;
}

@media (hover: hover) and (pointer: fine) {
  .group-motion .cta:hover::before {
    transform:translate(-50%,-50%) scale(1);
  }

  .group-motion #services .idx__cell:hover::before {
    opacity: .78;
  }

  .group-motion #services .idx__cell:hover .ico {
    transform: translate3d(3px, -2px, 0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .group-motion .cta,
  .group-motion .cta::before,
  .group-motion .nav a,
  .group-motion .nav .group-nav-line,
  .group-motion #services .idx__cell::before,
  .group-motion #services .idx__cell .ico,
  .group-motion .lnk::after {
    transition: none;
  }

  .group-motion .cta::before {
    display: none;
  }

  .group-motion .cta:active,
  .group-motion .cta.group-pressed,
  .group-motion #services .idx__cell .ico,
  .group-motion #services .idx__cell:is(:hover, :focus-within) .ico {
    transform: none;
  }
}

@media print {
  .group-motion .cta::before,
  .group-motion .nav .group-nav-line,
  .group-motion #services .idx__cell::before {
    display: none;
  }
}


/* Access-dot blink lives on `.nav a.nav-access::before` in elyxium.css. */