/*
 * Form Digital's shared motion layer. It is additive: content remains complete
 * without JavaScript, while the established page and portal choreography keeps
 * ownership of its own interactions. See docs/creative/ICONIC-SITE-MOTION.md.
 */
:root {
  --fd-motion-micro: 160ms;
  --fd-motion-beat: 360ms;
  --fd-motion-chapter: 700ms;
  --fd-motion-ease: var(--fd-ease);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
/* A deliberate response instead of a generic hover glow. */
html[data-fdg-iconic-motion="true"] :is(
  .cn-button,
  .button,
  .startup-text-link,
  .header nav > a,
  .startup-header nav > a,
  .portal-header > a,
  .site-footer a
) {
  -webkit-tap-highlight-color: transparent;
}
html[data-fdg-iconic-motion="true"] :is(.cn-button, .button):not([role="tab"], [data-motion-toggle], [data-motion-replay], [data-frame-replay], [aria-disabled="true"]) {
  position: relative;
  isolation: isolate;
  transition:
    transform var(--fd-motion-micro) var(--fd-motion-ease),
    box-shadow var(--fd-motion-micro) var(--fd-motion-ease),
    background-color var(--fd-motion-micro) var(--fd-motion-ease),
    color var(--fd-motion-micro) var(--fd-motion-ease),
    border-color var(--fd-motion-micro) var(--fd-motion-ease);
}
html[data-fdg-iconic-motion="true"] :is(.cn-button, .button):not([role="tab"], [data-motion-toggle], [data-motion-replay], [data-frame-replay], [aria-disabled="true"])::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--fd-cobalt);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--fd-motion-beat) var(--fd-motion-ease);
}
html[data-fdg-iconic-motion="true"] :is(.cn-button, .button):not([role="tab"], [data-motion-toggle], [data-motion-replay], [data-frame-replay], [aria-disabled="true"]):not(:disabled):hover,
html[data-fdg-iconic-motion="true"] :is(.cn-button, .button):not([role="tab"], [data-motion-toggle], [data-motion-replay], [data-frame-replay], [aria-disabled="true"]):not(:disabled):focus-visible {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 12px 24px rgb(5 7 11 / 12%);
}
html[data-fdg-iconic-motion="true"] :is(.cn-button, .button):not([role="tab"], [data-motion-toggle], [data-motion-replay], [data-frame-replay], [aria-disabled="true"]):not(:disabled):hover::after,
html[data-fdg-iconic-motion="true"] :is(.cn-button, .button):not([role="tab"], [data-motion-toggle], [data-motion-replay], [data-frame-replay], [aria-disabled="true"]):not(:disabled):focus-visible::after {
  transform: scaleX(1);
}
html[data-fdg-iconic-motion="true"] :is(.cn-button, .button):not([role="tab"], [data-motion-toggle], [data-motion-replay], [data-frame-replay], [aria-disabled="true"]):not(:disabled):active {
  transform: translate3d(0, 0, 0);
  box-shadow: none;
}
html[data-fdg-iconic-motion="true"] :is(.cn-button, .button):not([role="tab"], [data-motion-toggle], [data-motion-replay], [data-frame-replay], [aria-disabled="true"]) :is(svg, .icon, .action-arrow),
html[data-fdg-iconic-motion="true"] :is(.startup-text-link, .header nav > a, .startup-header nav > a, .portal-header > a, .site-footer a) :is(svg, .icon, .action-arrow) {
  transition: transform var(--fd-motion-micro) var(--fd-motion-ease);
}
html[data-fdg-iconic-motion="true"] :is(.cn-button, .button, .startup-text-link, .header nav > a, .startup-header nav > a, .portal-header > a, .site-footer a):hover :is(svg, .icon, .action-arrow),
html[data-fdg-iconic-motion="true"] :is(.cn-button, .button, .startup-text-link, .header nav > a, .startup-header nav > a, .portal-header > a, .site-footer a):focus-visible :is(svg, .icon, .action-arrow) {
  transform: translate3d(3px, -3px, 0);
}

/* Navigation is carried by a thin rule, not a new component or an animation circus. */
html[data-fdg-iconic-motion="true"] :is(.header nav > a, .startup-header nav > a, .portal-header > a):not(.cn-button) {
  position: relative;
}
html[data-fdg-iconic-motion="true"] :is(.header nav > a, .startup-header nav > a, .portal-header > a):not(.cn-button)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 1px;
  background: var(--fd-cobalt);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--fd-motion-beat) var(--fd-motion-ease);
}
html[data-fdg-iconic-motion="true"] :is(.header nav > a, .startup-header nav > a, .portal-header > a):not(.cn-button):hover::after,
html[data-fdg-iconic-motion="true"] :is(.header nav > a, .startup-header nav > a, .portal-header > a):not(.cn-button):focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}
html[data-fdg-iconic-motion="true"] .site-footer a {
  transition: color var(--fd-motion-micro) var(--fd-motion-ease), transform var(--fd-motion-micro) var(--fd-motion-ease);
}
/* Footer text retains its approved ink/quiet contrast; cobalt remains an accent. */

}

/* A three-sided aperture repeats the canonical frame language at chapter scale. */
.fd-motion-hero {
  position: relative;
  isolation: isolate;
}
.fd-motion-rail {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}
.fd-motion-rail > span {
  position: absolute;
  display: block;
  background: var(--fd-cobalt);
  transition:
    transform var(--fd-motion-chapter) var(--fd-motion-ease),
    opacity var(--fd-motion-beat) var(--fd-motion-ease);
}
.fd-motion-rail > span:nth-child(1) {
  inset: 0 0 auto 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: right center;
}
.fd-motion-rail > span:nth-child(2) {
  inset: 0 auto 0 0;
  width: 2px;
  transform: scaleY(0);
  transform-origin: top center;
  transition-delay: 100ms;
}
.fd-motion-rail > span:nth-child(3) {
  inset: auto 0 0 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition-delay: 200ms;
}
.fd-motion-hero--open .fd-motion-rail {
  opacity: 1;
  transition: opacity var(--fd-motion-micro) linear;
}
.fd-motion-hero--open .fd-motion-rail > span:nth-child(1),
.fd-motion-hero--open .fd-motion-rail > span:nth-child(3) {
  transform: scaleX(1);
}
.fd-motion-hero--open .fd-motion-rail > span:nth-child(2) {
  transform: scaleY(1);
}

/* The added aperture is confined to an existing photo window. Never cross copy. */
:where(.fd-motion-photo) { position: relative; }
.fd-motion-photo .fd-motion-rail {
  width: clamp(88px, 11vw, 170px);
  height: clamp(110px, 15vw, 210px);
  right: 24px;
  bottom: 72px;
}

/* The existing portal frame traces in a truthful, non-blocking way. */
[data-fdg-motion-scene="partners-auth"] .open-frame span {
  transition: transform var(--fd-motion-chapter) var(--fd-motion-ease);
}
[data-fdg-motion-scene="partners-auth"] .auth-story.fd-motion-hero--open .open-frame span:nth-child(1),
[data-fdg-motion-scene="partners-auth"] .auth-story.fd-motion-hero--open .open-frame span:nth-child(3) {
  transform: scaleX(1);
}
[data-fdg-motion-scene="partners-auth"] .auth-story.fd-motion-hero--open .open-frame span:nth-child(2) {
  transform: scaleY(1);
}
[data-fdg-motion-scene="partners-auth"] .auth-story:not(.fd-motion-hero--open) .open-frame span:nth-child(1),
[data-fdg-motion-scene="partners-auth"] .auth-story:not(.fd-motion-hero--open) .open-frame span:nth-child(3) {
  transform: scaleX(0);
}
[data-fdg-motion-scene="partners-auth"] .auth-story:not(.fd-motion-hero--open) .open-frame span:nth-child(2) {
  transform: scaleY(0);
}

/* “Reduced” and a user's visible pause choice always resolve to the final reading state. */
html[data-fdg-motion-state="paused"] .fd-motion-rail,
html[data-fdg-motion-state="settled"] .fd-motion-rail {
  opacity: 1;
}
html[data-fdg-motion-state="paused"] .fd-motion-rail > span,
html[data-fdg-motion-state="settled"] .fd-motion-rail > span:nth-child(1),
html[data-fdg-motion-state="settled"] .fd-motion-rail > span:nth-child(3) {
  transform: scaleX(1);
}
html[data-fdg-motion-state="paused"] .fd-motion-rail > span:nth-child(2),
html[data-fdg-motion-state="settled"] .fd-motion-rail > span:nth-child(2) {
  transform: scaleY(1);
}

/* Narrow layouts keep the approved photo/frame composition, without an extra rail. */
@media (max-width: 760px) {
  .fd-motion-rail { display: none; }
}

@media (prefers-reduced-motion: reduce), print {
  .fd-motion-rail,
  .fd-motion-rail > span,
  html[data-fdg-iconic-motion="true"] :is(.cn-button, .button, .startup-text-link, .header nav > a, .startup-header nav > a, .portal-header > a, .site-footer a),
  html[data-fdg-iconic-motion="true"] :is(.cn-button, .button, .startup-text-link, .header nav > a, .startup-header nav > a, .portal-header > a, .site-footer a)::after,
  html[data-fdg-iconic-motion="true"] :is(.cn-button, .button):not([role="tab"], [data-motion-toggle], [data-motion-replay], [data-frame-replay], [aria-disabled="true"])::after,
  html[data-fdg-iconic-motion="true"] :is(.cn-button, .button, .startup-text-link, .header nav > a, .startup-header nav > a, .portal-header > a, .site-footer a) :is(svg, .icon, .action-arrow) {
    animation: none !important;
    transition: none !important;
  }
  .fd-motion-rail {
    display: none;
  }
}

/* Interruptions are a hard cut to the readable final state, never a second animation. */
html[data-fdg-motion-state="paused"] .fd-motion-rail,
html[data-fdg-motion-state="paused"] .fd-motion-rail > span,
html[data-fdg-motion-state="settled"] .fd-motion-rail,
html[data-fdg-motion-state="settled"] .fd-motion-rail > span {
  transition: none !important;
}

/* A stored pause, interruption or reduced preference never leaves an unfinished frame. */
html:is([data-fdg-motion-state="paused"], [data-fdg-motion-state="settled"]) .open-frame span {
  transform: none !important;
  transition: none !important;
}
html[data-fdg-motion-state="paused"] :is(.cn-button, .button, .startup-text-link, .header nav > a, .startup-header nav > a, .portal-header > a, .site-footer a),
html[data-fdg-motion-state="paused"] :is(.cn-button, .button, .header nav > a, .startup-header nav > a, .portal-header > a)::after,
html[data-fdg-motion-state="paused"] :is(.cn-button, .button)::after,
html[data-fdg-motion-state="paused"] :is(.cn-button, .button, .startup-text-link, .header nav > a, .startup-header nav > a, .portal-header > a, .site-footer a) :is(svg, .icon, .action-arrow) {
  transition: none !important;
  transform: none !important;
}