/* fallback */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v339/kJEPBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzBwG-RpA6RzaxHMPdY40KH8nGzv3fzfVJO1Q.woff2) format('woff2');
  }
  
  .material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }
  :root {
    --noto-serif: "Noto Serif SC", serif;
    --inter: "Inter", sans-serif
    }
body {
    background-color: #fff8f4;
    background-image: radial-gradient(#d6c4b0 0.5px, transparent 0.5px);
    background-size: 24px 24px;
    opacity: 1
    }
.grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.03;
    }
.warm-glow {
    box-shadow: 0 0 60px 20px rgba(255, 183, 77, 0.4);
    animation: pulse-glow 4s infinite ease-in-out
    }
@keyframes pulse-glow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
        } 50% {
        transform: scale(1.1);
        opacity: 1;
        }
    }
.typewriter-text::after {
    content: "|";
    animation: blink 1s infinite
    }
@keyframes blink {
    50% {
        opacity: 0;
        }
    }
.reveal-card {
    opacity: 0;
    transform: translatey(20px);
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1)
    }
.reveal-card.visible {
    opacity: 1;
    transform: translatey(0)
    }
.handwritten-font {
    font-family: "Noto Serif SC", serif;
    font-style: italic
    }
.sticky-nav-active {
    @apply shadow-sm backdrop-blur-md bg-surface/80;
    }