.class-main-container{--secondary-bg:var(--surface-0);--media-highlight:var(--brand-1);--media-border:var(--border);--media-radius:var(--r-xl,18px);--media-shadow:var(--shadow-md);width:93%;max-width:1240px;margin:2rem auto 2.6rem;padding:2.4rem 1.2rem;background:var(--surface-0);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-md)}@media (max-width:700px){.class-main-container{padding:1.1rem}}.class-card{position:relative;background:var(--secondary-bg);border-radius:var(--media-radius);box-shadow:var(--media-shadow);border:1.2px solid var(--media-border);display:flex;flex-direction:column;align-items:center;padding:2.7rem 2rem 2.6rem;margin-bottom:2.8rem;animation:cardPopIn 0.6s cubic-bezier(.28,1.25,.51,1.02);overflow:visible;z-index:1}@keyframes cardPopIn{0%{opacity:0;transform:scale(.95) translateY(30px)}65%{opacity:1;transform:scale(1.02) translateY(-8px)}100%{opacity:1;transform:scale(1) translateY(0)}}@media (max-width:700px){.class-card{padding:1.1rem .2rem 1rem}}.class-card-image{display:block;width:100%;max-width:500px;aspect-ratio:1/1;border-radius:20px;margin-bottom:1.5rem;box-shadow:0 8px 32px 0 rgb(162 7 7 / .13),0 2px 22px rgb(40 40 40 / .07),0 0 0 1.5px rgba(146,166,214,.26) inset;background:linear-gradient(120deg,var(--surface-1) 80%,var(--surface-2) 100%);object-fit:contain;border:2.5px solid var(--border);transition:box-shadow 0.23s cubic-bezier(.77,0,.19,1),transform 0.29s cubic-bezier(.34,1.56,.64,1),border-color 0.19s;animation:imgZoom 1.15s cubic-bezier(.22,1.12,.31,.89);position:relative;z-index:2;cursor:pointer;will-change:transform,box-shadow}@keyframes imgZoom{0%{transform:scale(.87);opacity:.1}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}.class-card-image:hover,.class-card-image:focus{box-shadow:0 12px 44px 0 rgb(162 7 7 / .18),0 4px 26px rgb(40 40 40 / .1),0 0 0 3.5px rgba(245,194,75,.6) inset;border-color:#f5c24b;transform:scale(1.03) rotate(-2deg)}@media (max-width:700px){.class-card-image{max-width:100vw;width:100vw;border-radius:10px;margin-bottom:1.1rem;aspect-ratio:1/1;min-width:0;object-fit:contain}}.class-speech-bubble{position:absolute;left:48%;top:7%;transform:translate(-50%,-10%);background:rgba(14,22,38,.92);color:var(--brand-2);font-weight:700;border-radius:32px 44px 36px 33px / 44px 38px 33px 34px;box-shadow:0 6px 32px 0 rgb(40 40 60 / .12),0 2px 16px rgb(170 35 35 / .07);font-size:1.14rem;text-align:center;max-width:62%;min-width:210px;padding:1.12em 2.1em 1.15em 2.1em;z-index:10;border:2.5px solid var(--border);opacity:0;pointer-events:none;transition:opacity 0.66s cubic-bezier(.22,1,.36,1),background 0.22s;backdrop-filter:blur(2px)}.class-card-image:hover~.class-speech-bubble,.class-speech-bubble:hover{opacity:1;pointer-events:auto;background:rgba(14,22,38,.96);box-shadow:0 10px 38px rgb(170 35 35 / .14),0 2px 16px rgb(60 0 0 / .09);border-color:rgba(146,166,214,.26)}.class-speech-bubble::after{content:"";position:absolute;left:235px;top:99%;width:48px;height:28px;background:url("data:image/svg+xml;utf8,<svg width='48' height='28' xmlns='http://www.w3.org/2000/svg'><ellipse cx='14' cy='20' rx='13' ry='9' fill='rgba(14,22,38,0.94)' stroke='rgba(146,166,214,0.26)' stroke-width='2.5'/><ellipse cx='34' cy='10' rx='8' ry='6' fill='rgba(14,22,38,0.94)' stroke='rgba(146,166,214,0.26)' stroke-width='2.5'/></svg>") no-repeat center center;background-size:contain;filter:drop-shadow(0 2px 2px rgb(40 40 60 / .07));pointer-events:none;opacity:.93;z-index:2}@media (max-width:700px){.class-speech-bubble{position:static;left:auto;top:auto;transform:none;margin:1.1rem auto 0 auto;max-width:94vw;min-width:0;opacity:1;pointer-events:auto;transition:none;background:rgba(14,22,38,.98);border-radius:32px;box-shadow:0 3px 16px rgb(170 35 35 / .09);border-color:var(--border);font-size:1rem;backdrop-filter:none}.class-speech-bubble::after{display:none}}.class-card h1{font-size:clamp(1.8rem,2.2vw + 1.1rem,2.5rem);margin-bottom:.7rem;font-weight:900;color:var(--accent);letter-spacing:.01em;text-align:center;animation:titleFadeIn 1.1s cubic-bezier(.12,1.15,.31,.87)}@keyframes titleFadeIn{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:translateY(0)}}.class-card-desc{color:var(--text);font-size:1.13rem;margin-bottom:1.1rem;text-align:center;line-height:1.6;max-width:650px;opacity:.94}.matchups{display:flex;justify-content:center;gap:2.2rem;margin:1.1rem 0 1.8rem;flex-wrap:wrap}.matchup{font-size:1.06rem;background:var(--surface-2);border-radius:8px;padding:.67em 1.18em;color:var(--text);font-weight:500;border:1px solid var(--border);min-width:160px;box-shadow:0 1px 5px rgb(100 100 100 / .03);transition:box-shadow 0.14s,border-color 0.13s}.matchup strong{color:var(--media-highlight);margin-right:.2em}.matchup.strong strong{color:var(--success)}.matchup.weak strong{color:var(--danger)}.class-longdesc{margin-top:1.7rem;color:var(--text);font-size:1.13rem;background:var(--surface-1);padding:1.5rem 1.2rem;border-radius:11px;box-shadow:0 2px 8px rgb(0 0 0 / .03);text-align:center;line-height:1.77;opacity:.96;animation:fadeIn 1.2s cubic-bezier(.16,.92,.44,1)}@keyframes fadeIn{from{opacity:0}to{opacity:.96}}.class-arrow{position:absolute;top:48%;transform:translateY(-50%);z-index:20;width:48px;height:48px;background:var(--surface-2);border:2.5px solid var(--brand-1);border-radius:50%;color:var(--brand-2);font-size:2.2rem;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 2px 8px rgb(162 7 7 / .06);transition:background 0.14s,border-color 0.16s,color 0.17s,transform 0.13s;cursor:pointer;opacity:.97;font-weight:800;outline:none;background-clip:padding-box;animation:arrowPulse 2.5s infinite cubic-bezier(.77,0,.19,1)}.class-arrow.prev{left:8px}.class-arrow.next{right:8px}.class-arrow span{display:block;line-height:1}.class-arrow:hover,.class-arrow:focus{background:var(--brand-1);color:#fff;border-color:var(--brand-1);transform:translateY(-50%) scale(1.13);box-shadow:0 4px 18px rgb(162 7 7 / .16);animation:none}@keyframes arrowPulse{0%,100%{box-shadow:0 0 0 0 #d61f2b33}70%{box-shadow:0 0 0 8px #d61f2b08}}@media (max-width:1080px){.class-arrow.prev{left:-38px}.class-arrow.next{right:-38px}}@media (max-width:700px){.class-card h1{font-size:1.5rem}.class-arrow{width:36px;height:36px;font-size:1.3rem}.class-arrow.prev{left:5px;top:18%}.class-arrow.next{right:5px;top:18%}}@media (max-width:400px){.class-card h1{font-size:1.5rem}.class-arrow{width:36px;height:36px;font-size:1.3rem}.class-arrow.prev{left:5px;top:18%}.class-arrow.next{right:5px;top:18%}}.class-button-bar{margin-top:2.2rem;margin-bottom:2.2rem;display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap}.class-link-btn{background:var(--gold);color:#383838;padding:.77em 2.1em;border-radius:8px;font-weight:700;text-decoration:none;box-shadow:0 2px 8px rgb(0 0 0 / .09);transition:background 0.16s,color 0.16s,transform 0.13s;min-width:180px;text-align:center;border:none;display:inline-block;font-size:1.12rem;letter-spacing:.02em}.class-link-btn:hover,.class-link-btn:focus{background:#f5c24b;color:#000;transform:scale(1.06) translateY(-1px)}.class-related-section{margin-top:2.5rem;padding:0;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}.class-related-section h2{font-size:clamp(1.2rem,1.3vw + .9rem,1.55rem);color:var(--media-highlight);margin-bottom:.6rem;text-align:center;font-weight:800;letter-spacing:.01em;text-shadow:0 2px 12px rgb(100 10 10 / .03);opacity:.97}.class-related-section p{color:var(--text-muted);text-align:center;margin-bottom:1.2rem;font-size:1.01rem}.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:1.2rem;margin-bottom:2.5rem}.related-item{background:var(--surface-0);border-radius:13px;border:1.2px solid var(--border);box-shadow:0 2px 10px rgb(0 0 0 / .05);text-align:center;color:var(--brand-2);text-decoration:none;transition:box-shadow 0.14s,border-color 0.14s,transform 0.16s;padding:1.2rem .5rem .7rem .5rem;display:flex;flex-direction:column;align-items:center;animation:relatedIn 0.7s cubic-bezier(.12,1.15,.31,.97)}@keyframes relatedIn{from{opacity:0;transform:scale(.91) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.related-item:hover,.related-item:focus{border-color:var(--brand-1);box-shadow:0 4px 18px rgb(162 7 7 / .08),0 2px 10px rgb(40 40 40 / .07);transform:translateY(-4px) scale(1.045)}.related-item img{max-width:112px;max-height:120px;min-height:70px;border-radius:8px;box-shadow:0 1px 8px rgb(100 100 100 / .06);background:var(--surface-1);margin-bottom:.8em;object-fit:contain;transition:transform 0.16s}.related-item span{font-size:1.09rem;font-weight:800;color:var(--brand-2);letter-spacing:.01em;margin-top:.25em}

/* Professional + consistent: drop the looping shimmer and entrance/pulse animations
   (hover effects are kept). Card now reads like the rest of the site. */
.class-card::before{display:none}
.class-card,.class-card-image,.class-card h1,.class-arrow,.related-item{animation:none}
/* ===== classes_list.php archive grid (2026-07-10): these BEM classes had no styles ===== */
.classes-archive .classes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;width:93%;max-width:1240px;margin:1.6rem auto 2.8rem;padding:0;background:none;border:0;box-shadow:none}
.classes-archive .class-card{display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;background:var(--surface-0,#0e1626);border:1px solid var(--border,rgba(146,166,214,.16));border-radius:var(--r-xl,18px);box-shadow:var(--shadow-md,0 18px 48px rgba(3,7,18,.5));transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s cubic-bezier(.2,.8,.2,1)}
.classes-archive .class-card:hover{transform:translateY(-4px);box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 40px rgba(58,107,255,.1)}
.classes-archive .class-card__media{display:block;background:radial-gradient(circle at 50% 30%,rgba(58,107,255,.16),rgba(7,10,18,.6));border-bottom:1px solid var(--border,rgba(146,166,214,.16))}
.classes-archive .class-card__media img{display:block;width:100%;aspect-ratio:1/1;object-fit:contain;padding:1rem}
.classes-archive .class-card__body{display:flex;flex-direction:column;gap:.5rem;flex:1;padding:1.1rem 1.2rem 1.3rem}
.classes-archive .class-card__body h2{margin:0;font-size:1.2rem;letter-spacing:.04em}
.classes-archive .class-card__body h2 a{color:var(--text-strong,#eaf0ff);text-decoration:none}
.classes-archive .class-card__body h2 a:hover{color:var(--gold,#f5c24b)}
.classes-archive .class-card__body p{margin:0;color:var(--text-muted,#8a94ad);font-size:.96rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.classes-archive .class-card__link{margin-top:auto;align-self:flex-start;padding:.45rem 1.05rem;border-radius:999px;border:1px solid rgba(245,194,75,.32);background:rgba(245,194,75,.06);color:var(--gold,#f5c24b);font-weight:800;font-size:.88rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;transition:background .14s,border-color .14s,transform .14s}
.classes-archive .class-card__link:hover{background:rgba(245,194,75,.12);border-color:rgba(245,194,75,.55);transform:translateY(-1px)}