/* ==========================================================
   Kotobloom — atelier layer
   Tailwind handles layout. This file adds the bookbinding
   details: paper fibre, crop marks, stitched thread, motion.
   Palette is taken from the logo.
   ========================================================== */

:root {
  --paper: #f4f3ee;
  --ink: #10282a;
  --teal: #1f6f69;
  --sage: #a8cbc2;
  --ochre: #d99a2b;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-feature-settings: "palt";
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  word-break: auto-phrase;
}

/* IPA symbols are missing from the Japanese font subsets */
.ipa {
  font-family: "Noto Sans", "Segoe UI", "Lucida Sans Unicode", "Arial Unicode MS", "DejaVu Sans", sans-serif;
}

/* Very fine paper fibre over the page */
.paper-fibre::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.16 0 0 0 0 0.16 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Printer's crop marks around a card */
.crop {
  --c: rgba(16, 40, 42, 0.35);
  --l: 14px;
  padding: 14px;
  background:
    linear-gradient(var(--c), var(--c)) 0 14px / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 14px 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 14px / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - 14px) 0 / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 calc(100% - 14px) / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 14px 100% / 1px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% calc(100% - 14px) / var(--l) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) calc(100% - 14px) 100% / 1px var(--l) no-repeat;
}
.crop--light {
  --c: rgba(244, 243, 238, 0.35);
}

/* Double rule, like a printed specimen frame */
.frame {
  border: 1px solid rgba(16, 40, 42, 0.14);
  outline: 1px solid rgba(16, 40, 42, 0.08);
  outline-offset: -6px;
}

/* Running stitch in waxed thread */
.stitch {
  height: 2px;
  background-image: repeating-linear-gradient(
    to right,
    var(--ochre) 0 10px,
    transparent 10px 18px
  );
  border-radius: 2px;
}
.stitch-v {
  width: 2px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--ochre) 0 10px,
    transparent 10px 18px
  );
  border-radius: 2px;
}

/* Book spine on share cards */
.spine {
  position: relative;
}
.spine::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 14px;
  background: rgba(16, 40, 42, 0.14);
}
.spine::after {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 6px;
  width: 2px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--ochre) 0 8px,
    transparent 8px 22px
  );
}

/* Allow the final two-column composition to contract on narrow phones. */
#download > div { grid-template-columns: minmax(0, 1fr); }
#download > div > div { min-width: 0; }
@media (min-width: 1024px) {
  #download > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Bookmark ribbon */
.ribbon {
  position: absolute;
  top: -1px;
  width: 22px;
  height: 46px;
  background: var(--ochre);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}

/* Fine hover lift */
.lift {
  transition:
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 40px -28px rgba(16, 40, 42, 0.45);
}

.soft-shadow {
  box-shadow:
    0 1px 0 rgba(16, 40, 42, 0.04),
    0 30px 60px -36px rgba(16, 40, 42, 0.45);
}

/* Scroll reveal (only when JS is available) */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--d, 0ms);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stitch drawing in for the hero card */
.js .stitch-draw {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.js .is-visible .stitch-draw {
  clip-path: inset(0 0 0 0);
}

/* Synonym panel swap */
.syn-panel {
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}
.syn-panel.is-swapping {
  opacity: 0;
  transform: translateY(6px);
}

/* Forgetting curve draw */
.curve-path {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  transition: stroke-dashoffset 2.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.is-visible .curve-path {
  stroke-dashoffset: 0;
}

/* FAQ */
details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
.faq-icon::after {
  content: "";
  position: absolute;
  inset: 50% 25% auto;
  height: 1px;
  background: currentColor;
}
.faq-icon::before {
  content: "";
  position: absolute;
  inset: 25% auto 25% 50%;
  width: 1px;
  background: currentColor;
  transition: transform 0.3s ease;
}
details[open] .faq-icon::before {
  transform: scaleY(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .curve-path {
    stroke-dashoffset: 0;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
  .js .stitch-draw {
    clip-path: none;
  }
}