/* Leemans Equestrian – animations (calm and chic)
   The home page opens with the slow zoom and the title rising in; the rest of the site
   only fades in gently, once, without moving photos.
   Always on, also when a device asks for reduced motion (Fleur's choice). */

:root { --le-ease: cubic-bezier(.2, .7, .2, 1); --le-ease-io: cubic-bezier(.7, 0, .2, 1); --le-cream: #f6f2ea; --le-gold: #b39a6e; --le-brown: #3a2c24; --intro: 0s }
html.le-intro { --intro: 1.15s }
html.le-arrive { --intro: .3s }

/* ---------- opening curtain (first visit) and page transitions ---------- */
@keyframes le-veil-up { 0%, 55% { transform: translateY(0) } 100% { transform: translateY(-100%); visibility: hidden } }
@keyframes le-mark { 0% { opacity: 0; transform: translateY(14px) scale(.94) } 30%, 50% { opacity: 1; transform: none } 100% { opacity: 0; transform: translateY(-60px) } }
@keyframes le-veil-fade { from { opacity: 1 } to { opacity: 0; visibility: hidden } }
@keyframes le-veil-in { from { opacity: 0 } to { opacity: 1 } }
html.le-intro body::after, html.le-arrive body::after, html.le-leaving body::after {
  content: ''; position: fixed; inset: 0; z-index: 10000; pointer-events: none; background: var(--le-cream) }
html.le-intro body::after { box-shadow: inset 0 -3px 0 var(--le-gold); animation: le-veil-up 1.6s var(--le-ease-io) both }
html.le-intro body::before { content: ''; position: fixed; left: 50%; top: 50%; width: 112px; height: 116px; margin: -58px 0 0 -56px; z-index: 10001;
  pointer-events: none; background: url(/favicon.png) center / contain no-repeat; animation: le-mark 1.45s var(--le-ease) both }
html.le-arrive body::after { animation: le-veil-fade .55s ease both }
html.le-leaving body::after { animation: le-veil-in .3s ease both; pointer-events: all }

/* ---------- scroll progress + header ---------- */
.le-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 9999; pointer-events: none;
  background: linear-gradient(90deg, #94794b, #e3d3b6); transform-origin: 0 50%; transform: scaleX(var(--p, 0)) }
header { transition: box-shadow .4s ease }
.le-scrolled header { box-shadow: 0 8px 30px -18px rgba(0, 0, 0, .35) }

/* ---------- hero: slow zoom out, title rises in word by word ---------- */
@keyframes le-kenburns { from { scale: 1.16 } to { scale: 1 } }
@keyframes le-rise { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }
@keyframes le-draw { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes le-word { from { transform: translateY(112%) } to { transform: none } }
.hero > img { animation: le-kenburns 16s calc(var(--intro) - .4s) var(--le-ease) both; will-change: scale, translate }
.hero-content > :not(h1) { animation: le-rise 1.3s var(--le-ease) both }
.hero-content > :nth-child(1) { animation-delay: calc(var(--intro) + .15s) }
.hero-content > :nth-child(3) { animation-delay: calc(var(--intro) + 1s) }
.hero-content > :nth-child(4) { animation-delay: calc(var(--intro) + 1.2s) }
.hero-content > :nth-child(5) { animation-delay: calc(var(--intro) + 1.35s) }
.hero-content { will-change: translate, opacity }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: #d6c5a3;
  transform-origin: 0 50%; animation: le-draw 1.8s calc(var(--intro) + .5s) var(--le-ease-io) both }
.le-js .hero h1:not(.le-split) { visibility: hidden }
.le-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .12em; margin: 0 -.04em -.12em }
.le-w > span { display: inline-block }
.hero h1 .le-w > span { animation: le-word 1.2s calc(var(--intro) + .3s + var(--i) * .08s) var(--le-ease) both }
.le-accent { font-style: italic; color: #e3d3b6 }

/* first block of inner pages: a soft fade on load */
main > section:first-child:not(.hero) > * { animation: le-rise 1s var(--le-ease) both; animation-delay: var(--intro) }

/* ---------- gentle reveal, once (classes set by animations.js) ---------- */
.le-js .le-anim { opacity: 0; transform: translateY(16px) }
.le-js .le-anim[data-anim="fade"] { transform: none }
.le-js .le-anim.is-in { opacity: 1; transform: none; transition: opacity 1.1s var(--le-ease), transform 1.2s var(--le-ease); transition-delay: var(--d, 0s) }

/* thin gold line under section headings */
.le-js .le-line::after { content: ''; display: block; width: 64px; height: 2px; margin-top: 14px; background: var(--le-gold);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s .3s var(--le-ease-io) }
.le-js .le-line.is-in::after, .le-js .is-in .le-line::after { transform: scaleX(1) }

/* ---------- news ticker under the hero ---------- */
@keyframes le-ticker { to { transform: translateX(-50%) } }
@keyframes le-live { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
.le-ticker { display: flex; align-items: stretch; height: 46px; background: var(--le-brown); color: #f3ece0; font-size: .82rem; overflow: hidden }
.le-ticker-label { flex: none; display: flex; align-items: center; gap: 9px; padding: 0 22px 0 max(5%, 20px); background: #2c211b;
  color: #e3d3b6; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; position: relative; z-index: 1 }
.le-ticker-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #d6b97f; animation: le-live 1.6s ease-in-out infinite }
.le-ticker-viewport { flex: 1; overflow: hidden; display: flex; align-items: center;
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent) }
.le-ticker-track { display: inline-flex; white-space: nowrap; animation: le-ticker 60s linear infinite }
.le-ticker:hover .le-ticker-track, .le-ticker:focus-within .le-ticker-track { animation-play-state: paused }
.le-ticker a { display: inline-flex; align-items: center; gap: 10px; padding: 0 30px 0 0; color: inherit; text-decoration: none }
.le-ticker a::after { content: ''; width: 5px; height: 5px; margin-left: 20px; transform: rotate(45deg); background: var(--le-gold) }
.le-ticker a:hover span { color: #e3d3b6 }
.le-ticker time { color: #c9b48b; font-variant-numeric: tabular-nums; font-size: .74rem; letter-spacing: .04em }
@media (max-width: 760px) { .le-ticker { height: 42px; font-size: .78rem } .le-ticker-label { padding: 0 14px 0 16px; font-size: .64rem } }

/* ---------- small touches ---------- */
.result-card { transition: background-color .4s ease }
.result-card:hover { background-color: rgba(179, 154, 110, .07) }
.button { position: relative; overflow: hidden; isolation: isolate }
.button::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .9s var(--le-ease) }
.button:hover::before { transform: translateX(120%) }
.le-count { font-variant-numeric: tabular-nums }