/* =====================================================
   RESET
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
   width: 100%;
   height: 100%;
   overflow: hidden;
   background: #050505;
   color: #f5f1e8;
   font-family: 'Inter', system-ui, sans-serif;
   cursor: none;
}

/* =====================================================
   TITLE — sits behind the canvas; canvas blends
   ===================================================== */
.title {
   position: fixed;
   inset: 0;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.05em;
   font-family: 'Inter', sans-serif;
   font-weight: 900;
   font-size: clamp(80px, 16vw, 240px);
   line-height: 0.9;
   letter-spacing: -0.05em;
   color: #f5f1e8;
   pointer-events: none;
   user-select: none;
}

.title em {
   font-family: 'Instrument Serif', Georgia, serif;
   font-style: italic;
   font-weight: 400;
   font-size: 1.2em;
   color: #f5f1e8;
}

/* =====================================================
   CANVAS — WebGL renders metaballs + chromatic aberration
   mix-blend: lighten so liquid colour mixes with text but
   doesn't fully cover it; gives the "embedded" feel.
   ===================================================== */
#js-canvas {
   position: fixed;
   inset: 0;
   z-index: 2;
   width: 100%;
   height: 100%;
   mix-blend-mode: lighten;
}

/* =====================================================
   HINT
   ===================================================== */
.hint {
   position: fixed;
   bottom: 32px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 3;
   padding: 10px 20px;
   border: 1px solid rgba(245, 241, 232, 0.3);
   border-radius: 999px;
   font-family: 'Inter', sans-serif;
   font-weight: 500;
   font-size: 11px;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: #f5f1e8;
   pointer-events: none;
   transition: opacity 0.6s ease;
}

.hint.is-hidden { opacity: 0; }