/* ===== 히어로 배경 효과 (관리자 옵션 sc01_bg) ===== */
#sc01{ --mx:50vw; --my:50vh; --nx:0; --ny:0; }
.sc01-vimeo.fx{ padding-top:0; height:100vh; width:100%; }
.sc01-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.sc01-bg canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.sc01-vimeo.fx .vimeo-overlay{ z-index:1; }
@media(max-width:1024px){
  .bg-a3 i{ filter:blur(60px); } .bg-a7 .in i{ filter:blur(40px); } .bg-a15 i{ filter:blur(40px); }
}

@keyframes ribbon{ 0%{ transform:translateX(-6%) skewY(-4deg) scaleY(1) } 100%{ transform:translateX(6%) skewY(4deg) scaleY(1.25) } }
.bg-a3{ background:#0a0a0b; }
.bg-a3 i{ position:absolute; border-radius:50%; filter:blur(110px); mix-blend-mode:screen; animation:mono 20s ease-in-out infinite alternate; }
.bg-a3 i:nth-child(1){ width:70vw; height:70vw; left:-25vw; bottom:-35vw; background:#D8151B; opacity:.32; }
.bg-a3 i:nth-child(2){ width:40vw; height:40vw; right:-8vw; top:-12vw; background:#5a0b10; opacity:.6; animation-duration:26s; animation-delay:-10s; }
.bg-a3 i:nth-child(3){ width:30vw; height:30vw; left:45vw; top:35vh; background:#ff3b3b; opacity:.12; animation-duration:14s; animation-delay:-5s; }
.grain::before{ content:""; position:absolute; inset:-50%; width:200%; height:200%; opacity:.07; z-index:1; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation:grain .5s steps(4) infinite; pointer-events:none; }
.bg-a3::after{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(0,0,0,.7) 100%); }
@keyframes mono{ from{ transform:translate(0,0) scale(1) } to{ transform:translate(-8vw,-10vh) scale(1.2) } }
@keyframes grain{ 0%{ transform:translate(0,0) } 25%{ transform:translate(-3%,2%) } 50%{ transform:translate(2%,-3%) } 75%{ transform:translate(-1%,-1%) } 100%{ transform:translate(3%,1%) } }
.bg-a7{ background:#07070a; }
.bg-a7 .in{ position:absolute; inset:0; -webkit-mask:radial-gradient(520px circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,.08) 100%); mask:radial-gradient(520px circle at var(--mx) var(--my), #000 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,.08) 100%); }
.bg-a7 .in i{ position:absolute; left:-20%; width:140%; height:38vh; top:18vh; filter:blur(50px); opacity:.7; mix-blend-mode:screen; animation:ribbon 16s ease-in-out infinite alternate; background:linear-gradient(90deg, transparent 0%, #D8151B 25%, #7a1030 50%, #2b2b86 72%, transparent 100%); border-radius:50%; }
.bg-a7 .in i:nth-child(2){ top:40vh; height:30vh; opacity:.55; animation-duration:22s; animation-delay:-9s; background:linear-gradient(90deg, transparent 0%, #3a2fb8 20%, #D8151B 55%, #ff6a3d 75%, transparent 100%); }
.bg-a7 .in i:nth-child(3){ top:60vh; height:26vh; opacity:.45; animation-duration:19s; animation-delay:-4s; background:linear-gradient(90deg, transparent 0%, #D8151B 35%, #1d1d5c 70%, transparent 100%); }
.bg-a15{ background:linear-gradient(180deg,#09090b,#120b0d); }
.bg-a15 i{ position:absolute; bottom:-30vw; border-radius:50%; filter:blur(70px); mix-blend-mode:screen; animation:lava 14s ease-in-out infinite; transform:translateX(calc(var(--nx)*-120px)); transition:transform 1.2s; }
.bg-a15 i span{ display:block; width:100%; height:100%; border-radius:50%; }
.bg-a15 i:nth-child(1){ left:10vw; width:30vw; height:30vw; } .bg-a15 i:nth-child(1) span{ background:#D8151B; opacity:.5; }
.bg-a15 i:nth-child(2){ left:40vw; width:22vw; height:22vw; animation-duration:18s; animation-delay:-6s; } .bg-a15 i:nth-child(2) span{ background:#ff5a2e; opacity:.4; }
.bg-a15 i:nth-child(3){ left:62vw; width:36vw; height:36vw; animation-duration:22s; animation-delay:-12s; } .bg-a15 i:nth-child(3) span{ background:#7a1030; opacity:.7; }
.bg-a15 i:nth-child(4){ left:28vw; width:16vw; height:16vw; animation-duration:11s; animation-delay:-3s; } .bg-a15 i:nth-child(4) span{ background:#3a2fb8; opacity:.5; }
@keyframes lava{ 0%{ margin-bottom:0; scale:1 } 50%{ margin-bottom:95vh; scale:1.25 1 } 100%{ margin-bottom:0; scale:1 } }
@keyframes spinSlow{ to{ rotate:360deg } }
.bg-a18{ background:#0a0a0c; }
.bg-a18 i{ position:absolute; inset:-30%; mix-blend-mode:difference; filter:blur(40px); animation:plasma 26s linear infinite; background:radial-gradient(circle at 30% 40%, #D8151B 0%, transparent 40%), radial-gradient(circle at 70% 60%, #3a2fb8 0%, transparent 40%); opacity:.7; }
.bg-a18 i:nth-child(2){ animation-direction:reverse; animation-duration:19s; background:radial-gradient(circle at 60% 30%, #ff5a2e 0%, transparent 35%), radial-gradient(circle at 35% 70%, #7a1030 0%, transparent 45%); transform-origin:calc(50% + var(--nx)*15%) calc(50% + var(--ny)*15%); }
.bg-a18::after{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 30%, rgba(10,10,12,.85) 100%); }
@keyframes plasma{ to{ rotate:360deg } }
.bg-a42{ background:#0a0a0c; }
.bg-a42 i{ position:absolute; inset:-30%; background:conic-gradient(from calc(var(--nx)*80deg) at calc(50% + var(--nx)*10%) calc(50% + var(--ny)*10%), #0a0a0c, #D8151B 10%, #ff8a3a 20%, #ffe08a 28%, #3ad6c8 40%, #3a4bd6 52%, #b53ad6 64%, #D8151B 80%, #0a0a0c); filter:blur(70px) saturate(.9); opacity:.32; animation:spinSlow 50s linear infinite; }
.bg-a42::after{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 25%, rgba(10,10,12,.9) 85%); }
.bg-t23,.bg-t28{ background:radial-gradient(ellipse at 50% 60%, #14111b 0%, #08080a 70%); }
.bg-t31{ background:radial-gradient(ellipse at 50% 60%, #14111b 0%, #08080a 70%); }
.bg-d4{ background:radial-gradient(circle at 50% 50%, #121018 0%, #070708 70%); }
.bg-d5,.bg-d12{ background:linear-gradient(180deg,#0a0a0c 0%,#0e0c12 100%); }