/* Primary UI typeface — Inter (Google Fonts). Trialling Inter in place of Verstyle. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Ladylight brand typeface — Verstyle (self-hosted). Kept defined for easy revert. */
@font-face {
    font-family: 'Verstyle';
    src: url('/fonts/Verstyle%20Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Verstyle';
    src: url('/fonts/Verstyle%20Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Verstyle';
    src: url('/fonts/Verstyle%20Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Verstyle';
    src: url('/fonts/Verstyle%20SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Verstyle';
    src: url('/fonts/Verstyle%20ExtraBold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Verstyle';
    src: url('/fonts/Verstyle%20ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Inter is the UI face everywhere; keep a clean system fallback so text
   stays ChatGPT-readable while the webfont loads. */
:root {
    --font-brand: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Compact type scale: shrink the root font so every rem-based size (Tailwind
   text-*, spacing, etc.) scales down uniformly for a denser, calmer look.
   16px default -> 15px (~6% smaller). Tune here if a tighter scale is wanted. */
html {
    font-size: 15px;
}

body {
    font-family: var(--font-brand);
}

/* Buttons use Inter Medium by default. Element-level selector keeps low
   specificity so any explicit Tailwind font-weight utility still wins. */
button,
.btn,
[type="button"],
[type="submit"],
[role="button"] {
    font-weight: 500;
}

[x-cloak] {
    display: none !important;
}

.scrollbar-hidden {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hidden::-webkit-scrollbar {
    display: none;
}

/* --- Gentle, calm micro-interactions (used on the customer Support cards) ---
   Kept slow and low-amplitude on purpose: the audience is 65+, so motion is an
   affordance ("this is a button, tap it"), never decoration. All of it is
   automatically neutralised by the prefers-reduced-motion block below. */

/* Soft fade + rise as the page settles in. */
@keyframes ll-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
.ll-rise { animation: ll-rise 0.5s ease-out both; }
.ll-delay-1 { animation-delay: 0.08s; }
.ll-delay-2 { animation-delay: 0.16s; }
.ll-delay-3 { animation-delay: 0.24s; }

/* Slow horizontal bob on the "Tap here" arrow — invites the click without
   needing the user to discover the hover state first. */
@keyframes ll-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}
.ll-nudge { animation: ll-nudge 1.8s ease-in-out infinite; }

/* --- Brand text selection: gold wash instead of the OS default blue. --- */
::selection { background: rgba(204, 153, 51, 0.25); color: var(--carbon); }
::-moz-selection { background: rgba(204, 153, 51, 0.25); color: var(--carbon); }

/* --- Smooth in-page anchor scrolling (neutralised by reduced-motion below). --- */
html { scroll-behavior: smooth; }

/* =========================================================================
   Premium interaction utilities (Tier 2 / Tier 3)
   All decorative; every animation is neutralised by prefers-reduced-motion.
   ========================================================================= */

/* Skeleton loader with a light shimmer sweep. Put `.ll-skeleton` on a grey
   block; size it with width/height utilities. Richer than a static pulse. */
.ll-skeleton {
    position: relative;
    overflow: hidden;
    background: #eae7e7;                 /* surface-container-high */
    border-radius: 0.5rem;
}
.ll-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.65),
        transparent);
    animation: ll-shimmer 1.4s ease-in-out infinite;
}
@keyframes ll-shimmer { 100% { transform: translateX(100%); } }

/* Button press depth + soft hover lift. Add `.ll-press` to any button/link.
   Uses GPU transforms only, so it stays 60fps. */
.ll-press {
    transition: transform var(--duration-fast) var(--ease-brand),
                box-shadow var(--duration-fast) var(--ease-brand),
                filter var(--duration-fast) var(--ease-brand);
    will-change: transform;
}
.ll-press:hover { transform: translateY(-1px); }
.ll-press:active { transform: translateY(1px) scale(0.985); }

/* Ripple/ink on click. Add `.ll-ripple` (needs position + overflow-hidden).
   The ::after grows from centre; JS sets --rx/--ry to click point (optional). */
.ll-ripple { position: relative; overflow: hidden; }
.ll-ripple::after {
    content: '';
    position: absolute;
    left: var(--rx, 50%);
    top: var(--ry, 50%);
    width: 0; height: 0;
    border-radius: 9999px;
    background: currentColor;
    opacity: 0.25;
    transform: translate(-50%, -50%);
    transition: width var(--duration-slow) ease-out,
                height var(--duration-slow) ease-out,
                opacity var(--duration-slow) ease-out;
    pointer-events: none;
}
.ll-ripple:active::after { width: 260%; height: 260%; opacity: 0; transition: 0s; }

/* Floating label: wrap an input + label in `.ll-field`; label lifts when the
   input is focused or non-empty (needs the input to carry a placeholder=" "). */
.ll-field { position: relative; }
.ll-field > label {
    position: absolute;
    left: 0.85rem;
    top: 0.75rem;
    color: var(--on-surface-variant, #4f4536);
    pointer-events: none;
    transform-origin: left top;
    transition: transform var(--duration-fast) var(--ease-brand),
                color var(--duration-fast) var(--ease-brand);
    background: #ffffff;
    padding: 0 0.25rem;
}
.ll-field > :is(input, textarea):focus + label,
.ll-field > :is(input, textarea):not(:placeholder-shown) + label {
    transform: translateY(-1.35rem) scale(0.82);
    color: var(--gold-dark);
}

/* Field validation feedback: shake on error, checkmark pop on success. */
@keyframes ll-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}
.ll-invalid { animation: ll-shake 0.32s ease both; }

/* Scroll-reveal: elements tagged `.ll-reveal` start hidden and animate in when
   the IntersectionObserver in ui-polish.js adds `.is-visible`. */
.ll-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--duration-slow) var(--ease-brand),
                transform var(--duration-slow) var(--ease-brand);
    will-change: opacity, transform;
}
.ll-reveal.is-visible { opacity: 1; transform: none; }

/* Scroll progress bar (top of viewport). Width set by ui-polish.js. */
.ll-scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, var(--gold), var(--gold-dark));
    z-index: 1002;
    pointer-events: none;
    transition: width 80ms linear;
}

/* Sticky nav that condenses on scroll: add `.ll-nav` to the header and let
   ui-polish.js toggle `.is-scrolled`. */
.ll-nav {
    transition: box-shadow var(--duration-normal) var(--ease-brand),
                background-color var(--duration-normal) var(--ease-brand),
                backdrop-filter var(--duration-normal) var(--ease-brand);
}
.ll-nav.is-scrolled {
    box-shadow: var(--shadow-2);
    background: rgba(252, 249, 248, 0.82);
    backdrop-filter: blur(10px);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    html { scroll-behavior: auto; }
    .ll-skeleton::after { animation: none; }
    .ll-reveal { opacity: 1; transform: none; }
    .ll-press:hover, .ll-press:active { transform: none; }
}