/* Collectible-poster details. Decorations never intercept a click. */
:root { --jp-font:"Yu Gothic","Meiryo","Noto Sans JP",sans-serif; }
.dream-stamp,.poster-watermark,.poster-jp-ticket,.poster-sparkles,
.works-ticket,.story-label,.contact-endnote { pointer-events:none; user-select:none; }
[lang="ja"] { font-family:var(--jp-font); font-style:normal; }

/* The little club seal fills the blank beside the handwritten hero note. */
.hero-note { position:relative; min-height:60px; margin-block:32px; }
.hero-note .dream-stamp { position:absolute; left:-155px; top:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0; width:96px; height:96px; padding:7px; border:2px solid var(--mint);
  border-radius:50%; color:var(--mint); font:800 12px/1.15 var(--body);
  transform:translateY(-50%) rotate(-12deg); }
.dream-stamp::before { content:""; position:absolute; inset:5px;
  border:1px dashed currentColor; border-radius:50%; opacity:.65;
  animation:seal-ring-turn 40s linear infinite; }
.hero-note .dream-stamp>span,.hero-note .dream-stamp>small {
  position:relative; font:800 12px/1.2 var(--body); letter-spacing:0;
  white-space:nowrap; text-align:center; }
.dream-stamp>b { font:700 35px/1.15 var(--jp-font); color:var(--pink); }

/* Japanese labels sit on the poster edge, outside the face and controls. */
.poster-watermark { position:absolute; z-index:1; left:4%; bottom:13%;
  font:800 180px/1 var(--jp-font); color:transparent;
  -webkit-text-stroke:1px rgba(255,246,231,.2); transform:rotate(-10deg); }
.poster-jp-ticket { position:absolute; z-index:2; right:18px; top:29%;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  width:54px; padding:12px 6px; background:var(--mint); color:var(--ink);
  border:2px solid var(--ink); border-radius:28px 28px 4px 4px;
  box-shadow:4px 4px 0 rgba(28,27,49,.45); transform:rotate(5deg);
  animation:poster-ticket-drift 6s ease-in-out infinite; }
.poster-jp-ticket::after { content:""; position:absolute; inset:6px;
  border:1px dashed rgba(28,27,49,.3); border-radius:22px 22px 0 0; }
.poster-jp-ticket>b { writing-mode:vertical-rl; font:800 29px/1.1 var(--jp-font);
  letter-spacing:.2em; }
.poster-jp-ticket>i { font:22px/1 var(--body); }
.poster-jp-ticket>small { font:800 12px/1 var(--body); letter-spacing:-.02em; }
.poster-sparkles { position:absolute; z-index:2; right:9%; top:8%; width:94px;
  overflow:visible; fill:none; stroke:var(--paper); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  animation:poster-sparkle-breathe 4.5s ease-in-out infinite; }
.poster-sparkles circle { fill:var(--pink); stroke:none; }
.doodle-trail { stroke-dasharray:3 5; }

/* Film perforations connect the anime poster to the editing theme. */
.marquee { position:relative; padding-block:25px; }
.marquee::before,.marquee::after { content:""; position:absolute; left:0; right:0;
  height:4px; opacity:.35; pointer-events:none;
  background:repeating-linear-gradient(90deg,var(--ink) 0 10px,transparent 10px 24px); }
.marquee::before { top:4px; }
.marquee::after { bottom:4px; }

/* A torn admission ticket and a scrapbook label frame the next chapters. */
.works-ticket { position:relative; display:inline-flex; align-items:center;
  gap:13px; margin:0 0 24px; padding:10px 15px; border:2px solid var(--ink);
  background:var(--yellow); color:var(--ink); border-radius:5px;
  box-shadow:4px 4px 0 var(--pink); transform:rotate(-4deg); }
.works-ticket::before,.works-ticket::after { content:""; position:absolute;
  top:50%; width:10px; height:16px; background:var(--night);
  border:2px solid var(--ink); border-radius:50%; transform:translateY(-50%); }
.works-ticket::before { left:-7px; }
.works-ticket::after { right:-7px; }
.works-ticket>b { font:800 29px/1 var(--jp-font); padding-right:12px;
  border-right:1px dashed var(--ink); }
.works-ticket>span { font:900 12px/1.35 var(--body); letter-spacing:.08em; }
.works-ticket>i { font:28px/1 var(--body); }
.story-label { display:inline-flex; align-items:center; gap:12px;
  margin:0 0 21px; padding:6px 13px; color:var(--ink); background:var(--mint);
  border:1.5px solid var(--ink); border-radius:3px;
  box-shadow:3px 3px 0 rgba(28,27,49,.15); transform:rotate(-3deg); }
.story-label>b { font:800 23px/1.3 var(--jp-font); }
.story-label>span { font:800 12px/1.3 var(--body); letter-spacing:.08em; }
.story-label>i { font:25px/1 var(--body); color:#665080;
  animation:seal-ring-turn 20s linear infinite; }
.paper-tape { background:repeating-linear-gradient(120deg,#f2dba7e8 0 10px,#ff93b8d9 10px 13px,#f2dba7e8 13px 22px);
  width:132px; height:35px; border-block:1px solid rgba(28,27,49,.12); }

.contact { padding-bottom:115px; }
.contact-endnote { position:absolute; left:65px; right:65px; bottom:20px;
  display:flex; align-items:center; gap:15px; padding-top:12px;
  border-top:1px dashed rgba(28,27,49,.5); }
.contact-endnote>b { flex-shrink:0; font:800 23px/1.25 var(--jp-font); }
.contact-endnote>span { font:800 12px/1.4 var(--body); letter-spacing:.08em; }
.contact-endnote>i { margin-left:auto; font:26px/1 var(--body); }

@keyframes seal-ring-turn { to { rotate:360deg; } }
@keyframes poster-ticket-drift { 0%,100% { translate:0 0; } 50% { translate:0 -5px; } }
@keyframes poster-sparkle-breathe { 0%,100% { opacity:.6; scale:.94; } 50% { opacity:1; scale:1; } }

@media(max-width:900px) {
  .poster-jp-ticket { right:12px; width:46px; padding:10px 5px; }
  .poster-jp-ticket>b { font-size:26px; }
  .poster-jp-ticket>small { writing-mode:vertical-rl; letter-spacing:.1em; }
  .poster-sparkles { width:75px; right:8%; }
  .contact-endnote { left:35px; right:35px; }
}
@media(max-width:680px) {
  .hero-note { margin:30px 0; min-height:90px; gap:18px; }
  .hero-note .dream-stamp { position:relative; left:auto; top:auto; flex:0 0 96px;
    transform:rotate(-12deg); }
  .hero-note>svg { display:none; }
  .hero-note>span:not(.dream-stamp) { font-size:17px; }
  .poster-jp-ticket { top:28%; right:9px; width:42px; }
  .poster-jp-ticket>b { font-size:24px; }
  .poster-watermark { font-size:135px; left:3%; bottom:18%; }
  .poster-sparkles { top:7%; right:7%; width:65px; }
  .marquee { padding-block:21px; }
  .works-ticket { margin-bottom:22px; }
  .contact { padding-bottom:110px; }
  .contact-endnote { left:24px; right:24px; bottom:19px; gap:12px; }
  .contact-endnote>span { max-width:210px; letter-spacing:.025em; }
  .contact-endnote>i { display:none; }
}