@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════
   THE NOBLE HOUSE™ — Site Tour
   Spotlight (dim + pulsing gold ring + full-brightness clone) +
   speech-bubble walkthrough (forge-tour.js) + Siri-style edge glow.
   Above everything on the page, including the Ghost portal trigger.
   ═══════════════════════════════════════════════════════════════ */

.tnh-tour {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
}

.tnh-tour__overlay {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: transparent;
    pointer-events: auto;
}

/* ─── Siri-style edge glow — ambient presence for the whole tour ─── */

@property --tnh-glow-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.tnh-tour__glow {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.tnh-tour__glow.is-visible { opacity: 0.7; }

.tnh-tour__glow::before,
.tnh-tour__glow::after {
    content: '';
    position: absolute;
    inset: 0;
    padding: 4px;
    background: linear-gradient(90deg, #D4AF37, #0071e3, #00a3ff, #D4AF37);
    background-size: 400% 400%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: tnh-glow-flow 7s linear infinite;
}
.tnh-tour__glow::before { z-index: 1; filter: blur(6px); opacity: 0.7; }
.tnh-tour__glow::after { z-index: 2; }

@keyframes tnh-glow-flow {
    to { background-position: 400% 0%; }
}

@supports (background: conic-gradient(from 0deg, red, blue)) {
    .tnh-tour__glow::before,
    .tnh-tour__glow::after {
        background: conic-gradient(from var(--tnh-glow-angle), #D4AF37, #0071e3, #00a3ff, #D4AF37);
        animation: tnh-glow-rotate 7s linear infinite;
    }
    @keyframes tnh-glow-rotate {
        to { --tnh-glow-angle: 360deg; }
    }
}

.tnh-tour--reduced .tnh-tour__glow.is-visible { opacity: 0.35; }
.tnh-tour--reduced .tnh-tour__glow::before,
.tnh-tour--reduced .tnh-tour__glow::after { animation: none; }

/* Positioned + sized to the target's rect by JS. The huge non-inset
   box-shadow spread paints the dim everywhere OUTSIDE this box,
   leaving the box itself (over the target) as a clear cutout. A slow
   pulse only runs when there's a real target (has-target), not on the
   centered welcome/farewell dim. */
.tnh-tour__highlight {
    position: fixed;
    z-index: 2;
    border-radius: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease, top 0.35s ease, left 0.35s ease, width 0.35s ease, height 0.35s ease;
}

.tnh-tour__highlight.is-visible { opacity: 1; }

@keyframes tnh-ring-pulse {
    0%, 100% { box-shadow: 0 0 0 100vmax rgba(4, 4, 8, 0.78), 0 0 0 3px rgba(212, 175, 55, 0.9), 0 0 30px rgba(212, 175, 55, 0.5); }
    50% { box-shadow: 0 0 0 100vmax rgba(4, 4, 8, 0.78), 0 0 0 4px rgba(212, 175, 55, 1), 0 0 46px rgba(212, 175, 55, 0.75); }
}
.tnh-tour__highlight.is-visible.has-target { animation: tnh-ring-pulse 2s ease-in-out infinite; }

.tnh-tour--reduced .tnh-tour__highlight { transition: none; }
.tnh-tour--reduced .tnh-tour__highlight.is-visible.has-target { animation: none; }

/* ─── Brightness Clone — deep clone of the target, full brightness,
   sitting inside the ring's 6px gap. Inherits its own styling (radius,
   shadow, background) automatically via its preserved class. ─── */
.tnh-tour__clone {
    z-index: 3;
}

/* ─── Speech Bubble ─── */

.tnh-tour-bubble {
    position: fixed;
    z-index: 4;
    max-width: 320px;
    padding: 1.5rem;
    background: rgba(10, 10, 16, 0.97);
    border: 1px solid rgba(212, 175, 55, 0.45);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    opacity: 0;
    transition: top 0.35s ease, left 0.35s ease;
}

.tnh-tour-bubble__tail {
    position: absolute;
    width: 0;
    height: 0;
    border: 16px solid transparent;
    pointer-events: none;
}
.tnh-tour-bubble[data-placement="bottom"] .tnh-tour-bubble__tail { top: -16px; border-bottom-color: rgba(10, 10, 16, 0.97); }
.tnh-tour-bubble[data-placement="top"] .tnh-tour-bubble__tail { bottom: -16px; border-top-color: rgba(10, 10, 16, 0.97); }
.tnh-tour-bubble[data-placement="right"] .tnh-tour-bubble__tail { left: -16px; border-right-color: rgba(10, 10, 16, 0.97); }
.tnh-tour-bubble[data-placement="left"] .tnh-tour-bubble__tail { right: -16px; border-left-color: rgba(10, 10, 16, 0.97); }

/* Entrance: slides in from the tail direction (i.e. from the target) + fades */
@keyframes tnh-bubble-in-bottom { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tnh-bubble-in-top { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tnh-bubble-in-left { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes tnh-bubble-in-right { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes tnh-bubble-in-fade { from { opacity: 0; } to { opacity: 1; } }

.tnh-tour-bubble[data-placement="bottom"].is-visible { animation: tnh-bubble-in-bottom 0.2s ease-out forwards; }
.tnh-tour-bubble[data-placement="top"].is-visible { animation: tnh-bubble-in-top 0.2s ease-out forwards; }
.tnh-tour-bubble[data-placement="left"].is-visible { animation: tnh-bubble-in-left 0.2s ease-out forwards; }
.tnh-tour-bubble[data-placement="right"].is-visible { animation: tnh-bubble-in-right 0.2s ease-out forwards; }
.tnh-tour-bubble:not([data-placement]).is-visible { animation: tnh-bubble-in-fade 0.2s ease-out forwards; }

.tnh-tour--reduced .tnh-tour-bubble { transition: none; }
.tnh-tour--reduced .tnh-tour-bubble.is-visible { animation: none; opacity: 1; }

.tnh-tour-bubble__title {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.15rem;
    color: var(--pure-white);
    line-height: 1.3;
    margin-bottom: 0.6rem;
}

.tnh-tour-bubble__text {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.tnh-tour-bubble__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.tnh-tour-bubble__skip {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0.5rem 0;
    transition: color 0.2s ease;
}
.tnh-tour-bubble__skip:hover { color: rgba(255, 255, 255, 0.85); }

.tnh-tour-bubble__count {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--noble-gold-dim);
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.tnh-tour-bubble__next {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.65rem 1.5rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, #D4AF37, #E5C558);
    color: #040408;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tnh-tour-bubble__next:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.35);
}

/* ─── Mobile Dock (JS adds this below 640px) ─── */

.tnh-tour-bubble--docked {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
    width: auto;
}
.tnh-tour-bubble--docked .tnh-tour-bubble__tail { display: none; }