.about-board-v8 {
    --v8-cream: #fffaf0;
    --v8-cream-deep: #f4ead7;
    --v8-ink: #111315;
    --v8-red: #a63825;
    position: relative;
    isolation: isolate;
    width: min(100%, 610px);
    aspect-ratio: 2 / 3;
    flex: 0 0 auto;
    overflow: visible;
    transform: translateY(28px);
    contain: layout style;
}

.about-board-v8,
.about-board-v8 * {
    box-sizing: border-box;
}

.about-board-v8__character,
.about-board-v8__hands {
    position: absolute;
    inset: 0;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    object-fit: contain;
    transform: none !important;
    translate: none;
    rotate: none;
    scale: 1;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.about-board-v8__character {
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    will-change: opacity, transform;
}

.about-board-v8__character--holding {
    opacity: 1;
    visibility: visible;
}

.about-board-v8__character--neutral,
.about-board-v8__character--crossing,
.about-board-v8__character--proud {
    z-index: 4;
}

.about-board-v8__hands {
    z-index: 12;
    opacity: 1;
    visibility: visible;
    will-change: opacity;
}

.about-board-v8__board {
    position: absolute;
    top: 6.51%;
    left: 29.69%;
    z-index: 8;
    width: 41.70%;
    height: 19.14%;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 4.2% 5.4%;
    color: var(--v8-ink);
    direction: rtl;
    text-align: center;
    background:
        radial-gradient(circle at 48% 35%, #fffdf8 0 27%, transparent 66%),
        linear-gradient(145deg, var(--v8-cream) 0%, #fffdf7 57%, var(--v8-cream-deep) 100%);
    border: clamp(1px, .18vw, 2px) solid #2b2925;
    border-radius: clamp(2px, .42vw, 6px);
    box-shadow:
        0 .6% 1.2% rgba(22, 18, 12, .22),
        inset 0 0 0 1px rgba(255, 255, 255, .52);
    transform-origin: 50% 54%;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.about-board-v8__board--display {
    z-index: 8;
    transition: opacity 170ms ease;
}

.about-board-v8__board--flyer {
    z-index: 9;
    opacity: 0;
    visibility: hidden;
    filter: drop-shadow(0 8px 5px rgba(20, 17, 13, .16));
    will-change: transform, filter, opacity;
}

.about-board-v8__copy {
    display: grid;
    gap: clamp(2px, .55vw, 7px);
    width: 100%;
    font-family: "Thmanyah Sans", Arial, sans-serif;
    font-weight: 900;
    line-height: .96;
    letter-spacing: 0;
    white-space: nowrap;
    transform: translateY(-1%);
}

.about-board-v8__line {
    display: block;
}

.about-board-v8__line--lead {
    color: var(--v8-red);
    font-size: clamp(21px, 5.4vw, 46px);
}

.about-board-v8__line--support {
    color: var(--v8-ink);
    font-size: clamp(17px, 4.05vw, 35px);
}

.about-board-v8__copy[data-message="2"] .about-board-v8__line--lead,
.about-board-v8__copy[data-message="3"] .about-board-v8__line--lead {
    font-size: clamp(18px, 4.45vw, 39px);
}

.about-board-v8__copy[data-message="3"] .about-board-v8__line--support {
    color: var(--v8-red);
    font-size: clamp(20px, 4.85vw, 42px);
}

.about-board-v8__copy[data-message="3"] .about-board-v8__line--lead {
    color: var(--v8-ink);
}

.about-board-v8__board--flyer.is-thrown {
    visibility: visible;
    opacity: 1;
    animation: about-board-v8-toss 1300ms linear both;
}

.about-board-v8__board--flyer.is-landed {
    visibility: visible;
    opacity: 1;
    transform:
        translate3d(var(--v8-land-x), var(--v8-land-y), 0)
        rotate(var(--v8-land-r))
        skewX(var(--v8-land-skew))
        scale(.62, .60);
    filter: drop-shadow(0 7px 3px rgba(20, 17, 13, .22));
}

@keyframes about-board-v8-toss {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
        filter: drop-shadow(0 8px 5px rgba(20, 17, 13, .16));
        animation-timing-function: cubic-bezier(.18, .72, .2, 1);
    }
    10% {
        transform:
            translate3d(var(--v8-kick-x), -17%, 0)
            rotate(var(--v8-kick-r))
            scale(1.035);
        animation-timing-function: cubic-bezier(.32, 0, .77, .28);
    }
    54% {
        transform:
            translate3d(var(--v8-mid-x), var(--v8-mid-y), 0)
            rotate(var(--v8-mid-r))
            scale(.82, .9);
        filter: drop-shadow(0 18px 9px rgba(20, 17, 13, .14));
        animation-timing-function: cubic-bezier(.24, .72, .3, 1);
    }
    77% {
        transform:
            translate3d(var(--v8-land-x), var(--v8-land-y), 0)
            rotate(var(--v8-land-r))
            skewX(var(--v8-land-skew))
            scale(.62, .60);
        filter: drop-shadow(0 6px 3px rgba(20, 17, 13, .26));
        animation-timing-function: cubic-bezier(.2, .82, .24, 1);
    }
    86% {
        transform:
            translate3d(var(--v8-bounce-x), var(--v8-bounce-y), 0)
            rotate(var(--v8-bounce-r))
            skewX(var(--v8-land-skew))
            scale(.635, .635);
        animation-timing-function: cubic-bezier(.33, 0, .67, 1);
    }
    94% {
        transform:
            translate3d(var(--v8-land-x), var(--v8-settle-y), 0)
            rotate(var(--v8-settle-r))
            skewX(var(--v8-land-skew))
            scale(.615, .585);
        animation-timing-function: ease-out;
    }
    100% {
        opacity: 1;
        transform:
            translate3d(var(--v8-land-x), var(--v8-land-y), 0)
            rotate(var(--v8-land-r))
            skewX(var(--v8-land-skew))
            scale(.62, .60);
        filter: drop-shadow(0 7px 3px rgba(20, 17, 13, .22));
    }
}

.about-board-v8.is-tossing .about-board-v8__character--holding,
.about-board-v8.is-tossing .about-board-v8__hands {
    animation: about-board-v8-recoil 620ms cubic-bezier(.2, .75, .24, 1) both;
}

@keyframes about-board-v8-recoil {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    22% { translate: var(--v8-recoil-x, -0.55%) .15%; rotate: var(--v8-recoil-r, -.35deg); }
    48% { translate: 0 -.38%; rotate: 0deg; }
}

.about-board-v8.is-releasing .about-board-v8__board--display,
.about-board-v8.is-releasing .about-board-v8__hands {
    opacity: 0;
    visibility: hidden;
}

.about-board-v8.is-neutral .about-board-v8__character--holding {
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease;
}

.about-board-v8.is-neutral .about-board-v8__character--neutral {
    opacity: 1;
    visibility: visible;
    animation: about-board-v8-release 360ms cubic-bezier(.18, .76, .2, 1) both;
}

@keyframes about-board-v8-release {
    0% { opacity: 0; translate: 0 -.45%; scale: .994; }
    60% { opacity: 1; translate: 0 .12%; scale: 1.002; }
    100% { opacity: 1; translate: 0 0; scale: 1; }
}

.about-board-v8.is-crossing .about-board-v8__character--neutral {
    opacity: 0;
    visibility: hidden;
    transition: opacity 190ms ease;
}

.about-board-v8.is-crossing .about-board-v8__character--crossing {
    opacity: 1;
    visibility: visible;
    animation: about-board-v8-cross 380ms cubic-bezier(.2, .76, .22, 1) both;
}

@keyframes about-board-v8-cross {
    0% { opacity: 0; translate: 0 .42%; scale: .994; }
    52% { opacity: 1; translate: 0 -.14%; scale: 1.003; }
    100% { opacity: 1; translate: 0 0; scale: 1; }
}

.about-board-v8.is-proud .about-board-v8__character--crossing,
.about-board-v8.is-proud .about-board-v8__character--neutral {
    opacity: 0;
    visibility: hidden;
    transition: opacity 230ms ease;
}

.about-board-v8.is-proud .about-board-v8__character--proud {
    opacity: 1;
    visibility: visible;
    animation: about-board-v8-proud 520ms cubic-bezier(.16, .8, .2, 1) both;
}

@keyframes about-board-v8-proud {
    0% { opacity: 0; translate: 0 .6%; scale: .988; }
    58% { opacity: 1; translate: 0 -.2%; scale: 1.006; }
    100% { opacity: 1; translate: 0 0; scale: 1; }
}

.about-board-v8.is-reduced .about-board-v8__character--holding,
.about-board-v8.is-reduced .about-board-v8__character--neutral,
.about-board-v8.is-reduced .about-board-v8__character--crossing,
.about-board-v8.is-reduced .about-board-v8__hands,
.about-board-v8.is-reduced .about-board-v8__board--display {
    opacity: 0;
    visibility: hidden;
}

.about-board-v8.is-reduced .about-board-v8__character--proud {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 760px) {
    .about-board-v8 {
        width: min(100%, 520px);
        transform: translateY(12px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-board-v8 *,
    .about-board-v8 *::before,
    .about-board-v8 *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}