/* Progressive motion: no dependencies and no content hidden without JavaScript. */
.motion-ready .hero { perspective: 1100px; }
.motion-ready .hero-picture { transform: translate3d(0,var(--hero-shift,0px),0) scale(1.06); }
.motion-ready .hero>.wrap:not(.hero-bottom) { position: relative; z-index: 2; }
.motion-ready .hero-bottom { z-index: 2; bottom: 76px; }
.motion-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .8; }
.motion-floor { position: absolute; pointer-events: none; z-index: 0; width: 150%; height: 360px; bottom: -210px; left: -25%; transform: rotateX(62deg); transform-origin: center top; background-image: linear-gradient(#8cc63f30 1px,transparent 1px),linear-gradient(90deg,#8cc63f30 1px,transparent 1px); background-size: 65px 65px; mask-image: linear-gradient(transparent,#0008 40%,transparent); -webkit-mask-image: linear-gradient(transparent,#0008 40%,transparent); opacity: .5; }
.motion-ready.motion-hero-visible:not(.motion-paused) .motion-floor { animation: tatami-drift 12s linear infinite; }
.motion-ready.motion-hero-visible:not(.motion-paused) .dot { animation: living-dot 2.8s ease-in-out infinite; }
.motion-ready.motion-hero-visible:not(.motion-paused) .hero h1 span { background: linear-gradient(105deg,#8cc63f 15%,#d3ffa0 40%,#8cc63f 65%); background-size: 240% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: title-light 9s ease-in-out infinite; }
.motion-ready .hero-kicker { text-shadow: 0 0 25px #8cc63f33; }
.motion-ready .depth-card { transform: perspective(950px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(var(--lift,0px)); transition: transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s; }
.motion-ready .depth-card.depth-active { --lift: -6px; border-color: #9ad34b80; box-shadow: calc(var(--shadow-x,0) * 1px) 20px 42px #0006,0 0 24px #8cc63f10; }
.motion-ready .tatami-rule { position: relative; overflow: hidden; }
.motion-ready .tatami-rule::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(450px circle at var(--x,50%) var(--y,0%),#8cc63f14,transparent 65%); transition: opacity .3s; }
.motion-ready .tatami-rule.depth-active::after { opacity: 1; }
.motion-ready .card-icon,.motion-ready .value-symbol { transition: filter .3s,transform .3s; }
.motion-ready .depth-active .card-icon,.motion-ready .depth-active .value-symbol { transform: translateY(-3px) scale(1.07); filter: drop-shadow(0 0 12px #8cc63f60); }
.motion-ready .rule-number { background: linear-gradient(130deg,#d1f9a8,#658745); background-clip: text; -webkit-background-clip: text; color: transparent; }
.motion-ready .gi-card { perspective: 600px; overflow: hidden; }
.motion-ready:not(.motion-paused) .gi-card.motion-inview .gi-swatch { animation: gi-float 5.5s ease-in-out infinite; animation-delay: var(--motion-delay,0ms); filter: drop-shadow(0 8px 5px #0008); }
.motion-ready .gi-blue { --motion-delay: -1800ms; }
.motion-ready .gi-black { --motion-delay: -3600ms; }
.motion-ready .btn-primary::before { content: ""; position: absolute; inset: -100% -40%; pointer-events: none; background: linear-gradient(100deg,transparent 42%,#ffffff60 50%,transparent 58%); transform: translateX(-110%) rotate(12deg); }
.motion-ready:not(.motion-paused) .btn-primary.motion-inview::before { animation: button-sheen 6s ease-in-out infinite; }
.motion-ready .btn-primary { isolation: isolate; }
.motion-ready .motion-toggle { position: fixed; left: 18px; bottom: 18px; z-index: 27; display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; min-height: 42px; border: 1px solid #8cc63f38; border-radius: 100px; color: #c5d7b7; background: #0a110bf2; font: 400 11px Outfit,Arial,sans-serif; box-shadow: 0 4px 20px #0004; cursor: pointer; }
.motion-toggle:hover { border-color: #8cc63f90; }
.motion-toggle:disabled { cursor: default; opacity: .8; }
.motion-toggle-icon { color: var(--green); font-size: 14px; }
.motion-ready [data-reveal].revealed { animation: none; }
.motion-paused *,.motion-paused *::before,.motion-paused *::after { animation: none!important; }
.motion-paused .depth-card,.motion-paused .depth-card:hover { transform: none!important; }
.motion-paused .hero-picture { transform: none; }
.motion-paused .motion-particles,.motion-paused .motion-floor { visibility: hidden; }
.motion-paused .hero h1 span { background: none; color: var(--green); }
.motion-paused { scroll-behavior: auto; }
.motion-tab-hidden *,.motion-tab-hidden *::before,.motion-tab-hidden *::after { animation-play-state: paused!important; }
@keyframes tatami-drift { to { background-position: 0 65px,0 65px; } }
@keyframes living-dot { 50% { box-shadow: 0 0 20px #b4ec77; opacity: .45; transform: scale(.75); } }
@keyframes title-light { 0%,100% { background-position: 100% 50%; } 50% { background-position: 0 50%; } }
@keyframes gi-float { 0%,100% { transform: translateY(0) rotateY(-13deg) rotateZ(-2deg); } 50% { transform: translateY(-6px) rotateY(15deg) rotateZ(2deg); } }
@keyframes button-sheen { 0%,65% { transform: translateX(-110%) rotate(12deg); } 90%,100% { transform: translateX(110%) rotate(12deg); } }
@media(max-width:760px) {
    .motion-floor { height: 220px; bottom: -130px; background-size: 45px 45px; }
    .motion-particles { opacity: .5; }
    .motion-ready .hero-picture { transform: none; }
    .motion-ready .motion-toggle { left: 12px; bottom: 12px; padding: 8px 11px; font-size: 10px; }
    .motion-ready .hero-bottom { bottom: 66px; }
    .motion-ready:not(.motion-paused) .gi-card.motion-inview .gi-swatch { animation-duration: 7s; }
}
@media(prefers-reduced-motion:reduce) {
    .motion-particles,.motion-floor { display: none; }
    .motion-ready .hero-picture,.motion-ready .depth-card { transform: none!important; }
    .motion-ready .hero h1 span { background: none!important; color: var(--green)!important; }
}