@import url("https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&display=swap");
@font-face {
  font-family: "Midorima";
  src: url("./fonts/Midorima-PersonalUse-Regular.ttf");
}
/* --- Under-nav tapered line --- */
.taper-line {
  position: relative;
  height: 4px;
  background: var(--line, #4a2b26);
}

.taper-line::before {
  left: -18px;
  transform: translateY(-50%) rotate(12deg);
}

/* --- CTA button with sticker shadow + corner tag notch --- */
.cta-btn {
  position: relative;
  box-shadow: 6px 6px 0 0 #351515; /* hard offset shadow */
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 10px 10px 0 0 #351515;
}
.cta-btn:active {
  transform: translateY(0);
  box-shadow: 6px 6px 0 0 #351515;
}
.cta-btn::after {
  /* small corner tag on bottom-right */
  content: "";
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 18px;
  height: 18px;
  background: #f0592b;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

/* --- icon square button --- */
.icon-btn {
  box-shadow: 4px 4px 0 0 #351515;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.icon-btn:hover {
  transform: translateY(-2px);
  box-shadow: 7px 7px 0 0 #351515;
}
.icon-btn:active {
  transform: translateY(0);
  box-shadow: 4px 4px 0 0 #351515;
}

/* --- simple scroll reveal --- */
.reveal-seed {
  opacity: 0;
  transform: translateY(16px);
}
.revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
.title-font {
  font-family: "Midorima";
  color: #d91d1d;
}

.title-bordered {
  color: white; /* fill color */
  -webkit-text-stroke: 2px #d91d1d; /* for wider support */
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.title-bordered:hover {
  text-shadow: 0 0 10px #d91d1d, 0 0 20px #d91d1d;
  transition: 0.3s ease;
}

h2,
p,
a,
strong {
  font-family: "Mochiy Pop One", sans-serif;
  color: #000;
}

/* === Sakura branch background (fixed like your mock) === */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1; /* behind everything */
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain; /* keep aspect ratio */
  width: 520px; /* << give the element size */
  height: 320px; /* adjust as needed to match art */
  opacity: 0.95;
}

/* Top-left branch */
body::before {
  top: -20px; /* nudge to taste */
  left: -30px;
  background-image: url("./images/sakura-left.png");
}

/* Bottom-right branch (mirrored) */
body::after {
  right: 55px;
  bottom: -20px;
  background-image: url("./images/sakura-left.png"); /* reuse same file */
  transform: scaleX(-1); /* mirror horizontally */
}

/* Mobile sizing */
@media (max-width: 768px) {
  body::before,
  body::after {
    width: 320px;
    height: 200px;
    opacity: 0.9;
  }
  body::before {
    top: 75px;
    left: -20px;
  }
  body::after {
    right: -20px;
    bottom: -10px;
  }
}
/* --- Scroll frame container --- */
.frame-wrap {
  position: relative;
  width: 260px; /* tweak to match your PNG */
  height: 300px;
}
@media (min-width: 640px) {
  .frame-wrap {
    width: 280px;
    height: 330px;
  }
}

.frame-img {
  position: absolute;
  top: 55px;
  left: 45px;
  /* inset: 56px 34px 56px 34px; */
  width: 175px;
  height: 205px;
  max-width: calc(100% - 68px);
  max-height: calc(100% - 112px);
  object-fit: cover;
  border-radius: 6px;
  overflow: hidden;
}
.frame-overlay {
  position: absolute;
  inset: 0;
  background: url("./images/photo-frame.png") no-repeat center / contain; /* your red scroll PNG */
  pointer-events: none;
}

/* Step heading vibe */
.step-title {
  font-family: "Mochiy Pop One", sans-serif;
  font-weight: 900;
  letter-spacing: 0.02em;
}

/* tokenomics */

/* === Meme-board styles (unique shapes, not generic cards) === */
.ink-shadow {
  box-shadow: 8px 8px 0 0 #351515;
}
.ink-shadow-sm {
  box-shadow: 5px 5px 0 0 #351515;
}

/* Polaroid photo with washi tape */
.polaroid {
  background: #fff;
  border: 3px solid #351515;
  border-radius: 10px;
  transform: rotate(-1.5deg);
}
.polaroid .tape {
  position: absolute;
  width: 70px;
  height: 18px;
  background: #f6e3a9;
  border: 2px solid #351515;
  border-radius: 6px;
  transform: rotate(-8deg);
  left: 18px;
  top: -12px;
}
.polaroid .tape:after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed #caa84e;
}

/* Scroll ticket (like a red festival pass) */
.ticket {
  position: relative;
  background: #d91d1d;
  color: #fff;
  border: 3px solid #351515;
  border-radius: 12px;
  padding: 14px 18px;
}
.ticket:before,
.ticket:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  background: #fff;
  border: 3px solid #351515;
  border-radius: 50%;
  transform: translateY(-50%);
}
.ticket:before {
  left: -11px;
}
.ticket:after {
  right: -11px;
}

/* Wax seal */
.seal {
  position: relative;
  width: 120px;
  height: 120px;
  background: #b31414;
  color: #fff;
  border: 3px solid #351515;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.seal:after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 3px dashed #351515;
  opacity: 0.25;
}

/* Hang tag */
.tag {
  position: relative;
  background: #fff;
  border: 3px solid #351515;
  border-radius: 10px;
}
.tag:before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 3px solid #351515;
  border-radius: 50%;
  top: 10px;
  right: 12px;
  background: #fff;
}
.tag .string {
  position: absolute;
  width: 70px;
  height: 2px;
  background: #351515;
  right: 0;
  top: 16px;
  transform: rotate(12deg);
  transform-origin: right;
}

/* Labels */
.badge-ink {
  display: inline-block;
  background: #fff;
  border: 3px solid #351515;
  border-radius: 8px;
  padding: 0.25rem 0.5rem;
  font-weight: 900;
}

/* gentle reveal (uses your existing IO) */
.reveal-seed {
  opacity: 0;
  transform: translateY(16px);
}
.revealed {
  opacity: 1;
  transform: translateY(0);
  transition: 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}