/* IRIS landing page rules not covered by components.css. */

:root {
    --page-gutter: max(var(--space-4), calc(50% - var(--content-width) / 2));
    --hero-glow: rgba(46, 111, 242, 0.10);
    --mockup-bar-opacity: 0.9;
}

:root.dark-mode,
:root[data-theme="dark"] {
    --hero-glow: rgba(83, 153, 238, 0.12);
    --mockup-bar-opacity: 0.95;
}

html { background: var(--bg-primary); scroll-behavior: smooth; scroll-padding-top: var(--nav-height); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== Navbar ===== */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.nav-brand { display: flex; align-items: center; }
.nav-logo { display: block; fill: var(--text-primary); }
.nav-group:not(.nav-group--end) { margin-left: var(--space-4); }
.nav-mobile-only { display: none; }
.nav-drawer { display: none; }

/* ===== Hero ===== */
.hero-glow {
    position: absolute; left: 50%; top: 120px; width: 900px; max-width: 100%; height: 560px; transform: translateX(-50%); pointer-events: none;
    background: radial-gradient(ellipse, var(--hero-glow) 0%, transparent 70%);
}
.hero-content { padding: calc(var(--nav-height) + 104px) var(--space-4) 0; }
.btn .bi { font-size: 16px; }

/* No z-index here, so the hero fade still paints over the mockup */
.hero-stage { position: relative; height: 348px; margin-top: var(--space-12); padding: var(--space-12) var(--space-4) 0; overflow: hidden; }
.hero-mockup {
    opacity: 0; transform: translateY(20px);
    animation: hero-fade-in 0.7s ease 0.7s forwards, mockup-float 6s ease-in-out 1.4s infinite;
}
.mockup-title { margin-left: 14px; }
.mockup-body { display: flex; height: 300px; }
.mockup-sidebar { display: flex; flex-direction: column; flex-shrink: 0; }
.mockup-main { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-content: start; padding: 20px; }
.mockup-chart { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; }
.mockup-bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; }
.mockup-bar { flex: 1; border-radius: 3px 3px 0 0; background: var(--accent-line); opacity: var(--mockup-bar-opacity); }
.mockup-bar:nth-child(odd) { opacity: 0.6; }

/* ===== Page frame ===== */
.page-rails::before,
.page-rails::after { z-index: 1; }
.page-rails::before { left: var(--page-gutter); }
.page-rails::after { left: auto; right: calc(var(--page-gutter) - 1px); }

.section { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
.section--overview { padding-top: var(--space-32); border-top: 0; }
.section-description { max-width: 480px; }
.section-description--wide { max-width: 520px; }

.ruled-grid--flush { border-bottom: 0; }

/* ===== Overview ===== */
.figure-col-body { display: flex; flex-direction: column; }
.figure-col .label-index .bi { font-size: 12px; }
.figure-col .cell-title { margin-top: 0; }

/* ===== Platform ===== */
.module-note-text { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.module-note-link { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--accent); text-decoration: none; white-space: nowrap; transition: color 0.2s ease; }
.module-note-link:hover { color: var(--accent-hover); }

/* ===== About ===== */
.about-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.about-col { display: flex; flex-direction: column; min-width: 0; }
.about-col + .about-col { border-left: 1px solid var(--rule); }
.about-stack-head { padding-bottom: var(--space-5); }
.about-stack-head .cell-title { margin-bottom: 0; }
.about-contact { flex: 1; }
.about-contact .cell-text { margin-bottom: 28px; }
.about-contact-actions { margin-top: auto; display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.about-contact-address { font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary); }
.tech-name { font-family: var(--font-display); font-weight: 500; font-size: 16px; color: var(--text-primary); }

/* ===== Footer ===== */
.footer { padding-left: calc(var(--page-gutter) + var(--cell-pad-x)); padding-right: calc(var(--page-gutter) + var(--cell-pad-x)); }
.footer-logo { display: flex; }

/* ===== Basic pages (Privacy, Error) ===== */
.section.page-basic {
    min-height: 60vh; border-top: 0;
    padding: calc(var(--nav-height) + var(--space-16)) calc(var(--page-gutter) + var(--cell-pad-x)) var(--space-24);
}
.page-basic h1, .page-basic h2, .page-basic h3 { font-family: var(--font-display); color: var(--text-primary); }
.page-basic p { line-height: 1.7; color: var(--text-secondary); }

/* ===== Motion ===== */
@keyframes hero-fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mockup-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.hero-animate { opacity: 0; transform: translateY(20px); animation: hero-fade-in 0.7s ease forwards; }
.hero-animate-delay-1 { animation-delay: 0.1s; }
.hero-animate-delay-3 { animation-delay: 0.35s; }
.hero-animate-delay-4 { animation-delay: 0.5s; }

/* Reveal the content inside each grid cell: a transparent cell would expose the grid's rule-coloured background */
.fade-in-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in-up.is-visible { opacity: 1; transform: translateY(0); }

.ruled-grid > :nth-child(2) > .fade-in-up { transition-delay: 60ms; }
.ruled-grid > :nth-child(3) > .fade-in-up { transition-delay: 120ms; }
.ruled-grid > :nth-child(4) > .fade-in-up { transition-delay: 180ms; }
.ruled-grid > :nth-child(5) > .fade-in-up { transition-delay: 240ms; }
.ruled-grid > :nth-child(6) > .fade-in-up { transition-delay: 300ms; }
.ruled-grid--4 > :nth-child(2) > .fade-in-up { transition-delay: 40ms; }
.ruled-grid--4 > :nth-child(3) > .fade-in-up { transition-delay: 80ms; }
.ruled-grid--4 > :nth-child(4) > .fade-in-up { transition-delay: 120ms; }
.ruled-grid--4 > :nth-child(5) > .fade-in-up { transition-delay: 160ms; }
.ruled-grid--4 > :nth-child(6) > .fade-in-up { transition-delay: 200ms; }
.ruled-grid--4 > :nth-child(7) > .fade-in-up { transition-delay: 240ms; }
.ruled-grid--4 > :nth-child(8) > .fade-in-up { transition-delay: 280ms; }
.ruled-grid--4 > :nth-child(9) > .fade-in-up { transition-delay: 320ms; }
.ruled-grid--4 > :nth-child(10) > .fade-in-up { transition-delay: 360ms; }
.ruled-grid--4 > :nth-child(11) > .fade-in-up { transition-delay: 400ms; }
.ruled-grid--4 > :nth-child(12) > .fade-in-up { transition-delay: 440ms; }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .figure-col { padding-top: var(--space-8); padding-bottom: var(--space-8); }
}

/* An odd last cell spans the row, so no empty rule-coloured slot shows */
@media (min-width: 681px) and (max-width: 1024px) {
    .ruled-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
    :root { --cell-pad-x: 24px; }

    .nav { padding: 0 var(--space-4); }
    .nav-desktop-only { display: none; }
    .nav-mobile-only { display: flex; }
    .nav-drawer.is-open {
        display: flex; flex-direction: column; position: absolute; top: var(--nav-height); right: 0; width: 220px;
        background: var(--bg-primary); border-left: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    }
    .nav-drawer .nav-item { padding: 14px 20px; }
    .nav-drawer .nav-item + .nav-item { border-top: 1px solid var(--rule); }

    .hero-content { padding-top: calc(var(--nav-height) + var(--space-16)); }
    .hero-stage { margin-top: var(--space-6); }
    .mockup-sidebar { display: none; }
    .mockup-main { padding: 12px; gap: 8px; }
    .mockup-panel { padding: 10px; }
    .mockup-value { font-size: 18px; }

    .section { padding: var(--space-16) 0 var(--space-24); }
    .section--overview { padding-top: var(--space-16); }
    .section--flush-bottom { padding-bottom: 0; }
    .statement { margin-bottom: var(--space-12); }

    .module-note { flex-direction: column; align-items: flex-start; gap: var(--space-3); }

    .about-row { grid-template-columns: minmax(0, 1fr); }
    .about-col + .about-col { border-left: 0; border-top: 1px solid var(--rule); }

    .footer { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .fade-in-up, .hero-animate, .hero-mockup { opacity: 1; transform: none; animation: none; }
    .btn:hover { transform: none; }
}