/* =========================================================================
   Long Beach Pride — Frames
   Reusable premium panels: a brushed-metal surface, a metallic ring that
   follows the rounded corners, a soft lifted shadow and a one-time sheen.
   Add the class to any block-level container:
     .lbp-frame-platinum   brushed platinum (the Presenting Sponsor panel)
     .lbp-frame-lilac      the same treatment in a light purple
   The sheen runs once when the element also has .in (scroll reveal).
   (c) HAUS XXIV, LLC · Licensed to Long Beach Pride
   ========================================================================= */

.lbp-frame-platinum, .lbp-frame-lilac {
	--fr-face: linear-gradient(125deg, #EEF0F3 0%, #D5D9DF 22%, #F7F8FA 42%, #C9CED6 62%, #E9ECEF 80%, #CDD2D9 100%);
	--fr-ring: linear-gradient(125deg, #FFFFFF 0%, #A9AFB8 30%, #F4F5F7 50%, #8D939D 75%, #E6E8EB 100%);
	--fr-tint: rgba(155, 27, 176, .10);
	--fr-drop: rgba(40, 44, 56, .55);
	position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-lg, 28px); color: var(--ink, #0C0C0E);
	background:
		radial-gradient(60% 80% at 12% 0%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 60%),
		radial-gradient(50% 70% at 100% 100%, var(--fr-tint) 0%, rgba(255, 255, 255, 0) 70%),
		var(--fr-face);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 50px 100px -60px var(--fr-drop), 0 0 0 1px rgba(12, 12, 14, .06);
}
.lbp-frame-lilac {
	--fr-face: linear-gradient(125deg, #F6F0FC 0%, #E4D6F4 22%, #FBF8FE 42%, #DCCAF0 62%, #F2EAFA 80%, #DFCFF1 100%);
	--fr-ring: linear-gradient(125deg, #FFFFFF 0%, #BFA8DC 30%, #F8F3FD 50%, #9E82C6 75%, #EEE5F8 100%);
	--fr-tint: rgba(214, 2, 112, .08);
	--fr-drop: rgba(90, 40, 140, .45);
}
.lbp-frame-platinum::before, .lbp-frame-lilac::before { content: ""; position: absolute; inset: 0; z-index: 2; padding: 2px; border-radius: inherit; background: var(--fr-ring); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.lbp-frame-platinum::after, .lbp-frame-lilac::after { content: ""; position: absolute; inset: -40% -20%; z-index: -1; background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%); transform: translateX(-60%); pointer-events: none; }
.lbp-frame-platinum.in::after, .lbp-frame-lilac.in::after { animation: lbp-frame-sheen 3.2s cubic-bezier(.2, .7, .1, 1) .4s both; }
@keyframes lbp-frame-sheen { from { transform: translateX(-60%); } to { transform: translateX(60%); } }

/* A frosted inner card that sits well on either frame */
.lbp-frame-inset { border-radius: calc(var(--r-lg, 28px) - 8px); background: rgba(255, 255, 255, .72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 24px 48px -36px var(--fr-drop, rgba(40, 44, 56, .5)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

@media (prefers-reduced-motion: reduce) {
	.lbp-frame-platinum.in::after, .lbp-frame-lilac.in::after { animation: none; }
}