/*
 * Polish layer for intro.html, loaded after text.css.
 * Uses the page's own tokens: --black #0f0f0f, --white, --cadet-blue #7ca697.
 */

/* ---------- Browser surfaces (selection is already themed inline) ---------- */

html {
    caret-color: var(--black, #0f0f0f);
    scrollbar-color: var(--black, #0f0f0f) var(--white, #fff);
    scrollbar-width: thin;
}

html :focus-visible {
    outline: 2px solid var(--black, #0f0f0f);
    outline-offset: 3px;
}
.footer :focus-visible {
    outline-color: var(--cadet-blue, #7ca697);
}

table td,
table th {
    font-variant-numeric: tabular-nums;
}

/* ---------- Layout ---------- */

/* 100vw rules ignored the scrollbar and pushed the page into horizontal scroll. */
.break-line {
    width: 100%;
}

/* On phones the fixed side tab sat on top of body copy; the logo already links home. */
@media (max-width: 767px) {
    #awwwards {
        display: none;
    }
}

/* ---------- Hero: the blank draws itself, then waits for a name ---------- */

/* The title is an h1 for structure but keeps the h2 scale it was designed at. */
h1.intro-title {
    font-size: 4rem;
    letter-spacing: normal;
    line-height: 1;
}
@media (min-width: 1920px) {
    h1.intro-title { font-size: 5.6rem; }
}
@media (max-width: 991px) {
    h1.intro-title { line-height: 1.1; }
}
@media (max-width: 767px) {
    h1.intro-title { font-size: 2.8rem; }
}
@media (max-width: 479px) {
    h1.intro-title { font-size: 2.16rem; }
}

.intro-line {
    display: block;
    animation: intro-rise 1.1s cubic-bezier(.16, 1, .3, 1) backwards;
}
.intro-line:nth-child(2) { animation-delay: .12s; }
.intro-line:nth-child(3) { animation-delay: .24s; }

.intro-blank {
    position: relative;
    display: inline-block;
    animation: intro-draw .9s cubic-bezier(.65, 0, .35, 1) .7s backwards;
}
/* Caret at the end of the blank: blinks a few times, then leaves the space empty. */
.intro-blank::after {
    content: "";
    position: absolute;
    right: -.04em;
    bottom: .14em;
    width: 2px;
    height: .72em;
    background: currentColor;
    opacity: 0;
    animation: intro-caret 3.2s steps(1, end) 1.6s;
}

.intro-arrow {
    display: inline-block;
    font-weight: 100;
    animation: intro-drop 1s cubic-bezier(.16, 1, .3, 1) 1.1s backwards;
}

.about-illustration {
    animation: intro-map 1.8s cubic-bezier(.16, 1, .3, 1) .15s backwards;
}

@keyframes intro-rise {
    from { opacity: 0; transform: translateY(.45em); filter: blur(6px); }
}
@keyframes intro-draw {
    from { clip-path: inset(-.3em 100% -.3em 0); }
    to { clip-path: inset(-.3em -.2em -.3em 0); }
}
@keyframes intro-caret {
    0%, 25%, 50%, 75% { opacity: 1; }
    12.5%, 37.5%, 62.5%, 87.5%, 100% { opacity: 0; }
}
@keyframes intro-drop {
    from { opacity: 0; transform: translateY(-.35em); }
}
@keyframes intro-map {
    from { opacity: 0; transform: scale(1.06); }
}

/* ---------- Logo bar tucks away while reading down (see intro-polish.js) ---------- */

.nav1_component {
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.nav1_component.is-tucked:not(:focus-within) {
    transform: translateY(-110%);
}

/* ---------- Tables: make the program the visible answer ---------- */

.dataTable th:nth-child(3) {
    background: var(--black, #0f0f0f);
    color: var(--white, #fff);
}
.dataTable td:nth-child(3) {
    background: var(--secondary, #f6f5ed);
    font-weight: 500;
}

.dataNumTable tbody tr {
    transition: background-color .2s ease;
}
.dataNumTable tbody tr:hover {
    background: #fafafa;
}
.dataNumTable tr.is-program,
.dataNumTable tr.is-program:hover {
    background: var(--secondary, #f6f5ed);
    border-bottom-color: var(--black, #0f0f0f);
}

/* Six columns do not fit a phone; let the table scroll instead of crushing cells. */
.table-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
@media (max-width: 767px) {
    .table-scroll .dataNumTable {
        min-width: 40rem;
    }
}

/* ---------- Primary call to action ---------- */

.intro-cta {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    margin-top: .5rem;
    padding: 1rem 1.5rem;
    border: 1px solid var(--black, #0f0f0f);
    background: var(--black, #0f0f0f);
    color: var(--white, #fff) !important;
    font-weight: 500;
    line-height: 1;
    transition: background-color .3s ease, color .3s ease;
}
.intro-cta svg {
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.intro-cta:hover {
    background: var(--white, #fff);
    color: var(--black, #0f0f0f) !important;
}
.intro-cta:hover svg {
    transform: translateX(.25rem);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .projetcs-image {
        transition-duration: .2s !important;
    }
    .intro-line,
    .intro-blank,
    .intro-blank::after,
    .intro-arrow,
    .about-illustration {
        animation: none;
    }
    .nav1_component {
        transition: none;
    }
}