/*
 * Section icons (inc/icons.php, assets/icons/icons.json): terracotta outline
 * drawings beside a section's text, sliding in from the left as they scroll
 * into view (assets/js/reveal.js). Loaded on content, location and industry pages.
 */

/* Decorative, so terracotta is allowed on the light ground (DESIGN.md) */
.tr-icon {
    display: flex;
    justify-content: center;
    color: var(--tr-terracotta, #D68A5C);
}

.tr-icon svg {
    display: block;
    width: auto;
    max-width: 100%;
    height: 200px;
}

.tr-icon--gears svg {
    height: 300px;
}

/* Content pages: the icon column sits level with the heading */
.tr-page .tr-split--icon {
    align-items: flex-start;
}

/* Location and industry pages: the icon sits under the section heading */
.tr-side-icon {
    justify-content: flex-start;
    margin-top: 28px;
}

@media (max-width: 781px) {
    .tr-icon {
        justify-content: flex-start;
    }

    /* Stacked, the heading's icon would push the text a long way down */
    .tr-side-icon {
        margin: 8px 0 16px;
    }

    .tr-side-icon svg {
        height: 120px;
    }
}

/* Slide in from the left as the icon scrolls into view.
   Hidden only once the script has run, so without JavaScript the icons just show. */
.tr-reveal {
    opacity: 0;
    transform: translateX(-80px);
    transition: opacity 0.6s var(--tr-ease-out, cubic-bezier(0.16, 1, 0.3, 1)), transform 0.9s var(--tr-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.tr-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .tr-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}