/* ============================================================
   KATSU TEI ｜ 暖簾 (noren) part
   A traditional Japanese shop curtain rendered in pure CSS.
   Brand navy #12254C with undyed-cloth cream lettering.
   Echoes the swaying motion of the Kazu lantern.
   ============================================================ */

:root{
  --noren-navy:#12254C;     /* requested fabric color */
  --noren-navy-deep:#0c1933;
  --noren-cloth:#F4EFE1;    /* undyed cloth / printed text */
  --noren-cloth-soft:rgba(244,239,225,.78);
  --noren-wood:#3a2a1a;
  --m-serif:'Shippori Mincho', serif;
  --m-brush:'Yuji Syuku', serif;
  --m-sans:'Noto Sans JP', sans-serif;
}

/* ---- hanging assembly ---- */
.noren{
  --w:720px;
  --h:300px;
  --slit:#F7F5ED;          /* backdrop color, override per context */
  width:var(--w);
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ---- the rod (のれん竿) ---- */
.noren__rod{
  position:relative;
  z-index:4;
  width:calc(var(--w) + 96px);
  height:15px;
  border-radius:8px;
  background:linear-gradient(180deg,#6f5235 0%,#3a2a1a 58%,#241810 100%);
  box-shadow:0 4px 9px rgba(0,0,0,.32), inset 0 2px 2px rgba(255,255,255,.22);
}
.noren__rod::before,
.noren__rod::after{
  content:"";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:21px;height:21px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#7d5e3e,#241810);
  box-shadow:0 2px 5px rgba(0,0,0,.4);
}
.noren__rod::before{left:-12px;}
.noren__rod::after{right:-12px;}

/* ---- the cloth (本体) ---- */
.noren__cloth{
  position:relative;
  width:var(--w);
  height:var(--h);
  margin-top:-3px;
  overflow:hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, var(--noren-navy) 0%, var(--noren-navy-deep) 118%);
  box-shadow:
    0 20px 34px rgba(0,0,0,.30),
    inset 64px 0 70px -46px rgba(0,0,0,.40),
    inset -64px 0 70px -46px rgba(0,0,0,.40),
    inset 0 3px 0 rgba(255,255,255,.05);
  transform-origin:top center;
  animation:norenSway 7.5s ease-in-out infinite;
}
/* sewn channel where the rod passes (chichi band) */
.noren__cloth::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;height:26px;
  background:linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,0));
  z-index:3;
}
/* bottom hem */
.noren__cloth::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:14px;
  background:linear-gradient(0deg, rgba(0,0,0,.30), rgba(0,0,0,0));
  border-bottom:2px solid rgba(0,0,0,.25);
  z-index:3;
}

/* ---- printed artwork (sits under the slits so cuts pass through) ---- */
.noren__art{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--noren-cloth);
  text-align:center;
  user-select:none;
}

/* ---- the slits (割れ) — cut up from the hem, joined at the top ---- */
.noren__slit{
  position:absolute;
  top:38px;             /* leaves a connected band at the top */
  bottom:0;
  width:6px;
  background:var(--slit);
  transform:translateX(-50%);
  z-index:2;
  box-shadow:0 0 6px rgba(0,0,0,.18);
}

/* ---- 左右パネルの縦書きテキスト（PDF暖簾デザインに合わせて追加）---- */
.noren__side{
  position:absolute;
  top:0;bottom:0;
  width:33.333%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
  pointer-events:none;
}
.noren__side--l{ left:0; }
.noren__side--r{ right:0; }
.noren__side span{
  writing-mode:vertical-rl;
  font-family:var(--m-serif);
  font-weight:600;
  font-size:15px;
  letter-spacing:.16em;
  line-height:1;
  color:var(--noren-cloth);
  white-space:nowrap;
}
@media (max-width:768px){
  .noren__side span{ font-size:12px; letter-spacing:.12em; }
}

/* ============== shared motifs ============== */
.mon{
  position:relative;
  width:120px;height:120px;border-radius:50%;
  border:2.5px solid var(--noren-cloth);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto;
}
.mon::before{
  content:"";position:absolute;inset:8px;border-radius:50%;
  border:1px solid rgba(244,239,225,.55);
}
.mon b{
  font-family:var(--m-serif);font-weight:800;font-size:56px;line-height:1;
  color:var(--noren-cloth);
}

.rule{
  width:54px;height:1.5px;background:var(--noren-cloth-soft);
}
.rule.thin{height:1px;opacity:.55;}

.kana-big{ font-family:var(--m-serif);font-weight:800;color:var(--noren-cloth);line-height:1;}
.brush{ font-family:var(--m-brush);color:var(--noren-cloth);letter-spacing:.12em;}
.en-caps{ font-family:var(--m-sans);font-weight:500;letter-spacing:.34em;color:var(--noren-cloth-soft);text-transform:uppercase;}
.jp-small{ font-family:var(--m-sans);font-weight:500;letter-spacing:.42em;color:var(--noren-cloth-soft);}

/* ====== Variant A — three-panel classic (一文字に三枚) ====== */
.na .row3{position:absolute;inset:0;display:flex;}
.na .row3 .cell{flex:1;display:flex;align-items:center;justify-content:center;}
.na .row3 .cell b{font-family:var(--m-serif);font-weight:800;font-size:96px;color:var(--noren-cloth);line-height:1;}
.na .topline{position:absolute;left:12%;right:12%;top:54px;height:1px;background:rgba(244,239,225,.40);z-index:1;}
.na .botline{position:absolute;left:12%;right:12%;bottom:34px;height:1px;background:rgba(244,239,225,.40);z-index:1;}

/* ====== Variant B — crested (家紋のれん) ====== */
.nb .jp-small{font-size:13px;}
.nb .katsu{font-family:var(--m-serif);font-weight:800;font-size:30px;letter-spacing:.34em;color:var(--noren-cloth);}
.nb .mon b{font-size:46px;}

/* ====== Variant C — single banner (一枚のれん) ====== */
.nc .kana-big{font-size:68px;letter-spacing:0;writing-mode:vertical-rl;text-orientation:upright;line-height:1.08;white-space:nowrap;height:auto;flex:none;}
.nc .brush{font-size:23px;}
.nc .en-caps{font-size:11px;writing-mode:horizontal-tb;}

/* ====== Variant D — modern minimal ====== */
.nd .mon{width:92px;height:92px;border-width:2px;}
.nd .mon b{font-size:40px;}
.nd .en-caps{font-size:13px;letter-spacing:.46em;}

/* ---- motion ---- */
@keyframes norenSway{
  0%,100%{ transform:rotate(-0.9deg) skewX(0.5deg); }
  50%    { transform:rotate(0.9deg)  skewX(-0.5deg); }
}
@media (prefers-reduced-motion:reduce){
  .noren__cloth{animation:none;}
}

/* ---- SP: noren 幅を画面に収める ----------------------------------------- */
@media (max-width: 768px) {
  .noren {
    --w: min(90vw, 340px);
    width: var(--w);
  }
  .noren__rod {
    width: calc(var(--w) + 48px);
  }
  .noren__cloth {
    width: var(--w);
  }
}