/*
 * DaniConsult production motion system
 * Selected curated composition from Motion Refinement Round 2
 */

.founder-top {
  grid-template-columns: minmax(290px, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
}

.founder-identity {
  display: grid;
  gap: 26px;
}

.founder-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  width: min(100%, 390px);
  margin: 0;
  overflow: hidden;
  background: #c9c0b1;
  border: 2px solid var(--ink);
  box-shadow: 12px 12px 0 var(--ink);
}

.founder-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}

.founder-portrait figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
  color: var(--white);
  background: rgba(17, 16, 15, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
}

.founder-portrait figcaption strong {
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
}

.founder-portrait figcaption span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.motion-flow-layer {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

.motion-ready .motion-flow-layer {
  visibility: visible;
  opacity: 1;
  transition: opacity 360ms ease;
}

.flow-path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 9 15;
  vector-effect: non-scaling-stroke;
}

.flow-path-two,
.flow-path-three {
  stroke: var(--orange);
}

.flow-node {
  fill: var(--white);
  stroke: var(--ink);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.flow-hub {
  fill: var(--acid);
  stroke: var(--ink);
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

.motion-ready .motion-target[data-motion-treatment] {
  transition-property: opacity, translate, scale, rotate, filter, clip-path;
  transition-delay: var(--motion-delay, 0ms);
}

.motion-ready .motion-section {
  isolation: isolate;
}

.motion-ready .motion-section,
.motion-ready .site-header {
  overflow-x: clip;
}

.motion-ready .motion-target[data-motion-treatment="signal"] {
  opacity: 0.01;
  translate: 0 22px;
  filter: saturate(0.65);
  transition-duration: 720ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.motion-ready .motion-target[data-motion-treatment="signal"].is-visible {
  opacity: 1;
  translate: 0 0;
  filter: saturate(1);
}

.motion-ready .motion-target[data-motion-treatment="quiet"] {
  opacity: 0.01;
  translate: 0 18px;
  filter: blur(4px);
  transition-duration: 780ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-ready .motion-target[data-motion-treatment="quiet"].is-visible {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
}

.motion-ready .motion-target[data-motion-treatment="precision"] {
  opacity: 0.3;
  translate: -12px 0;
  clip-path: inset(0 96% 0 0);
  transition-duration: 760ms;
  transition-timing-function: cubic-bezier(0.77, 0, 0.18, 1);
}

.motion-ready .motion-target[data-motion-treatment="precision"].is-visible {
  opacity: 1;
  translate: 0 0;
  clip-path: inset(0 0 0 0);
}

.motion-ready .motion-target[data-motion-treatment="kinetic"] {
  opacity: 0.01;
  translate: var(--motion-entry-x, 0) var(--motion-entry-y, 54px);
  rotate: var(--motion-entry-rotate, 0deg);
  scale: var(--motion-entry-scale, 0.9);
  transition-duration: 900ms;
  transition-timing-function: cubic-bezier(0.17, 1.32, 0.34, 1);
}

.motion-ready .motion-target[data-motion-treatment="kinetic"][data-motion-role="bar"] {
  opacity: 0.35;
  translate: 0 0;
  rotate: 0deg;
  scale: 1 0.08;
  transform-origin: bottom;
  transition-duration: 760ms;
}

.motion-ready .motion-target[data-motion-treatment="kinetic"].is-visible {
  opacity: 1;
  translate: 0 0;
  rotate: 0deg;
  scale: 1;
}

.motion-ready .flow-path {
  animation: motion-flow-dash 1.1s linear infinite paused;
}

.motion-ready .flow-path-two {
  animation-delay: -250ms;
}

.motion-ready .flow-path-three {
  animation-delay: -500ms;
}

.motion-ready .flow-path-four {
  animation-delay: -750ms;
}

.motion-ready .campaign-canvas.is-in-view .flow-path {
  animation-play-state: running;
}

.motion-ready .flow-node,
.motion-ready .flow-hub {
  animation: motion-signal-pulse 1.8s ease-in-out infinite paused;
  transform-box: fill-box;
  transform-origin: center;
}

.motion-ready .flow-node-two {
  animation-delay: -450ms;
}

.motion-ready .flow-node-three {
  animation-delay: -900ms;
}

.motion-ready .flow-node-four {
  animation-delay: -1.35s;
}

.motion-ready .campaign-canvas.is-in-view .flow-node,
.motion-ready .campaign-canvas.is-in-view .flow-hub {
  animation-play-state: running;
}

.motion-ready .tracking-board.is-in-view .event-dot {
  animation: motion-event-pulse 2.4s ease-in-out infinite;
}

.motion-ready .tracking-board.is-in-view .event-row:nth-child(2) .event-dot {
  animation-delay: 600ms;
}

.motion-ready .tracking-board.is-in-view .event-row:nth-child(3) .event-dot {
  animation-delay: 1.2s;
}

.motion-ready .tracking-board.is-in-view .event-row:nth-child(4) .event-dot {
  animation-delay: 1.8s;
}

.motion-ready .signal-strip.is-in-view .signal-inner b {
  animation: motion-signal-plus 1.8s ease-in-out infinite;
}

@keyframes motion-flow-dash {
  to { stroke-dashoffset: -48; }
}

@keyframes motion-signal-pulse {
  0%, 100% { opacity: 0.62; scale: 0.86; }
  45% { opacity: 1; scale: 1.28; }
}

@keyframes motion-event-pulse {
  0%, 22%, 100% { box-shadow: 0 0 0 0 rgba(216, 255, 55, 0); }
  10% { box-shadow: 0 0 0 10px rgba(216, 255, 55, 0.18); }
}

@keyframes motion-signal-plus {
  0%, 100% { opacity: 0.5; scale: 0.8; }
  50% { opacity: 1; scale: 1.18; }
}

@media (max-width: 1000px) {
  .founder-top {
    grid-template-columns: 1fr;
  }

  .founder-portrait {
    width: min(520px, 78vw);
  }
}

@media (max-width: 760px) {
  .founder-identity {
    gap: 20px;
  }

  .founder-portrait {
    width: 100%;
    max-width: 440px;
    box-shadow: 8px 8px 0 var(--ink);
  }

  .motion-ready .motion-target[data-motion-treatment="kinetic"] {
    --motion-entry-x: 0 !important;
    --motion-entry-y: 36px !important;
  }
}

@media (max-width: 380px) {
  .founder-portrait figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .engagements h2 {
    font-size: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .motion-target[data-motion-treatment],
  .motion-ready .motion-target[data-motion-treatment].is-visible {
    opacity: 1 !important;
    translate: 0 0 !important;
    rotate: 0deg !important;
    scale: 1 !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }

  .motion-ready .flow-path,
  .motion-ready .flow-node,
  .motion-ready .flow-hub,
  .motion-ready .event-dot,
  .motion-ready .signal-inner b {
    animation: none !important;
  }
}