/*
 * Fun-Japan.net — Article Animations & Illustrations
 * Scroll-reveal + illustrated component styles
 * Author: Fun-Japan.net  Version: 1.0.0
 */

/* ── CSS tokens (non-conflicting --fj- prefix) ── */
:root {
  --fj-accent:      #C07A18;
  --fj-accent-lite: rgba(192,122,24,.11);
  --fj-border:      rgba(0,0,0,.09);
  --fj-shadow:      rgba(0,0,0,.07);
  --fj-muted:       #8C7B68;
  --fj-green:       #4A7538;
  --fj-red:         #9B2A2A;
  --fj-surface:     #FFFFFF;
  --fj-bg2:         rgba(0,0,0,.03);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fj-accent:      #D4931C;
    --fj-accent-lite: rgba(212,147,28,.14);
    --fj-border:      rgba(255,255,255,.1);
    --fj-shadow:      rgba(0,0,0,.3);
    --fj-muted:       #9A8A78;
    --fj-surface:     rgba(255,255,255,.04);
    --fj-bg2:         rgba(255,255,255,.04);
  }
}

/* ─────────────────────────────────────────────
   1. SCROLL REVEAL FRAMEWORK
   progressive enhancement: only hides when JS loads
   ───────────────────────────────────────────── */

/* Fade-up: paragraphs, lists, tables */
body.fj-anim .fj-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}
body.fj-anim .fj-reveal.fj-vis {
  opacity: 1;
  transform: translateY(0);
}

/* Slide-in from left: checklist items */
body.fj-anim .fj-slide-left {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity .4s ease, transform .4s ease;
}
body.fj-anim .fj-slide-left.fj-vis {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger delays for sibling groups (up to 10 children) */
body.fj-anim [data-fj-stagger] > *:nth-child(1)  { transition-delay: .00s; }
body.fj-anim [data-fj-stagger] > *:nth-child(2)  { transition-delay: .08s; }
body.fj-anim [data-fj-stagger] > *:nth-child(3)  { transition-delay: .16s; }
body.fj-anim [data-fj-stagger] > *:nth-child(4)  { transition-delay: .24s; }
body.fj-anim [data-fj-stagger] > *:nth-child(5)  { transition-delay: .32s; }
body.fj-anim [data-fj-stagger] > *:nth-child(6)  { transition-delay: .40s; }
body.fj-anim [data-fj-stagger] > *:nth-child(7)  { transition-delay: .48s; }
body.fj-anim [data-fj-stagger] > *:nth-child(8)  { transition-delay: .56s; }
body.fj-anim [data-fj-stagger] > *:nth-child(9)  { transition-delay: .64s; }
body.fj-anim [data-fj-stagger] > *:nth-child(10) { transition-delay: .72s; }

@media (prefers-reduced-motion: reduce) {
  body.fj-anim .fj-reveal,
  body.fj-anim .fj-slide-left {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ─────────────────────────────────────────────
   2. NOTE / INFO BOX  (.fj-note)
   Use in Gutenberg: group block → Additional CSS class: fj-note
   ───────────────────────────────────────────── */
.fj-note {
  background: var(--fj-accent-lite);
  border-left: 3px solid var(--fj-accent);
  border-radius: 0 7px 7px 0;
  padding: .85rem 1.1rem;
  margin: 1.25rem 0;
  font-size: .9rem;
  line-height: 1.65;
}

/* ─────────────────────────────────────────────
   3. ENHANCED CHECKLIST  (.fj-checklist on <ul>)
   ───────────────────────────────────────────── */
ul.fj-checklist {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
ul.fj-checklist li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  background: var(--fj-surface);
  border: 1px solid var(--fj-border);
  border-radius: 8px;
  padding: .75rem 1rem;
  font-size: .92rem;
  transition: border-color .2s;
}
ul.fj-checklist li:hover { border-color: var(--fj-accent); }
ul.fj-checklist li::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: var(--fj-accent-lite);
  color: var(--fj-accent);
  font-size: .7rem;
  font-weight: 700;
  margin-top: .1rem;
}

/* ─────────────────────────────────────────────
   4. ORDERED FLOW STEPS  (.fj-steps on <ol>)
   ───────────────────────────────────────────── */
ol.fj-steps {
  list-style: none;
  margin: 1.25rem 0;
  padding: 0;
  position: relative;
}
ol.fj-steps::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: var(--fj-border);
}
ol.fj-steps li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .75rem 0;
  counter-increment: fj-step;
}
ol.fj-steps li::before {
  content: counter(fj-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 50%;
  background: var(--fj-accent);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--fj-surface);
  margin-top: .1rem;
}
ol.fj-steps {
  counter-reset: fj-step;
}
ol.fj-steps li .fj-step-title {
  font-weight: 600;
  display: block;
  margin-bottom: .15rem;
}
ol.fj-steps li .fj-step-desc {
  font-size: .85rem;
  color: var(--fj-muted);
}

/* ─────────────────────────────────────────────
   5. DISH CARD GRID  (.fj-dishes on a div)
   ───────────────────────────────────────────── */
.fj-dishes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: .9rem;
  margin: 1.25rem 0;
}
.fj-dish-card {
  background: var(--fj-surface);
  border: 1px solid var(--fj-border);
  border-radius: 10px;
  padding: .9rem .75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  text-align: center;
  cursor: default;
  transition: transform .22s, box-shadow .22s;
}
.fj-dish-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--fj-shadow);
}
.fj-dish-card svg,
.fj-dish-card img { width: 68px; height: 68px; }
.fj-dish-jp  { font-size: .75rem; color: var(--fj-muted); }
.fj-dish-ko  { font-size: .88rem; font-weight: 700; }
.fj-dish-note{ font-size: .72rem; color: var(--fj-muted); line-height: 1.4; }
.fj-dish-tag {
  font-size: .68rem;
  background: var(--fj-accent-lite);
  color: var(--fj-accent);
  padding: .15rem .45rem;
  border-radius: 4px;
  font-weight: 600;
}

/* Dish card scroll animation */
body.fj-anim .fj-dish-card {
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transition: opacity .45s ease, transform .45s ease, box-shadow .22s;
}
body.fj-anim .fj-dish-card.fj-vis {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ─────────────────────────────────────────────
   6. FIRST ORDER GUIDE  (.fj-order-guide on a div)
   ───────────────────────────────────────────── */
.fj-order-guide {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: .85rem;
  margin: 1.25rem 0;
}
.fj-order-card {
  background: var(--fj-surface);
  border: 1px solid var(--fj-border);
  border-radius: 10px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.fj-order-role {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fj-accent);
}
.fj-order-icon { font-size: 1.6rem; line-height: 1; }
.fj-order-ex   { font-weight: 600; font-size: .88rem; }
.fj-order-hint { font-size: .78rem; color: var(--fj-muted); line-height: 1.4; }

/* ─────────────────────────────────────────────
   7. CHAIN CARDS  (.fj-chains on a div)
   ───────────────────────────────────────────── */
.fj-chains {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin: 1.25rem 0;
}
.fj-chain-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--fj-surface);
  border: 1px solid var(--fj-border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  transition: border-color .2s;
}
.fj-chain-card:hover { border-color: var(--fj-accent); }
.fj-chain-logo {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.fj-chain-name     { font-weight: 700; font-size: .92rem; }
.fj-chain-name-ro  { font-size: .78rem; color: var(--fj-muted); }
.fj-chain-desc     { font-size: .82rem; color: var(--fj-muted); margin-top: .2rem; }
.fj-chain-tip      { font-size: .78rem; color: var(--fj-accent); font-weight: 600; margin-top: .2rem; }

/* ─────────────────────────────────────────────
   8. BUDGET BARS  (.fj-budget on a div)
   ───────────────────────────────────────────── */
.fj-budget {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 1.25rem 0;
}
.fj-budget-row {}
.fj-budget-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .38rem;
}
.fj-budget-label { font-size: .88rem; font-weight: 600; }
.fj-budget-range {
  font-size: .88rem;
  color: var(--fj-accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fj-budget-track {
  height: 9px;
  background: var(--fj-bg2);
  border-radius: 5px;
  overflow: hidden;
}
.fj-budget-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--fj-accent) 0%, #E8A840 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s cubic-bezier(.25,.46,.45,.94);
}
.fj-budget-fill.fj-vis { transform: scaleX(1); }

/* ─────────────────────────────────────────────
   9. RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .fj-dishes        { grid-template-columns: repeat(2, 1fr); }
  .fj-order-guide   { grid-template-columns: 1fr 1fr; }
  ol.fj-steps::before { left: 19px; }
  ol.fj-steps li::before { width: 38px; height: 38px; min-width: 38px; font-size: .9rem; }
}