/*
 * The horizon: the animated herOS mark.
 *
 * Branding reference: docs/design/BRAND.md - section 6 for the motion language and which state each
 * animation means, section 10 for the surfaces allowed to use them. This file is the ONE definition
 * of the horizon element and its keyframes. The landing page and the product both link it; neither
 * keeps a copy, and a census test refuses a second definition of these keyframes anywhere else.
 *
 * Every animated form has a text equivalent, stops when its real state stops, and becomes a static
 * horizon under reduced motion (section 10).
 */

/* Element structure: a ring with a filled lower half, the resting mark of section 2. */
.horizon{display:inline-block;width:104px;height:104px;box-sizing:border-box;border:3px solid currentColor;border-radius:50%;overflow:hidden;position:relative;flex-shrink:0;color:#e8e5df}
.horizon>span{position:absolute;inset:0;background:currentColor;transform:translateY(50%)}
.horizon.hero-oracle{width:60px;height:60px;margin-bottom:12px}

/* The ten states of the section 6 motion table. `home` is the static resting mark. */
.horizon[data-horizon="tide"]{animation:horizon-turn 4.8s infinite cubic-bezier(.65,0,.25,1)}
.horizon[data-horizon="tide"]>span{animation:horizon-tide 4.8s infinite ease-in-out}
.horizon[data-horizon="turn"]{animation:horizon-turn 2.8s infinite ease-in-out}
.horizon[data-horizon="breathe"]>span{animation:horizon-breathe 3.2s infinite ease-in-out}
.horizon[data-horizon="ponder"]{animation:horizon-ponder 3.6s infinite ease-in-out}
.horizon[data-horizon="voice"]>span{animation:horizon-voice 1.8s infinite ease-in-out}
.horizon[data-horizon="beacon"]{animation:horizon-beacon 2.6s infinite ease-in-out}
.horizon[data-horizon="rise"]>span{animation:horizon-rise 5s linear forwards}
.horizon[data-horizon="arrive"]>span{animation:horizon-arrive 1.3s ease-in-out forwards}
.horizon[data-horizon="nudge"]{animation:horizon-nudge .8s ease-in-out forwards}

/* Keyframes. */
@keyframes horizon-tide{0%,10%,100%{transform:translateY(50%)}30%,40%{transform:translateY(10%)}65%,75%{transform:translateY(90%)}90%{transform:translateY(50%)}}
@keyframes horizon-turn{0%,30%{transform:rotate(0)}70%,100%{transform:rotate(360deg)}}
@keyframes horizon-breathe{0%,100%{transform:translateY(50%)}50%{transform:translateY(35%)}}
@keyframes horizon-ponder{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}
@keyframes horizon-voice{0%,100%{transform:translateY(50%)}20%{transform:translateY(28%)}40%{transform:translateY(58%)}60%{transform:translateY(35%)}80%{transform:translateY(62%)}}
@keyframes horizon-beacon{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes horizon-rise{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes horizon-arrive{0%,100%{transform:translateY(50%)}40%{transform:translateY(0)}}
@keyframes horizon-nudge{0%,100%{transform:translateY(0)}35%{transform:translateY(-8px)}70%{transform:translateY(-2px)}}
@keyframes footer-horizon-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-31.5px)}}

/*
 * Reduced motion: the mark holds its horizon rather than animating. This lives with the animation
 * it disables, so a surface that links this stylesheet cannot get the motion without the opt-out.
 */
@media (prefers-reduced-motion: reduce) {
  .horizon, .horizon > span { animation: none !important; }
}