/* ==========================================================================
   Soul Equestrian — grand opening announcement ribbon
   --------------------------------------------------------------------------
   Lives in its own file because layout.html does not load site.css, and
   because the whole thing is temporary: the ribbon removes itself after
   the event, and the file can be deleted outright afterwards.

   Self-contained by design. Every design token it borrows carries its real
   value as a var() fallback, so the component renders correctly on a page
   that defines only part of the token set.
   ========================================================================== */

/* ==========================================================================
   Component — Announcement stripe (.hor-anno)
   A slim centred ribbon on the deep-green ground, above the navbar in normal
   flow: it scrolls away and the cream nav then sticks on its own. Never
   sticky. The whole ribbon is one link, so on a phone the tap target is the
   full band. One accent hue lives here and nowhere else on the site, which
   is what makes the ribbon read as news rather than as chrome. The inline
   script beside the markup removes the ribbon once the event has passed.
   ========================================================================== */
.hor-anno {
  --anno-accent:  #63D6B4;
  --anno-glow:    rgba(99, 214, 180, 0.55);
  --anno-hair:    rgba(99, 214, 180, 0.32);
  --anno-rule:    rgba(99, 214, 180, 0.42);
  position: relative;
  background: var(--green, #14302A);
  border-bottom: 1px solid var(--anno-hair);
}

.hor-anno__link { display: block; padding: 10px 16px; color: var(--text-on-dark, #F8F5EF);
  text-decoration: none; transition: background var(--dur-1, 200ms) var(--ease-soft, cubic-bezier(0.40, 0.00, 0.20, 1)); }
.hor-anno__link:hover { background: rgba(99, 214, 180, 0.07); }
.hor-anno__link:focus-visible { outline: 2px solid var(--anno-accent); outline-offset: -4px; }

.hor-anno__inner { max-width: var(--maxw-wide, 1360px); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 4px 12px; text-align: center; }

/* The pinging diamond. The ring is a second diamond scaling out behind it. */
.hor-anno__pulse { position: relative; flex: none; width: 8px; height: 8px;
  background: var(--anno-accent); transform: rotate(45deg);
  box-shadow: 0 0 9px var(--anno-glow); }
.hor-anno__pulse::after { content: ""; position: absolute; inset: 0;
  background: var(--anno-accent); }

.hor-anno__label { font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif); font-weight: var(--fw-display-strong, 600);
  font-size: var(--fs-eyebrow, 0.85rem); letter-spacing: var(--ls-eyebrow, 0.22em); text-transform: uppercase;
  color: var(--anno-accent); white-space: nowrap; }

.hor-anno__date { font-family: var(--font-body, 'Plus Jakarta Sans', system-ui, sans-serif); font-weight: var(--fw-light, 300);
  font-size: 14px; line-height: 1.4; color: var(--text-on-dark, #F8F5EF); }

.hor-anno__sep { color: var(--anno-hair); margin: 0 -4px; }

/* The rules take whatever width the centred line leaves over, so the ribbon
   reads as one ruled band rather than a short label adrift in a green field.
   They fade out towards the rails so the ends never look cut off. Hidden
   below 900px, where they would come out as 15px stubs and read as stray
   dashes rather than rules. */
/* The box is 3px so the travelling light has room to glow, but the hairline
   itself is still drawn 1px and centred, so the ribbon looks unchanged at rest. */
.hor-anno__rule { display: none; position: relative; overflow: hidden;
  flex: 1 1 0; min-width: 0; height: 3px; align-self: center;
  background-repeat: no-repeat; background-position: 0 center; background-size: 100% 1px;
  background-image: linear-gradient(90deg, rgba(99, 214, 180, 0) 0%, var(--anno-rule) 40%,
    var(--anno-rule) 100%); }
.hor-anno__rule:last-child {
  background-image: linear-gradient(270deg, rgba(99, 214, 180, 0) 0%, var(--anno-rule) 40%,
    var(--anno-rule) 100%); }

/* A light travels the left rule, passes behind the text, and comes out on the
   right, in a horse's four-beat gallop: four quick beats, then the long float
   of the suspension phase, then a rest before the next pass. Rules only exist
   from 900px up, so this never runs on a phone. */
.hor-anno__rule::after { content: ""; position: absolute; top: 0; height: 3px;
  width: 38%; left: -42%; opacity: 0;
  background: radial-gradient(52% 100% at 50% 50%, rgba(196, 250, 232, 0.95) 0%,
    rgba(120, 224, 192, 0.60) 42%, rgba(99, 214, 180, 0) 100%); }

/* Cormorant stops at 600 self-hosted, so the extra weight comes from a hairline
   stroke on the glyphs rather than a synthetic bold, which would smear a serif.
   The glow sits on the text itself: a box-shadow here drew a halo around the
   element box and read as a stray rectangle. */
.hor-anno__cta { display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif); font-weight: var(--fw-display-strong, 600); font-size: 14px;
  letter-spacing: var(--ls-button, 0.14em); text-transform: uppercase; line-height: 1; white-space: nowrap;
  color: var(--anno-accent); border-bottom: 1px solid var(--anno-accent);
  padding-block: 4px;
  -webkit-text-stroke: 0.4px currentColor; paint-order: stroke fill;
  text-shadow: 0 0 10px var(--anno-glow), 0 0 22px var(--anno-glow);
  transition: color var(--dur-1, 200ms) var(--ease-soft, cubic-bezier(0.40, 0.00, 0.20, 1)),
    border-color var(--dur-1, 200ms) var(--ease-soft, cubic-bezier(0.40, 0.00, 0.20, 1)); }
.hor-anno__cta::after { content: ""; flex: none; width: 6px; height: 6px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor;
  transform: rotate(45deg); }
.hor-anno__link:hover .hor-anno__cta { color: var(--ivory, #F8F5EF); border-bottom-color: var(--ivory, #F8F5EF); }

/* The visible CTA is small, so give it a 44px hit box of its own. */
.hor-anno__cta { position: relative; }
.hor-anno__cta::before { content: ""; position: absolute; left: -10px; right: -10px;
  top: 50%; height: 44px; transform: translateY(-50%); }

/* Visually hidden, for the new-tab hint on the link's accessible name */
.hor-anno__vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  /* not uppercase: VoiceOver reads the rendered text, and shouting an
     acronym-like string is not what this hint is for */
  text-transform: none; letter-spacing: normal; }

/* Below 768 the whole line will not hold, so the CTA takes a row of its own.
   A zero-height break item does it, rather than flex-basis on the CTA itself,
   which would stretch its underline across the full width of the ribbon. */
@media (max-width: 767px) {
  .hor-anno__inner::before { content: ""; flex-basis: 100%; height: 0; order: 1; }
  .hor-anno__cta { order: 2; }
  /* The separators only read on an unbroken line. Once the CTA drops to its
     own row the trailing one is left dangling at the end of row one, so both
     go at the same width the break appears. */
  .hor-anno__sep { display: none; }
}

/* Phones also drop the closing time and the separators, so the label and the
   date still share one row down to about 400px. */
@media (max-width: 639px) {
  .hor-anno__link { padding: 9px 16px; }
  .hor-anno__inner { gap: 5px 10px; }
  .hor-anno__till { display: none; }
  .hor-anno__label { font-size: 0.78rem; letter-spacing: .16em; }
  .hor-anno__date { font-size: 13px; }
  .hor-anno__cta { font-size: 13px; }
}

/* Narrow phones: give the date a row of its own rather than letting it just
   barely share one with the label. It sat on the fit boundary at 375-390px,
   so the webfont swap flipped the ribbon between two and three rows and
   shifted the page under the reader. A second break item settles it. */
@media (max-width: 439px) {
  .hor-anno__pulse, .hor-anno__label { order: -2; }
  .hor-anno__inner::after { content: ""; flex-basis: 100%; height: 0; order: -1; }
  .hor-anno__date { order: 0; }
}

@media (min-width: 640px) {
  .hor-anno__link { padding: 11px var(--gutter, clamp(20px, 5vw, 64px)); }
  .hor-anno__inner { gap: 6px 14px; }
}

@media (min-width: 768px) {
  .hor-anno__inner { gap: 6px 16px; }
}

@media (min-width: 900px) {
  .hor-anno__rule { display: block; }
}

@media (prefers-reduced-motion: no-preference) {
  .hor-anno__pulse::after { animation: annoPing 2400ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)) infinite; }
  .hor-anno__rule::after { animation: annoGaitL 7200ms linear infinite; }
  .hor-anno__rule:last-child::after { animation-name: annoGaitR; }
}

/* Four beats, each a stride and a short suspension, then the long float to the
   end of the rule. The right rule repeats it a third of a cycle later, the time
   the light spends hidden behind the centred line. */
@keyframes annoGaitL {
  0%   { left: -42%; opacity: 0; }
  1.5% { opacity: .9; }
  4%   { left: -16%; }
  6%   { left: -12%; }
  9%   { left: 12%; }
  11%  { left: 16%; }
  14%  { left: 40%; }
  16%  { left: 44%; }
  19%  { left: 68%; }
  21%  { left: 72%; }
  26%  { left: 104%; opacity: .9; }
  28%  { left: 104%; opacity: 0; }
  100% { left: 104%; opacity: 0; }
}
@keyframes annoGaitR {
  0%    { left: -42%; opacity: 0; }
  33%   { left: -42%; opacity: 0; }
  34.5% { opacity: .9; }
  37%   { left: -16%; }
  39%   { left: -12%; }
  42%   { left: 12%; }
  44%   { left: 16%; }
  47%   { left: 40%; }
  49%   { left: 44%; }
  52%   { left: 68%; }
  54%   { left: 72%; }
  59%   { left: 104%; opacity: .9; }
  61%   { left: 104%; opacity: 0; }
  100%  { left: 104%; opacity: 0; }
}
@keyframes annoPing {
  0%   { transform: scale(1);   opacity: .6; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* layout.html only. The 3D site plan is a full-screen fixed canvas with no
   page flow for the ribbon to sit in, so it overlays the top instead. Above
   the scene chrome (#top is 15, #views 19), below the loader and the modal
   panels (50-60), so it never covers a dialog. */
.hor-anno--fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 20; }