/*==========================================================
CHARACTER CREATES CHANGE
BATCH 1
Foundation + Environment
==========================================================*/


:root{

--impact-bg:#07111f;
--impact-bg2:#0d1b2e;
--impact-bg3:#16263d;
--impact-bg4:#20334f;

--glass:
rgba(255,255,255,.08);

--glass-border:
rgba(255,255,255,.12);

--gold:#FAC60A;

--health:#4C9F38;

--education:#C5192D;

--peace:#00689D;

--partnership:#19486A;

--text:#ffffff;

--text-soft:
rgba(255,255,255,.65);

--shadow:
0 35px 80px rgba(0,0,0,.45);

}




/*==========================================================
SECTION
==========================================================*/

.impact-experience{

position:relative;

min-height:110vh;

overflow:hidden;

padding:140px 0;

background:

radial-gradient(
circle at top left,
#1c3558 0%,
transparent 32%
),

radial-gradient(
circle at bottom right,
#14304a 0%,
transparent 28%
),

linear-gradient(
180deg,
var(--impact-bg),
var(--impact-bg2),
var(--impact-bg3),
var(--impact-bg4)
);

isolation:isolate;

}



/*==========================================================
BACKGROUND LAYERS
==========================================================*/

.impact-bg{

position:absolute;

inset:0;

overflow:hidden;

pointer-events:none;

z-index:0;

}



/*==========================================================
AURORA
==========================================================*/

.aurora{

position:absolute;

filter:blur(120px);

border-radius:50%;

mix-blend-mode:screen;

opacity:.45;

animation:
auroraFloat 22s ease-in-out infinite;

}

.aurora-1{

width:700px;
height:700px;

background:

radial-gradient(
circle,
rgba(76,159,56,.30),
transparent 72%
);

left:-180px;

top:-120px;

animation-delay:0s;

}

.aurora-2{

width:600px;
height:600px;

background:

radial-gradient(
circle,
rgba(250,198,10,.18),
transparent 72%
);

right:-120px;

top:20%;

animation-delay:6s;

}

.aurora-3{

width:800px;
height:800px;

background:

radial-gradient(
circle,
rgba(0,104,157,.25),
transparent 72%
);

left:35%;

bottom:-350px;

animation-delay:11s;

}



/*==========================================================
TOP GRID
==========================================================*/

.grid-overlay{

position:absolute;

inset:0;

opacity:.08;

background-image:

linear-gradient(
rgba(255,255,255,.08) 1px,
transparent 1px
),

linear-gradient(
90deg,
rgba(255,255,255,.08) 1px,
transparent 1px
);

background-size:

80px 80px;

mask-image:

radial-gradient(
circle,
white 30%,
transparent 90%
);

}



/*==========================================================
NOISE
==========================================================*/

.noise-layer{

position:absolute;

inset:0;

opacity:.035;

background-image:

url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");

mix-blend-mode:soft-light;

}



/*==========================================================
PARTICLE LAYER
==========================================================*/

.particle-layer{

position:absolute;

inset:0;

overflow:hidden;

}

.particle-layer::before{

content:"";

position:absolute;

inset:-20%;

background-image:

radial-gradient(
white 1px,
transparent 1px
);

background-size:

140px 140px;

opacity:.18;

animation:

particleMove 70s linear infinite;

}



/*==========================================================
CONTAINER
==========================================================*/

.impact-experience .container{

position:relative;

z-index:5;

max-width:1400px;

}



/*==========================================================
HEADER
==========================================================*/

.impact-header{

max-width:820px;

margin:auto;

text-align:center;

margin-bottom:100px;

}



.section-label{

display:inline-flex;

align-items:center;

justify-content:center;

gap:12px;

padding:10px 20px;

border-radius:999px;

background:

rgba(255,255,255,.05);

border:

1px solid rgba(255,255,255,.08);

backdrop-filter:blur(15px);

font-size:.74rem;

font-weight:700;

letter-spacing:.25em;

color:var(--gold);

text-transform:uppercase;

margin-bottom:30px;

}



.impact-header h2{

font-size:

clamp(2.8rem,5vw,5rem);

font-weight:800;

line-height:1.05;

letter-spacing:-.04em;

color:white;

margin-bottom:30px;

}



.impact-header h2 span{

display:block;

margin-top:12px;

font-size:.72em;

font-weight:500;

line-height:1.25;

color:rgba(255,255,255,.72);

}



.impact-header p{

font-size:1.08rem;

line-height:2;

color:rgba(255,255,255,.62);

max-width:650px;

margin:auto;

}



/*==========================================================
UNIVERSE
==========================================================*/

.impact-universe{

position:relative;

width:100%;

height:820px;

}



/*==========================================================
SVG
==========================================================*/

.impact-network{

position:absolute;

inset:0;

width:100%;

height:100%;

z-index:1;

overflow:visible;

}



.network-path{

fill:none;

stroke:

rgba(255,255,255,.10);

stroke-width:2;

stroke-linecap:round;

stroke-linejoin:round;

}



/*==========================================================
RIPPLE ORIGIN
==========================================================*/

.ripple-origin{

position:absolute;

left:50%;

top:50%;

transform:

translate(-50%,-50%);

width:18px;

height:18px;

border-radius:50%;

background:var(--gold);

box-shadow:

0 0 50px var(--gold);

z-index:2;

}

.ripple-origin span{

position:absolute;

inset:0;

border-radius:50%;

border:

1px solid rgba(250,198,10,.35);

animation:

rippleExpand 6s infinite;

}

.ripple-origin span:nth-child(2){

animation-delay:2s;

}

.ripple-origin span:nth-child(3){

animation-delay:4s;

}



/*==========================================================
NODE FOUNDATION
==========================================================*/

.impact-node{

position:absolute;

display:flex;

align-items:center;

justify-content:center;

flex-direction:column;

width:220px;

height:220px;

border-radius:46% 54% 57% 43% /
48% 44% 56% 52%;

background:

var(--glass);

backdrop-filter:

blur(24px);

border:

1px solid var(--glass-border);

box-shadow:

var(--shadow);

z-index:4;

transition:

transform .8s cubic-bezier(.22,1,.36,1),

border .4s ease,

box-shadow .4s ease;

overflow:hidden;

}



/*==========================================================
LIGHT
==========================================================*/

.node-light{

position:absolute;

width:180%;

height:180%;

background:

radial-gradient(

circle,

rgba(255,255,255,.16),

transparent 70%

);

opacity:.4;

filter:blur(80px);

}



/*==========================================================
TYPOGRAPHY
==========================================================*/

.node-core{

position:relative;

z-index:3;

text-align:center;

padding:35px;

}



.node-core small{

display:block;

font-size:.72rem;

letter-spacing:.22em;

color:rgba(255,255,255,.5);

margin-bottom:12px;

text-transform:uppercase;

}



.node-core h3{

font-size:1.65rem;

font-weight:700;

color:white;

margin-bottom:8px;

}



.node-core span,

.node-core strong{

display:block;

font-size:.95rem;

letter-spacing:.18em;

font-weight:700;

color:var(--gold);

text-transform:uppercase;

margin-top:12px;

}



/*==========================================================
AMBIENT FLOAT
==========================================================*/

@keyframes auroraFloat{

0%{

transform:
translate3d(0,0,0)
scale(1);

}

50%{

transform:
translate3d(40px,-30px,0)
scale(1.15);

}

100%{

transform:
translate3d(0,0,0)
scale(1);

}

}



@keyframes particleMove{

from{

transform:

translateY(0);

}

to{

transform:

translateY(-220px);

}

}



@keyframes rippleExpand{
0%{
transform:scale(1);

opacity:1;

}

100%{
transform:scale(12);
opacity:0;

}

}



/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:992px){
.impact-universe{
height:1000px;
}

.impact-header{
margin-bottom:70px;
}

}



@media(max-width:768px){

.impact-experience{

padding:90px 0;

}

  .impact-header h2{
font-size:2.5rem;

}
.impact-header p{
font-size:1rem;
line-height:1.8;
}

}







/*==========================================================
BATCH 2
CONSTELLATION LAYOUT
==========================================================*/


/*==========================================================
UNIVERSE
==========================================================*/

.impact-universe{

position:relative;

width:100%;

height:900px;

margin:auto;

max-width:1400px;

}


/*==========================================================
NODE POSITIONING
==========================================================*/


/* CENTER */

.node-character{

left:50%;

top:48%;

width:250px;

height:250px;

transform:translate(-50%,-50%);

z-index:30;

}



/* HEALTH */

.node-health{

left:12%;

top:8%;

}



/* EDUCATION */

.node-education{

left:8%;

bottom:9%;

}



/* PEACE */

.node-peace{

right:9%;

top:10%;

}



/* PARTNERSHIP */

.node-partnership{

right:10%;

bottom:8%;

}



/*==========================================================
CENTER RING
==========================================================*/

.node-character .node-ring{

position:absolute;

width:340px;

height:340px;

border-radius:50%;

border:

1px solid rgba(250,198,10,.15);

animation:

rotateRing 40s linear infinite;

}



.node-character::before{

content:"";

position:absolute;

width:420px;

height:420px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(250,198,10,.08),

transparent 70%

);

filter:blur(30px);

z-index:-1;

}



/*==========================================================
NODE HALOS
==========================================================*/

.node-health::after,

.node-education::after,

.node-peace::after,

.node-partnership::after{

content:"";

position:absolute;

width:180%;

height:180%;

border-radius:50%;

opacity:.22;

filter:blur(60px);

z-index:-1;

}



.node-health::after{

background:

radial-gradient(circle,

rgba(76,159,56,.35),

transparent 70%);

}



.node-education::after{

background:

radial-gradient(circle,

rgba(197,25,45,.28),

transparent 70%);

}



.node-peace::after{

background:

radial-gradient(circle,

rgba(0,104,157,.28),

transparent 70%);

}



.node-partnership::after{

background:

radial-gradient(circle,

rgba(25,72,106,.35),

transparent 70%);

}



/*==========================================================
FLOATING ANIMATION
==========================================================*/

.node-character{

animation:

floatCenter 8s ease-in-out infinite;

}



.node-health{

animation:

floatHealth 11s ease-in-out infinite;

}



.node-education{

animation:

floatEducation 13s ease-in-out infinite;

}



.node-peace{

animation:

floatPeace 10s ease-in-out infinite;

}



.node-partnership{

animation:

floatPartnership 12s ease-in-out infinite;

}



/*==========================================================
CENTER FLOAT
==========================================================*/

@keyframes floatCenter{

0%{

transform:

translate(-50%,-50%)

translateY(0);

}

50%{

transform:

translate(-50%,-50%)

translateY(-10px);

}

100%{

transform:

translate(-50%,-50%)

translateY(0);

}

}



/*==========================================================
HEALTH
==========================================================*/

@keyframes floatHealth{

0%{

transform:

translateY(0)

translateX(0)

rotate(0deg);

}

30%{

transform:

translateY(-10px)

translateX(5px)

rotate(1deg);

}

70%{

transform:

translateY(6px)

translateX(-4px)

rotate(-1deg);

}

100%{

transform:

translateY(0)

translateX(0)

rotate(0);

}

}



/*==========================================================
EDUCATION
==========================================================*/

@keyframes floatEducation{

0%{

transform:

translate(0,0);

}

50%{

transform:

translate(-8px,-12px);

}

100%{

transform:

translate(0,0);

}

}



/*==========================================================
PEACE
==========================================================*/

@keyframes floatPeace{

0%{

transform:

translate(0,0);

}

40%{

transform:

translate(6px,-10px);

}

80%{

transform:

translate(-4px,8px);

}

100%{

transform:

translate(0,0);

}

}



/*==========================================================
PARTNERSHIP
==========================================================*/

@keyframes floatPartnership{

0%{

transform:

translate(0,0);

}

50%{

transform:

translate(10px,-8px);

}

100%{

transform:

translate(0,0);

}

}



/*==========================================================
ROTATING GOLD RING
==========================================================*/

@keyframes rotateRing{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}



/*==========================================================
SVG NETWORK
==========================================================*/

.impact-network{

z-index:3;

}



.network-path{

stroke:

rgba(255,255,255,.09);

stroke-width:2.2;

stroke-dasharray:10 12;

stroke-linecap:round;

animation:

networkFlow 18s linear infinite;

}



@keyframes networkFlow{

from{

stroke-dashoffset:0;

}

to{

stroke-dashoffset:-400;

}

}



/*==========================================================
JOURNEY
==========================================================*/

.impact-journey{

display:flex;

justify-content:center;

align-items:center;

gap:20px;

margin-top:80px;

flex-wrap:wrap;

}



.journey-item{

color:

rgba(255,255,255,.45);

font-size:.82rem;

letter-spacing:.18em;

text-transform:uppercase;

position:relative;

}



.journey-item:not(:last-child)::after{

content:"";

position:absolute;

top:50%;

right:-15px;

width:8px;

height:1px;

background:

rgba(250,198,10,.45);

}



/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:1100px){

.impact-universe{

height:1100px;

}



.node-health{

left:5%;

}



.node-education{

left:5%;

}



.node-peace{

right:5%;

}



.node-partnership{

right:5%;

}

}



@media(max-width:900px){

.impact-universe{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:50px;

height:auto;

padding:80px 0;

}



.impact-network{

display:none;

}



.impact-node{

position:relative;

left:auto;

right:auto;

top:auto;

bottom:auto;
transform:none !important;
animation:
mobileFloat 7s ease-in-out infinite;
}



.node-character{
width:230px;
height:230px;
}



@keyframes mobileFloat{
0%{
transform:translateY(0);
}

50%{
transform:translateY(-8px);
}

100%{
transform:translateY(0);
}

}



.ripple-origin{
display:none;

}

.impact-journey{
margin-top:40px;
}

}



/*==========================================================
BATCH 3A
LUXURY GLASS ENGINE
==========================================================*/


/*==========================================================
NODE
==========================================================*/

.impact-node{

cursor:pointer;

transform-style:preserve-3d;

backface-visibility:hidden;

will-change:
transform,
box-shadow,
border-color;

overflow:hidden;

transition:

transform .8s cubic-bezier(.22,1,.36,1),

box-shadow .7s ease,

border-color .5s ease,

background .5s ease;

}


/*==========================================================
MULTI-LAYER GLASS
==========================================================*/

.impact-node{

background:

linear-gradient(
180deg,
rgba(255,255,255,.10),
rgba(255,255,255,.03)
),

linear-gradient(
120deg,
rgba(255,255,255,.06),
transparent 60%
),

rgba(255,255,255,.05);

border:

1px solid rgba(255,255,255,.12);

box-shadow:

0 45px 70px rgba(0,0,0,.35),

0 0 0 1px rgba(255,255,255,.03),

inset 0 1px 1px rgba(255,255,255,.18),

inset 0 -35px 60px rgba(0,0,0,.08);

}


/*==========================================================
INNER HIGHLIGHT
==========================================================*/

.impact-node::before{

content:"";

position:absolute;

inset:1px;

border-radius:inherit;

background:

linear-gradient(

180deg,

rgba(255,255,255,.22),

transparent 30%,

transparent 70%,

rgba(255,255,255,.03)

);

pointer-events:none;

opacity:.65;

}



/*==========================================================
SPECULAR REFLECTION
==========================================================*/

.impact-node::after{

content:"";

position:absolute;

left:-40%;

top:-90%;

width:70%;

height:250%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.25),

transparent

);

transform:

rotate(24deg);

opacity:0;

pointer-events:none;

}



/*==========================================================
NODE CORE
==========================================================*/

.node-core{

position:relative;

z-index:5;

}



/*==========================================================
GLOW
==========================================================*/

.node-light{

opacity:.35;

transition:

opacity .5s ease,

transform .8s ease;

mix-blend-mode:screen;

}



/*==========================================================
SOFT EDGE BLUR
==========================================================*/

.impact-node .node-ring{

opacity:.35;

transition:.6s ease;

}



/*==========================================================
TYPOGRAPHY
==========================================================*/

.node-core h3{

letter-spacing:-.03em;

text-shadow:

0 2px 8px rgba(0,0,0,.18);

}



.node-core small{

opacity:.75;

}



.node-core strong,

.node-core span{

position:relative;

display:inline-block;

padding-top:8px;

font-size:.82rem;

letter-spacing:.28em;

}



/*==========================================================
NODE HALOS
==========================================================*/

.node-health{

--nodeGlow:

rgba(76,159,56,.28);

}



.node-education{

--nodeGlow:

rgba(197,25,45,.25);

}



.node-peace{

--nodeGlow:

rgba(0,104,157,.25);

}



.node-partnership{

--nodeGlow:

rgba(25,72,106,.28);

}



.node-character{

--nodeGlow:

rgba(250,198,10,.30);

}



/*==========================================================
AMBIENT GLOW
==========================================================*/

.impact-node{

box-shadow:

0 35px 60px rgba(0,0,0,.34),

0 0 60px var(--nodeGlow),

inset 0 1px 1px rgba(255,255,255,.15),

inset 0 -30px 45px rgba(0,0,0,.08);

}



/*==========================================================
CENTER CHARACTER
==========================================================*/

.node-character{

background:

linear-gradient(
180deg,
rgba(255,255,255,.13),
rgba(255,255,255,.05)
),

rgba(255,255,255,.07);

border:

1px solid rgba(250,198,10,.18);

}



/*==========================================================
BREATHING LIGHT
==========================================================*/

.node-character .node-light{

animation:

characterGlow 7s ease-in-out infinite;

}



@keyframes characterGlow{

0%{

opacity:.35;

transform:scale(1);

}

50%{

opacity:.8;

transform:scale(1.15);

}

100%{

opacity:.35;

transform:scale(1);

}

}



/*==========================================================
GLASS SHIMMER
==========================================================*/

@keyframes glassShimmer{

0%{

opacity:0;

transform:

translateX(-120%)

rotate(24deg);

}

35%{

opacity:1;

}

100%{

opacity:0;

transform:

translateX(320%)

rotate(24deg);

}

}



/*==========================================================
PREPARE FOR HOVER
==========================================================*/

.impact-node:hover{

border-color:

rgba(255,255,255,.18);

}



.impact-node:hover .node-light{

opacity:.7;

transform:scale(1.15);

}



.impact-node:hover::after{

animation:

glassShimmer 1.3s ease;

}



/*==========================================================
SUBTLE DEPTH
==========================================================*/

.node-core{

transform:

translateZ(30px);

}



.node-ring{

transform:

translateZ(-20px);

}



.node-light{

transform:

translateZ(-30px);

}



/*==========================================================
BACKGROUND ATMOSPHERE
==========================================================*/

.impact-experience::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(

circle at center,

rgba(255,255,255,.02),

transparent 70%

);

pointer-events:none;

mix-blend-mode:screen;

}



/*==========================================================
EDGE VIGNETTE
==========================================================*/

.impact-experience::after{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(

circle,

transparent 45%,

rgba(0,0,0,.35)

);

pointer-events:none;

}



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

@media(prefers-reduced-motion:reduce){

.node-character .node-light,
.impact-node::after{
animation:none;
}

}






/*==========================================================
BATCH 3B
ADVANCED GLASS ARCHITECTURE
==========================================================*/


/****************************************************
NODE
****************************************************/

.impact-node{

position:absolute;

isolation:isolate;

}




/****************************************************
HALO
****************************************************/

.node-halo{

position:absolute;

inset:-45px;

border-radius:50%;

opacity:.18;

filter:blur(55px);

transition:

opacity .6s,

transform .8s;

z-index:0;

}



.node-health .node-halo{

background:radial-gradient(circle,

rgba(76,159,56,.55),

transparent 70%);

}



.node-education .node-halo{

background:radial-gradient(circle,

rgba(197,25,45,.45),

transparent 70%);

}



.node-peace .node-halo{

background:radial-gradient(circle,

rgba(0,104,157,.50),

transparent 70%);

}



.node-partnership .node-halo{

background:radial-gradient(circle,

rgba(25,72,106,.55),

transparent 70%);

}



.node-character .node-halo{

background:radial-gradient(circle,

rgba(250,198,10,.50),

transparent 70%);

}




/****************************************************
SHELL
****************************************************/

.node-shell{

position:relative;

width:100%;

height:100%;

overflow:hidden;

border-radius:inherit;

backdrop-filter:blur(24px);

}




/****************************************************
SHADOW
****************************************************/

.glass-shadow{

position:absolute;

inset:0;

border-radius:inherit;

background:

linear-gradient(

180deg,

transparent,

rgba(0,0,0,.18)

);

}




/****************************************************
HIGHLIGHT
****************************************************/

.glass-highlight{

position:absolute;

top:-70%;

left:-35%;

width:65%;

height:260%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.40),

transparent

);

transform:

rotate(24deg);

opacity:0;

pointer-events:none;

}




/****************************************************
BORDER
****************************************************/

.glass-border{

position:absolute;

inset:0;

border-radius:inherit;

border:

1px solid rgba(255,255,255,.16);

box-shadow:

inset 0 0 0 1px rgba(255,255,255,.04);

}




/****************************************************
RIPPLE
****************************************************/

.node-ripple{

position:absolute;

inset:-20px;

border-radius:50%;

border:

1px solid rgba(255,255,255,.14);

opacity:0;

transform:scale(.85);

pointer-events:none;

}




/****************************************************
MORPHING
****************************************************/

.node-shell{

animation:

organicMorph 18s ease-in-out infinite;

}



.node-health .node-shell{

animation-delay:0s;

}



.node-education .node-shell{

animation-delay:2s;

}



.node-peace .node-shell{

animation-delay:4s;

}



.node-partnership .node-shell{

animation-delay:6s;

}



.node-character .node-shell{

animation-delay:1s;

}




@keyframes organicMorph{

0%{

border-radius:

46% 54% 57% 43%

/

48% 44% 56% 52%;

}



25%{

border-radius:

58% 42% 49% 51%

/

41% 63% 37% 59%;

}



50%{

border-radius:

42% 58% 60% 40%

/

56% 38% 62% 44%;

}



75%{

border-radius:

55% 45% 48% 52%

/

45% 58% 42% 55%;

}



100%{

border-radius:

46% 54% 57% 43%

/

48% 44% 56% 52%;

}

}




/****************************************************
PREMIUM HOVER
****************************************************/

.impact-node:hover{

transform:

translateY(-12px)

scale(1.05);

}



.impact-node:hover

.node-halo{

opacity:.55;

transform:scale(1.15);

}



.impact-node:hover

.node-ripple{

opacity:1;

animation:

nodeRipple 1.8s ease-out infinite;

}



.impact-node:hover

.glass-highlight{

opacity:1;

animation:

glassSweep 1.3s ease;

}



.impact-node:hover

.glass-border{

border-color:

rgba(255,255,255,.30);

}




@keyframes nodeRipple{

0%{

transform:scale(.9);

opacity:.6;

}



100%{

transform:scale(1.35);

opacity:0;

}

}




@keyframes glassSweep{

0%{

transform:

translateX(-180%)

rotate(24deg);

}



100%{

transform:

translateX(360%)

rotate(24deg);

}

}




/****************************************************
ACTIVE NODE
****************************************************/

.impact-node.active{

transform:

translateY(-16px)

scale(1.06);

}



.impact-node.active

.node-halo{

opacity:.65;

}




/****************************************************
GPU
****************************************************/

.node-shell,

.node-halo,

.glass-highlight{

will-change:

transform,

opacity;

}


/*==========================================================
BATCH 4
CINEMATIC INTERACTION
==========================================================*/


/****************************************************
GLOBAL TIMING
****************************************************/

:root{

--spring:

cubic-bezier(.22,1,.36,1);

--fast:.35s;

--medium:.7s;

--slow:1.2s;

}



/****************************************************
NODE
****************************************************/

.impact-node{

transition:

transform var(--medium) var(--spring),

filter var(--medium),

opacity var(--medium),

box-shadow var(--medium);

}



/****************************************************
WHEN HOVERING THE UNIVERSE
ALL NODES DIM SLIGHTLY
****************************************************/

.impact-universe:hover

.impact-node{

opacity:.42;

filter:

grayscale(.15)

brightness(.85);

transform:scale(.96);

}



/****************************************************
HOVERED NODE
****************************************************/

.impact-node:hover{

opacity:1 !important;

filter:none;

transform:
translate(
var(--mx),
var(--my)

)

translateY(-16px);


  
scale(1.08);

z-index:300;

}



/****************************************************
NEIGHBOUR REACTION
****************************************************/

.impact-node:hover ~ .impact-node{

opacity:.72;

}



/****************************************************
LIGHT INTENSITY
****************************************************/

.impact-node:hover

.node-light{

opacity:1;

filter:

blur(90px);

transform:

scale(1.45);

}



/****************************************************
HALO
****************************************************/

.impact-node:hover

.node-halo{

opacity:.75;

transform:

scale(1.3);

}



/****************************************************
CAPSULE
****************************************************/

.impact-node:hover

.node-shell{

box-shadow:

0 55px 90px rgba(0,0,0,.42),

0 0 90px var(--nodeGlow),

inset 0 2px 2px rgba(255,255,255,.18);

}



/****************************************************
GLASS DEPTH
****************************************************/

.impact-node:hover

.glass-shadow{

background:

linear-gradient(

180deg,

transparent,

rgba(0,0,0,.28)

);

}



/****************************************************
TEXT
****************************************************/

.impact-node h3{

transition:

letter-spacing .6s,

transform .6s;

}



.impact-node:hover h3{

letter-spacing:-.05em;

transform:

translateY(-3px);

}



/****************************************************
KEYWORD
****************************************************/

.node-core strong{

transition:

letter-spacing .5s,

color .5s,

transform .5s;

}



.impact-node:hover strong{

letter-spacing:.34em;

color:white;

transform:

translateY(4px);

}



/****************************************************
CENTER NODE
****************************************************/

.node-character:hover{

transform:

translate(-50%,-50%)

scale(1.12);

}



/****************************************************
CENTER RING
****************************************************/

.node-character:hover

.node-ring{

animation-duration:12s;

opacity:1;

}



/****************************************************
NETWORK
****************************************************/

.network-path{

transition:

stroke .6s,

opacity .6s,

stroke-width .6s;

}



/****************************************************
UNIVERSE HOVER
****************************************************/

.impact-universe:hover

.network-path{

opacity:.18;

}



/****************************************************
NODE CURSOR
****************************************************/

.impact-node{

cursor:pointer;

}



/****************************************************
AMBIENT LIGHT
****************************************************/

.impact-experience::before{

transition:opacity 1s;

}



.impact-universe:hover ~ .impact-footer{

opacity:.45;

}



/****************************************************
FOOTER
****************************************************/

.impact-footer{

transition:

opacity .8s,

transform .8s;

}



/****************************************************
TEXT ANIMATION
****************************************************/

.node-core small,

.node-core h3,

.node-core strong{

animation:

textFloat 8s ease-in-out infinite;

}



.node-core h3{

animation-delay:.5s;

}



.node-core strong{

animation-delay:1s;

}



@keyframes textFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-2px);

}

100%{

transform:translateY(0);

}

}



/****************************************************
SOFT GLOW
****************************************************/

.impact-node::after{

mix-blend-mode:screen;

}



/****************************************************
CHARACTER
****************************************************/

.node-character{

box-shadow:

0 0 120px rgba(250,198,10,.16),

0 35px 80px rgba(0,0,0,.42);

}



/****************************************************
PREPARE FOR JS
****************************************************/

.impact-node{

--mx:0px;

--my:0px;

}




.energy-particle{

filter:

drop-shadow(

0 0 10px #FAC60A

)

drop-shadow(

0 0 25px #FAC60A

);

}



.impact-node.pulse{

animation:

arrival .8s ease;

}

@keyframes arrival{

0%{

transform:scale(1);

}

40%{

transform:scale(1.12);

}

100%{

transform:scale(1);

}

}



.energy-particle{
    fill:#FAC60A;

    filter:
        drop-shadow(0 0 6px #FAC60A)
        drop-shadow(0 0 14px #FAC60A)
        drop-shadow(0 0 24px rgba(250,198,10,.8));

    transform-origin:center;

    animation:particlePulse .6s ease-in-out infinite alternate;
}

@keyframes particlePulse{

    from{
        r:4;
        opacity:.8;
    }

    to{
        r:6;
        opacity:1;
    }

}



/*==========================================================
CHARACTER HEARTBEAT
==========================================================*/

.node-character{

animation:

floatCenter 8s ease-in-out infinite,

heartbeat 6.5s ease-in-out infinite;

}

@keyframes heartbeat{

0%{

box-shadow:

0 0 60px rgba(250,198,10,.18);

}

12%{

box-shadow:

0 0 120px rgba(250,198,10,.55),

0 0 240px rgba(250,198,10,.18);

}

24%{

box-shadow:

0 0 70px rgba(250,198,10,.22);

}

100%{

box-shadow:

0 0 60px rgba(250,198,10,.18);

}

}



.node-core strong{

transition:

opacity .45s,

transform .45s,

letter-spacing .45s;

}


.impact-bg{

animation:

slowDrift 60s linear infinite;

}

@keyframes slowDrift{

0%{

transform:

translate(0,0);

}

25%{

transform:

translate(-15px,-10px);

}

50%{

transform:

translate(10px,-15px);

}

75%{

transform:

translate(15px,10px);

}

100%{

transform:

translate(0,0);

}

}



.node-ring{

animation:

rotateRing 40s linear infinite,

ringPulse 8s ease-in-out infinite;

}

@keyframes ringPulse{

0%{

transform:

scale(1)

rotate(0);

opacity:.25;

}

50%{

transform:

scale(1.05)

rotate(180deg);

opacity:.55;

}

100%{

transform:

scale(1)

rotate(360deg);

opacity:.25;

}

}








.node-shell{

    overflow:hidden;

}

.node-shell::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    left:var(--lightX);

    top:var(--lightY);

    transform:

    translate(-50%,-50%);

    background:

    radial-gradient(

        circle,

        rgba(255,255,255,.20),

        transparent 70%

    );

    pointer-events:none;

    transition:

    opacity .25s;

}