/* ============================================================
   The Lane Fam — v2 placeholder
   A veiled wordmark over a living tree.
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background: #07070a;
    color: #ece4d2;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 300;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: none;

    /* Disable browser-default touch behaviors — pinch-zoom, double-tap zoom,
       overscroll, swipe-back — so multi-touch lands directly in JS as
       independent pointer events. */
    touch-action: none;
    -ms-touch-action: none;

    /* No tap highlight on touch devices — selection itself is killed globally above. */
    -webkit-tap-highlight-color: transparent;
}

/* ===== Atmospheric background ===== */
body::before {
    content: "";
    position: fixed;
    inset: -10%;
    background:
        radial-gradient(ellipse 50% 40% at 50% 52%, rgba(58, 42, 28, 0.55), transparent 65%),
        radial-gradient(ellipse 80% 70% at 50% 50%, rgba(18, 16, 22, 0.7), transparent 70%),
        #07070a;
    z-index: -2;
    pointer-events: none;
}

/* Edge vignette — sits between the canvas and the veil so it feathers the frame
   without dimming the text or interfering with the spotlight mask. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
    z-index: 1;
    pointer-events: none;
}

/* ===== Tree canvas (the living thing behind the veil) ===== */
#tree {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* ===== The Veil ============================================
   Frosted glass. The mask-image itself is written inline from JS
   each frame — one radial-gradient layer per active pointer slot
   (mouse + up to N touches). The layers are composited with
   `intersect`, which MULTIPLIES alphas across layers, so a
   transparent center in any one layer punches a hole through the
   combined mask. That's how N fingers can each open their own
   reveal at the same time.

   The mask is only applied while at least one slot is active
   (.spotlight modifier class). Leaving a mask attached with all
   slots at 0 radius triggers a WebKit bug that renders the entire
   mask transparent.
   ============================================================ */
.veil {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background: rgba(8, 7, 11, 0.22);
    backdrop-filter: blur(15px) saturate(1.25);
    -webkit-backdrop-filter: blur(15px) saturate(1.25);

    /* Force a composite layer so Safari/WebKit reliably applies the
       backdrop-filter. Without this, iOS Safari can drop the blur. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: backdrop-filter, mask-image;
}

.veil.spotlight {
    /* mask-image is set inline by tree.js as a comma-separated list of
       radial-gradient(...) layers — one per active pointer. */
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
}

/* Subtle film-grain on the veil */
.veil-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.93 0 0 0 0 0.88 0 0 0 0 0.79 0 0 0 0.12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ===== Cursor mark =========================================
   Replaces the OS cursor with a tiny gold dot.
   ============================================================ */
.cursor {
    position: fixed;
    z-index: 5;
    pointer-events: none;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: #f4dba3;
    box-shadow:
        0 0 6px rgba(244, 219, 163, 0.85),
        0 0 16px rgba(201, 168, 106, 0.45);
    transform: translate(-1000px, -1000px);
    opacity: 0;
    transition: opacity 500ms ease;
}
.cursor.visible { opacity: 1; }

@media (hover: none) {
    html, body { cursor: auto; }
    .cursor { display: none; }
}

/* ===== Stage / content ===== */
.stage {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(1.5rem, 4vw, 3rem);
    text-align: center;
    pointer-events: none;
}

/* ===== Wordmark ===== */
.wordmark {
    margin: 0;
    font-family: "Cormorant Garamond", "Times New Roman", serif;
    font-weight: 300;
    font-size: clamp(3.25rem, 13vw, 7.5rem);
    line-height: 0.95;
    letter-spacing: 0.005em;
    color: #f0e8d6;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

.word {
    display: inline-block;
    opacity: 0;
    transform: translateY(18px);
    filter: blur(6px);
    animation: rise 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.word.the  { animation-delay: 0.45s; }
.word.lane { animation-delay: 0.78s; }
.word.fam  { animation-delay: 1.11s; }

.word.lane {
    font-style: italic;
    font-weight: 400;
    color: transparent;
    background: linear-gradient(180deg, #f4dba3 10%, #c9a86a 95%);
    -webkit-background-clip: text;
    background-clip: text;
    margin: 0 0.04em;
}

@keyframes rise {
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* ===== Quiet sub-line ===== */
.note {
    margin: clamp(1.4rem, 3.5vw, 2rem) 0 0;
    font-size: 0.72rem;
    font-weight: 300;
    letter-spacing: 0.5em;
    padding-left: 0.5em;
    color: rgba(232, 224, 208, 0.46);
    opacity: 0;
    animation: noteIn 1.4s ease-out 1.85s forwards;
}

@keyframes noteIn {
    to { opacity: 1; }
}

/* ===== Mobile ===== */
@media (max-width: 540px) {
    .wordmark {
        font-size: clamp(2.6rem, 15vw, 4.8rem);
    }
    .word.lane { display: block; margin: 0.04em 0; }
    .veil {
        backdrop-filter: blur(12px) saturate(1.2);
        -webkit-backdrop-filter: blur(12px) saturate(1.2);
        background: rgba(8, 7, 11, 0.18);
    }
}

@media (max-height: 600px) and (orientation: landscape) {
    .wordmark { font-size: clamp(2rem, 8vw, 3.6rem); }
    .note { margin-top: 0.8rem; letter-spacing: 0.4em; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    .word, .note {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
    .veil {
        --spotlight: 0px;
    }
}