.cvt-opening {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    overflow: hidden;
    background: var(--cvt-opening-bg, #000);
    opacity: 1;
    transition: opacity 450ms ease;
}

html[data-cvt-opening-theme="light"] .cvt-opening {
    --cvt-opening-bg: #f7f7f8;
    --cvt-opening-card: #fff;
    --cvt-opening-primary: #ff3b30;
    --cvt-opening-text: #171719;
}

html.cvt-opening-active .cvt-opening {
    display: block;
}

.cvt-opening.is-leaving {
    opacity: 0;
    pointer-events: none;
}

.cvt-opening__canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.cvt-opening__skip {
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    min-width: 68px;
    min-height: 42px;
    padding: 8px 15px;
    border: 1px solid color-mix(in srgb, var(--cvt-opening-text, #fff) 48%, transparent);
    border-radius: 999px;
    color: var(--cvt-opening-text, #fff);
    background: color-mix(in srgb, var(--cvt-opening-card, #121212) 78%, transparent);
    font: 500 14px/1.2 Arial, sans-serif;
    letter-spacing: .02em;
    cursor: pointer;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: background-color 180ms ease, border-color 180ms ease, opacity 220ms ease;
}

.cvt-opening__skip:hover,
.cvt-opening__skip:focus-visible {
    border-color: var(--cvt-opening-primary, #ff3b30);
    background: color-mix(in srgb, var(--cvt-opening-primary, #ff3b30) 22%, var(--cvt-opening-card, #121212));
    outline: 2px solid var(--cvt-opening-text, #fff);
    outline-offset: 3px;
}

.cvt-opening__skip.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.cvt-opening__brand {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(104px, 13vw, 142px);
    color: var(--cvt-opening-text, #fff);
    text-align: center;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.78);
    filter: blur(7px);
    transition: opacity 560ms ease, transform 650ms cubic-bezier(.2, .78, .2, 1), filter 560ms ease;
}

.cvt-opening__brand.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
}

.cvt-opening__mark {
    display: grid;
    width: clamp(78px, 9.5vw, 102px);
    aspect-ratio: 1;
    margin: 0 auto;
    place-items: center;
    border-radius: 25%;
    background: var(--cvt-opening-primary, #f32920);
    box-shadow: 0 0 24px color-mix(in srgb, var(--cvt-opening-primary, #f32920) 24%, transparent);
    font: 700 clamp(36px, 5vw, 49px)/1 Arial, sans-serif;
    letter-spacing: -.08em;
}

.cvt-opening__mark span {
    transform: translateX(-.05em);
}

.cvt-opening__name {
    margin: 10px 0 0;
    font: 500 clamp(15px, 2vw, 19px)/1.2 Arial, sans-serif;
    letter-spacing: .01em;
}

@media (max-width: 480px) {
    .cvt-opening__brand { width: 112px; }
    .cvt-opening__mark { width: 82px; }
}

@media (prefers-reduced-motion: reduce) {
    .cvt-opening,
    .cvt-opening__brand { transition-duration: 180ms; }
}