/* --- Sidetoppenes bevægelse ------------------------------------------------

   Hver side havde sin egen indtoning: hero-content-reveal, library-hero-reveal,
   knowledge-hero-in, og to forskellige «breathe» på baggrundsbilledet. Samme
   idé, fem steder, med hver sit tempo — så sidetopperne føltes forskellige,
   selv når de var lige høje.

   Her står bevægelsen ét sted, i sidens eget sprog: lempen fra motion.css,
   guldet fra farvesættet, og de samme afstande som resten af siden bruger.

   Arket hentes efter sidernes egne, så det afløser deres indtoninger i stedet
   for at lægge sig oveni — to animationer på det samme element trækker i hver
   sin retning.
--------------------------------------------------------------------------- */

:root {
    /* Sidens lempe. Den samme som navigationen og knapperne bruger. */
    --hero-ease: cubic-bezier(.2, .72, .2, 1);
}

/* --- Indtoning -------------------------------------------------------------

   Indholdet stiger op og toner ind, når siden åbner. Delene kommer efter
   hinanden med et lille ryk imellem, så øjet får en rækkefølge at følge:
   udsagnet, verset, betydningen, kilden.
--------------------------------------------------------------------------- */

@keyframes hero-rise {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Kun det yderste lag i hver sidetop toner ind. Ligger to af dem inden i
   hinanden, toner indholdet ind to gange og bliver dobbelt gennemsigtigt
   undervejs — derfor er sliderne ikke nævnt her: de ligger allerede inde i en
   af de nævnte. */
.destination-copy,
.start-hero-copy,
.hadith-hero-copy,
.knowledge-hero-copy,
.prophets-hero-copy {
    animation: hero-rise .85s var(--hero-ease) both;
}

/* Et citat toner ikke ind som helhed. Delene kommer efter hinanden, så øjet
   får en rækkefølge at følge: udsagnet, verset, betydningen. */
.hero-verse > *,
.destination-hero-quote > * {
    animation: hero-rise .8s var(--hero-ease) both;
}

.hero-verse > :nth-child(1),
.destination-hero-quote > :nth-child(1) {
    animation-delay: .08s;
}

.hero-verse > :nth-child(2),
.destination-hero-quote > :nth-child(2) {
    animation-delay: .18s;
}

.hero-verse > :nth-child(3),
.destination-hero-quote > :nth-child(3) {
    animation-delay: .3s;
}

/* --- Baggrunden ------------------------------------------------------------

   Billedet trækker meget langsomt vejret. Bevægelsen skal knap kunne ses —
   den er der for at sidetoppen ikke står helt død, ikke for at tiltrække sig
   opmærksomhed.
--------------------------------------------------------------------------- */

@keyframes hero-breathe {
    0%,
    100% {
        transform: scale(1.01);
    }

    50% {
        transform: scale(1.05);
    }
}

.destination-image,
.hero-photo {
    animation: hero-breathe 36s ease-in-out infinite;
}

/* Tre sidetopper har ikke et billedlag at skalere.

   Profeter og Start her — og artikelsiderne — bærer billedet på selve
   sidetoppen. Skalerede man den, fulgte teksten med. Forpligtet viden har et
   billedlag, men det bruges til parallakse, og et lag kan kun have én
   transform ad gangen.

   De får derfor hver deres eget lag med samme billede — «background: inherit»
   tager forældrens baggrund, så billedet ikke skal skrives to steder — og det
   er dét lag, der zoomer. */

.prophets-hero::before,
.reading-hero::after,
.destination-knowledge .destination-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    pointer-events: none;
    animation: hero-breathe 36s ease-in-out infinite;
}

/* Laget skal ligge over sidetoppens egen baggrund, men under sløret og under
   teksten. Rækkefølgen er forskellig, fordi de tre sidetopper er bygget hver
   sin vej: på Start her er sløret ::before med z-index -1, så billedet skal
   endnu længere bagud. */
.prophets-hero::before {
    z-index: 0;
}

.reading-hero::after {
    z-index: -2;
}

/* --- Guldstregen langs bunden ----------------------------------------------

   Forsiden har en 1 px høj guldstreg langs bunden af sidetoppen. Den tegner
   sig ud fra midten, når siden åbner.

   Kun forsiden. «::after» er ikke det samme fra side til side: på forsiden er
   det stregen, på destinationssiderne findes det slet ikke, og på profetsiden
   er det et helt lag med en mørk gradient over billedet. Blev animationen sat
   på dem alle, voksede profetsidens mørke lag ud fra midten og lagde sig hen
   over sidetoppen.
--------------------------------------------------------------------------- */

@keyframes hero-rule-draw {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.platform-hero::after {
    transform-origin: center;
    animation: hero-rule-draw 1.1s var(--hero-ease) .35s both;
}

/* --- Det man kan røre ved --------------------------------------------------

   Sidens vokabular: pile rykker fire pixels, knapper løfter sig to, og
   understregninger vokser ud fra den side, musen kommer fra.
--------------------------------------------------------------------------- */

:where(.platform-hero, .destination-hero, .prophets-hero, .start-hero) a:not(.qr-row):not([data-quran-dot]) {
    transition: color .22s ease, transform .22s var(--hero-ease);
}

:where(.platform-hero, .destination-hero, .prophets-hero, .start-hero) a > span:last-child,
:where(.platform-hero, .destination-hero, .prophets-hero, .start-hero) a > b {
    display: inline-block;
    transition: transform .22s var(--hero-ease);
}

:where(.platform-hero, .destination-hero, .prophets-hero, .start-hero) a:hover > span:last-child,
:where(.platform-hero, .destination-hero, .prophets-hero, .start-hero) a:focus-visible > span:last-child,
:where(.platform-hero, .destination-hero, .prophets-hero, .start-hero) a:hover > b,
:where(.platform-hero, .destination-hero, .prophets-hero, .start-hero) a:focus-visible > b {
    transform: translateX(4px);
}

/* Sliderens knapper: prikkerne vokser, pilene løfter sig, og den valgte prik
   bliver stående. Feedback på tastatur er den samme som på mus. */
.quran-slider-dots button {
    transition: transform .22s var(--hero-ease);
}

.quran-slider-dots button:hover,
.quran-slider-dots button:focus-visible {
    transform: scale(1.35);
}

.quran-slider-actions button {
    transition: transform .2s var(--hero-ease), background-color .2s ease, color .2s ease, border-color .2s ease;
}

.quran-slider-actions button:hover,
.quran-slider-actions button:focus-visible {
    transform: translateY(-2px);
}

.quran-slider-actions button:active {
    transform: translateY(0) scale(.94);
}

/* Kilden under et citat: stregen foran vokser, når man peger på citatet. */
.hero-verse cite::before,
.destination-hero-quote cite::before {
    transition: width .3s var(--hero-ease);
}

.hero-verse:hover cite::before,
.destination-hero-quote:hover cite::before {
    width: 64px;
}

/* --- Uden bevægelse --------------------------------------------------------

   Har man bedt om mindre bevægelse, står alt stille med det samme. Indholdet
   skal stadig kunne ses — det må aldrig blive hængende på opacity: 0.
--------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .destination-copy,
    .start-hero-copy,
    .hadith-hero-copy,
    .knowledge-hero-copy,
    .prophets-hero-copy,
    .hero-verse > *,
    .destination-hero-quote > *,
    .destination-image,
    .hero-photo,
    .prophets-hero::before,
    .reading-hero::after,
    .destination-knowledge .destination-image::before,
    .platform-hero::after {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}