/* ==========================================================================
      Tesscorn — custom styles (everything Tailwind utilities don't cover)
      ========================================================================== */

/* Base
      ========================================================================== */
html {
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

body {
    overflow-x: clip; /* guard against accidental horizontal scroll */
}

/* Visible keyboard focus (WCAG 2.4.7) */
:focus-visible {
    outline: 3px solid #C2410C;
    outline-offset: 3px;
}

.on-dark :focus-visible,
.on-dark:focus-visible {
    outline-color: #FFFFFF;
}

/* Skip link */
.skip-link {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 100;
    padding: 12px 20px;
    background: #1E1E1E;
    color: #FFFFFF;
    font-weight: 600;
    border-radius: 4px;
    transition: top .2s ease;
}

.skip-link:focus {
    top: 16px;
}

/* Each section is its own layer, stacked in page order, so later sections
      cover the sticky decorative image in "Engineering Solutions". */
main > section {
    position: relative;
    z-index: 1;
}

/* Hero
      ========================================================================== */
.hero {
    background-color: #050505;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 44px 44px;
}

/* Chevron mask — edges run through the centre of the outline stroke.
      Mobile: the complete pointed chevron (698 × 1012 artwork). */
.hero-media__clip {
    clip-path: polygon(
        0.29% 0.2%,
        99.57% 35.57%,
        99.57% 64.43%,
        0.29% 99.8%,
        0.29% 71.15%,
        59.6% 50.1%,
        0.29% 28.85%
    );
}

/* Desktop: the same chevron cropped to the section height (698 × 700 artwork). */
@media (min-width: 1024px) {
    .hero-media__clip {
        clip-path: polygon(
            42.69% 0,
            99.57% 29.29%,
            99.57% 71%,
            43.41% 100%,
            0.29% 100%,
            0.29% 80.71%,
            59.6% 50.29%,
            0.29% 19.57%,
            0.29% 0
        );
    }
}

/* Outline: the orange line draws itself once from the top-right corner, travels
      the whole border back to where it started, then stays (no loop).
      pathLength="1" makes the dash values fractions of the outline. */
.hero-media__outline {
    stroke: #E0521D;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    animation: hero-outline-draw 3.5s cubic-bezier(.45, 0, .25, 1) .3s forwards;
}

@keyframes hero-outline-draw {
    to { stroke-dashoffset: 0; }
}

/* Play / pause button — the video only plays when the user asks.
      While playing, the button fades out and returns on hover / keyboard focus. */
.hero-play .icon-pause { display: none; }
.hero-play[data-paused="false"] .icon-play { display: none; }
.hero-play[data-paused="false"] .icon-pause { display: block; }

.hero-media.is-playing .hero-play {
    opacity: 0;
}

.hero-media.is-playing:hover .hero-play,
.hero-media.is-playing .hero-play:focus-visible {
    opacity: 1;
}

/* Solutions
      ========================================================================== */
.sol-item {
    transition: box-shadow .3s ease;
}

.sol-item:hover,
.sol-item:focus-within {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

/* Image zoom on card hover / keyboard focus */
.sol-media img {
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.sol-item:hover .sol-media img,
.sol-item:focus-within .sol-media img {
    transform: scale(1.08);
}

.sol-link svg {
    transition: transform .25s ease;
}

.sol-link:hover svg,
.sol-link:focus-visible svg {
    transform: translateX(4px);
}

/* Trusted-by marquee
      ========================================================================== */
.trusted__track {
    will-change: transform;
}

/* Logo links */
.trusted__link img,
.partner__link img {
    transition: transform .3s ease, filter .3s ease;
}

.trusted__link:hover img,
.trusted__link:focus-visible img,
.partner__link:hover img,
.partner__link:focus-visible img {
    transform: scale(1.06);
}

/* Static fallback (reduced motion / paused by no-JS) */
.trusted.is-static .trusted__track {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    transform: none !important;
}

.trusted.is-static .trusted__clone {
    display: none;
}

/* Partners
      ========================================================================== */
.partner__inner {
    transition: opacity .6s ease, transform .6s ease, filter .6s ease;
}

.partner.is-swapping .partner__inner {
    opacity: 0;
    transform: translateY(8px) scale(.96);
    filter: blur(2px);
}

/* Mobile: first 4 partners, the rest revealed by "Show more" */
@media (max-width: 767px) {
    .partners__grid:not(.is-expanded) .partner--extra {
        display: none;
    }

    .partners__grid.is-expanded .partner--extra {
        animation: partner-in .45s ease both;
    }
}

@keyframes partner-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* Reduced motion
      ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

 *,
 *::before,
 *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .hero-media__outline {
        animation: none;
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }
}