/* =====================================================================
   CD&C  |  Before & After - multiple pairs
   File: addition/css/cdc-before-after.css

   Everything is scoped to #cdc-ba, so none of it can reach the header,
   the footer, or any other comparison on the site.
   ===================================================================== */

#cdc-ba {
    --ba-green: #8b8f6b;
    --ba-dark: #211c18;

    position: relative;
}

/* ---------------------------------------------------------------------
   The stack. Only one pair shows at a time; the others stay in the page
   but out of sight. They are NOT display:none - the comparison plugin
   has to be able to measure a real width when its turn comes.
   --------------------------------------------------------------------- */
#cdc-ba .cdc-ba-stage {
    position: relative;
    width: 100%;
}

#cdc-ba .cdc-ba-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .45s ease;
}

/* the visible one takes part in the layout, so it sets the height */
#cdc-ba .cdc-ba-slide.on {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

#cdc-ba .cdc-ba-compare {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

#cdc-ba .cdc-ba-compare img {
    display: block;
    width: 100%;
    height: auto;
}


/* ---------------------------------------------------------------------
   ARROWS  -  one each side, vertically centred
   --------------------------------------------------------------------- */
#cdc-ba .cdc-ba-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;

    width: 54px;
    height: 54px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
    cursor: pointer;
    transition: background .28s ease, transform .28s ease, box-shadow .28s ease;
}

#cdc-ba .cdc-ba-nav svg {
    width: 26px;
    height: 26px;
    fill: var(--ba-dark);
    transition: fill .28s ease;
}

#cdc-ba .cdc-ba-nav:hover {
    background: var(--ba-green);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .24);
}

#cdc-ba .cdc-ba-nav:hover svg { fill: #ffffff; }

#cdc-ba .cdc-ba-nav:active { transform: translateY(-50%) scale(.94); }

#cdc-ba .cdc-ba-nav:focus-visible {
    outline: 3px solid var(--ba-green);
    outline-offset: 3px;
}

/* Sat just outside the photo on a wide screen, so they never cover the
   picture or collide with the drag handle in the middle. */
#cdc-ba .cdc-ba-prev { left: -27px; }
#cdc-ba .cdc-ba-next { right: -27px; }


/* ---------------------------------------------------------------------
   DOTS
   --------------------------------------------------------------------- */
#cdc-ba .cdc-ba-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 26px;
}

#cdc-ba .cdc-ba-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(33, 28, 24, .22);
    cursor: pointer;
    transition: background .25s ease, width .25s ease;
}

#cdc-ba .cdc-ba-dot:hover { background: rgba(33, 28, 24, .42); }

#cdc-ba .cdc-ba-dot.on {
    background: var(--ba-green);
    width: 30px;
    border-radius: 100px;
}


/* =====================================================================
   RESPONSIVE
   ===================================================================== */

/* No room outside the photo any more - bring the arrows inside. */
@media only screen and (max-width: 1400px) {
    #cdc-ba .cdc-ba-prev { left: 16px; }
    #cdc-ba .cdc-ba-next { right: 16px; }

    #cdc-ba .cdc-ba-nav {
        background: rgba(255, 255, 255, .92);
    }
}

@media only screen and (max-width: 991px) {
    #cdc-ba .cdc-ba-nav { width: 46px; height: 46px; }
    #cdc-ba .cdc-ba-nav svg { width: 22px; height: 22px; }
    #cdc-ba .cdc-ba-prev { left: 12px; }
    #cdc-ba .cdc-ba-next { right: 12px; }
}

@media only screen and (max-width: 767px) {

    /* On a phone the drag handle lives in the middle of the photo and
       the arrows would be right on top of where a thumb swipes. Move
       them below the picture, either side of the dots. */
    #cdc-ba .cdc-ba-nav {
        /* relative, not static - the NEXT label is positioned against
           this button, and a static element is not a positioning
           context. It still sits in the flex row exactly as before. */
        position: relative;
        transform: none;
        width: 42px;
        height: 42px;
        background: #ffffff;
        box-shadow: 0 3px 12px rgba(0, 0, 0, .14);
    }

    #cdc-ba .cdc-ba-nav:active { transform: scale(.94); }

    #cdc-ba .cdc-ba-dots {
        margin-top: 20px;
        gap: 14px;
    }

    /* arrow, dots, arrow - all on one row under the photo */
    #cdc-ba {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    #cdc-ba .cdc-ba-stage { flex: 0 0 100%; order: 1; }
    #cdc-ba .cdc-ba-prev  { order: 2; margin: 20px 4px 0 0; }
    #cdc-ba .cdc-ba-dots  { order: 3; margin-top: 20px; }
    #cdc-ba .cdc-ba-next  { order: 4; margin: 20px 0 0 4px; }

    #cdc-ba .cdc-ba-dot.on { width: 26px; }
}


/* =====================================================================
   GUIDED DEMO
   =====================================================================
   The first time the section scrolls into view, the divider sweeps
   across by itself and these hints appear, so a first-time visitor
   understands the photo is draggable and that there are more pairs.

   Nothing here uses transform on the arrows - on phones they sit in a
   flex row with no transform, and on desktop they carry
   translateY(-50%). A pulsing transform would break one of the two,
   so the pulse is done entirely with box-shadow.
   ===================================================================== */

/* ---- the ring pulse on the arrows ---- */
#cdc-ba .cdc-ba-nav.cdc-ba-hint {
    animation: cdcBaRing 1.5s ease-out 3;
}

@keyframes cdcBaRing {
    0%   { box-shadow: 0 6px 22px rgba(0, 0, 0, .18), 0 0 0 0   rgba(139, 143, 107, .6); }
    70%  { box-shadow: 0 6px 22px rgba(0, 0, 0, .18), 0 0 0 15px rgba(139, 143, 107, 0); }
    100% { box-shadow: 0 6px 22px rgba(0, 0, 0, .18), 0 0 0 0   rgba(139, 143, 107, 0); }
}

/* ---- the dots pulse too, so people see there is more than one ---- */
#cdc-ba .cdc-ba-dot.cdc-ba-hint {
    animation: cdcBaDot 1.5s ease-out 3;
}

@keyframes cdcBaDot {
    0%   { box-shadow: 0 0 0 0   rgba(139, 143, 107, .55); }
    70%  { box-shadow: 0 0 0 9px rgba(139, 143, 107, 0); }
    100% { box-shadow: 0 0 0 0   rgba(139, 143, 107, 0); }
}

/* ---- "Drag to compare" pill ---- */
#cdc-ba .cdc-ba-hintlabel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(.94);
    z-index: 8;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 11px 20px;
    border-radius: 100px;
    background: rgba(12, 14, 12, .72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: .2px;

    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease, transform .45s ease;
}

#cdc-ba .cdc-ba-hintlabel svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#cdc-ba.cdc-ba-hint-on .cdc-ba-hintlabel {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* while the demo is running the image must not react to hover */
#cdc-ba.cdc-ba-demoing .cdc-ba-compare {
    pointer-events: none;
}

@media only screen and (max-width: 767px) {
    #cdc-ba .cdc-ba-hintlabel {
        font-size: 13px;
        padding: 9px 16px;
        /* the stage is the picture; centre on that, not the whole block */
        top: 42%;
    }
}

/* Someone who has asked their device for less motion gets none of this
   - the JS also skips the sweep entirely for them. */
@media (prefers-reduced-motion: reduce) {
    #cdc-ba .cdc-ba-nav.cdc-ba-hint,
    #cdc-ba .cdc-ba-dot.cdc-ba-hint { animation: none !important; }

    #cdc-ba .cdc-ba-hintlabel { transition: none !important; }
}


/* =====================================================================
   SLIDING SWITCH BETWEEN PAIRS
   =====================================================================
   Press Next and the old comparison leaves to the left while the new
   one arrives from the right. Prev is the mirror.

   While the two are travelling they are BOTH absolute, so they overlap
   rather than stack. That takes their height out of the flow, which is
   why the stage carries an explicit height during the swap - and why it
   is given a transition, so the section grows or shrinks smoothly
   instead of the rest of the page jumping.

   SWAP_MS in the JS must match the .62s below.
   ===================================================================== */

#cdc-ba .cdc-ba-stage {
    transition: height .62s cubic-bezier(.45, .05, .25, 1);
}

#cdc-ba .cdc-ba-stage.swapping {
    overflow: hidden;
}

/* during the swap neither pair is allowed to affect layout */
#cdc-ba .cdc-ba-stage.swapping .cdc-ba-slide.on {
    position: absolute;
    top: 0;
    left: 0;
}

/* only the two taking part get a transition - everything else stays put */
#cdc-ba .cdc-ba-slide.anim {
    transition: transform .62s cubic-bezier(.45, .05, .25, 1),
                opacity   .62s ease;
    will-change: transform, opacity;
}

/* where the incoming pair starts */
#cdc-ba .cdc-ba-slide.from-right { transform: translateX(100%);  opacity: 0; }
#cdc-ba .cdc-ba-slide.from-left  { transform: translateX(-100%); opacity: 0; }

/* where the outgoing pair goes */
#cdc-ba .cdc-ba-slide.to-left    { transform: translateX(-100%); opacity: 0; }
#cdc-ba .cdc-ba-slide.to-right   { transform: translateX(100%);  opacity: 0; }

/* and where the incoming one lands */
#cdc-ba .cdc-ba-slide.center     { transform: translateX(0);     opacity: 1; }

/* Reduced motion: swap instantly, no travel. The JS still runs the same
   sequence, it just has nothing to animate. */
@media (prefers-reduced-motion: reduce) {
    #cdc-ba .cdc-ba-stage,
    #cdc-ba .cdc-ba-slide.anim { transition: none !important; }
}


/* =====================================================================
   BEAT 2 - THE NEXT BUTTON POPS
   =====================================================================
   Fires once the sweep has finished and the photo has settled, never at
   the same time as it. Two hints at once compete for the eye and the
   visitor reads neither; one after the other tells a story - drag this,
   then go and see the next one.

   The arrows carry different transforms per breakpoint: translateY(-50%)
   on desktop, none on mobile where they sit in a flex row. A single
   scale keyframe would wipe out the desktop centring, so there are two
   keyframe sets and the media query swaps which one is used.
   ===================================================================== */

#cdc-ba .cdc-ba-nav.cdc-ba-pop {
    animation: cdcBaPop 1.1s cubic-bezier(.34, 1.4, .64, 1) 3;
    z-index: 7;
}

#cdc-ba .cdc-ba-nav.cdc-ba-pop svg {
    animation: cdcBaPopIcon 1.1s ease-out 3;
}

/* desktop - keeps the vertical centring in every frame */
@keyframes cdcBaPop {
    0% {
        transform: translateY(-50%) scale(1);
        background: #ffffff;
        box-shadow: 0 6px 22px rgba(0, 0, 0, .18), 0 0 0 0 rgba(139, 143, 107, .5);
    }
    35% {
        transform: translateY(-50%) scale(1.16);
        background: #8b8f6b;
        box-shadow: 0 10px 26px rgba(0, 0, 0, .22), 0 0 0 10px rgba(139, 143, 107, .22);
    }
    70% {
        transform: translateY(-50%) scale(1);
        background: #ffffff;
        box-shadow: 0 6px 22px rgba(0, 0, 0, .18), 0 0 0 20px rgba(139, 143, 107, 0);
    }
    100% {
        transform: translateY(-50%) scale(1);
        background: #ffffff;
        box-shadow: 0 6px 22px rgba(0, 0, 0, .18), 0 0 0 0 rgba(139, 143, 107, 0);
    }
}

/* the chevron turns white while the button is green */
@keyframes cdcBaPopIcon {
    0%   { fill: #211c18; }
    35%  { fill: #ffffff; }
    70%  { fill: #211c18; }
    100% { fill: #211c18; }
}

/* phones - same pop, but no translateY to preserve */
@media only screen and (max-width: 767px) {

    #cdc-ba .cdc-ba-nav.cdc-ba-pop {
        animation-name: cdcBaPopPhone;
    }

    @keyframes cdcBaPopPhone {
        0% {
            transform: scale(1);
            background: #ffffff;
            box-shadow: 0 3px 12px rgba(0, 0, 0, .14), 0 0 0 0 rgba(139, 143, 107, .5);
        }
        35% {
            transform: scale(1.16);
            background: #8b8f6b;
            box-shadow: 0 6px 16px rgba(0, 0, 0, .18), 0 0 0 9px rgba(139, 143, 107, .22);
        }
        70% {
            transform: scale(1);
            background: #ffffff;
            box-shadow: 0 3px 12px rgba(0, 0, 0, .14), 0 0 0 16px rgba(139, 143, 107, 0);
        }
        100% {
            transform: scale(1);
            background: #ffffff;
            box-shadow: 0 3px 12px rgba(0, 0, 0, .14), 0 0 0 0 rgba(139, 143, 107, 0);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    #cdc-ba .cdc-ba-nav.cdc-ba-pop,
    #cdc-ba .cdc-ba-nav.cdc-ba-pop svg { animation: none !important; }
}


/* =====================================================================
   THE "NEXT" LABEL
   =====================================================================
   Appears beside the Next button while it pops, so the guide finishes
   with a word rather than just a shape.

   It sits inside the button, which means it inherits the button's
   scale(1.16). Text that grows and shrinks three times looks like a
   fault, so the label runs a counter-animation at exactly 1/1.16 =
   0.8621 - the two cancel out and the label holds still while the
   button pops around it.
   ===================================================================== */

#cdc-ba .cdc-ba-tip {
    position: absolute;
    top: 50%;
    right: calc(100% + 12px);
    transform: translateY(-50%);

    padding: 7px 15px;
    border-radius: 100px;
    background: #211c18;
    color: #ffffff;

    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;

    opacity: 0;
    pointer-events: none;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .22);
    transition: opacity .3s ease;
}

/* little arrow pointing at the button */
#cdc-ba .cdc-ba-tip::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: 0;
    height: 0;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: #211c18;
}

#cdc-ba .cdc-ba-nav.cdc-ba-pop .cdc-ba-tip {
    opacity: 1;
    animation: cdcBaTipHold 1.1s cubic-bezier(.34, 1.4, .64, 1) 3;
}

/* the exact inverse of the button's scale, so the text stays still */
@keyframes cdcBaTipHold {
    0%   { transform: translateY(-50%) scale(1); }
    35%  { transform: translateY(-50%) scale(.8621); }
    70%  { transform: translateY(-50%) scale(1); }
    100% { transform: translateY(-50%) scale(1); }
}

/* -----------------------------------------------------------------
   Phones: the arrows sit in a row under the photo, so a label to the
   left would land on the dots. It goes above the button instead.
   ----------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

    #cdc-ba .cdc-ba-tip {
        top: auto;
        right: auto;
        left: 50%;
        bottom: calc(100% + 10px);
        transform: translateX(-50%);
        font-size: 11.5px;
        padding: 6px 13px;
    }

    #cdc-ba .cdc-ba-tip::after {
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-top-color: #211c18;
        border-left-color: transparent;
    }

    #cdc-ba .cdc-ba-nav.cdc-ba-pop .cdc-ba-tip {
        animation-name: cdcBaTipHoldPhone;
    }

    @keyframes cdcBaTipHoldPhone {
        0%   { transform: translateX(-50%) scale(1); }
        35%  { transform: translateX(-50%) scale(.8621); }
        70%  { transform: translateX(-50%) scale(1); }
        100% { transform: translateX(-50%) scale(1); }
    }
}

@media (prefers-reduced-motion: reduce) {
    #cdc-ba .cdc-ba-nav.cdc-ba-pop .cdc-ba-tip { animation: none !important; }
}