/* Backgrounds & surfaces demos. Every rule is scoped under a .sf-* root. */

.sf-tag {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  font: 600 11px/1 var(--f-mono); padding: 5px 8px; border-radius: 999px;
  background: rgb(255 255 255 / 0.78); color: #1f2440;
}

/* mesh gradient */
@property --sf-ax { syntax: '<percentage>'; inherits: true; initial-value: 12%; }
@property --sf-ay { syntax: '<percentage>'; inherits: true; initial-value: 18%; }
@property --sf-bx { syntax: '<percentage>'; inherits: true; initial-value: 86%; }
@property --sf-by { syntax: '<percentage>'; inherits: true; initial-value: 14%; }
@property --sf-cx { syntax: '<percentage>'; inherits: true; initial-value: 78%; }
@property --sf-cy { syntax: '<percentage>'; inherits: true; initial-value: 86%; }
@property --sf-dx { syntax: '<percentage>'; inherits: true; initial-value: 18%; }
@property --sf-dy { syntax: '<percentage>'; inherits: true; initial-value: 82%; }
.sf-mesh {
  position: absolute; inset: 0; background-color: #ffe1ee;
  background-image:
    radial-gradient(at var(--sf-ax) var(--sf-ay), #ff4f9a 0, transparent 55%),
    radial-gradient(at var(--sf-bx) var(--sf-by), #7b5cff 0, transparent 55%),
    radial-gradient(at var(--sf-cx) var(--sf-cy), #19c3d6 0, transparent 52%),
    radial-gradient(at var(--sf-dx) var(--sf-dy), #ffb020 0, transparent 52%);
  animation: sf-mesh 12s ease-in-out infinite alternate;
}
.sf-mesh i { position: absolute; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; translate: -50% -50%; box-shadow: 0 1px 4px rgb(0 0 0 / 0.3); }
.sf-mesh i:nth-child(1) { left: var(--sf-ax); top: var(--sf-ay); background: #ff4f9a; }
.sf-mesh i:nth-child(2) { left: var(--sf-bx); top: var(--sf-by); background: #7b5cff; }
.sf-mesh i:nth-child(3) { left: var(--sf-cx); top: var(--sf-cy); background: #19c3d6; }
.sf-mesh i:nth-child(4) { left: var(--sf-dx); top: var(--sf-dy); background: #ffb020; }
@keyframes sf-mesh {
  to { --sf-ax: 34%; --sf-ay: 40%; --sf-bx: 64%; --sf-by: 30%; --sf-cx: 88%; --sf-cy: 60%; --sf-dx: 40%; --sf-dy: 70%; }
}

/* aurora */
.sf-aur { position: absolute; inset: 0; overflow: hidden; background: #070a1a; }
.sf-aur-glow {
  position: absolute; inset: -30%;
  background: repeating-linear-gradient(100deg, #2f7bff 10%, #a5b4fc 15%, #19c3d6 20%, #c4b5fd 25%, #ff4f9a 30%);
  background-size: 300% 200%; filter: blur(28px) saturate(1.25); opacity: 0.75;
  -webkit-mask: radial-gradient(ellipse at 85% 10%, #000 15%, transparent 65%); mask: radial-gradient(ellipse at 85% 10%, #000 15%, transparent 65%);
  animation: sf-aur 18s linear infinite;
}
@keyframes sf-aur { from { background-position: 50% 50%; } to { background-position: 350% 50%; } }
.sf-aur-copy { position: absolute; left: 8%; bottom: 14%; display: grid; justify-items: start; gap: 12px; color: #fff; }
.sf-aur-copy p { margin: 0; font-size: clamp(20px, 6.6cqi, 30px); font-weight: 800; font-stretch: 112%; letter-spacing: -0.02em; line-height: 1.05; }
.sf-aur-copy span { font-size: 12.5px; font-weight: 650; padding: 7px 12px; border-radius: 8px; background: #fff; color: #070a1a; }

/* grain */
.sf-grain { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; background: linear-gradient(115deg, #2b1a6b, #7b5cff 45%, #ff8fb8 80%, #ffd6a0); }
.sf-grain-half { position: relative; overflow: hidden; }
.sf-grain-on { border-left: 1px solid rgb(255 255 255 / 0.5); }
.sf-grain-on::after {
  content: ""; position: absolute; inset: -60%; pointer-events: none; opacity: 0.55; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: sf-grain 0.9s steps(5) infinite;
}
.sf-grain .sf-tag { right: auto; left: 50%; translate: -50% 0; bottom: 12px; white-space: nowrap; }
@keyframes sf-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-8%, 4%); } 40% { transform: translate(5%, -6%); } 60% { transform: translate(-3%, 9%); } 80% { transform: translate(9%, 2%); } 100% { transform: translate(0, 0); } }

/* dot grid */
.sf-dots { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.sf-dots-p { position: relative; display: grid; place-items: center; }
.sf-dots-p + .sf-dots-p { border-left: 1px solid var(--stage-line); }
.sf-dots-p::before { content: ""; position: absolute; inset: 0; -webkit-mask: radial-gradient(ellipse at center, #000 30%, transparent 72%); mask: radial-gradient(ellipse at center, #000 30%, transparent 72%); }
.sf-dots-dot::before { background-image: radial-gradient(circle, color-mix(in srgb, var(--stage-ink) 45%, transparent) 1.1px, transparent 1.6px); background-size: 16px 16px; background-position: 8px 8px; }
.sf-dots-line::before { background-image: linear-gradient(to right, color-mix(in srgb, var(--stage-ink) 22%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--stage-ink) 22%, transparent) 1px, transparent 1px); background-size: 22px 22px; background-position: center; }
.sf-dots-p span { position: relative; font-size: 12.5px; font-weight: 650; padding: 7px 12px; border-radius: 999px; background: var(--stage-card); border: 1px solid var(--stage-line); }

/* retro grid */
.sf-rg { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(#0b0820 0%, #1b1446 46%, #2a1050 46.5%, #0b0820 100%); }
.sf-rg-h { position: absolute; left: 0; right: 0; top: 17%; margin: 0; text-align: center; color: #fff; font-size: clamp(20px, 7cqi, 32px); font-weight: 850; font-stretch: 118%; letter-spacing: -0.02em; }
.sf-rg-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 54%; overflow: hidden;
  perspective: 300px; perspective-origin: 50% 0%;
  -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 50%); mask: linear-gradient(to bottom, transparent 0%, #000 50%);
}
.sf-rg-plane {
  position: absolute; left: -100%; right: -100%; top: 0; height: 160%;
  transform-origin: 50% 0; transform: rotateX(72deg);
  background-image: linear-gradient(to right, rgb(255 79 154 / 0.85) 1px, transparent 1px), linear-gradient(to bottom, rgb(255 79 154 / 0.85) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: sf-rg 1.2s linear infinite;
}
@keyframes sf-rg { from { background-position: 0 0; } to { background-position: 0 40px; } }

/* animated border */
@property --sf-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.sf-ab { display: grid; justify-items: center; gap: 16px; }
.sf-ab-card {
  width: min(64cqi, 240px); padding: 14px 18px; border-radius: 16px; border: 2px solid transparent;
  background:
    linear-gradient(#141729, #141729) padding-box,
    conic-gradient(from var(--sf-angle), transparent 0 70%, #7b5cff 82%, #19c3d6 92%, transparent 100%) border-box,
    linear-gradient(#2c3150, #2c3150) border-box;
  animation: sf-spin 4s linear infinite;
}
.sf-ab-card p { margin: 0; }
.sf-ab-k { font: 600 11px var(--f-mono); color: #a99bff; }
.sf-ab-p { font-size: 28px; font-weight: 850; letter-spacing: -0.02em; }
.sf-ab-p small { font-size: 13px; font-weight: 500; opacity: 0.6; }
.sf-ab-s { font-size: 12.5px; opacity: 0.7; }
.sf-ab-btn {
  font-size: 12.5px; font-weight: 700; padding: 8px 16px; border-radius: 999px; border: 1.5px solid transparent; color: #fff;
  background:
    linear-gradient(#0d0f1f, #0d0f1f) padding-box,
    conic-gradient(from var(--sf-angle), #ff4f9a, #ffb020, #19c3d6, #7b5cff, #ff4f9a) border-box;
  animation: sf-spin 2.5s linear infinite reverse;
}
@keyframes sf-spin { to { --sf-angle: 360deg; } }

/* gradient border */
.sf-gb { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; padding: 0 16px; }
.sf-gb-col { display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; }
.sf-gb-box { width: 100%; max-width: 160px; display: grid; gap: 2px; padding: 16px; border-radius: 16px; }
.sf-gb-box b { font-size: 16px; }
.sf-gb-box span { font-size: 12px; opacity: 0.7; }
.sf-gb-img { border: 3px solid; border-image: linear-gradient(135deg, #ff4f9a, #7b5cff, #19c3d6) 1; background: var(--stage-card); }
.sf-gb-clip { border: 3px solid transparent; background: linear-gradient(var(--stage-card), var(--stage-card)) padding-box, linear-gradient(135deg, #ff4f9a, #7b5cff, #19c3d6) border-box; }
.sf-gb-col code { font: 600 10.5px/1.3 var(--f-mono); margin-top: 6px; }
.sf-gb-note { font-size: 11.5px; opacity: 0.7; }

/* layered shadow */
.sf-ls { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; width: 100%; padding: 0 22px; }
.sf-ls-col { display: grid; justify-items: center; gap: 14px; }
.sf-ls-col > span { font: 600 11.5px var(--f-mono); color: #4a5070; }
.sf-ls-card {
  width: 100%; max-width: 150px; aspect-ratio: 1.25; border-radius: 12px; background: #fff; padding: 14px;
  display: grid; align-content: start; gap: 7px; animation: 3.2s ease-in-out infinite alternate;
}
.sf-ls-card b { width: 30px; height: 30px; border-radius: 8px; background: #e8e4ff; }
.sf-ls-card i { height: 7px; border-radius: 4px; background: #e6e8f0; }
.sf-ls-card i:last-child { width: 60%; }
.sf-ls-one { animation-name: sf-ls-one; box-shadow: 0 6px 16px rgb(0 0 0 / 0.28); }
.sf-ls-five {
  animation-name: sf-ls-five;
  box-shadow: 0 1px 1px hsl(232 40% 30% / 0.08), 0 2px 2px hsl(232 40% 30% / 0.08), 0 4px 4px hsl(232 40% 30% / 0.08), 0 8px 8px hsl(232 40% 30% / 0.08), 0 16px 16px hsl(232 40% 30% / 0.08);
}
@keyframes sf-ls-one { to { translate: 0 -6px; box-shadow: 0 14px 26px rgb(0 0 0 / 0.28); } }
@keyframes sf-ls-five {
  to {
    translate: 0 -6px;
    box-shadow: 0 1px 1px hsl(232 40% 30% / 0.07), 0 2px 2px hsl(232 40% 30% / 0.07), 0 4px 4px hsl(232 40% 30% / 0.07), 0 8px 8px hsl(232 40% 30% / 0.07), 0 16px 16px hsl(232 40% 30% / 0.07), 0 32px 32px hsl(232 40% 30% / 0.07);
  }
}

/* inner highlight */
.sf-ih { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; padding: 0 16px; }
.sf-ih-col { display: grid; justify-items: center; gap: 10px; min-width: 0; }
.sf-ih-card {
  width: 100%; max-width: 170px; display: grid; justify-items: start; gap: 3px; padding: 14px; border-radius: 12px;
  background: #1a1d2e; color: #e9ebf7;
}
.sf-ih-card b { font-size: 13.5px; }
.sf-ih-card span { font-size: 11.5px; color: #8b91ad; }
.sf-ih-card em { margin-top: 10px; font-style: normal; font-size: 12px; font-weight: 650; padding: 6px 12px; border-radius: 8px; background: #2a2e44; }
.sf-ih-card.is-hl {
  background: linear-gradient(#232740, #1a1d2e);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 0 0 1px rgb(255 255 255 / 0.07), 0 1px 2px rgb(0 0 0 / 0.5), 0 8px 20px rgb(0 0 0 / 0.35);
}
.sf-ih-card.is-hl em { background: linear-gradient(#3b4062, #2c3049); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 1px 2px rgb(0 0 0 / 0.5); }
.sf-ih-lab { font: 600 11px var(--f-mono); color: #a6acc8; }

/* duotone */
@property --sf-duo-l { syntax: '<color>'; inherits: true; initial-value: #ff4f9a; }
@property --sf-duo-d { syntax: '<color>'; inherits: true; initial-value: #2b1a6b; }
.sf-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; padding: 0 16px; }
.sf-duo figure { margin: 0; display: grid; gap: 6px; min-width: 0; }
.sf-duo figcaption { font: 600 11px var(--f-mono); text-align: center; opacity: 0.75; }
.sf-duo-frame { position: relative; aspect-ratio: 1.1; overflow: hidden; border-radius: 10px; isolation: isolate; }
.sf-duo-art { position: absolute; inset: 0; background: linear-gradient(#5fb2ff, #ffd0a0 70%); }
.sf-duo-sun { position: absolute; left: 60%; top: 16%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #fff4b8; }
.sf-duo-b { position: absolute; bottom: 18%; background: #34405e; }
.sf-duo-b::after { content: ""; position: absolute; inset: 10% 18%; background: repeating-linear-gradient(#ffd76b 0 3px, transparent 3px 8px); opacity: 0.9; }
.sf-duo-b1 { left: 4%; width: 18%; height: 46%; }
.sf-duo-b2 { left: 24%; width: 14%; height: 62%; background: #232b45; }
.sf-duo-b3 { left: 42%; width: 22%; height: 38%; background: #4a5578; }
.sf-duo-b4 { left: 70%; width: 18%; height: 54%; background: #1c2238; }
.sf-duo-water { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(#2a4f80, #12284a); }
.sf-duo-tone { background: var(--sf-duo-l); animation: sf-duo 9s ease-in-out infinite; }
.sf-duo-tone .sf-duo-art { filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; }
.sf-duo-tone::after { content: ""; position: absolute; inset: 0; background: var(--sf-duo-d); mix-blend-mode: lighten; }
@keyframes sf-duo {
  0%, 26% { --sf-duo-l: #ff4f9a; --sf-duo-d: #2b1a6b; }
  33%, 59% { --sf-duo-l: #c6ff6b; --sf-duo-d: #0b4d3a; }
  66%, 92% { --sf-duo-l: #ffc23d; --sf-duo-d: #4a1030; }
  100% { --sf-duo-l: #ff4f9a; --sf-duo-d: #2b1a6b; }
}

/* blend mode */
.sf-bm { position: absolute; inset: 0; overflow: hidden; isolation: isolate; cursor: none; touch-action: none; }
.sf-bm-bg { position: absolute; inset: 0; background: #f4f5fa; }
.sf-bm-bg i:nth-child(1) { position: absolute; inset: 0 0 0 50%; background: #0d0f1f; }
.sf-bm-bg i:nth-child(2) { position: absolute; left: 0; right: 0; top: 64%; height: 16%; background: var(--d-amber); }
.sf-bm-txt {
  position: absolute; left: 0; right: 0; top: 30%; margin: 0; text-align: center; color: #fff; mix-blend-mode: difference;
  font-size: clamp(30px, 13cqi, 58px); font-weight: 900; font-stretch: 120%; letter-spacing: -0.03em;
  animation: sf-bm 6s ease-in-out infinite alternate;
}
@keyframes sf-bm { from { transform: translateX(-16%); } to { transform: translateX(16%); } }
.sf-bm-dot { position: absolute; left: 0; top: 0; width: 64px; height: 64px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; transform: translate(50%, 50%); }

/* squircle */
.sf-sq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; padding: 0 16px; align-items: start; }
.sf-sq-defs { position: absolute; }
.sf-sq figure { margin: 0; display: grid; justify-items: center; gap: 8px; min-width: 0; }
.sf-sq figcaption { font: 600 10.5px var(--f-mono); opacity: 0.75; text-align: center; }
.sf-sq-css, .sf-sq-svg { width: 100%; max-width: 104px; aspect-ratio: 1; display: block; }
.sf-sq-css { border-radius: 22%; background: linear-gradient(135deg, #7b5cff, #ff4f9a); display: grid; place-items: center; }
.sf-sq-css i { width: 34%; aspect-ratio: 1; border-radius: 50%; background: #fff; }
.sf-sq-cmp { overflow: visible; }
.sf-sq-r { fill: none; stroke: var(--d-cyan); stroke-width: 2; stroke-dasharray: 4 3; }
.sf-sq-s { fill: none; stroke: var(--d-pink); stroke-width: 2.2; }

/* particles */
.sf-pt { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 120%, #26214f, #0a0b1a 70%); }
.sf-pt-stars {
  position: absolute; inset: 0;
  background-image: radial-gradient(1px 1px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 31% 64%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 52% 18%, #fff, transparent), radial-gradient(1px 1px at 68% 44%, #fff, transparent),
    radial-gradient(1px 1px at 84% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 90% 70%, #fff, transparent),
    radial-gradient(1px 1px at 22% 86%, #fff, transparent), radial-gradient(1px 1px at 44% 40%, #fff, transparent);
  animation: sf-twinkle 3.4s ease-in-out infinite alternate;
}
.sf-pt-stars2 { transform: translate(7%, 11%) scaleX(-1); animation-delay: -1.7s; }
@keyframes sf-twinkle { from { opacity: 0.35; } to { opacity: 1; } }
.sf-pt-m {
  position: absolute; top: -6%; left: var(--x); width: 2px; height: 2px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 0 6px #fff; transform: rotate(215deg); opacity: 0;
  animation: sf-meteor var(--t) linear var(--d) infinite;
}
.sf-pt-m::before { content: ""; position: absolute; top: 50%; left: 0; width: 70px; height: 1px; transform: translateY(-50%); background: linear-gradient(90deg, #c8d0ff, transparent); }
@keyframes sf-meteor { 0% { transform: rotate(215deg) translateX(0); opacity: 1; } 70% { opacity: 1; } 100% { transform: rotate(215deg) translateX(-520px); opacity: 0; } }
.sf-pt-copy { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px; color: #fff; }
.sf-pt-copy p { margin: 0; font-size: clamp(22px, 8cqi, 36px); font-weight: 850; font-stretch: 118%; letter-spacing: -0.02em; }
.sf-pt-copy span { font-size: 13px; opacity: 0.7; }

/* halftone */
@property --sf-htx { syntax: '<percentage>'; inherits: false; initial-value: 30%; }
.sf-ht { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: #fff; }
.sf-ht-img {
  position: absolute; inset: 0; background-color: #fff;
  background-image:
    radial-gradient(closest-side, #888, #fff),
    radial-gradient(circle at var(--sf-htx) 42%, #fff 0, #e2e2e2 4cqi, #9a9a9a 13cqi, #7a7a7a 17cqi, #fff 17.3cqi),
    linear-gradient(to right, #fff, #7a7a7a);
  background-size: 11px 11px, 100% 100%, 100% 22%;
  background-position: 0 0, 0 0, 0 100%;
  background-repeat: repeat, no-repeat, no-repeat;
  background-blend-mode: multiply;
  filter: contrast(20);
  animation: sf-ht 7s ease-in-out infinite alternate;
}
.sf-ht-tint { position: absolute; inset: 0; background: #3b32d9; mix-blend-mode: screen; }
@keyframes sf-ht { to { --sf-htx: 70%; } }