/* sinsosu.com homepage — Page 422 */
:root {
    --void: #06051A;
    --cream: #FAF7F2;
    --gold: #FFD700;
    --charcoal: #2D2D2D;
    --indigo: #1C1464;
}

body {
    font-family: 'Noto Serif JP', serif;
    font-size: 20px;
    line-height: 1.8;
    background-color: var(--void);
    color: var(--cream);
    overflow-x: hidden;
}

.ambient-noise {
    position: fixed; inset: 0; z-index: 50;
    pointer-events: none; opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.reveal-element {
    opacity: 0;
    transform: translate3d(0, 70px, -80px) rotateX(4deg);
    will-change: transform, opacity;
    transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-element.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg);
}
.reveal-left  { transform: translate3d(-80px, 30px, -60px) rotateY(6deg); }
.reveal-right { transform: translate3d(80px, 30px, -60px) rotateY(-6deg); }
.reveal-left.is-visible,
.reveal-right.is-visible { transform: translate3d(0,0,0) rotateY(0deg); }

@keyframes float-drift {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33%       { transform: translateY(-18px) rotate(0.5deg); }
    66%       { transform: translateY(-8px)  rotate(-0.3deg); }
}
@keyframes spin-slow {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes scroll-cue {
    0%, 100% { opacity: .3; transform: translateY(0); }
    50%       { opacity: .8; transform: translateY(10px); }
}

.float-ring   { animation: float-drift 14s ease-in-out infinite; }
.spin-ring    { animation: spin-slow 72s linear infinite; transform-origin: 160px 160px; }
.scroll-arrow { animation: scroll-cue 2s ease-in-out infinite; }

.glass-card {
    background: rgba(28, 20, 100, 0.22);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12),
                0 24px 48px -12px rgba(0,0,0,0.55);
    position: relative; overflow: hidden;
}
.glass-card::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(
        640px circle at var(--mx, -200px) var(--my, -200px),
        rgba(255,215,0,.08), transparent 45%
    );
    z-index: 0;
}

.ghost-input {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--cream);
    font-family: 'Noto Serif JP', serif;
    font-size: 28px; font-weight: 700;
    -moz-appearance: textfield;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}
.ghost-input::-webkit-outer-spin-button,
.ghost-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ghost-input::placeholder { color: rgba(250,247,242,.22); }
.ghost-input:focus {
    border-color: rgba(255,215,0,.55);
    box-shadow: 0 0 22px rgba(255,215,0,.12);
    outline: none; transform: translateY(-2px);
}

.btn-gold {
    background: var(--gold); color: var(--void);
    position: relative; overflow: hidden;
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;
    font-family: 'Zen Old Mincho', serif;
    font-weight: 700;
}
.btn-gold::after {
    content: '';
    position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
    transform: skewX(-18deg);
    transition: left .55s ease;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(255,215,0,.45); }
.btn-gold:hover::after { left: 160%; }
.btn-gold:active { transform: translateY(0); }
@media (hover: none) {
    .btn-gold:hover { transform: none; box-shadow: none; }
    .btn-gold:hover::after { left: -120%; }
    button:hover { transform: none !important; }
}

.gold-bubble {
    background: radial-gradient(circle at 32% 28%, #FFFDE7 0%, #FFD700 28%, #C8960C 72%, #8B6508 100%);
    box-shadow: inset -8px -8px 18px rgba(0,0,0,.28),
                inset 8px 8px 18px rgba(255,255,255,.55),
                0 16px 36px rgba(0,0,0,.22);
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.gold-bubble::after {
    content: ''; position: absolute;
    top: 11%; left: 16%; width: 30%; height: 28%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.82) 0%, rgba(255,255,255,0) 70%);
}
.gold-bubble span { position: relative; z-index: 1; }

.kanji-bg {
    font-family: 'Zen Old Mincho', serif;
    font-size: clamp(160px, 38vw, 280px);
    line-height: 1; user-select: none;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,.18);
}

.cosmos-bg {
    background: radial-gradient(ellipse 80% 60% at 50% 0%, #1C1464 0%, #06051A 70%);
}

/* Calculator inside glass-card — strip the inner card's own background */
.glass-card .ss-calc-card {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    overflow: visible;
}
.glass-card .ss-calc-wrap {
    max-width: 100%;
    padding: 0;
}