/* Rules shared by the public, member and admin areas of the LyonX green theme.
   Tailwind utilities are compiled by tools/build-css.ps1; the member area adds lyonx-member.css. */

/* Web fonts come from Google, so keep readable text and tidy icons if they can't load. */
.font-\[\'Hanken_Grotesk\'\] { font-family: 'Hanken Grotesk', 'Segoe UI', system-ui, Arial, sans-serif !important; }
.font-\[\'Newsreader\'\] { font-family: Newsreader, Georgia, 'Times New Roman', serif !important; }
.material-symbols-outlined {
    display: inline-block;
    width: 1em;
    height: 1em;
    overflow: hidden;
    font-size: 24px;
    line-height: 1 !important;
    vertical-align: middle;
    white-space: nowrap;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.text-gradient-gold { background: linear-gradient(135deg, #fada69, #1c9a48); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Leaves room for the dropdown arrow when a px-* utility is applied. */
select { padding-right: 2.5rem !important; }

:focus-visible { outline: 2px solid #1c9a48; outline-offset: 2px; }
button:disabled, input:disabled { cursor: not-allowed; }

/* Light cards lift gently on hover; the green tint keeps shadows in the palette. */
.bg-background main [class~="bg-[#fffdf7]"].border, .bg-background main .bg-surface-container-lowest.border {
    box-shadow: 0 4px 14px rgba(6,62,27, .06);
    transition: box-shadow .2s ease;
}
.bg-background main [class~="bg-[#fffdf7]"].border:hover, .bg-background main .bg-surface-container-lowest.border:hover {
    box-shadow: 0 12px 26px rgba(6,62,27, .11);
}

/* Tables */
main th, main td { padding: .75rem; }
main th { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
main td { border-top: 1px solid rgba(6,62,27, .1); }

/* Admin shell */
.nav-link.active { background: #012915; color: #fada69; box-shadow: inset 3px 0 0 #fada69; }

/* ---- Motion: classes starting lx-word, lx-rise and lx-reveal are added by Scripts/lyonx-motion.js ---- */
@keyframes lx-word-in {
    from { opacity: 0; transform: translateY(.6em) rotate(2deg); }
    to { opacity: 1; transform: none; }
}
@keyframes lx-shimmer {
    0%, 55% { background-position: 110% 0; }
    100% { background-position: -30% 0; }
}
@keyframes lx-rise-in {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: none; }
}
@keyframes lx-drift {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(40px, 26px) scale(1.14); }
}
@keyframes lx-slow-zoom {
    from { transform: scale(1); }
    to { transform: scale(1.07); }
}
@keyframes lx-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes lx-btn-shine {
    0%, 70% { transform: translateX(-130%) skewX(-20deg); }
    100% { transform: translateX(260%) skewX(-20deg); }
}

/* Hero headline: words rise in turn, then a shine travels across the gold line. */
.lx-word { display: inline-block; animation: lx-word-in .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }
.lx-word-gold {
    padding-bottom: .14em;
    margin-bottom: -.14em;
    background-image: linear-gradient(100deg, #fada69 0%, #dea51f 38%, #fff6cf 50%, #dea51f 62%, #fada69 100%);
    background-position: 110% 0;
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: lx-word-in .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both,
               lx-shimmer 6s ease-in-out var(--shine, 1.5s) infinite;
}
.lx-rise { animation: lx-rise-in .8s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }

/* Scroll reveal. Doubled class so it outranks Tailwind's quicker .transition. */
.lx-reveal.lx-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .75s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), transform .75s cubic-bezier(.2, .7, .2, 1) var(--d, 0s);
}
.lx-reveal.lx-reveal.lx-in { opacity: 1; transform: none; }

/* Hero background and photo */
main section > .blur-3xl, main section > div > .blur-3xl { animation: lx-drift 16s ease-in-out infinite alternate; }
main section:first-of-type img.object-cover { animation: lx-slow-zoom 18s ease-in-out infinite alternate; }
.lx-float { animation: lx-float 5s ease-in-out infinite; }

/* Gold call-to-action buttons: a periodic shine and a lift on hover. */
a[class*="from-lime-300"] { position: relative; overflow: hidden; }
a[class*="from-lime-300"]::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 34%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
    content: "";
    pointer-events: none;
    animation: lx-btn-shine 5s ease-in-out 2s infinite;
}
main a[class*="rounded"][class*="font-bold"] { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
main a[class*="rounded"][class*="font-bold"]:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(1, 41, 21, .28); }

/* Cards: the photo zooms and the icon tips when hovered. */
main article img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
main article:hover img { transform: scale(1.06); }
main article .material-symbols-outlined { transition: transform .3s ease; }
main article:hover .material-symbols-outlined { transform: rotate(-6deg) scale(1.1); }

/* Header: gold underline on nav links, soft shadow once the page scrolls. */
header { transition: box-shadow .25s ease; }
header.lx-scrolled { box-shadow: 0 8px 24px rgba(1, 41, 21, .12); }
header nav a { position: relative; padding: 4px 0; transition: color .2s ease; }
header nav a::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, #dea51f, #fada69);
    content: "";
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .25s ease;
}
header nav a:hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
    .bg-background main [class~="bg-[#fffdf7]"].border, .bg-background main .bg-surface-container-lowest.border { transition: none; }
    main section > .blur-3xl, main section > div > .blur-3xl, main section:first-of-type img.object-cover,
    .lx-float, a[class*="from-lime-300"]::after { animation: none; }
    main article img, main article .material-symbols-outlined, main a[class*="rounded"][class*="font-bold"],
    header, header nav a, header nav a::after { transition: none; }
    main article:hover img, main article:hover .material-symbols-outlined,
    main a[class*="rounded"][class*="font-bold"]:hover { transform: none; }
    a[class*="from-lime-300"]::after { display: none; }
}