/**
 * Śrī Gaṇeśa's Wisdom
 * Dedication Opening Experience
 *
 * File: dedication.css
 *
 * Purpose:
 * Page-specific styling for the ceremonial Dedication opening
 * displayed when visitors first enter index.php.
 *
 * Design goals:
 * - Create a quiet, reverential first impression.
 * - Present the Dedication as an opening experience rather than
 *   a conventional modal or promotional banner.
 * - Keep the existing Home page visually untouched underneath.
 * - Use subtle animation rather than decorative visual effects.
 * - Provide a clear and elegant "Enter the Portal" action.
 * - Remain fully responsive across desktop, tablet and mobile.
 * - Respect accessibility preferences, including reduced motion.
 *
 * Dependencies:
 * - css/main.css
 * - Bootstrap 5
 * - Google Fonts loaded by index.php
 *
 * Expected HTML structure:
 *
 * <section class="dedication-screen" id="dedicationScreen">
 *     <div class="dedication-inner">
 *         ...
 *         <button class="dedication-enter" id="enterPortal">
 *             ...
 *         </button>
 *     </div>
 * </section>
 *
 * Project:
 * Śrī Gaṇeśa's Wisdom
 *
 * Author:
 * Satya Prakash Nigam
 *
 * Copyright:
 * © 2026 Satya Prakash Nigam
 */


/* ============================================================
   DEDICATION SCREEN
   ============================================================ */

.dedication-screen {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 55px 2rem 2rem;
    overflow-y: auto;
    background: var(--dedication-background, #f4ead8);
    opacity: 1;
    visibility: visible;
    transition:
        opacity 900ms ease,
        visibility 900ms ease;
}


/* ============================================================
   DEDICATION EXIT STATE
   ============================================================ */

.dedication-screen.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* ============================================================
   DEDICATION INNER CONTENT
   ============================================================ */

.dedication-inner {
    width: min(100%, 820px);
    margin: 0 auto;
    text-align: center;
    transform: translateY(0);
    opacity: 1;
}


/* ============================================================
   SUBTLE APPEARANCE ANIMATION
   ============================================================ */

.dedication-screen.is-entering .dedication-inner {
    animation: dedication-rise 1200ms ease both;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   SACRED OM MARK
   ============================================================ */

.dedication-om {
    margin-bottom: 1.5rem;
    font-family: "Playfair Display", serif;
    font-size: clamp(3rem, 7vw, 5rem);
    line-height: 1;
    letter-spacing: 0.02em;
    opacity: 0.9;
}


/* ============================================================
   KICKER / PRE-TITLE
   ============================================================ */

.dedication-kicker {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}


/* ============================================================
   MAIN TITLE
   ============================================================ */

.dedication-title {
    margin: 0;
    font-family: "Playfair Display", serif;
    font-size: clamp(2.25rem, 5vw, 3.8rem);
    font-weight: 600;
    line-height: 1.2;
}


/* ============================================================
   INTRODUCTORY DEDICATION TEXT
   ============================================================ */

.dedication-introduction {
    max-width: 680px;
    margin: 1.5rem auto 0;
    font-family: "Playfair Display", serif;
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    font-style: italic;
    line-height: 1.75;
}


/* ============================================================
   DEDICATED-TO BLOCK
   ============================================================ */

.dedication-recipient {
    margin: 2.75rem auto;
}

.dedication-recipient-label {
    display: block;
    margin-bottom: 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dedication-recipient-name {
    margin: 0;
    font-family: "Playfair Display", serif;
    font-size: clamp(1.65rem, 4vw, 2.5rem);
    font-weight: 500;
    line-height: 1.35;
}

.dedication-recipient-role {
    margin-top: 0.45rem;
    font-size: 1rem;
    font-style: italic;
    line-height: 1.6;
}


/* ============================================================
   MULTIPLE RECIPIENT SEPARATOR
   ============================================================ */

.dedication-separator {
    width: 54px;
    height: 1px;
    margin: 1.75rem auto;
    border: 0;
    opacity: 0.4;
}


/* ============================================================
   OPTIONAL PERSONAL MESSAGE
   ============================================================ */

.dedication-message {
    max-width: 700px;
    margin: 2rem auto 0;
    font-size: 1rem;
    line-height: 1.85;
}


/* ============================================================
   FLORAL / SACRED DECORATIVE MARK
   ============================================================ */

.dedication-symbol {
    margin: 2rem 0;
    font-size: 1.4rem;
    opacity: 0.75;
}


/* ============================================================
   ENTER THE PORTAL BUTTON
   ============================================================ */

.dedication-enter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-width: 190px;
    margin-top: 2.25rem;
    padding: 0.85rem 1.6rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition:
        background-color 250ms ease,
        color 250ms ease,
        transform 250ms ease;
}

.dedication-enter:hover {
    transform: translateY(-2px);
}

.dedication-enter:active {
    transform: translateY(0);
}

.dedication-enter:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 5px;
}


/* ============================================================
   ENTER BUTTON ICON
   ============================================================ */

.dedication-enter-icon {
    font-size: 0.9em;
}


/* ============================================================
   FOOTNOTE / CLOSING LINE
   ============================================================ */

.dedication-closing {
    max-width: 680px;
    margin: 2rem auto 0;
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.7;
    opacity: 0.85;
}


/* ============================================================
   PAGE SCROLL LOCK
   ============================================================ */

/*
 * Applied to <body> while the Dedication screen is active.
 *
 * The corresponding JavaScript should add:
 *     body.dedication-active
 *
 * and remove it after the visitor enters the portal.
 */

body.dedication-active {
    overflow: hidden;
}


/* ============================================================
   BACKGROUND ATMOSPHERE
   ============================================================ */

/*
 * Very subtle radial illumination keeps the screen from appearing
 * completely flat without introducing a large decorative graphic.
 */

.dedication-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(255, 255, 255, 0.5),
            transparent 52%
        );
}


/* ============================================================
   CONTENT LAYER
   ============================================================ */

.dedication-inner {
    position: relative;
    z-index: 1;
}


/* ============================================================
   DESKTOP REFINEMENT
   ============================================================ */

@media (min-width: 992px) {
    .dedication-screen {
        padding: 3rem;
    }

    .dedication-recipient {
        margin-top: 3.25rem;
        margin-bottom: 3rem;
    }

    .dedication-enter {
        min-width: 210px;
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 991.98px) {
    .dedication-screen {
        padding: 2.5rem 1.5rem;
    }

    .dedication-recipient {
        margin-top: 2.25rem;
        margin-bottom: 2.5rem;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767.98px) {
    .dedication-screen {
        align-items: flex-start;
        padding: 50px 1.25rem 2rem;
    }

    .dedication-inner {
        padding-top: 0;
        padding-bottom: 2rem;
    }

    .dedication-om {
        margin-bottom: 1.25rem;
    }

    .dedication-introduction {
        margin-top: 1.25rem;
        line-height: 1.65;
    }

    .dedication-recipient {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .dedication-separator {
        margin: 1.4rem auto;
    }

    .dedication-message {
        line-height: 1.75;
    }

    .dedication-enter {
        width: 100%;
        max-width: 260px;
    }

    .dedication-closing {
        margin-top: 1.5rem;
        line-height: 1.65;
    }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 575.98px) {
    .dedication-screen {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .dedication-inner {
        padding-top: 0.5rem;
    }

    .dedication-kicker {
        letter-spacing: 0.12em;
    }

    .dedication-recipient-name {
        font-size: 1.5rem;
    }
}


/* ============================================================
   ACCESSIBILITY — REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .dedication-screen,
    .dedication-enter {
        transition: none;
    }

    .dedication-screen.is-entering .dedication-inner {
        animation: none;
    }

    .dedication-enter:hover,
    .dedication-enter:active {
        transform: none;
    }
}


/* ============================================================
   ACCESSIBILITY — HIGH CONTRAST / FORCED COLOURS
   ============================================================ */

@media (forced-colors: active) {
    .dedication-screen {
        background: Canvas;
        color: CanvasText;
    }

    .dedication-enter {
        border-color: ButtonText;
        color: ButtonText;
    }

    .dedication-enter:focus-visible {
        outline-color: Highlight;
    }
}