html{margin:0;padding:0;background:#fff;}
body{position:relative;min-height:100vh;margin:0;padding:0;overflow-x:hidden;background:#fff;}
#wrap{position:relative;z-index:1;width:100%;min-height:100vh;margin:0;padding:0;background:transparent;}
.body-gradient-background{position:absolute;top:0;left:0;z-index:0;display:block;width:100%;height:1000px;margin:0;padding:0;pointer-events:none;opacity:0.2;}
.first-view{position:relative;width:100%;margin:0;padding:0;overflow:hidden;background:transparent;}
.first-view__content{position:relative;z-index:1;}
.gradient-object{position:absolute;will-change:transform,border-radius;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;}

/* ==============================
   LEFT GRADIENT
============================== */

.gradient-object--left{top:-18%;left:-19%;width:clamp(560px,62vw,1200px);aspect-ratio:1 / 1.08;overflow:hidden;background:radial-gradient(circle at 64% 53%,rgba(255,255,255,1) 0%,rgba(255,255,255,0.96) 22%,rgba(255,255,255,0.72) 43%,rgba(255,255,255,0) 68%),linear-gradient(145deg,rgba(141,130,255,0.95) 0%,rgba(177,184,255,0.7) 27%,rgba(219,231,255,0.5) 48%,rgba(255,255,255,0.25) 67%,rgba(0,188,139,0.88) 100%);border-radius:42% 58% 63% 37% / 36% 45% 55% 64%;filter:blur(13px);transform:rotate(-24deg);animation:left-object-move 12s ease-in-out infinite alternate,left-object-morph 10s ease-in-out infinite alternate;}
.gradient-object--left::before{content:"";position:absolute;inset:4% 8% 8% 4%;border-radius:inherit;background:radial-gradient(ellipse at 20% 18%,rgba(84,78,255,0.8) 0%,rgba(117,110,255,0.55) 25%,rgba(117,110,255,0) 58%),radial-gradient(ellipse at 18% 80%,rgba(0,188,139,0.96) 0%,rgba(0,210,167,0.72) 27%,rgba(0,188,139,0) 62%);filter:blur(24px);animation:left-inner-flow 8s ease-in-out infinite alternate;}
.gradient-object__purple,.gradient-object__green{position:absolute;display:block;border-radius:50%;filter:blur(35px);}
.gradient-object__purple{top:4%;left:-5%;width:48%;height:31%;background:rgba(84,68,255,0.72);animation:purple-flow 7s ease-in-out infinite alternate;}
.gradient-object__green{bottom:-3%;left:-7%;width:54%;height:38%;background:rgba(0,188,139,0.88);animation:green-flow 9s ease-in-out infinite alternate;}

/* ==============================
   RIGHT GRADIENT
============================== */

.gradient-object--right{top:-11%;right:-13%;width:clamp(450px,47vw,900px);aspect-ratio:0.82 / 1;background:radial-gradient(circle at 47% 43%,rgba(255,143,239,0.88) 0%,rgba(255,151,240,0.78) 24%,rgba(255,183,244,0.56) 48%,rgba(255,224,250,0.3) 70%,rgba(255,255,255,0.04) 100%);border-radius:11% 20% 16% 13% / 9% 13% 18% 15%;filter:blur(13px);transform:rotate(-6deg);animation:right-object-move 14s ease-in-out infinite alternate,right-object-morph 11s ease-in-out infinite alternate;}
.gradient-object--right::before{content:"";position:absolute;inset:6%;background:radial-gradient(circle at 55% 43%,rgba(255,111,233,0.56) 0%,rgba(255,143,239,0.35) 43%,rgba(255,143,239,0) 76%);border-radius:inherit;filter:blur(27px);animation:pink-inner-flow 8s ease-in-out infinite alternate;}

/* ==============================
   LEFT ANIMATION
============================== */

@keyframes left-object-move{
0%{transform:translate3d(-2%,-1%,0) rotate(-24deg) scale(1);}
35%{transform:translate3d(3%,2%,0) rotate(-20deg) scale(1.025);}
70%{transform:translate3d(-1%,5%,0) rotate(-27deg) scale(0.985);}
100%{transform:translate3d(5%,-2%,0) rotate(-21deg) scale(1.04);}
}

@keyframes left-object-morph{
0%{border-radius:42% 58% 63% 37% / 36% 45% 55% 64%;}
33%{border-radius:53% 47% 43% 57% / 44% 59% 41% 56%;}
66%{border-radius:37% 63% 55% 45% / 58% 38% 62% 42%;}
100%{border-radius:60% 40% 47% 53% / 41% 53% 47% 59%;}
}

@keyframes left-inner-flow{
0%{transform:translate3d(-2%,-1%,0) scale(1);opacity:0.82;}
50%{transform:translate3d(6%,3%,0) scale(1.08);opacity:1;}
100%{transform:translate3d(1%,7%,0) scale(0.96);opacity:0.88;}
}

@keyframes purple-flow{
0%{transform:translate3d(0,0,0) scale(1);}
100%{transform:translate3d(13%,11%,0) scale(1.12);}
}

@keyframes green-flow{
0%{transform:translate3d(0,0,0) scale(1);}
100%{transform:translate3d(15%,-9%,0) scale(1.16);}
}

/* ==============================
   RIGHT ANIMATION
============================== */

@keyframes right-object-move{
0%{transform:translate3d(0,0,0) rotate(-6deg) scale(1);}
30%{transform:translate3d(-3%,4%,0) rotate(-3deg) scale(1.035);}
65%{transform:translate3d(2%,7%,0) rotate(-8deg) scale(0.98);}
100%{transform:translate3d(-5%,1%,0) rotate(-4deg) scale(1.05);}
}

@keyframes right-object-morph{
0%{border-radius:11% 20% 16% 13% / 9% 13% 18% 15%;}
35%{border-radius:18% 11% 22% 10% / 14% 20% 12% 19%;}
70%{border-radius:9% 22% 13% 18% / 20% 11% 21% 10%;}
100%{border-radius:20% 13% 10% 21% / 12% 19% 15% 22%;}
}

@keyframes pink-inner-flow{
0%{transform:translate3d(-4%,-2%,0) scale(0.94);opacity:0.74;}
50%{transform:translate3d(4%,5%,0) scale(1.1);opacity:1;}
100%{transform:translate3d(-1%,9%,0) scale(1.02);opacity:0.84;}
}

/* ==============================
   ASSET PUZZLE
============================== */

.asset-puzzle{position:relative;width:100%;max-width:837.5px;margin:50px auto 0;aspect-ratio:1675 / 738;touch-action:pan-y;user-select:none;-webkit-user-select:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.asset-puzzle__frame{position:absolute;z-index:5;pointer-events:none;}
.asset-puzzle__frame img{display:block;width:100%;height:100%;}
.asset-puzzle__drop-layer{position:absolute;z-index:4;pointer-events:none;}
.asset-drop-slot{position:absolute;box-sizing:border-box;opacity:0;transition:opacity 0.2s ease,background-color 0.2s ease,box-shadow 0.2s ease;}
.asset-drop-slot.is-available{opacity:1;background-color:rgba(var(--slot-color-rgb,0,188,139),0.16);box-shadow:inset 0 0 0 2px rgba(var(--slot-color-rgb,0,188,139),0.72);}
.asset-drop-slot.is-target{opacity:1;background-color:rgba(var(--slot-color-rgb,0,188,139),0.25);box-shadow:inset 0 0 0 3px rgba(var(--slot-color-rgb,0,188,139),0.9);}
.asset-piece{position:absolute;z-index:3;cursor:grab;touch-action:none;will-change:auto;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translate3d(0,0,0);transition:left 0.28s ease,top 0.28s ease,width 0.28s ease,height 0.28s ease,filter 0.2s ease,clip-path 0.2s ease;}
.asset-piece img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.asset-piece:hover{filter:brightness(1.04);}
.asset-piece.is-placed{clip-path:inset(var(--clip-top) var(--clip-right) var(--clip-bottom) var(--clip-left));}
.asset-piece.is-dragging{z-index:10;cursor:grabbing;clip-path:none;filter:drop-shadow(0 8px 10px rgba(0,0,0,0.18));transition:none;will-change:left,top;width:auto;}
.asset-piece.is-snapping{pointer-events:none;}

.asset-piece[data-id="01"]{--piece-color-rgb:224,127,11;}
.asset-piece[data-id="02"]{--piece-color-rgb:169,191,40;}
.asset-piece[data-id="03"]{--piece-color-rgb:200,149,103;}
.asset-piece[data-id="04"]{--piece-color-rgb:30,129,196;}
.asset-piece[data-id="05"]{--piece-color-rgb:223,154,151;}
.asset-piece[data-id="06"]{--piece-color-rgb:198,40,74;}
.asset-piece[data-id="07"]{--piece-color-rgb:229,122,161;}
.asset-piece[data-id="08"]{--piece-color-rgb:13,147,74;}
.asset-piece[data-id="09"]{--piece-color-rgb:0,158,157;}
.asset-piece[data-id="10"]{--piece-color-rgb:99,182,209;}
.asset-piece[data-id="11"]{--piece-color-rgb:216,102,25;}
.asset-piece[data-id="12"]{--piece-color-rgb:176,98,163;}
.asset-piece[data-id="13"]{--piece-color-rgb:0,163,216;}

/* ==============================
   REDUCED MOTION
============================== */

@media (prefers-reduced-motion:reduce){
.gradient-object,.gradient-object::before,.gradient-object__purple,.gradient-object__green{animation:none;}
.asset-piece,.asset-drop-slot{transition:none;}
}