/* ============================================================
   リキッドグラス と 反射
   読みやすさを壊さない範囲で、質感だけを上げる
   ============================================================ */

/* ---------- ヘッダー：厚みのあるガラス ---------- */
.bar{
  background:
    linear-gradient(180deg, rgba(38,46,49,.62) 0%, rgba(16,20,22,.78) 100%) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),      /* 上端の光 */
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 8px 26px rgba(0,0,0,.30);
}

/* ヘッダーの上を、ゆっくり光が流れる */
.bar::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(105deg,
    transparent 30%,
    rgba(255,255,255,.055) 45%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.055) 55%,
    transparent 70%);
  background-size:260% 100%;
  animation:glassflow 14s linear infinite;
}
@keyframes glassflow{
  from{ background-position:200% 0; }
  to  { background-position:-60% 0; }
}

/* お知らせの帯・営業状況も同じ質感に */
.newsbar,
#today-open{
  background:
    linear-gradient(180deg, rgba(36,44,47,.6) 0%, rgba(22,28,30,.78) 100%) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}

/* ---------- カード：ふちに光を回す ---------- */
.card,
.tile,
.panel,
.co__block,
.gl__row{
  position:relative;
  background:
    linear-gradient(160deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 42%),
    var(--ink-2);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 12px 30px rgba(0,0,0,.22);
  transition:box-shadow .4s ease, border-color .4s ease, transform .4s ease;
}

.sec--dark .card{
  background:
    linear-gradient(160deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 42%),
    var(--ink);
}

.card:hover,
.tile:hover{
  border-color:rgba(127,179,166,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 44px rgba(0,0,0,.34);
}

/* ---------- 商品写真：ガラスの反射が斜めに流れる ---------- */
.tile__img{ position:relative; }

.tile__img::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(112deg,
    transparent 36%,
    rgba(255,255,255,.10) 47%,
    rgba(255,255,255,.20) 50%,
    rgba(255,255,255,.10) 53%,
    transparent 64%);
  background-size:280% 100%;
  background-position:200% 0;
  opacity:0;
  transition:opacity .5s ease;
}

.tile:hover .tile__img::after{
  opacity:1;
  animation:shine 1.5s cubic-bezier(.3,.6,.3,1) forwards;
}

@keyframes shine{
  from{ background-position:200% 0; }
  to  { background-position:-80% 0; }
}

/* 触れる端末では、常にゆっくり反射させる */
@media (hover:none){
  .tile__img::after{
    opacity:.55;
    animation:shineloop 7s linear infinite;
  }
  @keyframes shineloop{
    0%   { background-position:200% 0; }
    55%  { background-position:-80% 0; }
    100% { background-position:-80% 0; }
  }
}

/* ---------- ボタン：押せる面にガラスの厚み ---------- */
.btn{
  position:relative;
  overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}

.btn::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(112deg,
    transparent 40%,
    rgba(255,255,255,.22) 50%,
    transparent 60%);
  background-size:280% 100%;
  background-position:200% 0;
  opacity:0;
  transition:opacity .3s;
}
.btn:hover::after{
  opacity:1;
  animation:shine 1.1s cubic-bezier(.3,.6,.3,1) forwards;
}

/* 明るいボタンは光を弱める（白飛び防止） */
.btn--solid::after{ background:linear-gradient(112deg,
    transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%);
  background-size:280% 100%; background-position:200% 0; }

/* ---------- 画面全体のざらつき（高級感の下地） ---------- */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 動きを減らす設定の端末では止める ---------- */
@media (prefers-reduced-motion:reduce){
  .bar::after,
  .tile__img::after,
  .btn::after{ animation:none !important; opacity:0 !important; }
  body::after{ opacity:.02; }
}