/* ==========================================================================
   HOME — loaded on the home page only, after site.css

   The hero is a sticky stage over 720vh from the first paint, the texts and
   the Invisible Ecologies block placed over the canvas: it does not wait for
   the script, so nothing jumps when the script arrives. Without script (or
   without canvas) home-static.css turns it back into a plain column.
   ========================================================================== */

html { scroll-behavior: smooth; }

/* ---- hero: type ------------------------------------------------------- */

.hero { position: relative; }

.txt {
    margin: 0;
    font-family: var(--pub-display); font-weight: 700; text-transform: uppercase;
    font-size: var(--pub-hero-size); line-height: .98; letter-spacing: -.02em;
}
.txt--claim, .txt--right { text-align: right; }

.ie { display: grid; gap: 28px; }
.ie__head { display: grid; gap: 16px; align-content: center; }
.ie__title {
    margin: 0;
    font-family: var(--pub-display); font-weight: 700; text-transform: uppercase;
    font-size: clamp(34px, 5.4vw, 92px); line-height: .9; letter-spacing: -.03em;
}
.ie__sub { font-size: 12px; letter-spacing: .2em; }

.hero__anchor { position: absolute; left: 0; top: 0; width: 1px; height: 1px; }

/* ---- hero: the stage ---------------------------------------------------- */

.hero { height: 720vh; }
/* The anchor sits where the Invisible Ecologies state is fully in. */
.hero .hero__anchor { top: 78%; }

.hero .stage {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    padding: 0; display: block; overflow: hidden;
}
.hero .stage__sphere { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero .txt { position: absolute; width: min(42vw, 620px); will-change: transform, opacity; }
.hero .txt--name  { left: var(--pub-gut); top: 20%; }
.hero .txt--claim { right: var(--pub-gut); bottom: 20%; }
.hero .txt--left  { left: var(--pub-gut); top: 50%; margin-top: -1.5em; }
.hero .txt--right { right: var(--pub-gut); top: 50%; margin-top: -2em; }

/* The statements are typed in by home.js: hidden until it takes them. */
.hero .txt--left:not(.is-typed), .hero .txt--right:not(.is-typed) { visibility: hidden; }
.txt.is-typed .ch { opacity: 0; }
.txt.is-typed .ch.on { opacity: 1; }
.caret {
    display: inline-block; width: .5em; height: .82em;
    background: var(--pub-fg); vertical-align: -.06em; margin-left: .06em;
    animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

.hero .ie {
    position: absolute; inset: 0;
    grid-template-columns: 30% minmax(0, 1fr);
    align-content: center; gap: clamp(14px, 2.2vh, 24px) 24px;
    padding: 84px var(--pub-gut) 64px;
    opacity: 0; pointer-events: none;
}
.hero .ie.is-on { pointer-events: auto; }
.hero .ie > * { grid-column: 2; }
.hero .ie__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 24px; }
.hero .ie__title { font-size: clamp(30px, min(4.4vw, 8vh), 80px); }
.hero .ie__sub { grid-row: 2; }
/* The introduction justified at 16px, as every descriptive text. */
.ie__text {
    color: var(--pub-body); font-size: 16px; line-height: 1.6;
    text-align: justify; text-justify: inter-word; text-align-last: left; -webkit-hyphens: auto; hyphens: auto;
}
.ie__text p { margin: 0; }
.ie__text p + p { margin-top: .8em; }
.hero .ie__eds li { transition: opacity .6s, transform .7s var(--pub-ease); }

.hero .hud {
    position: absolute; left: var(--pub-gut); right: var(--pub-gut);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    display: flex; justify-content: space-between; gap: 16px;
    color: var(--pub-dim);
}
.hud b { color: var(--pub-fg); font-weight: 500; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
    .hero .txt { width: auto; max-width: calc(100% - 2 * var(--pub-gut)); font-size: clamp(26px, 8.5vw, 44px); }
    .hero .txt--name  { top: 15%; }
    .hero .txt--claim { bottom: 15%; }
    .hero .txt--left  { top: 15%; margin-top: 0; }
    .hero .txt--right { top: auto; bottom: 15%; margin-top: 0; }

    .hero .ie {
        grid-template-columns: 30% minmax(0, 1fr);
        align-content: center; gap: 22px 12px;
        padding: 110px var(--pub-gut) 60px;
    }
    .hero .ie > * { grid-column: 1 / -1; }
    .hero .ie__text { display: none; }
    .hero .ie__eds--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero .ie__eds--grid li:nth-last-child(-n+2) { border-bottom: 1px solid var(--pub-line); }
    .ie__title { font-size: clamp(28px, 8vw, 40px); }
    .ie__eds b { font-size: 22px; }
    .ie__eds--grid b { font-size: 15px; }
    .ie__eds a { padding: 11px 0; }
    .ie__eds--grid a { padding: 9px 0; }
    .hud span:first-child { display: none; }
}

/* ---- sections ----------------------------------------------------------- */

.home-section { padding-top: var(--gap-section); scroll-margin-top: 20px; }
#progetti { scroll-margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .caret { animation: none; }
    .hero .ie__eds li { transition: none; }
}