/* v42 · 3D glass symbol — cert section (scroll = 360° spin) + glass stills as backgrounds */

/* ── Cert section: sticky stage, text | glass symbol | list ── */
.certw{text-align:left}
.c3-pin{position:relative;height:520vh;margin-top:clamp(24px,4vw,56px)}
.c3-stage{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(220px,.75fr);
 align-items:center;gap:clamp(20px,3vw,48px)}
.c3-vis{position:relative;width:min(118%,88vh);aspect-ratio:1;justify-self:center}
.c3-vis canvas,.c3-vis .c3-still{position:absolute;inset:0;width:100%;height:100%;display:block;
 -webkit-mask-image:radial-gradient(closest-side,#000 68%,transparent 100%);mask-image:radial-gradient(closest-side,#000 68%,transparent 100%)}
.c3-vis canvas{opacity:0;transition:opacity .8s ease}
.c3-vis .c3-still{object-fit:cover;transition:opacity .8s ease}
.c3-pin.is-3d .c3-vis canvas{opacity:1}
.c3-pin.is-3d .c3-vis .c3-still{opacity:0}

.c3-no{display:flex;align-items:baseline;gap:10px;margin:0 0 18px;font-family:var(--en)}
.c3-no b{font-size:clamp(64px,7vw,112px);font-weight:600;line-height:.9;letter-spacing:-.05em;color:#fd4533}
.c3-no span{font-size:18px;color:var(--tx3,rgba(255,255,255,.45));font-weight:500}
.c3-names{position:relative;min-height:190px}
.c3-item{position:absolute;inset:0 0 auto;opacity:0;transform:translateY(26px);filter:blur(6px);
 transition:opacity .22s ease,transform .3s ease,filter .22s ease;pointer-events:none}
.c3-item:not(.on){transform:translateY(-18px)}
.c3-item.on{opacity:1;transform:none;filter:none;transition:opacity .5s ease .18s,transform .75s cubic-bezier(.2,.7,.1,1) .18s,filter .5s ease .18s}
.c3-item small{display:block;font:600 12px/1 var(--en);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:16px}
.c3-item h4{font-size:clamp(30px,3.3vw,50px);font-weight:700;letter-spacing:-.045em;line-height:1.18;margin:0 0 14px;color:#fff}
.c3-item p{font-size:17px;line-height:1.6;color:var(--tx2,rgba(255,255,255,.7));margin:0}
.c3-bar{height:2px;background:rgba(255,255,255,.1);margin-top:34px;max-width:320px;overflow:hidden}
.c3-bar i{display:block;height:100%;background:#fd4533;transform:scaleX(0);transform-origin:left}

.c3-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.1)}
.c3-list button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:30px 1fr;align-items:center;gap:4px 10px;
 padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.42);font-size:15px;font-weight:500;letter-spacing:-.02em;
 position:relative;transition:color .3s,padding .35s}
.c3-list button small{font:600 11px/1 var(--en);color:rgba(255,255,255,.3);transition:color .3s}
.c3-list button em{display:none}
.c3-list button::before{content:'';position:absolute;left:-14px;top:50%;width:4px;height:4px;border-radius:50%;background:#fd4533;transform:translateY(-50%) scale(0);transition:transform .3s}
.c3-list button:hover,.c3-list button:focus-visible{color:rgba(255,255,255,.8)}
.c3-list button:focus-visible{outline:2px solid #fd4533;outline-offset:2px}
.c3-list button[aria-current=true]{color:#fff;padding-left:10px}
.c3-list button[aria-current=true] small{color:#fd4533}
.c3-list button[aria-current=true]::before{transform:translateY(-50%) scale(1)}
.certw .cert-note{text-align:left;margin-top:14px}

/* mobile · reduced motion: no pin, no spin — still image + full text list */
@media (max-width:820px),(prefers-reduced-motion:reduce){
 .c3-pin{height:auto}
 .c3-stage{position:static;height:auto;grid-template-columns:1fr;gap:20px}
 .c3-vis{width:min(100%,420px);order:-1}
 .c3-bar{display:none}
 .c3-names{min-height:150px}
 .c3-list button em{display:block;grid-column:2;font-style:normal;font-size:13px;color:rgba(255,255,255,.4)}
}

/* ── Glass stills as backgrounds ── */
