body {
background-color: #080808;
color: #f3f3f3;
font-family: 'Noto Serif JP', serif;
overflow-x: hidden;
scroll-behavior: smooth;
}
/* Custom Cursor Style (Desktop only) */
@media (min-width: 1024px) {
* {
cursor: none !important;
}
}
#custom-cursor {
pointer-events: none;
position: fixed;
top: 0;
left: 0;
width: 24px;
height: 24px;
border: 1px solid rgba(201, 168, 106, 0.8);
border-radius: 50%;
z-index: 9999;
transform: translate(-50%, -50%);
transition: transform 0.15s ease-out, width 0.2s ease, height 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
#custom-cursor-dot {
pointer-events: none;
position: fixed;
top: 0;
left: 0;
width: 4px;
height: 4px;
background-color: #c9a86a;
border-radius: 50%;
z-index: 10000;
transform: translate(-50%, -50%);
transition: transform 0.05s ease-out;
}
.cursor-hover {
width: 48px !important;
height: 48px !important;
background-color: rgba(201, 168, 106, 0.15) !important;
border-color: #dfc182 !important;
}
/* Gold Gradient Elements */
.gold-gradient-text {
background: linear-gradient(135deg, #f3e7e1 0%, #c9a86a 50%, #dfc182 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.gold-gradient-bg {
background: linear-gradient(135deg, #c9a86a 0%, #dfc182 100%);
}
/* Scroll Animations */
.reveal-element {
opacity: 0;
transform: translateY(40px);
transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-element.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Horizontal Drag Scroll Custom Styles */
.horizontal-scroll-container {
cursor: grab;
scroll-behavior: smooth;
}
.horizontal-scroll-container:active {
cursor: grabbing;
}
.horizontal-scroll-container::-webkit-scrollbar {
height: 4px;
}
.horizontal-scroll-container::-webkit-scrollbar-track {
background: #121212;
}
.horizontal-scroll-container::-webkit-scrollbar-thumb {
background: #c9a86a;
border-radius: 2px;
}
/* Glass Header */
.glass-header {
background: rgba(8, 8, 8, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* Parallax Hero Background */
.hero-bg {
background-image: linear-gradient(to bottom, rgba(8, 8, 8, 0.4), rgba(8, 8, 8, 0.95)), url('https://images.unsplash.com/photo-1616627547584-bf28cee262db?auto=format&fit=crop&w=1920&q=80');
background-size: cover;
background-position: center;
}