/* Converted from Figma React+Tailwind to plain CSS. Keeps data-node-id semantics for traceability. */
:root{
  --container-width:1920px;
  --container-height:1050.667px;
}
html,body{height:100%;margin:0;padding:0}
.bg-root{position:relative;width:100%;height:100vh;overflow:hidden}
.bg-container{
  position:absolute;
  left:0.5px;
  top:0;
  width:var(--container-width);
  height:var(--container-height);
  pointer-events:none;
}
.layer{position:absolute;display:flex;align-items:center;justify-content:center;overflow:visible}
.layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;display:block}

/* Large blurred base image (matches values from Figma) */
.layer-1{
  left:-2074.67px;
  top:-3429.33px;
  width:4869.333px;
  height:8661.333px;
  transform: rotate(180deg);
}
.layer-1 img{
  filter: blur(119.733px);
  opacity:0.6;
  /* mask setup */
  -webkit-mask-image: var(--mask-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 2074.667px 3429.333px;
  -webkit-mask-size: 1920px 1050.667px;
  mask-image: var(--mask-url);
  mask-repeat: no-repeat;
  mask-position: 2074.667px 3429.333px;
  mask-size: 1920px 1050.667px;
}

/* Secondary soft-light layer */
.layer-2{
  left:calc(50% + 236.67px);
  top:-294.1px;
  width:2101.139px;
  height:2080.346px;
  transform: translateX(-50%) rotate(163.46deg);
}
.layer-2 img{
  width:1697.008px; /* from Figma */
  height:1666.153px;
  filter: blur(13.75px);
  /* mask setup for the smaller image */
  -webkit-mask-image: var(--mask-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: -146.096px 294.096px;
  -webkit-mask-size: 1920px 1050.667px;
  mask-image: var(--mask-url);
  mask-repeat: no-repeat;
  mask-position: -146.096px 294.096px;
  mask-size: 1920px 1050.667px;
  mix-blend-mode: soft-light;
}

/* Make the composition responsive: scale down for small viewports while preserving center */
@media (max-width:1200px){
  .bg-container{transform-origin: top left;transform: scale(0.7);}
}
@media (max-width:800px){
  .bg-container{transform: scale(0.5);}
}
