/* =========================================================================
   "Gepubliseerde werk" — books on a shelf.  (pub-fx.css + pub-fx.js)
   Covers lean in 3D as their row enters, sit on a shelf line that draws
   itself, and lift off it on hover. Hidden "before" states are gated behind
   html.pf (set by pub-fx.js only when running and motion is allowed).
   No overflow clipping around any script-font text.
   ========================================================================= */
:root{
  --pf-expo: var(--hl-ez-expo, cubic-bezier(.19,1,.22,1));
  --pf-spring: var(--hl-ez-spring, cubic-bezier(.16,1,.3,1));
  --pf-inout: var(--hl-ez-inout, cubic-bezier(.76,0,.24,1));
}

/* ---- the row: shelf plank instead of a plain border ---- */
.pub-row{
  position: relative; border-bottom-color: transparent;
  transition: padding-left .6s var(--pf-expo), background-color .5s ease, transform .6s var(--pf-expo);
}
.pub-row::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line, #e2e2e2);
  transform-origin: 0 50%; pointer-events: none;
}
/* soft shadow the shelf casts below itself */
.pub-row::before{
  content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.07), transparent); opacity: 0;
  transition: opacity 1s ease .4s;
}
html.pf .pub-row.pf-in::before, html:not(.pf) .pub-row::before{ opacity: 1; }
html.pf .pub-row::after{ transform: scaleX(0); transition: transform 1.6s var(--pf-inout) .15s; }
html.pf .pub-row.pf-in::after{ transform: none; }

/* ---- the book ---- */
.pub-cover{
  transform-origin: 0 50%;
  transform: perspective(760px) rotateY(-13deg);
  background: linear-gradient(160deg, #cecece, #8f8f8f);
  box-shadow: 1px 1px 0 rgba(255,255,255,.35) inset,
              2px 3px 3px rgba(0,0,0,.22), 14px 18px 26px -10px rgba(0,0,0,.5);
  transition: transform .8s var(--pf-spring), box-shadow .8s var(--pf-spring);
  overflow: hidden;
}
/* spine */
.pub-cover::before{
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 9%; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.34), rgba(0,0,0,.06) 60%, rgba(255,255,255,.28) 78%, rgba(0,0,0,.12));
}
/* light sweeping across the jacket on hover */
.pub-cover::after{
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg) translateX(0); opacity: 0;
}

html.pf .pub-cover{
  transform: perspective(760px) translateX(-26px) rotateY(-78deg);
  opacity: 0;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
html.pf .pub-row.pf-in .pub-cover{
  transform: perspective(760px) rotateY(-13deg);
  opacity: 1;
  box-shadow: 1px 1px 0 rgba(255,255,255,.35) inset, 2px 3px 3px rgba(0,0,0,.22), 14px 18px 26px -10px rgba(0,0,0,.5);
  transition: transform 1.5s var(--pf-spring) var(--pd, 0s), opacity .5s ease var(--pd, 0s), box-shadow 1.5s var(--pf-expo) var(--pd, 0s);
}

/* ---- text: staggered in after the book ---- */
html.pf .pub-row:not(.pf-in) .pub-date,
html.pf .pub-row:not(.pf-in) .pub-body > *,
html.pf .pub-row:not(.pf-in) .pub-arrow{ opacity: 0; transform: translate3d(0,22px,0); filter: blur(3px); }
.pub-date, .pub-body > *, .pub-arrow{
  transition: opacity .9s ease, transform 1.2s var(--pf-expo), filter .8s ease, color .35s ease, background-size .8s var(--pf-expo);
}
html.pf .pub-row.pf-in .pub-date{ transition-delay: calc(var(--pd, 0s) + .35s); }
html.pf .pub-row.pf-in .pub-body h3{ transition-delay: calc(var(--pd, 0s) + .45s); }
html.pf .pub-row.pf-in .pub-body .subtitle{ transition-delay: calc(var(--pd, 0s) + .6s); }
html.pf .pub-row.pf-in .pub-body .excerpt{ transition-delay: calc(var(--pd, 0s) + .75s); }
html.pf .pub-row.pf-in .pub-arrow{ transition-delay: calc(var(--pd, 0s) + .9s); }

/* the tag is stamped on */
html.pf .pub-row.pf-in .pub-date .tag{ animation: pfStamp .9s var(--pf-spring) both; animation-delay: calc(var(--pd, 0s) + .7s); }
@keyframes pfStamp{
  0%  { opacity: 0; transform: scale(1.9) rotate(-8deg); }
  55% { opacity: 1; transform: scale(.92) rotate(1.5deg); }
  100%{ opacity: 1; transform: none; }
}
.pub-date .tag{ transition: background-color .4s ease, color .4s ease, border-color .4s ease, transform .5s var(--pf-spring); }


.pub-arrow{
  display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; position: relative;
  border: 1px solid transparent; opacity: .55;
}
.pub-arrow::before{
  content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--gold, #555555);
  transform: scale(.5); opacity: 0; transition: transform .7s var(--pf-spring), opacity .4s ease;
}

@media (hover:hover){
  .pub-row:hover{
    padding-left: .9rem;
    background: linear-gradient(90deg, rgba(186,186,186,.22), rgba(186,186,186,.05));
  }
  .pub-row:hover .pub-body h3{ color: var(--brown-deep, #000000); transform: translateX(4px); }
  /* pulled off the shelf: straightens, rises, casts a longer shadow */
  html .pub-row:hover .pub-cover,
  html.pf .pub-row.pf-in:hover .pub-cover{
    transform: perspective(760px) translateY(-12px) translateX(4px) rotateY(-3deg) scale(1.05);
    box-shadow: 1px 1px 0 rgba(255,255,255,.35) inset, 3px 5px 4px rgba(0,0,0,.2), 26px 34px 38px -12px rgba(0,0,0,.55);
    transition: transform .8s var(--pf-spring), box-shadow .8s var(--pf-spring);
  }
  .pub-row:hover .pub-cover::after{ animation: pfSheen 1.3s var(--pf-expo) both; }
  .pub-row:hover .pub-date .tag{ background: var(--brown-deep, #000000); color: var(--paper, #ffffff); border-color: var(--brown-deep, #000000); transform: translateY(-2px) rotate(-2deg); }
  html.pf .pub-row.pf-in:hover .pub-arrow, .pub-row:hover .pub-arrow{ opacity: 1; transform: translateX(8px); color: var(--brown); }
  .pub-row:hover .pub-arrow::before{ transform: scale(1); opacity: 1; }
}
@keyframes pfSheen{
  0%   { opacity: 0; transform: skewX(-18deg) translateX(0); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: skewX(-18deg) translateX(520%); }
}

@media (max-width: 780px){
  .pub-cover{ transform: perspective(500px) rotateY(-11deg); }
  html.pf .pub-cover{ transform: perspective(500px) translateX(-16px) rotateY(-70deg); }
  html.pf .pub-row.pf-in .pub-cover{ transform: perspective(500px) rotateY(-11deg); }
}

@media print{
  html.pf .pub-row *, html.pf .pub-cover{ opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* once the entrance has played, hover transitions must not inherit its delays */
html.pf .pub-row.pf-done, html.pf .pub-row.pf-done *{ transition-delay: 0s !important; }
html.pf .pub-row.pf-done::after{ transition-delay: 0s !important; }