/* Playful animated dividers: a small arctic icon crosses (or plays in) a strip. */
.home_divider {
    position: relative;
    width: 100%;
    height: 50px;
    margin: 50px auto;
    overflow: hidden;
}
.home_divider i {
    position: absolute;
    top: 0;
    font-size: 34px;
    color: #3e4e7a;
}

/* Snowmobile: races across, bobbing and tilting. */
.home_divider_scooter i {
    animation: home_divider_drive 10s linear infinite;
}
@keyframes home_divider_drive {
    0%   { left: -50px; transform: translateY(0)    rotate(-2deg); }
    25%  {              transform: translateY(-5px)  rotate(2deg); }
    50%  {              transform: translateY(0)     rotate(-2deg); }
    75%  {              transform: translateY(-5px)  rotate(2deg); }
    100% { left: 100%;  transform: translateY(0)     rotate(-2deg); }
}

/* Sailboat: glides across slowly, gently rocking like on swell. */
.home_divider_sailboat i {
    animation: home_divider_sail 20s ease-in-out infinite;
}
@keyframes home_divider_sail {
    0%   { left: -50px; transform: rotate(-6deg); }
    20%  {              transform: rotate(6deg); }
    40%  {              transform: rotate(-6deg); }
    60%  {              transform: rotate(6deg); }
    80%  {              transform: rotate(-6deg); }
    100% { left: 100%;  transform: rotate(6deg); }
}

/* Ship: steams across, rocking bow-up/bow-down over the swells. */
.home_divider_ship i {
    font-size: 38px;
    transform-origin: 50% 80%;
    animation: home_divider_steam 10s ease-in-out infinite;
}
@keyframes home_divider_steam {
    0%   { left: -60px; transform: translateY(0)    rotate(-5deg); }
    20%  {              transform: translateY(-6px) rotate(5deg); }
    40%  {              transform: translateY(0)    rotate(-5deg); }
    60%  {              transform: translateY(-6px) rotate(5deg); }
    80%  {              transform: translateY(0)    rotate(-5deg); }
    100% { left: 100%;  transform: translateY(-6px) rotate(5deg); }
}

/* Emoji-based dividers (polar bear, fox): a small emoji crossing the strip. */
.home_divider_emoji {
    position: absolute;
    top: 4px;
    font-size: 32px;
    line-height: 1;
}

/* Polar bear: waddles across the ice. */
.home_divider_polarbear .home_divider_emoji {
    animation: home_divider_cross 9s linear infinite, home_divider_waddle 0.55s ease-in-out infinite;
}
@keyframes home_divider_cross {
    0%   { left: -45px; }
    100% { left: 100%; }
}
@keyframes home_divider_waddle {
    0%, 100% { transform: translateY(0)    rotate(-4deg); }
    50%      { transform: translateY(-4px) rotate(4deg); }
}

/* Fox: trots across with quick, bouncy little hops. */
.home_divider_fox .home_divider_emoji {
    font-size: 28px;
    animation: home_divider_trot 6s linear infinite, home_divider_hop 0.45s ease-in-out infinite;
}
@keyframes home_divider_trot {
    0%   { left: -40px; }
    100% { left: 100%; }
}
@keyframes home_divider_hop {
    0%, 100% { transform: translateY(0)    rotate(-3deg); }
    50%      { transform: translateY(-8px) rotate(3deg); }
}

/* Seasons: midnight sun crossfading into a snowflake, centred. */
.home_divider_season {
    text-align: center;
}
.home_divider_season span {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 50px;
}
.home_divider_season i {
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 40px;
    text-align: center;
}
.home_divider_season .fa-sun {
    color: #e6a32e;
    animation: home_divider_summer 8s ease-in-out infinite;
}
.home_divider_season .fa-snowflake {
    color: #5b76b5;
    animation: home_divider_winter 8s ease-in-out infinite;
}
@keyframes home_divider_summer {
    0%, 40%  { opacity: 1; transform: rotate(0deg)   scale(1); }
    50%, 90% { opacity: 0; transform: rotate(90deg)  scale(0.6); }
    100%     { opacity: 1; transform: rotate(0deg)   scale(1); }
}
@keyframes home_divider_winter {
    0%, 40%  { opacity: 0; transform: rotate(0deg)    scale(0.6); }
    50%, 90% { opacity: 1; transform: rotate(180deg)  scale(1); }
    100%     { opacity: 0; transform: rotate(360deg)  scale(0.6); }
}