/* =========================================
   AGBOR KINGDOM
   THE DEIN PAGE
========================================= */

.dein-page {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(117, 23, 45, 0.08),
            transparent 45%
        ),
        #f8f5ee;

    color: #241a18;
}


/* =========================================
   ROYAL HERO
========================================= */

.dein-hero {
    position: relative;

    min-height: min(850px, 92vh);

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #160c0e;
}


.dein-hero-image {
    position: absolute;
    inset: 0;
}


.dein-hero-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: 0;

    transform: scale(1.04);

    transition:
        opacity 1.2s ease,
        transform 7s ease;
}


.dein-hero.loaded .dein-hero-image img {
    opacity: 1;
    transform: scale(1);
}


.dein-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(20, 5, 9, 0.88),
            rgba(48, 7, 18, 0.63),
            rgba(20, 5, 9, 0.35)
        );
}


.dein-royal-pattern {
    position: absolute;
    inset: 0;

    opacity: 0.12;

    background-image:
        radial-gradient(
            circle,
            #e5c56a 1px,
            transparent 1px
        );

    background-size: 28px 28px;

    pointer-events: none;
}


.dein-hero-content {
    position: relative;
    z-index: 2;

    width: min(1100px, 90%);

    margin: 0 auto;

    color: #fff;

    text-align: center;

    padding: 100px 0 70px;
}


.dein-eyebrow {
    display: block;

    color: #e3c263;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 5px;

    margin-bottom: 20px;

    text-transform: uppercase;
}


.dein-hero h1 {
    max-width: 900px;

    margin: 20px auto;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        42px,
        6vw,
        78px
    );

    line-height: 1.08;

    font-weight: 500;

    text-shadow:
        0 5px 30px rgba(0,0,0,.45);
}


.dein-hero p {
    max-width: 680px;

    margin: 25px auto 0;

    color: rgba(255,255,255,.84);

    font-size: 18px;

    line-height: 1.8;
}


/* =========================================
   ROYAL LINE
========================================= */

.dein-royal-line {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    margin: 25px auto;
}


.dein-royal-line span {
    width: 80px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d8b75c
        );
}


.dein-royal-line span:last-child {
    background:
        linear-gradient(
            90deg,
            #d8b75c,
            transparent
        );
}


.dein-royal-line i {
    color: #e1c15e;

    font-style: normal;

    font-size: 13px;
}


.dein-scroll-indicator {
    margin-top: 70px;

    color: rgba(255,255,255,.65);

    font-size: 11px;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.dein-scroll-arrow {
    margin-top: 12px;

    color: #e1c15e;

    font-size: 22px;

    animation:
        deinFloat 2s ease-in-out infinite;
}


@keyframes deinFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(7px);
    }

}


/* =========================================
   GENERAL CONTAINER
========================================= */

.dein-section-container {
    width: min(
        1250px,
        calc(100% - 50px)
    );

    margin: 0 auto;
}


/* =========================================
   SECTION HEADING
========================================= */

.dein-section-heading {
    text-align: center;

    margin-bottom: 65px;
}


.section-label {
    display: inline-block;

    color: #8d1839;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;

    margin-bottom: 15px;
}


.dein-section-heading h2,
.dein-message-header h2 {
    margin: 0;

    color: #2b1719;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        34px,
        4vw,
        52px
    );

    font-weight: 500;

    line-height: 1.2;
}


.dein-heading-decoration {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    margin-top: 22px;
}


.dein-heading-decoration span {
    width: 55px;
    height: 1px;

    background: #c7a84c;
}


.dein-heading-decoration strong {
    color: #a11c40;

    font-size: 12px;
}


/* =========================================
   INTRODUCTION
========================================= */

.dein-introduction {
    padding: 110px 0;

    background:
        linear-gradient(
            180deg,
            #fffdf8,
            #f6f0e4
        );
}


.dein-introduction-grid {
    display: grid;

    grid-template-columns:
        1.1fr
        .9fr;

    align-items: center;

    gap: 90px;
}


.dein-introduction-text p {
    margin: 0 0 22px;

    color: #5f5350;

    font-size: 17px;

    line-height: 1.9;
}


.dein-royal-signature {
    margin-top: 35px;

    padding-left: 20px;

    border-left:
        3px solid #b58b32;
}


.dein-royal-signature span {
    display: block;

    color: #8d1839;

    font-size: 11px;

    letter-spacing: 2px;

    font-weight: 700;
}


.dein-royal-signature strong {
    display: block;

    margin-top: 7px;

    color: #392529;

    font-family:
        Georgia,
        serif;

    font-size: 17px;

    font-weight: 500;
}


/* =========================================
   ROYAL PORTRAIT CARD
========================================= */

.dein-introduction-card {
    display: flex;

    justify-content: center;
}


.dein-card-frame {
    position: relative;

    width: min(
        430px,
        100%
    );

    padding: 14px;

    background:
        linear-gradient(
            145deg,
            #f1d278,
            #a87923,
            #e6c75f,
            #9b6c20
        );

    box-shadow:
        0 25px 70px
        rgba(53, 21, 28, .22);
}


.dein-card-image {
    position: relative;

    overflow: hidden;

    aspect-ratio: 4 / 5;

    background: #291318;
}


.dein-card-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform .7s ease;
}


.dein-card-frame:hover
.dein-card-image img {
    transform: scale(1.04);
}


.dein-card-caption {
    padding: 20px;

    background: #3b101c;

    color: #fff;

    text-align: center;
}


.dein-card-caption span {
    display: block;

    color: #e1c15e;

    font-size: 10px;

    letter-spacing: 3px;
}


.dein-card-caption strong {
    display: block;

    margin-top: 7px;

    font-family:
        Georgia,
        serif;

    font-size: 24px;

    font-weight: 500;
}


.dein-card-caption small {
    display: block;

    margin-top: 5px;

    color: #d5c8c5;

    font-size: 11px;

    letter-spacing: 1px;
}


/* =========================================
   MESSAGE SECTION
========================================= */

.dein-message-section {
    position: relative;

    overflow: hidden;

    padding: 120px 0;

    background:
        radial-gradient(
            circle at 50% 0%,
            #64132c,
            #2b0a16 65%
        );

    color: #fff;
}


.dein-message-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(226,194,93,.11),
            transparent 65%
        );

    pointer-events: none;
}


.dein-message-header {
    position: relative;

    z-index: 2;

    text-align: center;

    margin-bottom: 50px;
}


.dein-message-header .section-label {
    color: #e2c361;
}


.dein-message-header h2 {
    color: #fff;
}


.dein-message-header p {
    color: rgba(255,255,255,.65);

    margin-top: 15px;

    font-size: 16px;
}


.dein-message-card {
    position: relative;

    max-width: 900px;

    margin: 0 auto;

    padding: 70px 80px;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid
        rgba(225,194,97,.35);

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.25);

    backdrop-filter: blur(8px);
}


.dein-message-ornament {
    position: absolute;

    color: #d9b957;

    font-size: 16px;
}


.dein-message-ornament.top {
    top: 25px;
    left: 30px;
}


.dein-message-ornament.bottom {
    right: 30px;
    bottom: 25px;
}


.dein-message-content {
    position: relative;
}


.dein-quote-mark {
    position: absolute;

    top: -45px;
    left: -25px;

    color: rgba(225,194,97,.3);

    font-family:
        Georgia,
        serif;

    font-size: 110px;

    line-height: 1;
}


.dein-message-text {
    position: relative;

    z-index: 2;

    color: #f2e9df;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;

    line-height: 2;
}


.dein-message-text p {
    margin: 0 0 20px;
}


.dein-message-signature {
    margin-top: 45px;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(225,194,97,.25);

    text-align: right;
}


.dein-message-signature span {
    display: block;

    color: #d9b957;

    font-size: 10px;

    letter-spacing: 3px;
}


.dein-message-signature strong {
    display: block;

    margin-top: 7px;

    font-family:
        Georgia,
        serif;

    font-size: 16px;

    font-weight: 500;
}


/* =========================================
   VALUES
========================================= */

.dein-values {
    padding: 110px 0;

    background: #fffdf8;
}


.dein-values-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 28px;
}


.dein-value-card {
    padding: 42px 32px;

    background: #fff;

    border:
        1px solid
        rgba(159,125,52,.18);

    text-align: center;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.dein-value-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 50px
        rgba(57, 25, 32, .12);
}


.dein-value-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 55px;
    height: 55px;

    margin: 0 auto 20px;

    border-radius: 50%;

    background:
        #3b101c;

    color: #e1c15e;

    font-size: 15px;
}


.dein-value-card h3 {
    margin: 0 0 13px;

    color: #381c21;

    font-family:
        Georgia,
        serif;

    font-size: 25px;

    font-weight: 500;
}


.dein-value-card p {
    margin: 0;

    color: #6e6260;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================
   CLOSING
========================================= */

.dein-closing {
    padding: 100px 25px;

    background:
        linear-gradient(
            135deg,
            #220910,
            #4a0d21,
            #1b080d
        );

    color: #fff;

    text-align: center;
}


.dein-closing-content > span {
    color: #e1c15e;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 4px;
}


.dein-closing h2 {
    max-width: 800px;

    margin: 25px auto;

    font-family:
        Georgia,
        serif;

    font-size: clamp(
        32px,
        4vw,
        55px
    );

    font-weight: 400;

    line-height: 1.25;
}


.dein-closing .dein-royal-line {
    margin-bottom: 0;
}


/* =========================================
   REVEAL ANIMATION
========================================= */

.dein-reveal {
    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}


.dein-reveal.dein-visible {
    opacity: 1;

    transform: translateY(0);
}


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

@media (max-width: 900px) {

    .dein-introduction-grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .dein-introduction-card {
        order: -1;
    }

    .dein-values-grid {
        grid-template-columns: 1fr;
    }

    .dein-message-card {
        padding: 55px 40px;
    }

}


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

@media (max-width: 600px) {

    .dein-section-container {
        width: min(
            100% - 30px,
            1250px
        );
    }

    .dein-hero {
        min-height: 700px;
    }

    .dein-hero-content {
        padding-top: 80px;
    }

    .dein-eyebrow {
        font-size: 10px;
        letter-spacing: 3px;
    }

    .dein-hero h1 {
        font-size: 40px;
    }

    .dein-hero p {
        font-size: 15px;
    }

    .dein-introduction,
    .dein-message-section,
    .dein-values {
        padding: 80px 0;
    }

    .dein-message-card {
        padding: 50px 25px;
    }

    .dein-message-text {
        font-size: 17px;
        line-height: 1.8;
    }

    .dein-quote-mark {
        left: -10px;
    }

    .dein-card-caption strong {
        font-size: 21px;
    }

}