/* taisho.day — Taisho-era poster design as web experience */

:root {
  --taisho-red: #8a2a3a;
  --persimmon: #c44a28;
  --gold-leaf: #d4a040;
  --cream-silk: #f0e4d0;
  --ink-black: #1a1a1e;
  --wisteria: #6a3a6a;
  --bamboo: #4a6a3a;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: var(--cream-silk);
  color: var(--ink-black);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.8;
  overflow-x: hidden;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.shake { animation: shake 400ms ease-in-out; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleBounce {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes drawStroke {
  from { stroke-dashoffset: 3000; }
  to { stroke-dashoffset: 0; }
}

/* Poster Hero */
.poster-hero {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--taisho-red) 0%, var(--persimmon) 50%, var(--gold-leaf) 100%);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 80px clamp(24px, 6vw, 96px);
  overflow: hidden;
  color: var(--cream-silk);
}

.floral-frame {
  position: absolute;
  left: 0;
  width: 100%;
  height: 120px;
  pointer-events: none;
}

.floral-top { top: 16px; }
.floral-bottom { bottom: 16px; }

.floral-path {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: drawStroke 2.4s ease-out forwards;
}

.blossom-group circle {
  opacity: 0;
  animation: fadeIn 0.6s ease-out forwards;
  animation-delay: 1.8s;
}

.hero-content {
  max-width: 900px;
  position: relative;
  z-index: 2;
}

.taisho-title {
  font-family: "Zilla Slab", "Noto Sans JP", serif;
  font-weight: 700;
  font-size: clamp(96px, 22vw, 280px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--cream-silk);
  text-shadow: 4px 4px 0 var(--ink-black);
  margin-bottom: 24px;
  opacity: 0;
  animation: scaleBounce 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
}

.hero-subtitle {
  font-family: "Zilla Slab", serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 56px);
  letter-spacing: 0.02em;
  margin-bottom: 12px;
  opacity: 0;
  animation: fadeIn 0.8s ease-out 1.4s forwards;
}

.hero-dates {
  font-family: "Crimson Text", serif;
  font-style: italic;
  font-size: clamp(18px, 2vw, 28px);
  color: var(--gold-leaf);
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeIn 0.8s ease-out 1.7s forwards;
}

.hero-tagline {
  font-family: "Crimson Text", serif;
  font-size: clamp(16px, 1.6vw, 22px);
  color: var(--cream-silk);
  max-width: 520px;
  opacity: 0;
  animation: fadeIn 0.8s ease-out 2s forwards;
}

/* Icon Nav */
.icon-nav {
  background: var(--ink-black);
  color: var(--gold-leaf);
  padding: 24px clamp(24px, 6vw, 96px);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 2px solid var(--gold-leaf);
}

.icon-nav ul {
  display: flex;
  gap: clamp(24px, 5vw, 64px);
  list-style: none;
  flex-wrap: wrap;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: "Zilla Slab", serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  color: var(--gold-leaf);
  transition: color 200ms ease, transform 200ms ease;
  padding: 6px 0;
}

.nav-item:hover {
  color: var(--cream-silk);
  transform: translateY(-2px);
}

.nav-item svg { color: currentColor; }

/* Content */
.content-main {
  background: var(--cream-silk);
  padding: clamp(48px, 8vw, 120px) clamp(24px, 6vw, 96px);
}

.content-section {
  margin-bottom: clamp(48px, 8vw, 96px);
  max-width: 1100px;
  /* F-pattern: alternate left bias */
}

.content-section:nth-child(even) {
  margin-left: auto;
  max-width: 900px;
}

.section-frame {
  position: relative;
  padding: clamp(28px, 4vw, 56px);
  background: var(--cream-silk);
  border: 2px solid var(--ink-black);
  box-shadow: 8px 8px 0 var(--wisteria);
}

.content-section:nth-child(2) .section-frame { box-shadow: 8px 8px 0 var(--bamboo); }
.content-section:nth-child(3) .section-frame { box-shadow: 8px 8px 0 var(--persimmon); }
.content-section:nth-child(4) .section-frame { box-shadow: 8px 8px 0 var(--gold-leaf); }

.section-headline {
  font-family: "Zilla Slab", serif;
  font-weight: 700;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--taisho-red);
  margin-bottom: 12px;
}

.section-label {
  font-family: "Crimson Text", serif;
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 19px);
  color: var(--wisteria);
  margin-bottom: 24px;
  border-bottom: 1px solid var(--ink-black);
  padding-bottom: 12px;
}

.section-body p {
  margin-bottom: 16px;
  color: var(--ink-black);
}

.section-body em {
  color: var(--persimmon);
  font-family: "Crimson Text", serif;
  font-style: italic;
}

/* Footer */
.poster-footer {
  background: var(--ink-black);
  color: var(--cream-silk);
  padding: clamp(40px, 6vw, 80px) clamp(24px, 6vw, 96px);
  text-align: center;
  border-top: 4px solid var(--gold-leaf);
}

.footer-mark {
  font-family: "Crimson Text", serif;
  font-style: italic;
  font-size: clamp(16px, 2vw, 22px);
  color: var(--gold-leaf);
  margin-bottom: 12px;
}

.footer-meta {
  font-family: "Zilla Slab", serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Shake Message */
.shake-message {
  position: fixed;
  bottom: 32px;
  right: 32px;
  background: var(--taisho-red);
  color: var(--cream-silk);
  padding: 14px 22px;
  font-family: "Crimson Text", serif;
  font-style: italic;
  font-size: 16px;
  border: 2px solid var(--gold-leaf);
  box-shadow: 4px 4px 0 var(--ink-black);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 300ms ease, transform 300ms ease;
  z-index: 100;
}

.shake-message.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 720px) {
  .taisho-title { text-shadow: 3px 3px 0 var(--ink-black); }
  .icon-nav ul { gap: 18px; }
  .nav-item span { display: none; }
  .content-section:nth-child(even) { margin-left: 0; }
}