/* =========================================================
   酒と私 — noren.css
   暖簾オープニング演出（DOM は js/noren.js が #noren-root に生成）

   構造:
   #noren ........... 全画面の幕（role=button・夜の暗がり）
     ├ .noren-doorway ...... 店の入口の枠（PC=中央のドア / スマホ=全画面）
     │    ├ .noren-rod ...... 上端の木の竿
     │    └ .noren-panels ... 布の置き場（perspective: 900px）
     │         └ .noren-panel × 3（style="--i:0/1/2"）
     └ .noren-hint ..... 「のれんを くぐる」案内

   状態クラス（noren.js が付与）:
   .is-open ... めくれ再生中（中央900ms＋両脇120ms遅れ ≒ 全体約1秒）
                アニメ終了後の display:none は noren.js が行う

   ※アニメは transform / opacity のみ（GPU合成で軽量）
   ========================================================= */

/* 暖簾が開くまで本文スクロール禁止（noren.js が body に付け外しする） */
body.noren-closed { overflow: hidden; }

#noren {
  position: fixed;
  inset: 0;
  z-index: var(--z-noren);
  perspective: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none; /* スワイプで背面ページが動かないように */

  /* base.css のトークンから作る半透明色（このファイル内専用） */
  --noren-kage:     color-mix(in srgb, var(--sumi) 30%, transparent);   /* 布の薄影 */
  --noren-kage-koi: color-mix(in srgb, var(--sumi) 60%, transparent);   /* 濃い影 */
  --noren-fuchi:    color-mix(in srgb, var(--kinari) 35%, transparent); /* 生成りの縁 */
  --noren-akari:    color-mix(in srgb, var(--kin) 40%, transparent);    /* 提灯の灯り */
}

#noren:focus-visible {
  outline: 2px dashed var(--kinari);
  outline-offset: -8px;
}

/* ---- 暗幕（夜の入口の暗さ）。入店と同時にフェードアウトして明るく ---- */
#noren::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--sumi); /* color-mix 非対応ブラウザでも暗幕は出る保険 */
  background-image:
    radial-gradient(ellipse 110% 55% at 50% 102%, var(--noren-akari), transparent 65%),
    linear-gradient(180deg, color-mix(in srgb, var(--sumi) 88%, black), var(--sumi));
  transition: opacity 760ms ease 100ms;
}
#noren.is-open::before { opacity: 0; }

/* ---- 入店の光（一瞬ふわっと明るくなるワンショット）---- */
#noren::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    ellipse 85% 65% at 50% 42%,
    color-mix(in srgb, var(--kinari) 85%, transparent),
    transparent 70%
  );
}
#noren.is-open::after {
  animation: noren-akari-pulse 880ms ease-out 160ms both;
}
@keyframes noren-akari-pulse {
  0%   { opacity: 0; }
  45%  { opacity: 0.9; }
  100% { opacity: 0; }
}

/* ---- 店の入口の枠 ----
   スマホ: 画面いっぱい（従来どおり）
   PC（700px以上）: 中央に「入口」として飾る。まわりは夜の暗がり、
   布の裾の下からは店のあたたかい灯りが漏れる */
.noren-doorway {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ---- 上端の竿（木目調・CSSグラデのみ）---- */
.noren-rod {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  height: clamp(20px, 3.2vh, 30px);
  background-color: var(--kin);
  background-image:
    /* 丸棒の陰影（上ハイライト・下が沈む） */
    linear-gradient(180deg,
      var(--noren-fuchi) 0%,
      transparent 35%,
      var(--noren-kage) 78%,
      var(--noren-kage-koi) 100%),
    /* 木目（間隔のちがう縦筋） */
    repeating-linear-gradient(90deg,
      var(--noren-kage) 0 1px, transparent 1px 9px,
      var(--noren-kage) 9px 10px, transparent 10px 31px,
      transparent 31px 47px);
  box-shadow: 0 3px 12px var(--noren-kage-koi);
}

/* ---- 布3枚 ---- */
.noren-panels {
  position: absolute;
  inset: clamp(12px, 2vh, 19px) 0 0 0; /* 竿の下から吊るす */
  z-index: 1;
  display: flex;
  gap: clamp(2px, 0.4vw, 5px); /* 布の切れ目（奥の暗がりが覗く） */
  perspective: 900px;
  perspective-origin: 50% 0%;
}

.noren-panel {
  /* ▼写真のトリミング位置（縦方向）。50%=中央 / 0%=写真の上側 / 100%=下側。
     写真の見せたい高さに合わせて調整できる（仮アートは50%のままでOK） */
  --noren-focus: 50%;
  --waki-rot: 0deg; /* めくれ時に両脇がひらく角度（nth-childで上書き） */

  flex: 1 1 0;
  min-width: 0;
  position: relative;
  overflow: hidden; /* 自分の担当分だけ「窓」のように見せる */
  background-color: var(--kinari);

  transform-origin: 50% 0; /* 竿に吊られている支点 */
  will-change: transform;

  animation: noren-sway 4.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.7s); /* 位相をずらして布の波に見せる */
}

/* 布の絵柄：3枚で1枚の絵を分け合う。
   画面いっぱいの絵（cover＝歪まない）を敷き、各布は自分の位置へ横にずらして
   担当分だけ覗かせる。写真でもSVGでも縦横比が崩れない方式。
   写真（assets/photos/noren.jpg）を置くだけで実写に切り替わる多重背景
   （写真が無い間は下層の仮アートSVGが表示される。コード編集ゼロ） */
.noren-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--i) * -100%); /* 0 / -100% / -200% で表示窓をずらす */
  width: 300%;
  height: 100%;
  background-image: url("../assets/photos/noren.jpg"), url("../assets/brand/noren-art.svg");
  background-size: cover;
  background-position: 50% var(--noren-focus);
  background-repeat: no-repeat;
}

/* 布の陰影（竿の落ち影・両端の丸み）。絵柄の上に重ねる */
.noren-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, var(--noren-kage-koi), transparent 14px),
    linear-gradient(90deg,  var(--noren-kage), transparent 9px),
    linear-gradient(270deg, var(--noren-kage), transparent 9px);
}

/* アイドル: ゆったり揺れる（rotateX で裾がほんのり持ち上がる） */
@keyframes noren-sway {
  0%, 100% { transform: rotate(0.6deg)  skewX(1deg)  rotateX(0.3deg); }
  50%      { transform: rotate(-0.6deg) skewX(-1deg) rotateX(2.1deg); }
}

/* ---- 案内（ゆっくり明滅）---- */
.noren-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(30px, 8vh, 76px);
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  pointer-events: none;
  color: var(--kinari);
  font-family: var(--font-mincho);
  font-size: clamp(13px, 1.6vw, 16px);
  letter-spacing: 0.26em;
  text-align: center;
  animation: noren-hint-blink 2.8s ease-in-out infinite;
  transition: opacity 200ms ease;
}
.noren-hint-arrow {
  display: block;
  animation: noren-hint-bob 1.9s ease-in-out infinite;
}
.noren-hint-text {
  display: inline-block;
  padding: 0.4em 1.1em 0.42em 1.36em; /* letter-spacing の右余白ぶん左を厚く */
  background: var(--noren-kage-koi);
  border: 1px solid var(--noren-fuchi);
  border-radius: 999px;
  white-space: nowrap;
}
@keyframes noren-hint-blink {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
@keyframes noren-hint-bob {
  0%, 100% { transform: translateY(3px); }
  50%      { transform: translateY(-3px); }
}

/* =========================================================
   めくれ（入店）: .is-open
   中央の布を手で押し上げてくぐる → 両脇が 120ms 遅れて追従
   ========================================================= */
#noren.is-open {
  pointer-events: none; /* 再生中からもう操作を妨げない */
  cursor: default;
}
#noren.is-open .noren-hint {
  animation: none;
  opacity: 0;
}

/* 両脇（--i:0 / --i:2）… 120ms 遅れて追従 */
#noren.is-open .noren-panel {
  animation: noren-kuguru-waki 880ms cubic-bezier(0.30, 0.86, 0.24, 1) 120ms forwards;
}
#noren.is-open .noren-panel:nth-child(1) { --waki-rot: -2.5deg; }
#noren.is-open .noren-panel:nth-child(3) { --waki-rot: 2.5deg; }

/* 中央（--i:1）… 手で押し上げる本命 */
#noren.is-open .noren-panel:nth-child(2) {
  animation: noren-kuguru-naka 900ms cubic-bezier(0.26, 0.92, 0.22, 1.02) forwards;
}

@keyframes noren-kuguru-naka {
  0%   { transform: rotateX(0deg) translateY(0);     opacity: 1; }
  62%  {                                             opacity: 1; }
  100% { transform: rotateX(76deg) translateY(-12%); opacity: 0; }
}
@keyframes noren-kuguru-waki {
  0%   { transform: rotate(0deg) rotateX(0deg) translateY(0);                opacity: 1; }
  62%  {                                                                     opacity: 1; }
  100% { transform: rotate(var(--waki-rot)) rotateX(64deg) translateY(-8%);  opacity: 0; }
}

/* （演出終了後の display:none は noren.js が直接行う） */

/* =========================================================
   PC・タブレット（700px以上）:
   暖簾を「店の入口」として中央に飾る（ドアップ防止）
   ========================================================= */
@media (min-width: 700px) {
  .noren-doorway {
    position: relative;
    inset: auto;
    /* 入口の縦横比は約 5:7。画面の高さ・幅どちらにも収まるように */
    width:  min(clamp(420px, 34vw, 600px), calc(84vh * 0.72));
    height: min(84vh, calc(clamp(420px, 34vw, 600px) / 0.72));

    /* 木の門柱（枠）と、枠の中の暗がり＋足元から漏れる店の灯り */
    border: 10px solid color-mix(in srgb, var(--kin) 26%, var(--sumi));
    border-radius: 3px;
    box-shadow:
      0 0 0 1px color-mix(in srgb, black 55%, transparent),
      0 22px 70px color-mix(in srgb, black 55%, transparent);
    background-image:
      radial-gradient(ellipse 95% 32% at 50% 102%, var(--noren-akari), transparent 72%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--sumi) 92%, black),
        color-mix(in srgb, var(--sumi) 78%, black));
  }

  /* 竿は枠より少し長く（掛け金具に乗っている感じ） */
  .noren-doorway .noren-rod {
    left: -18px;
    right: -18px;
    border-radius: 4px;
  }

  /* 布は床まで届かせず、裾の下から灯りをのぞかせる */
  .noren-doorway .noren-panels {
    bottom: 6.5%;
  }

  /* 案内は入口の下の暗がりに */
  .noren-hint {
    bottom: 3.2vh;
  }
}

/* =========================================================
   アニメを控えたい人へ: めくれ無しの 400ms フェードのみ
   ※ base.css の「*に0.01ms」一括指定より優先させるため !important
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  #noren .noren-panel,
  #noren .noren-hint,
  #noren .noren-hint-arrow,
  #noren.is-open .noren-panel,
  #noren.is-open::after {
    animation: none !important;
  }
  #noren {
    transition: opacity 400ms ease !important;
  }
  #noren.is-open { opacity: 0; }
}