@keyframes kp-fan-1 { to { translate: -6% 0; } }
@keyframes kp-fan-2 { to { translate: 7% 0; } }
@keyframes kp-fan-3 { to { translate: 18% 0; } }
.page-hero:has(.kp-sub-hero) { view-timeline: --kp-subhero block; }
@supports (animation-timeline: view()) and (animation-range: entry 0% entry 160px) {
@media (prefers-reduced-motion: no-preference) {
html:not([data-motion="off"]) .kp-near .k-look-fig { animation: kp-in-pop linear; animation-timeline: view(); animation-range: entry 0% entry 100%; animation-range: entry 0% entry min(100%, 200px); }
html:not([data-motion="off"]) .kp-near .k-look-grid > .k-look-fig:nth-child(3n+2) { animation-timing-function: linear(0, 0 12%, 1); }
html:not([data-motion="off"]) .kp-near .k-look-grid > .k-look-fig:nth-child(3n+3) { animation-timing-function: linear(0, 0 22%, 1); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
html:not([data-motion="off"]) .kp-sub-hero .kp-page--1 { animation: kp-fan-1 linear; animation-timeline: --kp-subhero; animation-range: exit 0% exit 80%; }
html:not([data-motion="off"]) .kp-sub-hero .kp-page--2 { animation: kp-fan-2 linear; animation-timeline: --kp-subhero; animation-range: exit 0% exit 80%; }
html:not([data-motion="off"]) .kp-sub-hero .kp-page--3 { animation: kp-fan-3 linear; animation-timeline: --kp-subhero; animation-range: exit 0% exit 80%; }
}
}
.kp-deal { position: relative; }
.kp-deal .k-look-fig:nth-child(1) { --px: calc(2.5 * (100% + 14px) - 10px); --py: -4px; --pr: -4deg; --pz: 6; }
.kp-deal .k-look-fig:nth-child(2) { --px: calc(1.5 * (100% + 14px) - 5px); --py: -11px; --pr: 3deg; --pz: 5; }
.kp-deal .k-look-fig:nth-child(3) { --px: calc(.5 * (100% + 14px)); --py: -6px; --pr: -2deg; --pz: 4; }
.kp-deal .k-look-fig:nth-child(4) { --px: calc(-.5 * (100% + 14px)); --py: -10px; --pr: 3deg; --pz: 4; }
.kp-deal .k-look-fig:nth-child(5) { --px: calc(-1.5 * (100% + 14px) + 5px); --py: -5px; --pr: -1deg; --pz: 5; }
.kp-deal .k-look-fig:nth-child(6) { --px: calc(-2.5 * (100% + 14px) + 10px); --py: -12px; --pr: 2deg; --pz: 6; }
@keyframes kp-deal-a { 0%, 34% { translate: var(--px) var(--py); rotate: var(--pr); } 41% { rotate: calc(var(--pr) * -.4); } 46%, 100% { translate: 0 0; rotate: 0deg; } }
@keyframes kp-deal-b { 0%, 40% { translate: var(--px) var(--py); rotate: var(--pr); } 47% { rotate: calc(var(--pr) * -.4); } 52%, 100% { translate: 0 0; rotate: 0deg; } }
@keyframes kp-deal-c { 0%, 52% { translate: var(--px) var(--py); rotate: var(--pr); } 59% { rotate: calc(var(--pr) * -.4); } 64%, 100% { translate: 0 0; rotate: 0deg; } }
@keyframes kp-cover  { 0%, 45% { opacity: 1; translate: -50% -8px; } 52%, 100% { opacity: 0; translate: -50% -34px; } }
@keyframes kp-deal-rule { 0%, 34% { scale: .15 1; } 64%, 100% { scale: 1 1; } }
@supports (animation-timeline: view()) and (animation-range: entry 0% entry 160px) and (timeline-scope: --kp-deal) {
@media (prefers-reduced-motion: no-preference) and (min-width: 960px) and (min-height: 760px) and (max-height: 1500px) {
html.kp-js[data-kp-deal="on"] .kp-deal { timeline-scope: --kp-deal; }
html.kp-js[data-kp-deal="on"] .kp-deal .k-look-grid { position: relative; view-timeline: --kp-deal block; }
html.kp-js[data-kp-deal="on"] .kp-deal .k-look-grid::before { content: ""; position: absolute; z-index: 20; left: 50%; top: 0; width: calc((100% - 70px) / 6); aspect-ratio: 760 / 984; translate: -50% -8px; rotate: -1.5deg; opacity: 0; pointer-events: none; background: #fff url(../img/sample-report/cover.jpg?v=20261005a) center / cover no-repeat; border-radius: 4px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06); }
html.kp-js[data-kp-deal="on"] .kp-deal .k-look-fig { position: relative; }
html.kp-js[data-kp-deal="on"] .kp-deal .k-look-open { position: relative; z-index: var(--pz, 1); }
html.kp-js[data-kp-deal="on"] .kp-deal .k-look-fig::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 760 / 984; background: rgba(243, 238, 228, .04); border-radius: 6px; }
html.kp-js[data-kp-deal="on"]:not([data-motion="off"]) .kp-deal .k-look-fig { animation: none; }
html.kp-js[data-kp-deal="on"]:not([data-motion="off"]) .kp-near .kp-deal .k-look-open { animation: kp-deal-a linear; animation-timeline: --kp-deal; }
html.kp-js[data-kp-deal="on"]:not([data-motion="off"]) .kp-near .kp-deal .k-look-fig:is(:nth-child(2), :nth-child(5)) .k-look-open { animation-name: kp-deal-b; }
html.kp-js[data-kp-deal="on"]:not([data-motion="off"]) .kp-near .kp-deal .k-look-fig:is(:nth-child(3), :nth-child(4)) .k-look-open { animation-name: kp-deal-c; }
html.kp-js[data-kp-deal="on"]:not([data-motion="off"]) .kp-near .kp-deal .k-look-grid::before { animation: kp-cover linear; animation-timeline: --kp-deal; }
html.kp-js[data-kp-deal="on"] .kp-deal .k-look-title { position: relative; padding-bottom: 10px; }
html.kp-js[data-kp-deal="on"] .kp-deal .k-look-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 220px; height: 1px; background: var(--accent); transform-origin: 0 50%; }
html.kp-js[data-kp-deal="on"]:not([data-motion="off"]) .kp-near .kp-deal .k-look-title::after { animation: kp-deal-rule linear; animation-timeline: --kp-deal; }
html.kp-js[data-kp-deal="on"] .kp-deal:has(.k-look-open:focus-visible) .k-look-open,
html.kp-js[data-kp-deal="on"] .kp-deal:has(.k-look-open:focus-visible) .k-look-grid::before { animation: none !important; }
}
}