@layer components {
.motion-frame {
position: absolute;
    inset: 0;
    display: grid;
    overflow: hidden;
    place-items: center;
    opacity: 0;
    background: #070707;
    transform: scale(1.06);
    transition: opacity .7s ease, transform 1.4s var(--ease-out);
}
}

@layer components {
.motion-frame.is-active {
opacity: 1;
    transform: scale(1);
}
}

@layer components {
.motion-frame span {
position: relative;
    z-index: 2;
    color: var(--white);
    font-family: "Geologica", sans-serif;
    font-size: clamp(100px, 24vw, 410px);
    font-weight: 760;
    line-height: .78;
    letter-spacing: -.09em;
    mix-blend-mode: normal;
}
}

@layer components {
.motion-frame b {
position: absolute;
    right: var(--pad);
    bottom: var(--pad);
    z-index: 3;
    color: var(--white);
    font: 600 11px/1 "JetBrains Mono", monospace;
}
}

@layer components {
.motion-frame i {
position: absolute;
    display: block;
    border-radius: 50%;
}
}

@layer components {
.motion-frame--pulse {
background:
      repeating-radial-gradient(circle at 50% 50%, transparent 0 34px, rgba(245,244,239,.18) 35px 37px),
      radial-gradient(circle at 50% 50%, #ff5d50 0 12%, #d82a21 13% 38%, #070707 72%);
    animation: motion-pulse 2.4s ease-in-out infinite alternate;
}
}

@layer components {
.motion-frame--pulse i {
width: min(54vw, 680px);
    aspect-ratio: 1;
    border: 2px solid rgba(245,244,239,.54);
    box-shadow: 0 0 0 7vw rgba(216,42,33,.18), 0 0 0 14vw rgba(245,244,239,.07);
}
}

@layer components {
.motion-frame--type {
background:
      linear-gradient(115deg, transparent 0 32%, #d82a21 32% 55%, transparent 55%),
      repeating-linear-gradient(90deg, #070707 0 5vw, #151515 5vw 5.2vw);
}
}

@layer components {
.motion-frame--type span {
transform: rotate(-8deg) scale(1.08);
}
}

@layer components {
.motion-frame--type i {
width: 34vw;
    height: 120vh;
    border-radius: 0;
    border: 1px solid rgba(245,244,239,.35);
    transform: rotate(24deg);
    animation: motion-slide 3.2s ease-in-out infinite alternate;
}
}

@layer components {
.motion-frame--wave {
background:
      repeating-radial-gradient(ellipse at 50% 110%, transparent 0 5vw, rgba(255,255,255,.16) 5.1vw 5.3vw),
      linear-gradient(180deg, #100015, #6b1027 52%, #ed3328);
}
}

@layer components {
.motion-frame--wave i {
width: 78vw;
    height: 24vw;
    border: 3vw solid rgba(245,244,239,.12);
    filter: blur(1px);
    transform: rotate(-7deg);
    animation: motion-wave 2.8s ease-in-out infinite alternate;
}
}

@layer components {
.motion-frame--grid {
background:
      linear-gradient(rgba(245,244,239,.14) 1px, transparent 1px),
      linear-gradient(90deg, rgba(245,244,239,.14) 1px, transparent 1px),
      radial-gradient(circle at 72% 38%, #d82a21, transparent 24%),
      #070707;
    background-size: 6vw 6vw, 6vw 6vw, auto, auto;
}
}

@layer components {
.motion-frame--grid i {
width: 32vw;
    aspect-ratio: 1;
    border-radius: 0;
    border: 1px solid rgba(245,244,239,.65);
    transform: rotate(45deg);
    animation: motion-rotate 8s linear infinite;
}
}

@layer components {
.motion-thumb {
position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
      repeating-radial-gradient(circle, transparent 0 13px, rgba(245,244,239,.22) 14px 15px),
      radial-gradient(circle, #ed3328, #4c0910 64%, #070707);
}
}

@layer components {
.motion-thumb b {
color: var(--white);
    font-family: "Geologica", sans-serif;
    font-size: 46px;
    letter-spacing: -.07em;
}
}

@layer components {
.motion-thumb i {
position: absolute;
    width: 82px;
    aspect-ratio: 1;
    border: 1px solid rgba(245,244,239,.52);
    border-radius: 50%;
    animation: motion-pulse 1.8s ease-in-out infinite alternate;
}
}

@layer components {
.motion-poster {
position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    place-items: center;
    background: #070707;
    isolation: isolate;
}
}

@layer components {
.motion-poster span {
position: relative;
    z-index: 3;
    color: var(--white);
    font-family: "Geologica", sans-serif;
    font-size: clamp(64px, 9vw, 152px);
    font-weight: 760;
    line-height: .78;
    letter-spacing: -.09em;
    mix-blend-mode: normal;
}
}

@layer components {
.motion-poster b {
position: absolute;
    top: 24px;
    left: 24px;
    z-index: 4;
    color: var(--white);
    font: 600 11px/1 "JetBrains Mono", monospace;
}
}

@layer components {
.motion-poster i {
position: absolute;
    display: block;
}
}

@layer components {
.motion-poster--beat {
background: repeating-radial-gradient(circle, #070707 0 6%, #d82a21 6.4% 9%, #070707 9.4% 14%);
    animation: motion-pulse 2.2s ease-in-out infinite alternate;
}
}

@layer components {
.motion-poster--beat i {
width: 56%;
    aspect-ratio: 1;
    border: 1px solid rgba(245,244,239,.68);
    border-radius: 50%;
}
}

@layer components {
.motion-poster--open {
background: linear-gradient(135deg, #070707 0 42%, #e22d22 42% 63%, #f5f4ef 63%);
}
}

@layer components {
.motion-poster--open i {
width: 72%;
    height: 1px;
    background: #070707;
    box-shadow: 0 -40px #070707, 0 40px #070707;
    transform: rotate(-28deg);
    animation: motion-slide 2.4s ease-in-out infinite alternate;
}
}

@layer components {
.motion-poster--loop {
background: radial-gradient(circle at 50% 50%, #f5f4ef 0 7%, #d82a21 7.5% 34%, #4b0710 34.5% 59%, #070707 60%);
}
}

@layer components {
.motion-poster--loop i {
width: 74%;
    aspect-ratio: 1;
    border: 3px dashed rgba(245,244,239,.72);
    border-radius: 50%;
    animation: motion-rotate 10s linear infinite;
}
}

@layer components {
.motion-poster--world {
background:
      linear-gradient(rgba(245,244,239,.16) 1px, transparent 1px),
      linear-gradient(90deg, rgba(245,244,239,.16) 1px, transparent 1px),
      radial-gradient(circle at 50% 42%, #bd1d59, #190a35 44%, #070707 72%);
    background-size: 44px 44px, 44px 44px, auto;
    perspective: 700px;
}
}

@layer components {
.motion-poster--world i {
width: 44%;
    aspect-ratio: 1;
    border: 1px solid rgba(245,244,239,.72);
    transform: rotateX(62deg) rotateZ(45deg);
    animation: motion-rotate 8s linear infinite;
}
}

@layer components {
.motion-poster--web {
background: #e8dfd2;
}
}

@layer components {
.motion-poster--web::before, .motion-poster--web::after {
position: absolute;
    width: 62%;
    height: 18%;
    border: 2px solid #070707;
    border-radius: 999px;
    content: "";
}
}

@layer components {
.motion-poster--web::before {
transform: translateY(-76%) rotate(8deg);
}
}

@layer components {
.motion-poster--web::after {
background: #d82a21; transform: translateY(76%) rotate(-8deg);
}
}

@layer components {
.motion-poster--web span {
color: #070707; mix-blend-mode: normal;
}
}

@layer components {
.motion-poster--web b {
color: #070707;
}
}

@layer components {
.motion-poster--brand {
background:
      conic-gradient(from 45deg at 50% 50%, #070707, #d82a21, #f5f4ef, #070707, #d82a21, #070707);
}
}

@layer components {
.motion-poster--brand i {
width: 66%;
    aspect-ratio: 1;
    border: 2px solid #070707;
    border-radius: 50%;
    box-shadow: 0 0 0 18px rgba(245,244,239,.22), 0 0 0 36px rgba(7,7,7,.16);
    animation: motion-pulse 2s ease-in-out infinite alternate;
}
}

@layer components {
@keyframes motion-pulse {
from { background-position: 50% 50%; transform: scale(1); }
    to { background-position: 54% 46%; transform: scale(1.035); }
}
}

@layer components {
@keyframes motion-slide {
from { translate: -6% 0; }
    to { translate: 8% 0; }
}
}

@layer components {
@keyframes motion-wave {
from { transform: translateY(-8%) rotate(-7deg) scale(.92); }
    to { transform: translateY(10%) rotate(5deg) scale(1.08); }
}
}

@layer components {
@keyframes motion-rotate {
to { rotate: 360deg; }
}
}

@layer adaptive {
@media (max-width: 640px) {
.motion-frame span {
font-size: 26vw;
}
}
}

@layer adaptive {
@media (max-width: 640px) {
.motion-frame b {
right: 12px; bottom: 12px;
}
}
}

@layer adaptive {
@media (max-width: 640px) {
.motion-poster span {
font-size: 18vw;
}
}
}

@layer adaptive {
@media (max-width: 640px) {
.motion-poster b {
top: 14px; left: 14px;
}
}
}

@layer adaptive {
@media (prefers-reduced-motion: reduce) {
.motion-frame, .motion-thumb i, .motion-poster, .motion-poster i {
animation: none !important;
}
}
}

@layer corporate-page {
@media (max-width: 640px) {
.page-motion-design .title-line--two b {
font-size: .94em;
      letter-spacing: -.085em;
}
}
}

@layer components {
.price-row__value--long b {
font-size: clamp(42px, 5vw, 78px);
    line-height: .86;
    letter-spacing: -.065em;
}
}

@layer adaptive {
@media (max-width: 640px) {
.price-row__value--long b {
font-size: 17vw;
      line-height: .88;
}
}
}