@tailwind base;
@tailwind components;
@tailwind utilities;

/* Iconify web component: stroke/fill icons inherit Tailwind text color */
iconify-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

iconify-icon.text-inherit {
    color: inherit;
}

@layer components {
    .lux-btn {
        @apply inline-flex min-h-[3rem] items-center justify-center bg-gradient-to-r from-[#E780A2] via-tsb-primary to-[#B83365] bg-[length:200%_100%] bg-left px-8 py-3 font-sans uppercase tracking-[0.1em] text-tsb-primary-foreground shadow-sm shadow-tsb-primary/20 transition-[background-position,box-shadow,transform] duration-500 ease-out hover:bg-right hover:shadow-lg hover:shadow-tsb-primary/40 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-tsb-primary rounded-full;
    }

    .lux-section-title {
        @apply font-serif text-3xl font-medium uppercase tracking-[0.1em] text-lux-ink md:text-[2.5rem];
    }

    .lux-dot-overlay {
        background-image: radial-gradient(rgb(255 55 250 / 25%) 1px, transparent 1px);
        background-size: 10px 10px;
        @apply pointer-events-none text-lux-ink/25;
    }

    .lux-arch-frame {
        border-radius: 9999px 9999px 1.5rem 1.5rem;
    }

    .header-brand-logo {
        @apply block h-[2.75rem] w-[9.5rem] max-w-[min(42vw,_12rem)] shrink-0 object-contain object-left;
    }

    /* Social tap targets: icon fill uses currentColor (each network’s brand CI) */
    .lux-social-btn {
        @apply inline-flex h-11 w-11 items-center justify-center rounded-md border bg-white/95 shadow-sm transition hover:shadow-md;
    }

    .lux-social-btn--wechat {
        @apply border-[#07C160]/35 text-[#07C160] hover:border-[#07C160]/55 hover:bg-[#07C160]/10 hover:text-[#059652];
    }

    .lux-social-btn--line {
        @apply border-[#06C755]/35 text-[#06C755] hover:border-[#06C755]/55 hover:bg-[#06C755]/10 hover:text-[#05a849];
    }

    .lux-social-btn--whatsapp {
        @apply border-[#25D366]/35 text-[#25D366] hover:border-[#25D366]/55 hover:bg-[#25D366]/10 hover:text-[#1da851];
    }

    .lux-social-btn--facebook {
        @apply border-[#1877F2]/35 text-[#1877F2] hover:border-[#1877F2]/55 hover:bg-[#1877F2]/10 hover:text-[#0d65d9];
    }

    .lux-social-btn--instagram {
        @apply border-[#E4405F]/35 text-[#E4405F] hover:border-[#E4405F]/55 hover:bg-[#E4405F]/10 hover:text-[#c92d4a];
    }

    .lux-social-btn--youtube {
        @apply border-[#FF0000]/35 text-[#FF0000] hover:border-[#FF0000]/55 hover:bg-[#FF0000]/10 hover:text-[#d40000];
    }

    .lux-social-btn--tiktok {
        @apply border-black/25 text-black hover:border-black/40 hover:bg-black/5 hover:text-black;
    }

    .lux-social-btn--x {
        @apply border-black/25 text-black hover:border-black/40 hover:bg-black/5 hover:text-black;
    }

    .lux-social-btn--threads {
        @apply border-black/25 text-black hover:border-black/40 hover:bg-black/5 hover:text-black;
    }

    .lux-social-btn--googlemaps {
        @apply border-[#1A73E8]/35 text-[#1A73E8] hover:border-[#1A73E8]/55 hover:bg-[#1A73E8]/10 hover:text-[#1557b0];
    }

    .lux-social-btn.lux-social-btn--inactive {
        @apply cursor-default border-dashed border-lux-blush/50 bg-white/80 text-lux-rose-deep/45 shadow-none hover:border-lux-blush/50 hover:bg-white/80 hover:text-lux-rose-deep/45 hover:shadow-none;
    }

    @media (min-width: 768px) {
        .header-brand-logo {
            height: 3.5rem;
            width: auto;
            max-width: 14rem;
        }
    }

    .header-mobile-nav-toggle {
        @apply inline-flex min-h-10 min-w-10 cursor-pointer items-center justify-center rounded-md border-0 bg-transparent p-1.5 text-lux-ink shadow-none outline-none ring-0 transition-colors hover:text-tsb-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-tsb-primary/35 motion-reduce:transition-none;
    }

    /* Iconify host must have explicit box; inner SVG follows this size */
    .header-mobile-nav-icon-box {
        @apply relative flex h-[32px] w-[32px] shrink-0 items-center justify-center;
    }

    .header-mobile-nav-icon--menu,
    .header-mobile-nav-icon--close {
        @apply absolute inset-0 block transition-[opacity,transform] duration-200 ease-out motion-reduce:transition-none;
        height: 100%;
        width: 100%;
    }

    .header-mobile-nav-icon--close {
        @apply scale-90 opacity-0;
    }

    .site-header[data-mobile-nav-open="true"] .header-mobile-nav-icon--menu {
        @apply scale-90 opacity-0;
    }

    .site-header[data-mobile-nav-open="true"] .header-mobile-nav-icon--close {
        @apply scale-100 opacity-100;
    }

    .header-mobile-nav-panel {
        top: var(--site-header-height, 4.25rem);
        @apply fixed inset-x-0 z-[45] w-full max-w-none overflow-hidden border-0 border-b border-lux-ink/10 bg-white shadow-md backdrop-blur-md transition-[opacity,transform,max-height] duration-300 ease-out motion-reduce:transition-none max-h-0 -translate-y-2 opacity-0 pointer-events-none;
    }

    .header-mobile-nav-panel.is-open {
        @apply pointer-events-auto max-h-[min(75vh,32rem)] translate-y-0 overflow-y-auto opacity-100;
    }

    .lux-back-to-top {
        @apply fixed bottom-6 right-6 z-40 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full border border-white/20 bg-lux-ink text-white shadow-lg shadow-lux-ink/25 transition-[opacity,transform,visibility] duration-300 ease-out motion-reduce:transition-none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(0.5rem);
        pointer-events: none;
    }

    .lux-back-to-top.is-visible {
        @apply pointer-events-auto;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .lux-back-to-top:focus-visible {
        @apply outline outline-2 outline-offset-4 outline-tsb-primary;
    }

    /* Contact / footer: QR channel panels */
    .lux-contact-channel-card {
        @apply h-full min-w-0 max-w-full overflow-hidden rounded-2xl border border-lux-ink/10 bg-white/80 p-4 shadow-[0_14px_40px_-24px_rgba(74,74,78,0.35)] backdrop-blur-[2px] sm:p-5;
    }

    .lux-contact-channel-list {
        @apply grid min-w-0 max-w-full gap-2.5;
    }

    .lux-contact-channel-item {
        @apply relative min-w-0 max-w-full list-none;
    }

    .lux-contact-channel-item::before {
        content: "";
        @apply pointer-events-none absolute left-3 top-1/2 h-1.5 w-1.5 -translate-y-1/2 rounded-full bg-lux-ink/40;
    }

    .lux-contact-channel-link {
        @apply flex w-full min-w-0 max-w-full items-center justify-between gap-2 overflow-hidden rounded-lg border border-lux-ink/10 bg-white/90 py-2.5 pl-7 pr-3 font-sans text-xs font-medium uppercase tracking-[0.08em] text-lux-ink transition-[border-color,background-color,color,box-shadow] duration-200 hover:border-tsb-primary/45 hover:bg-white hover:text-tsb-primary hover:shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tsb-primary;
    }

    .lux-contact-channel-link-label {
        @apply block min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap;
    }

    /* Three channels in one row (lg+): compact twin QRs; single-column layouts stay larger */
    .lux-contact-channel-card .lux-qr-pair {
        @apply gap-2 sm:gap-3 lg:gap-2 xl:gap-3;
    }

    .lux-contact-channel-card .lux-qr-thumb {
        @apply h-[6.75rem] w-[6.75rem] lg:h-[4.5rem] lg:w-[4.5rem] xl:h-[5.5rem] xl:w-[5.5rem] 2xl:h-[6.75rem] 2xl:w-[6.75rem];
    }

    .lux-contact-channel-card .lux-qr-caption {
        @apply max-w-[8rem] text-[0.625rem] lg:max-w-[6.5rem] lg:text-[0.6rem] min-w-[100px];
    }

    .lux-qr-cluster {
        @apply w-full max-w-[min(100%,17.5rem)] lg:w-auto lg:max-w-none lg:shrink-0;
    }

    /* .lux-qr-frame {
        @apply relative rounded-2xl bg-gradient-to-br from-tsb-primary/25 via-white to-lux-blush/50 p-px shadow-[0_14px_42px_-18px_rgba(45,42,40,0.42)];
    } */

    /* .lux-qr-frame-inner {
        @apply rounded-[0.9375rem] border border-white/80 bg-white/95 px-3 pb-3 pt-3;
    } */

    .lux-qr-pair {
        @apply flex flex-wrap justify-center gap-4;
    }

    .lux-qr-tile {
        @apply flex flex-col items-center;
    }

    .lux-qr-tile a {
        @apply inline-flex rounded-xl bg-white p-1.5 shadow-inner shadow-lux-ink/10 ring-1 ring-lux-ink/10 transition-[box-shadow,transform] duration-200 hover:-translate-y-0.5 hover:ring-tsb-primary/40 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tsb-primary motion-reduce:transition-none motion-reduce:hover:translate-y-0;
    }

    .lux-qr-thumb {
        @apply block h-[6.75rem] w-[6.75rem] rounded-md bg-white object-contain;
    }

    .lux-qr-caption {
        @apply mt-2 max-w-[8rem] text-center text-[0.625rem] font-medium uppercase tracking-[0.14em];
    }

    .lux-qr-hint {
        @apply mt-3 border-t border-lux-ink/10 pt-2.5 text-center text-[0.625rem] leading-snug text-tsb-primary;
    }

    /**
     * Per-element scroll reveals — targets `[data-scroll-reveal]` (see initScrollReveal in app.js).
     */
    .scroll-reveal {
        /* Slower, softer ease-out so motion feels smooth (not snappy). */
        --scroll-reveal-duration: 1.15s;
        --scroll-reveal-ease: cubic-bezier(0.33, 1, 0.68, 1);
        --scroll-reveal-delay: 0ms;
        opacity: 0;
        transform: translate3d(0, 1rem, 0);
        transition:
            opacity var(--scroll-reveal-duration) var(--scroll-reveal-ease) var(--scroll-reveal-delay),
            transform var(--scroll-reveal-duration) var(--scroll-reveal-ease) var(--scroll-reveal-delay);
    }

    [data-blog-load-more-btn].is-loading {
        @apply scale-[0.98] gap-2 opacity-75;
    }

    .blog-load-more-icon-slot {
        display: inline-grid;
        place-items: center;
        width: 0;
        height: 1rem;
        overflow: hidden;
        opacity: 0;
        flex-shrink: 0;
        transition:
            width 0.25s ease,
            opacity 0.25s ease;
    }

    [data-blog-load-more-btn].is-loading .blog-load-more-icon-slot {
        width: 1rem;
        opacity: 1;
    }

    /* Symmetric ring — loader-circle arc wobbles when rotated */
    .blog-load-more-spinner {
        display: block;
        box-sizing: border-box;
        width: 1rem;
        height: 1rem;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        flex-shrink: 0;
    }

    [data-blog-load-more-btn].is-loading .blog-load-more-spinner {
        animation: blog-load-more-spin 0.75s linear infinite;
    }

    @keyframes blog-load-more-spin {
        to {
            transform: rotate(360deg);
        }
    }

    [data-blog-load-more-grid].is-loading {
        @apply pointer-events-none;
    }

    .scroll-reveal.scroll-reveal--left {
        transform: translate3d(-1rem, 0, 0);
    }

    .scroll-reveal.scroll-reveal--right {
        transform: translate3d(1rem, 0, 0);
    }

    .scroll-reveal.is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

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

        [data-blog-load-more-btn].is-loading .blog-load-more-spinner {
            animation: none;
        }
    }
}