/* Portfolio v6: mechanical split-flap skin. Drop-in replacement for flipboard.css. */
.flipboard {
  --flap-ink:#eee9db;
  --flap-metal:#25282b;
  --flap-edge:#090b0c;
  max-width:100%; margin:1.25rem 0 2rem; padding:1.25rem;
  color:var(--flap-ink); border-radius:7px;
  background:repeating-linear-gradient(112deg,#ffffff06 0 1px,transparent 1px 5px),
             linear-gradient(155deg,#383b3d 0%,#202326 42%,#151719 100%);
  border:1px solid #4c4f51;
  box-shadow:0 9px 24px #0005,0 2px 3px #0006,inset 0 1px #ffffff22,inset 0 -3px 9px #0008;
}
.flipboard-heading {display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-bottom:1.15rem;font:600 .76rem ui-monospace,monospace;letter-spacing:.15em;text-shadow:0 1px 2px #0009}
.flipboard-subtitle {color:#afb2b1;font-size:.7rem;letter-spacing:.07em}
.favorite-sentence {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.6rem;line-height:1.5}
.favorite-static {font-size:clamp(.8rem,1.9vw,1.05rem);white-space:nowrap;color:#e4dfd2;text-shadow:0 1px 2px #000b}
.flap-display {
  --flip-duration:320ms;--flap-font-size:25px;
  position:relative;isolation:isolate;flex:1 1 0;min-width:0;max-width:100%;
  height:clamp(78px,11vw,118px);overflow:hidden;perspective:1050px;
  border:5px solid #111315;border-radius:5px;
  background:#070809;
  box-shadow:0 1px 0 #686b6b66,0 4px 8px #0008,inset 0 4px 12px #000d;
}
.flap-left {flex-grow:1;flex-basis:0}
.flap-right {flex-grow:1.35;flex-basis:0}
.flap-half {
  position:absolute;left:0;right:0;height:50%;overflow:hidden;
  background:linear-gradient(180deg,#343638 0%,#292b2c 65%,#222425 100%);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:inset 0 1px 0 #ffffff1c;
}
.flap-top,.flap-next-top,.flap-turn-top {top:0;transform-origin:center bottom}
.flap-bottom,.flap-turn-bottom {
  bottom:0;transform-origin:center top;
  background:linear-gradient(180deg,#151719 0%,#242627 23%,#2c2e2f 100%);
  box-shadow:inset 0 -1px 0 #ffffff14,inset 0 5px 9px #0005;
}
.flap-text {
  position:absolute;left:0;width:100%;height:200%;display:flex;
  align-items:center;justify-content:center;box-sizing:border-box;padding:0 10px;
  color:var(--flap-ink);
  font-family:system-ui,'Noto Sans JP','Noto Sans KR','Noto Sans',sans-serif;
  font-size:var(--flap-font-size);font-weight:700;line-height:1.2;
  white-space:nowrap;text-align:center;unicode-bidi:plaintext;letter-spacing:0;
  text-shadow:0 1px 1px #000b,0 -1px #ffffff0b;
}
.flap-top .flap-text,.flap-next-top .flap-text,.flap-turn-top .flap-text {top:0}
.flap-bottom .flap-text,.flap-turn-bottom .flap-text {bottom:0}
.flap-top,.flap-bottom {z-index:1}
.flap-next-top {z-index:2;visibility:hidden}
.flap-turn-top,.flap-turn-bottom {z-index:3;visibility:hidden}
.flap-turn-bottom {transform:rotateX(90deg)}
/* Light changes on the moving plate, not on the lettering. */
.flap-turn-top::after,.flap-turn-bottom::after {
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#0000,#0009);opacity:0;
}
.flap-turn-bottom::after {background:linear-gradient(180deg,#000b,#0000)}
.flap-display.is-flipping .flap-next-top,
.flap-display.is-flipping .flap-turn-top,
.flap-display.is-flipping .flap-turn-bottom {visibility:visible}
.flap-display.is-flipping .flap-turn-top {animation:flap-fold calc(var(--flip-duration) / 2) cubic-bezier(.52,.08,.83,.44) both}
.flap-display.is-flipping .flap-turn-bottom {animation:flap-unfold calc(var(--flip-duration) / 2) cubic-bezier(.17,.64,.34,1) calc(var(--flip-duration) / 2) both}
.flap-display.is-flipping .flap-turn-top::after {animation:flap-top-shadow calc(var(--flip-duration) / 2) linear both}
.flap-display.is-flipping .flap-turn-bottom::after {animation:flap-bottom-shadow calc(var(--flip-duration) / 2) linear calc(var(--flip-duration) / 2) both}
@keyframes flap-fold {from{transform:rotateX(0deg)}to{transform:rotateX(-90deg)}}
@keyframes flap-unfold {from{transform:rotateX(90deg)}to{transform:rotateX(0deg)}}
@keyframes flap-top-shadow {from{opacity:0}to{opacity:.95}}
@keyframes flap-bottom-shadow {from{opacity:.9}to{opacity:0}}
/* A physical hinge groove with faint metallic reflection. */
.flap-display::after {
  content:"";position:absolute;left:0;right:0;top:calc(50% - 2px);height:4px;
  background:linear-gradient(to bottom,#55595b66 0,#070808 1px,#050606 3px,#72777966 4px);
  z-index:5;pointer-events:none;box-shadow:0 1px 3px #000c;
}
/* Tiny hinge-pin caps at either end, drawn above the plate. */
.flap-display::before {
  content:"";position:absolute;top:calc(50% - 5px);left:2px;right:2px;height:10px;
  background:radial-gradient(circle at 5px 50%,#757b7e 0 2px,#17191a 2.5px 4px,transparent 4.5px),
             radial-gradient(circle at calc(100% - 5px) 50%,#757b7e 0 2px,#17191a 2.5px 4px,transparent 4.5px);
  z-index:6;pointer-events:none;
}
.flap-controls {display:flex;justify-content:center;margin-top:1.15rem}
.flap-next {
  background:linear-gradient(#55595b,#34383b);border:1px solid #777b7d;border-bottom-color:#1b1e20;
  border-radius:4px;color:#f2eee5;padding:.65rem 1.55rem;
  font:600 .82rem ui-monospace,monospace;letter-spacing:.06em;cursor:pointer;
  box-shadow:0 3px 0 #141618,0 5px 9px #0007,inset 0 1px #ffffff28;
}
.flap-next:hover:not(:disabled) {background:linear-gradient(#63696b,#414548)}
.flap-next:active:not(:disabled) {transform:translateY(2px);box-shadow:0 1px 0 #141618,0 2px 5px #0007}
.flap-next:focus-visible {outline:2px solid #d5d0b7;outline-offset:4px}
.flap-next:disabled {opacity:.55;cursor:wait}
.flap-visually-hidden {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:650px) {
  .flipboard{padding:.9rem}
  .favorite-sentence{gap:.35rem}
  .favorite-static{font-size:.8rem}
  .flap-display{flex-basis:calc(50% - 2.3rem);height:78px;border-width:3px}
  .flap-left,.flap-right{flex-grow:1}
}
@media(prefers-reduced-motion:reduce) {
  .flap-display.is-flipping .flap-turn-top,.flap-display.is-flipping .flap-turn-bottom,
  .flap-display.is-flipping .flap-turn-top::after,.flap-display.is-flipping .flap-turn-bottom::after{animation:none}
}
.flap-link {
  position: absolute;
  inset: 0;
  z-index: 20;
  cursor: pointer;
}

.flap-link[hidden] {
  display: none;
}