/* ─────────────────────────────────────────────────────────────────
   Dhofar Championship — enhancement layer
   Polish on top of site.css: motion, depth and micro-interactions.
   Everything is gated behind html.enhance (added by enhance.js) so
   the site stays fully readable without JavaScript.
   ───────────────────────────────────────────────────────────────── */

::selection { background: #c7a35e; color: #06162f; }

html { scrollbar-color: #c7a35e #06162f; }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #06162f; }
::-webkit-scrollbar-thumb { background: #c7a35e; border: 3px solid #06162f; border-radius: 8px; }

a:focus-visible, button:focus-visible { outline: 2px solid #c7a35e; outline-offset: 3px; }

/* ── Fixed white app bar ─────────────────────────────────────── */
.enhance .site-header,
.enhance body:has(main>.page-hero:not(.dark):not(.championship-hero):not(.media-hero)) .site-header {
    position: fixed;
    color: #0b1733;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid rgba(11, 23, 51, .08);
    transition: box-shadow .45s ease, height .35s ease;
}
.enhance .site-header .nav > a { color: rgba(11, 23, 51, .78); }
.enhance .site-header .nav > a:hover { color: #0b1733; opacity: 1; }
.enhance .site-header .nav-cta { color: #0b1733; border-color: #c7a35e; }
.enhance .site-header .nav-cta:hover { background: #c7a35e; color: #fff; }
.enhance .site-header .lang-switch { border-color: rgba(11, 23, 51, .25); }
.enhance .site-header.scrolled {
    box-shadow: 0 18px 44px -30px rgba(6, 22, 47, .35);
    height: 70px;
}
/* the mobile dropdown nav keeps its deep-navy sheet — links stay light there */
@media (max-width: 900px) {
    .enhance .site-header .nav > a { color: rgba(255, 255, 255, .85); }
    .enhance .site-header .nav > a:hover { color: #fff; }
    .enhance .site-header .nav .lang-switch { color: rgba(255, 255, 255, .85); }
    .enhance .site-header .nav-cta { color: #fff; }
}
.enhance .site-header.scrolled .brand-logo-image { width: 168px; }
.brand-logo-image { transition: width .35s ease; }

/* nav link — gold underline that draws itself */
.nav > a { position: relative; transition: opacity .2s; }
.nav > a:not(.nav-cta):not(.active)::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -9px;
    height: 2px;
    background: #c7a35e;
    transform: scaleX(0);
    transform-origin: var(--underline-origin, left);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
[dir=rtl] .nav > a:not(.nav-cta):not(.active)::after { --underline-origin: right; }
.nav > a:not(.nav-cta):hover { opacity: 1; }
.nav > a:not(.nav-cta):not(.active):hover::after { transform: scaleX(1); }
.nav-cta { transition: background .25s, color .25s, border-color .25s; }
.nav-cta:hover { background: #c7a35e; border-color: #c7a35e; color: #06162f; opacity: 1; }

/* ── Hero entrance ───────────────────────────────────────────── */
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: scale(1.01); } }
@keyframes heroZoomRtl { from { transform: scaleX(-1.08) scaleY(1.08); } to { transform: scaleX(-1.01) scaleY(1.01); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }

.enhance .hero-bg { animation: heroZoom 7s cubic-bezier(.16, 1, .3, 1) both; }
.enhance [dir=rtl] .hero-bg, .enhance[dir=rtl] .hero-bg { animation-name: heroZoomRtl; }
.enhance .hero-content > * { animation: riseIn 1s cubic-bezier(.22, 1, .36, 1) both; }
.enhance .hero-content > :nth-child(1) { animation-delay: .15s; }
.enhance .hero-content > :nth-child(2) { animation-delay: .3s; }
.enhance .hero-content > :nth-child(3) { animation-delay: .48s; }
.enhance .hero-content > :nth-child(4) { animation-delay: .64s; }
.enhance .event-card { animation: riseIn 1.1s .85s cubic-bezier(.22, 1, .36, 1) both; }

/* page heroes get the same welcome */
.enhance .page-hero > div:first-child > *,
.enhance .visit-hero > div > * { animation: riseIn .9s cubic-bezier(.22, 1, .36, 1) both; }
.enhance .page-hero > div:first-child > :nth-child(2),
.enhance .visit-hero > div > :nth-child(2) { animation-delay: .15s; }
.enhance .page-hero > div:first-child > :nth-child(3),
.enhance .visit-hero > div > :nth-child(3) { animation-delay: .3s; }

/* ── Scroll reveal ───────────────────────────────────────────── */
.enhance .rv {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--rv-delay, 0s);
}
.enhance .rv.rv-in { opacity: 1; transform: none; }

/* eyebrow rule draws in as it reveals */
.eyebrow span { transform-origin: var(--underline-origin, left); transition: transform .9s .25s cubic-bezier(.22, 1, .36, 1); }
[dir=rtl] .eyebrow span { --underline-origin: right; }
.enhance .rv .eyebrow span, .enhance .rv.eyebrow span { transform: scaleX(0); }
.enhance .rv.rv-in .eyebrow span, .enhance .rv.rv-in.eyebrow span { transform: scaleX(1); }

/* ── Cards & tiles: depth on hover ───────────────────────────── */
.journey-card, .champion-tile, .sponsor-category, .official-partner,
.destination-card, .video-card, .page-directory a, .instagram-tile,
.championship-result-card, .class-result-card, .judge-profile, .horse-card {
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease,
                border-color .35s ease, background .35s ease;
}
.journey-card:hover, .sponsor-category:hover {
    box-shadow: 0 26px 50px -30px rgba(6, 22, 47, .45);
}
.champion-tile:hover, .video-card:hover, .destination-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 55px -32px rgba(6, 22, 47, .55);
}
.official-partner:hover, .judge-profile:hover {
    border-color: #c7a35e;
    transform: translateY(-3px);
}
.championship-result-card:hover, .class-result-card:hover {
    border-color: #c7a35e;
    box-shadow: 0 26px 55px -34px rgba(6, 22, 47, .4);
}

/* background-image tiles zoom softly inside their frame */
.champion-tile > div, .destination-card, .instagram-tile, .video-card > div {
    transition: background-size .8s cubic-bezier(.22, 1, .36, 1), transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
    background-size: 100.5% auto;
}
.champion-tile > div, .destination-card, .instagram-tile, .video-card > div { background-size: cover; }

/* ── Buttons: gold shine sweep ───────────────────────────────── */
.button { position: relative; overflow: hidden; }
.button::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 55%;
    left: -75%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-18deg);
    transition: left .6s ease;
    pointer-events: none;
}
.button:hover::before { left: 125%; }
[dir=rtl] .button::before { left: auto; right: -75%; transition: right .6s ease; }
[dir=rtl] .button:hover::before { right: 125%; }
.button:hover { box-shadow: 0 16px 34px -18px rgba(6, 22, 47, .55); }
.button.gold:hover { box-shadow: 0 16px 34px -14px rgba(199, 163, 94, .75); }

.line-link, .text-link { transition: color .25s, border-color .25s; }
.line-link:hover, .text-link:hover { color: #c7a35e; }
.line-link:hover { border-color: #c7a35e; }
.line-link span, .text-link span, .journey-card > b { display: inline-block; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.line-link:hover span, .text-link:hover span { transform: translate(3px, -3px); }
[dir=rtl] .line-link:hover span, [dir=rtl] .text-link:hover span { transform: translate(-3px, -3px); }
.journey-card:hover > b { transform: translate(3px, -3px); color: #c7a35e; }
[dir=rtl] .journey-card:hover > b { transform: translate(-3px, -3px); }

/* programme rows glide toward the reading direction */
.programme-row { transition: background .3s ease, padding .35s cubic-bezier(.22, 1, .36, 1); }
.programme-row:hover { background: rgba(199, 163, 94, .07); padding-inline-start: 14px; }
.programme-row > b { transition: transform .3s, color .3s; }
.programme-row:hover > b { color: #c7a35e; transform: rotate(90deg); }

/* medal / placing rows */
.medal-row, .placing-row { transition: background .25s ease; }
.medal-row:hover, .placing-row:hover { background: rgba(199, 163, 94, .06); }

/* live pill pulse */
@keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(185, 86, 67, .55); } 60% { box-shadow: 0 0 0 9px rgba(185, 86, 67, 0); } }
.live-pill i, .live-kicker i { animation: livePulse 2s infinite; }

/* stat-bar: gold tick under the value once revealed */
.stat-bar strong { position: relative; }

/* mobile dock lift */
.mobile-dock a { transition: color .25s, transform .25s; }
.mobile-dock a:active { transform: scale(.92); }

/* ── Motion safety ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .enhance .rv { opacity: 1; transform: none; transition: none; }
    .enhance .hero-bg, .enhance .hero-content > *, .enhance .event-card,
    .enhance .page-hero > div:first-child > *, .enhance .visit-hero > div > * { animation: none; }
    .button::before { display: none; }
}