@charset "UTF-8";
/* Motion Design follows the shared production-page layout. Only its concept artwork is custom. */
.motion-design-page .commerce-hero.commerce-hero-showcase{min-height:460px;padding:42px 0 57px}
.motion-visual{position:relative;width:min(100%,700px);margin:auto;padding:17px 23px 28px}
.motion-visual:before{content:"";position:absolute;inset:10% 5% 6%;border:1px solid #a1b49b;border-radius:50%;transform:rotate(-22deg);box-shadow:0 0 0 30px #dce7d630,0 0 0 70px #dce7d51a;pointer-events:none}
.motion-reel{position:relative;z-index:1;aspect-ratio:1.38;padding:19px 23px 17px;border:1px solid #374a3a;border-radius:13px;background:#17231d;color:#f7f8ef;box-shadow:0 35px 55px -34px #0c241ab3,0 0 0 5px #e4eae0;overflow:hidden}
.motion-reel:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#d8f4770d 1px,transparent 1px),linear-gradient(90deg,#d8f4770d 1px,transparent 1px);background-size:38px 38px;pointer-events:none}
.motion-reel-top,.motion-reel-bottom{position:relative;z-index:5;display:flex;justify-content:space-between;gap:12px;font-size:9px;font-weight:800;letter-spacing:.15em;color:#c8d5c0}
.motion-reel-top{padding-bottom:15px;border-bottom:1px solid #ffffff2e}
.motion-reel-bottom{padding-top:13px;border-top:1px solid #ffffff2e}
.motion-reel-stage{position:relative;display:grid;place-items:center;height:calc(100% - 62px);min-height:260px;overflow:hidden}
.motion-reel-stage strong{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;font-size:clamp(36px,4.3vw,72px);font-weight:850;line-height:.95;letter-spacing:-.085em;text-align:center;animation:motion-type 8s ease-in-out infinite}
.motion-reel-stage strong span{color:#d8f477}
.motion-reel-ring{position:absolute;width:62%;aspect-ratio:1;border:1px solid #d8f4778c;border-radius:50%;animation:motion-ring 13s linear infinite}
.motion-reel-ring:before,.motion-reel-ring:after{content:"";position:absolute;border-radius:50%;inset:13%;border:1px dashed #eafbc171}
.motion-reel-ring:after{inset:-14%;border:1px solid #eafbc128}
.motion-reel-line{position:absolute;z-index:2;left:-10%;right:-10%;top:48%;height:35%;background:repeating-linear-gradient(0deg,#d8f477 0 1px,transparent 1px 13px);opacity:.42;transform:rotate(-15deg);animation:motion-lines 8s ease-in-out infinite alternate}
.motion-reel-disc{position:absolute;z-index:4;right:14%;top:16%;width:11%;aspect-ratio:1;border-radius:50%;background:#d8f477;mix-blend-mode:difference;animation:motion-disc 8s ease-in-out infinite}
.motion-reel-progress{height:2px;margin-top:12px;background:#ffffff3d;overflow:hidden}.motion-reel-progress span{display:block;width:100%;height:100%;background:#d8f477;transform-origin:left;animation:motion-progress 8s linear infinite}
.motion-visual-caption{position:absolute;z-index:2;right:25px;bottom:7px;color:#6c826a;font-size:9px;font-weight:800;letter-spacing:.15em}
.motion-gallery-card{background:#17241d;color:#f8f9f1}
.motion-gallery-card:after{background:linear-gradient(transparent 50%,#0a1918e8)}
.motion-gallery-visual{position:absolute;inset:0;padding:28px 30px;background:#18271e;overflow:hidden}
.motion-gallery-overline{position:relative;z-index:2;color:#d8f477;font-size:10px;font-weight:800;letter-spacing:.18em}
.motion-gallery-type .motion-gallery-visual{background:radial-gradient(circle at 75% 35%,#354c34 0,#19281e 55%,#101c16 100%)}
.motion-gallery-type .motion-gallery-visual>strong{position:absolute;left:9%;top:19%;font-size:clamp(52px,6.5vw,112px);line-height:.86;letter-spacing:-.1em;font-style:normal;animation:motion-gallery-type 7s ease-in-out infinite}
.motion-gallery-type .motion-gallery-visual>strong em{color:#d8f477;font-style:normal}
.motion-gallery-axis{position:absolute;top:9%;right:10%;width:37%;aspect-ratio:1;border:1px solid #d8f47755;border-radius:50%;box-shadow:0 0 0 38px #d8f4770b,0 0 0 78px #d8f47708;animation:motion-ring 22s linear infinite}
.motion-gallery-logo .motion-gallery-visual{display:grid;place-items:center;background:radial-gradient(circle at center,#344c32 0,#1d3022 40%,#14231b 85%)}
.motion-gallery-monogram{position:relative;z-index:2;font-size:clamp(150px,18vw,290px);line-height:.8;font-weight:900;letter-spacing:-.12em;color:#d8f477;animation:motion-monogram 8s ease-in-out infinite}
.motion-gallery-orbit{position:absolute;width:74%;aspect-ratio:1;border:1px solid #d8f4779c;border-radius:50%;animation:motion-ring 17s linear infinite}.motion-gallery-orbit:before{content:"";position:absolute;top:9%;left:9%;width:15px;height:15px;border-radius:50%;background:#d8f477}
@keyframes motion-type{0%,100%{transform:translateY(9px);opacity:.9}45%,58%{transform:translateY(-9px);opacity:1}}
@keyframes motion-ring{to{transform:rotate(360deg)}}
@keyframes motion-lines{to{transform:rotate(-15deg) translateY(32px)}}
@keyframes motion-disc{50%{transform:translate(-95px,48px) scale(.7)}}
@keyframes motion-progress{to{transform:scaleX(0)}}
@keyframes motion-gallery-type{50%{transform:translateX(18px)}}
@keyframes motion-monogram{50%{transform:rotate(-10deg) scale(.93)}}
@media(max-width:1000px){.motion-design-page .commerce-hero.commerce-hero-showcase{min-height:370px;padding:30px 0 54px}.motion-reel-stage{min-height:210px}.motion-reel-stage strong{font-size:clamp(36px,5.4vw,64px)}.motion-gallery-type .motion-gallery-visual>strong{font-size:clamp(48px,6vw,82px)}}
@media(max-width:760px){.motion-design-page .commerce-hero.commerce-hero-showcase{min-height:350px;padding:23px 0 54px}.motion-visual{max-width:600px;padding:12px 14px 24px}.motion-reel-stage{min-height:240px}.motion-reel-stage strong{font-size:clamp(39px,8vw,70px)}.motion-gallery-type .motion-gallery-visual>strong{font-size:clamp(50px,10vw,86px)}}
@media(max-width:430px){.motion-design-page .commerce-hero.commerce-hero-showcase{min-height:260px;padding:10px 0 35px}.motion-visual{padding:7px 4px 22px}.motion-reel{border-radius:8px;padding:11px 12px}.motion-reel-top,.motion-reel-bottom{font-size:6px;letter-spacing:.08em}.motion-reel-top{padding-bottom:8px}.motion-reel-bottom{padding-top:7px}.motion-reel-stage{min-height:0;height:calc(100% - 35px)}.motion-reel-stage strong{font-size:clamp(34px,10vw,48px)}.motion-reel-progress{margin-top:7px}.motion-visual-caption{font-size:6px;right:8px;bottom:5px}.motion-gallery-visual{padding:19px}.motion-gallery-type .motion-gallery-visual>strong{font-size:clamp(44px,12vw,58px)}.motion-gallery-monogram{font-size:150px}}
@media(prefers-reduced-motion:reduce){.motion-reel-stage strong,.motion-reel-ring,.motion-reel-line,.motion-reel-disc,.motion-reel-progress span,.motion-gallery-type .motion-gallery-visual>strong,.motion-gallery-axis,.motion-gallery-monogram,.motion-gallery-orbit{animation:none}}