/* The growth curve carries the rhythm; photos and delivery objects follow it. */
.growth-line-flow { opacity: 0; stroke: #fff3f7; stroke-width: 4; stroke-linecap: round; stroke-dasharray: .065 .935; pointer-events: none; }

:where(html.has-motion:not(.is-reduced-motion)) .hero-photo-frame { translate: var(--pointer-x, 0px) calc(var(--pointer-y, 0px) + var(--hero-progress, 0) * 14px); transition: translate .35s var(--ease); }
:where(html.has-motion:not(.is-reduced-motion)) .hero-operation-tag { translate: calc(var(--pointer-x, 0px) * -.6) calc(var(--pointer-y, 0px) * -.6); transition: translate .4s var(--ease); }
:where(html.has-motion:not(.is-reduced-motion)) .growth-line-flow { animation: growthSignal 4.6s 1.7s linear infinite; }
:where(html.has-motion:not(.is-reduced-motion)) .case-bars i { animation: barsIn .8s .9s var(--ease) backwards, barRhythm 4.4s 1.7s ease-in-out infinite; }
:where(html.has-motion:not(.is-reduced-motion)) .case-bars i:nth-child(2) { animation-delay: 1s, 1.9s; }
:where(html.has-motion:not(.is-reduced-motion)) .case-bars i:nth-child(3) { animation-delay: 1.1s, 2.1s; }
:where(html.has-motion:not(.is-reduced-motion)) .case-bars i:nth-child(4) { animation-delay: 1.2s, 2.3s; }
:where(html.has-motion:not(.is-reduced-motion)) .case-bars i:nth-child(5) { animation-delay: 1.3s, 2.5s; }

:where(html.has-motion:not(.is-reduced-motion)) .about-photo img { transform: translateY(var(--object-y, 0px)) rotate(var(--object-angle, 0deg)); animation: photoDrift 7.5s ease-in-out infinite; }
:where(html.has-motion:not(.is-reduced-motion)) .about-photo:nth-child(2) img { animation-delay: -2.5s; animation-direction: reverse; }
:where(html.has-motion:not(.is-reduced-motion)) .about-photo:nth-child(3) img { animation-delay: -5s; }

/* One active delivery moves at a time; neighboring cards keep their preview. */
:where(html.has-motion:not(.is-reduced-motion)) .delivery-photo > img { animation: deliveryLens 12s ease-in-out infinite; }
:where(html.has-motion:not(.is-reduced-motion)) .guidance-sheet, :where(html.has-motion:not(.is-reduced-motion)) .campaign-window { animation: objectDrift 6s ease-in-out infinite; }
:where(html.has-motion:not(.is-reduced-motion)) .creative-print-front { animation: creativeFront 7s ease-in-out infinite; }
:where(html.has-motion:not(.is-reduced-motion)) .creative-print-back { animation: creativeBack 7s ease-in-out infinite; }
:where(html.has-motion:not(.is-reduced-motion)) .funnel-step { animation: funnelFlow 3.6s ease-in-out infinite; }
:where(html.has-motion:not(.is-reduced-motion)) .funnel-step:nth-of-type(3) { animation-delay: .45s; }
:where(html.has-motion:not(.is-reduced-motion)) .funnel-step:nth-of-type(5) { animation-delay: .9s; }
:where(html.has-motion:not(.is-reduced-motion)) .funnel-connector { position: relative; overflow: hidden; }
:where(html.has-motion:not(.is-reduced-motion)) .funnel-connector::after { content: ""; position: absolute; inset: -10px 0 auto; height: 10px; background: #ffe6ef; animation: connectorFlow 3.6s .25s ease-in-out infinite; }
:where(html.has-motion:not(.is-reduced-motion)) .funnel-connector:nth-of-type(4)::after { animation-delay: .7s; }

:where(html.has-motion:not(.is-reduced-motion)) .is-enhanced .deliverable-copy > *, :where(html.has-motion:not(.is-reduced-motion)) .is-enhanced .delivery-photo-caption { transition: translate .65s var(--ease), opacity .45s var(--ease); translate: 0 10px; }
:where(html.has-motion:not(.is-reduced-motion)) .is-enhanced .deliverable.is-active .deliverable-copy > *, :where(html.has-motion:not(.is-reduced-motion)) .is-enhanced .deliverable.is-active .delivery-photo-caption { translate: 0 0; }
:where(html.has-motion:not(.is-reduced-motion)) .is-enhanced .deliverable.is-active .deliverable-copy h3 { transition-delay: 45ms; }
:where(html.has-motion:not(.is-reduced-motion)) .is-enhanced .deliverable.is-active .deliverable-copy > p { transition-delay: 90ms; }
:where(html.has-motion:not(.is-reduced-motion)) .is-enhanced .deliverable.is-active .deliverable-copy > ul { transition-delay: 135ms; }
:where(html.has-motion:not(.is-reduced-motion)) .is-enhanced .deliverable.is-active .delivery-photo-caption { transition-delay: 100ms; }
:where(html.has-motion:not(.is-reduced-motion)) .is-enhanced .deliverable { transition: border-color .35s, opacity .5s var(--ease); }

:where(html.has-motion:not(.is-reduced-motion)) .button-primary { position: relative; overflow: hidden; isolation: isolate; }
:where(html.has-motion:not(.is-reduced-motion)) .button-primary::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: -35%; width: 25%; background: linear-gradient(90deg, transparent, #ffffff26, transparent); transform: skewX(-18deg); pointer-events: none; }
:where(html.has-motion:not(.is-reduced-motion)) .button-primary:hover::after, :where(html.has-motion:not(.is-reduced-motion)) .button-primary:focus-visible::after { animation: buttonSweep .65s var(--ease); }
:where(html.has-motion:not(.is-reduced-motion)) .video-card .play-button svg { transition: transform .3s var(--ease); }
:where(html.has-motion:not(.is-reduced-motion)) .video-card:hover .play-button svg, :where(html.has-motion:not(.is-reduced-motion)) .video-card:focus-visible .play-button svg { transform: translateX(2px); }

@media (hover: hover) and (pointer: fine) {
  :where(html.has-motion:not(.is-reduced-motion)) .video-card.reveal.is-visible:hover { transform: translateY(-8px); }
}
:where(html.has-motion:not(.is-reduced-motion)) .video-card.reveal.is-visible:focus-visible { transform: translateY(-4px); }

/* Pause new loops outside their scene, on inactive slides, and in hidden tabs. */
:where(html.has-motion:not(.is-reduced-motion)) .motion-scene:not(.is-motion-visible) .growth-line-flow,
:where(html.has-motion:not(.is-reduced-motion)) .motion-scene:not(.is-motion-visible) .case-bars i,
:where(html.has-motion:not(.is-reduced-motion)) .motion-scene:not(.is-motion-visible) .about-photo img,
:where(html.has-motion:not(.is-reduced-motion)) .motion-scene:not(.is-motion-visible) .deliverable-visual *,
:where(html.has-motion:not(.is-reduced-motion)) .motion-scene:not(.is-motion-visible) .funnel-connector::after,
:where(html.has-motion:not(.is-reduced-motion)) .deliverable:not(.is-active) .deliverable-visual *,
:where(html.has-motion:not(.is-reduced-motion)) .deliverable:not(.is-active) .funnel-connector::after,
:where(html.has-motion:not(.is-reduced-motion).is-page-hidden) .growth-line-flow,
:where(html.has-motion:not(.is-reduced-motion).is-page-hidden) .case-bars i,
:where(html.has-motion:not(.is-reduced-motion).is-page-hidden) .about-photo img,
:where(html.has-motion:not(.is-reduced-motion).is-page-hidden) .deliverable-visual *,
:where(html.has-motion:not(.is-reduced-motion).is-page-hidden) .funnel-connector::after { animation-play-state: paused !important; }

@media (max-width: 600px) {
  :where(html.has-motion:not(.is-reduced-motion)) .about-photo img { animation-name: photoDriftSmall; }
  :where(html.has-motion:not(.is-reduced-motion)) .delivery-photo > img { animation-name: deliveryLensSmall; }
}


@keyframes growthSignal {
  0% { stroke-dashoffset: .065; opacity: 0; }
  9%, 80% { opacity: .95; }
  95%, 100% { stroke-dashoffset: -1; opacity: 0; }
}
@keyframes barRhythm { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.67); } }
@keyframes photoDrift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes photoDriftSmall { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes deliveryLens { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes deliveryLensSmall { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes objectDrift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes creativeFront { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: -3px -9px; rotate: -2deg; } }
@keyframes creativeBack { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 3px 6px; rotate: 2deg; } }
@keyframes funnelFlow { 0%, 15%, 60%, 100% { transform: scale(1); } 35% { transform: scale(1.035); } }
@keyframes connectorFlow { 0%, 5% { transform: translateY(0); opacity: 0; } 15%, 50% { opacity: 1; } 65%, 100% { transform: translateY(38px); opacity: 0; } }
@keyframes buttonSweep { from { translate: 0 0; } to { translate: 570% 0; } }

@media (prefers-reduced-motion: reduce) {
  :where(html:not(.is-full-motion-preview)) .growth-line-flow { display: none; }
  :where(html:not(.is-full-motion-preview)) .about-photo img { transform: none; translate: none; rotate: none; }
}