/* ArsLudi Public
   Structural styling stays in Tailwind utilities.
   This file holds brand tokens and behavior-specific styles. */

:root {
    color-scheme: light;

    --arsludi-teal-950: #042f2e;
    --arsludi-teal-900: #134e4a;
    --arsludi-gold: #c9a227;
    --arsludi-gold-dark: #8b711c;

    --arsludi-ivory-0: #fffdf8;
    --arsludi-ivory-50: #fbf9f2;
    --arsludi-ivory-100: #f7f4ea;
    --arsludi-ivory-200: #f4efe3;
    --arsludi-ivory-champagne: #faf3df;
}

html {
    scroll-padding-top: 4.5rem;
}

.surface-ivory-card {
    background: var(--arsludi-ivory-0);
}

.surface-ivory-soft {
    background: var(--arsludi-ivory-50);
}

.surface-ivory {
    background: var(--arsludi-ivory-100);
}

.surface-ivory-deep {
    background: var(--arsludi-ivory-200);
}

/* Existing tuned sections: palette-only override, no layout changes. */
#come-funziona {
    background: var(--arsludi-ivory-0);
}

#funzionalita {
    background: var(--arsludi-ivory-100);
}

.text-balance {
    text-wrap: balance;
}

.browser-shadow {
    box-shadow:
        0 32px 80px -32px rgba(15, 23, 42, 0.35),
        0 16px 36px -24px rgba(15, 118, 110, 0.25);
}

.skip-link {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 200;
    transform: translateY(-180%);
    border-radius: 0.5rem;
    background: var(--arsludi-ivory-0);
    color: var(--arsludi-teal-950);
    padding: 0.65rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 800;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    transition: transform 160ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(201, 162, 39, 0.72);
    outline-offset: 3px;
}

/* Search keeps a visible keyboard focus without the heavy double-ring effect. */
[data-site-search-input]:focus-visible {
    outline: 1px solid rgba(201, 162, 39, 0.55);
    outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Landing viewport framing

   On phones the landing must read as one continuous document: sections keep
   their natural height and touch scrolling decides the rhythm. From tablet /
   desktop upward, the chapter framing returns and short sections fill the
   usable viewport below the 4.5rem header.

   Footer is deliberately excluded and keeps its natural height.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
    #hero > div:first-of-type,
    #hero-product-reveal,
    #come-funziona > div:first-child,
    #funzionalita > div:first-child,
    #catalogo > div:first-child,
    #live > div:first-child,
    #demo > div:first-child,
    #prezzi > div:first-child,
    section[aria-labelledby="landing-closing-title"] > div:first-child {
        min-height: calc(100svh - 4.5rem);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Pre-hero: cinematic but non-blocking.
   It is normal document content, not an interstitial overlay.
   -------------------------------------------------------------------------- */

.landing-intro {
    position: relative;
    isolation: isolate;
    min-height: calc(100svh - 4.5rem);
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(20, 184, 166, 0.12), transparent 34rem),
        linear-gradient(180deg, #032f2e 0%, #042f2e 66%, #063a38 100%);
}

.landing-intro::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.07;
    background-image: repeating-linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.16) 0,
        rgba(255, 255, 255, 0.16) 1px,
        transparent 1px,
        transparent 5px
    );
    mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
}

.landing-intro-vignette {
    background:
        radial-gradient(circle at 50% 46%, transparent 0%, rgba(0, 0, 0, 0.07) 48%, rgba(0, 0, 0, 0.28) 100%);
}

.landing-intro-light {
    width: min(72vw, 36rem);
    aspect-ratio: 1;
    border-radius: 9999px;
    opacity: 0;
    background: radial-gradient(
        circle,
        rgba(201, 162, 39, 0.21) 0%,
        rgba(201, 162, 39, 0.07) 31%,
        transparent 69%
    );
    transform: translate(-50%, -50%) scale(0.55);
    animation: landingIntroLight 1450ms ease-out 120ms forwards;
}

.landing-intro-leaf {
    opacity: 0;
    filter: drop-shadow(0 0 0 rgba(201, 162, 39, 0));
    transform: scale(0.42) rotate(-14deg);
    animation: landingIntroLeaf 900ms cubic-bezier(.16, 1, .3, 1) 180ms forwards;
}

.landing-intro-brand {
    opacity: 0;
    filter: blur(9px);
    transform: translateY(18px) scale(0.975);
    animation: landingIntroBrand 760ms cubic-bezier(.16, 1, .3, 1) 650ms forwards;
}

.landing-intro-description {
    opacity: 0;
    transform: translateY(10px);
    animation: landingIntroRise 560ms ease-out 1050ms forwards;
}

.landing-intro-line {
    width: 0;
    opacity: 0.92;
    animation: landingIntroLine 620ms cubic-bezier(.16, 1, .3, 1) 1240ms forwards;
}

.landing-intro-status {
    opacity: 0;
    transform: translateY(8px);
    animation: landingIntroRise 480ms ease-out 1450ms forwards;
}

.landing-intro-status-dot {
    box-shadow: 0 0 0 rgba(201, 162, 39, 0);
    animation: landingIntroPulse 1700ms ease-in-out 1700ms infinite;
}

.landing-intro-enter-wrap {
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    animation: landingIntroEnter 520ms cubic-bezier(.16, 1, .3, 1) 1850ms forwards;
}

.landing-intro-cursor {
    display: inline-block;
    animation: landingIntroCursor 950ms steps(1, end) 2400ms infinite;
}

@keyframes landingIntroLight {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.55);
    }
    45% { opacity: 1; }
    100% {
        opacity: 0.62;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes landingIntroLeaf {
    0% {
        opacity: 0;
        transform: scale(0.42) rotate(-14deg);
    }
    70% {
        filter: drop-shadow(0 0 26px rgba(201, 162, 39, 0.34));
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
        filter: drop-shadow(0 0 12px rgba(201, 162, 39, 0.18));
    }
}

@keyframes landingIntroBrand {
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}

@keyframes landingIntroRise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes landingIntroLine {
    to { width: 4rem; }
}

@keyframes landingIntroEnter {
    to {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

@keyframes landingIntroPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
    50% { box-shadow: 0 0 0 6px rgba(201, 162, 39, 0.11); }
}

@keyframes landingIntroCursor {
    0%, 48% { opacity: 1; }
    49%, 100% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Pricing billing toggle
   -------------------------------------------------------------------------- */

.pricing-period-button {
    background: transparent;
    color: #475569;
}

.pricing-period-button:hover {
    background: var(--arsludi-ivory-0);
    color: #0f172a;
}

.pricing-period-button[aria-pressed="true"] {
    background: var(--arsludi-teal-950);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.14);
}

.pricing-period-button[aria-pressed="true"]:hover {
    background: var(--arsludi-teal-900);
    color: #ffffff;
}

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .landing-intro-light,
    .landing-intro-leaf,
    .landing-intro-brand,
    .landing-intro-description,
    .landing-intro-status,
    .landing-intro-enter-wrap {
        opacity: 1;
        visibility: visible;
        filter: none;
        transform: none;
    }

    .landing-intro-line {
        width: 4rem;
        opacity: 0.92;
    }
}

/* --------------------------------------------------------------------------
   Mobile information rows

   On phones, informational cards read better as a compact vertical sequence:
   icon on the left, copy on the right, one separator between steps. Visual,
   interactive and commercial cards (catalog media, demo videos, pricing) keep
   their card treatment because the container itself carries meaning.
   -------------------------------------------------------------------------- */

@media (max-width: 639.98px) {
    /* Features: six equal cards become one continuous step list. */
    #funzionalita > div:first-child {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    #funzionalita .mx-auto.mt-14.grid.w-full.max-w-6xl {
        margin-top: 2rem;
        gap: 0;
        border-top: 1px solid #e1d9ca;
    }

    #funzionalita article {
        display: grid;
        grid-template-columns: 1.5rem minmax(0, 1fr);
        column-gap: 1rem;
        row-gap: 0.2rem;
        min-height: 0;
        border-width: 0 0 1px 0;
        border-color: #e1d9ca;
        border-radius: 0;
        background: transparent;
        padding: 1.15rem 0;
        text-align: left;
    }

    #funzionalita article > span {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 1.5rem;
        height: 1.5rem;
        margin-top: 0.1rem;
    }

    #funzionalita article > h3 {
        grid-column: 2;
        margin-top: 0;
        font-size: 0.84rem;
        line-height: 1.2rem;
    }

    #funzionalita article > p {
        grid-column: 2;
        margin-top: 0;
        font-size: 0.8rem;
        line-height: 1.25rem;
    }

    #funzionalita .mx-auto.mt-16.max-w-3xl {
        margin-top: 2.5rem;
    }

    /* Standalone tournament vs Event: same mobile visual language. */
    #tornei-indipendenti [data-independent-start-grid] {
        margin-top: 2rem;
        gap: 0;
    }

    #tornei-indipendenti [data-independent-start-card] {
        border-width: 0 0 1px 0;
        border-color: #dfd6c6;
        border-radius: 0;
        background: transparent;
        padding: 1.2rem 0;
    }

    #tornei-indipendenti [data-independent-start-card]:first-child {
        border-top-width: 1px;
    }

    #tornei-indipendenti [data-independent-start-card] > div:first-child {
        display: grid;
        grid-template-columns: 1.5rem minmax(0, 1fr);
        column-gap: 1rem;
        row-gap: 0.1rem;
    }

    #tornei-indipendenti [data-independent-start-card] > div:first-child > span {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 1.5rem;
        height: 1.5rem;
        margin-top: 0.1rem;
    }

    #tornei-indipendenti [data-independent-start-card] > div:first-child > div,
    #tornei-indipendenti [data-independent-start-card] > div:first-child > h3 {
        grid-column: 2;
        margin-top: 0;
    }

    #tornei-indipendenti [data-independent-start-card] > div:first-child > h3 {
        font-size: 0.98rem;
        line-height: 1.25rem;
    }

    #tornei-indipendenti [data-independent-start-card] > p,
    #tornei-indipendenti [data-independent-start-card] > div:last-child {
        margin-left: 2.5rem;
    }

    #tornei-indipendenti [data-independent-start-card] > p {
        margin-top: 0.35rem;
        font-size: 0.8rem;
        line-height: 1.25rem;
    }

    #tornei-indipendenti [data-independent-start-card] > div:last-child {
        margin-top: 0.7rem;
    }

    /* Plan capacity: remove the nested mobile card and keep a readable sequence. */
    #tornei-indipendenti [data-independent-capacity] {
        margin-top: 2rem;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    #tornei-indipendenti [data-independent-capacity-header] {
        display: grid;
        grid-template-columns: 1.5rem minmax(0, 1fr);
        column-gap: 1rem;
        row-gap: 0.1rem;
        border-top: 1px solid #dfd6c6;
        border-bottom: 1px solid #dfd6c6;
        padding: 1.2rem 0;
        text-align: left;
    }

    #tornei-indipendenti [data-independent-capacity-header] > span {
        grid-column: 1;
        grid-row: 1 / span 3;
        width: 1.5rem;
        height: 1.5rem;
        margin: 0.1rem 0 0;
    }

    #tornei-indipendenti [data-independent-capacity-header] > div,
    #tornei-indipendenti [data-independent-capacity-header] > h3,
    #tornei-indipendenti [data-independent-capacity-header] > p {
        grid-column: 2;
        margin-top: 0;
        margin-left: 0;
        text-align: left;
    }

    #tornei-indipendenti [data-independent-capacity-header] > p {
        margin-top: 0.35rem;
        font-size: 0.8rem;
        line-height: 1.25rem;
    }

    #tornei-indipendenti [data-independent-capacity-item] {
        display: grid;
        grid-template-columns: 1.5rem minmax(0, 1fr);
        column-gap: 1rem;
        row-gap: 0.2rem;
        padding: 1.1rem 0;
        text-align: left;
    }

    #tornei-indipendenti [data-independent-capacity-item] > span {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 1.35rem;
        height: 1.35rem;
        margin: 0.05rem 0 0;
    }

    #tornei-indipendenti [data-independent-capacity-item] > h4,
    #tornei-indipendenti [data-independent-capacity-item] > p {
        grid-column: 2;
        margin-top: 0;
        margin-left: 0;
        text-align: left;
    }

    #tornei-indipendenti [data-independent-capacity-item] > h4 {
        font-size: 0.78rem;
        line-height: 1.1rem;
    }

    #tornei-indipendenti [data-independent-capacity-item] > p {
        font-size: 0.79rem;
        line-height: 1.2rem;
    }
}