/* ═══════════════════════════════════════════════════════════
 *  Card — Stage/camera/focus, invitation card, faces, glare, form shell, fields
 *  @module wp-card.css
 * ═══════════════════════════════════════════════════════════ */

.wedding-portal__stage {
    z-index: 24;
    transform-style: preserve-3d;
}

.wedding-portal__camera,
.wedding-portal__focus {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    will-change: transform;
}

.wedding-portal__focus {
    isolation: isolate;
    perspective: 980px;
    perspective-origin: 50% 50%;
}

.wedding-portal__gallery {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    z-index: 20;
    pointer-events: none;
}

.wedding-portal__gallery-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 260px;
    aspect-ratio: 16 / 9;
    border-radius: 32px;
    overflow: hidden;
    opacity: 0;
    transform-style: preserve-3d;
    will-change: transform, opacity, filter;
    background:
        linear-gradient(160deg, color-mix(in srgb, var(--portal-tone-d) 12%, transparent), transparent 42%),
        linear-gradient(145deg, color-mix(in srgb, var(--portal-tone-c) 84%, black 16%), color-mix(in srgb, var(--portal-tone-c) 70%, black 30%));
    box-shadow:
        0 28px 56px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.wedding-portal__gallery-card::before,
.wedding-portal__gallery-card::after,
.wedding-portal__player-frame::before,
.wedding-portal__player-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.wedding-portal__gallery-card::before,
.wedding-portal__player-frame::before {
    inset: 12px;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 24%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.22), transparent 40%);
    opacity: 0.36;
}

.wedding-portal__gallery-card::after,
.wedding-portal__player-frame::after {
    z-index: 5;
    background-image: var(--wp-portal-video-frame);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    mix-blend-mode: screen;
    opacity: 0.9;
}

.wedding-portal__thumb-visual,
.wedding-portal__thumb-meta {
    position: absolute;
}

.wedding-portal__thumb-visual {
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 28%),
        radial-gradient(circle at 24% 24%, color-mix(in srgb, var(--portal-tone-a) 55%, white 45%), transparent 18%),
        linear-gradient(140deg, color-mix(in srgb, var(--portal-tone-c) 70%, black 30%), color-mix(in srgb, var(--portal-tone-c) 88%, black 12%));
}

.wedding-portal__thumb-grid,
.wedding-portal__thumb-glow,
.wedding-portal__thumb-orb,
.wedding-portal__thumb-play,
.wedding-portal__thumb-duration {
    position: absolute;
}

.wedding-portal__thumb-grid {
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.22;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 90%);
}

.wedding-portal__thumb-orb {
    width: 44%;
    aspect-ratio: 1;
    top: 8%;
    left: 12%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 36% 32%, color-mix(in srgb, var(--portal-tone-d) 76%, white 24%), color-mix(in srgb, var(--portal-tone-a) 66%, transparent 34%) 28%, transparent 72%);
    filter: blur(4px);
    opacity: 0.88;
}

.wedding-portal__thumb-glow {
    width: 38%;
    aspect-ratio: 1;
    right: 10%;
    bottom: 10%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--portal-tone-b) 42%, transparent), transparent 70%);
    filter: blur(10px);
}

.wedding-portal__thumb-play {
    width: 54px;
    aspect-ratio: 1;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 241, 219, 0.26);
    background: rgba(255, 253, 248, 0.08);
    backdrop-filter: blur(10px);
}

.wedding-portal__thumb-triangle {
    display: block;
    width: 0;
    height: 0;
    margin-left: 3px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 13px solid rgba(255, 248, 234, 0.92);
}

.wedding-portal__thumb-duration {
    top: 18px;
    right: 20px;
    z-index: 3;
    padding: 6px 10px;
    border-radius: 999px;
    font-family: 'Manrope', sans-serif;
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: rgba(10, 10, 12, 0.46);
    color: rgba(255, 244, 229, 0.8);
    border: 1px solid rgba(255, 240, 220, 0.1);
}

.wedding-portal__thumb-meta {
    left: 22px;
    right: 22px;
    bottom: 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 2;
}

.wedding-portal__thumb-kicker {
    font-family: 'Manrope', sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--portal-tone-a) 70%, white 30%);
}

.wedding-portal__thumb-title {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    line-height: 0.92;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: rgba(253, 245, 233, 0.94);
}

.wedding-portal__invitation {
    position: relative;
    width: min(32vw, 450px);
    height: min(44.8vw, 630px);
    min-width: 0;
    min-height: 0;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    will-change: transform, width, height;
    z-index: 40;
}

.wedding-portal__card-shell {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    will-change: transform;
}

.wedding-portal__card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    overflow: hidden;
}

.wedding-portal__card-face--front,
.wedding-portal__card-face--form {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(210, 185, 145, 0.08));
    -webkit-mask-image: var(--wp-portal-paper-mask);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    -webkit-mask-size: 100% 100%;
    mask-image: var(--wp-portal-paper-mask);
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: 100% 100%;
}

.wedding-portal__card-face--front {
    transform: translateZ(2px);
}

.wedding-portal__card-face--back {
    transform: rotateY(180deg) translateZ(1px);
    border-radius: 34px;
    opacity: 0.58;
    background:
        radial-gradient(circle at top left, rgba(255, 250, 246, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(10, 10, 12, 0.94), rgba(5, 5, 7, 0.98));
    box-shadow:
        0 48px 84px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -16px 32px rgba(0, 0, 0, 0.38);
}

.wedding-portal__card-face--form {
    transform: translateZ(3px);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}

.wedding-portal__paper-shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    user-select: none;
    pointer-events: none;
    filter: none;
}

.wedding-portal__card-glare {
    position: absolute;
    inset: -14% -12%;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: screen;
    background:
        radial-gradient(
            circle at 32% 28%,
            rgba(255, 255, 255, 0.26) 0%,
            rgba(255, 255, 255, 0.08) 18%,
            rgba(255, 255, 255, 0) 42%
        ),
        linear-gradient(
            112deg,
            rgba(255, 255, 255, 0) 18%,
            rgba(255, 255, 255, 0.52) 40%,
            rgba(255, 255, 255, 0.22) 48%,
            rgba(255, 255, 255, 0) 68%
        );
    filter: blur(0.55px) saturate(1.15);
    will-change: transform, opacity;
}

.wedding-portal__invitation-inner,
.wedding-portal__form-shell {
    position: relative;
    height: 100%;
    z-index: 3;
}

.wedding-portal__invitation-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: clamp(46px, 5vw, 62px) clamp(34px, 4vw, 46px) clamp(42px, 4.6vw, 54px);
    text-align: center;
    color: var(--wp-portal-ink);
    background:
        linear-gradient(180deg, rgba(255, 251, 245, 0.24), rgba(233, 216, 190, 0.14)),
        radial-gradient(circle at top, rgba(255, 255, 255, 0.28), transparent 38%);
}

.wedding-portal__invitation-inner::before,
.wedding-portal__form-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 24%),
        repeating-linear-gradient(120deg, rgba(137, 94, 52, 0.028) 0 2px, transparent 2px 7px);
    mix-blend-mode: multiply;
    opacity: 0.4;
    pointer-events: none;
}

.wedding-portal__eyebrow,
.wedding-portal__title,
.wedding-portal__copy,
.wedding-portal__seal,
.wedding-portal__keyhole-lockup {
    position: relative;
    z-index: 2;
}

.wedding-portal__eyebrow {
    font-family: 'Manrope', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(89, 62, 35, 0.78);
    transform: translateZ(24px);
}

.wedding-portal__title {
    margin: 0;
    max-width: 11ch;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.5rem, 4.9vw, 4.55rem);
    line-height: 0.92;
    font-weight: 600;
    letter-spacing: -0.04em;
    text-wrap: balance;
    transform: translateZ(34px);
}

.wedding-portal__copy {
    margin: 0;
    max-width: 24ch;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(0.96rem, 1.35vw, 1.05rem);
    line-height: 1.7;
    color: var(--wp-portal-ink-soft);
    transform: translateZ(28px);
}

.wedding-portal__seal {
    width: clamp(94px, 9vw, 122px);
    aspect-ratio: 1;
    margin-top: 10px;
    transform: translateZ(56px);
}

.wedding-portal__seal img,
.wedding-portal__cursor img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wedding-portal__keyhole-lockup {
    margin-top: auto;
    padding-top: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transform: translateZ(44px);
}

.wedding-portal__keyhole {
    width: clamp(34px, 4vw, 48px);
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 18px rgba(88, 58, 30, 0.16));
}

.wedding-portal__keyhole-text {
    font-family: 'Manrope', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(101, 70, 40, 0.76);
}

.wedding-portal__form-shell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: clamp(40px, 5vw, 52px) clamp(34px, 4vw, 46px) clamp(34px, 4vw, 44px);
    color: rgba(39, 25, 14, 0.94);
    background:
        linear-gradient(180deg, rgba(255, 251, 245, 0.2), rgba(233, 216, 190, 0.12)),
        radial-gradient(circle at top, rgba(255, 255, 255, 0.3), transparent 42%);
}

.wedding-portal__form-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 2;
}

.wedding-portal__form-kicker {
    font-family: 'Manrope', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(115, 76, 39, 0.72);
}

.wedding-portal__form-title {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2.2rem, 4.4vw, 4rem);
    line-height: 0.92;
    font-weight: 600;
    letter-spacing: -0.045em;
}

.wedding-portal__form-copy {
    margin: 0;
    max-width: 30ch;
    font-family: 'Manrope', sans-serif;
    font-size: 0.97rem;
    line-height: 1.72;
    color: rgba(65, 43, 27, 0.74);
}

.wedding-portal__form {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 14px;
}

.wedding-portal__field {
    display: grid;
    gap: 8px;
}

.wedding-portal__field-label {
    font-family: 'Manrope', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(96, 66, 42, 0.76);
}

.wedding-portal__field-input {
    width: 100%;
    border: 1px solid rgba(123, 85, 50, 0.14);
    border-radius: 18px;
    padding: 14px 16px;
    font-family: 'Manrope', sans-serif;
    font-size: 0.96rem;
    color: rgba(36, 23, 14, 0.9);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(251, 245, 237, 0.9));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.74),
        0 10px 18px rgba(118, 83, 48, 0.06);
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.wedding-portal__field-input::placeholder {
    color: rgba(113, 91, 72, 0.64);
}

.wedding-portal__field-input:focus {
    border-color: rgba(171, 125, 70, 0.44);
    box-shadow:
        0 0 0 4px rgba(214, 179, 108, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
    transform: translateY(-1px);
}

.wedding-portal__form-submit {
    margin-top: 8px;
    border: 0;
    border-radius: 999px;
    padding: 14px 20px;
    align-self: start;
    font-family: 'Manrope', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 248, 239, 0.96);
    background:
        linear-gradient(135deg, rgba(178, 125, 63, 1), rgba(105, 63, 32, 1));
    box-shadow:
        0 18px 32px rgba(78, 48, 24, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.wedding-portal__form-submit:hover,
.wedding-portal__form-submit:focus-visible {
    transform: translateY(-2px);
    box-shadow:
        0 22px 38px rgba(78, 48, 24, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}