/* reset */

html,body,div,span,object,iframe,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{background:transparent;font-size:100%;margin:0;padding:0;vertical-align:baseline}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{border:0;border-top:1px solid #ccc;display:block;height:1px;margin:1em 0;padding:0}input,select{vertical-align:middle}

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-weight: 400;
}

* {
	box-sizing: border-box;
  font-synthesis: none;
}


::selection {
	background: #dbdeea;
	color: #fff;
}

::-moz-selection {
	background: #dbdeea;
	color: #fff;
}

::-moz-focus-inner {
	border: 0;
	margin: 0;
	padding: 0;
}

a,a:visited {
	color: #2e2e2e;
	outline: none;
	text-decoration: none;
  transition: background-color 0.5s ease, color 0.5s ease;
}

a:hover {
	color: #666;
	outline: none;
	text-decoration: none;
}

button {
	transition: background 0.5s ease;
	font-family: 'Inter', sans-serif;
}

input, textarea, .redactor-editor {
	transition: border 0.5s ease, color 0.5s ease;
}

h1,h2,h3 {
	-webkit-font-smoothing:antialiased;
	border: 0;
	margin: 0;
	padding: 0;
  font-family: 'Geist', sans-serif;
  font-weight: 700
}

body {
	-webkit-font-smoothing:antialiased;
	background-color: #fff;
	color: #2D2D2D;
	font-family: 'Inter', sans-serif;
	line-height: 1;
	word-wrap: break-word;
	margin: 0;
	padding: 0;
	transition: background-color 0.5s ease;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}






.content-wrapper {
  float: left;
  width: 100%;
  height: 100vh;
}

.content-wrapper .animatione-effect {
  width: 100%;
  text-align: center;
}

.content-wrapper .message-content-wrapper {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  padding: 80px;
  z-index: 5;
}

.content-wrapper .message-content-wrapper .message-content {
  float: left;
  width: 80%;
  max-width: 650px;
}

.content-wrapper .message-content-wrapper .message-content .name {
  float: left;
  width: 100%;
  color: #8A8A8A;
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 15px;
  font-family: 'Geist', sans-serif;
}

.content-wrapper .message-content-wrapper .message-content h1 {
  float: left;
  width: 100%;
  color: #000;
  font-family: 'Geist', sans-serif;
  font-size: 62px;
  font-style: normal;
  font-weight: 600;
  line-height: 64px;
  margin-bottom: 20px;
}


.content-wrapper .message-content-wrapper .message-content p {
  float: left;
  width: 100%;
  color: #9F9F9F;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 30px;
}


.content-wrapper .message-content-wrapper .message-content a.button-black-round {
  float: left;
  font-size: 16.5px;
  padding: 14px 22px;
  background: #000;
  border-radius: 30px;
  color: #fff;
  float: left;
  outline: none;
  cursor: pointer;
  transition: opacity 0.5s ease;
  border: 1px solid #000;
  text-align: center;
  font-style: normal;
  font-weight: 535;
  line-height: normal;
  font-variation-settings: 'wght' 535;
  line-height: 18px;
}

.content-wrapper .message-content-wrapper .message-content a.button-black-round:hover {
  opacity: 0.7;
  color: #FFF;
}

.content-wrapper .message-content-wrapper .copyright {
  position: absolute;
  bottom: 0px;
  right: 0px;
  padding: 80px;
  color: #BCBCBC;
  text-align: right;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.animation-effect-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.animation-effect {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.animation-effect-copy {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  backface-visibility: hidden;
  z-index: 2;
  mix-blend-mode: color-dodge;
  paint-order: stroke fill;
  text-align: center;
  font-family: 'Geist', sans-serif;
  font-size: 12vmin;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -4.5px;
  white-space: nowrap;
}


.animation-canvas {
    position: relative;
    width: 500px;
    height: 500px;
    animation: rotate-canvas 25s linear infinite;
    transform: translateZ(0);
    will-change: transform;
    isolation: isolate;
}

.animation-canvas .blob {
  position: absolute;
  filter: blur(35px);
  mix-blend-mode: lighten;
  will-change: transform, filter;
}

/* Shape 1: Pink (Large, sweeping top-left to bottom-right) */
.animation-canvas .blob.pink {
    width: 550px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,0,128,0.9) 0%, rgba(255,0,128,0.8) 30%, rgba(255,0,128,0) 75%);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    top: 0; left: 0;
    animation: path-1 12s ease-in-out infinite;
}

/* Shape 2: Cyan (Wide, looping across the bottom) */
.animation-canvas .blob.cyan {
    width: 600px;
    height: 350px;
    background: radial-gradient(circle, rgba(0,242,255,0.9) 0%, rgba(0,242,255,0.8) 30%, rgba(0,242,255,0) 75%);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    bottom: 0; left: -10%;
    animation: path-2 15s ease-in-out infinite;
}

/* Shape 3: Purple (Dense core, moving in an internal figure-8) */
.animation-canvas .blob.purple {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(138,43,226,0.95) 0%, rgba(138,43,226,0.85) 30%, rgba(138,43,226,0) 75%);
    border-radius: 50% 50% 40% 60% / 40% 60% 50% 50%;
    top: 10%; left: 10%;
    z-index: 2;
    animation: path-3 10s ease-in-out infinite;
}

/* Shape 4: Yellow (Drifting diagonally from top-right) */
.animation-canvas .blob.yellow {
    width: 450px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,204,0,0.9) 0%, rgba(255,204,0,0.8) 30%, rgba(255,204,0,0) 75%);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    top: -10%; right: 0;
    animation: path-4 14s ease-in-out infinite;
}

/* Shape 5: Lime (Sweeping up from the bottom-right) */
.animation-canvas .blob.lime {
    width: 500px;
    height: 350px;
    background: radial-gradient(circle, rgba(57,255,20,0.85) 0%, rgba(57,255,20,0.75) 30%, rgba(57,255,20,0) 75%);
    border-radius: 70% 30% 50% 50% / 50% 70% 30% 50%;
    bottom: -10%; right: -10%;
    animation: path-5 16s ease-in-out infinite;
}

/* THE KEYFRAMES:
   By using 3 distinct points, the shapes move in large triangles and curves.
   Combined with the spinning canvas, they look like fluid, shifting liquid.
*/
@keyframes path-1 {
    0%, 100% { transform: translate3d(-150px, -150px, 0) scale(0.9); }
    33%      { transform: translate3d(200px, 50px, 0) scale(1.1); }
    66%      { transform: translate3d(50px, 200px, 0) scale(1); }
}

@keyframes path-2 {
    0%, 100% { transform: translate3d(200px, 150px, 0) scale(1); }
    33%      { transform: translate3d(-200px, 50px, 0) scale(0.9); }
    66%      { transform: translate3d(-100px, -150px, 0) scale(1.1); }
}

@keyframes path-3 {
    0%, 100% { transform: translate3d(-100px, 150px, 0) scale(1.1); }
    33%      { transform: translate3d(150px, -100px, 0) scale(0.9); }
    66%      { transform: translate3d(-150px, -100px, 0) scale(1.2); }
}

@keyframes path-4 {
    0%, 100% { transform: translate3d(150px, -200px, 0) scale(1); }
    33%      { transform: translate3d(-100px, 150px, 0) scale(1.2); }
    66%      { transform: translate3d(-200px, -50px, 0) scale(0.8); }
}

@keyframes path-5 {
    0%, 100% { transform: translate3d(100px, 200px, 0) scale(0.9); }
    33%      { transform: translate3d(-200px, -150px, 0) scale(1.1); }
    66%      { transform: translate3d(200px, -50px, 0) scale(1); }
}

@keyframes rotate-canvas {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


@media screen and (max-width: 1000px) {

  .content-wrapper .message-content-wrapper .message-content h1 {
    font-size: 40px;
    line-height: 42px;
  }

  .content-wrapper .message-content-wrapper {
    padding: 30px;
  }

  .content-wrapper .message-content-wrapper .copyright {
    position: relative;
    bottom: auto;
    right: auto;
    padding: 0;
    margin-top: 40px;
    text-align: left;
    float: left;
    width: 100%;
  }

  .content-wrapper .message-content-wrapper .message-content {
    float: left;
    width: 100%;
    max-width: 650px;
  }
}


@media screen and (max-width: 768px) {

  .animation-effect-copy {
    font-size: 15vw;
  }

  .animation-effect-copy {
    top: 25%;
  }

  .animation-canvas {
    transform: scale(calc(100vw / 500)) translateZ(0);
    transform-origin: center center;
  }

  .content-wrapper .message-content-wrapper {
    padding: 40px 20px;
  }

  .content-wrapper .message-content-wrapper .message-content {
    width: 100%;
  }

  .animation-canvas {
    width: 300px;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
  }

  .animation-canvas .blob.pink {
    width: 450px;
    height: 320px;
  }

  .animation-canvas .blob.cyan {
    width: 500px;
    height: 280px;
  }

  .animation-canvas .blob.purple {
    width: 380px;
    height: 380px;
  }

  .animation-canvas .blob.yellow {
    width: 380px;
    height: 250px;
  }

  .animation-canvas .blob.lime {
    display: none;
  }

  @keyframes path-1 {
    0%, 100% { transform: translate3d(-100px, -100px, 0) scale(0.9); }
    33%      { transform: translate3d(150px, 40px, 0) scale(1.1); }
    66%      { transform: translate3d(40px, 150px, 0) scale(1); }
  }

  @keyframes path-2 {
    0%, 100% { transform: translate3d(150px, 100px, 0) scale(1); }
    33%      { transform: translate3d(-150px, 40px, 0) scale(0.9); }
    66%      { transform: translate3d(-80px, -100px, 0) scale(1.1); }
  }

  @keyframes path-3 {
    0%, 100% { transform: translate3d(-80px, 120px, 0) scale(1.1); }
    33%      { transform: translate3d(120px, -80px, 0) scale(0.9); }
    66%      { transform: translate3d(-120px, -80px, 0) scale(1.2); }
  }

  @keyframes path-4 {
    0%, 100% { transform: translate3d(120px, -150px, 0) scale(1); }
    33%      { transform: translate3d(-80px, 120px, 0) scale(1.2); }
    66%      { transform: translate3d(-150px, -40px, 0) scale(0.8); }
  }

  @keyframes path-5 {
    0%, 100% { transform: translate3d(80px, 150px, 0) scale(0.9); }
    33%      { transform: translate3d(-150px, -120px, 0) scale(1.1); }
    66%      { transform: translate3d(150px, -40px, 0) scale(1); }
  }
}


@media screen and (max-width: 600px) {

  .content-wrapper .message-content-wrapper .message-content {
    width: 100%;
    max-width: 100%;
  }

  .content-wrapper .message-content-wrapper .message-content h1 {
    font-size: 30px;
    line-height: 32px;
    margin-bottom: 10px;
  }

  .content-wrapper .message-content-wrapper .message-content p {
    font-size: 16px;
    line-height: 24px;
  }

}

@media screen and (max-width: 480px) {

  .content-wrapper .message-content-wrapper .message-content .name {
    display: none;
  }

  .content-wrapper .message-content-wrapper {
    padding: 40px 20px 40px 20px;
    text-align: center;
  }

  .content-wrapper .message-content-wrapper .message-content a.button-black-round {
    float: none;
    display: inline-block;
  }

  .content-wrapper .message-content-wrapper .copyright {
    margin-top: 20px;
    text-align: center;
    display: none;
  }

  .animation-effect-copy {
    top: 20%;
  }

  .animation-canvas {
    width: 250px;
    height: 250px;
  }

  .animation-canvas .blob.pink {
    width: 150px;
    height: 150px;
  }

  .animation-canvas .blob.cyan {
    width: 280px;
    height: 120px;
  }

  .animation-canvas .blob.purple {
    width: 200px;
    height: 200px;
  }

  .animation-canvas .blob.yellow {
    width: 100px;
    height: 100px;
  }


  @keyframes path-1 {
    0%, 100% { transform: translate3d(-80px, -80px, 0) scale(0.9); }
    33%      { transform: translate3d(100px, 30px, 0) scale(1.1); }
    66%      { transform: translate3d(30px, 100px, 0) scale(1); }
  }

  @keyframes path-2 {
    0%, 100% { transform: translate3d(100px, 80px, 0) scale(1); }
    33%      { transform: translate3d(-100px, 30px, 0) scale(0.9); }
    66%      { transform: translate3d(-60px, -80px, 0) scale(1.1); }
  }

  @keyframes path-3 {
    0%, 100% { transform: translate3d(-60px, 80px, 0) scale(1.1); }
    33%      { transform: translate3d(80px, -60px, 0) scale(0.9); }
    66%      { transform: translate3d(-80px, -60px, 0) scale(1.2); }
  }

  @keyframes path-4 {
    0%, 100% { transform: translate3d(80px, -100px, 0) scale(1); }
    33%      { transform: translate3d(-60px, 80px, 0) scale(1.2); }
    66%      { transform: translate3d(-100px, -30px, 0) scale(0.8); }
  }

  @keyframes path-5 {
    0%, 100% { transform: translate3d(60px, 100px, 0) scale(0.9); }
    33%      { transform: translate3d(-100px, -80px, 0) scale(1.1); }
    66%      { transform: translate3d(100px, -30px, 0) scale(1); }
  }
}

/*  */