/**
 * Fotomania, "Editorial + Analog Warmth" signature layer.
 * Reusable, dependency-light building blocks for the refined design direction:
 *   1. subtle film grain over the whole page (analog texture)
 *   2. .fm-print-frame , turn any image into a physical print / polaroid
 *   3. .fm-lightleak    , a warm red light-leak glow on a highlight surface
 *   4. .fm-dropcap      , editorial drop cap on the first paragraph
 * All CSS/SVG only (no libs), all respect prefers-reduced-motion.
 */

/* ── 1. Film grain · a static analog texture film over everything ── */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 120;
    pointer-events: none;
    opacity: 0.09;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='fmn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fmn)'/%3E%3C/svg%3E");
    background-size: 140px 140px;
}
@media (prefers-reduced-motion: reduce) { body::after { opacity: 0.035; } }

/* ── 2. Print / polaroid frame · a physical photograph resting on the page ── */
.fm-print-frame {
    background: #fff;
    padding: 10px 10px 30px;
    border-radius: 3px;
    box-shadow:
        0 1px 1px rgba(30, 20, 16, 0.10),
        0 10px 26px rgba(30, 20, 16, 0.14),
        0 30px 60px rgba(30, 20, 16, 0.10);
    transform: rotate(-1.1deg);
    transition: transform var(--standard, .3s) var(--ease-out, ease), box-shadow var(--standard, .3s) var(--ease-out, ease);
}
.fm-print-frame > img,
.fm-print-frame > .ph { border-radius: 1px; display: block; }
@media (hover: hover) and (pointer: fine) {
    .fm-print-frame:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 2px 2px rgba(30,20,16,.12), 0 18px 40px rgba(30,20,16,.20); }
}

/* ── 3. Light leak · a warm red analog glow bleeding from a corner ── */
.fm-lightleak { position: relative; isolation: isolate; }
.fm-lightleak::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(70% 90% at 104% -4%, oklch(0.68 0.21 45 / 0.55), oklch(0.60 0.22 30 / 0.22) 34%, transparent 62%),
        radial-gradient(50% 60% at 0% 100%, oklch(0.55 0.20 25 / 0.20), transparent 55%);
    mix-blend-mode: screen;
}

/* ── 4. Editorial drop cap · the first letter as a magazine flourish ── */
.fm-dropcap::first-letter {
    float: left;
    font-family: "Fraunces", Georgia, serif;
    font-weight: 500;
    font-size: 3.4em;
    line-height: 0.82;
    padding: 6px 12px 0 0;
    color: var(--red, #cc272e);
}