/* ============================================================
   06 · LOVE IN MOTION — Cinematic
   Derin bordo, gece mavisi, rose gold. Tam ekran sahneler.
   ============================================================ */

.pem--motion {
    --ink: #f3e9e4;
    --bg: #0e0712;
    --soft: #1a1020;
    --acc: #c98b6b;
    --acc2: #e8b394;
    --wine: #4a1026;
    --night: #1b2a4a;
    --line: rgba(201, 139, 107, .32);
    --serif: "Bodoni Moda", Georgia, serif;
    --sans: "Jost", system-ui, sans-serif;
    --e: cubic-bezier(.22, .61, .36, 1);

    background: #0b0610;
    font-size: 17px;
}

/* ---------------------------------------------- jenerik */

.c-open {
    position: fixed; inset: 0; z-index: 60;
    display: grid; place-items: center; align-content: center; gap: 0;
    overflow: hidden;
    background: radial-gradient(120% 90% at 50% 40%, #2a1230 0%, #130a18 52%, #070309 100%);
    transition: opacity 1.1s var(--e), visibility 1.1s;
}
.pem--motion.is-open .c-open { opacity: 0; visibility: hidden; }

.c-beams {
    position: absolute; inset: -30%;
    background:
        linear-gradient(74deg, transparent 42%, rgba(232, 179, 148, .2) 49%, transparent 56%),
        linear-gradient(102deg, transparent 38%, rgba(74, 16, 38, .6) 47%, transparent 58%),
        radial-gradient(40% 30% at 30% 26%, rgba(27, 42, 74, .76), transparent 70%),
        radial-gradient(44% 32% at 74% 70%, rgba(74, 16, 38, .74), transparent 70%);
    filter: blur(22px);
    animation: c-beam 20s ease-in-out infinite alternate;
}
@keyframes c-beam {
    from { transform: translate3d(-3%, -2%, 0) rotate(-3deg) scale(1.04); }
    to { transform: translate3d(3%, 3%, 0) rotate(4deg) scale(1.14); }
}

.c-grain {
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
    opacity: .16; mix-blend-mode: overlay;
    animation: c-flick .6s steps(2) infinite;
}
@keyframes c-flick { 50% { opacity: .11; } }

/* sıralı jenerik kartları */
.c-seq { position: absolute; display: grid; place-items: center; text-align: center; padding: 20px; }
.c-card {
    position: absolute;
    white-space: nowrap;
    font-family: var(--serif); font-style: italic;
    font-size: clamp(1.1rem, 4.6vw, 1.9rem);
    color: rgba(243, 233, 228, .9);
    opacity: 0;
    animation: c-caption 1.85s var(--e) both;
}
.c-card:nth-child(1) { animation-delay: .3s; }
.c-card:nth-child(2) { animation-delay: 1.6s; }
.c-card:nth-child(3) { animation-delay: 2.9s; }
@keyframes c-caption {
    0% { opacity: 0; transform: translateY(14px) scale(.98); filter: blur(6px); }
    24%, 66% { opacity: 1; transform: none; filter: none; }
    100% { opacity: 0; transform: translateY(-12px) scale(1.02); filter: blur(5px); }
}

/* isim açılımı */
.c-title {
    position: relative;
    display: grid; justify-items: center; gap: 0;
    margin: 0;
    opacity: 0;
    animation: c-in .1s linear 4.2s forwards;
}
@keyframes c-in { to { opacity: 1; } }

.c-tl { display: block; overflow: hidden; padding-bottom: .04em; }
.c-tl b {
    display: block;
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(2.9rem, 16vw, 7.4rem);
    line-height: 1;
    letter-spacing: -.015em;
    color: #fbf3ee;
    transform: translateY(104%);
    animation: c-rise 1.5s var(--e) 4.3s both;
}
.c-title .c-tl:last-of-type b { animation-delay: 4.62s; }
@keyframes c-rise { to { transform: none; } }

.c-title em {
    font-family: var(--serif); font-style: italic;
    font-size: clamp(1.2rem, 5vw, 2rem);
    color: var(--acc);
    padding: .12em 0;
    opacity: 0;
    animation: c-in .8s ease 5s forwards;
}

.c-sub {
    margin-top: 26px;
    font-family: var(--sans);
    font-size: .6rem; letter-spacing: .34em; text-transform: uppercase;
    color: rgba(243, 233, 228, .54);
    opacity: 0; animation: c-in 1s ease 5.4s forwards;
}

.c-enter {
    position: relative;
    margin-top: 40px;
    padding: 1.1em 2.5em;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: var(--sans);
    font-size: .64rem; letter-spacing: .26em; text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    opacity: 0; animation: c-in 1s ease 5.7s forwards;
}
.c-enter-r {
    position: absolute; inset: 0;
    background: linear-gradient(100deg, var(--wine), var(--acc));
    transform: translateY(101%);
    transition: transform .6s var(--e);
}
.c-enter > span:last-child { position: relative; }
.c-enter:hover .c-enter-r { transform: none; }
.pem--motion.is-opening .c-open > *:not(.c-beams):not(.c-grain) { opacity: 0; transition: opacity .5s; }
.pem--motion.is-opening .c-beams { transform: scale(1.6); transition: transform 1.6s var(--e); }

/* ---------------------------------------------- sahneler */

.c-doc { position: relative; }

.c-scene {
    position: relative;
    min-height: 100svh;
    display: grid; align-items: end;
    overflow: hidden;
    padding-block: clamp(70px, 12vw, 120px);
}
.c-scene--venue { align-items: center; text-align: center; }

.c-scene-art { position: absolute; inset: -6% 0; }
.c-scene-art img {
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.12) translateY(calc(var(--p, 0) * 5%));
    will-change: transform;
}
.c-scene-veil {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(11, 6, 16, .82) 0%, rgba(11, 6, 16, .22) 38%, rgba(11, 6, 16, .94) 100%),
        radial-gradient(80% 60% at 50% 70%, transparent, rgba(11, 6, 16, .6));
}
.c-scene-in { position: relative; }

.c-kick {
    font-family: var(--sans);
    font-size: .56rem; letter-spacing: .42em; text-transform: uppercase; color: var(--acc);
}

.c-h {
    margin-top: 18px;
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(2rem, 9vw, 4.4rem); line-height: 1.06;
    letter-spacing: -.02em;
}
.c-h em { font-style: italic; color: var(--acc); font-size: .54em; }
.c-h2 {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(1.8rem, 7vw, 3.2rem); line-height: 1.1;
    margin-top: 16px;
}

/* maske açılımı */
.c-mask { clip-path: inset(0 0 100% 0); }
.c-mask.in {
    clip-path: inset(0 0 -10% 0);
    transition: clip-path 1.5s var(--e), opacity 1s ease, transform 1.2s var(--e);
}

.c-when {
    margin-top: 22px;
    font-family: var(--sans);
    font-size: .62rem; letter-spacing: .3em; text-transform: uppercase;
    color: rgba(243, 233, 228, .64);
}

.c-invite {
    background: linear-gradient(180deg, #0b0610, #1a0d1c 50%, #0b0610);
}
.c-msg {
    max-width: 44ch; margin: 26px auto 0;
    font-size: 1.06rem; line-height: 1.92; color: rgba(243, 233, 228, .76);
}

/* ---------------------------------------------- 3B hikâye kartları */

.c-story-s { background: linear-gradient(180deg, #0b0610, #150a1a); }
.c-story {
    list-style: none; margin: clamp(36px, 6vw, 58px) 0 0; padding: 0;
    display: grid; gap: 18px;
    perspective: 1200px;
}
@media (min-width: 760px) { .c-story { grid-template-columns: 1fr 1fr; gap: 22px; } }

.c-sc {
    position: relative;
    padding: clamp(26px, 4vw, 38px);
    background: linear-gradient(150deg, rgba(74, 16, 38, .5), rgba(27, 42, 74, .42));
    border: 1px solid var(--line);
    transform-style: preserve-3d;
    transition: transform .4s var(--e), box-shadow .4s ease;
}
.c-sc.in { transition: transform .4s var(--e), box-shadow .4s ease, opacity 1s ease; }
.c-sc:hover { box-shadow: 0 24px 50px rgba(0, 0, 0, .5); }
.c-sc-no {
    position: absolute; top: 14px; right: 18px;
    font-family: var(--serif); font-size: 2.4rem; color: rgba(201, 139, 107, .26);
}
.c-sc-d {
    font-family: var(--sans);
    font-size: .54rem; letter-spacing: .28em; text-transform: uppercase; color: var(--acc);
}
.c-sc h3 { margin: 10px 0 8px; font-family: var(--serif); font-size: 1.4rem; }
.c-sc p { font-size: .92rem; line-height: 1.78; color: rgba(243, 233, 228, .72); }

/* ---------------------------------------------- geri sayım */

.c-cd-s { background: #0b0610; }
.pem--motion .pem-cd { max-width: 640px; }
.pem--motion .pem-cd-i { position: relative; }
.pem--motion .pem-cd-i b {
    font-family: var(--serif);
    background: linear-gradient(170deg, #fbf3ee, var(--acc));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pem--motion .pem-cd-i span { color: rgba(243, 233, 228, .5); }

/* ---------------------------------------------- mekân & galeri */

.pem--motion .pem-venue-n {
    font-family: var(--serif);
    font-size: clamp(1.6rem, 6.4vw, 2.6rem);
}
.pem--motion .pem-venue-a { color: rgba(243, 233, 228, .68); }
.pem--motion .pem-extra { background: var(--line); border-color: var(--line); }
.pem--motion .pem-extra li { background: rgba(26, 16, 32, .92); }
.pem--motion .pem-extra b { font-family: var(--serif); color: var(--acc2); }

.c-gal-s { background: linear-gradient(180deg, #0b0610, #140a18 60%, #0b0610); }
.pem--motion .pem-gal { gap: 10px; perspective: 1000px; }
.pem--motion .pem-gal-i {
    transform-style: preserve-3d;
    transition: transform .5s var(--e);
}
.pem--motion .pem-gal-i img { filter: saturate(1.04) contrast(1.06) brightness(.94); }
.pem--motion .pem-gal-i:hover img { filter: none; }

.c-rsvp { background: linear-gradient(180deg, #0b0610, #1b1026 55%, #0b0610); }
.pem--motion .pem-rsvp { max-width: 540px; margin-inline: auto; }
.pem--motion .pem-inp { background: rgba(255, 255, 255, .06); color: var(--ink); }
.pem--motion .pem-inp:focus { background: rgba(255, 255, 255, .11); }
.pem--motion .pem-choice input:checked + label { color: #140a18; }
.pem--motion .pem-story li::before { box-shadow: 0 0 0 4px #0b0610; }

/* ---------------------------------------------- final */

.c-end {
    position: relative;
    padding-block: clamp(90px, 16vw, 170px);
    background: radial-gradient(90% 70% at 50% 100%, rgba(74, 16, 38, .6), transparent 72%), #0b0610;
}
.c-end-k {
    font-family: var(--sans);
    font-size: .54rem; letter-spacing: .5em; text-transform: uppercase;
    color: rgba(243, 233, 228, .38);
}
.c-end-t {
    max-width: 32ch; margin: 24px auto 0;
    font-family: var(--serif); font-style: italic;
    font-size: clamp(1.3rem, 5.4vw, 2rem); line-height: 1.5;
}
.c-end-n {
    margin-top: 36px;
    font-family: var(--serif); font-size: clamp(1.5rem, 6vw, 2.2rem);
}
.c-end-n em { font-style: italic; color: var(--acc); }
.c-tag { margin-top: 18px; font-family: var(--sans); font-size: .64rem; letter-spacing: .28em; color: var(--acc); }
.c-sig {
    margin-top: 50px;
    font-family: var(--sans); font-size: .5rem; letter-spacing: .36em; text-transform: uppercase;
    color: rgba(243, 233, 228, .26);
}