/* ==========================================================================
   Clients — "Unlocking the solution" loop.

   Story, on a 12s seamless cycle:
     0.0–2.0s   locked; client issues drift around the lock
     2.0–5.0s   the GreensFin key glides in and aligns
     5.0–7.5s   the key turns, the shackle opens, issues dissolve to particles
     7.5–10.0s  the solution card rises from the open lock and holds
    10.0–12.0s  everything retracts to the opening pose

   Every animation runs for 12s (or 4s / 6s, which divide it), so the whole
   scene returns to its first frame exactly on the loop boundary.

   Timing reference: 1s = 8.3333%.
   ========================================================================== */

.clientsUnlockSec {
    /* Dark greens are surface depth only; the accent is the brand green, so
       it tracks --gf-green from style.css. The rgba() tints further down are
       that same colour at alpha. */
    --cu-forest: #143c1c;
    --cu-forest-deep: #0b2a12;
    --cu-green: var(--gf-green, #5eb346);
    --cu-green-soft: #8ed157;
    /* Brand green is only 2.6:1 on white, so text accents step down:
       ink passes AA for large headings, deep passes AA for body-size text. */
    --cu-green-ink: #4a9e3c;
    --cu-green-deep: #3d7f31;
    --cu-gold: #d4a853;
    --cu-cream: #f7f9f4;

    padding: 90px 0;
    background: linear-gradient(180deg, #ffffff 0%, var(--cu-cream) 100%);
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Copy column
   -------------------------------------------------------------------------- */

.clientsUnlockContent {
    max-width: 540px;
}

.clientsUnlockEyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 7px 16px;
    border: 1px solid rgba(94, 179, 70, 0.28);
    border-radius: 999px;
    background: rgba(94, 179, 70, 0.08);
    color: var(--cu-green-deep);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.clientsUnlockHeading {
    margin-bottom: 20px;
    color: var(--gf-navy-deep);
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 700;
    line-height: 1.22;
}

.clientsUnlockHeading span {
    color: var(--cu-green-ink);
}

.clientsUnlockDesc {
    margin-bottom: 30px;
    color: #5b6b72;
    font-size: 17px;
    line-height: 1.75;
}

.clientsUnlockPoints {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}

.clientsUnlockPoints span {
    padding: 8px 15px;
    border: 1px solid rgba(20, 60, 28, 0.12);
    border-radius: 999px;
    background: #ffffff;
    color: var(--gf-navy);
    font-size: 14px;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Stage
   -------------------------------------------------------------------------- */

.cu-panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    border-radius: 28px;
    overflow: hidden;
    background:
        radial-gradient(70% 60% at 50% 38%, #ffffff 0%, #f4f7f2 55%, #e9efe9 100%);
    box-shadow:
        0 30px 60px -30px rgba(20, 60, 28, 0.3),
        inset 0 0 0 1px rgba(20, 60, 28, 0.07);
}

/* Faint green rim light across the top. */
.cu-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(60% 45% at 50% 0%, rgba(94, 179, 70, 0.14), rgba(94, 179, 70, 0) 70%);
}

.cu-scene {
    position: absolute;
    inset: 0;
    display: flex;
    /* The lock sits low so the solution has clear air to rise into. */
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 3%;
    /* The whole scene drifts ≤5° for a slow parallax. */
    animation: cuParallax 12s ease-in-out infinite;
}

@keyframes cuParallax {
    0%, 100% { transform: translateX(-6px) rotate(-1.4deg); }
    50%      { transform: translateX(6px) rotate(1.4deg); }
}

/* Sized so the solution card clears the top of the panel once it is out. */
.cu-figure {
    position: relative;
    width: 50%;
    max-width: 310px;
    aspect-ratio: 560 / 440;
}

/* Clips at the viewBox, which is what parks the key off-stage between loops. */
.cu-lock {
    display: block;
    width: 100%;
    height: 100%;
}

/* --------------------------------------------------------------------------
   Lock parts
   -------------------------------------------------------------------------- */

.cu-shadow {
    /* scaleX needs to work off the ellipse's own centre, not the viewBox. */
    transform-box: fill-box;
    transform-origin: center;
    animation: cuShadow 12s ease-in-out infinite;
}

@keyframes cuShadow {
    0%, 41.67% { opacity: 0.5; transform: scaleX(1); }
    54.17%     { opacity: 0.32; transform: scaleX(1.08); }
    83.33%     { opacity: 0.32; transform: scaleX(1.08); }
    91.67%     { opacity: 0.5; transform: scaleX(1); }
    100%       { opacity: 0.5; transform: scaleX(1); }
}

/* Hinged at the right leg, the way a real padlock opens. */
.cu-shackle {
    transform-origin: 335px 190px;
    animation: cuShackle 12s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes cuShackle {
    0%, 41.67% { transform: translateY(0) rotate(0deg); }
    54.17%     { transform: translateY(-16px) rotate(30deg); }
    83.33%     { transform: translateY(-16px) rotate(30deg); }
    91.67%     { transform: translateY(0) rotate(0deg); }
    100%       { transform: translateY(0) rotate(0deg); }
}

/* The lock catches a green glow as the key approaches, holds it open,
   then lets it go. */
.cu-glow {
    opacity: 0;
    animation: cuGlow 12s ease-in-out infinite;
}

@keyframes cuGlow {
    0%, 20.83% { opacity: 0; }
    37.5%      { opacity: 0.55; }
    54.17%     { opacity: 1; }
    83.33%     { opacity: 0.8; }
    95.83%     { opacity: 0; }
    100%       { opacity: 0; }
}

/* One soft light sweep across the lock face per loop. */
.cu-sweep {
    animation: cuSweep 12s ease-in-out infinite;
}

@keyframes cuSweep {
    0%, 8.33% { transform: translateX(-260px); }
    25%       { transform: translateX(260px); }
    100%      { transform: translateX(260px); }
}

/* --------------------------------------------------------------------------
   The key
   -------------------------------------------------------------------------- */

.cu-key {
    /* Pivot is the keyhole, so the turn reads as a real turn. */
    transform-origin: 280px 270px;
    animation: cuKey 12s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

@keyframes cuKey {
    /* locked: parked off-stage right */
    0%, 16.67% { transform: translateX(300px) rotate(0deg); }
    /* approach + align */
    35%        { transform: translateX(0) rotate(0deg); }
    41.67%     { transform: translateX(0) rotate(0deg); }
    /* turn — clockwise, so the bow swings away from the solution above */
    54.17%     { transform: translateX(0) rotate(45deg); }
    /* hold while the solution is out */
    83.33%     { transform: translateX(0) rotate(45deg); }
    /* unturn, withdraw, rest */
    91.67%     { transform: translateX(0) rotate(0deg); }
    97.5%      { transform: translateX(300px) rotate(0deg); }
    100%       { transform: translateX(300px) rotate(0deg); }
}

/* --------------------------------------------------------------------------
   Client issues — abstract glyph chips that drift, then dissolve
   -------------------------------------------------------------------------- */

.cu-issues {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* The outer element carries the story (all four chips appear and dissolve
   together); the inner box carries each chip's own idle drift, so staggering
   the drift cannot knock a chip out of the narrative. */
.cu-issue {
    position: absolute;
    animation: cuIssue 12s ease-in-out infinite;
}

.cu-issue__box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 8px 18px -6px rgba(20, 60, 28, 0.22),
        inset 0 0 0 1px rgba(20, 60, 28, 0.08);
    color: #8a97a0;
    animation: cuDrift 12s ease-in-out infinite;
}

.cu-issue svg {
    width: 20px;
    height: 20px;
}

.cu-issue--a { top: 8%;  left: 2%; }
.cu-issue--b { top: 30%; right: 0%; }
.cu-issue--c { bottom: 20%; left: 0%; }
.cu-issue--d { top: 2%;  right: 16%; }

.cu-issue--b .cu-issue__box { animation-delay: -3s; }
.cu-issue--c .cu-issue__box { animation-delay: -6s; }
.cu-issue--d .cu-issue__box { animation-delay: -9s; }

/* Present until the lock turns, gone while it is open, back before the
   loop restarts. */
@keyframes cuIssue {
    0%, 33.33% { opacity: 0.95; transform: translateY(0) scale(1); }
    45.83%     { opacity: 0;    transform: translateY(-18px) scale(0.6); }
    83.33%     { opacity: 0;    transform: translateY(-18px) scale(0.6); }
    95.83%     { opacity: 0.95; transform: translateY(0) scale(1); }
    100%       { opacity: 0.95; transform: translateY(0) scale(1); }
}

@keyframes cuDrift {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(7px, -9px); }
    50%      { transform: translate(-4px, 5px); }
    75%      { transform: translate(5px, 7px); }
}

/* The green motes the issues turn into. */
.cu-motes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cu-motes span {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cu-green-soft);
    box-shadow: 0 0 8px rgba(142, 209, 87, 0.8);
    opacity: 0;
    animation: cuMote 12s ease-out infinite;
}

.cu-motes span:nth-child(1) { left: 12%; top: 26%; animation-delay: -0.1s; }
.cu-motes span:nth-child(2) { left: 26%; top: 54%; animation-delay: -0.3s; width: 4px; height: 4px; }
.cu-motes span:nth-child(3) { left: 44%; top: 20%; animation-delay: -0.5s; }
.cu-motes span:nth-child(4) { left: 62%; top: 44%; animation-delay: -0.2s; width: 4px; height: 4px; }
.cu-motes span:nth-child(5) { left: 78%; top: 30%; animation-delay: -0.6s; }
.cu-motes span:nth-child(6) { left: 88%; top: 58%; animation-delay: -0.4s; width: 4px; height: 4px; }
.cu-motes span:nth-child(7) { left: 34%; top: 72%; animation-delay: -0.7s; }
.cu-motes span:nth-child(8) { left: 68%; top: 72%; animation-delay: -0.15s; width: 4px; height: 4px; }

@keyframes cuMote {
    0%, 37.5% { opacity: 0; transform: translateY(0) scale(0.5); }
    45.83%    { opacity: 0.95; transform: translateY(-16px) scale(1); }
    58.33%    { opacity: 0; transform: translateY(-54px) scale(0.4); }
    100%      { opacity: 0; transform: translateY(-54px) scale(0.4); }
}

/* --------------------------------------------------------------------------
   The solution that comes out of the open lock
   -------------------------------------------------------------------------- */

/* Sits entirely above the lock, so the open shackle stays readable. */
.cu-solution {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 13px 20px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(244, 250, 246, 0.9));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow:
        0 18px 36px -14px rgba(20, 60, 28, 0.34),
        inset 0 0 0 1px rgba(94, 179, 70, 0.22);
    opacity: 0;
    animation: cuSolution 12s cubic-bezier(0.3, 0, 0.2, 1) infinite;
}

.cu-solution b {
    white-space: nowrap;
}

.cu-solution__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cu-solution svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.cu-solution b {
    color: var(--cu-forest);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.cu-solution i {
    margin: 0 6px;
    color: var(--cu-green);
    font-style: normal;
}

@keyframes cuSolution {
    0%, 54.17% { opacity: 0; transform: translate(-50%, 34px) scale(0.86); }
    66.67%     { opacity: 1; transform: translate(-50%, 0) scale(1); }
    81.25%     { opacity: 1; transform: translate(-50%, 0) scale(1); }
    89.58%     { opacity: 0; transform: translate(-50%, 26px) scale(0.9); }
    100%       { opacity: 0; transform: translate(-50%, 34px) scale(0.86); }
}

/* Product rails, fanning out inside the solution card just after it opens. */
.cu-rails {
    display: flex;
    gap: 6px;
}

.cu-rails span {
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(94, 179, 70, 0.12);
    color: var(--cu-forest);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0;
    animation: cuRail 12s cubic-bezier(0.3, 0, 0.2, 1) infinite;
}

.cu-rails span:nth-child(2) { animation-delay: 0.12s; }
.cu-rails span:nth-child(3) { animation-delay: 0.24s; }

@keyframes cuRail {
    0%, 58.33% { opacity: 0; transform: translateY(16px); }
    70.83%     { opacity: 1; transform: translateY(0); }
    81.25%     { opacity: 1; transform: translateY(0); }
    88%        { opacity: 0; transform: translateY(12px); }
    100%       { opacity: 0; transform: translateY(16px); }
}

/* --------------------------------------------------------------------------
   Play / pause
   -------------------------------------------------------------------------- */

.cu-toggle {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(20, 60, 28, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--cu-forest);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.cu-toggle:hover {
    background: #ffffff;
    transform: scale(1.06);
}

.cu-toggle:focus-visible {
    outline: 2px solid var(--cu-green);
    outline-offset: 2px;
}

.cu-toggle .cu-toggle__play { display: none; }
.cu-panel.is-paused .cu-toggle .cu-toggle__play { display: block; }
.cu-panel.is-paused .cu-toggle .cu-toggle__pause { display: none; }

.cu-panel.is-paused .cu-scene,
.cu-panel.is-paused .cu-scene * {
    animation-play-state: paused !important;
}

/* --------------------------------------------------------------------------
   Rendered clip — same handover as the home panel.
   -------------------------------------------------------------------------- */

.cu-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.7s ease;
}

.cu-panel.has-video .cu-video { opacity: 1; }
.cu-panel.has-video .cu-scene { opacity: 0; animation: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .clientsUnlockSec { padding: 64px 0; }
    .clientsUnlockContent { max-width: none; }
}

/* At phone width a 16:9 panel is too short for the solution to rise into,
   so the panel gets taller rather than the lock getting smaller. */
@media (max-width: 767px) {
    .cu-panel { aspect-ratio: 4 / 3; }
    .cu-scene { padding-bottom: 6%; }
    .cu-figure { width: 62%; max-width: 300px; }

    /* The copy column was typed for a 540px measure. Inside the page's
       px-4 wrapper a phone leaves it ~300px, where 17px/1.75 body ran to
       ten lines and the pills outweighed the paragraph. */
    .clientsUnlockSec { padding: 56px 0; }
    .clientsUnlockHeading { margin-bottom: 14px; font-size: 26px; }
    .clientsUnlockDesc { margin-bottom: 22px; font-size: 15.5px; line-height: 1.7; }
    .clientsUnlockPoints { gap: 8px; margin-bottom: 24px; }
    .clientsUnlockPoints span { padding: 7px 13px; font-size: 13px; }
}

@media (max-width: 575px) {
    .cu-panel { border-radius: 20px; }

    .clientsUnlockEyebrow {
        margin-bottom: 14px;
        padding: 6px 13px;
        font-size: 11.5px;
    }
    .clientsUnlockHeading { font-size: 25px; }
    .clientsUnlockDesc { font-size: 15px; line-height: 1.68; }
    .clientsUnlockPoints span { padding: 6px 12px; font-size: 12.5px; }

    .cu-issue { width: 36px; height: 36px; border-radius: 11px; }
    .cu-issue svg { width: 16px; height: 16px; }
    .cu-solution { gap: 8px; padding: 9px 13px; }
    .cu-solution b { font-size: 12px; }
    .cu-rails span { padding: 5px 10px; font-size: 11px; }
}

/* --------------------------------------------------------------------------
   Reduced motion — hold the "solution open" beat, which is the point of
   the piece, rather than an arbitrary frame.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .cu-panel *,
    .cu-panel *::before,
    .cu-panel *::after {
        animation: none !important;
    }

    .cu-shackle { transform: translateY(-16px) rotate(30deg); }
    .cu-key { transform: rotate(-60deg); }
    .cu-glow { opacity: 0.8; }
    .cu-issues,
    .cu-motes,
    .cu-sweep { display: none; }
    .cu-solution { opacity: 1; transform: translate(-50%, 0); }
    .cu-rails span { opacity: 1; transform: none; }
    .cu-toggle { display: none; }
}