/* ============================================================
   02 · ETERNAL GRACE — Elegant
   Ivory, sampanya, bej, mat altin. Ipek dokusu ve inci detaylar.
   ============================================================ */

.pem--grace {
    --ink: #574839;
    --bg: #fdfbf7;
    --soft: #f4ece0;
    --acc: #c9ae86;
    --acc2: #a98f68;
    --line: rgba(169, 143, 104, .3);
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Jost", system-ui, sans-serif;
    --script: "Pinyon Script", "Cormorant Garamond", cursive;
    --e: cubic-bezier(.22, .61, .36, 1);

    background:
        radial-gradient(120% 70% at 20% 0%, #fffdf9, transparent 55%),
        radial-gradient(90% 60% at 100% 100%, #f6ecdc, transparent 60%),
        linear-gradient(170deg, #fdfbf7, #f8f2e8);
    font-size: 17px;
}

/* ---------------------------------------------- açılış */

.g-open {
    position: fixed; inset: 0; z-index: 60;
    display: grid; place-items: center; align-content: center; gap: 30px;
    background: linear-gradient(165deg, #fdfaf4 0%, #f3e8d7 52%, #e9dcc6 100%);
    transition: opacity 1.2s var(--e), visibility 1.2s;
}
.pem--grace.is-open .g-open { opacity: 0; visibility: hidden; }

.g-silk {
    position: absolute; inset: -20%;
    background:
        radial-gradient(40% 24% at 30% 30%, rgba(255, 255, 255, .9), transparent 70%),
        radial-gradient(44% 28% at 70% 64%, rgba(232, 215, 191, .95), transparent 72%),
        radial-gradient(30% 20% at 50% 90%, rgba(255, 253, 248, .8), transparent 70%);
    filter: blur(26px);
    animation: g-silk 18s ease-in-out infinite alternate;
}
@keyframes g-silk {
    from { transform: translate3d(-2%, -1%, 0) scale(1.02) rotate(-1deg); }
    to { transform: translate3d(2%, 2%, 0) scale(1.08) rotate(1.4deg); }
}

.g-stage { perspective: 1800px; position: relative; }

.g-card {
    position: relative;
    width: min(78vw, 330px);
    aspect-ratio: .78 / 1;
    transform-style: preserve-3d;
    transition: transform 1.3s var(--e) .6s;
    filter: drop-shadow(0 26px 40px rgba(122, 98, 66, .26));
}
.pem--grace.is-opening .g-card { transform: scale(1.05) translateY(-8px); }

.g-panel {
    position: absolute; inset: 0;
    background:
        linear-gradient(118deg, rgba(255, 255, 255, .7) 0%, transparent 28%, rgba(201, 174, 134, .18) 52%, transparent 76%),
        linear-gradient(170deg, #fffdf8, #f6eddd 60%, #efe3cf);
    border: 1px solid rgba(201, 174, 134, .34);
    backface-visibility: hidden;
}
.g-panel--c {
    display: grid; place-content: center; justify-items: center; gap: 14px;
    padding: 26px 20px;
    text-align: center;
}
.g-panel--l, .g-panel--r {
    z-index: 3;
    display: grid; place-items: center;
    transition: transform 1.25s var(--e);
}
.g-panel--l { transform-origin: 100% 50%; transform: rotateY(-176deg); }
.g-panel--r { transform-origin: 0% 50%; transform: rotateY(176deg); transition-delay: .18s; }
.pem--grace.is-opening .g-panel--l,
.pem--grace.is-opening .g-panel--r { transform: rotateY(0deg); opacity: 0; transition-duration: 1.4s; }

.g-fold-orn { color: var(--acc); font-size: 1.1rem; opacity: .6; }

.g-c-mono {
    font-family: var(--script);
    font-size: 2.1rem; line-height: 1; color: var(--acc2);
}
.g-c-mono i { font-style: normal; font-size: .64em; opacity: .74; }
.g-c-mono--lg { font-size: clamp(2.4rem, 9vw, 3.6rem); }

.g-c-line { width: 46px; height: 1px; background: var(--acc); opacity: .7; }
.g-c-t {
    font-family: var(--serif); font-style: italic;
    font-size: 1.1rem; line-height: 1.5; color: var(--ink);
}
.g-c-d {
    font-family: var(--sans);
    font-size: .56rem; letter-spacing: .3em; text-transform: uppercase; color: var(--acc2);
}

.g-open-b {
    position: relative;
    padding: 1.05em 2.3em;
    background: transparent;
    border: 1px solid var(--acc);
    color: var(--ink);
    font-family: var(--sans);
    font-size: .64rem; letter-spacing: .26em; text-transform: uppercase;
    cursor: pointer;
    transition: background .5s var(--e), color .5s var(--e), letter-spacing .5s var(--e);
}
.g-open-b:hover { background: var(--acc); color: #fff; letter-spacing: .3em; }
.g-open-h {
    font-family: var(--sans);
    font-size: .54rem; letter-spacing: .32em; text-transform: uppercase;
    color: rgba(87, 72, 57, .5);
    animation: g-breathe 3.6s ease-in-out infinite;
}
@keyframes g-breathe { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
.pem--grace.is-opening .g-open-b,
.pem--grace.is-opening .g-open-h { opacity: 0; transition: opacity .45s; }

/* ---------------------------------------------- kaligrafi */

.g-script {
    display: block;
    margin: 18px 0 0;
    font-family: var(--script);
    font-size: clamp(3rem, 15vw, 6.2rem);
    font-weight: 400; line-height: 1.12;
    color: var(--ink);
}
.g-script span,
.g-script i {
    display: inline-block;
    font-style: normal;
    clip-path: inset(0 100% -20% 0);
}
.g-script i { font-size: .46em; color: var(--acc); margin: 0 .16em; vertical-align: .18em; }
.pem--grace.is-open .g-script span,
.pem--grace.is-open .g-script i {
    animation: g-write 1.5s cubic-bezier(.62, .02, .36, 1) forwards;
}
.pem--grace.is-open .g-script i { animation-delay: 1.1s; animation-duration: .5s; }
.pem--grace.is-open .g-script span:last-of-type { animation-delay: 1.5s; }
@keyframes g-write { to { clip-path: inset(0 -6% -20% 0); } }

/* ---------------------------------------------- altın çizgi */

.g-line { height: 1px; margin: 26px auto; width: min(70vw, 280px); overflow: hidden; }
.g-line span {
    display: block; height: 100%;
    background: linear-gradient(90deg, transparent, var(--acc) 50%, transparent);
    transform: scaleX(0);
}
.g-line.in span { transform: scaleX(1); transition: transform 1.6s var(--e) .2s; }

/* ---------------------------------------------- bölümler */

.g-doc { position: relative; }
.g-alt { background: linear-gradient(180deg, transparent, rgba(244, 236, 224, .72) 18%, rgba(244, 236, 224, .72) 82%, transparent); }

.g-hero { padding-top: clamp(66px, 13vw, 118px); }
.g-kick {
    font-family: var(--sans);
    font-size: .58rem; letter-spacing: .36em; text-transform: uppercase; color: var(--acc2);
}
.g-sur {
    font-family: var(--serif); font-size: 1rem; letter-spacing: .16em;
    text-transform: uppercase; opacity: .62;
}
.g-date {
    margin-top: 16px;
    font-family: var(--sans);
    font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; opacity: .72;
}

.g-cover {
    width: min(88vw, 620px);
    margin: clamp(44px, 8vw, 84px) auto 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid rgba(201, 174, 134, .34);
    padding: 12px;
    background: rgba(255, 255, 255, .5);
}
.g-cover img {
    width: 100%; height: 100%; object-fit: cover;
    transform: translateY(calc(var(--p, 0) * -26px)) scale(1.08);
    transition: transform .25s linear;
}

.g-orn { display: block; color: var(--acc); font-size: .95rem; margin-bottom: 16px; }
.g-h {
    font-family: var(--serif); font-weight: 300;
    font-size: clamp(1.8rem, 7vw, 3rem);
    letter-spacing: -.01em;
}
.g-msg {
    max-width: 44ch; margin: 24px auto 0;
    font-family: var(--serif); font-style: italic;
    font-size: clamp(1.08rem, 3.6vw, 1.32rem); line-height: 1.88; opacity: .84;
}

.pem--grace .pem-cd-i b { color: var(--ink); }
.pem--grace .pem-cd-i span { color: var(--acc2); }
.pem--grace .pem-venue-n { font-family: var(--serif); font-weight: 300; }
.pem--grace .pem-extra { border-color: var(--line); background: var(--line); }
.pem--grace .pem-extra li { background: rgba(255, 255, 255, .72); }
.pem--grace .pem-gal-i { border: 1px solid rgba(201, 174, 134, .26); }
.pem--grace .pem-rsvp { max-width: 540px; margin-inline: auto; }
.pem--grace .pem-story li::before { box-shadow: 0 0 0 4px #fbf6ee; }

/* inci sırası */
.g-close { position: relative; padding-block: clamp(76px, 13vw, 128px); }
.g-close::before {
    content: "• • • • •";
    position: absolute; top: 34px; left: 50%; transform: translateX(-50%);
    letter-spacing: 1.2em; color: var(--acc); opacity: .5; font-size: .6rem;
}
.g-close-t {
    max-width: 36ch; margin: 24px auto 0;
    font-family: var(--serif); font-style: italic; font-size: 1.16rem; line-height: 1.84; opacity: .8;
}
.g-tag { margin-top: 22px; font-family: var(--script); font-size: 1.7rem; color: var(--acc2); }
.g-sig {
    margin-top: 44px;
    font-family: var(--sans); font-size: .5rem; letter-spacing: .34em; text-transform: uppercase;
    opacity: .38;
}