html {
  scroll-behavior: smooth;
}

#preloader {
  font-family: "Cormorant Garamond", serif;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #43281c;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition:
    opacity 0.6s ease-in-out,
    visibility 0.6s ease-in-out;
}

.preloader-content {
  text-align: center;
}

.kokoro-transition {
  font-size: 3rem;
  letter-spacing: 0.1em;
  color: #d1768f;
  -webkit-animation: focus-in-expand-fwd 1s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
  animation: focus-in-expand-fwd 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

#site-content {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out;
}

#preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}

#site-content.fade-in {
  opacity: 1;
  visibility: visible;
}

.navbar {
  font-family: "Cormorant Garamond", serif;
}

.mask-custom {
  backdrop-filter: blur(5px);
  background-color: rgba(67, 40, 28, 0.6);
}

.navbar-brand {
  font-size: 1.75rem;
  letter-spacing: 3px;
  max-width: 50%;
}

#logo {
  height: auto;
  max-width: 20%;
}

#display-name {
  font-size: 1rem;
}

.navbar-brand,
.nav-link,
.navbar-toggler {
  color: #d1768f;
}

.fa-hornbill {
  display: inline-block;
  transition: transform 0.4s ease-in-out;
  cursor: pointer;
}

.fa-hornbill:hover {
  transform: rotate(20deg);
}

.fa-hornbill.is-active {
  transform: rotate(180deg);
}

.fa-hornbill.is-active:hover {
  transform: rotate(200deg);
}

body {
  background-color: #43281c;
  font-family: Inter, sans-serif;
}

#hero,
#shop,
#connect {
  background-image: url(media/bgImage.png);
  background-position: 50% 90%;
  position: relative;
  width: 100%;
  height: 65vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.gallery-track {
  display: flex;
  width: max-content;
  animation: galleryPanLeft 30s linear infinite;
}

.gallery-track:hover {
  animation-play-state: paused;
}

.art-set {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 20px;
  padding-right: 20px;
}

.art-piece {
  height: 40vh;
  width: auto;
  object-fit: contain;
  border: 1px solid #fbf2c0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 6);
  border-radius: 2px;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}

.art-piece:hover {
  transform: scale(1.04);
  border-color: #fbf2c0;
}

.floating-overlay {
  color: #fbf2c0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  font-family: "Cormorant Garamond", serif;
}

.floating-overlay div {
  background-color: #43281c;
}

p.small {
  opacity: 50%;
}

.hero-floating-overlay div {
  pointer-events: auto;
}

.cta {
  background-color: #fbf2c0;
  color: #d1768f;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 6);
}

.cta:hover {
  background-color: #d1768f;
  transform: scale(1.04);
}

#shop {
  color: #43281c;
  background-position: 50% 10%;
  height: 85vh;
}

.divider {
  top: -6%;
}

.chocolate {
  color: #43281c;
}

.strawberry {
  color: #d1768f;
}

.vanilla {
  color: #fbf2c0;
}

h3 {
  color: #d1768f;
}

#connect {
  background-position: 50% 10%;
  height: 50vh;
}

.site-footer {
  text-align: center;
  padding: 4rem 1.5rem 2rem;
  color: #fbf2c0;
  font-family: "Cormorant Garamond", serif;
}

.site-footer p {
  margin-bottom: 0.75rem;
}

.footer-copyright,
.footer-credit {
  font-size: 0.9rem;
  opacity: 0.7;
}

.footer-disciplines {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8;
}

.footer-dot {
  font-size: 0.35rem;
  margin: 0 0.6rem;
  vertical-align: middle;
  color: #ddb1bf;
}

@keyframes galleryPanLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2026-6-14 17:14:20
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation focus-in-expand-fwd
 * ----------------------------------------
 */
@-webkit-keyframes focus-in-expand-fwd {
  0% {
    letter-spacing: -0.5em;
    -webkit-transform: translateZ(-800px);
    transform: translateZ(-800px);
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes focus-in-expand-fwd {
  0% {
    letter-spacing: -0.5em;
    -webkit-transform: translateZ(-800px);
    transform: translateZ(-800px);
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}
@media (min-width: 576px) {
  #shop {
    background-position: 50% 45%;
  }
}
@media (min-width: 768px) {
  #hero {
    height: 90vh;
  }

  .art-piece {
    height: 56vh;
  }

  .art-set {
    gap: 45px;
    padding-right: 45px;
  }

  .gallery-track {
    animation-duration: 40s;
  }

  .divider {
    top: -12%;
  }

  @keyframes marqueePanLeft {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-50%);
    }
  }
}

@media (min-width: 992px) {
  .navbar-collapse {
    font-size: 1.5rem;
  }
}