From aa6bf35188e8861b055ee5a8b1847ba6e6b5577b Mon Sep 17 00:00:00 2001
From: t404owo <tags4owo@gmail.com>
Date: Mon, 8 Jun 2026 09:00:27 +0200
Subject: [PATCH] Added animation for age startup and transitions. (And removed
 the unused css file)

---
 assets/css/main.css |  39 +-
 main.css            | 950 --------------------------------------------
 2 files changed, 37 insertions(+), 952 deletions(-)
 delete mode 100644 main.css

diff --git a/assets/css/main.css b/assets/css/main.css
index bb6eb2e..1acd192 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -5,8 +5,7 @@
 
 body {
   margin: 0px;
-  height: 100%;
-}
+ }
 
 main,
 textarea,
@@ -21,6 +20,13 @@ main {
   margin-bottom: 0;
   margin-top: 0;
   min-height: calc(100vh - 10vh);
+  view-transition-name: main-page;
+  transition-property: opacity, display;
+  transition-duration: 1s;
+  opacity: 1;
+  @starting-style {
+    opacity: 0;
+  }
 }
 
 .main-page {
@@ -950,3 +956,32 @@ textfield {
     }
   }
 }
+
+@view-transition {
+  navigation: none;
+  animation: none;
+  
+}
+
+::view-transition-group(main-page) {
+  animation-timing-function: ease-out;
+}
+::view-transition-old(main-page) {
+  animation-name: fade-out;
+}
+
+::view-transition-new(main-page) {
+  animation-name: fade-in;
+}
+
+@keyframes fade-out {
+  0% { opacity: 1; translate: 0;}
+  50% { opacity: 0; translate: -1wv;}
+  100% { opacity: 0;}
+}
+
+@keyframes fade-in {
+  0% { opacity: 0; translate: -1wv;}
+  50% { opacity: 0; translate: 0;}
+  100% { opacity: 1;}
+}
\ No newline at end of file
diff --git a/main.css b/main.css
deleted file mode 100644
index 7d19842..0000000
--- a/main.css
+++ /dev/null
@@ -1,950 +0,0 @@
-@import url("/assets/css/fonts/jost.css");
-@import url("/assets/css/fonts/noto-sans-jp.css");
-@import url("/assets/css/fonts/plus-jarkata-sans.css");
-@import url("/assets/css/old.css");
-
-body {
-    margin: 0px;
-    height: 100%;
-}
-
-main,
-textarea,
-textfield {
-    font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system;
-    font-size: 1.25rem;
-}
-
-main {
-    margin: 0.75rem;
-    height: 100%;
-    margin-bottom: 0;
-    margin-top: 0;
-    min-height: calc(100vh - 10vh);
-}
-
-.main-page {
-    max-width: 2300px;
-    margin: 0 auto;
-}
-
-.logo {
-    height: 3.75rem;
-    width: auto;
-}
-
-hr {
-    margin: 2rem 0px;
-}
-
-nav {
-    z-index: 4;
-    position: -webkit-sticky;
-    position: sticky;
-    /*   width:100%; */
-    top: 10px;
-    background-color: #f5f5f5;
-    font-family:
-        "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif, --apple-system;
-    font-size: 1.25rem;
-    padding: 4px;
-    margin: 10px;
-    margin-top: 15px;
-    border-radius: 12px;
-    box-shadow: 0px 0px 12px 0.1px #d0d0d0;
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-
-    ul {
-        padding-left: 15px;
-        list-style-type: none;
-        margin: 0px;
-        align-content: center;
-
-        li {
-            display: inline-block;
-            padding-right: 4px;
-            vertical-align: middle;
-
-            p {
-                padding-top: 0.4rem;
-                vertical-align: middle;
-                margin: 0.5rem 1rem;
-            }
-        }
-
-        img {
-            margin-top: 0.25rem;
-            height: 1.5rem;
-            vertical-align: middle;
-            padding-right: 0.3rem;
-        }
-    }
-
-    a {
-        color: black;
-        text-decoration: none;
-
-        -webkit-touch-callout: none;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-    }
-
-    .vertical-line {
-        width: 0.1rem;
-        background-color: black;
-        height: 100%;
-    }
-
-    .social {
-        font-size: 2.5rem;
-        padding-bottom: 0.4rem;
-        transition: 0.3s;
-    }
-
-    .social:hover {
-        opacity: 50%;
-    }
-
-    .dropdown {
-        margin: 0.75rem;
-        position: absolute;
-        background-color: #f5f5f5;
-        box-shadow: 0px 0px 12px 0.1px #d0d0d0;
-        padding: 0.25rem 0.5rem;
-        border-radius: 7px;
-        right: 0;
-        top: 6rem;
-        display: none;
-        opacity: 0;
-        transition: 0.3s;
-    }
-}
-
-.footer {
-    font-family: Jost, "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif;
-    position: sticky;
-    /*   width: 100%; */
-    background-color: white;
-    /*   bottom: 0; */
-    /*   left:0; */
-    z-index: 3;
-    padding: 1rem;
-    background-color: #ddd;
-    margin: 0px;
-    text-align: center;
-    align-content: center;
-}
-
-/*---nav---*/
-
-.menu {
-    padding-top: 0.4rem;
-    padding-bottom: 0.8rem;
-
-    p {
-        background-size: 0% 0.2em;
-        background-image: linear-gradient(#000, #000);
-        background-position-y: 104%;
-        background-position-x: 0%;
-        background-repeat: no-repeat;
-        transition: 0.3s ease-in-out;
-    }
-
-    p:hover,
-    .currentpage {
-        opacity: 60%;
-        background-size: 100% 0.2em;
-    }
-}
-
-.burger {
-    border: none;
-    display: none;
-    width: 70px;
-    height: 70px;
-    margin: 0 0;
-    position: relative;
-    position: relative;
-    cursor: pointer;
-    background-color: #f5f5f5;
-    border-radius: 12px;
-    transition: 0.2s ease-in-out;
-
-    span {
-        transition: 0.2s ease-in-out;
-        box-sizing: border-box;
-        display: block;
-        background-color: #000;
-        border-radius: 2px;
-    }
-
-    #hamburger {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        top: 0%;
-        left: 0%;
-
-        span {
-            width: 70%;
-            height: 5%;
-            top: 17.5%;
-            left: 16%;
-            position: relative;
-            margin: 12% 0;
-        }
-
-        span:nth-child(1) {
-            transition-delay: 0.2s;
-        }
-
-        span:nth-child(2) {
-            transition-delay: 0.3s;
-        }
-
-        span:nth-child(3) {
-            transition-delay: 0.4s;
-        }
-    }
-
-    #cross {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        top: 0%;
-        left: 1.5%;
-        transform: rotate(45deg);
-
-        span:nth-child(1) {
-            height: 0%;
-            width: 5%;
-            position: absolute;
-            right: 46%;
-            /*a / */
-            top: 10%;
-            transform: translate(-50%);
-            transition-delay: 0s;
-        }
-
-        span:nth-child(2) {
-            width: 0%;
-            height: 5%;
-            position: absolute;
-            right: 11%;
-            top: 48%;
-            transition-delay: 0s;
-        }
-    }
-}
-
-.burger:hover {
-    opacity: 40%;
-}
-
-.burger.open {
-    #hamburger {
-        span {
-            width: 0%;
-        }
-
-        span:nth-child(1) {
-            transition-delay: 0s;
-        }
-
-        span:nth-child(2) {
-            transition-delay: 0.1s;
-        }
-
-        span:nth-child(3) {
-            transition-delay: 0.2s;
-        }
-    }
-
-    #cross {
-        span:nth-child(1) {
-            height: 80%;
-            transition-delay: 0.3s;
-        }
-
-        span:nth-child(2) {
-            width: 80%;
-            transition-delay: 0.3s;
-        }
-    }
-}
-
-.dropdown {
-    display: none;
-    overflow: auto;
-    max-height: 70vh;
-}
-
-/*---- main ----*/
-.container {
-    position: relative;
-    height: 50vw;
-    width: 100%;
-    margin: auto;
-    margin-top: 1rem;
-}
-
-.carousel {
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    border: 1px solid #ddd;
-    border-radius: 0.5rem;
-    position: relative;
-    overflow: hidden;
-}
-
-.slider-bg {
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-size: cover;
-    background-position: center;
-    filter: blur(5px) brightness(75%);
-    -webkit-filter: blur(5px) brightness(60%);
-    z-index: 1;
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    transition: 0.3s;
-    padding: auto;
-    border-radius: 0.5rem;
-    transform: scale(1.1);
-}
-
-.slider section {
-    overflow: hidden;
-    z-index: 1;
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    transition: 0.3s;
-    padding: auto;
-    width: 100%;
-    height: 100%;
-    border-radius: 0.5rem;
-    font-family:
-        "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif, --apple-system;
-
-    div {
-        color: #fff;
-        position: relative;
-        z-index: 2;
-        margin: 0px;
-        display: grid;
-        justify-content: center;
-        grid-template-rows: 3.5fr 1fr 1fr 5rem;
-        grid-template-columns: 1fr auto 1fr;
-    }
-
-    h1 {
-        font-size: 2rem;
-        grid-row-start: 2;
-        grid-row-end: 3;
-    }
-
-    p {
-        font-size: 1.25rem;
-        grid-row-start: 3;
-        grid-row-end: 4;
-    }
-
-    p,
-    h1 {
-        width: 60vw;
-        text-align: center;
-        grid-column-start: 2;
-        /*|•|*/
-        grid-column-end: 3;
-    }
-}
-
-.slider:hover {
-    cursor: pointer;
-}
-
-.prev,
-.next {
-    background-color: rgba(0, 0, 0, 0.3);
-    color: #fff;
-    position: absolute;
-    height: 5rem;
-    width: 5rem;
-    font-size: 4.5rem;
-    top: 50%;
-    transform: translate(0, -50%);
-    z-index: 2;
-    cursor: pointer;
-    border-radius: 0.5rem;
-    font-family: serif;
-
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.next {
-    right: 1rem;
-}
-
-.prev {
-    left: 1rem;
-}
-
-.pgctrl {
-    font-family: sans-serif, --apple-system;
-    z-index: 1;
-    position: absolute;
-    bottom: 0.5rem;
-    left: 50%;
-    vertical-align: middle;
-    transform: translate(-50%);
-    padding: 0px 0.5rem;
-    margin: 0px 0px;
-    background-color: rgba(0, 0, 0, 0.3);
-    border-radius: 10px;
-    list-style: none;
-    display: flex;
-    z-index: 2;
-    font-size: 4rem;
-    color: white;
-    cursor: pointer;
-    transition: 0.75s;
-
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.control {
-    text-align: center;
-}
-
-/* Cards */
-
-.album-cards {
-    margin: auto;
-    margin-bottom: 2.5rem;
-    justify-content: center;
-    display: grid;
-    grid-template-rows: repeat(auto-fill, 23rem);
-    grid-template-columns: repeat(auto-fill, 23rem);
-    grid-gap: 1rem;
-
-    .card {
-        transition: 0.75s;
-        color: black;
-        background-color: #ddd;
-        height: 23rem;
-        border-radius: 7px;
-        text-decoration: none;
-
-        div {
-            z-index: 1;
-            position: inherit;
-            height: 100%;
-            width: 100%;
-            background-color: #ddd;
-            border-radius: 7px;
-            transition: 0.5s;
-        }
-
-        h2 {
-            font-size: 1.9rem;
-        }
-
-        p {
-            font-size: 1.2rem;
-        }
-
-        h2,
-        p {
-            color: white;
-            padding: 0.3rem 0.75rem 0.3rem 0.75rem;
-            position: relative;
-            z-index: 3;
-            opacity: 0;
-            transition: 0.5s;
-        }
-
-        .bg-img {
-            /*       background: url(/assets/img/t404_null-logo.png); */
-            background-size: cover;
-            position: absolute;
-            height: 23rem;
-            width: 23rem;
-        }
-    }
-
-    .card:hover {
-        .bg-img {
-            filter: blur(5px) brightness(50%);
-            -webkit-filter: blur(5px) brightness(50%);
-        }
-
-        h2,
-        p {
-            filter: none;
-            opacity: 1;
-        }
-    }
-}
-
-.half-image-cards {
-    margin: auto;
-    margin-bottom: 2.5rem;
-    justify-content: center;
-    display: grid;
-    grid-template-rows: repeat(auto-fill, 30rem);
-    grid-template-columns: repeat(auto-fill, minmax(23rem, 60rem));
-    grid-gap: 1rem;
-
-    .card {
-        transition: 0.75s;
-        color: black;
-        background-color: #ddd;
-        height: 30rem;
-        border-radius: 7px;
-        text-decoration: none;
-
-        div {
-            z-index: 1;
-            position: inherit;
-            height: 100%;
-            width: 100%;
-            background-color: #ddd;
-            border-radius: 7px;
-            transition: 0.5s;
-        }
-
-        h2 {
-            font-size: 1.9rem;
-        }
-
-        p {
-            font-size: 1.1rem;
-        }
-
-        h2,
-        p {
-            /*       color: black; */
-            padding: 0.3rem 10vw 0.3rem 5vw;
-            position: relative;
-            z-index: 3;
-            opacity: 0;
-            transition: 0.5s;
-        }
-
-        .bg-img {
-            /*       background: url(/assets/img/t404_null-logo.png); */
-            background-size: cover;
-            position: absolute;
-            background-position: center left;
-            height: 30rem;
-            width: 30rem;
-        }
-    }
-
-    .card:hover {
-        .bg-img {
-            filter: brightness(40%);
-            -webkit-filter: brightness(40%);
-            width: 8vw;
-            border-radius: 7px 0px 0px 7px;
-        }
-
-        h2,
-        p {
-            padding: 0.3rem 5vw 0.3rem 10vw;
-            filter: none;
-            opacity: 1;
-        }
-    }
-}
-
-.contact-cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, 23rem);
-    grid-gap: 1rem;
-    justify-content: center;
-    padding: 0;
-
-    li {
-        border-radius: 7px;
-        background-color: #ddd;
-    }
-}
-
-.contact-email {
-    .inputbox {
-        outline: none;
-        height: 3rem;
-        width: 100%;
-        display: block;
-        background: #efefef;
-        color: black;
-        border: 0px solid #505050;
-        border-radius: 5px;
-        transition: 0.3s;
-        margin-top: 0.5rem;
-        margin-left: -5px;
-        padding: 5px;
-        font-size: 0.95rem;
-    }
-
-    :not(textarea) {
-        text-align: center;
-    }
-
-    .inputbox:hover {
-        background: #dedede;
-    }
-
-    .inputbox:focus {
-        background: #cecece;
-    }
-
-    button {
-        width: 100%;
-        height: 3rem;
-        border-radius: 5px;
-        text-align: center;
-    }
-
-    .formbutton {
-        background: #272727;
-        color: #fff;
-        border: 0px;
-        transition-duration: 300ms;
-        cursor: pointer;
-    }
-
-    .formbutton:hover {
-        background: #727272;
-    }
-
-    .form {
-        border-radius: 5px;
-        align-items: center;
-        justify-content: center;
-        margin: auto;
-        padding: 4rem 2.5rem;
-        width: 65%;
-        background: #fdfdfd;
-        box-shadow: rgba(50, 50, 50, 0.1) 0px 4px 12px;
-    }
-
-    .error_box {
-        background: #ffeeee;
-        border-radius: 5px;
-
-        margin: auto;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-        padding: 1rem 1rem;
-        margin-bottom: 1.5rem;
-    }
-
-    .box {
-        height: 2rem;
-        width: 100%;
-        text-align: center;
-        border-radius: 5px;
-        margin: auto;
-        align-items: center;
-        justify-content: center;
-        padding: 0.5rem 0px;
-        margin-bottom: 1rem;
-    }
-}
-
-textarea,
-textfield {
-    padding: 5px;
-    resize: vertical;
-    min-height: 5rem;
-}
-
-.topic {
-    padding: 1rem;
-    font-size: 3rem;
-    margin-top: 3vw;
-    margin-bottom: 7vw;
-
-    a {
-        text-decoration: none;
-        color: black;
-        background-size: 0% 0.2em;
-        background-image: linear-gradient(black, black);
-        background-position-y: 104%;
-        background-position-x: 0%;
-        background-repeat: no-repeat;
-        transition: 0.3s ease-in-out;
-    }
-
-    a:hover {
-        opacity: 70%;
-        background-size: 100% 0.2em;
-    }
-}
-
-/* overall */
-.icons {
-    font-size: 2.25rem;
-    font-weight: 500;
-}
-
-@font-face {
-    font-family: "NerdFontsSymbols Nerd Font";
-    src: url("https://www.nerdfonts.com/assets/fonts/Symbols-2048-em Nerd Font Complete.woff2")
-        format("woff2");
-}
-
-.nf-icons {
-    font-family: "NerdFontsSymbols Nerd Font";
-}
-
-/* Releases */
-.release-track {
-    background-size: cover;
-    background-position: center;
-    height: 100%;
-    min-height: calc(100vh - 25rem);
-    padding: 5vw 5vw;
-    border-radius: 10px;
-    border: 1px solid #ddd;
-
-    strong {
-        color: #fff;
-    }
-
-    .text-box {
-        max-width: 1250px;
-        margin: 25% auto;
-        background-color: rgba(0, 0, 0, 75%);
-        height: 100%;
-        color: #ddd;
-        padding: 2rem;
-        border-radius: 7px;
-        font-size: 1.2rem;
-
-        a {
-            text-decoration: none;
-            color: #fff;
-            background-size: 0% 0.2em;
-            background-image: linear-gradient(#ccc, #ccc);
-            background-position-y: 104%;
-            background-position-x: 0%;
-            background-repeat: no-repeat;
-            transition: 0.3s ease-in-out;
-        }
-
-        a:hover {
-            color: #ccc;
-            background-size: 100% 0.2em;
-        }
-    }
-}
-
-/* info */
-.info {
-    text-decoration: none;
-    list-style-type: none;
-    font-size: 1.4rem;
-
-    li {
-        padding: 1rem;
-    }
-
-    a {
-        text-decoration: none;
-        color: #46f;
-        background-size: 0% 0.2em;
-        background-image: linear-gradient(#46f, #46f);
-        background-position-y: 104%;
-        background-position-x: 0%;
-        background-repeat: no-repeat;
-        transition: 0.3s ease-in-out;
-    }
-
-    a:hover {
-        opacity: 70%;
-        background-size: 100% 0.2em;
-    }
-
-    .title {
-        font-size: 1.6rem;
-    }
-}
-
-.subdiv {
-    padding: 1rem;
-}
-
-.long-br {
-    display: block;
-    height: 2rem;
-}
-
-@media screen and (width >=1180px) and (width<=1690px) {
-    /*if(width<1620px&&width>=1125px)*/
-
-    nav {
-        .dropdown {
-            .dropdown-social {
-                position: relative;
-                width: 17.5rem;
-                padding: 0rem 0rem;
-
-                a {
-                    transition: 0.2s;
-                    display: flex;
-                    padding: 1rem;
-                    border-radius: 7px;
-                    margin: 0.3rem 0;
-                }
-
-                a:hover {
-                    background-color: #ddd;
-                }
-
-                strong {
-                    margin-left: auto;
-                    margin-right: auto;
-                    align-content: center;
-                }
-
-                p {
-                    margin: 0.5rem 0;
-                }
-            }
-
-            .dropdown-menu {
-                display: none;
-            }
-        }
-
-        .menu,
-        .dropdown-open.dropdown,
-        .dropdown-open.dropdown-social {
-            opacity: 1;
-            display: initial;
-        }
-
-        .social,
-        .dropdown-open.dropdown-menu {
-            opacity: 0;
-            display: none;
-        }
-
-        .burger {
-            display: block;
-        }
-    }
-}
-
-@media screen and (width<1180px) {
-    /*if(width<1125px)*/
-
-    nav {
-        font-size: 1.4rem;
-
-        ul {
-            img {
-                height: 2.5rem;
-            }
-        }
-
-        .social {
-            font-size: 2rem;
-        }
-
-        .burger {
-            height: 100px;
-            width: 100px;
-        }
-
-        .dropdown {
-            .dropdown-social,
-            .dropdown-menu {
-                position: relative;
-            }
-
-            .dropdown-menu {
-                width: 18rem;
-                padding: 0rem 0rem;
-            }
-
-            .dropdown-social {
-                display: flex;
-                flex-wrap: wrap;
-            }
-
-            .dropdown-menu p,
-            .dropdown-social a {
-                transition: 0.2s;
-                padding: 1rem;
-                border-radius: 7px;
-                margin: 0.3rem 0;
-            }
-
-            .dropdown-menu p:hover {
-                background-color: #ddd;
-            }
-
-            .dropdown-social a:hover {
-                opacity: 50%;
-            }
-
-            hr {
-                margin: 0.75rem 0rem;
-                padding: 1rem;
-                border: 1px solid #aaa;
-            }
-        }
-
-        .social-name {
-            display: none;
-        }
-
-        .social,
-        .menu-item {
-            display: none;
-        }
-
-        .dropdown-open {
-            transition: 0.3s;
-            opacity: 1;
-            display: initial;
-
-            .dropdown,
-            .dropdown-social,
-            .downdown-menu {
-                display: initial;
-            }
-        }
-
-        .burger {
-            display: block;
-        }
-    }
-}