/* ==========================================================================
   VOLTAREN QUIZ - ORGANIZED STYLESHEET
   Order: Base -> Fonts -> Utilities -> Header -> Animations -> Screen Body -> Shared Footer/Actions
   Functional selectors and values are preserved.
   ========================================================================== */

/* ==========================================================================
   01. BASE / BODY
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body,
#main {
    background: #ff4b08;
}

/* ==========================================================================
   02. FONTS
   ========================================================================== */
/* ==========================================
   FONTS
========================================== */

@font-face {
    font-family: 'MavenProBlack';
    src: url("../fonts/MavenPro-Black.ttf");
}

@font-face {
    font-family: 'MavenProBold';
    src: url("../fonts/MavenPro-Bold.ttf");
}

@font-face {
    font-family: 'MavenProExtraBold';
    src: url("../fonts/MavenPro-ExtraBold.ttf");
}

@font-face {
    font-family: 'MavenProMedium';
    src: url("../fonts/MavenPro-Medium.ttf");
}

@font-face {
    font-family: 'MavenProRegular';
    src: url("../fonts/MavenPro-Regular.ttf");
}

@font-face {
    font-family: 'MavenProSemiBold';
    src: url("../fonts/MavenPro-SemiBold.ttf");
}


.MavenProBlack {
    font-family: 'MavenProBlack';
}

.MavenProBold {
    font-family: 'MavenProBold';
}

.MavenProExtraBold {
    font-family: 'MavenProExtraBold';
}

.MavenProMedium {
    font-family: 'MavenProMedium';
}

.MavenProRegular {
    font-family: 'MavenProRegular';
}

.MavenProSemiBold {
    font-family: 'MavenProSemiBold';
}

/* ==========================================================================
   03. UTILITIES
   ========================================================================== */
.colorWhite {
    color: #fff;
}

.colorBlue {
    color: #17178e;
}

/* ==========================================================================
   04. GLOBAL HEADER / HALEON LOGO
   ========================================================================== */
#main::after {
    content: "";
    position: absolute;
    right: 33px;
    top: 31px;
    width: 190px;
    height: 45px;
    background-image: url(../images/H_MasterLogo_Mono_NEG_RGB.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 99999 !important;
}

/* ==========================================================================
   05. SHARED ANIMATIONS
   ========================================================================== */
/* Animations fadeIn*/
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Animations zoom effect*/
@keyframes zoom-effect {
    0% {
        transform: translate3d(0, 0, 0) scale(0.8);
    }

    50% {
        transform: translate3d(0, 0, 0) scale(1.1);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* ==========================================================================
   06. BODY / SCREEN STYLES (SCREEN 1 -> PN100)
   ========================================================================== */
/* screen1 styles starts */
.voltrn_scr1_bg {
    position: relative;
    width: 1920px;
    height: 1080px;
    /* Lightweight first frame: no image wait. The exact artwork is revealed
      progressively by the curve layers below. */
    background: linear-gradient(180deg, #ff9f55 0%, #ff6507 12%, #ff4a00 32%, #ff2600 63%, #ff0b00 100%);
    overflow: hidden;
    isolation: isolate;
}

/* Screen 1 background curve sequence.
   Each layer uses the already-preloaded final background artwork. The masks
   expand from the centre so the nested curves arrive one by one without a
   white/blank loading frame. */
/* Screen 1 curves: all curve artwork enters together from the top.
   The movement is deliberately small and GPU-friendly for a smooth result. */
.voltrn_scr1_curve {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("../images/voltrn_scrn1bg.png") no-repeat center center;
    background-size: 100% 100%;
    opacity: 0;
    transform: translate3d(0, -42px, 0);
    backface-visibility: hidden;
    will-change: transform, opacity;
    animation: voltrnCurveFromTopSmooth 0.92s cubic-bezier(.16, 1, .3, 1) 0.02s forwards;
}

.voltrn_scr1_curve_1 {
    clip-path: polygon(25% 0, 75% 0, 70% 14%, 64% 25%, 58% 34%, 50% 38%, 42% 34%, 36% 25%, 30% 14%);
}

.voltrn_scr1_curve_2 {
    clip-path: polygon(8% 0, 92% 0, 87% 18%, 78% 36%, 67% 51%, 57% 61%, 50% 64%, 43% 61%, 33% 51%, 22% 36%, 13% 18%);
}

.voltrn_scr1_curve_3 {
    clip-path: polygon(0 0, 100% 0, 100% 72%, 91% 84%, 77% 94%, 63% 100%, 37% 100%, 23% 94%, 9% 84%, 0 72%);
}

@keyframes voltrnCurveFromTopSmooth {
    0% {
        opacity: 0;
        transform: translate3d(0, -42px, 0);
    }

    28% {
        opacity: .55;
    }

    65% {
        opacity: .92;
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.voltrn_scr1_woman {
    position: absolute;
    z-index: 2;
    left: 365px;
    bottom: 0;
    width: 1207px;
    height: auto;
    opacity: 0;
    /* transform: translateY(145px); */
    /* animation: voltrnWomanRise 1s cubic-bezier(.16, 1, .3, 1) 0s forwards; */
    animation: voltrnWomanRise 0.7s 0s forwards;
    pointer-events: none;
    /* will-change: transform, opacity; */
}

@keyframes voltrnWomanRise {
    0% {
        opacity: 0;
        /* transform: translateY(145px); */
        bottom: -50px;
    }

    100% {
        opacity: 1;
        /* transform: translateY(0); */
        bottom: 0;
    }
}

.voltrn_scr1_hero {
    position: absolute;
    z-index: 3;
    top: 652px;
    left: 84px;
    width: 1920px;
    /* text-align: center; */
}

.voltrn_scr1_brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 45px;
}

/* 
.voltrn_scr1_detective-icon {
   position: relative;
   width: 235px;
   height: 235px;
   background-image: url("../images/voltrn_scrn1searchicon.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
} */

.voltrn_scr1_brand-copy {
    text-align: left;
    line-height: 0.84;
    opacity: 0;
    animation: fadeIn 0.45s ease-out 0.3s forwards;
}

.voltrn_scr1_title {
    font-size: 119px;
    font-weight: 900;
    letter-spacing: -5px;
    opacity: 0;
    animation: fadeIn 0.45s ease-out 0.3s forwards;
}

.voltrn_scr1_title-second {
    margin-top: 12px;
    font-size: 132px;
    letter-spacing: -4px;
    opacity: 0;
    animation: fadeIn 0.45s ease-out 0.3s forwards;
}

.voltrn_scr1_tagline {
    margin-top: 32px;
    margin-left: 12px;
    font-size: 101px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
    opacity: 0;
    animation: fadeIn 0.45s ease-out 0.3s forwards;
    /* text-transform: uppercase; */
}

/* .voltrn_scr1_steps {
   position: absolute;
   left: 344px;
   top: 630px;
   width: 1359px;
   height: 130px;
   display: grid;
   grid-template-columns: 1fr 1fr 1.55fr;
   border: 2px solid rgba(255, 255, 255, 0.9);
   background: rgba(0, 0, 0, 0.32);
}

.voltrn_scr1_step {
   position: relative;
   padding: 25px 40px;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.voltrn_scr1_step:last-child {
   border-right: 0;
}

.voltrn_scr1_step-small {
   font-size: 29px;
   font-weight: 700;
   line-height: 1.05;
   text-transform: uppercase;
}

.voltrn_scr1_step-emphasis {
   display: inline-block;
   margin-top: 3px;
   font-size: 37px;
   line-height: 1;
   letter-spacing: 0.3px;
   text-transform: uppercase;
   position: relative;
   top: 8px;
}

.voltrn_scr1_step:nth-child(3) .voltrn_scr1_step-small {
   font-size: 29px;
}

.voltrn_scr1_step:nth-child(3) .voltrn_scr1_step-emphasis {
   font-size: 38px;
} */

.voltrn_scr1_cta {
    position: absolute;
    z-index: 4;
    left: 86%;
    top: 926px;
    /* transform: translateX(-50%); */
    width: 225px;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 27px;
    border: 0;
    border-radius: 29px;
    background: #fff;
    font-size: 35px;
    font-weight: 900;
    letter-spacing: 0.5px;
    cursor: pointer;
    opacity: 0;
    animation: fadeIn 0.45s ease-out 0.4s forwards;
    /* box-shadow: 0 4px 20px #0f0073; */
}

.voltrn_scr1_cta:hover {
    box-shadow:
        0 7px 28px #0f0073;
}

.voltrn_scr1_arrow,
.voltrn_scr2_arrow {
    position: relative;
    width: 30px;
    height: 30px;
    background-image: url("../images/voltrn_scrn1arrows.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.voltrn_scr2_arrow {
    background-image: url("../images/voltrn_scrn2arrows.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.voltrn_scr1_zicid {
    z-index: 4;
    font-size: 24px;
    position: absolute;
    bottom: 49px;
    left: 54px;
    line-height: 26px;
    opacity: 0;
    animation: fadeIn 0.45s ease-out 0.4s forwards;
}


@media (prefers-reduced-motion: reduce) {

    .voltrn_scr1_curve,
    .voltrn_scr1_woman,
    .voltrn_scr1_brand-copy,
    .voltrn_scr1_title,
    .voltrn_scr1_tagline,
    .voltrn_scr1_cta,
    .voltrn_scr1_zicid {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* screen1 styles end */
/* screen2 styles  */
.voltrn_scr2_bg {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    /* Immediate first frame so the screen never waits for a large image. */
    background: linear-gradient(180deg, #ff9b3d 0%, #ff670c 17%, #ff3c00 49%, #ff1000 100%);
    backface-visibility: hidden;
    transform: translateZ(0);
    isolation: isolate;
}

/* The final Screen 2 artwork is already preloaded.  These three clipped layers
   reveal the nested background curves one after another without a white flash. */
.voltrn_scr2_curve {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("../images/voltrn_scrn2bg.png") no-repeat center center;
    background-size: 100% 100%;
    opacity: 0;
    will-change: opacity, transform;
}

.voltrn_scr2_curve_1 {
    clip-path: polygon(28% 0, 72% 0, 68% 10%, 63% 20%, 58% 29%, 53% 35%, 50% 37%, 47% 35%, 42% 29%, 37% 20%, 32% 10%);
    animation: voltrnScr2CurveReveal .48s cubic-bezier(.22, .61, .36, 1) .02s forwards;
}

.voltrn_scr2_curve_2 {
    clip-path: polygon(10% 0, 90% 0, 86% 18%, 79% 34%, 69% 48%, 59% 58%, 50% 62%, 41% 58%, 31% 48%, 21% 34%, 14% 18%);
    animation: voltrnScr2CurveReveal .52s cubic-bezier(.22, .61, .36, 1) .20s forwards;
}

.voltrn_scr2_curve_3 {
    clip-path: polygon(0 0, 100% 0, 100% 74%, 91% 85%, 78% 94%, 64% 100%, 36% 100%, 22% 94%, 9% 85%, 0 74%);
    animation: voltrnScr2CurveReveal .56s cubic-bezier(.22, .61, .36, 1) .40s forwards;
}

@keyframes voltrnScr2CurveReveal {
    0% {
        opacity: 0;
        transform: translateY(-14px) scale(.992);
    }

    35% {
        opacity: .28;
    }

    72% {
        opacity: .9;
        transform: translateY(-2px) scale(.999);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.voltrn_scr2_overlay {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}

.voltrn_scr2_title {
    position: absolute;
    top: 252px;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 62px;
    opacity: 0;
    animation: fadeIn .48s ease-out .66s forwards;
}

.voltrn_scr2_title strong {
    font-family: 'MavenProBold';
}

.voltrn_scr2_process {
    position: absolute;
    top: 520px;
    left: 210px;
    width: 1500px;
    display: flex;
    justify-content: space-between;
}

.process_line {
    position: absolute;
    top: 49px;
    left: 70px;
    right: 70px;
    height: 4px;
    background: #ffffff;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center;
    animation: voltrnProcessLine .5s ease-out 0s forwards;
}

@keyframes voltrnProcessLine {
    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

.process_step {
    width: 233px;
    position: relative;
    text-align: center;
    z-index: 2;
}


.circle {
    width: 104px;
    height: 104px;
    margin: auto;
    border-radius: 50%;
    background-image: url("../images/voltrn_cirleimg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #002f86;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    font-family: 'MavenProBold';
    animation: circlezoom 0.5s ease-in-out;

}

@keyframes circlezoom {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

.label,
.label2 {
    margin-top: 52px;
    color: #fff;
    font-size: 35px;
    line-height: 42px;
    opacity: 0;
    animation: fadeTxt 0.5s ease-in 0.5s forwards;
}

.label2 {
    margin-top: -228px;
    width: 270px;
    margin-left: -33px;
}

@keyframes fadeTxt {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.voltrn_scr2_duration {
    position: absolute;
    left: 55px;
    bottom: 45px;
    color: #fff;
    font-size: 32px;
    opacity: 0;
    animation: fadeIn .45s ease-out 1.92s forwards;
}

.voltrn_scr2_btn {
    position: absolute;
    right: 60px;
    bottom: 40px;
    width: 420px;
    height: 90px;
    border: 5px solid #fff;
    border-radius: 20px;
    background: transparent;
    color: #fff;
    font-size: 34px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 27px;
    opacity: 0;
    animation: fadeIn .45s ease-out 1.92s forwards;
}

@media (prefers-reduced-motion:reduce) {

    .voltrn_scr2_curve,
    .process_line,
    .process_step,
    .voltrn_scr2_title,
    .voltrn_scr2_duration,
    .voltrn_scr2_btn {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* screen2 styles ends */
/* screen3 styles  */
.voltrn_scr3_bg {
    position: relative;
    width: 1920px;
    height: 1080px;
    background: url("../images/voltrn_scrn2bg.png") no-repeat center;
    background-size: 100% 100%;
}

.voltrn_scr3_title {
    position: absolute;
    top: 170px;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 64px;
    font-family: 'MavenproMedium';


}

.voltrn_scr3_title span {
    font-family: 'MavenProBold';
}

.voltrn_scr3_process {
    position: absolute;
    left: 220px;
    top: 430px;
    width: 1480px;
    display: flex;
    justify-content: space-between;
}

.voltrn_scr3_line {
    position: absolute;
    top: 40px;
    left: 60px;
    right: 60px;
    height: 3px;
    background: #fff;
}

.voltrn_scr3_step {
    width: 180px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.voltrn_scr3_circle {
    width: 74px;
    height: 74px;
    margin: auto;
    border-radius: 50%;
    background: #fff;
    color: #0f0073;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-family: 'MavenProBold';

    border: 5px solid #fff;
    box-shadow:
        0 0 0 5px #ff5b00,
        0 0 0 10px #fff,
        0 0 0 15px #ff5b00;
}

.voltrn_scr3_top {
    margin-bottom: 40px;
    color: #fff;
    font-size: 22px;
    font-family: 'MavenProBold';
}

.voltrn_scr3_bottom {
    margin-top: 30px;
    color: #fff;
    font-size: 22px;
    font-family: 'MavenProBold';
}

.voltrn_scr3_btn {
    position: absolute;
    right: 55px;
    bottom: 45px;

    width: 430px;
    height: 90px;

    background: #fff;
    color: #0f0073;

    border: none;
    border-radius: 20px;

    font-size: 34px;
    font-family: 'MavenProBold';

    cursor: pointer;
}

.voltrn_scr3_arrow {
    margin-left: 12px;
}

/* screen3 styles  */
/*=====================================================
Screen 4
=====================================================*/

.voltrn_scr4_bg {
    position: relative;
    width: 1920px;
    height: 1080px;
    background: url("../images/voltrn_scrn2bg.png") no-repeat center center;
    background-size: 100% 100%;
    overflow: hidden;
}

/* White glow at the top */
.voltrn_scr4_glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 220px;
    background: url("../images/top_glow.png") no-repeat center;
    background-size: contain;
}

/* Heading */
.voltrn_scr4_title {
    position: absolute;
    top: 530px;
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    font-size: 82px;
    font-family: 'MavenProBold';
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.3s forwards;
}

/*=====================================================
Screen 4
=====================================================*/



/*==========================
SCREEN 5
==========================*/


/*screen6*/
/*==================================================
SCREEN 6
==================================================*/

.voltrn_scr6_bg {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;

    background: url("../images/voltrn_scrn5bg.png") center center no-repeat;
    background-size: cover;
}

/* Logo */



/* Cards Row */

.voltrn_scr6_cards {

    position: absolute;

    left: 50%;

    top: 264px;

    transform: translateX(-50%);

    width: 1750px;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;
}

/* Card */

.voltrn_scr6_card {
    width: 405px;
    height: 640px;
    border-radius: 32px;
    background: linear-gradient(#ff7424, #ff4520);
    box-shadow: 0 18px 35px rgba(0, 0, 0, .30);
    overflow: hidden;
    cursor: pointer;
    transition: .5s;
}

/* Image */

.voltrn_scr6_img {

    width: 372px;

    height: 372px;

    margin: 18px auto 0;

    border-radius: 26px;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;
}

/* Individual Images */

.voltrn_scr6_card1 .voltrn_scr6_img {
    background-image: url("../images/card1.png");
}

.voltrn_scr6_card2 .voltrn_scr6_img {
    background-image: url("../images/card2.png");
}

.voltrn_scr6_card3 .voltrn_scr6_img {
    background-image: url("../images/card3.png");
}

.voltrn_scr6_card4 .voltrn_scr6_img {
    background-image: url("../images/card4.png");
}

/* Text */

.voltrn_scr6_card_text {
    width: 320px;
    margin: 18px 10px 10px 29px;
    color: #fff;
    font-size: 25px;
    line-height: 1.22;
    font-weight: 700;
    text-align: left;
}

/* Bottom Text */

.voltrn_scr6_bottom_text {
    position: absolute;
    top: 92px;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 50px;
    line-height: 1.2;
    opacity: 1;
    z-index: 6;
    transition: opacity .4s ease;
}

/*=========================================
SCREEN 6 CARD REVEAL ANIMATION
=========================================*/

/* Scenario cards begin hidden and are revealed one by one as the
   PN5 blue-person card travels from left to right. */
.voltrn_scr6_card {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.965);
    transition:
        opacity .38s ease-out,
        transform .46s cubic-bezier(.20, .78, .24, 1);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

.voltrn_scr6_card.show {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}


/* Screen 6 fast return from the journey carousel. The cards are restored in
   their final positions in the first paint; normal transitions resume after it. */
.voltrn_scr6_cards.instant-return .voltrn_scr6_card,
.voltrn_scr6_cards.instant-return .voltrn_scr6_card.show,
.voltrn_scr6_cards.instant-return .voltrn_scr6_card.completed {
    transition: none !important;
}

/* Moving PN5 reveal card. It crosses the four card positions smoothly;
   each real scenario card is revealed when this reaches its position. */
.voltrn_scr6_reveal_runner {
    position: absolute;
    left: 0;
    top: 25px;
    width: 405px;
    height: 610px;
    border-radius: 32px;
    background: url("../images/swipecard_img.png") center center / 100% 100% no-repeat;
    box-shadow: 0 18px 35px rgba(0, 0, 0, .25);
    z-index: 40;
    pointer-events: none;
    opacity: .42;
    /* Start just before the first card and sweep continuously across the row. */
    transform: translate3d(35px, -20px, 0) scale(.98);
    transform-origin: center center;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transition:
        transform 4.80s cubic-bezier(.18, .74, .20, 1),
        opacity 4.80s linear;
}

.voltrn_scr6_reveal_runner.done {
    opacity: 0;
}

/* The selected scenario itself moves to the centre, then zooms into PN8. */
.voltrn_scr6_flying_card {
    position: absolute !important;
    z-index: 250;
    margin: 0 !important;
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;
    pointer-events: none;
    filter: none !important;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    will-change: transform, opacity;
    transition:
        transform .90s cubic-bezier(.18, .72, .18, 1),
        opacity .52s ease,
        box-shadow .65s ease;
}

.voltrn_scr6_flying_card.move-to-centre {
    transform: translate3d(var(--card-fly-x), var(--card-fly-y), 0) scale(1.06);
    box-shadow: 0 28px 60px rgba(0, 0, 0, .38);
}

.voltrn_scr6_flying_card.move-to-centre.handoff-to-pn8 {
    transform: translate3d(var(--card-fly-x), var(--card-fly-y), 0) scale(1.12);
    opacity: 0;
    transition:
        transform .90s cubic-bezier(.18, .76, .20, 1),
        opacity .36s linear;
}

.voltrn_scr6_pn7_flying {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 32px;
}

.voltrn_scr6_flying_card .voltrn_scr6_card_text,
.voltrn_scr6_flying_card .voltrn_scr6_img {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Screen 5 -> 6 reference animation: flip the stack, then spread the cards. */
.voltrn_scr6_cards.spread-intro {
    perspective: 1600px;
}

.voltrn_scr6_cards.spread-intro .voltrn_scr6_card {
    opacity: 1;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transition:
        transform .9s cubic-bezier(.18, .78, .24, 1),
        opacity .35s ease,
        box-shadow .6s ease;
}

.voltrn_scr6_cards.spread-intro .voltrn_scr6_card1 {
    transform: translateX(1305px) rotateY(-16deg) rotateZ(-3deg) scale(.96);
    z-index: 1;
}

.voltrn_scr6_cards.spread-intro .voltrn_scr6_card2 {
    transform: translateX(870px) rotateY(-12deg) rotateZ(-2deg) scale(.97);
    z-index: 2;
}

.voltrn_scr6_cards.spread-intro .voltrn_scr6_card3 {
    transform: translateX(435px) rotateY(-8deg) rotateZ(-1deg) scale(.98);
    z-index: 3;
}

.voltrn_scr6_cards.spread-intro .voltrn_scr6_card4 {
    transform: rotateY(-90deg) scale(.96);
    z-index: 4;
}

.voltrn_scr6_cards.spread-intro.spread .voltrn_scr6_card {
    transform: translateX(0) rotateY(0) rotateZ(0) scale(1);
}

.voltrn_scr6_cards.spread-intro.spread .voltrn_scr6_card4 {
    transition-delay: .05s;
}

.voltrn_scr6_cards.spread-intro.spread .voltrn_scr6_card3 {
    transition-delay: .22s;
}

.voltrn_scr6_cards.spread-intro.spread .voltrn_scr6_card2 {
    transition-delay: .39s;
}

.voltrn_scr6_cards.spread-intro.spread .voltrn_scr6_card1 {
    transition-delay: .56s;
}

.voltrn_scr6_bottom_text.intro-hidden {
    opacity: 0;
}

/* Optional hover */

.voltrn_scr6_card:hover {

    transform: translateY(-8px) scale(1.03);

}

/* Selected */

.voltrn_scr6_card.selected {

    transform: translateY(-8px) scale(1.05);

    box-shadow: 0 18px 35px rgba(0, 0, 0, .35);

}

/* Completed scenario: keep it visible on Screen 6 but clearly finished. */
.voltrn_scr6_card.completed,
.voltrn_scr6_card.completed:hover {
    opacity: .62;
    filter: grayscale(1) saturate(0) brightness(.92);
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow: 0 14px 26px rgba(0, 0, 0, .20);
    cursor: pointer;
    pointer-events: auto;
}

/* Keep unselected cards in their normal colour during selection. */
.voltrn_scr6_card.fade-out,
.voltrn_scr6_card.fade-out:hover {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0) scale(1);
    pointer-events: none;
}

/* Clean PN7 -> PN8 transition layer. It uses the same orange screen
   artwork and sits above all four white cards, but below the flying PN7/PN8
   images. This prevents any white flash during every card selection. */
.voltrn_scr6_transition_wash {
    position: absolute;
    inset: 0;
    z-index: 220;
    pointer-events: none;
    background: url("../images/voltrn_scrn5bg.png") center center / cover no-repeat;
    opacity: 0;
    animation: voltrnScr6WashIn .32s ease .34s forwards;
}

@keyframes voltrnScr6WashIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Popup */

.voltrn_scr6_popup {

    position: absolute;
    inset: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    background: transparent;
    backdrop-filter: none;

    visibility: hidden;
    opacity: 0;

    transition: opacity .45s ease, visibility .45s ease;

    z-index: 260;
}

.voltrn_scr6_popup.show {

    visibility: visible;
    opacity: 1;

}

.voltrn_scr6_popup.closing {
    opacity: .78;
}

.voltrn_scr6_popup.pn-handoff {
    background: rgba(255, 106, 28, .12);
}

.popup-img {
    border-radius: 24px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    position: absolute;
    top: 50%;
    left: 50%;

    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(.96);
    filter: none;
    backface-visibility: hidden;
    will-change: opacity, transform;
    transition:
        opacity .4s ease,
        transform .68s cubic-bezier(.2, .76, .22, 1);

}

/* First image */

.popup-img1 {
    width: 405px;
    height: 610px;
    background-image: url("../images/case1_step1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

}

/* Second image (larger) */

.popup-img2 {
    width: 560px;
    height: 820px;
    background-image: url("../images/case1_step1.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition:
        opacity .24s linear,
        transform 0.7s cubic-bezier(.16, .78, .20, 1);
    transform-origin: center center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity;

}

.popup-img1 {
    background-image: url("../images/case1_step1.png");
}

.popup-img2 {
    background-image: url("../images/case1_step1.png");
}


.popup-img.enter {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
    filter: none;
}

.popup-img.exit {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(1.04);
    filter: none;
}

.popup-img.enter {
    transform: translate3d(-50%, -50%, 0) scale(.76);
}

.popup-img.enter.pn8-start {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(.735);
}

.popup-img.enter.pn8-zoom {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1.02);
}

.voltrn_scr6_bottom_text {
    transition: opacity .4s ease;
}

.voltrn_scr6_bottom_text.hide {
    opacity: 0;
    visibility: hidden;
}



/* screen7&8 */
/*==========================================
/*==========================================


/*=========================================
SCREEN 7
=========================================*/

/*=========================================
SCREEN 7
=========================================*/

.voltrn_scr7_bg {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: url("../images/voltrn_scrn5bg.png") center center no-repeat;
    background-size: cover;
    backface-visibility: hidden;
    transform: translateZ(0);
    opacity: 1;
}

/* Common assessment layout with separate patient cut-outs for all four cards. */
.voltrn_scr7_bg::before {
    content: "";
    position: absolute;
    left: 465px;
    top: 223px;
    width: 1280px;
    height: 658px;
    border-radius: 52px;
    background: #ffffff;
    z-index: 0;
}

.voltrn_scr7_bg::after {
    content: "";
    position: absolute;
    left: 199px;
    bottom: 0;
    width: 550px;
    height: 822px;
    background: url("../images/man.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    /* animation: zoom-effect 1s ease-in-out 1;
    transform-origin: center center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    image-rendering: auto;
    filter: none; */
    animation: moveRightToLeft 0.5s linear forwards;

}

@keyframes moveRightToLeft {
    from {
        transform: translateX(40%);
    }

    to {
        transform: translateX(0);
    }
}

.voltrn_scr7_box,
.voltrn_scr7_btn {
    animation: voltrnAssessmentContentEnter .36s ease-out both;
}

@keyframes voltrnAssessmentContentEnter {
    from {
        opacity: .72;
        transform: translate3d(8px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* White panel area */
.voltrn_scr7_box {
    position: absolute;
    left: 825px;
    top: 271px;
    width: 860px;
    height: 586px;
    z-index: 2;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0s forwards;
}

.voltrn_scr7_bg_case2 {
    background-image: url("../images/voltrn_scrn5bg.png");
}

.voltrn_scr7_bg_case2::after {
    left: 162px;
    width: 619px;
    height: 949px;
    background-image: url("../images/girl.png");
}

.voltrn_scr7_bg_case3 {
    background-image: url("../images/voltrn_scrn5bg.png");
}

.voltrn_scr7_bg_case3::after {
    left: 139px;
    width: 700px;
    height: 860px;
    background-image: url("../images/Knee pain.png");
}

.voltrn_scr7_bg_case4 {
    background-image: url("../images/voltrn_scrn5bg.png");
}

.voltrn_scr7_bg_case4::after {
    left: 64px;
    width: 789px;
    height: 865px;
    background-image: url(../images/security.png);
}

.voltrn_scr7_btn {
    z-index: 3;
}

/* Fixed heading shared by PN9 and PN10. */
.voltrn_scr7_box::before {
    content: "Clinical Assessment";
    display: block;
    color: #17178e;
    font-family: 'MavenProBold';
    font-size: 55px;
    line-height: 1.1;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.3s forwards;
}

/* Heading */
.voltrn_scr7_heading {
    margin: 0;
    color: #17178e;
    font-size: 55px;
    font-family: MavenProBold;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;
}

/* Scroll Area */
.voltrn_scr7_content {
    position: relative;
    margin-top: 20px;
    width: 100%;
    height: 453px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding-right: 3px;
    box-sizing: border-box;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;
}

/* Card 1 assessment follows PDF pages 9 and 10 as two scroll pages. */
.voltrn_scr7_content.paged-assessment {
    margin-top: 18px;
    height: 511px;
    padding-right: 80px;
    scroll-snap-type: y mandatory;
    overscroll-behavior: contain;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;

}

/* Hide the copy inside page 1; the fixed heading above remains visible. */
.paged-assessment .voltrn_scr7_heading {
    display: none;
}

.paged-assessment .voltrn_scr7_page {
    width: 100%;
    height: 500px;
    min-height: 500px;
    box-sizing: border-box;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    /* opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards; */
}

.paged-assessment .voltrn_scr7_page1 {
    padding-top: 0;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;
}

.paged-assessment .voltrn_scr7_page2 {
    padding-top: 32px;
    /* opacity: 0;
     animation: fadeIn 0.5s ease-in 0.5s forwards; */
}

/* Scrollbar */

.voltrn_scr7_content::-webkit-scrollbar {
    width: 8px;
}

.voltrn_scr7_content::-webkit-scrollbar-track {
    background: transparent;
}

.voltrn_scr7_content::-webkit-scrollbar-thumb {
    background: #153d97;
    border-radius: 10px;
}

/* Lists */

.voltrn_scr7_list {
    margin: 0;
    padding-left: 38px;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;
}

.voltrn_scr7_innerlist {
    margin: 0;
    padding-left: 38px;
    /* opacity: 0; */
    /*    animation: fadeIn 0.5s ease-in 0.5s forwards;*/
}

.voltrn_scr7_list li {
    margin-bottom: 20px;
    font-size: 33px;
    line-height: 1.1;
    font-family: 'MavenproMedium';
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;
}

.voltrn_scr7_innerlist li {
    margin-bottom: 22px;
    font-size: 33px;
    line-height: 1.1;
    font-family: 'MavenproMedium';
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;
}

.voltrn_scr7_list strong {
    font-family: 'MavenProBold';
    font-size: 36px;
}

/* Gap between sections */

.voltrn_scr7_gap {
    /* height:320px; */
}

/* Patient Presentation */

.patient-heading {
    margin-top: 0;
}

.voltrn_scr7_subheading {
    margin: 0 0 25px;

    font-size: 40px;
    font-family: 'MavenProBold';
    /*
     opacity: 0;
 animation: fadeIn 0.5s ease-in 1s forwards;
*/
}

/* NEXT button */

.voltrn_scr7_btn {

    position: absolute;

    right: 44px;

    bottom: 43px;

    width: 228px;

    height: 110px;

    border: 5px solid #ffffff;

    border-radius: 40px;

    background: transparent;

    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 27px;
    font-size: 35px;

    font-family: "MavenProBold";

    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all .3s ease;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;

}

/* After reaching Patient Presentation */

.voltrn_scr7_btn.active {

    background: #ffffff;
    color: #17178e;
    border: 3px solid #ffffff;
}

.voltrn_scr7_btn.active .voltrn_scr2_arrow {
    background-image: url("../images/voltrn_scrn1arrows.png");
}

/* White active buttons need the blue arrow asset so the icon remains visible. */
.voltrn_scr10_btn.active .voltrn_scr2_arrow,
.voltrn_scr14_btn.active .voltrn_scr2_arrow,
.voltrn_scr18_btn.active .voltrn_scr2_arrow,
.voltrn_scr21_btn.scrolled .voltrn_scr2_arrow {
    display: block;
    flex: 0 0 30px;
    background-image: url("../images/voltrn_scrn1arrows.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Screen 9 */
/*==========================================
SCREEN 9
==========================================*/

.voltrn_scr9_bg {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;

    background: url("../images/voltrn_scrn2bg.png") center center no-repeat;
    background-size: cover;
}




/* Heading */
.voltrn_scr9_title {

    position: absolute;

    top: 48%;
    left: 50%;

    transform: translate(-50%, -50%);

    font-size: 74px;
    line-height: 1.2;
    font-family: "MavenProExtraBold";
    color: #fff;
    text-align: center;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;
}

/* screen10 */
.voltrn_scr10_bg {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: url("../images/voltrn_scrn5bg.png") center center no-repeat;
    background-size: cover;
}

/* Shared CSS upper panel for pain-type selection slides. */
.voltrn_scr10_bg::before,
.voltrn_scr14_bg::before {
    content: "";
    position: absolute;
    left: 332.5px;
    top: 169.5px;
    width: 1255px;
    height: 740.5px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .15);
    pointer-events: none;
}


/* .voltrn_scr10_panel{
    position:absolute;
    left:320px;
    top:170px;
    width:1280px;
    height:720px;
    border-radius:45px;
    background:rgba(255,120,40,.35);
    backdrop-filter:blur(3px);
} */

.voltrn_scr10_title {
    text-align: center;
    color: #fff;
    font-size: 60px;
    line-height: 1.2;
    margin-top: 239px;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0s forwards;
}

/* .voltrn_scr10_title strong{
    font-weight:700;
} */

.voltrn_scr10_tabs {
    display: flex;
    justify-content: center;
    gap: 36px;
    margin-top: 75px;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;
}

.voltrn_scr10_tab {

    width: 330px;
    height: 420px;

    background: #fff;

    border-radius: 25px;

    padding: 40px;

    cursor: pointer;

    transition: .3s;
}
/* 
.voltrn_scr10_tab:hover {

    transform: translateY(-8px);

} */

.voltrn_scr10_tab.active {

    border: 8px solid #0038b8;

    box-shadow: 0 0 25px rgba(0, 0, 0, .25);

}

.voltrn_scr10_tab h3 {

    color: #0a1d8f;

    font-size: 42px;

    margin-bottom: 30px;

}

.voltrn_scr10_tab p {

    color: #162d90;

    font-size: 30px;

    line-height: 1.35;

}

.voltrn_scr10_btn {

    position: absolute;

    right: 70px;

    bottom: 55px;

    width: 230px;

    height: 90px;

    border: 4px solid #fff;

    border-radius: 25px;

    background: #ff2c00;

    color: #fff;

    font-size: 40px;

    font-weight: 700;

    cursor: pointer;

}

.voltrn_scr10_tab {
    width: 364px;
    height: 396px;
    padding: 38px;
    border-radius: 22px;
    background: #fff;
    color: #111b8d;
    cursor: pointer;
    transition: all .3s ease;
}

.voltrn_scr10_tab h3 {
    color: #111b8d;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 24px;
    transition: .3s;
}

.voltrn_scr10_tab p {
    color: #111b8d;
    font-size: 27px;
    line-height: 1.35;
    transition: .3s;
}

/* Hover */
/* .voltrn_scr10_tab:hover {
    background: #0b0b9f;
    transform: translateY(-5px);
} */

.voltrn_scr10_tab:hover h3,
.voltrn_scr10_tab:hover p {
    color: #fff;
}

/* Selected */
.voltrn_scr10_tab.active {
    background: #0b0b9f;
    border: 0;
    box-shadow: none;
    transform: none;
}

.voltrn_scr10_tab.active h3,
.voltrn_scr10_tab.active p {
    color: #fff;
}

.voltrn_scr10_btn.active {
    background: #ffffff;
    color: #111b8d;
}


/* screen 11 */
.voltrn_scr11_bg {

    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;

    background: url("../images/voltrn_scrn2bg.png") center center no-repeat;
    background-size: cover;

}

.voltrn_scr11_panel {

    position: absolute;
    left: 340px;
    top: 310px;

    width: 1240px;
    height: 470px;

    /* border-radius:40px;

    background:rgba(255,120,70,.45); */

    display: flex;
    flex-direction: column;
    row-gap: 38px;
    align-items: center;
    justify-content: center;

}

.voltrn_scr11_icon {

    width: 90px;
    height: 90px;
    background-image: url("../images/voltrn_crct_img.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    font-size: 0;
    font-weight: bold;

    display: flex;
    align-items: center;
    justify-content: center;

}

.voltrn_scr11_heading {
    margin: 0;

    color: #fff;
    font-size: 64px;
    font-weight: 700;

}

.voltrn_scr11_text {
    width: 1050px;
    margin: 0;
    text-align: center;
    color: #fff;
    font-size: 36px;
    line-height: 1.2;

}

.voltrn_scr11_text strong {

    font-weight: 700;

}

.voltrn_scr11_btn {

    position: absolute;

    right: 65px;
    bottom: 55px;

    width: 220px;
    height: 90px;

    border: none;
    border-radius: 22px;

    background: #fff;

    color: #081c92;

    font-size: 38px;
    font-weight: 700;

    cursor: pointer;

}

.voltrn_scr12_bg {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: url("../images/voltrn_scrn2bg.png") center center no-repeat;
    background-size: cover;
}

.voltrn_scr12_panel {
    position: absolute;
    left: 330px;
    top: 292px;
    width: 1260px;
    height: 520px;
    border-radius: 40px;
    background: rgba(255, 120, 70, .35);
    display: flex;
    flex-direction: column;
    row-gap: 38px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.voltrn_scr12_icon {
    width: 90px;
    height: 90px;
    background-image: url("../images/voltrn_wrng_img.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 50%;

    font-size: 0;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.voltrn_scr12_heading {
    margin: 0;
    color: #fff;
    font-size: 62px;
    font-weight: 700;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0s forwards;
}

.voltrn_scr12_text {
    width: 1050px;
    margin: 0;
    color: #fff;
    font-family: 'MavenproMedium';
    font-size: 37px;
    line-height: 1.2;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;

}

.voltrn_scr12_text strong {
    font-weight: 700;
}

.voltrn_feedback_heading_row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0s forwards;


}

.voltrn_scr12_btn {
    position: absolute;
    right: 70px;
    bottom: 55px;
    width: 220px;
    height: 90px;
    border: none;
    border-radius: 22px;
    background: #fff;
    color: #0b168f;
    font-size: 38px;
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;

}

.pain-card {
    cursor: pointer;
    transition: .3s;
}

.pain-card.active {
    background: #12148f;
    color: #fff;
}

.pain-card.active h3,
.pain-card.active p {
    color: #fff;
}


/*==========================================
SCREEN 13
==========================================*/

.voltrn_scr13_bg {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;

    background: url("../images/voltrn_scrn2bg.png") center center no-repeat;
    background-size: cover;
}

.voltrn_scr13_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    margin: 0;
    padding: 0;


    font-size: 78px;
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;

    text-align: center;
    white-space: nowrap;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.3s forwards;

}

/* screen14 */
/* Background */

.voltrn_scr14_bg {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: url("../images/voltrn_scrn5bg.png") center center no-repeat;
    background-size: cover;
}

/* Logo */

.voltrn_scr14_logo {
    position: absolute;
    top: 30px;
    right: 35px;
    width: 180px;
    height: 55px;
    background: url("../images/logo.png") no-repeat center;
    background-size: contain;
}

/* Box */

.voltrn_scr14_box {
    position: absolute;
    top: 150px;
    left: 300px;
    width: 1320px;
    height: 730px;
    /* border-radius:35px;
    background:rgba(255,255,255,.18); */
}

/* Title */

.voltrn_scr14_title {
    margin-top: 60px;
    text-align: center;
    color: #fff;
    font-size: 64px;
    line-height: 1.2;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0s forwards;

}

.voltrn_scr14_title span {
    font-family: 'MavenproMedium';
    font-size: 56px;
}

/* Cards */

.voltrn_scr14_cards {
    display: flex;
    justify-content: center;
    gap: 35px;
    margin-top: 70px;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;
}

.voltrn_scr14_card {

    width: 330px;
    height: 380px;
    background: #fff;
    border-radius: 25px;
    cursor: pointer;
    transition: .3s;
    position: relative;

}

.voltrn_scr14_card.active {

    /* background:#000083; */
    background: #000083;

}

.voltrn_scr14_card_title {

    margin-top: 55px;
    text-align: center;
    color: #000083;
    font-size: 42px;

}

.voltrn_scr14_card.active .voltrn_scr14_card_title {

    color: #fff;

}

/* Gel Icon */

.voltrn_scr14_gel_icon {

    width: 140px;

    height: 140px;

    margin: 47px auto 0;

    background: url("../images/vltrn_gelimg.png") center no-repeat;

    background-size: contain;
}

/* Oral Icon */

.voltrn_scr14_oral_icon {

    width: 140px;

    height: 140px;

    margin: 48px auto 0;

    background: url("../images/vltrn_tablate_limg.png") center no-repeat;

    background-size: contain;
}

/* Change icons when selected */

.voltrn_scr14_card.active .voltrn_scr14_gel_icon {

    background-image: url("../images/vltrn_whitegelimg.png");

}

.voltrn_scr14_card.active .voltrn_scr14_oral_icon {

    background-image: url("../images/vltrn_whitetablate_img.png");

}

/* Submit */

.voltrn_scr14_btn {

    position: absolute;
    right: 45px;
    bottom: 40px;

    width: 210px;
    height: 90px;

    border-radius: 20px;
    border: 4px solid #fff;

    background: #ff2c00;

    color: #ffffff;

    font-size: 40px;

    cursor: pointer;

}

.voltrn_scr14_btn.active {
    background: #ffffff;
    color: #15159a;
}

/*==========================================
SCREEN 15
==========================================*/

.voltrn_scr15_bg {

    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;

    background: url("../images/voltrn_crctimg_bg.png") center center no-repeat;
    background-size: cover;

}

.voltrn_scr15_box {

    position: absolute;

    left: 310px;

    top: 293px;

    width: 1300px;

    height: 520px;

    /* border-radius:35px;
    background:rgba(255,255,255,.18); */

    text-align: center;

    display: flex;

    flex-direction: column;

    row-gap: 42px;

    align-items: center;

    justify-content: center;
}

.voltrn_scr15_icon {

    width: 90px;
    height: 90px;

    margin: 0;

    position: relative;
    border: 8px solid #ffffff;
    border-radius: 50%;
    background: transparent;

}

.voltrn_scr15_icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    width: 38px;
    height: 20px;
    border-left: 8px solid #ffffff;
    border-bottom: 8px solid #ffffff;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.voltrn_scr15_title {

    font-size: 58px;
    color: #fff;
    margin: 0;

}

.voltrn_scr15_text {

    width: 1000px;

    margin: 0;

    color: #fff;

    font-size: 33px;

    line-height: 1.2;
}

.voltrn_scr15_text span {

    font-family: MavenProBold;

}

.voltrn_scr15_btn {

    position: absolute;
    left: 86%;
    top: 926px;
    /* transform: translateX(-50%); */
    width: 225px;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 27px;
    border: 0;
    border-radius: 29px;
    background: #fff;
    font-size: 35px;
    font-weight: 900;
    letter-spacing: 0.5px;
    cursor: pointer;

}

/*==========================================
SCREEN 16
==========================================*/

.voltrn_scr16_bg {

    position: relative;
    width: 1920px;
    height: 1080px;

    overflow: hidden;

    background: url("../images/voltrn_crctimg_bg.png") center center no-repeat;
    background-size: cover;

}

.voltrn_scr16_box {

    position: absolute;

    left: 310px;
    top: 309px;

    width: 1300px;
    height: 520px;

    /* border-radius:35px;

    background:rgba(255,255,255,.18); */

    text-align: center;
    display: flex;
    flex-direction: column;
    row-gap: 38px;
    align-items: center;
    justify-content: center;

}

.voltrn_scr16_icon {

    width: 90px;
    height: 90px;

    margin: 0;

    position: relative;
    border: 8px solid #ffffff;
    border-radius: 50%;
    background: transparent;

}

.voltrn_scr16_icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    width: 38px;
    height: 20px;
    border-left: 8px solid #ffffff;
    border-bottom: 8px solid #ffffff;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.voltrn_scr16_title {

    color: #fff;

    font-size: 58px;
    margin: 0;

}

.voltrn_scr16_text {

    width: 930px;

    margin: 0;

    color: #fff;

    font-size: 33px;

    line-height: 1.2;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;
}

.voltrn_scr16_text span {

    font-family: MavenProBold;

}

.voltrn_scr16_btn {

    position: absolute;
    left: 86%;
    top: 926px;
    /* transform: translateX(-50%); */
    width: 225px;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 27px;
    border: 0;
    border-radius: 29px;
    background: #fff;
    font-size: 35px;
    font-weight: 900;
    letter-spacing: 0.5px;
    cursor: pointer;

}

/*==========================================
SCREEN 17
==========================================*/

.voltrn_scr17_bg {

    position: relative;
    width: 1920px;
    height: 1080px;

    overflow: hidden;

    background: url("../images/voltrn_scrn2bg.png") center center no-repeat;
    background-size: cover;

}



.voltrn_scr17_title {

    margin-top: 400px;
    text-align: center;
    color: #fff;

    font-size: 82px;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;



}

.voltrn_scr17_text {

    margin-top: 40px;

    color: #fff;

    font-size: 42px;

}

.voltrn_scr17_btn {

    position: absolute;

    right: 45px;

    bottom: 45px;

}

/*=========================
SCREEN 18
=========================*/

.voltrn_scr18_bg {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: url("../images/voltrn_scrn5bg.png") center center no-repeat;
    background-size: cover;
}

.voltrn_scr18_box {
    position: absolute;
    left: 210px;
    top: 188px;
    width: 1500px;
    height: 680px;
    background: #fff;
    border-radius: 40px;
    overflow: hidden;
}

/* PN24 -> PN25 horizontal slider (no visible scrollbar). */
.voltrn_scr18_scroll {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;
    cursor: grab;
}

.voltrn_scr18_scroll.dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
    user-select: none;
}

.voltrn_scr18_scroll::-webkit-scrollbar {
    display: none;
}

/*=========================
PAGE 18
=========================*/

.voltrn_scr18_page {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;
    padding: 45px 60px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.voltrn_scr18_heading {
    font-size: 29px;
    color: #061a87;
    text-align: center;
    line-height: 44px;
    margin-bottom: 40px;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0s forwards;
}

.voltrn_scr18_content {
    display: flex;
    justify-content: space-between;
}

.voltrn_scr18_left {
    width: 460px;
}

.voltrn_scr18_product {
    width: 491px;
    height: 239px;
    margin-top: 107px;
    background: url("../images/packvolt.svg") center center no-repeat;
    background-size: contain;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.3s forwards;
}

.voltrn_scr18_note {
    margin-top: 72px;
    font-size: 19px;
    line-height: 28px;
    color: #061a87;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;

}

.voltrn_scr18_right {
    width: 760px;
    color: #061a87;
    font-size: 31px;
    line-height: 38px;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;
}

.voltrn_scr18_right ul {
    margin: 0;
    padding-left: 7px;
}

.voltrn_scr18_right li {
    margin-bottom: 15px;
}

/*=========================
PAGE 19
=========================*/

.voltrn_scr19_page {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    margin-top: 0;
    box-sizing: border-box;
    padding: 38px 80px 48px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.voltrn_scr18_slider_arrow {
    position: absolute;
    top: 50%;
    z-index: 20;
    width: 54px;
    height: 84px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #061a87;
    font-size: 70px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .25s ease, background .25s ease, transform .25s ease;
}

.voltrn_scr18_slider_arrow.previous {
    left: 14px;
}

.voltrn_scr18_slider_arrow.next {
    right: 14px;
}

.voltrn_scr18_slider_arrow:hover:not(:disabled) {
    background: transparent;
    transform: translateY(-50%) scale(1.06);
}

.voltrn_scr18_slider_arrow:disabled {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: default;
}

.voltrn_scr19_heading {
    font-size: 43px;
    color: #061a87;
    margin-bottom: 10px;
    line-height: -30px;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0s forwards;
}

.voltrn_scr19_list {
    color: #061a87;
    font-size: 31px;
    line-height: 43px;
    padding-left: 54px;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.2s forwards;
}

.voltrn_scr19_list li {
    margin-bottom: 15px;
}

/*=========================
BUTTON
=========================*/

.voltrn_scr18_btn {
    position: absolute;
    right: 55px;
    bottom: 40px;
    width: 175px;
    height: 80px;
    background: #ff2c00;
    border: 4px solid #ffffff;
    border-radius: 18px;
    color: #ffffff;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: background .3s ease, color .3s ease;
}

/*==========================================
SCREEN 20
==========================================*/

.voltrn_scr20_bg {

    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;

    background: url("../images/voltrn_scrn2bg.png") center center no-repeat;
    background-size: cover;
    transition: opacity .3s ease-out;
    backface-visibility: hidden;
    transform: translateZ(0);

}

.voltrn_scr20_bg.is-leaving {
    opacity: .78;
}

.voltrn_scr20_title {

    position: absolute;
    left: 50%;
    top: 48%;

    transform: translate(-50%, -50%);

    width: 1200px;

    text-align: center;

    color: #ffffff;

    font-size: 76px;

    line-height: 90px;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;

}

/*==========================================
SCREEN 21
==========================================*/

.voltrn_scr21_bg {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: url("../images/voltrn_scrn5bg.png") center center no-repeat;
    background-size: cover;
    backface-visibility: hidden;
    transform: translateZ(0);
    animation: voltrnJourneyEnter .36s ease-out both;
}

/* Shared CSS upper panel for patient-journey slides. */
.voltrn_scr21_bg::before {
    content: "";
    position: absolute;
    left: 256.5px;
    top: 216.5px;
    width: 1407px;
    height: 646.5px;
    border-radius: 50px;
    background: rgba(255, 255, 255, .15);
    pointer-events: none;
}

@keyframes voltrnJourneyEnter {
    from {
        opacity: .78;
        transform: translateZ(0) scale(.997);
    }

    to {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}

.voltrn_scr21_title {
    position: absolute;
    top: 240px;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 56px;
    line-height: 68px;
}

.voltrn_scr21_title span {
    font-weight: 400;
}

.voltrn_scr21_box {
    position: absolute;
    left: 140px;
    top: 392px;
    width: 1640px;
    height: 431px;
    /* border: 3px solid; */
    /* background:#f47b20; */
    border-radius: 32px;
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
}

.voltrn_scr21_box.dragging {
    cursor: grabbing;
    user-select: none;
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.voltrn_scr21_box::-webkit-scrollbar {
    display: none;
}

.voltrn_scr21_box::-webkit-scrollbar-track {
    background: transparent;
}

.voltrn_scr21_box::-webkit-scrollbar-thumb {
    background: #ffffff;
    border-radius: 20px;
}

.voltrn_scr21_scroll {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    box-sizing: border-box;
}

/* Large left/right carousel arrows, matching the supplied reference. */
.voltrn_scr21_carousel_arrow {
    position: absolute;
    top: 556px;
    z-index: 25;
    width: 72px;
    height: 96px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

.voltrn_scr21_carousel_arrow.previous {
    left: 265px;
}

.voltrn_scr21_carousel_arrow.next {
    right: 265px;
}

.voltrn_scr21_carousel_arrow::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 26px solid transparent;
    border-bottom: 26px solid transparent;
}

.voltrn_scr21_carousel_arrow.previous::before {
    border-right: 34px solid #000083;
}

.voltrn_scr21_carousel_arrow.next::before {
    border-left: 34px solid #000083;
}

.voltrn_scr21_carousel_arrow:active {
    transform: scale(.94);
}

.voltrn_scr21_carousel_arrow:focus-visible {
    outline: 3px solid #000083;
    outline-offset: 3px;
}

.voltrn_scr21_card {
    position: absolute;
    left: 0;
    top: 27px;
    width: 460px;
    height: 390px;
    background: #fff;
    border-radius: 28px;
    padding: 38px;
    box-sizing: border-box;
    color: #0a2a8b;
    cursor: pointer;
    overflow: hidden;
    opacity: var(--journey-card-opacity, 1);
    transform: translate3d(var(--journey-card-x), 0, 0) scale(var(--journey-card-scale, 1));
    transform-origin: center;
    transition:
        transform .72s cubic-bezier(.2, .78, .22, 1),
        width .52s cubic-bezier(.2, .78, .22, 1),
        opacity .5s ease,
        box-shadow .5s ease;
    will-change: transform;
    backface-visibility: hidden;
}

.voltrn_scr21_card.active {
    width: 680px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .28);
}

.voltrn_scr21_card:focus-visible {
    outline: 4px solid #fff;
    outline-offset: 4px;
}

.voltrn_scr21_card h3 {
    font-size: 42px;
    line-height: 42px;
    margin-bottom: 17px;
}

.voltrn_scr21_card p {
    font-size: 36px;
    line-height: 40px;
}

.voltrn_scr21_card ul {
    padding-left: 24px;
    font-size: 30px;
    line-height: 43px;
}
.cardTXtCenter{
       margin-top: 94px !important;
       text-align: center;
}
.voltrn_scr21_btn {
    position: absolute;
    right: 44px;
    bottom: 43px;
    width: 563px;
    height: 108px;
    border: 5px solid #fff;
    background: transparent;
    border-radius: 32px;
    color: #fff;
    font-size: 35px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    white-space: nowrap;
    padding: 0 28px;
    font-size: 31px;
}

/* .voltrn_scr18_btn::after{
    content:"»";
} */

.voltrn_scr18_btn.active {
    background: #ffffff;
    color: #061a87;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;
}

.voltrn_scr21_btn.scrolled {
    background: #ffffff;
    color: #0a2a8b;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;
}

/* .voltrn_scr21_btn::after{
    content:"»";
} */

/* ==========================================================================
   07. SHARED FOOTER / ACTION CONTROLS
   NEXT / SUBMIT controls shared by multiple screens
   ========================================================================== */
/* Keep all NEXT and SUBMIT controls aligned without changing their colors. */
.voltrn_scr7_btn,
.voltrn_scr10_btn,
.voltrn_scr11_btn,
.voltrn_scr12_btn,
.voltrn_scr14_btn,
.voltrn_scr15_btn,
.voltrn_scr16_btn,
.voltrn_scr17_btn,
.voltrn_scr18_btn {
    position: absolute;
    left: 86%;
    right: auto;
    top: 926px;
    bottom: auto;
    width: 225px;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 27px;
    border-radius: 32px;
    font-size: 35px !important;
    padding: 0 11px;
    box-sizing: border-box;
    white-space: nowrap;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;
}

/* ==========================================================================
   08. SHARED REFERENCE / FOOTER ICON
   ========================================================================== */
/* Reference icon and full-page reference overlay. */
.voltrn_has_custom_scrollbar::-webkit-scrollbar {
    display: none;
}

.voltrn_custom_scrollbar {
    position: absolute;
    right: 0;
    width: 8px;
    border-radius: 10px;
    background: #d9d9d9;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    z-index: 20;
}

.voltrn_custom_scrollbar_thumb {
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    min-height: 72px;
    border-radius: 10px;
    background: #153d97;
    cursor: grab;
    will-change: transform;
}

.voltrn_custom_scrollbar.is-dragging .voltrn_custom_scrollbar_thumb {
    cursor: grabbing;
}

.voltrn_custom_scrollbar.is-disabled {
    display: none;
}

.voltrn_custom_scrollbar.voltrn_reference_scrollbar {
    right: 38px;
    width: 8px;
    background: rgba(255, 255, 255, .32);
    z-index: 100002;
}

.voltrn_reference_scrollbar .voltrn_custom_scrollbar_thumb {
    width: 8px;
    min-height: 72px;
    background: #fff;
}

.voltrn_custom_scrollbar.voltrn_assessment_scrollbar {
    right: 18px;
    width: 8px;
    background: #d9d9d9;
    z-index: 25;
}

.voltrn_assessment_scrollbar .voltrn_custom_scrollbar_thumb {
    width: 8px;
    min-height: 72px;
    background: #153d97;
}

.voltrn_reference_trigger {
    position: absolute;
    right: 25px;
    bottom: 26px;
    width: 77px;
    height: 77px;
    padding: 0;
    border: 0;
    background: transparent url("../images/icon_references.png") center/contain no-repeat;
    cursor: pointer;
    z-index: 99998;
}

.voltrn_reference_trigger[hidden] {
    display: none;
}

.voltrn_references_overlay {
    position: absolute;
    inset: 0;
    width: 1920px;
    height: 1080px;
    background: #ff4b08 url("../images/voltrn_scrn5bg.png") center/cover no-repeat;
    z-index: 100000;
    animation: voltrnReferencesEnter .25s ease-out both;
}

.voltrn_references_panel {
    position: absolute;
    inset: 0;
    width: 1920px;
    height: 1080px;
    color: #fff;
}

.voltrn_references_panel h2 {
    position: absolute;
    left: 34px;
    top: 62px;
    margin: 0;
    font-size: 44px;
    line-height: 1;
}

.voltrn_references_list {
    position: absolute;
    left: 30px;
    top: 132px;
    width: 1850px;
    height: 840px;
    margin: 0;
    padding: 0 48px 25px;
    box-sizing: border-box;
    overflow-y: auto;
    color: #fff;
    font-size: 28px;
    line-height: 1.34;
    scrollbar-width: none;
}

.voltrn_references_list li {
    margin: 0 0 20px;
    padding-left: 12px;
}

.voltrn_references_list a {
    color: #fff;
    pointer-events: none;
        text-decoration: none !important;
    /* text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere; */
}

/* .voltrn_references_list a:hover,
.voltrn_references_list a:focus {
    color: #fff36a;
} */

.voltrn_references_list::-webkit-scrollbar {
    display: none;
}

.voltrn_references_close {
    position: absolute;
    right: 25px;
    bottom: 26px;
    width: 76px;
    height: 76px;
    padding: 0;
    border: 0;
    background: transparent url("../images/icon_close.png") center/contain no-repeat;
    cursor: pointer;
    z-index: 100003;
}

@keyframes voltrnReferencesEnter {
    from {
        opacity: .7;
    }

    to {
        opacity: 1;
    }
}

/*==================================================
THANK YOU / PN100
==================================================*/
.voltrn_thankyou_bg {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: url("../images/voltrn_scrn2bg.png") center center no-repeat;
    background-size: cover;
    color: #fff;
}

/* Large soft curves recreate the PN100 layered orange/red artwork in HTML/CSS. */
/*
.voltrn_thankyou_bg::before,
.voltrn_thankyou_bg::after{
    content:"";
    position:absolute;
    left:50%;
    border-radius:0 0 50% 50%;
    transform:translateX(-50%);
    pointer-events:none;
}

.voltrn_thankyou_bg::before{
    top:-520px;
    width:1620px;
    height:1050px;
    background:rgba(255,72,15,.38);
}

.voltrn_thankyou_bg::after{
    top:-585px;
    width:1130px;
    height:790px;
    background:rgba(255,34,0,.48);
    box-shadow:0 30px 70px rgba(255,53,0,.16);
}
*/



.voltrn_thankyou_scanner {
    position: absolute;
    left: 235px;
    top: 225px;
    width: 415px;
    height: 600px;
    z-index: 3;
}

.voltrn_thankyou_scanner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.voltrn_thankyou_copy {
    position: absolute;
    left: 522px;
    top: 387px;
    z-index: 3;
}

.voltrn_thankyou_title {
    font-size: 67px;
    line-height: 1;
    letter-spacing: 1px;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0s forwards;
}

.voltrn_thankyou_text {
    margin-top: 77px;
    text-align: center;
    margin-left: -99px;
    font-size: 59px;
    line-height: 1.25;

    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;
}

.voltrn_thankyou_text a {
    text-transform: uppercase;
    text-decoration: underline;
    color: #fff;
    font-weight: 800;
}

.voltrn_thankyou_btn {
    position: absolute;
    right: 72px;
    bottom: 62px;
    min-width: 455px;
    height: 96px;
    padding: 0 34px;
    border: 0;
    border-radius: 22px;
    background: #fff;
    color: #17178e;
    font-size: 30px;
    cursor: pointer;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;
}

.voltrn_thankyou_btn .voltrn_scr2_arrow {
    filter: none;
}


/* ==========================================================================
   09. GLOBAL TRANSITIONS / FINAL OVERRIDES
   ========================================================================== */

/* =========================================================
   GLOBAL SMOOTH SCREEN NAVIGATION
   Keeps every PN transition fluid without a loading/blank frame.
   ========================================================= */
#main {
    view-transition-name: voltaren-stage;
    contain: paint;
}

.voltrn_screen_smooth_enter {
    animation: voltrnScreenSmoothEnter .28s cubic-bezier(.22, .75, .2, 1) both;
    backface-visibility: hidden;
    transform-origin: 50% 50%;
}

@keyframes voltrnScreenSmoothEnter {

    /* Fade only: keep the slide perfectly fixed in position. */
    from {
        opacity: .88;
        transform: none;
    }

    to {
        opacity: 1;
        transform: none;
    }
}

::view-transition-old(voltaren-stage),
::view-transition-new(voltaren-stage) {
    animation-duration: .30s;
    animation-timing-function: cubic-bezier(.22, .75, .2, 1);
}

::view-transition-old(voltaren-stage) {
    animation-name: voltrnViewFadeOut;
}

::view-transition-new(voltaren-stage) {
    animation-name: voltrnViewFadeIn;
}

@keyframes voltrnViewFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes voltrnViewFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .voltrn_screen_smooth_enter {
        animation: none !important;
    }

    ::view-transition-old(voltaren-stage),
    ::view-transition-new(voltaren-stage) {
        animation: none !important;
    }
}

/* =========================================================
   Feedback slide fade-in consistency
   CORRECT / INCORRECT / EXCELLENT CHOICE / GOOD CHOICE
   Keep screen backgrounds immediate to avoid loading feel.
   ========================================================= */

/* Immediate feedback elements */
.voltrn_scr11_icon,
.voltrn_scr11_heading,
.voltrn_scr12_icon,
.voltrn_scr12_heading,
.voltrn_scr15_icon,
.voltrn_scr15_title,
.voltrn_scr16_icon,
.voltrn_scr16_title {
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0s forwards;
}

/* Supporting copy and NEXT buttons follow after the headline */
.voltrn_scr11_text,
.voltrn_scr11_btn,
.voltrn_scr12_text,
.voltrn_scr12_btn,
.voltrn_scr15_text,
.voltrn_scr15_btn,
.voltrn_scr16_text,
.voltrn_scr16_btn {
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;
}

/* =========================================================
   Consistent fade-in for Clinical Assessment + Advice slides
   Uses the same fadeIn timing as the rest of the presentation.
   No translate/zoom is applied, so screens do not shift or load.
   ========================================================= */

/* Clinical Assessment: patient image + white panel immediately. */
/*
.voltrn_scr7_bg::after {
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0s forwards;
}
*/

.voltrn_scr7_box {
    opacity: 0;
    transform: none;
    animation: fadeIn 0.5s ease-in 0s forwards;
}

/* Clinical Assessment content + NEXT follows after the panel. */
.voltrn_scr7_btn {
    opacity: 0;
    transform: none;
    animation: fadeIn 0.5s ease-in 0.5s forwards;
}

/* Remove the older sideways assessment-entry movement. */
.voltrn_scr7_box,
.voltrn_scr7_btn {
    animation-name: fadeIn;
}

/* Treatment / Lifestyle two-page white panel. */
.voltrn_scr18_box {
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0s forwards;
}

/* Keep NEXT consistent with the other delayed controls. */
.voltrn_scr18_btn {
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;
}


/* =========================================================
   Fade the second page when the in-screen scroller/arrow reveals it.
   The first page already fades on screen load; these rules make the
   second Clinical Assessment and Lifestyle pages behave the same way.
   ========================================================= */
.voltrn_scr7_page2,
.voltrn_scr19_page {
    /* opacity: 0; */
}

.voltrn_scr7_page2.page-fade-active,
.voltrn_scr19_page.page-fade-active {
    /* animation: fadeIn 0.5s ease-in 0.1s forwards; */
}

/* ========================================================================== 
   Screen 2 refined entrance animation
   Curves reveal smoothly one-by-one, then 1→5 steps appear one-by-one.
   No vertical page movement / no white loading frame.
   ========================================================================== */
.voltrn_scr2_curve {
    transform-origin: 50% 0%;
    will-change: opacity, transform;
}

.voltrn_scr2_curve_1 {
    animation: voltrnScr2CurveSmooth .72s cubic-bezier(.25, .70, .25, 1) .00s both;
}

.voltrn_scr2_curve_2 {
    animation: voltrnScr2CurveSmooth .74s cubic-bezier(.25, .70, .25, 1) .26s both;
}

.voltrn_scr2_curve_3 {
    animation: voltrnScr2CurveSmooth .78s cubic-bezier(.25, .70, .25, 1) .52s both;
}

@keyframes voltrnScr2CurveSmooth {
    0% {
        opacity: 0;
        transform: scale(.975);
    }

    35% {
        opacity: .38;
        transform: scale(.984);
    }

    72% {
        opacity: .82;
        transform: scale(.994);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Curves finish first, then title/line, then the five circles in sequence. */
.voltrn_scr2_title {
    animation: fadeIn .38s ease-out 1.92s forwards;
}

@keyframes voltrnStepReveal {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.voltrn_scr2_duration,
.voltrn_scr2_btn {
    animation: fadeIn .38s ease-out 2.56s forwards;
}


/* ========================================================================== 
   SCREEN 2 — FINAL ORDERED BACKGROUND ANIMATION
   1) White Haleon swoosh / dotted mark appears first.
   2) Nested orange/red curves reveal one by one.
   3) Title + line appear.
   4) Circles 1 → 5 appear one by one.
   This is an opacity/scale-only reveal so the page itself never shifts.
   ========================================================================== */
.voltrn_scr2_mark,
.voltrn_scr2_curve {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("../images/voltrn_scrn2bg.png") no-repeat center center;
    background-size: 100% 100%;
    opacity: 0;
    transform-origin: 50% 0%;
    will-change: opacity, transform;
}

/* Only the top-centre white artwork is exposed in the first beat. */
.voltrn_scr2_mark {
    clip-path: polygon(34% 0, 66% 0, 64% 7%, 62% 13%, 59% 19%, 55% 23%, 50% 25%, 45% 23%, 41% 19%, 38% 13%, 36% 7%);
    animation: voltrnScr2WhiteMarkIn .62s cubic-bezier(.22, .72, .28, 1) .02s both;
}

@keyframes voltrnScr2WhiteMarkIn {
    0% {
        opacity: 0;
        transform: scale(.96);
    }

    55% {
        opacity: .78;
        transform: scale(.988);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* The three nested curve layers then arrive from inner to outer. */
.voltrn_scr2_curve_1 {
    animation: voltrnScr2CurveOrdered .76s cubic-bezier(.22, .70, .28, 1) .56s both;
}

.voltrn_scr2_curve_2 {
    animation: voltrnScr2CurveOrdered .78s cubic-bezier(.22, .70, .28, 1) .90s both;
}

.voltrn_scr2_curve_3 {
    animation: voltrnScr2CurveOrdered .82s cubic-bezier(.22, .70, .28, 1) 1.24s both;
}

@keyframes voltrnScr2CurveOrdered {
    0% {
        opacity: 0;
        transform: scale(.972);
    }

    38% {
        opacity: .38;
        transform: scale(.984);
    }

    76% {
        opacity: .84;
        transform: scale(.996);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Content waits until the background sequence is readable. */
.voltrn_scr2_title {
    animation: fadeIn .42s ease-out 2.00s forwards;
}



.voltrn_scr2_duration,
.voltrn_scr2_btn {
    animation: fadeIn .40s ease-out 3.60s forwards;
}

@media (prefers-reduced-motion:reduce) {
    .voltrn_scr2_mark {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ========================================================================== 
   SCREEN 2 — MATCH SCREEN 1 BACKGROUND CURVE MOTION
   All background artwork layers arrive together from the top, then the
   HTML title/process content reveals. Circles still appear 1 -> 5.
   ========================================================================== */
.voltrn_scr2_mark,
.voltrn_scr2_curve {
    opacity: 0;
    transform: translate3d(0, -42px, 0);
    backface-visibility: hidden;
    will-change: transform, opacity;
    animation: voltrnScr2CurvesTogetherFromTop .92s cubic-bezier(.16, 1, .3, 1) .02s forwards !important;
}

@keyframes voltrnScr2CurvesTogetherFromTop {
    0% {
        opacity: 0;
        transform: translate3d(0, -42px, 0);
    }

    28% {
        opacity: .55;
    }

    65% {
        opacity: .92;
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.voltrn_scr2_title {
    animation: fadeIn .45s ease-out 0s forwards !important;
}



/* 1 → 5 reveal one by one. */
/* .voltrn_scr2_process .process_step:nth-child(2) {
    animation-delay: 1.60s;
}

.voltrn_scr2_process .process_step:nth-child(3) {
    animation-delay: 1.76s;
}

.voltrn_scr2_process .process_step:nth-child(4) {
    animation-delay: 1.92s;
}

.voltrn_scr2_process .process_step:nth-child(5) {
    animation-delay: 2.08s;
}

.voltrn_scr2_process .process_step:nth-child(6) {
    animation-delay: 2.24s;
} */



.voltrn_scr2_duration,
.voltrn_scr2_btn {
    animation: fadeIn .40s ease-out 0.5s forwards !important;
}

@media (prefers-reduced-motion:reduce) {

    .voltrn_scr2_mark,
    .voltrn_scr2_curve {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ========================================================================== 
   SHARED voltrn_scrn2bg BACKGROUND CURVE ANIMATION
   Applied automatically to every rendered screen that uses voltrn_scrn2bg.png.
   Screen 2 keeps its own dedicated sequence; all other matching screens reuse
   the same white-mark-first, curves-after motion without changing HTML content.
   ========================================================================== */
.voltrn_shared_bg_anim {
    isolation: isolate;
    background-image: none !important;
    background-color: #ff1b00;
    background-image: linear-gradient(180deg, #ff9b3d 0%, #ff690f 16%, #ff3f00 48%, #ff1000 100%) !important;
}

.voltrn_shared_bg_layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background: url("../images/voltrn_scrn2bg.png") no-repeat center center;
    background-size: 100% 100%;
    opacity: 0;
    transform-origin: 50% 0%;
    will-change: opacity, transform;
    backface-visibility: hidden;
}

/* First beat: top-centre white swoosh / dots. */
.voltrn_shared_bg_mark {
    clip-path: polygon(34% 0, 66% 0, 64% 7%, 62% 13%, 59% 19%, 55% 23%, 50% 25%, 45% 23%, 41% 19%, 38% 13%, 36% 7%);
    animation: voltrnSharedMarkIn .58s cubic-bezier(.22, .72, .28, 1) .02s both;
}

/* Remaining nested curves follow smoothly, one after another. */
.voltrn_shared_bg_curve1 {
    clip-path: polygon(28% 0, 72% 0, 68% 10%, 63% 20%, 58% 29%, 53% 35%, 50% 37%, 47% 35%, 42% 29%, 37% 20%, 32% 10%);
    animation: voltrnSharedCurveIn .70s cubic-bezier(.22, .72, .28, 1) .38s both;
}

.voltrn_shared_bg_curve2 {
    clip-path: polygon(10% 0, 90% 0, 86% 18%, 79% 34%, 69% 48%, 59% 58%, 50% 62%, 41% 58%, 31% 48%, 21% 34%, 14% 18%);
    animation: voltrnSharedCurveIn .76s cubic-bezier(.22, .72, .28, 1) .62s both;
}

.voltrn_shared_bg_curve3 {
    clip-path: polygon(0 0, 100% 0, 100% 74%, 91% 85%, 78% 94%, 64% 100%, 36% 100%, 22% 94%, 9% 85%, 0 74%);
    animation: voltrnSharedCurveIn .82s cubic-bezier(.22, .72, .28, 1) .88s both;
}

@keyframes voltrnSharedMarkIn {
    0% {
        opacity: 0;
        transform: translate3d(0, -12px, 0) scale(.985);
    }

    55% {
        opacity: .78;
        transform: translate3d(0, -3px, 0) scale(.995);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes voltrnSharedCurveIn {
    0% {
        opacity: 0;
        transform: translate3d(0, -18px, 0) scale(.992);
    }

    40% {
        opacity: .48;
    }

    78% {
        opacity: .92;
        transform: translate3d(0, -2px, 0) scale(.999);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .voltrn_shared_bg_layer {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ==========================================================================
   SHARED BACKGROUND — FASTER SCREEN-2 MATCH
   Keep Screen 1 untouched. For every other screen using voltrn_scrn2bg.png,
   bring the white mark and all curve layers in together with the same fast,
   smooth top-down motion used on Screen 2.
   ========================================================================== */
.voltrn_shared_bg_mark,
.voltrn_shared_bg_curve1,
.voltrn_shared_bg_curve2,
.voltrn_shared_bg_curve3 {
    animation: voltrnSharedFastTogether .92s cubic-bezier(.16, 1, .3, 1) .02s forwards !important;
    transform-origin: 50% 0%;
}

@keyframes voltrnSharedFastTogether {
    0% {
        opacity: 0;
        transform: translate3d(0, -42px, 0);
    }

    28% {
        opacity: .55;
    }

    65% {
        opacity: .92;
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* ==========================================================
   QUIZ SELECTION - LARGE BLUE HIGHLIGHT ANIMATION
   ========================================================== */
@keyframes quizSelectedBig {
    0% {
        transform: scale(1);
    }

    55% {
        transform: scale(1.11);
    }

    100% {
        transform: scale(1.075);
    }
}

.voltrn_scr10_tab.active,
.pain-card.active,
.voltrn_scr14_card.active {
    /* background: #0b0b9f; */
    background: #000083;
    color: #fff;
    position: relative;
    z-index: 5;
    transform-origin: center center;
    animation: quizSelectedBig 0.42s cubic-bezier(.2, .75, .25, 1) forwards;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
}

.voltrn_scr10_tab.active h3,
.voltrn_scr10_tab.active p,
.pain-card.active h3,
.pain-card.active p,
.voltrn_scr14_card.active .voltrn_scr14_card_title {
    color: #fff;
}


/* =========================================================
   Clinical Assessment PN9 -> PN10 continuous scrolling
   Keep both PN9 and PN10 content inside one real scroll area.
   No snap-to-page behaviour: the thumb/wheel can stop anywhere
   between the two sections. NEXT is the only navigation control.
   ========================================================= */
.voltrn_scr7_content.paged-assessment {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch;
}

.voltrn_scr7_content.paged-assessment>.voltrn_scr7_page {
    height: auto !important;
    min-height: 0 !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: normal !important;
}

.voltrn_scr7_content.paged-assessment>.voltrn_scr7_page1 {
    padding-top: 0 !important;
    padding-bottom: 10px !important;
}

.voltrn_scr7_content.paged-assessment>.voltrn_scr7_page2 {
    padding-top: 18px !important;
    padding-bottom: 38px !important;
}

/* Keep the visual NEXT state white; scrolling itself never advances. */
.voltrn_scr7_btn,
.voltrn_scr7_btn.active {
    background: #ffffff !important;
    color: #17178e !important;
    border: 3px solid #ffffff !important;
}

.voltrn_scr7_btn .voltrn_scr2_arrow,
.voltrn_scr7_btn.active .voltrn_scr2_arrow {
    background-image: url("../images/voltrn_scrn1arrows.png") !important;
}

/* Split screen icon */
.splitscreenIcon {
    position: fixed;
    right: 641px;
    bottom: 55px;
    width: 73px;
    height: 73px;
    background: url(../images/Split_icon.png) no-repeat;
    background-size: 100% 100%;
    z-index: 9 !important;
}

.voltrn_thankyou_bg .splitscreenIcon {
    right: 132px;
    bottom: 27px;
}

/* =========================================================
   V2.3: keep PN9/PN10 assessment text crisp during scrolling.
   The second section now enters naturally through the clipped scroll
   viewport rather than fading at partial opacity.
   ========================================================= */
.voltrn_scr7_content.paged-assessment>.voltrn_scr7_page2,
.voltrn_scr7_content.paged-assessment>.voltrn_scr7_page2.page-fade-active {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}

/* Carousel entrance starts from the middle and spreads outwards. */
.voltrn_scr21_card.voltrn_center_intro {
    transition: none !important;
    transform: translate3d(590px, 0, 0) scale(.66) !important;
    opacity: 0 !important;
}

/* Screen 2 Start Challenge pressed state: remain on PN2 for 1.5s before PN4. */
.voltrn_scr2_btn.is-started {
    background: #fff;
    color: #002f86;
    transition: background-color .12s ease, color .12s ease;
}

.voltrn_scr2_btn.is-started .voltrn_scr2_arrow {
    background-image: url("../images/voltrn_scrn1arrows.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    filter: none;
}

/* PN2 -> PN3 Start Challenge state: duration is visible initially, hidden on click. */
.voltrn_scr2_duration.is-hidden {
    opacity: 0 !important;
    visibility: hidden;
    transition: opacity .10s ease, visibility 0s linear .10s;
    animation: none !important;
}

/* =========================================================
   V4.4 - PN7 -> PN8 seamless zoom
   Keep the outgoing PN7 and incoming PN8 perfectly overlapped
   for the first rendered frame, then use one clean GPU zoom.
   ========================================================= */
.voltrn_scr6_popup.pn8-seamless {
    transition: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.voltrn_scr6_popup.pn8-seamless .popup-img2 {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(.66);
    transition: transform 1.12s cubic-bezier(.20, .72, .18, 1) !important;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    image-rendering: auto;
}

.voltrn_scr6_popup.pn8-seamless .popup-img2.enter.pn8-start {
    opacity: 1 !important;
    transform: translate3d(-50%, -50%, 0) scale(.76) !important;
}

.voltrn_scr6_popup.pn8-seamless .popup-img2.enter.pn8-zoom {
    opacity: 1 !important;
    transform: translate3d(-50%, -50%, 0) scale(1.16) !important;
}

.voltrn_scr6_pn7_flying.handoff-to-pn8 {
    opacity: 0 !important;
    transform: translate3d(var(--card-fly-x), var(--card-fly-y), 0) scale(1.12) !important;
    transition: opacity .24s ease-out !important;
}

/* V4.5: stronger PN7 -> PN8 zoom only. PN7 centres at 1.12x; PN8 starts smaller for a clearer zoom, while final scale remains 1 to avoid a handoff jump. */




/* Screen 6 only: swipecard_img must match each scenario card exactly */
#template-scr6 {
    --scr6-card-w: 342px;
    --scr6-card-h: 430px;
}

#template-scr6 .voltrn_scr6_card,
#template-scr6 .voltrn_scr6_reveal_card {
    width: var(--scr6-card-w) !important;
    height: var(--scr6-card-h) !important;
    box-sizing: border-box;
}

#template-scr6 .voltrn_scr6_reveal_card {
    object-fit: fill !important;
    object-position: center center;
    display: block;
    transform-origin: center center;
}

/* Faster, smoother fade at Card 4 */
#template-scr6 .voltrn_scr6_reveal_card.fade-out {
    opacity: 0 !important;
    transition: opacity .16s ease-out !important;
}


/* Carousel end-state: Box 6 is final; fade and disable the right arrow. */
.voltrn_scr21_carousel_arrow.next {
    transition: opacity .32s ease, transform .2s ease;
}

.voltrn_scr21_carousel_arrow.next.is-disabled,
.voltrn_scr21_carousel_arrow.next:disabled {
    opacity: .28;
    pointer-events: none;
    cursor: default;
    transform: scale(.96);
}



/* Pull the surrounding carousel cards closer toward the centre. */
.voltrn_scr21_journey_card {
    --journey-inward-factor: .88;
    transform:
        translate3d(calc(var(--journey-card-x) * var(--journey-inward-factor)), 0, 0) scale(var(--journey-card-scale));
}

/* Preserve the stronger centre-card emphasis without changing carousel logic. */
.voltrn_scr21_journey_card.active {
    transform:
        translate3d(calc(var(--journey-card-x) * var(--journey-inward-factor)), 0, 0) scale(var(--journey-card-scale));
}


/* Carousel bounded-end states: keep the blocked arrow visible but faded. */
.voltrn_scr21_carousel_arrow.previous,
.voltrn_scr21_carousel_arrow.next {
    transition: opacity .28s ease, transform .2s ease;
}

.voltrn_scr21_carousel_arrow.previous.is-disabled,
.voltrn_scr21_carousel_arrow.previous:disabled,
.voltrn_scr21_carousel_arrow.next.is-disabled,
.voltrn_scr21_carousel_arrow.next:disabled {
    opacity: .28 !important;
    pointer-events: none;
    cursor: default;
    transform: scale(.96);
}

/* Carousel end states */
.voltrn_scr21_carousel_arrow.previous,
.voltrn_scr21_carousel_arrow.next {
    transition: opacity .28s ease, transform .2s ease;
}

.voltrn_scr21_carousel_arrow.previous.is-disabled,
.voltrn_scr21_carousel_arrow.previous:disabled,
.voltrn_scr21_carousel_arrow.next.is-disabled,
.voltrn_scr21_carousel_arrow.next:disabled {
    opacity: .28 !important;
    pointer-events: none;
    cursor: default;
    transform: scale(.96);
}


/* =========================================================
   PN14 / Correct slide only
   Keep voltrn_scrn2bg, orange border box, curve reveal,
   and existing Advil-style white blast from startCorrectBlast().
   ========================================================= */
.voltrn_scr11_bg {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: url("../images/voltrn_scrn2bg.png") center center / cover no-repeat !important;
    isolation: isolate;
}

.voltrn_scr11_panel {
    box-sizing: border-box;
    border: 4px solid rgba(255, 122, 47, .96);
    border-radius: 42px;
    background: rgba(255, 255, 255, .08);
    z-index: 5;
}

/* Curve animation matches the soft layered reveal used on other Voltaren screens. */
.voltrn_scr11_curve {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: url("../images/voltrn_scrn2bg.png") center center / 100% 100% no-repeat;
    opacity: 0;
    transform-origin: 50% 0%;
    will-change: opacity, transform;
    backface-visibility: hidden;
}

.voltrn_scr11_curve_1 {
    clip-path: polygon(28% 0, 72% 0, 68% 10%, 63% 20%, 58% 29%, 53% 35%, 50% 37%, 47% 35%, 42% 29%, 37% 20%, 32% 10%);
    animation: voltrnScr11CurveReveal .72s cubic-bezier(.25, .70, .25, 1) .00s both;
}

.voltrn_scr11_curve_2 {
    clip-path: polygon(10% 0, 90% 0, 86% 18%, 79% 34%, 69% 48%, 59% 58%, 50% 62%, 41% 58%, 31% 48%, 21% 34%, 14% 18%);
    animation: voltrnScr11CurveReveal .74s cubic-bezier(.25, .70, .25, 1) .24s both;
}

.voltrn_scr11_curve_3 {
    clip-path: polygon(0 0, 100% 0, 100% 74%, 91% 85%, 78% 94%, 64% 100%, 36% 100%, 22% 94%, 9% 85%, 0 74%);
    animation: voltrnScr11CurveReveal .78s cubic-bezier(.25, .70, .25, 1) .48s both;
}

@keyframes voltrnScr11CurveReveal {
    0% {
        opacity: 0;
        transform: translate3d(0, -28px, 0) scale(.982);
    }

    45% {
        opacity: .42;
        transform: translate3d(0, -12px, 0) scale(.990);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* Keep feedback content above curves/blast background. */
.voltrn_scr11_panel,
.voltrn_scr11_btn {
    position: relative;
    z-index: 5;
}


/* Keep feedback NEXT buttons above curve/confetti layers. */
.voltrn_scr11_btn,
.voltrn_scr15_btn {
    z-index: 130 !important;
    position: absolute;
}

.voltrn_scr11_panel,
.voltrn_scr15_box {
    z-index: 20 !important;
}


/* =========================================================
   Excellent Choice — match Correct screen visual treatment
   ========================================================= */
.voltrn_scr15_bg {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: url("../images/voltrn_scrn2bg.png") center center / cover no-repeat !important;
    isolation: isolate;
}

.voltrn_scr15_box {
    box-sizing: border-box;
    border: 4px solid rgba(255, 122, 47, .96) !important;
    border-radius: 42px;
    background: rgba(255, 255, 255, .08);
    position: absolute;
    z-index: 20 !important;
}

/* Same curve reveal behavior as the Correct screen. */
.voltrn_scr15_curve {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: url("../images/voltrn_scrn2bg.png") center center / 100% 100% no-repeat;
    opacity: 0;
    transform-origin: 50% 0%;
    will-change: opacity, transform;
    backface-visibility: hidden;
}

.voltrn_scr15_curve_1 {
    clip-path: polygon(28% 0, 72% 0, 68% 10%, 63% 20%, 58% 29%, 53% 35%, 50% 37%, 47% 35%, 42% 29%, 37% 20%, 32% 10%);
    animation: voltrnScr15CurveReveal .72s cubic-bezier(.25, .70, .25, 1) .00s both;
}

.voltrn_scr15_curve_2 {
    clip-path: polygon(10% 0, 90% 0, 86% 18%, 79% 34%, 69% 48%, 59% 58%, 50% 62%, 41% 58%, 31% 48%, 21% 34%, 14% 18%);
    animation: voltrnScr15CurveReveal .74s cubic-bezier(.25, .70, .25, 1) .24s both;
}

.voltrn_scr15_curve_3 {
    clip-path: polygon(0 0, 100% 0, 100% 74%, 91% 85%, 78% 94%, 64% 100%, 36% 100%, 22% 94%, 9% 85%, 0 74%);
    animation: voltrnScr15CurveReveal .78s cubic-bezier(.25, .70, .25, 1) .48s both;
}

@keyframes voltrnScr15CurveReveal {
    0% {
        opacity: 0;
        transform: translate3d(0, -28px, 0) scale(.982);
    }

    45% {
        opacity: .42;
        transform: translate3d(0, -12px, 0) scale(.990);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* Keep Excellent Choice content and NEXT button above curves and blast. */
.voltrn_scr15_icon,
.voltrn_scr15_title,
.voltrn_scr15_text {
    position: relative;
    z-index: 21;
}

.voltrn_scr15_btn {
    z-index: 130 !important;
}


/* =========================================================
   Quiz selected state — keep EXACT same box width/height
   as the original white option. No scale-up or layout shift.
   ========================================================= */
.voltrn_scr10_tab.active,
.pain-card.active,
.voltrn_scr14_card.active {
    transform: none !important;
    animation: none !important;
    box-sizing: border-box;
}

/* Preserve the original white-box dimensions in the selected blue state. */
.voltrn_scr10_tab.active {
    width: 364px !important;
    height: 396px !important;
    padding: 38px !important;
    border: 0 !important;
    background: #000083 !important;
}

.voltrn_scr14_card.active {
    width: 330px !important;
    height: 380px !important;
    border: 0 !important;
    background: #000083 !important;
}

/* pain-card keeps its own original dimensions; active state only changes colour. */
.pain-card.active {
    width: inherit;
    height: inherit;
    background: #000083 !important;
}

.voltrn_scr10_tab.active h3,
.voltrn_scr10_tab.active p,
.pain-card.active h3,
.pain-card.active p,
.voltrn_scr14_card.active .voltrn_scr14_card_title {
    color: #fff !important;
}

/* =========================================================
   Good Choice — match Correct/Excellent visual treatment
   but intentionally NO blast.
   ========================================================= */
.voltrn_scr16_bg {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: url("../images/voltrn_scrn2bg.png") center center / cover no-repeat !important;
    isolation: isolate;
}

.voltrn_scr16_box {
    box-sizing: border-box;
    border: 4px solid rgba(255, 122, 47, .96) !important;
    border-radius: 42px;
    background: rgba(255, 255, 255, .08);
    position: absolute;
    z-index: 20 !important;
}

/* Same background curve reveal as Correct / Excellent Choice. */
.voltrn_scr16_curve {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: url("../images/voltrn_scrn2bg.png") center center / 100% 100% no-repeat;
    opacity: 0;
    transform-origin: 50% 0%;
    will-change: opacity, transform;
    backface-visibility: hidden;
}

.voltrn_scr16_curve_1 {
    clip-path: polygon(28% 0, 72% 0, 68% 10%, 63% 20%, 58% 29%, 53% 35%, 50% 37%, 47% 35%, 42% 29%, 37% 20%, 32% 10%);
    animation: voltrnScr16CurveReveal .72s cubic-bezier(.25, .70, .25, 1) .00s both;
}

.voltrn_scr16_curve_2 {
    clip-path: polygon(10% 0, 90% 0, 86% 18%, 79% 34%, 69% 48%, 59% 58%, 50% 62%, 41% 58%, 31% 48%, 21% 34%, 14% 18%);
    animation: voltrnScr16CurveReveal .74s cubic-bezier(.25, .70, .25, 1) .24s both;
}

.voltrn_scr16_curve_3 {
    clip-path: polygon(0 0, 100% 0, 100% 74%, 91% 85%, 78% 94%, 64% 100%, 36% 100%, 22% 94%, 9% 85%, 0 74%);
    animation: voltrnScr16CurveReveal .78s cubic-bezier(.25, .70, .25, 1) .48s both;
}

@keyframes voltrnScr16CurveReveal {
    0% {
        opacity: 0;
        transform: translate3d(0, -28px, 0) scale(.982);
    }

    45% {
        opacity: .42;
        transform: translate3d(0, -12px, 0) scale(.990);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

.voltrn_scr16_icon,
.voltrn_scr16_title,
.voltrn_scr16_text {
    position: relative;
    z-index: 21;
}

.voltrn_scr16_btn {
    z-index: 130 !important;
}


/* Screen 6 Card 4 final fade safety override */
.voltrn_scr6_reveal_runner.voltrn_scr6_fast_exit {
    opacity: 0 !important;
    transition: opacity .045s linear !important;
}


/* =========================================================
   PN7 -> PN8 only: slower, smoother zoom with no flicker.
   Clinical Assessment animation is intentionally untouched.
   ========================================================= */
.popup-img2.enter {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-origin: center center;
    will-change: transform, opacity;
}

.popup-img2.enter.pn8-start {
    opacity: 1 !important;
    transform: translate3d(-50%, -50%, 0) scale(.735);
    transition: none !important;
}

.popup-img2.enter.pn8-zoom {
    opacity: 1 !important;
    transform: translate3d(-50%, -50%, 0) scale(1.02);
    transition: transform 1.55s cubic-bezier(.20, .72, .22, 1) !important;
    opacity: .18s linear !important;
}


/* =========================================================
   Carousel text lock
   Keep increased font sizes, but prevent text from reflowing
   when a card changes from back width (460px) to active width (680px).
   ========================================================= */
.voltrn_scr21_card h3,
.voltrn_scr21_card p,
.voltrn_scr21_card ul {
    width: 604px !important;
    /* 680px active width - 76px left/right padding */
    max-width: 604px !important;
    min-width: 604px !important;
    box-sizing: border-box;
    transition: none !important;
    transform: none !important;
    will-change: auto !important;
}

/* Keep the text anchored to the same top/left position in every carousel state. */
.voltrn_scr21_card h3,
.voltrn_scr21_card p {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.voltrn_scr21_card ul {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* The back cards simply clip the same fixed text layout;
   when they become active the text does not re-wrap or shift. */
.voltrn_scr21_card {
    overflow: hidden;
}


/* Box 6 only: fade the carousel back boxes after reaching the final box. */
.voltrn_scr21_card.box6-back-fade {
    opacity: .18 !important;
}

/* =========================================================
   GLOBAL NAV BUTTON STATES - Screen 2 reference
   Applies to every NEXT, CHOOSE ANOTHER SCENARIO and RESTART
   CHALLENGE control. Default = transparent/red background with
   white text + white double arrow. Clicked = white background
   with blue text + blue double arrow.
   ========================================================= */
.voltrn_scr7_btn,
.voltrn_scr11_btn,
.voltrn_scr12_btn,
.voltrn_scr15_btn,
.voltrn_scr16_btn,
.voltrn_scr18_btn,
.voltrn_scr21_btn,
.voltrn_thankyou_btn {
    background: #ff4b0a !important;
    color: #ffffff !important;
    border: 5px solid #ffffff !important;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease !important;
}

/* Existing screen-specific active/scrolled classes must not make the
   navigation button white before the user actually clicks it. */
.voltrn_scr7_btn.active,
.voltrn_scr18_btn.active,
.voltrn_scr21_btn.scrolled {
    background: #ff4b0a !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.voltrn_scr7_btn .voltrn_scr1_arrow,
.voltrn_scr7_btn .voltrn_scr2_arrow,
.voltrn_scr11_btn .voltrn_scr1_arrow,
.voltrn_scr11_btn .voltrn_scr2_arrow,
.voltrn_scr12_btn .voltrn_scr1_arrow,
.voltrn_scr12_btn .voltrn_scr2_arrow,
.voltrn_scr15_btn .voltrn_scr1_arrow,
.voltrn_scr15_btn .voltrn_scr2_arrow,
.voltrn_scr16_btn .voltrn_scr1_arrow,
.voltrn_scr16_btn .voltrn_scr2_arrow,
.voltrn_scr18_btn .voltrn_scr1_arrow,
.voltrn_scr18_btn .voltrn_scr2_arrow,
.voltrn_scr21_btn .voltrn_scr1_arrow,
.voltrn_scr21_btn .voltrn_scr2_arrow,
.voltrn_thankyou_btn .voltrn_scr1_arrow,
.voltrn_thankyou_btn .voltrn_scr2_arrow {
    display: block !important;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    background-image: url("../images/voltrn_scrn2arrows.png") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    filter: none !important;
}

.voltrn_nav_clicked {
    background: #ffffff !important;
    color: #002f86 !important;
    border-color: #ffffff !important;
}

.voltrn_nav_clicked .voltrn_scr1_arrow,
.voltrn_nav_clicked .voltrn_scr2_arrow {
    background-image: url("../images/voltrn_scrn1arrows.png") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    filter: none !important;
}


/* =========================================================
   ALL NAVIGATION BUTTONS - match Screen 2 START CHALLENGE
   Default: orange background, white text, white arrows.
   Clicked: white background, blue text, blue arrows.
   ========================================================= */
.voltrn_scr1_cta,
.voltrn_scr2_btn,
.voltrn_scr7_btn,
.voltrn_scr11_btn,
.voltrn_scr12_btn,
.voltrn_scr15_btn,
.voltrn_scr16_btn,
.voltrn_scr18_btn,
.voltrn_scr21_btn,
.voltrn_thankyou_btn {
    background: #ff0b00 !important;
    color: #ffffff !important;
    border: 5px solid #ffffff !important;
    border-radius: 20px !important;
    min-height: 90px;
    font-size: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease !important;
}

.voltrn_thankyou_btn {
    position: absolute;
    right: 36%;
    bottom: 16%;
    /* color: #100078 !important; */
}

/* Keep default orange even where older screen-specific active/scrolled classes exist. */
.voltrn_scr7_btn.active,
.voltrn_scr18_btn.active,
.voltrn_scr21_btn.scrolled {
    background: #ff4b0a !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.voltrn_scr1_cta .voltrn_scr1_arrow,
.voltrn_scr1_cta .voltrn_scr2_arrow,
.voltrn_scr2_btn .voltrn_scr1_arrow,
.voltrn_scr2_btn .voltrn_scr2_arrow,
.voltrn_scr7_btn .voltrn_scr1_arrow,
.voltrn_scr7_btn .voltrn_scr2_arrow,
.voltrn_scr11_btn .voltrn_scr1_arrow,
.voltrn_scr11_btn .voltrn_scr2_arrow,
.voltrn_scr12_btn .voltrn_scr1_arrow,
.voltrn_scr12_btn .voltrn_scr2_arrow,
.voltrn_scr15_btn .voltrn_scr1_arrow,
.voltrn_scr15_btn .voltrn_scr2_arrow,
.voltrn_scr16_btn .voltrn_scr1_arrow,
.voltrn_scr16_btn .voltrn_scr2_arrow,
.voltrn_scr18_btn .voltrn_scr1_arrow,
.voltrn_scr18_btn .voltrn_scr2_arrow,
.voltrn_scr21_btn .voltrn_scr1_arrow,
.voltrn_scr21_btn .voltrn_scr2_arrow,
.voltrn_thankyou_btn .voltrn_scr1_arrow,
.voltrn_thankyou_btn .voltrn_scr2_arrow {
    display: block !important;
    flex: 0 0 30px;
    width: 30px !important;
    height: 30px !important;
    background-image: url("../images/voltrn_scrn2arrows.png") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    filter: none !important;
}

/* Screen 2 already uses is-started; every other nav button uses voltrn_nav_clicked. */
.voltrn_scr2_btn.is-started,
.voltrn_nav_clicked {
    background: #ffffff !important;
    color: #002f86 !important;
    border-color: #ffffff !important;
}

.voltrn_scr2_btn.is-started .voltrn_scr1_arrow,
.voltrn_scr2_btn.is-started .voltrn_scr2_arrow,
.voltrn_nav_clicked .voltrn_scr1_arrow,
.voltrn_nav_clicked .voltrn_scr2_arrow {
    background-image: url("../images/voltrn_scrn1arrows.png") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    filter: none !important;
}

/* =========================================================
   CLINICAL ASSESSMENT NEXT - Screen 2 button reference
   Default/scroll-active state: orange + white text + white arrows.
   Actual click state: white + blue text + blue arrows.
   ========================================================= */
.voltrn_scr7_btn,
.voltrn_scr7_btn.active {
    background: #ff0b00 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.voltrn_scr7_btn .voltrn_scr2_arrow,
.voltrn_scr7_btn.active .voltrn_scr2_arrow {
    background-image: url("../images/voltrn_scrn2arrows.png") !important;
    filter: none !important;
}

.voltrn_scr7_btn.voltrn_nav_clicked,
.voltrn_scr7_btn.active.voltrn_nav_clicked {
    background: #ffffff !important;
    color: #002f86 !important;
    border-color: #ffffff !important;
}

.voltrn_scr7_btn.voltrn_nav_clicked .voltrn_scr2_arrow,
.voltrn_scr7_btn.active.voltrn_nav_clicked .voltrn_scr2_arrow {
    background-image: url("../images/voltrn_scrn1arrows.png") !important;
    filter: none !important;
}

/* PRODUCT SCREEN (PN18) NEXT ONLY - requested button behavior.
   Initial: orange + white text/arrow. Click: white + blue text/arrow.
   This override intentionally targets only .voltrn_scr18_btn. */
.voltrn_scr18_btn,
.voltrn_scr18_btn.active {
    background: #ff0b00 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

.voltrn_scr18_btn .voltrn_scr2_arrow,
.voltrn_scr18_btn.active .voltrn_scr2_arrow {
    background-image: url("../images/voltrn_scrn2arrows.png") !important;
    filter: none !important;
}

.voltrn_scr18_btn.voltrn_nav_clicked,
.voltrn_scr18_btn.active.voltrn_nav_clicked {
    background: #ffffff !important;
    color: #002f86 !important;
    border-color: #ffffff !important;
}

.voltrn_scr18_btn.voltrn_nav_clicked .voltrn_scr2_arrow,
.voltrn_scr18_btn.active.voltrn_nav_clicked .voltrn_scr2_arrow {
    background-image: url("../images/voltrn_scrn1arrows.png") !important;
    filter: none !important;
}

/* Carousel back cards: smaller text so content stays visible without cropping.
   The active/main card keeps the existing approved font sizes. */
.voltrn_scr21_card:not(.active) h3 {
    font-size: 30px !important;
    line-height: 32px !important;
    margin-bottom: 12px !important;
}

.voltrn_scr21_card:not(.active) p,
.voltrn_scr21_card:not(.active) ul {
    font-size: 25px !important;
    line-height: 29px !important;
}

/* Carousel back cards: allow text to reflow inside the narrower back-card width.
   This overrides the fixed 604px active-card text lock only for non-active cards,
   preventing the right side of the text from being clipped. */
.voltrn_scr21_card:not(.active) {
    padding: 28px 30px !important;
}

.voltrn_scr21_card:not(.active) h3,
.voltrn_scr21_card:not(.active) p,
.voltrn_scr21_card:not(.active) ul {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

.voltrn_scr21_card:not(.active) h3 {
    font-size: 27px !important;
    line-height: 29px !important;
    margin-bottom: 9px !important;
}

.voltrn_scr21_card:not(.active) p,
.voltrn_scr21_card:not(.active) ul {
    font-size: 22px !important;
    line-height: 25px !important;
}

.voltrn_scr21_card:not(.active) ul {
    padding-left: 20px !important;
}

/* Carousel navigation arrows: use the slim blue chevron icon style from the Voltaren product slide. */
.voltrn_scr21_carousel_arrow::before {
    content: "" !important;
    width: 35px !important;
    height: 35px !important;
    border: 0 !important;
    border-top: 7px solid #000083 !important;
    border-right: 7px solid #000083 !important;
    box-sizing: border-box;
}

.voltrn_scr21_carousel_arrow.next::before {
    transform: rotate(45deg);
}

.voltrn_scr21_carousel_arrow.previous::before {
    transform: rotate(-135deg);
}


.voltrn_scr21_btn.voltrn_final_next {
    width: 250px !important;
    padding-left: 0px;
}

.voltrn_scr21_btn.voltrn_final_next::after {
    content: "";
    width: 30px !important;
    height: 30px !important;
    background-image: url(../images/voltrn_scrn2arrows.png) !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    position: absolute;
    right: 42px;
    top: 34px;
}