/* ==========================================================================
   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_Colour_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: scale(0.8);
   }

   50% {
      transform: scale(1.1);
   }

   100% {
      transform: 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 0.72s cubic-bezier(.16,1,.3,1) 0.96s forwards;
   pointer-events: none;
   will-change: transform, opacity;
}

@keyframes voltrnWomanRise {
   0% { opacity: 0; transform: translateY(145px); }
   100% { opacity: 1; transform: translateY(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 1.74s forwards;
}

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

.voltrn_scr1_title-second {
   margin-top: 12px;
   font-size: 132px;
   letter-spacing: -4px;
     opacity: 0;
   animation: fadeIn 0.45s ease-out 1.74s 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 1.52s 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 1.90s 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 1.98s 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:.42;}
    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 .55s ease-out .88s 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;
    opacity:0;
    transform:scale(.82);
    animation:voltrnStepPop .38s cubic-bezier(.2,.8,.25,1) forwards;
}

/* 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;}

@keyframes voltrnStepPop{
    0%{opacity:0;transform:scale(.82);}
    68%{opacity:1;transform:scale(1.045);}
    100%{opacity:1;transform:scale(1);}
}

.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';
}

.label{
    margin-top:52px;
    color:#fff;
    font-size:35px;
    line-height:42px;
}

.top{
    margin-top:-130px;
    margin-bottom:40px;
    width:350px;
}

.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:610px;

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: 19px 10px 10px 29px;
    color: #fff;
    font-size: 23px;
    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 .42s ease-out,
        transform .55s 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:0;
    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:1;
    /* Match the PN5 left-side starting position first (global x≈150, y≈210). */
    transform:translate3d(65px,-54px,0) scale(.94);
    transform-origin:center center;
    will-change:transform, opacity;
    backface-visibility:hidden;
    transition:
        transform .60s cubic-bezier(.20,.72,.18,1),
        opacity .24s ease;
}

.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.06);
    opacity:0;
    transition:
        transform 1.05s cubic-bezier(.18,.72,.18,1),
        opacity .72s ease;
}

.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:default;
    pointer-events:none;
}

/* 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_step2.png");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    transition:
        opacity .72s ease,
        transform 1.32s cubic-bezier(.16,.72,.18,1);

}
.popup-img1{

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

}

.popup-img2{

    background-image:url("../images/case1_step2.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-img2.enter{
    transform:translate3d(-50%,-50%,0) scale(.76);
}

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

.popup-img2.enter.pn8-zoom{
    opacity:1;
    transform:translate3d(-50%,-50%,0) scale(1.16);
}
.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: 173px;
    bottom: 0;
    width: 550px;
    height: 822px;
    background:url("../images/man.png");
     background-size: 100% 100%;
   background-repeat: no-repeat;
    /* z-index:1; */
    pointer-events:none;
     animation: zoom-effect 1s ease-in-out 1;
}

.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: 276px;
    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:130px;
    width:600px;
    height:936px;
    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:105px;
    width:760px;
    height:940px;
    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:500px;
    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:18px;
    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_crctimg_bg.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:260px;
    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: 231px;

width:1300px;

height:650px;

/* 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:178px;

    width:1300px;
    height:720px;

    /* 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/voltrn_pack_img.png") 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:245px; }
.voltrn_scr21_carousel_arrow.next{ right:245px; }

.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 #fff;
}

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

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

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

.voltrn_scr21_card{
    position:absolute;
    left:0;
    top:20px;
    width:460px;
    height:390px;
    background:#fff;
    border-radius:28px;
    padding:22px;
    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),
        opacity .5s ease,
        box-shadow .5s ease;
    will-change:transform;
    backface-visibility:hidden;
}

.voltrn_scr21_card.active{
    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: 30px;
    line-height: 37px;
    margin-bottom:18px;
}

.voltrn_scr21_card p{
    font-size: 30px;
    line-height: 37px;
}

.voltrn_scr21_card ul{
    padding-left:24px;
    font-size: 30px;
    line-height: 37px;
}

.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;left:44px;bottom:43px;width:82px;height:82px;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;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:34px;top:22px;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:765px;
    top:405px;
    z-index:3;
}

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

.voltrn_thankyou_text{
    margin-top:20px;
    font-size:55px;
    line-height:1.15;
    opacity: 0;
    animation: fadeIn 0.5s ease-in 0.5s forwards;
}

.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.5s 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;
}
.process_line{
    transform-origin:left center;
    animation:voltrnProcessLine .48s cubic-bezier(.25,.70,.25,1) 1.46s forwards;
}

.process_step{
    opacity:0;
    transform:scale(.76);
    animation:voltrnStepReveal .42s cubic-bezier(.18,.82,.28,1) forwards;
}
.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;}

@keyframes voltrnStepReveal{
    0%{opacity:0;transform:scale(.76);}
    58%{opacity:1;transform:scale(1.055);}
    82%{opacity:1;transform:scale(.985);}
    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;
}
.process_line{
    transform-origin:left center;
    animation:voltrnProcessLine .50s cubic-bezier(.25,.70,.25,1) 2.16s forwards;
}

.process_step{
    opacity:0;
    transform:scale(.76);
    animation:voltrnStepReveal .44s cubic-bezier(.18,.82,.28,1) forwards;
}
.voltrn_scr2_process .process_step:nth-child(2){animation-delay:2.42s;}
.voltrn_scr2_process .process_step:nth-child(3){animation-delay:2.62s;}
.voltrn_scr2_process .process_step:nth-child(4){animation-delay:2.82s;}
.voltrn_scr2_process .process_step:nth-child(5){animation-delay:3.02s;}
.voltrn_scr2_process .process_step:nth-child(6){animation-delay:3.22s;}

.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 1.00s forwards !important;
}
.process_line{
    transform-origin:left center;
    animation:voltrnProcessLine .50s cubic-bezier(.25,.70,.25,1) 1.14s forwards !important;
}
.process_step{
    opacity:0;
    transform:scale(.76);
    animation:voltrnStepReveal .44s cubic-bezier(.18,.82,.28,1) forwards !important;
}
.voltrn_scr2_process .process_step:nth-child(2){animation-delay:1.40s !important;}
.voltrn_scr2_process .process_step:nth-child(3){animation-delay:1.60s !important;}
.voltrn_scr2_process .process_step:nth-child(4){animation-delay:1.80s !important;}
.voltrn_scr2_process .process_step:nth-child(5){animation-delay:2.00s !important;}
.voltrn_scr2_process .process_step:nth-child(6){animation-delay:2.20s !important;}
.voltrn_scr2_duration,
.voltrn_scr2_btn{
    animation:fadeIn .40s ease-out 2.55s 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: 640px;
   bottom: 61px;
   width: 73px;
   height: 73px;
   background: url(../images/Split_icon_yellow.png) no-repeat;
   background-size: 100% 100%;
   z-index: 9 !important;
}

/* =========================================================
   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{
    filter:none;
}