/* =====================================================================
   Little Jewels — glossy & motion layer
   Active when <body class="fx"> (Admin › Settings › Branding › Glossy effects)
   Loaded after site.css. Every rule is additive; removing this file restores the flat theme.
   ===================================================================== */

/* scroll progress bar */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200; background: linear-gradient(90deg, var(--accent), var(--secondary), var(--primary)); transition: width .15s linear; pointer-events: none; }
body:not(.fx) .scroll-progress { display: none; }

/* buttons: sheen sweep + glossy top edge */
.fx .btn { position: relative; overflow: hidden; isolation: isolate; }
.fx .btn::before { content: ""; position: absolute; top: -60%; bottom: -60%; width: 40%; left: -70%; background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.45) 50%, transparent 80%); transform: skewX(-20deg); transition: left .7s var(--ease); pointer-events: none; z-index: 1; }
.fx .btn:hover::before { left: 140%; }
.fx .btn > * { position: relative; z-index: 2; }
.fx .btn--primary, .fx .btn--secondary { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px color-mix(in srgb, var(--primary) 32%, transparent); }
.fx .btn--accent { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 24px color-mix(in srgb, var(--accent) 45%, transparent); }
.fx .btn--accent:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 14px 34px color-mix(in srgb, var(--accent) 55%, transparent); }
.fx .chip { box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.fx .chip--light, .fx .chip--ghost { box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }

/* cards: glossy surface, hover glow, gradient hairline */
.fx .card { position: relative; background: linear-gradient(180deg, #fff 0%, #FDFCFF 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--shadow-sm); }
.fx .card::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 3px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, var(--accent), var(--secondary), var(--primary)); transform: scaleX(0); transform-origin: center; transition: transform .45s var(--ease); z-index: 2; pointer-events: none; }
.fx .card:hover::before { transform: scaleX(1); }
.fx .card:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 22px 50px rgba(91,42,134,.14), 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent); }
.fx .program::before, .fx .post::before, .fx .album::before, .fx .notice-row::before { display: none; }
.fx .feature__icon, .fx .program__icon, .fx .stat__icon, .fx .info-row .ico-box, .fx .medium .ico-box { position: relative; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -8px 16px rgba(0,0,0,.04); }
.fx .program__icon { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px color-mix(in srgb, var(--pc, var(--primary)) 35%, transparent); }
.fx .feature__icon::after, .fx .program__icon::after, .fx .stat__icon::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,.55), transparent 55%); pointer-events: none; }
.fx .card:hover .feature__icon, .fx .card:hover .program__icon, .fx .stat:hover .stat__icon { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
.fx .stats__grid { background: linear-gradient(180deg, #fff, #FBFAFE); box-shadow: inset 0 1px 0 #fff, var(--shadow-lg); }
.fx .stat { transition: background .3s; }
.fx .stat:hover { background: var(--primary-soft); }

/* kicker line shimmer */
.fx .kicker::before, .fx .section-head--center .kicker::after { background: linear-gradient(90deg, var(--accent), var(--secondary), var(--accent)); background-size: 200% 100%; animation: fxShift 3.5s linear infinite; }
@keyframes fxShift { to { background-position: 200% 0; } }

/* hero: light orbs, badge shimmer, glass cards, entrance */
.fx .hero__orbs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fx .hero__orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; mix-blend-mode: screen; }
.fx .hero__orb--gold { width: 420px; height: 420px; background: var(--accent); right: 8%; top: -120px; animation: fxOrb 16s ease-in-out infinite; }
.fx .hero__orb--green { width: 340px; height: 340px; background: var(--secondary); left: 35%; bottom: -160px; opacity: .3; animation: fxOrb 20s ease-in-out infinite reverse; }
.fx .hero__orb--violet { width: 300px; height: 300px; background: #8A5CFF; left: -80px; top: 30%; opacity: .35; animation: fxOrb 24s ease-in-out infinite 2s; }
@keyframes fxOrb { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(30px,-26px) scale(1.08); } 66% { transform: translate(-24px,18px) scale(.95); } }
.fx .hero__badge { position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.fx .hero__badge::after { content: ""; position: absolute; top: 0; bottom: 0; width: 50%; left: -70%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); animation: fxSheen 4.5s ease-in-out infinite; }
@keyframes fxSheen { 0%, 60% { left: -70%; } 100% { left: 140%; } }
.fx .hero__card { position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 30px rgba(0,0,0,.18); }
.fx .hero__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%); transform: translateX(-100%); transition: transform .9s var(--ease); pointer-events: none; }
.fx .hero__card:hover::after { transform: translateX(100%); }
.fx .hero__card .ico-box { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 16px rgba(0,0,0,.25); }
.fx .hero__slide.is-active h1 { animation: fxRise .9s var(--ease) both; }
.fx .hero__slide.is-active .hero__sub { animation: fxRise .9s var(--ease) .12s both; }
.fx .hero__slide.is-active .hero__actions { animation: fxRise .9s var(--ease) .24s both; }
@keyframes fxRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.fx .hero__dots button.is-active { background: linear-gradient(90deg, #FFE08A, var(--accent)); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }
.fx .hero__bg { will-change: transform; top: -22%; } /* extra headroom so parallax never shows a bare strip */
.fx .page-hero__img { will-change: transform; animation: fxKenBurns 22s ease-in-out infinite alternate; }
@keyframes fxKenBurns { from { transform: scale(1); } to { transform: scale(1.08); } }

/* header: glass hairline when stuck, logo glow */
.fx .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), var(--secondary), var(--primary), transparent); background-size: 200% 100%; opacity: 0; transition: opacity .4s; animation: fxShift 6s linear infinite; pointer-events: none; }
.fx .site-header.is-stuck::after { opacity: 1; }
.fx .brand__logo { filter: drop-shadow(0 6px 14px rgba(91,42,134,.28)); }
.fx .brand:hover .brand__logo { filter: drop-shadow(0 10px 22px rgba(91,42,134,.4)); transform: scale(1.06) rotate(-4deg); }
.fx .lang-switch:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent); }

/* CTA band: slow gradient drift, rotating glossy ring, tiles */
.fx .cta::after, .fx .cta--photo::after { background-size: 200% 200%; animation: fxDrift 14s ease-in-out infinite alternate; }
@keyframes fxDrift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.fx .cta__ring { border-color: rgba(255,255,255,.08); border-style: dashed; animation: fxSpin 60s linear infinite; }
@keyframes fxSpin { to { transform: rotate(360deg); } }
.fx .cta__aside .tile { box-shadow: inset 0 1px 0 rgba(255,255,255,.22); transition: transform .3s var(--ease), background .3s; }
.fx .cta__aside .tile:hover { transform: translateX(6px); background: rgba(255,255,255,.16); }

/* about / principal */
.fx .about__frame { box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.3); }
.fx .about__frame::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.22), transparent 45%); z-index: 1; pointer-events: none; }
.fx .about__badge { animation: fxBob 6s ease-in-out infinite; box-shadow: inset 0 1px 0 #fff, var(--shadow-lg); }
@keyframes fxBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.fx .about__deco { animation: fxOrb 18s ease-in-out infinite; }
.fx .principal__photo { box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 20px 50px rgba(91,42,134,.18); }
.fx .principal__quote { animation: fxBob 7s ease-in-out infinite; }
.fx .mv__item { transition: transform .3s var(--ease), box-shadow .3s; }
.fx .mv__item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* gallery & posts */
.fx .g-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-120%); transition: transform .8s var(--ease); pointer-events: none; }
.fx .g-item:hover::after { transform: translateX(120%); }
.fx .post__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(27,21,48,.25)); pointer-events: none; }

/* notices & links */
.fx .date-badge { box-shadow: inset 0 1px 0 rgba(255,255,255,.7); transition: transform .3s var(--ease); }
.fx .notice-item:hover .date-badge, .fx .notice-row:hover .date-badge { transform: scale(1.06) rotate(-3deg); }
.fx .notice-board__head { position: relative; overflow: hidden; }
.fx .notice-board__head::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.18), transparent 55%); pointer-events: none; }
.fx .link-arrow .ico { animation: fxNudge 2.2s ease-in-out infinite; }
@keyframes fxNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
.fx .link-arrow:hover .ico { animation: none; transform: translateX(5px); }

/* floating controls */
.fx .float-wa { box-shadow: 0 12px 30px rgba(37,211,102,.4), inset 0 1px 0 rgba(255,255,255,.35); }
.fx .float-wa::before { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 2px solid rgba(37,211,102,.6); animation: fxRing 2.4s ease-out infinite; pointer-events: none; }
@keyframes fxRing { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.fx .to-top { box-shadow: inset 0 1px 0 #fff, var(--shadow); }

/* page hero entrance, footer glow */
.fx .page-hero h1, .fx .page-hero p, .fx .crumbs { animation: fxRise .8s var(--ease) both; }
.fx .page-hero p { animation-delay: .1s; }
.fx .footer__glow { animation: fxGlow 9s ease-in-out infinite alternate; }
@keyframes fxGlow { from { opacity: .35; transform: scale(1); } to { opacity: .6; transform: scale(1.15); } }
.fx .footer__social a:hover { box-shadow: 0 8px 20px rgba(245,184,46,.35); }

/* forms */
.fx .field input, .fx .field select, .fx .field textarea { box-shadow: inset 0 1px 2px rgba(27,21,48,.04); }
.fx .form-card { box-shadow: inset 0 1px 0 #fff, var(--shadow); }
.fx .faq__item[open] summary .ico { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent); }

/* reduced motion & small screens */
@media (prefers-reduced-motion: reduce) {
  .fx .hero__slide.is-active h1, .fx .hero__slide.is-active .hero__sub, .fx .hero__slide.is-active .hero__actions, .fx .page-hero h1, .fx .page-hero p, .fx .crumbs { animation: none; opacity: 1; transform: none; }
  .fx .hero__badge::after, .fx .float-wa::before { display: none; }
}
@media (max-width: 640px) {
  .fx .hero__orb--gold { width: 260px; height: 260px; }
  .fx .hero__orb--violet, .fx .hero__orb--green { display: none; }
}