/* Reveal initial states (animated in JS) */
[data-reveal] {
    opacity: 0;
    transform: translateY(32px);
    will-change: transform, opacity;
}
[data-reveal="fade"] {
    transform: none;
}
[data-reveal="scale"] {
    transform: scale(0.94);
}
[data-reveal="clip"] {
    opacity: 1;
    transform: none;
    overflow: hidden;
}
[data-reveal="clip"] > * {
    transform: translateY(101%);
    transition: transform 1200ms var(--ease-out-expo);
}
.is-inview[data-reveal="clip"] > * {
    transform: translateY(0);
}

.is-inview[data-reveal] {
    opacity: 1;
    transform: translate(0, 0) scale(1);
    transition: transform 900ms var(--ease-out-expo), opacity 700ms var(--ease-out-expo);
}

/* Stagger children within a reveal-group */
[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* ════════════════════════════════════════════════════════════
   PAGE INTRO MASK — cinematic, B2B-restrained
   Two panes split open vertically · ambient ember glow ·
   precision grid · corner labels · progress bar with counter
   ════════════════════════════════════════════════════════════ */
.page-mask {
    position: fixed;
    inset: 0;
    z-index: 10050;
    color: var(--color-bone);
    pointer-events: none;
    overflow: hidden;
}

/* Two solid panes that split open horizontally */
.page-mask-pane {
    position: absolute;
    left: 0;
    right: 0;
    background: var(--color-ink);
    transition: transform 1100ms var(--ease-in-out-quint) 240ms;
    will-change: transform;
}
.page-mask-pane--top    { top: 0;    height: 50%; }
.page-mask-pane--bottom { bottom: 0; height: 50%; }
.page-mask.is-done .page-mask-pane--top    { transform: translateY(-100%); }
.page-mask.is-done .page-mask-pane--bottom { transform: translateY(100%); }

/* Stage sits above the panes; holds all visible content */
.page-mask-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 320ms ease-out 200ms;
}
.page-mask.is-done .page-mask-stage { opacity: 0; }

/* Faint engineering grid */
.page-mask-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(244, 241, 236, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(244, 241, 236, 0.045) 1px, transparent 1px);
    background-size: 80px 80px;
    background-position: center center;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 75%);
    opacity: 0;
    animation: maskGridIn 900ms var(--ease-out-expo) 80ms forwards;
}
@keyframes maskGridIn {
    from { opacity: 0; transform: scale(1.04); }
    to   { opacity: 1; transform: scale(1); }
}

/* Ambient ember glow — slow pulse, very soft */
.page-mask-glow {
    position: absolute;
    top: 50%; left: 50%;
    width: 78vmax;
    height: 78vmax;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(212, 69, 18, 0.22) 0%, rgba(212, 69, 18, 0.08) 28%, transparent 58%);
    filter: blur(40px);
    pointer-events: none;
    opacity: 0;
    animation: maskGlowIn 1400ms var(--ease-out-quart) 100ms forwards,
               maskGlowPulse 4.6s ease-in-out 1500ms infinite alternate;
}
@keyframes maskGlowIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes maskGlowPulse {
    from { transform: translate(-50%, -50%) scale(0.96); }
    to   { transform: translate(-50%, -50%) scale(1.06); }
}

/* Single pass scan-line — quiet, premium, not "techy" */
.page-mask-scan {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 48%,
        rgba(212, 69, 18, 0.55) 50%,
        transparent 52%,
        transparent 100%);
    background-size: 100% 220%;
    background-position: 0 -110%;
    opacity: 0;
    animation: maskScan 1300ms cubic-bezier(0.7, 0, 0.3, 1) 200ms forwards;
}
@keyframes maskScan {
    0%   { background-position: 0 -110%; opacity: 0; }
    15%  { opacity: 0.85; }
    100% { background-position: 0 110%;  opacity: 0; }
}

/* Corner labels */
.page-mask-corners {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.page-mask-corner {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(244, 241, 236, 0.72);
    opacity: 0;
    transform: translateY(8px);
    animation: maskCornerIn 760ms var(--ease-out-expo) forwards;
}
.page-mask-corner--tl {
    top: clamp(20px, 3.2vw, 36px);
    left: clamp(20px, 3.2vw, 40px);
    animation-delay: 220ms;
}
.page-mask-corner--tr {
    top: clamp(20px, 3.2vw, 36px);
    right: clamp(20px, 3.2vw, 40px);
    animation-delay: 320ms;
}
.page-mask-corner--bl {
    bottom: clamp(20px, 3.2vw, 36px);
    left: clamp(20px, 3.2vw, 40px);
    animation-delay: 420ms;
}
.page-mask-corner--br {
    bottom: clamp(20px, 3.2vw, 36px);
    right: clamp(20px, 3.2vw, 40px);
    animation-delay: 520ms;
}
@keyframes maskCornerIn {
    to { opacity: 1; transform: translateY(0); }
}
.page-mask-sep { opacity: 0.45; }
.page-mask-pulse {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--color-ember);
    box-shadow: 0 0 10px rgba(212, 69, 18, 0.8);
    animation: maskPulse 1.6s ease-in-out infinite;
}
.page-mask.is-ready .page-mask-pulse {
    background: var(--color-bone);
    box-shadow: 0 0 12px rgba(244, 241, 236, 0.55);
}
@keyframes maskPulse {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.78); }
}

/* Inner column — logo + progress + tagline */
.page-mask-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(28px, 3.4vw, 44px);
    color: var(--color-bone);
    max-width: min(720px, 80vw);
    width: 100%;
    padding: 0 clamp(20px, 4vw, 40px);
}
.page-mask-mark {
    display: flex;
    justify-content: center;
    width: 100%;
}
.page-mask-mark .mw-logo {
    height: auto;
}

/* Progress bar + counter */
.page-mask-progress {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    max-width: clamp(280px, 36vw, 460px);
    opacity: 0;
    animation: maskFadeUp 700ms var(--ease-out-expo) 480ms forwards;
}
.page-mask-bar {
    flex: 1;
    height: 1px;
    background: rgba(244, 241, 236, 0.16);
    overflow: hidden;
    position: relative;
}
.page-mask-bar-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-ember);
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}
.page-mask-bar-fill::after {
    content: "";
    position: absolute;
    top: -2px; bottom: -2px;
    right: 0;
    width: 2px;
    background: var(--color-ember);
    box-shadow: 0 0 12px rgba(212, 69, 18, 0.9);
}
.page-mask-inner .counter {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.28em;
    color: var(--color-bone);
    font-weight: 500;
    min-width: 4ch;
    text-align: right;
    transition: color 260ms ease-out;
}
.page-mask.is-ready .page-mask-inner .counter { color: var(--color-ember); }
@keyframes maskFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Tagline */
.page-mask-tagline {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(244, 241, 236, 0.55);
    opacity: 0;
    animation: maskFadeUp 700ms var(--ease-out-expo) 740ms forwards;
}
.page-mask-tagline-sep {
    width: 22px;
    height: 1px;
    background: rgba(244, 241, 236, 0.32);
}

/* When mask opens, inner content lifts slightly + fades */
.page-mask.is-done .page-mask-inner {
    transform: translateY(-12px);
    transition: transform 700ms var(--ease-out-expo);
}

/* Mobile — tighten labels, simplify tagline */
@media (max-width: 640px) {
    .page-mask-corner {
        font-size: 9.5px;
        letter-spacing: 0.18em;
        gap: 8px;
    }
    .page-mask-corner--br { display: none; }
    .page-mask-corner--bl {
        right: clamp(20px, 3.2vw, 36px);
        text-align: left;
    }
    .page-mask-tagline {
        font-size: 9.5px;
        letter-spacing: 0.22em;
        gap: 8px;
    }
    .page-mask-tagline-sep { width: 14px; }
    .page-mask-progress {
        max-width: 240px;
        gap: 14px;
    }
    .page-mask-inner .counter { font-size: 11px; }
}
@media (max-width: 420px) {
    /* HTML order: text · sep · text · sep · text  →  hide last sep (4) + last text (5) */
    .page-mask-tagline > :nth-child(4),
    .page-mask-tagline > :nth-child(5) {
        display: none;
    }
}

/* ═════ MW LOGO — font-based wordmark ═════ */
.mw-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    color: currentColor;
    line-height: 0.92;
    font-kerning: normal;
    -webkit-font-smoothing: antialiased;
}
.mw-logo-main {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
}

.mw-part--mind {
    font-family: "Times New Roman", "Times", "Instrument Serif", serif;
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.055em;
    font-size: 1.08em;       /* optical lift vs. Be Vietnam */
    margin-right: -0.015em;
}
.mw-part--werk {
    font-family: "Be Vietnam Pro", "Inter Tight", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.035em;
    font-size: 1em;
}
.mw-part--sub {
    font-family: "Bebas Neue", "Inter Tight", sans-serif;
    font-size: 0.195em;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 1;
    margin-top: 0.55em;
    padding-left: 0.15em;
    white-space: nowrap;
}

/* The star that replaces the "." in werk.ai */
.mw-logo-dot {
    display: inline-block;
    width: 0.44em;
    height: 0.44em;
    margin: 0 0.05em 0 0.04em;
    vertical-align: baseline;
    color: var(--color-ember);
    animation: mw-star-spin 18s linear infinite;
    transform-origin: 50% 55%;
    will-change: transform;
}
.mw-logo-dot-inner {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 520ms var(--ease-out-expo);
}
.mw-logo-dot svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}
@keyframes mw-star-spin { to { transform: rotate(360deg); } }

/* Reveal — staggered fade-up per part */
.mw-logo .mw-part {
    display: inline-block;
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 700ms ease-out, transform 1100ms var(--ease-out-expo);
    will-change: transform, opacity;
}
.mw-logo.is-on .mw-part--mind { transition-delay: 60ms; }
.mw-logo.is-on .mw-part--werk { transition-delay: 220ms; }
.mw-logo.is-on .mw-part--sub  { transition-delay: 440ms; }
.mw-logo.is-on .mw-part {
    opacity: 1;
    transform: translateY(0);
}

/* Star: entrance — scale-in once the logo reveals */
.mw-logo .mw-logo-dot-inner { transform: scale(0) rotate(-90deg); }
.mw-logo.is-on .mw-logo-dot-inner {
    transform: scale(1) rotate(0);
    transition: transform 900ms var(--ease-out-expo) 520ms;
}

/* Variants — base font-size drives the whole logo */
.mw-logo--nav {
    font-size: 22px;
}
.mw-logo--nav .mw-part--sub { display: none; }
.logo:hover .mw-logo--nav.is-on .mw-part--mind { transform: translate(-2px, 0); }
.logo:hover .mw-logo--nav.is-on .mw-part--werk { transform: translate(2px, 0); }
.logo:hover .mw-logo-dot-inner { transform: scale(1.25) rotate(0); }
.logo:hover .mw-logo-dot { animation-duration: 2.4s; }
.mw-logo--nav .mw-part { transition-duration: 520ms, 520ms; }

.mw-logo--intro {
    font-size: clamp(2.75rem, 10vw, 7rem);
    align-items: center;       /* center mind/werk row + sub line */
    text-align: center;
}
.mw-logo--intro .mw-part--sub {
    color: var(--color-ember);
    padding-left: 0;           /* override default left-pad so it aligns under the wordmark */
    margin-top: 0.7em;
    letter-spacing: 0.32em;
}

.mw-logo--footer {
    font-size: clamp(0.75rem, 1.2vw, 1rem);
}
.mw-logo--footer .mw-part--sub { color: var(--color-ember); opacity: 0.92; }

/* Hero word reveal animation baseline */
.hero-title .word-inner.is-on {
    transform: translateY(0);
    opacity: 1;
    transition: transform 1100ms var(--ease-out-expo), opacity 400ms ease-out;
}
.hero-title .word-inner {
    transition: none;
}

.hero-sub.is-on,
.hero-actions.is-on {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 800ms ease-out, transform 800ms var(--ease-out-expo);
}

/* Infinity flow — ember energy travelling around the lemniscate forever */
@keyframes infinityFlow {
    from { stroke-dashoffset: 100; }
    to   { stroke-dashoffset: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    [data-reveal], .hero-title .word-inner, .hero-sub, .hero-actions,
    .mw-logo .mw-part, .mw-logo .mw-logo-dot-inner {
        opacity: 1 !important;
        transform: none !important;
        clip-path: inset(0 0 0 0) !important;
        transition: none !important;
    }
    .mw-logo-dot { animation: none !important; }
    .page-mask { display: none; }
    body, button, a { cursor: auto !important; }
    .cursor-dot, .cursor-ring { display: none; }
    .hero-aurora, .hero-sigil, .hero-sigil-inner, .hero-spotlight { animation: none !important; transition: none !important; }
    .hero-title em::after { transform: scaleX(1) !important; transition: none !important; }
    .stat-infinity-flow {
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
        animation: none !important;
    }
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}