/* =====================================================================
   Logged-out landing (dashboard "/" without a session).

   Continues the public website (aegister.com) into the app: the same looping
   network video under a dark scrim, the navy ground, the page's name as the
   title with the claim in the payoff, one turquoise action. The hero is a
   photo-like ground, so it stays dark in both app themes.
   Loaded only by dashboard/public.html for guests.
   ===================================================================== */

/* ---- Chrome over the video: transparent header, white wordmark ---------- */
/* The website's container (Tailwind `container`, centred, 1.5rem padding): its
   width steps at each breakpoint up to 1536px. Header, copy and footer all sit
   on its edges, so the wordmark lines up with the title and the footer. */
#main-wrapper.guest:has(.landing-hero) {
    --landing-container: 100vw;
    --landing-edge: calc((100vw - var(--landing-container)) / 2 + 1.5rem);
}
@media (min-width: 640px)  { #main-wrapper.guest:has(.landing-hero) { --landing-container: 640px; } }
@media (min-width: 768px)  { #main-wrapper.guest:has(.landing-hero) { --landing-container: 768px; } }
@media (min-width: 1024px) { #main-wrapper.guest:has(.landing-hero) { --landing-container: 1024px; } }
@media (min-width: 1280px) { #main-wrapper.guest:has(.landing-hero) { --landing-container: 1280px; } }
@media (min-width: 1536px) { #main-wrapper.guest:has(.landing-hero) { --landing-container: 1536px; } }
#main-wrapper.guest:has(.landing-hero) .nav-header {
    left: var(--landing-edge);
}
#main-wrapper.guest:has(.landing-hero) .nav-header .brand-logo {
    padding-left: 0 !important;
    margin-left: 0;
}
#main-wrapper.guest:has(.landing-hero) .nav-header .brand-title {
    margin-left: 0;
}
#main-wrapper.guest:has(.landing-hero) .header-content {
    padding-right: 0;
}
#main-wrapper.guest:has(.landing-hero) .header-right {
    padding-right: var(--landing-edge);
}
#main-wrapper.guest:has(.landing-hero) .header,
#main-wrapper.guest:has(.landing-hero) .nav-header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none;
}
body #main-wrapper.guest:has(.landing-hero) .nav-header .brand-title.brand-light {
    display: none !important;
}
body #main-wrapper.guest:has(.landing-hero) .nav-header .brand-title.brand-dark {
    display: inline-block !important;
}
/* The theme toggle has nothing to switch here (the ground is always dark). */
#main-wrapper.guest:has(.landing-hero) .header-right .nav-item:has(.dz-theme-mode) {
    display: none;
}
#main-wrapper.guest:has(.landing-hero) .language-toggle-select {
    color: var(--ag-text-title) !important;
    background-color: transparent !important;
}
#main-wrapper.guest:has(.landing-hero) .language-toggle-select option {
    color: initial;
}

/* ---- The hero ------------------------------------------------------------ */
.landing-hero {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: var(--ag-navy-950) url("../images/landing/hero-poster.webp") center / cover no-repeat;
    color: var(--ag-text-body);
    color-scheme: dark;
}

.landing-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Two layers of the website's scrim: black rising from the bottom (the site's
   hero overlay), plus a navy wash from the left so the copy column stays
   readable over the brightest part of the video. */
.landing-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 60%),
        linear-gradient(to right, rgba(var(--ag-navy-950-rgb), 0.92) 0%, rgba(var(--ag-navy-950-rgb), 0.72) 45%, rgba(var(--ag-navy-950-rgb), 0.35) 100%);
    pointer-events: none;
}

.landing-hero__inner {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-12);
    padding: calc(var(--navbar-height) + var(--space-8)) var(--landing-edge) var(--space-8);
    width: 100%;
}

.landing-hero__copy {
    flex: 0 1 36rem;
    min-width: 0;
}

.landing-hero__tag {
    font-size: var(--text-xs);
    line-height: 1rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ag-accent);
    margin: 0 0 var(--space-4);
}

/* The website's ag-display: 48px, 72px from 1280px, weight 600, solid leading
   once it steps up. The one place in the app where a title is this large. */
.landing-hero__title {
    font-size: 3rem;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ag-text-title);
    margin: 0;
}

.landing-hero__payoff {
    font-size: 1.125rem;
    line-height: 1.625;
    color: var(--ag-text-body);
    margin: var(--space-6) 0 0;
    max-width: 32rem;
}

.landing-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-10);
}

/* Same size as the website's ag-btn (16px 24px, 14px/500); sentence case, as
   every button in the app. The website's turquoise, not the palette's --primary:
   this surface continues the site, not an organization's branding. Hover darkens:
   white on the light accent fails AA. */
.landing-hero .landing-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-default),
        background-color var(--duration-fast) var(--ease-default),
        border-color var(--duration-fast) var(--ease-default);
}
.landing-hero .landing-btn--primary {
    color: var(--ag-text-title);
    background: var(--ag-turquoise);
    border-color: var(--ag-turquoise);
}
.landing-hero .landing-btn--primary:hover,
.landing-hero .landing-btn--primary:focus-visible {
    color: var(--ag-text-title);
    background: var(--ag-turquoise-dark);
    border-color: var(--ag-turquoise-dark);
}
.landing-hero .landing-btn:focus-visible {
    outline: 2px solid var(--ag-accent);
    outline-offset: 2px;
}
.landing-hero .landing-btn:active {
    transform: translateY(1px);
}

/* A real capture of the console (demo tenant), framed like the website's
   product shots: accent outline at 40%, 8px radius, one soft shadow. Capped so
   it stays a screen on wide monitors; its right edge sits on the gutter. */
.landing-hero__shot {
    flex: 1 1 0;
    min-width: 0;
    max-width: 64rem;
    margin: 0 0 0 auto;
    border: 1px solid rgba(var(--ag-accent-rgb), 0.4);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--ag-navy-950);
    box-shadow: 0 32px 64px -24px rgba(0, 0, 0, 0.75);
}
.landing-hero__shot img {
    display: block;
    width: 100%;
    height: auto;
}

.landing-hero__meta {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    width: 100%;
    padding: var(--space-4) var(--landing-edge) var(--space-6);
    border-top: 1px solid var(--ag-hairline);
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--ag-text-meta);
}
.landing-hero__meta-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-6);
}
.landing-hero__meta a {
    color: var(--ag-text-meta);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-default);
}
.landing-hero__meta a:hover,
.landing-hero__meta a:focus-visible {
    color: var(--ag-accent);
}
/* The same badge as the website footer (status.aegister.com, dark theme). */
.landing-hero__status {
    display: block;
    width: 200px;
    height: 30px;
    border: 0;
    color-scheme: normal;
}

@media (min-width: 1280px) {
    .landing-hero__title {
        font-size: 4.5rem;
        line-height: 1;
    }
    .landing-hero__payoff {
        font-size: 1.25rem;
        line-height: 1.6;
    }
}
/* The capture needs room to read as a screen, not a thumbnail. */
@media (max-width: 1199.98px) {
    .landing-hero__shot {
        display: none;
    }
}

/* ---- Motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .landing-hero__copy > *,
    .landing-hero__shot {
        animation: landing-rise var(--duration-slow) var(--ease-default) both;
    }
    .landing-hero__copy > :nth-child(2) { animation-delay: 60ms; }
    .landing-hero__copy > :nth-child(3) { animation-delay: 120ms; }
    .landing-hero__copy > :nth-child(4) { animation-delay: 180ms; }
    .landing-hero__shot { animation-delay: 240ms; }
}
@keyframes landing-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
/* The poster (the hero's background) stands in for the loop. */
@media (prefers-reduced-motion: reduce) {
    .landing-hero__video {
        display: none;
    }
}