/* New home: typography helpers and minimal motion. */

html {
    scroll-behavior: smooth;
}

/* Nav and buttons use the geometric UI face from the design. */
.nh-font-ui {
    font-family: 'Poppins', 'Plus Jakarta Sans', sans-serif;
}

/* ---------- Reveal on scroll ---------- */
/* Hidden only when JS is running, so the page still reads without it. */
.js [data-reveal] {
    opacity: 0;
}

.js [data-reveal].is-visible {
    opacity: 1;
    animation: nh-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms) backwards;
}

.js [data-reveal='left'].is-visible {
    animation-name: nh-fade-left;
}

.js [data-reveal='right'].is-visible {
    animation-name: nh-fade-right;
}

.js [data-reveal='fade'].is-visible {
    animation-name: nh-fade;
}

@keyframes nh-fade-up {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
}

@keyframes nh-fade-left {
    from {
        opacity: 0;
        transform: translate3d(-28px, 0, 0);
    }
}

@keyframes nh-fade-right {
    from {
        opacity: 0;
        transform: translate3d(28px, 0, 0);
    }
}

@keyframes nh-fade {
    from {
        opacity: 0;
    }
}

/* Section headers: the wrapper stays put and its eyebrow, heading and copy rise one after another
   (new-home.js marks the children). Headings clear from a soft blur for a more finished feel. */
.js [data-reveal='group'] {
    opacity: 1;
}

.js [data-reveal='group'].is-visible {
    animation: none;
}

.js [data-reveal='group'] [data-reveal-child] {
    opacity: 0;
}

.js [data-reveal='group'].is-visible [data-reveal-child] {
    opacity: 1;
    animation: nh-fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms) backwards;
}

.js [data-reveal='group'].is-visible h1[data-reveal-child],
.js [data-reveal='group'].is-visible h2[data-reveal-child],
.js [data-reveal='group'].is-visible h3[data-reveal-child] {
    animation-name: nh-title;
    animation-duration: 1.1s;
}

@keyframes nh-title {
    from {
        opacity: 0;
        transform: translate3d(0, 34px, 0);
        filter: blur(8px);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

/* Images and screenshots settle from a slight zoom instead of just sliding. */
.js [data-reveal='zoom'].is-visible {
    animation-name: nh-zoom;
    animation-duration: 1.2s;
}

@keyframes nh-zoom {
    from {
        opacity: 0;
        transform: scale3d(1.06, 1.06, 1) translate3d(0, 18px, 0);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
    }
}

/* ---------- Hero collage ---------- */
.nh-float {
    animation: nh-float 7s ease-in-out infinite;
}

@keyframes nh-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -10px, 0);
    }
}

.nh-ring {
    animation: nh-ring 6s ease-in-out infinite;
    animation-delay: var(--ring-delay, 0s);
}

@keyframes nh-ring {
    0%,
    100% {
        opacity: 0.55;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.03);
    }
}

/* ---------- Mobile menu ---------- */
.nh-menu-open {
    animation: nh-menu 0.25s ease-out;
}

@keyframes nh-menu {
    from {
        opacity: 0;
        transform: translate3d(0, -8px, 0);
    }
}

/* ---------- Header submenus ---------- */
/* Shown on hover, keyboard focus, or data-open (set by new-home.js on touch screens). */
.nh-subnav {
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.nh-nav-item:hover > .nh-subnav,
.nh-nav-item:focus-within > .nh-subnav,
.nh-nav-item[data-open='true'] > .nh-subnav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
}

.nh-nav-item:hover .nh-nav-caret,
.nh-nav-item:focus-within .nh-nav-caret,
.nh-nav-item[data-open='true'] .nh-nav-caret {
    transform: rotate(180deg);
}

/* ---------- Carousel dots (built by new-home.js) ---------- */
.nh-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 16px;
}

.nh-dots button {
    position: relative;
    width: 13px;
    height: 13px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: currentColor;
    cursor: pointer;
    transition: width 0.25s ease, height 0.25s ease;
}

/* Larger tap target than the 13px dot. */
.nh-dots button::before {
    content: '';
    position: absolute;
    inset: -8px -2px;
}

.nh-dots button[aria-current='true'] {
    width: 16px;
    height: 16px;
}

/* ---------- FAQ accordion ---------- */
.nh-faq summary::-webkit-details-marker {
    display: none;
}

.nh-faq[open] .nh-faq-answer {
    animation: nh-menu 0.3s ease-out;
}

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

    .nh-faq[open] .nh-faq-answer {
        animation: none;
    }

    .nh-subnav {
        transform: none;
        transition: none;
    }

    .js [data-reveal],
    .js [data-reveal].is-visible,
    .js [data-reveal] [data-reveal-child] {
        opacity: 1;
        animation: none;
    }

    .nh-float,
    .nh-ring,
    .nh-menu-open {
        animation: none;
    }
}

/* ---------- Contact form: country-code dropdown (intl-tel-input) ---------- */
/* Design: a light grey block on the left of the white field with flag, dial code and a small caret. */
.nh-phone .iti {
    display: block;
    width: 100%;
}

.nh-phone .iti__flag-container {
    padding: 1px; /* sits inside the field's 1px border */
}

.nh-phone .iti__selected-flag,
.nh-phone .iti--separate-dial-code .iti__selected-flag {
    height: 100%;
    padding: 0 10px 0 11px;
    border-radius: 9px 0 0 9px;
    background-color: #f0f0f0;
    outline: none;
}

.nh-phone .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag,
.nh-phone .iti__selected-flag:focus-visible {
    background-color: #e6e6e6;
}

.nh-phone .iti__selected-dial-code {
    margin-left: 7px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: #333333;
}

.nh-phone .iti__arrow {
    margin-left: 7px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #333333;
}

.nh-phone .iti__arrow--up {
    border-top: none;
    border-bottom: 5px solid #333333;
}

.nh-phone .iti__country-list {
    z-index: 30;
    width: 100%; /* never wider than the field, so it stays inside the page */
    min-width: 280px;
    margin-top: 6px;
    margin-left: 0;
    max-height: 240px;
    white-space: normal;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 10, 30, 0.35);
    font-size: 13px;
    font-weight: 500;
    color: #0f172a;
}

.nh-phone .iti__country {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
}

.nh-phone .iti__country-name {
    flex: 1 1 auto;
    margin-right: 0;
}

.nh-phone .iti__country.iti__highlight {
    background-color: #eef5ff;
}

.nh-phone .iti__dial-code {
    color: #6b7280;
}

.nh-phone .iti__divider {
    border-bottom-color: #e5e7eb;
}

/* Sections that were never scrolled into view still have to print. */
@media print {
    .js [data-reveal],
    .js [data-reveal] [data-reveal-child] {
        opacity: 1;
        animation: none;
    }
}