/* ==========================================================================
   Our Values (homepage, below Vision & Mission)
   Five orbs in the five Melodies logo colours, resting on an animated
   "melody line" like notes on a staff. Pure CSS animation; values.js adds
   the scroll reveal and the gentle 3D tilt (both optional).
   ========================================================================== */
.mval{
    --mv-bg:#f7f9fc;
    --mv-ink:#1f2550;
    --mv-mut:#4a5070;
    --os:clamp(148px, 12.6vw, 184px);
    position:relative;
    background:var(--mv-bg);
    padding:30px 5% 230px;
    overflow:hidden;
    overflow:clip;
    isolation:isolate;
}
html[data-theme="dark"] .mval{
    --mv-bg:#12172f;
    --mv-ink:#eef0fa;
    --mv-mut:#aab0d0;
}

/* ---------- background: soft colour clouds, outlined watermark, rising notes */
.mval-bg{
    position:absolute;inset:0;pointer-events:none;z-index:-1;
    /* the colour clouds fade in from (and out to) the plain background, so the
       join with Vision & Mission above and Services below is seamless */
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.35) 120px,#000 340px,#000 calc(100% - 260px),transparent 100%);
            mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.35) 120px,#000 340px,#000 calc(100% - 260px),transparent 100%);
}
.mval-bg .cl{position:absolute;border-radius:50%;filter:blur(70px);opacity:.33;animation:mval-drift 18s ease-in-out infinite alternate}
.mval-bg .cl1{width:420px;height:420px;background:#E33069;top:60px;inset-inline-start:-120px}
.mval-bg .cl2{width:380px;height:380px;background:#4FB9C2;top:18%;inset-inline-end:-120px;animation-delay:-6s}
.mval-bg .cl3{width:340px;height:340px;background:#FFAD27;bottom:40px;inset-inline-start:30%;opacity:.22;animation-delay:-11s}
.mval-bg .cl4{width:300px;height:300px;background:#85BB33;bottom:-80px;inset-inline-end:12%;opacity:.2;animation-delay:-3s}
.mval-bg .cl5{width:280px;height:280px;background:#913791;top:40%;inset-inline-start:6%;opacity:.18;animation-delay:-9s}
html[data-theme="dark"] .mval-bg .cl{opacity:.2}
@keyframes mval-drift{to{transform:translate(40px,30px) scale(1.12)}}

.mval-bg b{
    position:absolute;inset-inline:0;top:50%;translate:0 -50%;
    text-align:center;white-space:nowrap;user-select:none;
    font:800 clamp(6rem,19vw,17rem)/1 'Fraunces',serif;letter-spacing:.03em;
    color:transparent;-webkit-text-stroke:2px rgba(145,55,145,.09);
}
html[lang="ar"] .mval-bg b{font-family:'Cairo',sans-serif;letter-spacing:0}
html[data-theme="dark"] .mval-bg b{-webkit-text-stroke-color:rgba(255,255,255,.06)}

.mval-bg i{
    position:absolute;bottom:-30px;font-style:normal;font-size:22px;line-height:1;
    color:var(--c);opacity:0;animation:mval-rise 11s linear infinite;
}
.mval-bg i:nth-of-type(1){--c:#85BB33;inset-inline-start:6%;animation-delay:-1s}
.mval-bg i:nth-of-type(2){--c:#913791;inset-inline-start:19%;animation-delay:-4.5s;font-size:16px}
.mval-bg i:nth-of-type(3){--c:#E33069;inset-inline-start:33%;animation-delay:-8s}
.mval-bg i:nth-of-type(4){--c:#4FB9C2;inset-inline-start:48%;animation-delay:-2.5s;font-size:18px}
.mval-bg i:nth-of-type(5){--c:#FFAD27;inset-inline-start:63%;animation-delay:-6.5s}
.mval-bg i:nth-of-type(6){--c:#85BB33;inset-inline-start:77%;animation-delay:-9.5s;font-size:15px}
.mval-bg i:nth-of-type(7){--c:#E33069;inset-inline-start:90%;animation-delay:-3.5s;font-size:19px}
@keyframes mval-rise{
    0%{transform:translateY(0) rotate(0);opacity:0}
    12%{opacity:.55}
    80%{opacity:.35}
    100%{transform:translateY(-760px) rotate(25deg);opacity:0}
}

/* ---------- heading */
.mval-head{position:relative;text-align:center;max-width:760px;margin:0 auto 70px}
.mval-eyebrow{
    display:table;margin:0 auto 14px;padding:7px 18px;border-radius:999px;
    font-size:13px;font-weight:700;letter-spacing:.06em;color:#913791;
    background:rgba(145,55,145,.1);border:1px solid rgba(145,55,145,.18);
}
html[data-theme="dark"] .mval-eyebrow{color:#e7b3e7;background:rgba(145,55,145,.22);border-color:rgba(231,179,231,.25)}
.mval .mval-title{
    display:block;margin:0;font-size:clamp(36px,5vw,54px);font-weight:800;line-height:1.15;color:var(--mv-ink);
}
.mval .mval-title::after{
    content:'';display:block!important;position:static!important;transform:none!important;width:120px!important;height:5px!important;margin:18px auto 0!important;border-radius:5px;
    background:linear-gradient(90deg,#85BB33,#913791,#E33069,#4FB9C2,#FFAD27,#85BB33)!important;
    background-size:200% 100%;animation:mval-slide 6s linear infinite;
}
@keyframes mval-slide{to{background-position:-200% 0}}
.mval-sub{margin:20px auto 0;font-size:17px;line-height:1.9;color:var(--mv-mut)}

/* ---------- the row + melody line */
.mval-stage{position:relative;max-width:1240px;margin:0 auto;--lift:64px}
.mval-row{
    position:relative;z-index:1;list-style:none;margin:0 auto;padding:0;
    display:grid;grid-template-columns:repeat(5,1fr);gap:0;
}
.mval-line{
    position:absolute;inset-inline:0;top:calc(var(--os) / 2 - 24px);
    width:100%;height:calc(var(--lift) + 48px);z-index:0;pointer-events:none;overflow:visible;
}
.mval-row{--lift:64px}
.mval-line path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mval-line .ln-glow{stroke:url(#mvalGrad);stroke-width:10;opacity:.12}
.mval-line .ln-dash{stroke:url(#mvalGrad);stroke-width:3;stroke-dasharray:2 14;animation:mval-dash 1.4s linear infinite;opacity:.85}
html[dir="rtl"] .mval-line .ln-dash{animation-direction:reverse}
@keyframes mval-dash{to{stroke-dashoffset:-32}}

.mval-item{position:relative;z-index:1;text-align:center;padding:0 10px}
.mval-item:nth-child(even){padding-top:var(--lift)}

/* ---------- orb */
.mval-orb{
    position:relative;width:var(--os);aspect-ratio:1;margin-inline:auto;
    display:grid;place-items:center;
    transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:transform .25s ease-out;
}
.mval-ring{position:absolute;inset:0;border-radius:50%;pointer-events:none}
.mval-ring.r1{border:2px dashed var(--c);opacity:.55;animation:mval-spin 20s linear infinite}
.mval-ring.r2{inset:-13px;border:3px solid transparent;border-top-color:var(--c);border-bottom-color:var(--c);opacity:.6;animation:mval-spin 9s linear infinite reverse;transition:opacity .3s}
.mval-ring.r3{inset:-26px;border:1px solid var(--c);opacity:.14}
.mval-orb:hover .mval-ring.r2{animation-duration:2.4s;opacity:.95}
@keyframes mval-spin{to{transform:rotate(360deg)}}

.mval-glow{position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,var(--sh),transparent 68%);filter:blur(16px);animation:mval-glow 3.4s ease-in-out infinite}
@keyframes mval-glow{50%{transform:scale(1.2);opacity:.6}}

.mval-core{
    position:relative;z-index:2;width:80%;aspect-ratio:1;border-radius:50%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    color:#fff;background:linear-gradient(145deg,var(--c1),var(--c2));
    box-shadow:0 30px 56px -20px var(--sh),inset 0 -16px 30px rgba(0,0,0,.22),inset 0 12px 24px rgba(255,255,255,.32);
    transition:transform .45s cubic-bezier(.2,.9,.3,1.3);overflow:hidden;
}
.mval-core::before{ /* glassy highlight */
    content:'';position:absolute;top:8%;inset-inline-start:16%;width:46%;height:26%;border-radius:50%;
    background:radial-gradient(ellipse at center,rgba(255,255,255,.55),transparent 70%);transform:rotate(-24deg);
}
.mval-core::after{ /* light sweep on hover */
    content:'';position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
    transform:translateX(-120%);transition:transform .9s ease;
}
.mval-orb:hover .mval-core{transform:scale(1.07)}
.mval-orb:hover .mval-core::after{transform:translateX(120%)}
.mval-core h3{position:relative;margin:0;font-size:clamp(16px,1.35vw,20px);font-weight:800;line-height:1.2;padding:0 8px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.28)}
.mval-ic{position:relative;width:46%;height:auto;overflow:visible;filter:drop-shadow(0 3px 6px rgba(0,0,0,.18))}

.mval-spk{position:absolute;top:50%;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--c);box-shadow:0 0 14px var(--c);z-index:3;pointer-events:none}
.mval-spk.k1{animation:mval-orbit 8s linear infinite}
.mval-spk.k2{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;animation:mval-orbit 12s linear infinite reverse;animation-delay:-4s}
.mval-spk.k3{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;animation:mval-orbit 16s linear infinite;animation-delay:-9s}
@keyframes mval-orbit{from{transform:rotate(0) translateX(calc(var(--os) * .6)) rotate(0)}to{transform:rotate(360deg) translateX(calc(var(--os) * .6)) rotate(-360deg)}}

.mval-item p{max-width:250px;margin:34px auto 0;font-size:15.5px;line-height:1.85;color:var(--mv-mut)}

.mval .mval-item p,.mval .mval-sub,.mval .mval-title{text-align:center}
/* colours: the five stripes of the Melodies logo */
.mval-item.c-green {--c:#85BB33;--c1:#a9db5e;--c2:#5f9a1c;--sh:rgba(133,187,51,.7)}
.mval-item.c-purple{--c:#913791;--c1:#c564c5;--c2:#6d226d;--sh:rgba(145,55,145,.7)}
.mval-item.c-pink  {--c:#E33069;--c1:#ff6f9b;--c2:#b81c4f;--sh:rgba(227,48,105,.7)}
.mval-item.c-teal  {--c:#4FB9C2;--c1:#7fdbe2;--c2:#23879a;--sh:rgba(79,185,194,.75)}
.mval-item.c-orange{--c:#FFAD27;--c1:#ffc24f;--c2:#e07800;--sh:rgba(255,173,39,.75)}

/* ---------- animated icons */
.mval-ic *{transform-box:fill-box;transform-origin:center}
.mval-ic .fl{fill:rgba(255,255,255,.22);stroke:#fff;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.mval-ic .st{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mval-ic .tw{animation:mval-tw 1.9s ease-in-out infinite}
.mval-ic .tw.d2{animation-delay:.95s}
@keyframes mval-tw{0%,100%{transform:scale(.55);opacity:.45}50%{transform:scale(1.15);opacity:1}}
/* creativity: big sparkle breathes */
.mval-ic .spark{animation:mval-breathe 3s ease-in-out infinite}
@keyframes mval-breathe{50%{transform:scale(1.1) rotate(12deg)}}
/* quality: light runs across the diamond */
.mval-ic .shine{fill:rgba(255,255,255,.85);animation:mval-shine 3.4s ease-in-out infinite;transform-box:view-box;transform-origin:0 0}
@keyframes mval-shine{0%{transform:translateX(0) skewX(-20deg)}55%,100%{transform:translateX(90px) skewX(-20deg)}}
/* passion: heart beat + pulse line */
.mval-ic .beat{animation:mval-beat 1.6s ease-in-out infinite}
@keyframes mval-beat{0%,100%{transform:scale(1)}14%{transform:scale(1.12)}28%{transform:scale(.97)}42%{transform:scale(1.08)}}
.mval-ic .pulse{stroke-dasharray:70;stroke-dashoffset:70;animation:mval-draw 1.6s linear infinite}
@keyframes mval-draw{0%{stroke-dashoffset:70;opacity:1}70%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
/* precision: stopwatch hand ticks round */
.mval-ic .hand{transform-box:view-box;transform-origin:32px 37px;animation:mval-tick 6s steps(12) infinite}
@keyframes mval-tick{to{transform:rotate(360deg)}}
.mval-ic .prog{stroke-dasharray:107;stroke-dashoffset:107;opacity:.55;animation:mval-prog 6s linear infinite;transform-box:view-box;transform-origin:32px 37px;transform:rotate(-90deg)}
@keyframes mval-prog{to{stroke-dashoffset:0}}
/* innovation: bulb glows, rays flash */
.mval-ic .bulb{animation:mval-bulb 2.6s ease-in-out infinite}
@keyframes mval-bulb{50%{fill:rgba(255,255,255,.55)}}
.mval-ic .ray{animation:mval-ray 2.6s ease-in-out infinite}
.mval-ic .ray.d2{animation-delay:.3s}.mval-ic .ray.d3{animation-delay:.6s}
@keyframes mval-ray{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1)}}

/* ---------- scroll reveal (only when values.js is running) */
.mval.is-armed .mval-head,
.mval.is-armed .mval-orb,
.mval.is-armed .mval-item p{opacity:0}
.mval.is-armed .mval-head{transform:translateY(24px)}
.mval.is-armed .mval-orb{transform:scale(.55) translateY(30px)}
.mval.is-armed .mval-item p{transform:translateY(16px)}
.mval.is-armed .mval-line{opacity:0;transition:opacity 1.2s .6s}
.mval.is-in .mval-head,
.mval.is-in .mval-item p{opacity:1;transform:none;transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
.mval.is-in .mval-orb{opacity:1;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:opacity .7s,transform .9s cubic-bezier(.2,1.25,.35,1)}
.mval.is-in .mval-line{opacity:1}
.mval.is-in .mval-item:nth-child(1) .mval-orb{transition-delay:.15s}
.mval.is-in .mval-item:nth-child(2) .mval-orb{transition-delay:.3s}
.mval.is-in .mval-item:nth-child(3) .mval-orb{transition-delay:.45s}
.mval.is-in .mval-item:nth-child(4) .mval-orb{transition-delay:.6s}
.mval.is-in .mval-item:nth-child(5) .mval-orb{transition-delay:.75s}
.mval.is-in .mval-item:nth-child(1) p{transition-delay:.35s}
.mval.is-in .mval-item:nth-child(2) p{transition-delay:.5s}
.mval.is-in .mval-item:nth-child(3) p{transition-delay:.65s}
.mval.is-in .mval-item:nth-child(4) p{transition-delay:.8s}
.mval.is-in .mval-item:nth-child(5) p{transition-delay:.95s}
.mval.is-settled .mval-orb{transition:transform .25s ease-out}

/* ---------- bottom wave (same moving wave as the rest of the homepage) */
.mval::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:200px;z-index:-1;
    background-image:var(--wave-bg);background-repeat:repeat-x;background-position:center;
    background-size:1200px 200px;animation:wave-flow 30s linear infinite;
}

/* ---------- responsive */
@media (max-width:1100px){
    .mval{--os:168px}
    .mval-row{display:flex;flex-wrap:wrap;justify-content:center;row-gap:56px;max-width:900px}
    .mval-item{flex:0 0 33.333%}
    .mval-item:nth-child(even){padding-top:0}
    .mval-line{display:none}
}
@media (max-width:720px){
    .mval{--os:164px;padding:20px 6% 150px}
    .mval-head{margin-bottom:56px}
    .mval-item{flex:0 0 100%}
    .mval-row{row-gap:60px}
    .mval-item p{max-width:300px;margin-top:30px}
    .mval::after{height:110px;background-size:700px 110px}
}
@media (prefers-reduced-motion:reduce){
    .mval *,.mval::after{animation:none!important;transition:none!important}
    .mval.is-armed .mval-head,.mval.is-armed .mval-orb,.mval.is-armed .mval-item p,.mval.is-armed .mval-line{opacity:1;transform:none}
}