/*
 * The newsletter invitation (inc/newsletter-pop.php, coc-pop.js). Always the night voice of the home, in light and
 * dark: the latest chronicle as a dark window that a candle lights up (the pointer carries a lantern over it), a wax
 * seal on the seam, the letter-paper side with the form. On a phone it is a sheet rising from the bottom with the
 * picture as a band. Success: an envelope closes and the seal is pressed onto it.
 */
.coc-pop {
    --pop-ink: #f2efe9;
    --pop-muted: rgba(242, 239, 233, .66);
    --pop-line: rgba(255, 255, 255, .14);
    --pop-edge: rgba(255, 255, 255, .42);
    --pop-amber: #f2b45a;
    --pop-err: #ff9b8f;
    width: min(900px, calc(100% - 2rem));
    max-width: none;
    max-height: min(92dvh, 680px);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    background: #0c0c0f;
    color: var(--pop-ink);
    box-shadow: 0 60px 140px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(242, 180, 90, .06);
}
.coc-pop::backdrop { background: radial-gradient(ellipse at 50% 45%, rgba(10, 8, 6, .55), rgba(4, 4, 6, .88)); -webkit-backdrop-filter: blur(6px) saturate(.8); backdrop-filter: blur(6px) saturate(.8); }
.coc-pop__in { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: min(600px, 88dvh); max-height: inherit; outline: none; }

/* ---------------------------------------------------------------- the night window */
.coc-pop__night { position: relative; z-index: 2; overflow: visible; isolation: isolate; background: #050506; } /* above the paper: the seal rides the seam */
/* The frame clips the picture (its slow drift must not spill onto the paper); the seal stays outside it. */
.coc-pop__frame { position: absolute; inset: 0; overflow: hidden; border-radius: 19px 0 0 19px; }
@property --lx { syntax: '<percentage>'; inherits: true; initial-value: 56%; }
@property --ly { syntax: '<percentage>'; inherits: true; initial-value: 62%; }
.coc-pop__frame > .coc-pop__img, .coc-pop__frame::after, .coc-pop__dark, .coc-pop__lamp, .coc-pop__fade { position: absolute; inset: 0; width: 100%; height: 100%; }
.coc-pop__frame > .coc-pop__img { object-fit: cover; filter: saturate(.9) contrast(1.08); }
.coc-pop__frame::after { /* the dark pooling at the foot, where the caption sits */
    content: "";
    z-index: 1;
    background: linear-gradient(180deg, rgba(5, 5, 6, .2) 0%, rgba(5, 5, 6, 0) 35%, rgba(5, 5, 6, .55) 70%, rgba(5, 5, 6, .92) 100%), radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0, 0, 0, .55) 100%);
}
/* The lantern: the picture waits in the dark and only the circle of light shows it. The pointer carries it; with no
   pointer (phones) it wanders slowly over the scene by itself. */
.coc-pop__dark {
    z-index: 2;
    background: radial-gradient(circle clamp(130px, 15vw, 210px) at var(--lx) var(--ly), rgba(4, 3, 2, 0) 0%, rgba(4, 3, 2, .12) 38%, rgba(4, 3, 2, .82) 100%);
    pointer-events: none;
}
.coc-pop__lamp { /* the warm light itself */
    z-index: 3;
    background: radial-gradient(circle clamp(120px, 13vw, 190px) at var(--lx) var(--ly), rgba(255, 190, 105, .55), rgba(255, 190, 105, .12) 55%, rgba(255, 190, 105, 0) 100%);
    mix-blend-mode: overlay;
    pointer-events: none;
}
.coc-pop__fade { z-index: 4; background: #000; opacity: 0; pointer-events: none; } /* the dark before the candle catches */
.coc-pop__latest {
    position: absolute;
    z-index: 5;
    left: clamp(1.2rem, 3vw, 1.8rem);
    right: 3.5rem;
    bottom: clamp(1.2rem, 3vw, 1.8rem);
    margin: 0;
    font-family: var(--coc-serif);
    font-size: 1.25rem;
    line-height: 1.2;
    color: #fff;
    text-wrap: balance;
}
.coc-pop__latest span { display: block; margin-bottom: .45rem; font: 600 .66rem/1 var(--coc-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--pop-amber); }

/* The wax seal on the seam between picture and paper. */
.coc-pop__seal {
    position: absolute;
    z-index: 5;
    top: 50%;
    right: -40px;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    overflow: hidden;
    border-radius: 50%;
    transform: translateY(-50%) rotate(calc(-9deg + var(--tilt, 0deg)));
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55));
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.coc-pop__seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.coc-pop__seal img { position: relative; width: 54px; height: 54px; mix-blend-mode: multiply; opacity: .6; border-radius: 50%; }
.coc-pop__seal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 244, 214, .75) 50%, transparent 65%) -150% 0 / 220% 100% no-repeat; mix-blend-mode: overlay; }

/* ---------------------------------------------------------------- the letter paper */
.coc-pop__paper { position: relative; z-index: 1; overflow: auto; padding: clamp(1.6rem, 4vw, 3rem) clamp(1.4rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2.2rem) clamp(2.6rem, 5vw, 3.6rem); }
.coc-pop__x { position: absolute; z-index: 6; top: .8rem; right: .8rem; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--pop-muted); cursor: pointer; transition: color .2s ease, background-color .2s ease; }
.coc-pop__x:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.coc-pop__x svg { width: 20px; height: 20px; }
.coc-pop__kicker { margin: 0 0 .9rem; padding-right: 2.5rem; font: 600 .68rem/1.4 var(--coc-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--pop-amber); }
.coc-pop__t { margin: 0 0 .7rem; font-family: var(--coc-serif); font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); font-weight: 500; line-height: 1.04; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.coc-pop__d { margin: 0 0 1.4rem; max-width: 36ch; font-size: .98rem; line-height: 1.55; color: var(--pop-muted); }

.coc-pop__f { margin: 0 0 .9rem; }
.coc-pop__f label { display: block; margin-bottom: .4rem; font: 600 .7rem/1.2 var(--coc-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--pop-muted); }
.coc-pop__f input {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: .7rem 1rem;
    border: 1px solid var(--pop-edge);
    border-radius: 10px;
    background: rgba(255, 255, 255, .05) linear-gradient(var(--pop-amber), var(--pop-amber)) left bottom / 0% 2px no-repeat;
    color: #fff;
    font: 400 1rem/1.4 var(--coc-sans); /* 16px: no zoom on iOS */
    transition: border-color .2s ease, background-size .35s cubic-bezier(.2, .7, .2, 1), background-color .2s ease;
}
.coc-pop__f input:hover { border-color: rgba(255, 255, 255, .7); }
.coc-pop__f input:focus { outline: 2px solid transparent; border-color: #fff; background-size: 100% 2px; background-color: rgba(255, 255, 255, .08); }
.coc-pop__f input[aria-invalid="true"], .coc-pop__ok:has([aria-invalid="true"]) input { border-color: var(--pop-err); }
.coc-pop__e { display: block; margin-top: .35rem; font-size: .84rem; font-weight: 500; line-height: 1.35; color: var(--pop-err); }
.coc-pop__e:empty { margin: 0; }
.coc-pop__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.coc-pop__ok { margin: .2rem 0 1.1rem; }
.coc-pop__ok label { display: flex; align-items: flex-start; gap: .65rem; min-height: 44px; font-size: .9rem; line-height: 1.45; color: rgba(242, 239, 233, .82); cursor: pointer; }
.coc-pop__ok input { flex: none; width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--pop-amber); cursor: pointer; }
.coc-pop__ok a { color: #fff; text-decoration: underline; text-decoration-color: var(--pop-amber); text-underline-offset: .15em; }

.coc-pop__go {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    width: 100%;
    min-height: 54px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: #f2efe9;
    color: #141417;
    font: 600 .95rem/1 var(--coc-sans);
    letter-spacing: .03em;
    cursor: pointer;
    transition: background-color .25s ease, transform .15s ease;
}
.coc-pop__go svg { width: 18px; height: 18px; transition: transform .25s ease; }
.coc-pop__go:hover { background: var(--pop-amber); }
.coc-pop__go:hover svg { transform: translateX(3px); }
.coc-pop__go:active { transform: scale(.985); }
.coc-pop__go:disabled { cursor: progress; }
.coc-pop__go.is-busy::after { /* a slow shimmer while the letter goes out */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%) -100% 0 / 60% 100% no-repeat;
    animation: cocPopShimmer 1.1s ease-in-out infinite;
}
@keyframes cocPopShimmer { to { background-position: 220% 0; } }
.coc-pop__err { margin: .7rem 0 0; font-size: .88rem; font-weight: 500; color: var(--pop-err); }
.coc-pop__err:empty { margin: 0; }
.coc-pop__fine { margin: .9rem 0 0; font-size: .74rem; line-height: 1.5; color: rgba(242, 239, 233, .55); }
.coc-pop__later { display: block; min-height: 44px; margin: .6rem auto 0; padding: 0 1rem; border: 0; background: none; color: var(--pop-muted); font: 500 .88rem/1 var(--coc-sans); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: .2em; cursor: pointer; }
.coc-pop__later:hover { color: #fff; }
.coc-pop :is(button, input, a, [tabindex]):focus-visible { outline: 2px solid var(--pop-amber); outline-offset: 3px; }

/* ---------------------------------------------------------------- sealed */
.coc-pop__done { position: relative; display: grid; justify-items: center; align-content: center; min-height: 100%; padding-top: 1rem; text-align: center; outline: none; }
.coc-pop__done[hidden] { display: none; }
.coc-pop__mail { position: relative; width: min(240px, 70%); margin-bottom: 1.6rem; }
.coc-pop__letter { display: block; width: 100%; height: auto; overflow: visible; }
.coc-pop__env { fill: #e8dcc7; }
.coc-pop__fold { fill: none; stroke: rgba(80, 60, 30, .25); stroke-width: 1.5; }
.coc-pop__flap { fill: #d9c9ad; stroke: rgba(80, 60, 30, .25); stroke-width: 1.2; transform-origin: 110px 26px; transform-box: view-box; }
.coc-pop__mail .coc-pop__seal.is-stamp { top: 61%; right: 50%; bottom: auto; width: 64px; height: 64px; transform: translate(50%, -50%) rotate(-8deg); } /* the flap's tip */
.coc-pop__mail .coc-pop__seal.is-stamp img { width: 36px; height: 36px; }
.coc-pop__done .coc-pop__t { margin-bottom: .6rem; }
.coc-pop__done .coc-pop__d { margin-inline: auto; }

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: no-preference) {
    /* The window opens like a shutter while the room darkens. */
    .coc-pop[open] { animation: cocPopIn .8s cubic-bezier(.16, 1, .3, 1) both; }
    .coc-pop[open]::backdrop { animation: cocPopDim .7s ease both; }
    @keyframes cocPopIn { from { transform: translateY(26px) scale(.97); clip-path: inset(6% 4% round 28px); opacity: 0; } to { clip-path: inset(0 round 20px); } }
    @keyframes cocPopDim { from { opacity: 0; } }
    /* The picture comes out of the dark, then drifts; the candle breathes. */
    .coc-pop[open] .coc-pop__fade { animation: cocPopCatch 2.4s linear .2s both; }
    @keyframes cocPopCatch { 0% { opacity: 1; } 18% { opacity: .55; } 24% { opacity: .9; } 38% { opacity: .35; } 46% { opacity: .6; } 62% { opacity: .15; } 70% { opacity: .3; } 100% { opacity: 0; } }
    .coc-pop[open] .coc-pop__frame > .coc-pop__img { animation: cocPopDrift 16s cubic-bezier(.2, .7, .3, 1) both; }
    @keyframes cocPopDrift { from { transform: scale(1.18) translate(2%, 1.5%); } to { transform: scale(1.02); } }
    .coc-pop__night:not(.is-held) { animation: cocPopWander 14s ease-in-out 2.6s infinite alternate; }
    @keyframes cocPopWander { 0% { --lx: 56%; --ly: 62%; } 30% { --lx: 30%; --ly: 48%; } 60% { --lx: 62%; --ly: 22%; } 100% { --lx: 72%; --ly: 58%; } }
    .coc-pop__lamp { animation: cocPopFlicker 2.8s ease-in-out infinite alternate; }
    @keyframes cocPopFlicker { 0%, 100% { opacity: .85; } 35% { opacity: 1; } 55% { opacity: .72; } 80% { opacity: .95; } }
    .coc-pop[open] .coc-pop__seal::after { animation: cocPopGlint 6s ease-in-out 1.8s infinite; }
    @keyframes cocPopGlint { 0%, 70% { background-position: -150% 0; } 85%, 100% { background-position: 250% 0; } }
    /* The seal lands, the words follow. */
    .coc-pop[open] .coc-pop__night > .coc-pop__seal { animation: cocPopSeal .7s cubic-bezier(.3, 1.5, .5, 1) .55s both; }
    @keyframes cocPopSeal { from { transform: translateY(-50%) scale(1.8) rotate(-30deg); opacity: 0; } }
    .coc-pop[open] .coc-pop__ask > * { animation: cocPopWord .7s cubic-bezier(.2, .8, .2, 1) both; }
    .coc-pop[open] .coc-pop__ask > :nth-child(2) { animation-delay: .1s; }
    .coc-pop[open] .coc-pop__ask > :nth-child(3) { animation-delay: .18s; }
    .coc-pop[open] .coc-pop__ask > :nth-child(n+4) { animation-delay: .26s; }
    @keyframes cocPopWord { from { transform: translateY(14px); opacity: 0; } }
    /* Sealed: the flap closes, then the seal is pressed on. */
    .coc-pop.is-sealed .coc-pop__flap { animation: cocPopFlap .7s cubic-bezier(.5, 0, .2, 1) .15s both; }
    @keyframes cocPopFlap { from { transform: rotateX(180deg); } }
    .coc-pop.is-sealed .coc-pop__seal.is-stamp { animation: cocPopStamp .55s cubic-bezier(.3, 1.6, .5, 1) .8s both; }
    @keyframes cocPopStamp { from { transform: translate(50%, -50%) scale(2.2) rotate(-40deg); opacity: 0; } 60% { opacity: 1; } }
    .coc-pop.is-sealed .coc-pop__done > :is(h2, p, button) { animation: cocPopWord .6s ease 1.15s both; }
}

/* ---------------------------------------------------------------- phones: a sheet from the bottom */
@media (max-width: 767.98px) {
    .coc-pop { width: 100%; max-height: 94dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; border-bottom: 0; }
    .coc-pop__in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-height: 0; max-height: 94dvh; overflow: auto; } /* the whole sheet scrolls, so nothing on the band is clipped */
    .coc-pop { view-transition-name: coc-pop; } /* unfolding the form grows the sheet instead of cutting to it */
    .coc-pop__night { height: 112px; }
    .coc-pop__frame { border-radius: 21px 21px 0 0; }
    /* "The latest" + at most two lines of title; the padding keeps the clamp from clipping the Ú's accent. */
    .coc-pop__latest { right: 6rem; bottom: .85rem; padding-top: .25em; font-size: .98rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .coc-pop__seal { top: auto; right: 1.2rem; bottom: -38px; width: 80px; height: 80px; transform: rotate(-9deg); }
    .coc-pop__seal img { width: 44px; height: 44px; }
    .coc-pop__paper { overflow: visible; padding: 1.7rem 16px calc(1rem + env(safe-area-inset-bottom)); }
    .coc-pop__x { top: .6rem; right: .6rem; color: #fff; background: rgba(0, 0, 0, .45); } /* on the picture band */
    .coc-pop__kicker { padding-right: 4.5rem; }
    .coc-pop__t { font-size: 1.5rem; }
    /* It opens small (under half the screen): the picture, the promise and one button beside "not now". The first
       press unfolds the form; then the promise steps aside to give the fields room. */
    .coc-pop.is-peek .coc-pop__ask { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1rem; }
    .coc-pop.is-peek .coc-pop__ask > :not(.coc-pop__form, .coc-pop__later) { flex: 0 0 100%; }
    .coc-pop.is-peek .coc-pop__form { display: contents; }
    .coc-pop.is-peek :is(.coc-pop__f, .coc-pop__ok, .coc-pop__err, .coc-pop__fine) { display: none; }
    .coc-pop.is-peek .coc-pop__go { flex: 1 1 auto; width: auto; }
    .coc-pop.is-peek .coc-pop__later { flex: none; margin: 0; }
    .coc-pop.is-peek .coc-pop__d { margin-bottom: 1.1rem; font-size: .92rem; }
    .coc-pop:not(.is-peek) .coc-pop__ask > .coc-pop__d { display: none; }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
    .coc-pop[open] { animation: cocPopUp .6s cubic-bezier(.16, 1, .3, 1) both; }
    @keyframes cocPopUp { from { transform: translateY(100%); } }
    .coc-pop[open] .coc-pop__night > .coc-pop__seal { animation-name: cocPopSealPhone; }
    @keyframes cocPopSealPhone { from { transform: scale(1.8) rotate(-30deg); opacity: 0; } }
}
@media (forced-colors: active) {
    .coc-pop__seal, .coc-pop__lamp, .coc-pop__dark { forced-color-adjust: none; }
    .coc-pop__frame > .coc-pop__img { filter: none; }
}