/* ==========================================================================
   Sparsh International School — home page v2, additions
   The 3C Model and Blogs sections, the scroll bar, and the extra motion
   (3D tilt, pointer light, magnetic buttons, counters). Loads after home-v2.css.
   Every hidden start state is scoped to html.sx-motion, like the rest of the page.
   ========================================================================== */

/* ---------- Reading progress, along the very top of the window ---------- */
.sx-scrollbar {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 975;
    height: 3px;
    pointer-events: none;
}

.sx-scrollbar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--sx-blue), var(--sx-orange));
    transform: scaleX(var(--p, 0));
    transform-origin: left;
}

/* buttons that lean toward the pointer: let the lean ease in and out */
.sx-btn[data-sx-magnetic] {
    transition: background-size .55s var(--sx-ease-out), color .35s ease, border-color .35s ease, translate .35s var(--sx-ease-out);
}

/* the hero copy lifts away and fades as the page scrolls (desktop, driven by the script) */
.sx-hero__inner {
    opacity: calc(1 - var(--hp, 0));
    translate: 0 calc(var(--hp, 0) * -56px);
}

/* ==========================================================================
   3C Model
   ========================================================================== */
.sx-c3 { background: #fff; overflow: hidden; }

/* a faint field of dots fading out from the top right corner */
.sx-c3::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: min(70%, 1000px);
    height: 70%;
    background-image: radial-gradient(rgba(26, 72, 127, .13) 1.3px, transparent 1.6px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(70% 80% at 100% 0%, #000, transparent 72%);
    mask-image: radial-gradient(70% 80% at 100% 0%, #000, transparent 72%);
    pointer-events: none;
}

.sx-c3 .sx-container { position: relative; }

.sx-c3__body {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(32px, 5vw, 120px);
    align-items: center;
}

.sx-c3__venn svg {
    display: block;
    width: 100%;
    max-width: clamp(380px, 36vw, 760px);
    height: auto;
    margin: 0 auto;
    overflow: visible;
}

.sx-c3__ring {
    fill: none;
    stroke: rgba(26, 72, 127, .28);
    stroke-width: 1.2;
    stroke-dasharray: 2 8;
    transform-origin: 260px 240px;
    animation: sxSpin 90s linear infinite;
}

.sx-c3__ring--2 { stroke: rgba(36, 139, 202, .3); stroke-dasharray: 1 10; animation-direction: reverse; animation-duration: 120s; }

.sx-c3__orbit { transform-origin: 260px 240px; animation: sxSpin 22s linear infinite; }
.sx-c3__orbit circle { fill: var(--sx-orange); }

/* plain overlap (no multiply): where two circles meet the later one shows through, so the
   centre stays light and the three colours stay readable */
.sx-c3__disc {
    opacity: .86;
    stroke: #fff;
    stroke-width: 3;
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity .5s ease, filter .5s ease;
}

.sx-c3__label {
    fill: #fff;
    font-family: var(--sx-font);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: .01em;
    text-anchor: middle;
    pointer-events: none;
}

.sx-c3__core { fill: #fff; stroke: rgba(26, 72, 127, .16); stroke-width: 1.5; filter: drop-shadow(0 8px 14px rgba(16, 48, 79, .28)); }

.sx-c3__core-text {
    fill: var(--sx-navy);
    font-family: var(--sx-font);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: -.02em;
    text-anchor: middle;
    pointer-events: none;
}

/* hovering a card lights up its circle and quietens the other two */
.sx-c3[data-active="1"] .sx-c3__disc--c2,
.sx-c3[data-active="1"] .sx-c3__disc--c3,
.sx-c3[data-active="2"] .sx-c3__disc--c1,
.sx-c3[data-active="2"] .sx-c3__disc--c3,
.sx-c3[data-active="3"] .sx-c3__disc--c1,
.sx-c3[data-active="3"] .sx-c3__disc--c2 { opacity: .28; }

.sx-c3[data-active="1"] .sx-c3__disc--c1,
.sx-c3[data-active="2"] .sx-c3__disc--c2,
.sx-c3[data-active="3"] .sx-c3__disc--c3 { opacity: 1; filter: saturate(1.15) brightness(1.04); }

.sx-c3__cards {
    display: grid;
    gap: clamp(14px, 1.2vw, 26px);
    margin: 0;
    padding: 0;
    list-style: none;
    perspective: 1400px;
}

.sx-c3__card {
    --c: var(--sx-navy);
    --c-soft: rgba(26, 72, 127, .11);
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(18px, 1.8vw, 40px);
    align-items: center;
    padding: clamp(24px, 2.1vw, 46px) clamp(24px, 2.2vw, 48px);
    overflow: hidden;
    border: 1px solid var(--sx-line);
    border-radius: 6px;
    background: #fff;
    transition: border-color .4s ease, box-shadow .5s var(--sx-ease-out), translate .5s var(--sx-ease-out);
}

.sx-c3__card--c2 { --c: var(--sx-blue); --c-soft: rgba(36, 139, 202, .13); }
.sx-c3__card--c3 { --c: var(--sx-orange); --c-soft: rgba(223, 105, 38, .13); }

.sx-c3__card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--c);
    transform-origin: top;
}

.sx-c3__card:hover {
    translate: 10px 0;
    border-color: var(--c);
    box-shadow: 0 30px 56px -34px var(--c);
}

.sx-c3__card.sx-spot::before { background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), var(--c-soft), transparent 64%); }

.sx-c3__tag {
    position: absolute;
    right: clamp(16px, 1.6vw, 36px);
    top: clamp(6px, .8vw, 18px);
    font-family: var(--sx-font);
    font-weight: 700;
    font-size: clamp(54px, 5.6vw, 120px);
    line-height: 1;
    letter-spacing: -.05em;
    color: var(--c);
    opacity: .09;
    transition: opacity .5s ease, transform .8s var(--sx-ease-out);
    pointer-events: none;
}

.sx-c3__card:hover .sx-c3__tag { opacity: .2; transform: translate3d(-6px, 4px, 0); }

.sx-c3__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(64px, 5vw, 104px);
    height: clamp(64px, 5vw, 104px);
    border: 1.5px solid var(--c);
    border-radius: 50%;
    color: var(--c);
    transition: background-color .4s ease, color .4s ease;
}

.sx-c3__icon svg { width: 50%; height: 50%; }
.sx-c3__icon path,
.sx-c3__icon circle { stroke-dasharray: 1; stroke-dashoffset: 0; }
.sx-c3__card:hover .sx-c3__icon { background: var(--c); color: #fff; }

.sx-c3__copy { position: relative; }

.sx-c3__copy h3 {
    margin: 0 0 clamp(6px, .6vw, 12px);
    font-family: var(--sx-font); font-weight: 600;
    font-size: clamp(22px, 1.9vw, 38px);
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--sx-navy);
}

.sx-c3__copy p { margin: 0; max-width: 42ch; font-size: clamp(15px, 1.02vw, 20px); line-height: 1.7; color: var(--sx-text); }

.sx-c3__line {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px clamp(14px, 1.8vw, 40px);
    margin: clamp(36px, 3.6vw, 80px) 0 0;
    padding-top: clamp(22px, 2vw, 40px);
    border-top: 1px solid var(--sx-line);
    font-family: var(--sx-font); font-weight: 600;
    font-size: clamp(18px, 1.6vw, 32px);
    letter-spacing: -.012em;
    color: var(--sx-navy);
}

.sx-c3__bar { font-weight: 300; color: var(--sx-orange); }

/* ==========================================================================
   Blogs
   ========================================================================== */
.sx-blogs { background: #fff; }

.sx-blogs__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
    gap: clamp(18px, 1.8vw, 40px);
    align-items: stretch;
}

/* The newest post: the banner is shown in full (these banners carry their own lettering,
   so it is never cropped hard), the title sits under it. */
.sx-blogs__feature {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--sx-line);
    border-radius: 6px;
    background: #fff;
    transition: border-color .4s ease, box-shadow .5s var(--sx-ease-out);
}

.sx-blogs__feature:hover { border-color: rgba(36, 139, 202, .5); box-shadow: 0 30px 56px -34px rgba(16, 48, 79, .5); }

.sx-blogs__feature a { display: flex; flex-direction: column; height: 100%; color: inherit !important; }

.sx-blogs__feature-media {
    position: relative;
    display: block;
    flex: none;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--sx-line);
}

.sx-blogs__feature-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.6s var(--sx-ease-out);
}

.sx-blogs__feature a:hover img { transform: scale(1.05); }

.sx-blogs__feature-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(22px, 2vw, 46px) clamp(22px, 2.2vw, 50px) clamp(24px, 2.2vw, 50px);
}

.sx-blogs__feature h3 {
    max-width: 30ch;
    margin: 10px 0 clamp(14px, 1.2vw, 26px);
    font-family: var(--sx-font); font-weight: 600;
    font-size: clamp(21px, 1.85vw, 38px);
    line-height: 1.22;
    letter-spacing: -.02em;
    color: var(--sx-navy);
    transition: color .25s ease;
}

.sx-blogs__feature a:hover h3 { color: var(--sx-blue); }

.sx-blogs__date {
    display: block;
    font-family: var(--sx-font); font-weight: 600;
    font-size: clamp(12.5px, .78vw, 15px);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sx-orange-700);
    font-variant-numeric: tabular-nums;
}

.sx-blogs__more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 5px;
    font-family: var(--sx-font); font-weight: 600;
    font-size: clamp(14px, .9vw, 17.5px);
    color: var(--sx-blue);
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px,
        linear-gradient(rgba(36, 139, 202, .3), rgba(36, 139, 202, .3)) no-repeat 0 100% / 100% 1px;
    transition: background-size .6s var(--sx-ease-out);
}

.sx-blogs__more svg { width: 11px; height: 11px; fill: currentColor; transition: transform .4s var(--sx-ease-out); }
.sx-blogs a:hover .sx-blogs__more { background-size: 100% 1px, 100% 1px; }
.sx-blogs a:hover .sx-blogs__more svg { transform: translate(3px, -3px); }

.sx-blogs__list {
    display: grid;
    grid-auto-rows: 1fr;
    gap: clamp(12px, 1vw, 22px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sx-blogs__list li { min-height: 0; }

.sx-blogs__list a {
    display: grid;
    grid-template-columns: clamp(104px, 7.2vw, 150px) minmax(0, 1fr);
    gap: clamp(16px, 1.4vw, 30px);
    align-items: center;
    height: 100%;
    padding: clamp(10px, .8vw, 18px);
    border: 1px solid var(--sx-line);
    border-radius: 6px;
    background: #fff;
    color: inherit !important;
    transition: border-color .4s ease, box-shadow .5s var(--sx-ease-out), translate .5s var(--sx-ease-out);
}

.sx-blogs__list a:hover {
    translate: 8px 0;
    border-color: rgba(36, 139, 202, .5);
    box-shadow: 0 24px 46px -30px rgba(16, 48, 79, .5);
}

.sx-blogs__thumb { display: block; overflow: hidden; border-radius: 4px; background: var(--sx-line); aspect-ratio: 4 / 3; }

.sx-blogs__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--sx-ease-out);
}

.sx-blogs__list a:hover .sx-blogs__thumb img { transform: scale(1.1); }

.sx-blogs__text { display: block; min-width: 0; }

.sx-blogs__list h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 6px 0 clamp(8px, .8vw, 16px);
    font-family: var(--sx-font); font-weight: 600;
    font-size: clamp(15.5px, 1.18vw, 23px);
    line-height: 1.35;
    letter-spacing: -.008em;
    color: var(--sx-navy);
    transition: color .25s ease;
}

.sx-blogs__list a:hover h3 { color: var(--sx-blue); }

/* ==========================================================================
   Testimonials: a long review is cut to a few lines; "Read more" opens it
   ========================================================================== */
.sx-testimonials__item blockquote {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden;
}

.sx-testimonials__item.is-open blockquote { display: block; -webkit-line-clamp: unset; }

.sx-testimonials__more {
    align-self: flex-start;
    margin: -8px 0 24px;
    padding: 0 0 3px;
    border: 0;
    border-bottom: 1px solid currentColor;
    background: none;
    font-family: var(--sx-font); font-weight: 600;
    font-size: clamp(14px, .88vw, 17px);
    color: var(--sx-blue);
    cursor: pointer;
}

.sx-testimonials__more:hover { color: var(--sx-navy); }
.sx-testimonials__more:focus-visible { outline: 2px solid var(--sx-orange); outline-offset: 3px; }

/* ==========================================================================
   Motion — new pieces
   ========================================================================== */

/* the welcome badge pops in */
html.sx-motion [data-sx-reveal="pop"] { opacity: 0; scale: .3; rotate: -24deg; }

html.sx-motion [data-sx-reveal="pop"].is-in {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
    transition: opacity .6s ease, scale 1.1s cubic-bezier(.34, 1.56, .64, 1), rotate 1.1s var(--sx-ease-out);
    transition-delay: var(--d, 0ms);
}

/* eyebrow rule draws in before the label */
html.sx-motion .sx-eyebrow[data-sx-reveal="rise"]::before { transform: scaleX(0); }
html.sx-motion .sx-eyebrow[data-sx-reveal="rise"].is-in::before { transform: none; transition: transform 1s var(--sx-ease-io) .15s; }

/* 3C: the circles grow in one after another, then breathe; icons draw; cards slide in */
html.sx-motion .sx-c3__venn .sx-c3__disc { transform: scale(0); }
html.sx-motion .sx-c3__venn .sx-c3__label,
html.sx-motion .sx-c3__venn .sx-c3__core,
html.sx-motion .sx-c3__venn .sx-c3__core-text { opacity: 0; }

html.sx-motion .sx-c3__venn.is-in .sx-c3__disc {
    animation: sxPop 1.3s var(--sx-ease-out) var(--dd, 0s) both, sxBreathe 9s ease-in-out calc(var(--dd, 0s) + 1.4s) infinite;
}

html.sx-motion .sx-c3__venn.is-in .sx-c3__disc--c1 { --dd: .1s; }
html.sx-motion .sx-c3__venn.is-in .sx-c3__disc--c2 { --dd: .35s; animation-duration: 1.3s, 10s; }
html.sx-motion .sx-c3__venn.is-in .sx-c3__disc--c3 { --dd: .6s; animation-duration: 1.3s, 11s; }

html.sx-motion .sx-c3__venn.is-in .sx-c3__label,
html.sx-motion .sx-c3__venn.is-in .sx-c3__core,
html.sx-motion .sx-c3__venn.is-in .sx-c3__core-text {
    opacity: 1;
    transition: opacity 1s ease 1.2s;
}

html.sx-motion [data-sx-stagger="c3cards"] > li { opacity: 0; transform: translate3d(70px, 0, 0); }
html.sx-motion [data-sx-stagger="c3cards"] .sx-c3__icon path,
html.sx-motion [data-sx-stagger="c3cards"] .sx-c3__icon circle { stroke-dashoffset: 1; }
html.sx-motion [data-sx-stagger="c3cards"] > li::after { transform: scaleY(0); }

html.sx-motion [data-sx-stagger="c3cards"].is-in > li {
    opacity: 1;
    transform: none;
    transition: opacity .9s var(--sx-ease-out), transform 1.3s var(--sx-ease-out), border-color .4s ease, box-shadow .5s var(--sx-ease-out), translate .5s var(--sx-ease-out);
    transition-delay: calc(var(--i, 0) * 160ms + 200ms), calc(var(--i, 0) * 160ms + 200ms), 0s, 0s, 0s;
}

html.sx-motion [data-sx-stagger="c3cards"].is-in .sx-c3__icon path,
html.sx-motion [data-sx-stagger="c3cards"].is-in .sx-c3__icon circle {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.6s var(--sx-ease-io);
    transition-delay: calc(var(--i, 0) * 160ms + 700ms);
}

html.sx-motion [data-sx-stagger="c3cards"].is-in > li::after {
    transform: none;
    transition: transform 1s var(--sx-ease-io);
    transition-delay: calc(var(--i, 0) * 160ms + 500ms);
}

html.sx-motion [data-sx-stagger="c3line"] { border-top-color: transparent; }
html.sx-motion [data-sx-stagger="c3line"]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px;
    background: var(--sx-line);
    transform: scaleX(0);
    transform-origin: left;
}

html.sx-motion [data-sx-stagger="c3line"] > span { opacity: 0; transform: translate3d(0, 22px, 0); }

html.sx-motion [data-sx-stagger="c3line"].is-in::before { transform: none; transition: transform 1.4s var(--sx-ease-io); }

html.sx-motion [data-sx-stagger="c3line"].is-in > span {
    opacity: 1;
    transform: none;
    transition: opacity .9s var(--sx-ease-out), transform 1.1s var(--sx-ease-out);
    transition-delay: calc(var(--i, 0) * 140ms + 300ms);
}

/* blogs: the list slides in from the right, one row after another */
html.sx-motion [data-sx-stagger="blogs"] > li { opacity: 0; transform: translate3d(60px, 0, 0); }

html.sx-motion [data-sx-stagger="blogs"].is-in > li {
    opacity: 1;
    transform: none;
    transition: opacity .9s var(--sx-ease-out), transform 1.3s var(--sx-ease-out);
    transition-delay: calc(var(--i, 0) * 110ms + 200ms);
}

@keyframes sxPop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

@keyframes sxBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
    .sx-c3__ring,
    .sx-c3__orbit { animation: none; }
    .sx-hero__inner { opacity: 1; translate: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
    .sx-c3__body { grid-template-columns: minmax(0, 1fr); }
    .sx-c3__venn svg { max-width: 460px; }
    .sx-blogs__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 759px) {
    .sx-c3__card { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .sx-c3__icon { width: 56px; height: 56px; }
    .sx-c3__card:hover { translate: none; }
    .sx-blogs__list a { grid-template-columns: 104px minmax(0, 1fr); }
    .sx-blogs__list a:hover { translate: none; }
}