/*
  Shared chrome for the server-rendered marketing pages (Razor, _MarketingLayout).

  Two sources are merged here:
    1. The global `wai-*` reset + keyframes that App.jsx used to inject into <head> at runtime.
    2. The nav/footer styles that lived as React inline style objects in AppNav.jsx / AppFooter.jsx.
       They are class-driven now: site.js toggles .is-dark / .is-scrolled instead of recomputing style props.
*/

/* ── Globals (ported from App.jsx's injected <style>) ── */

@keyframes wai-fadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes wai-float {
    0%, 100% { transform: translateY(0px) scale(1); }
    50%      { transform: translateY(-12px) scale(1.02); }
}

@keyframes wai-spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

* { margin: 0; padding: 0; }
.wai-root * { box-sizing: border-box; }
.wai-root { text-align: left; }
.wai-root h1, .wai-root h2, .wai-root h3, .wai-root h4, .wai-root h5 { margin: 0; font-size: unset; letter-spacing: unset; line-height: unset; font-weight: inherit; }
.wai-root p { margin: 0; }
.wai-root a { text-decoration: none; color: inherit; }
:where(.wai-root) button { font-family: inherit; }
.wai-root img { max-width: 100%; }

body {
    background: #fff;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.wai-hero-h1 { animation: wai-fadeUp 0.9s ease both; }
.wai-hero-sub { animation: wai-fadeUp 0.9s 0.14s ease both; }
.wai-hero-btns { animation: wai-fadeUp 0.9s 0.24s ease both; }
.wai-orb { animation: wai-float 6s ease-in-out infinite; }
.wai-orb-ring { animation: wai-spin-slow 18s linear infinite; }

/*
  Scroll-reveal contract. The resting state is VISIBLE, so a crawler or a JS-less visitor gets the full page.
  Only when site.js has confirmed JS (html.js, set inline in <head>) does the hidden-then-animate state apply.
*/
.js .tal-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.js .tal-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .js .tal-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Nav (ported from AppNav.jsx) ── */

.tal-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
    height: 64px;
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 50%, rgba(100,100,160,0.06) 100%);
    backdrop-filter: blur(24px) saturate(180%) brightness(1.08);
    -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.08);
    border-bottom: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 1px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.14);
    transition: background 0.4s, box-shadow 0.4s;
}

.tal-nav.is-scrolled {
    background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.04) 50%, rgba(120,120,180,0.08) 100%);
    box-shadow: 0 2px 32px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(255,255,255,0.04);
}

.tal-nav__brand { display: flex; align-items: center; gap: 10px; }
.tal-nav__brand img { height: 32px; width: auto; display: block; }

.tal-nav__brand-name {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    font-size: 21px;
    letter-spacing: -0.4px;
    color: #0a0a0a;
    transition: color 0.4s;
}

.tal-nav.is-dark .tal-nav__brand-name { color: #fff; }

.tal-nav__links { display: flex; gap: 32px; align-items: center; }

.tal-nav__link {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: rgba(10,10,10,0.55);
    transition: color 0.3s;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

.tal-nav__link:hover { color: #0a0a0a; }
.tal-nav__link.is-current { font-weight: 500; color: #0a0a0a; border-bottom-color: rgba(10,10,10,0.35); }
.tal-nav.is-dark .tal-nav__link { color: rgba(255,255,255,0.6); }
.tal-nav.is-dark .tal-nav__link:hover { color: #fff; }
.tal-nav.is-dark .tal-nav__link.is-current { color: #fff; border-bottom-color: rgba(255,255,255,0.4); }

.tal-nav__actions { display: flex; align-items: center; gap: 10px; }

.tal-nav__cta {
    background: #0a0a0a;
    border: none;
    color: #fff;
    padding: 7px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    cursor: pointer;
    font-weight: 500;
    transition: opacity 0.15s, background 0.15s, border-color 0.15s, color 0.3s;
}

.tal-nav__cta:hover { opacity: 0.85; }
.tal-nav.is-dark .tal-nav__cta { background: #fff; color: #0a0a0a; }

.tal-nav__cta--ghost { background: transparent; border: 1px solid rgba(10,10,10,0.3); color: #0a0a0a; font-weight: 400; }
.tal-nav__cta--ghost:hover { opacity: 1; background: rgba(10,10,10,0.07); border-color: rgba(10,10,10,0.5); }
.tal-nav.is-dark .tal-nav__cta--ghost { background: transparent; border-color: rgba(255,255,255,0.35); color: #fff; }
.tal-nav.is-dark .tal-nav__cta--ghost:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); }

.tal-nav__burger { display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.tal-nav__burger span { display: block; width: 22px; height: 2px; background: #0a0a0a; border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }
.tal-nav.is-dark .tal-nav__burger span { background: #fff; }
.tal-nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tal-nav__burger.is-open span:nth-child(2) { opacity: 0; }
.tal-nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.tal-nav__menu {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 199;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    padding: 16px 0 24px;
}

.tal-nav__menu[hidden] { display: none; }

.tal-nav__menu-link {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: rgba(10,10,10,0.65);
    padding: 12px 32px;
    display: block;
    transition: color 0.2s;
}

.tal-nav__menu-link.is-current { font-weight: 600; color: #0a0a0a; }
.tal-nav__menu-actions { display: flex; flex-direction: column; gap: 10px; padding: 16px 32px 0; }
.tal-nav__menu-actions > a { display: block; }

.tal-nav__menu-cta {
    width: 100%;
    background: #0a0a0a;
    border: none;
    color: #fff;
    padding: 11px 18px;
    border-radius: 8px;
    font-size: 15px;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    cursor: pointer;
    font-weight: 500;
}

.tal-nav__menu-cta--ghost { background: transparent; border: 1px solid rgba(10,10,10,0.25); color: #0a0a0a; font-weight: 400; }

/* AppNav.jsx branched on window.innerWidth < 768; a media query is the direct equivalent. */
@media (max-width: 767px) {
    .tal-nav { padding: 0 20px; }
    .tal-nav__links { display: none; }
    .tal-nav__actions .tal-nav__cta { display: none; }
    .tal-nav__burger { display: flex; }
}

@media (min-width: 768px) {
    .tal-nav__menu { display: none; }
}

/* ── Footer (ported from AppFooter.jsx) ── */

.tal-banner {
    background: linear-gradient(to bottom, #e8e8e8, #fff);
    padding: 20px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(0,0,0,0.07);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

.tal-banner__text { color: rgba(10,10,10,0.75); font-size: 14px; font-weight: 500; }
.tal-banner__link { color: rgba(10,10,10,0.4); font-size: 14px; display: flex; align-items: center; gap: 6px; transition: color 0.15s; }
.tal-banner__link:hover { color: #0a0a0a; }
.tal-banner__link span { font-size: 16px; }

.tal-cta { background: #fff; padding: 112px 48px; text-align: center; position: relative; overflow: hidden; }
.tal-cta__video { border: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 0; }
.tal-cta__overlay { position: absolute; inset: 0; background: rgba(255,255,255,0.78); backdrop-filter: blur(1px); z-index: 1; pointer-events: none; }
.tal-cta__content { position: relative; z-index: 2; }

.tal-cta__h2 {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(28px, 3.6vw, 48px);
    font-weight: 400;
    color: #0a0a0a;
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin: 0 0 36px;
}

.tal-cta__btn {
    background: #0a0a0a;
    color: #fff;
    border: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    cursor: pointer;
    transition: opacity 0.15s;
}

.tal-cta__btn:hover { opacity: 0.85; }

.tal-footer { background: #0a0a0a; padding: 60px 48px 44px; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; }
.tal-footer__inner { max-width: 1040px; margin: 0 auto; }
.tal-footer__brand { margin-bottom: 52px; }
.tal-footer__brand-name { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.4px; }
.tal-footer__copy { font-size: 13px; color: rgba(255,255,255,0.25); margin-top: 10px; }
.tal-footer__cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; }
.tal-footer__col-title { font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(255,255,255,0.3); margin: 0 0 18px; }
.tal-footer__col-links { display: flex; flex-direction: column; gap: 11px; }
.tal-footer__col-links a { font-size: 14px; color: rgba(255,255,255,0.5); transition: color 0.15s; }
.tal-footer__col-links a:hover { color: #fff; }
.tal-footer__socials { display: flex; flex-wrap: wrap; gap: 14px; }
.tal-footer__socials a { display: flex; color: rgba(255,255,255,0.5); transition: color 0.15s; }
.tal-footer__socials a:hover { color: #fff; }
