/* 
 * Styles for Control Shift Addon
 */

.control-shift-sample-widget {
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    text-align: center;
}

.cs-sample-title {
    margin: 0;
    font-family: inherit;
}

/* ==========================================================================
   How Cycle Widget Styles
   ========================================================================== */

.how-cycle{width:100%;max-width:1280px;margin:0 auto;position:relative}
.hc-stage{display:flex;align-items:center;justify-content:center;gap:clamp(24px,4vw,56px);min-height:160px}
.hc-side{flex:1 1 0;min-width:0;max-width:520px}
.hc-side-from{text-align:right}
.hc-side-to{text-align:left}
.hc-label{font-family:'Outfit',sans-serif;font-size:13px;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:18px;display:block}
.hc-row{position:relative;display:block;overflow:hidden;padding:6px 2px}
.hc-word{font-family:'Outfit',sans-serif;font-weight:300;letter-spacing:-0.035em;line-height:1.05;color:var(--white);font-size:clamp(1.6rem,4.4vw,3.6rem);will-change:transform,opacity;text-wrap:balance;display:block}
.hc-word.is-to{font-weight:700;letter-spacing:-0.04em}
.hc-word.exit{animation:hcExitL 0.5s cubic-bezier(.6,.05,.3,1) forwards}
.hc-word.enter{animation:hcEnterR 0.65s cubic-bezier(.2,.6,.2,1) forwards}
.hc-word.is-to.enter{animation-delay:0.1s;opacity:0}
.hc-word.is-to.exit{animation-delay:0.05s}
@keyframes hcExitL{
  0%{transform:translateX(0);opacity:1;filter:blur(0)}
  100%{transform:translateX(-60px);opacity:0;filter:blur(4px)}
}
@keyframes hcEnterR{
  0%{transform:translateX(60px);opacity:0;filter:blur(6px)}
  60%{filter:blur(0)}
  100%{transform:translateX(0);opacity:1;filter:blur(0)}
}

/* Arrow between FROM and TO */
.hc-mid{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:clamp(48px,7vw,96px);height:48px;position:relative;color:rgba(255,255,255,0.85);margin-top:32px}
.hc-arrow{width:100%;height:32px;display:flex;align-items:center;justify-content:center}
.hc-arrow svg{width:100%;height:100%;display:block}
.hc-mid.pulse .hc-arrow{animation:hcArrow 0.7s cubic-bezier(.4,0,.2,1)}
@keyframes hcArrow{
  0%{transform:translateX(-14px) scale(0.9);opacity:0.4}
  40%{transform:translateX(8px) scale(1.08);opacity:1}
  100%{transform:translateX(0) scale(1);opacity:0.85}
}
.hc-arrow-trail{position:absolute;left:50%;top:50%;width:120px;height:1px;background:linear-gradient(to right,transparent,rgba(255,255,255,0.45),transparent);transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.hc-mid.pulse .hc-arrow-trail{animation:hcTrail 0.7s ease-out}
@keyframes hcTrail{
  0%{opacity:0;transform:translate(-90%,-50%) scaleX(0.3)}
  50%{opacity:1}
  100%{opacity:0;transform:translate(-10%,-50%) scaleX(1.2)}
}

/* Progress */
.hc-progress{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:48px}
.hc-bar{flex:0 0 auto;width:64px;height:3px;background:rgba(255,255,255,0.22);border:none;padding:0;cursor:pointer;position:relative;overflow:hidden;border-radius:3px;transition:background 0.25s}
.hc-bar:hover{background:rgba(255,255,255,0.4)}
.hc-bar::after{content:'';position:absolute;inset:0;background:var(--white, #fff);transform:scaleX(0);transform-origin:left center;border-radius:3px}
.hc-bar.done::after{transform:scaleX(1)}
.hc-bar.active::after{animation:hcBar var(--hc-dur,4500ms) linear forwards}
@keyframes hcBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Pause control */
.hc-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;color:rgba(255,255,255,0.6);font-family:'Outfit',sans-serif;font-size:12px;letter-spacing:0.16em;text-transform:uppercase}
.hc-pause{background: transparent;border:1px solid rgba(255,255,255,0.3);color:rgba(255,255,255,0.85);width:34px;height:34px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all 0.2s;padding: 0px;}
.hc-pause:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.6)}
.hc-pause svg{width:12px;height:12px}
.hc-counter{font-variant-numeric:tabular-nums;color:rgba(255,255,255,0.75)}
.hc-pause:focus{outline:none; background: transparent;}
.hc-bar:focus {
  outline:none; background: rgba(255,255,255,0.22);
}

@media(max-width:768px){
  .hc-stage{flex-direction:column;gap:8px;min-height:auto}
  .hc-side{text-align:center!important;max-width:100%}
  .hc-side .hc-label{margin-bottom:8px}
  .hc-word{font-size:clamp(1.5rem,7vw,2.2rem)}
  .hc-mid{margin-top:8px;width:48px;height:36px;transform:rotate(90deg)}
  .hc-word.exit{animation:hcExitV 0.5s cubic-bezier(.6,.05,.3,1) forwards}
  .hc-word.enter{animation:hcEnterV 0.65s cubic-bezier(.2,.6,.2,1) forwards}
  .hc-bar{width:40px}
}
@keyframes hcExitV{0%{transform:translateY(0);opacity:1;filter:blur(0)}100%{transform:translateY(-32px);opacity:0;filter:blur(4px)}}
@keyframes hcEnterV{0%{transform:translateY(40px);opacity:0;filter:blur(6px)}60%{filter:blur(0)}100%{transform:translateY(0);opacity:1;filter:blur(0)}}


/* ==========================================================================
   Flip Card Widget Styles
   ========================================================================== */

.ctd-flip-grid {
    display: grid;
    gap: 16px;
    --ctd-flip-grid-gap: 16px;
    align-items: stretch;
}
.ctd-flip-grid.is-col-fixed-25 {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
}
.ctd-flip-grid.is-col-fixed-25.is-center {
    justify-content: center;
}
.ctd-flip-grid.is-col-fixed-25 .ctd-flip-card {
    flex: 0 0 calc((100% - (3 * var(--ctd-flip-grid-gap, 16px))) / 4);
    width: calc((100% - (3 * var(--ctd-flip-grid-gap, 16px))) / 4);
    max-width: calc((100% - (3 * var(--ctd-flip-grid-gap, 16px))) / 4);
    box-sizing: border-box;
    height: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}
.ctd-flip-grid.is-col-fixed-25 .ctd-flip-inner {
    flex: 1 1 auto;
    height: auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.ctd-flip-grid.is-col-fixed-25 .ctd-flip-front {
    flex: 1 1 auto;
    height: auto;
    min-height: 100%;
}
@media (max-width: 1024px) {
    .ctd-flip-grid.is-col-fixed-25 .ctd-flip-card {
        flex-basis: calc((100% - var(--ctd-flip-grid-gap, 16px)) / 2);
        width: calc((100% - var(--ctd-flip-grid-gap, 16px)) / 2);
        max-width: calc((100% - var(--ctd-flip-grid-gap, 16px)) / 2);
    }
}
@media (max-width: 768px) {
    .ctd-flip-grid.is-col-fixed-25 .ctd-flip-card {
        flex-basis: 100%;
        width: 100%;
        max-width: 100%;
    }
}
.ctd-flip-card {
    position: relative;
    min-height: 430px;
    height: 100%;
    border-radius: var(--radius-lg, 16px);
    perspective: 1400px;
}
.ctd-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}
.ctd-flip-card:hover .ctd-flip-inner,
.ctd-flip-card:focus-within .ctd-flip-inner {
    transform: rotateY(180deg);
}
.ctd-flip-face {
    border-radius: var(--radius-lg, 16px);
    padding: 30px 26px 52px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}
.ctd-flip-front {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: var(--white, #fff);
    border: 1px solid var(--grey-200, #e2e8f0);
    opacity: 1;
    transition: border-color 0.3s, box-shadow 0.3s, opacity 0s linear 0.35s;
}
.ctd-flip-card:hover .ctd-flip-front,
.ctd-flip-card:focus-within .ctd-flip-front {
    opacity: 0;
}
.ctd-flip-card:hover .ctd-flip-front {
    box-shadow: 0 12px 36px rgba(23, 30, 54, 0.06);
}
.ctd-flip-back {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: var(--blue-soft, #f4f6f9);
    border: 1px solid var(--blue-border, #d1d9e6);
    transform: rotateY(180deg);
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 28px;
    opacity: 0;
    transition: opacity 0s linear 0.35s;
}
.ctd-flip-card:hover .ctd-flip-back,
.ctd-flip-card:focus-within .ctd-flip-back {
    opacity: 1;
}
.ctd-flip-metrics {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 100%;
}
.ctd-flip-metric-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.ctd-flip-metric {
    font-family: 'Outfit', sans-serif;
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--blue, #1e3a8a);
    letter-spacing: -0.03em;
}
.ctd-flip-metric-label {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--navy, #0f172a);
    line-height: 1.4;
    max-width: 13em;
}
.ctd-flip-metric-client {
    font-size: 0.85rem;
    font-weight: 300;
    color: var(--navy, #0f172a);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-top: 4px;
}
.ctd-flip-card blockquote {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text, #334155);
    font-style: normal;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    flex: 1;
}
.ctd-flip-card blockquote p {
    margin: 0 !important;
    padding: 0 !important;
}
.ctd-flip-logo {
    height: 38px !important;
    width: auto !important;
    max-width: 85% !important;
    object-fit: contain !important;
    object-position: left center !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--grey-200, #e2e8f0) !important;
    margin: 0 !important;
}
.ctd-flip-wordmark {
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--navy, #0f172a);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.75;
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--grey-200, #e2e8f0) !important;
    margin: 0 !important;
}
.ctd-flip-logo-back {
    height: 28px !important;
    width: auto !important;
    max-width: 70% !important;
    object-fit: contain !important;
    opacity: 0.55;
    margin: 2px auto 0 !important;
}
.ctd-flip-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 !important;
    padding: 0 !important;
}
.ctd-flip-author {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--blue, #1e3a8a);
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4;
}
.ctd-flip-role {
    font-size: 1rem;
    color: var(--grey-500, #64748b);
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    line-height: 1.4;
}

/* ==========================================================================
   Global Page Loader
   ========================================================================== */

#pageLoader {
    position: fixed;
    inset: 0;
    background: var(--white, #ffffff);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    animation: plFade 0.5s ease 1.6s forwards;
}
#pageLoader.done {
    display: none !important;
    pointer-events: none !important;
}
#pageLoader.fade-in {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: plFadeIn 0.3s ease forwards;
    pointer-events: all !important;
}
.pl-star {
    width: 96px;
    height: 96px;
    animation: plTwinkle 1.6s cubic-bezier(.4, 0, .2, 1) forwards;
    transform-origin: center;
    filter: drop-shadow(0 0 0 rgba(8, 101, 254, 0));
}
.pl-spark {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #0865fe;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
}
.pl-spark--a {
    top: calc(50% - 60px);
    left: calc(50% - 50px);
    animation: plSpark 1.4s ease 0.35s forwards;
}
.pl-spark--b {
    top: calc(50% - 55px);
    left: calc(50% + 60px);
    animation: plSpark 1.4s ease 0.55s forwards;
}
.pl-spark--c {
    top: calc(50% + 70px);
    left: calc(50% - 40px);
    animation: plSpark 1.4s ease 0.75s forwards;
}
.pl-spark--d {
    top: calc(50% + 50px);
    left: calc(50% + 55px);
    animation: plSpark 1.4s ease 0.45s forwards;
}

@keyframes plTwinkle {
    0% { transform: scale(0.2) rotate(-90deg); opacity: 0; filter: drop-shadow(0 0 0 rgba(8, 101, 254, 0)); }
    25% { transform: scale(1.15) rotate(0deg); opacity: 1; filter: drop-shadow(0 0 24px rgba(8, 101, 254, 0.6)); }
    45% { transform: scale(0.92) rotate(0deg); filter: drop-shadow(0 0 8px rgba(8, 101, 254, 0.3)); }
    55% { transform: scale(1.05) rotate(0deg); filter: drop-shadow(0 0 28px rgba(8, 101, 254, 0.8)); }
    72% { transform: scale(0.96) rotate(0deg); filter: drop-shadow(0 0 12px rgba(8, 101, 254, 0.4)); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; filter: drop-shadow(0 0 16px rgba(8, 101, 254, 0.45)); }
}
@keyframes plSpark {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
    40% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
}
@keyframes plFade {
    0% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}
@keyframes plFadeIn {
    0% { opacity: 0; visibility: visible; }
    100% { opacity: 1; visibility: visible; }
}