/* ==========================================================
   Showstoppers
   ========================================================== */

/* ==========================================================
   1. INK BLEED
   The image does not fade in. A sheet of paper lies over it
   and soaks away, its edge displaced by turbulence so it
   creeps rather than wipes.
   ========================================================== */

.ink{position:relative;overflow:hidden;isolation:isolate}
.ink > img,
.ink > picture{display:block;width:100%;height:auto}

.ink::before{                       /* the paper still covering the plate */
  content:"";
  position:absolute;
  inset:-14%;
  z-index:3;
  background:var(--paper-light,#fbf8f1);
  filter:url(#ink-edge);
  transform:translateY(0);
  transition:transform 1.9s cubic-bezier(.32,.06,.24,1);
}
.ink::after{                        /* the damp fringe that runs ahead of it */
  content:"";
  position:absolute;
  inset:-14%;
  z-index:2;
  background:linear-gradient(180deg,
    rgba(122,84,48,.38) 0%, rgba(122,84,48,.12) 26%, transparent 52%);
  filter:url(#ink-edge);
  opacity:.9;
  transform:translateY(0);
  transition:transform 2.1s cubic-bezier(.32,.06,.24,1), opacity 1.5s ease .7s;
}
.ink.soaked::before{transform:translateY(-118%)}
.ink.soaked::after{transform:translateY(-124%);opacity:0}

/* bleeding sideways instead, for tall images */
.ink.from-left::before,.ink.from-left::after{transform:translateX(0)}
.ink.from-left.soaked::before{transform:translateX(-118%)}
.ink.from-left.soaked::after{transform:translateX(-124%);opacity:0}
.ink.from-left::after{
  background:linear-gradient(90deg,
    rgba(122,84,48,.38) 0%, rgba(122,84,48,.12) 26%, transparent 52%);
}

/* ==========================================================
   2. THE CODEX
   Leaves that turn. Real 3D, both sides printed, the paper
   catching light as it lifts and falls.
   ========================================================== */

.codex-wrap{
  display:grid;
  justify-items:center;
  gap:22px;
  margin:0;
}
.codex{
  position:relative;
  width:min(760px,100%);
  aspect-ratio:3/2;
  perspective:2200px;
  perspective-origin:50% 46%;
}
/* the block of pages beneath, so the book has thickness */
.codex::before,
.codex::after{
  content:"";
  position:absolute;
  top:2%;bottom:2%;
  width:49%;
  background:linear-gradient(180deg,#f3ebda,#e2d6bf);
  box-shadow:0 18px 40px rgba(58,38,20,.3);
}
.codex::before{left:0;border-radius:5px 0 0 5px}
.codex::after{right:0;border-radius:0 5px 5px 0}

.leaf{
  position:absolute;
  top:0;bottom:0;
  right:0;
  width:50%;
  transform-style:preserve-3d;
  transform-origin:left center;
  transform:rotateY(0deg);
  transition:transform 1.15s cubic-bezier(.3,.05,.2,1);
  z-index:var(--z,1);
}
.leaf.turned{transform:rotateY(-176deg)}
.leaf .face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  overflow:hidden;
  background:var(--paper-light,#fbf8f1);
  box-shadow:0 0 22px rgba(60,40,22,.18);
}
.leaf .recto{transform:rotateY(0deg)}
.leaf .verso{transform:rotateY(180deg)}
.leaf img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.08) contrast(1.05) hue-rotate(-4deg)}
/* the gutter shadow, deepest at the spine */
.leaf .face::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(58,38,20,.34),transparent 22%);
}
.leaf .verso::before{
  background:linear-gradient(270deg,rgba(58,38,20,.34),transparent 22%);
}
/* light raking across the leaf as it lifts */
.leaf .face::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(100deg,rgba(255,246,228,0),rgba(255,246,228,.5) 46%,rgba(255,246,228,0));
  opacity:0;
  transition:opacity .5s ease;
}
.leaf.turning .face::after{opacity:1}

.leaf figcaption{
  position:absolute;
  inset:auto 0 0 0;
  padding:26px 18px 14px;
  background:linear-gradient(180deg,rgba(38,25,16,0),rgba(38,25,16,.76));
  color:#f6ecdd;
  font:400 .72rem/1.4 var(--sans);
}
.codex-controls{display:flex;align-items:center;gap:16px}
.codex-controls button{
  border:1px solid rgba(127,52,35,.5);
  background:transparent;
  color:var(--terracotta-dark,#7f3423);
  padding:9px 16px;
  font:600 .7rem/1 var(--sans);
  letter-spacing:.09em;
  text-transform:uppercase;
  cursor:pointer;
}
.codex-controls button:hover:not(:disabled){background:var(--terracotta,#a8492e);color:#fffaf1;border-color:var(--terracotta,#a8492e)}
.codex-controls button:disabled{opacity:.35;cursor:default}
.codex-folio{font:400 .72rem/1 var(--sans);color:var(--muted,#655f56);letter-spacing:.1em}

@media (max-width:620px){
  .codex{aspect-ratio:4/5}
  .codex::before,.codex::after{display:none}
  .leaf{width:100%}
}

/* ==========================================================
   3. THE ENGRAVING ASSEMBLES
   The plate is cut first: hatching sweeps across, then the
   image resolves out of it.
   ========================================================== */

.engrave{position:relative;overflow:hidden;isolation:isolate}
.engrave img{
  display:block;width:100%;height:auto;
  filter:grayscale(1) contrast(2.4) brightness(1.15);
  transition:filter 1.6s ease 1.1s;
}
.engrave::before{                    /* the hatching */
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:repeating-linear-gradient(46deg,
    rgba(46,32,20,.72) 0 1px, transparent 1px 5px);
  -webkit-mask-image:linear-gradient(112deg,#000 0 42%, transparent 58%);
  mask-image:linear-gradient(112deg,#000 0 42%, transparent 58%);
  -webkit-mask-size:260% 100%;
  mask-size:260% 100%;
  -webkit-mask-position:120% 0;
  mask-position:120% 0;
  transition:mask-position 1.5s cubic-bezier(.35,.1,.25,1),
             -webkit-mask-position 1.5s cubic-bezier(.35,.1,.25,1),
             opacity .9s ease 1.3s;
}
.engrave::after{                     /* the cross-hatch, a beat later */
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:repeating-linear-gradient(-42deg,
    rgba(46,32,20,.5) 0 1px, transparent 1px 7px);
  -webkit-mask-image:linear-gradient(112deg,#000 0 42%, transparent 58%);
  mask-image:linear-gradient(112deg,#000 0 42%, transparent 58%);
  -webkit-mask-size:260% 100%;
  mask-size:260% 100%;
  -webkit-mask-position:120% 0;
  mask-position:120% 0;
  transition:mask-position 1.5s cubic-bezier(.35,.1,.25,1) .22s,
             -webkit-mask-position 1.5s cubic-bezier(.35,.1,.25,1) .22s,
             opacity .9s ease 1.5s;
}
.engrave.cut::before,
.engrave.cut::after{-webkit-mask-position:-140% 0;mask-position:-140% 0;opacity:0}
.engrave.cut img{filter:grayscale(0) contrast(1.05) saturate(1.1) hue-rotate(-4deg)}

/* ==========================================================
   MOTION & ACCESS
   ========================================================== */

@media (prefers-reduced-motion:reduce){
  .ink::before,.ink::after{display:none}
  .engrave::before,.engrave::after{display:none}
  .engrave img{filter:none}
  .leaf{transition:none}
}
html.a11y-motion .ink::before,
html.a11y-motion .ink::after,
html.a11y-motion .engrave::before,
html.a11y-motion .engrave::after{display:none !important}
html.a11y-motion .engrave img{filter:none !important}
html.a11y-motion .leaf{transition:none !important}

html.a11y-contrast .ink::before,
html.a11y-contrast .ink::after,
html.a11y-contrast .engrave::before,
html.a11y-contrast .engrave::after{display:none}
html.a11y-contrast .engrave img{filter:none}