@import "shared/mixins-and-vars";

body {
    // This is the default zoom factor (for progressive enhancement)
    --text-zoom-factor: 1;
}

#accessible-text-svg-demo {
    position: relative;

    &__text {
        fill: black;
        stroke-width: 2px;
        font-size: calc(3.375rem * var(--text-zoom-factor));
        font-family: "Georgia", "Times New Roman", serif;
        panose-1: 0 0 0 0 0 0 0 0 0 0;
        font-style: italic;
        line-height: 1.5;
    }

    &__svgTextPath2 {
        transform: translateY(-50px);
    }

    &__svg {
        display: block;
        position: absolute;
        z-index: 2;
        transform: translateY(-4px);
    }

    &__intro-text {
        font-size: calc(3.375rem * var(--text-zoom-factor));
        z-index: 2;
        color: black;
        font-family: "Georgia", "Times New Roman", serif;
        font-style: italic;
        dominant-baseline: hanging;
    }

    &__shape-container {
        position: relative;
        width: 1024px;
        height: 62.7vw;
        overflow: hidden;
    }

    &__shape-container,
    &__roller-coaster-image {
        width: 100%;
    }

    &__roller-coaster-image {
        left: 0;
        position: absolute;
        top: 0;
        z-index: 1;
    }

    &__control {
        position: absolute;
        display: block;
        width: 200px;
        margin: 20px auto;
        cursor: pointer;
        padding: 10px;
        top: 2vw;
        right: 4vw;
        z-index: 2;
    }

    &__svg-text-path {
        offset-distance: 50%;
    }
}