/* ==================================
   Civilisation ou Barbarie
   imhotep.css — Specific styles for Imhotep page
================================== */

/* Container with Ankh */
#imhotep-container {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #2a1a1a;
    /* no background image here */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 120px;
}

/* Ankh overlay for fade */
#imhotep-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/pictures/hero/ankh.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 120px;
    opacity: var(--ankh-opacity, 1);  /* Use CSS variable with default 1 */
    transition: opacity 1s ease-in-out;
    pointer-events: none;
    z-index: 0;
}

/* Key text */
#imhotep-container p {
    display: block;
    margin: 0 ;
    max-width: 600px;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
    font-style: italic;
    color: #2a1a1a;
    font-size: 1.2rem;
    line-height: 1.6;
    z-index: 1;
}

/* Fade-in class for text */
#imhotep-container p.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* Fade in the Sender popup */
#imhotep-comment-btn > div,
#imhotep-comment-btn iframe {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

#imhotep-comment-btn.loaded > div,
#imhotep-comment-btn.loaded > iframe {
  opacity: 1;
}

/* ===== END ===== */