@font-face {
    font-family: 'MINISerif';
    src: url('https://www.mini.jp/etc.clientlibs/settings/wcm/designs/minidigital-white/fonts/latin/resources/MINISerif-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Motoya';
    src: url('https://www.mini.jp/etc.clientlibs/settings/wcm/designs/minidigital-white/fonts/jp/resources/MotoyaAporoStd-W3.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

.minifont_en {
    font-family: 'MINISerif', serif;
}

.minifont_jp {
    font-family: 'Motoya', serif;
}

html, body {
    font-family: 'Motoya';
    margin:0;
    padding:0;
    overflow-x: hidden;
}

body {
    background: url('img/bg1.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    margin: 0;
    padding: 0;
    height: 100vh;
    position: relative;
}

.fade-in-1,
.fade-in-2 {
    opacity: 0;
    animation: fadeIn 1s ease-in forwards;
}

.fade-in-1 {
    animation: fadeIn 1s ease-in 0.5s forwards;
}

.fade-in-2 {
    animation: fadeIn .7s ease-in 2s forwards;
}

.fade-in-3 {
    opacity: 0;
    animation: fadeIn 1s ease-in 2s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

a {
    color:#000;
}

#oled {
    width: 70vw;
    aspect-ratio: 1 / 1;
    background-color: rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    position: fixed;
    top: -10vw;
    left: 50%;
    transform: translate(-25%, 0);
    mix-blend-mode: overlay;
    z-index: 0; 
    pointer-events: none; 
    overflow: visible;
}

/* Continuous rings emitted from the outer edge of the OLED */
/* temporary off
#oled::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,0.3);
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    animation: slowPulse 7s ease-out infinite;
}

@keyframes slowPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
    50% {
        opacity: 0.15;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
        border: 30px solid rgba(255,255,255,0.3);
    }
}
*/


/* Interaction ring: emitted on key press */
.interaction-ring {
    position: absolute;
    top: 50%; left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.5);
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.4;
    animation: interactionPulse 0.5s ease-out forwards;
}

@keyframes interactionPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.4;
    }
    55% {
        transform: translate(-50%, -50%) scale(1.07);
    }
    100% {
        opacity: 0;
        border: 6px solid rgba(255,255,255,0.5);
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* OLED Animation: on message send */
.oled-animation {
    animation: oledAnimation 0.5s ease-out forwards;
}

@keyframes oledAnimation {
    0% {
        transform: translate(-25%, 0) scale(1);
    }
    55% {
        transform: translate(-25%, 0) scale(1.02);
        background-color: rgba(255, 255, 255, 0.55);
    }
    100% {
        transform: translate(-25%, 0) scale(1);
        background-color: rgba(255, 255, 255, 0.45);
    }
}

#container {
    display: flex;
    justify-content: flex-start;
    padding: 0 0 0 3vw;
    gap: 8vw;
    min-height:720px;
}

#leftside {
    width: 30%;
    margin-top: 3.5vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 5vh;
}

#rightside {
    width:55%;
}

#logo {
    width:27.5vw;
    display:block;
    margin:0 auto;
}

p {
    margin:0;
}

h1, h2 {
    color: #000;
    text-align: center;
}

h1 {
    font-size:50px;
    margin:0;
}

h2 {
    font-size:1.7vw;
    margin-left:1vw;
    margin-top:0;
    pointer-events: none; 
    white-space: nowrap;
}

#description {
    margin-bottom:30%;
    font-size:1em;
    text-align:center;
}

#disclaimer {
    text-align:center;
    font-size:10px;
    margin-top:150px;
}

.linebreak {
    display:block;
}

.desktop {
    display:block;
}

.mobile {
    display:none;
}

/* Blob CSS*/
.blob-container,
.palette-1 {
  --bg-0: #101030;
  --bg-1: #050515;
  --blob-1: #984ddf;
  --blob-2: #4344ad;
  --blob-3: #74d9e1;
  --blob-4: #fff;
}

.palette-2 {
  --bg-0: #545454;
  --bg-1: #150513;
  --blob-1: #ff3838;
  --blob-2: #ff9d7c;
  --blob-3: #ffdda0;
  --blob-4: #fff6ea;
}

.palette-3 {
  --bg-0: #300030;
  --bg-1: #000000;
  --blob-1: #291528;
  --blob-2: #3a3e3b;
  --blob-3: #9e829c;
  --blob-4: #f0eff4;
}

.palette-4 {
  --bg-0: #ffffff;
  --bg-1: #d3f7ff;
  --blob-1: #bb74ff;
  --blob-2: #7c7dff;
  --blob-3: #a0f8ff;
  --blob-4: #ffffff;
}

.palette-5 {
  --bg-0: #968e85;
  --bg-1: #8cc084;
  --blob-1: #c1d7ae;
  --blob-2: #9eff72;
  --blob-3: #ffcab1;
  --blob-4: #ecdcb0;
}

.palette-6 {
  --bg-0: #ffffff;
  --bg-1: #4e598c;
  --blob-1: #ff8c42;
  --blob-2: #fcaf58;
  --blob-3: #f9c784;
  --blob-4: #ffffff;
}

.blob-container {
  background: none;
  position: absolute;
  z-index:-1;
  width: 100%;
  height: 14.5vw;
  top:-0.5vw;
  left:10vw;
  overflow: hidden;
  display: flex;
  align-items: center;
  transition: background 1000ms ease;
  mix-blend-mode: overlay;
}
.blob-container-webkit {
  display:none;
  font-size:4.3px;
}
@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
  .blob-container {
    display:none;
  }
  .blob-container-webkit {
    display:flex;
  }
}

.blob-container-webkit .blobs {
  position:absolute;
}
.blob-container-webkit .blur1 {
  filter: blur(1em);  
}
.blob-container-webkit .blur2 {
  filter: blur(0.75em);
}
.blob-container-webkit .blur3 {
  filter: blur(0.5em);
}
.blob-container-webkit .blur4 {
  /* filter: blur(10em); */
  filter: blur(2.5em);
}
.container::after {
  position: absolute;
  content: "";
  width: min(50vw, 50vh);
  height: min(50vw, 50vh);
  background: var(--bg-0);
  border-radius: 50%;
  filter: blur(10rem);
  -webkit-filter: blur(10rem);
  transition: background 500ms ease;
}

.blobs {
  width: min(60vw, 60vh);
  height: min(60vw, 60vh);
  max-height: 100%;
  max-width: 100%;
}
.blobs svg {
  position: relative;
  height: 100%;
  z-index: 2;
}
.blobs .blob {
  animation: rotate 25s infinite alternate ease-in-out;
  transform-origin: 50% 50%;
  opacity: 0.7;
}
.blobs .blob path {
  animation: blob-anim-1 5s infinite alternate cubic-bezier(0.45, 0.2, 0.55, 0.8);
  transform-origin: 50% 50%;
  transform: scale(0.8);
  transition: fill 800ms ease;
}
.blobs .blob.alt {
  animation-direction: alternate-reverse;
  opacity: 0.3;
}
.blobs .blob-1 path {
  fill: var(--blob-1);
  filter: blur(1rem);
  -webkit-filter: blur(1rem);
}
.blobs .blob-2 {
  animation-duration: 18s;
  animation-direction: alternate-reverse;
}
.blobs .blob-2 path {
  fill: var(--blob-2);
  animation-name: blob-anim-2;
  animation-duration: 7s;
  filter: blur(0.75rem);
  -webkit-filter: blur(0.75rem);
  transform: scale(0.78);
}
.blobs .blob-2.alt {
  animation-direction: alternate;
}
.blobs .blob-3 {
  animation-duration: 23s;
}
.blobs .blob-3 path {
  fill: var(--blob-3);
  animation-name: blob-anim-3;
  animation-duration: 6s;
  filter: blur(0.5rem);
  -webkit-filter: blur(0.5rem);
  transform: scale(0.76);
}
.blobs .blob-4 {
  animation-duration: 31s;
  animation-direction: alternate-reverse;
  opacity: 0.9;
}
.blobs .blob-4 path {
  fill: var(--blob-4);
  animation-name: blob-anim-4;
  animation-duration: 10s;
  filter: blur(10rem);
  -webkit-filter: blur(10rem);
  transform: scale(0.5);
}
.blobs .blob-4.alt {
  animation-direction: alternate;
  opacity: 0.8;
}
@keyframes blob-anim-1 {
  0% {
    d: path("M 100 600 q 0 -500, 500 -500 t 500 500 t -500 500 T 100 600 z");
  }
  30% {
    d: path("M 100 600 q -50 -400, 500 -500 t 450 550 t -500 500 T 100 600 z");
  }
  70% {
    d: path("M 100 600 q 0 -400, 500 -500 t 400 500 t -500 500 T 100 600 z");
  }
  100% {
    d: path("M 150 600 q 0 -600, 500 -500 t 500 550 t -500 500 T 150 600 z");
  }
}
@keyframes blob-anim-2 {
  0% {
    d: path("M 100 600 q 0 -400, 500 -500 t 400 500 t -500 500 T 100 600 z");
  }
  40% {
    d: path("M 150 600 q 0 -600, 500 -500 t 500 550 t -500 500 T 150 600 z");
  }
  80% {
    d: path("M 100 600 q -50 -400, 500 -500 t 450 550 t -500 500 T 100 600 z");
  }
  100% {
    d: path("M 100 600 q 100 -600, 500 -500 t 400 500 t -500 500 T 100 600 z");
  }
}
@keyframes blob-anim-3 {
  0% {
    d: path("M 100 600 q -50 -400, 500 -500 t 450 550 t -500 500 T 100 600 z");
  }
  35% {
    d: path("M 150 600 q 0 -600, 500 -500 t 500 550 t -500 500 T 150 600 z");
  }
  75% {
    d: path("M 100 600 q 100 -600, 500 -500 t 400 500 t -500 500 T 100 600 z");
  }
  100% {
    d: path("M 100 600 q 0 -400, 500 -500 t 400 500 t -500 500 T 100 600 z");
  }
}
@keyframes blob-anim-4 {
  0% {
    d: path("M 150 600 q 0 -600, 500 -500 t 500 550 t -500 500 T 150 600 z");
  }
  30% {
    d: path("M 100 600 q 100 -600, 500 -500 t 400 500 t -500 500 T 100 600 z");
  }
  70% {
    d: path("M 100 600 q -50 -400, 500 -500 t 450 550 t -500 500 T 100 600 z");
  }
  100% {
    d: path("M 150 600 q 0 -600, 500 -500 t 500 550 t -500 500 T 150 600 z");
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media only screen and (max-width: 1900px) {
  #oled {
    top:-10vw;
  }
  #leftside {
    justify-content: normal;
  }
  #disclaimer {
    margin-top:17vw;
  }
}

@media only screen and (max-width: 1000px) {
    body {
        background-size:initial;
        max-height:800px;
        overflow:hidden;
    }

    .blob-container {
      justify-content: center;
      top:-6vw;
      height:40vw;
      left:10vw;
    }

    #oled {
        top:32vw;
        transform: translate(-50%, 0);
        width:210vw;
        position:absolute;
    }

    #container {
        flex-direction: column;
        align-items: center;
        gap:30px;
        padding:0;
    }

    #leftside, #rightside {
        width:100%;
    }

    #leftside {
        padding-bottom:0;
    }

    #rightside {
      max-height:1dvh;
    }

    #logo {
        width: 70vw;
    }

    h2 {
        font-size: 4vw;
        margin-left:3vw;
        margin-top:-2vw;
    }

    .desktop {
        display:none;
    }

    .mobile {
        display:block;
    }

    .linebreak {
        display:none;
    }

    h1 {
        font-size:45px;
    }

    #disclaimer {
        /*margin-top:-100px;*/
        padding:0 20px;
        position:fixed;
        bottom:0;
        margin-bottom:10px;
        pointer-events: none;
    }
}