/* Avelia2 home hero: living artwork (slow camera drift, mist, golden embers, logo glow) and the
   welcome text on the left side of the artwork. Loaded only on the home page (pages/news.php). */

.header {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.header > .container {
    position: relative;
    z-index: 3;
}

/* slow camera drift over the artwork */
.hero-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url(../images/background_header.png) no-repeat top center;
    background-size: cover;
    transform-origin: 50% 44%;
    animation: hero-drift 38s ease-in-out infinite alternate;
}

@keyframes hero-drift {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to   { transform: scale(1.07) translate3d(-0.6%, -0.8%, 0); }
}

/* warm glow behind the dragon logo */
.hero-glow {
    position: absolute;
    left: 50%;
    top: 44%;
    width: 46vw;
    height: 46vw;
    max-width: 900px;
    max-height: 900px;
    transform: translate(-50%, -50%);
    z-index: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 196, 92, .30) 0%, rgba(255, 170, 60, .12) 35%, rgba(255, 170, 60, 0) 68%);
    mix-blend-mode: screen;
    pointer-events: none;
    animation: hero-glow 6s ease-in-out infinite;
}

@keyframes hero-glow {
    0%, 100% { opacity: .35; transform: translate(-50%, -50%) scale(.94); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}

/* light sweep across the logo every few seconds */
.hero-shine {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 236, 190, .22) 47%, rgba(255, 255, 255, .34) 50%, rgba(255, 236, 190, .22) 53%, transparent 62%);
    background-size: 260% 100%;
    mix-blend-mode: soft-light;
    -webkit-mask-image: radial-gradient(ellipse 28% 38% at 50% 44%, #000 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 28% 38% at 50% 44%, #000 55%, transparent 100%);
    animation: hero-shine 9s ease-in-out infinite;
}

@keyframes hero-shine {
    0%, 55% { background-position: 130% 0; }
    85%, 100% { background-position: -30% 0; }
}

/* two layers of drifting mist */
.hero-mist {
    position: absolute;
    left: -50%;
    width: 200%;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(ellipse 18% 55% at 12% 60%, rgba(255, 255, 255, .55), transparent 70%),
        radial-gradient(ellipse 22% 45% at 38% 70%, rgba(255, 255, 255, .45), transparent 70%),
        radial-gradient(ellipse 16% 50% at 63% 58%, rgba(255, 255, 255, .50), transparent 70%),
        radial-gradient(ellipse 20% 55% at 88% 66%, rgba(255, 255, 255, .45), transparent 70%);
    filter: blur(6px);
}

.hero-mist-1 {
    bottom: -8%;
    height: 45%;
    opacity: .55;
    animation: hero-mist 70s linear infinite;
}

.hero-mist-2 {
    bottom: 18%;
    height: 38%;
    opacity: .28;
    animation: hero-mist 110s linear infinite reverse;
}

@keyframes hero-mist {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(25%, 0, 0); }
}

/* golden embers (created by avelia-hero.js) */
.hero-embers {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.hero-ember {
    position: absolute;
    bottom: -12px;
    width: var(--s, 4px);
    height: var(--s, 4px);
    border-radius: 50%;
    background: radial-gradient(circle, #fff3c4 0%, #ffc45c 45%, rgba(255, 150, 40, 0) 72%);
    box-shadow: 0 0 8px 2px rgba(255, 180, 70, .55);
    opacity: 0;
    animation: hero-ember var(--d, 12s) linear var(--delay, 0s) infinite;
}

@keyframes hero-ember {
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    10%  { opacity: .95; }
    50%  { transform: translate3d(var(--x1, 20px), -45vh, 0); }
    85%  { opacity: .7; }
    100% { transform: translate3d(var(--x2, -10px), -95vh, 0); opacity: 0; }
}

/* welcome text on the left side of the artwork, next to the invitation card */
@media (min-width: 1200px) {
    .header {
        padding-top: clamp(120px, 21vh, 190px);
    }

    .header > .container {
        max-width: none;
        width: 100%;
        margin: 0;
        padding-left: 14vw;
        padding-right: 0;
    }

    .header .col-md-6 {
        width: clamp(300px, 17vw, 400px);
        max-width: none;
        flex: 0 0 auto;
        padding: 0;
        text-align: left;
    }

    .header h2 {
        font-size: clamp(30px, 2.1vw, 44px);
        white-space: nowrap;
    }

    .header p {
        font-size: 16px;
        line-height: 1.45;
    }

    .header .header-button-download {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-art, .hero-glow, .hero-shine, .hero-mist, .hero-ember {
        animation: none;
    }

    .hero-embers {
        display: none;
    }
}

/* running water over the three waterfalls of the artwork (placed by avelia-hero.js) */
.hero-fall {
    position: absolute;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: .9;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

.hero-fall::before,
.hero-fall::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--hero-water);
    background-size: 100% var(--tile, 180px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 80%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 80%, transparent 100%);
    animation: hero-water var(--speed, 1.1s) linear infinite;
}

.hero-fall::after {
    opacity: .6;
    background-size: 70% calc(var(--tile, 180px) * .7);
    animation-duration: calc(var(--speed, 1.1s) * .75);
}

@keyframes hero-water {
    from { background-position: 0 0; }
    to   { background-position: 0 var(--tile, 180px); }
}

.hero-foam {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, .75) 0%, rgba(255, 255, 255, .3) 40%, rgba(255, 255, 255, 0) 70%);
    filter: blur(4px);
    animation: hero-foam 2.4s ease-in-out infinite;
}

@keyframes hero-foam {
    0%, 100% { transform: scale(1, 1); opacity: .65; }
    50%      { transform: scale(1.12, 1.25) translateY(-4%); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-fall::before, .hero-fall::after, .hero-foam {
        animation: none;
    }
}

.header .col-md-6 {
    text-shadow: 0 2px 10px rgba(0, 0, 0, .7), 0 0 2px rgba(0, 0, 0, .6);
}