/* ==========================================================
   elseannadijkstra.nl
   Placeholder in gothic / middeleeuwse stijl:
   een donkere, versleten boekkaft met zilveren versiering
   en alleen de naam "Else Anna Dijkstra" in zilver.
   ========================================================== */

:root {
    /* Zilver (van bijna wit via koel grijs naar diep schaduwzilver) */
    --zilver-0: #ffffff;
    --zilver-1: #eef3f8;
    --zilver-2: #cfd8e2;
    --zilver-3: #a7b2bf;
    --zilver-4: #7e8a98;
    --zilver-5: #5a646f;
    --zilver-6: #343b43;

    /* Leder / oud perkament in het donker */
    --ink-0: #050405;
    --ink-1: #0b0809;
    --ink-2: #161110;
    --ink-3: #241b19;

    /* Gloedkleuren (rgb-triples, zodat de alpha vrij te kiezen is) */
    --koel: 160, 185, 220;
    --vuur: 156, 108, 62;

    --ease: cubic-bezier(.22, .61, .36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html,
body { height: 100%; }

body {
    margin: 0;
    background: var(--ink-0);
    color: var(--zilver-2);
    font-family: "Cinzel Decorative", "Times New Roman", Georgia, serif;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Fijne korrel over ALLES heen: het geheel lijkt zo een foto van oud leer */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: .07;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 240px 240px;
}

/* ----------------------------------------------------------
   De kaft
   ---------------------------------------------------------- */
.book {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #030303;
    box-shadow:
        inset 0 0 clamp(60px, 12vmin, 170px) rgba(0, 0, 0, .95),
        inset 0 0 0 clamp(6px, 1.4vmin, 18px) rgba(0, 0, 0, .8);
}

/* Leder: warme vlekken, koele schaduw en een bijna zwart hart */
.leather {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(58% 46% at 20% 16%, rgba(96, 68, 52, .30), transparent 62%),
        radial-gradient(52% 44% at 82% 86%, rgba(72, 54, 62, .26), transparent 64%),
        radial-gradient(40% 34% at 50% 50%, rgba(88, 74, 60, .16), transparent 70%),
        radial-gradient(128% 104% at 50% 48%, var(--ink-3) 0%, var(--ink-2) 26%, var(--ink-1) 58%, var(--ink-0) 84%, #000 100%);
}

/* Boekrug aan de linkerkant: een ingedrukte lederen rand met fijne nerf */
.book::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: clamp(16px, 4.4vmin, 54px);
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, .92) 0%,
            rgba(38, 28, 24, .55) 22%,
            rgba(120, 96, 74, .10) 48%,
            rgba(0, 0, 0, .55) 76%,
            rgba(0, 0, 0, .85) 100%);
    box-shadow:
        1px 0 0 rgba(207, 216, 226, .10),
        3px 0 12px rgba(0, 0, 0, .75);
    opacity: .85;
}

/* Kaarsgloed: koele zilverwaas + warme gloed, allebei heel traag ademend */
.glow {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    border-radius: 50%;
}

.glow--cool {
    width: min(118vmin, 1180px);
    height: min(84vmin, 800px);
    background: radial-gradient(closest-side, rgba(var(--koel), .20), rgba(var(--koel), .07) 46%, transparent 74%);
    filter: blur(4px);
    animation: breathe 8.5s var(--ease) infinite;
}

.glow--ember {
    width: min(84vmin, 780px);
    height: min(58vmin, 520px);
    background: radial-gradient(closest-side, rgba(var(--vuur), .18), rgba(var(--vuur), .06) 44%, transparent 72%);
    filter: blur(26px);
    animation: breathe 11.5s var(--ease) infinite reverse;
}

/* Stofdeeltjes die langzaam opstijgen in het kaarslicht */
.motes {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.motes span {
    position: absolute;
    bottom: -6%;
    width: 2.4px;
    height: 2.4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(238, 243, 248, .95), rgba(238, 243, 248, 0) 70%);
    opacity: 0;
    animation: drift linear infinite;
}

.motes span:nth-child(1)  { left: 8%;  animation-duration: 26s; animation-delay: 0s;  }
.motes span:nth-child(2)  { left: 17%; animation-duration: 34s; animation-delay: 4s;  width: 1.6px; height: 1.6px; }
.motes span:nth-child(3)  { left: 26%; animation-duration: 22s; animation-delay: 9s;  }
.motes span:nth-child(4)  { left: 36%; animation-duration: 38s; animation-delay: 2s;  width: 3.2px; height: 3.2px; }
.motes span:nth-child(5)  { left: 44%; animation-duration: 29s; animation-delay: 13s; }
.motes span:nth-child(6)  { left: 53%; animation-duration: 24s; animation-delay: 6s;  width: 1.5px; height: 1.5px; }
.motes span:nth-child(7)  { left: 62%; animation-duration: 33s; animation-delay: 16s; }
.motes span:nth-child(8)  { left: 71%; animation-duration: 21s; animation-delay: 8s;  width: 1.8px; height: 1.8px; }
.motes span:nth-child(9)  { left: 79%; animation-duration: 36s; animation-delay: 19s; }
.motes span:nth-child(10) { left: 86%; animation-duration: 27s; animation-delay: 11s; width: 3px;   height: 3px; }
.motes span:nth-child(11) { left: 93%; animation-duration: 31s; animation-delay: 23s; }
.motes span:nth-child(12) { left: 12%; animation-duration: 40s; animation-delay: 27s; width: 1.4px; height: 1.4px; }

/* Grove korrel van het leer (onder de tekst) */
.grain {
    position: absolute;
    inset: 0;
    opacity: .18;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 300px 300px;
}

/* Vignette: het midden licht, de randen bijna zwart */
.vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(126% 100% at 50% 47%, transparent 38%, rgba(0, 0, 0, .48) 74%, rgba(0, 0, 0, .9) 100%);
}

/* ----------------------------------------------------------
   Zilveren kaft-versiering
   ---------------------------------------------------------- */
.frame {
    --orn: clamp(30px, 8vmin, 86px);

    position: fixed;
    inset: clamp(18px, 5.4vmin, 60px);
    z-index: 2;
    pointer-events: none;
    color: var(--zilver-2);
    border: 1px solid rgba(207, 216, 226, .34);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .7),
        inset 0 0 0 1px rgba(255, 255, 255, .05),
        inset 0 0 clamp(24px, 6vmin, 70px) rgba(0, 0, 0, .6),
        0 0 clamp(10px, 3vmin, 34px) rgba(0, 0, 0, .55);
}

/* Tweede, fijne binnlijn - zoals bij een oud missaal */
.frame::before {
    content: "";
    position: absolute;
    inset: clamp(5px, 1.1vmin, 11px);
    border: 1px solid rgba(207, 216, 226, .19);
    box-shadow: inset 0 0 clamp(18px, 4vmin, 46px) rgba(0, 0, 0, .55);
}

.corner,
.clasp {
    position: absolute;
    color: var(--zilver-2);
    opacity: .78;
    filter: drop-shadow(0 0 7px rgba(var(--koel), .22)) drop-shadow(0 1px 1px rgba(0, 0, 0, .8));
    animation: glint 9s var(--ease) infinite;
}

.corner {
    width: var(--orn);
    height: var(--orn);
}

/* Het hoekpunt van het ornament is (12,12) van 120 -> precies 10% naar buiten */
.corner--tl { top: calc(var(--orn) * -.1);    left: calc(var(--orn) * -.1);  transform: rotate(0deg); }
.corner--tr { top: calc(var(--orn) * -.1);    right: calc(var(--orn) * -.1); transform: rotate(90deg); }
.corner--br { bottom: calc(var(--orn) * -.1); right: calc(var(--orn) * -.1); transform: rotate(180deg); }
.corner--bl { bottom: calc(var(--orn) * -.1); left: calc(var(--orn) * -.1);  transform: rotate(270deg); }

.corner--tr { animation-delay: 2.2s; }
.corner--br { animation-delay: 4.4s; }
.corner--bl { animation-delay: 6.6s; }

.clasp {
    width: clamp(56px, 15vmin, 150px);
    height: auto;
    aspect-ratio: 120 / 44;
}

.clasp--top    { top: 0;    left: 50%; transform: translate(-50%, -50%); }
.clasp--bottom { bottom: 0; left: 50%; transform: translate(-50%, 50%) rotate(180deg); animation-delay: 3.3s; }

/* ----------------------------------------------------------
   De titel op de kaft
   ---------------------------------------------------------- */
.cover {
    position: fixed;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    padding: clamp(40px, 12vmin, 150px) clamp(22px, 9vw, 130px);
}

.plaque {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(12px, 3vmin, 34px);
    animation: reveal 1.8s var(--ease) both;
}

.name {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 2vmin, 22px);
    text-align: center;

    /* Eén lettertype en één grootte voor de hele naam, in gewone letters. */
    font-family: "MedievalSharp", "Uncial Antiqua", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 8.6vw, 6.2rem);
    line-height: 1.16;
    letter-spacing: .01em;

    /* GEGOTEN METAAL.
       De letters hebben een echt profiel gekregen in plaats van een platte schaduw:
         - een dunne lichte rand linksboven  -> daar valt het licht op de bovenkant
         - een doorlopende metalen zijwand   -> de "dikte" van het gegoten zilver
         - een kleine contactschaduw         -> waar het metaal het leer raakt
         - een verschoven, zachte slagschaduw -> het ligt er echt op, niet erin
       Alles in em, zodat het profiel meeschaalt met de grootte van de letters.
       De tinten zijn bewust donker gehouden (antiek zilver / tin): alleen met
       veel donkere banden blijft het metaal zichtbaar in plaats van een wit vlak. */
    text-shadow:
        -0.012em -0.012em 0.005em rgba(255, 255, 255, .42),
        -0.022em -0.022em 0.010em rgba(255, 255, 255, .15),
        0 0.012em 0 #525d69,
        0 0.024em 0 #4a5560,
        0 0.036em 0 #424c57,
        0 0.048em 0 #3a444e,
        0 0.060em 0 #333c46,
        0 0.072em 0 #2c353e,
        0 0.084em 0 #262e36,
        0 0.096em 0 #20272f,
        0 0.108em 0 #1b2128,
        0 0.120em 0 #161b21,
        0 0.132em 0 #12171c,
        0 0.144em 0 #0e1217,
        0 0.156em 0 #0a0d11,
        0 0.170em 0.02em rgba(0, 0, 0, .95),
        0.05em 0.26em 0.14em rgba(0, 0, 0, .62),
        0.09em 0.48em 0.50em rgba(0, 0, 0, .45);

    /* Het gesmolten oppervlak zelf (SVG-filter) plus de gloed die het zilver
       op het donkere leer legt. */
    filter:
        url(#gesmolten)
        drop-shadow(0 0 clamp(10px, 2.6vmin, 30px) rgba(var(--koel), .24));
}

.line {
    display: block;
    position: relative;
    max-width: min(94vw, 74rem);
    /* Past de naam niet op één regel, dan breekt hij netjes in twee gelijke
       regels - in hetzelfde lettertype en dezelfde grootte. */
    white-space: normal;
    text-wrap: balance;
}

/* VLOEIBAAR ZILVER - maar dan antiek, geen spiegelend wit blad.
   Vier lagen over elkaar:
     1-3. losse lichtplekken (radial) die langzaam door de letters trekken
          -> de reflecties in het vloeibare metaal;
     4.   scherpe verticale banden met harde overgangen, overwegend donker
          -> zo weerkaatst gepolijst metaal een omgeving met randen.
   De lichtste tinten zijn hier geen zuiver wit meer, en er staan veel meer
   donkere banden in. Daardoor blijft het metaal-effect juist beter zichtbaar. */
.silver {
    background-image:
        radial-gradient(32% 24% at 22% 14%,
            rgba(255, 255, 255, .62), rgba(255, 255, 255, .26) 34%, rgba(255, 255, 255, 0) 68%),
        radial-gradient(26% 20% at 78% 58%,
            rgba(255, 255, 255, .48), rgba(255, 255, 255, .18) 38%, rgba(255, 255, 255, 0) 70%),
        radial-gradient(18% 14% at 50% 34%,
            rgba(255, 255, 255, .40), rgba(255, 255, 255, 0) 72%),
        linear-gradient(174deg,
            #e9eff4 0%,
            #a9b5c1 4%,
            #5b6874 10%,
            #ccd6e0 15%,
            #7c8996 21%,
            #434e59 28%,
            #b2bec9 34%,
            #e4ebf1 40%,
            #6a7784 47%,
            #3b4550 55%,
            #a7b3be 62%,
            #dbe3eb 68%,
            #616e7a 76%,
            #37414b 83%,
            #b7c2cc 90%,
            #ecf1f6 96%,
            #525e6a 100%);
    background-size: 64% 132%, 58% 140%, 46% 122%, 100% 100%;
    background-repeat: no-repeat;
    background-position: -4% 0%, 102% 0%, 28% 0%, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* een ragfijn licht randje: de meniscus van het gestolde metaal */
    -webkit-text-stroke: .55px rgba(255, 255, 255, .22);
    animation: vloeien 18s ease-in-out infinite;
}

/* Langs het zilver glijdt heel af en toe een lichte glans - precies alsof er
   licht over vloeibaar metaal strijkt. */
.line::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background-image: linear-gradient(104deg,
        rgba(255, 255, 255, 0) 38%,
        rgba(255, 255, 255, .70) 46%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, .70) 54%,
        rgba(255, 255, 255, 0) 62%);
    background-size: 280% 100%;
    background-repeat: no-repeat;
    background-position: 140% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    mix-blend-mode: screen;
    pointer-events: none;
    animation: sheen 14s var(--ease) infinite;
}

/* Zilveren scheidingslijn met een kleine ruit in het midden */
.rule {
    display: block;
    position: relative;
    width: min(56vw, 420px);
    height: 12px;
}

.rule::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(207, 216, 226, 0) 0%,
        rgba(207, 216, 226, .55) 16%,
        rgba(255, 255, 255, .85) 50%,
        rgba(207, 216, 226, .55) 84%,
        rgba(207, 216, 226, 0) 100%);
}

.rule::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: linear-gradient(135deg, #ffffff, #9aa5b2 55%, #ffffff 100%);
    box-shadow: 0 0 10px rgba(var(--koel), .45), 0 1px 2px rgba(0, 0, 0, .8);
}

.defs { position: absolute; }

/* ----------------------------------------------------------
   Beweging
   ---------------------------------------------------------- */
@keyframes breathe {
    0%, 100% { opacity: .78; transform: translate(-50%, -50%) scale(1); }
    38%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.045); }
    62%      { opacity: .86; transform: translate(-50%, -50%) scale(.985); }
}

@keyframes glint {
    0%, 100% { opacity: .68; }
    45%      { opacity: .9; }
    70%      { opacity: .74; }
}

@keyframes drift {
    0%   { opacity: 0;   transform: translate3d(0, 0, 0) scale(.6); }
    12%  { opacity: .55; }
    70%  { opacity: .35; }
    100% { opacity: 0;   transform: translate3d(2.5vw, -108vh, 0) scale(1.15); }
}

@keyframes reveal {
    from { opacity: 0; transform: scale(.97); filter: blur(7px); }
    to   { opacity: 1; transform: scale(1);   filter: blur(0); }
}

@keyframes sheen {
    0%   { background-position: 140% 0; }
    46%  { background-position: -140% 0; }
    100% { background-position: -140% 0; }
}

/* De lichtplekken trekken heel langzaam door de letters: vloeibaar metaal */
@keyframes vloeien {
    0%,
    100% { background-position: -4% 0%, 102% 0%, 28% 0%, 0 0; }
    33%  { background-position: 12% 5%, 84% 0%, 40% 0%, 0 0; }
    66%  { background-position: -14% 0%, 96% 7%, 20% 0%, 0 0; }
}

/* ----------------------------------------------------------
   Minder beweging? Dan staat alles stil.
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .glow,
    .motes span,
    .corner,
    .clasp,
    .silver,
    .line::after { animation: none !important; }

    .motes { display: none; }
    .plaque { animation: none; }
}

/* Korte schermen (bv. telefoon in liggende stand) */
@media (max-height: 520px) {
    .name   { font-size: clamp(1.1rem, 6.6vmin, 3rem); }
    .plaque { gap: 8px; }
}