/* Lucian UX/UI Prompt #073 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#073 */
/*
 * トップページの一番上の、お知らせが下から上へ流れる帯（lp/u073.js）。
 * 閉じると帯がたたまれ、ヘッダーにベルのボタンが出て、押すとまた開く。
 * 色は tokens.css の --z-* に対応させる（帯のグラデーションは元の紫→ピンクを、zaitoの青→紫に置き換え）。
 * サイトにダークテーマはまだないため、ダークの値は :root[data-theme="dark"] のときだけ使う。
 */
.u073,.u073-bell{
  --ux-surface-2:var(--z-surface);
  --ux-ink:var(--z-navy);
  --ux-accent:var(--z-blue);
  --ux-ease:cubic-bezier(.2,.8,.2,1);
  --ux-spring:cubic-bezier(.34,1.45,.64,1);
}
:root[data-theme="dark"] .u073,:root[data-theme="dark"] .u073-bell{--ux-surface-2:#1A1B25;--ux-ink:#F4F0E8;--ux-accent:#A9B8FF}
.u073,.u073 *,.u073 *::before,.u073 *::after{box-sizing:border-box}

.u073{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s var(--ux-ease)}
.u073.is-closed{grid-template-rows:0fr}
.u073>div{min-height:0;overflow:hidden}
.u073-bar{position:relative;height:56px;background:linear-gradient(100deg,#2A45D8,#3D5AFE 40%,#7B61FF);color:#fff;overflow:hidden}
.u073-bar::after{content:"";position:absolute;top:0;bottom:0;width:80px;left:-100px;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);animation:u073-shine 4.5s ease-in-out infinite;pointer-events:none}
/* 横幅いっぱいの帯なので、光の通る距離だけ画面幅に合わせている */
@keyframes u073-shine{0%,60%{transform:translateX(0)}100%{transform:translateX(calc(100vw + 200px))}}
.u073-in{display:flex;align-items:center;gap:6px;height:100%;max-width:var(--z-max);margin:0 auto;padding:0 6px 0 12px}
.u073-tag{height:22px;padding:0 7px;border-radius:7px;flex:none;display:inline-flex;align-items:center;background:rgba(255,255,255,.22);font-size:10.5px;font-weight:900;letter-spacing:.06em}
.u073-msgs{position:relative;flex:1;height:100%;overflow:hidden}
.u073-m{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;color:#fff;text-decoration:none;transform:translateY(100%);opacity:0;transition:transform .55s var(--ux-ease),opacity .4s}
.u073-m:hover{color:#fff}
.u073-m.on{transform:none;opacity:1}
.u073-m.up{transform:translateY(-100%);opacity:0}
.u073-m b{font-size:13.5px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u073-m span{font-size:11.5px;font-weight:600;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u073-m:focus-visible{outline:2px solid #fff;outline-offset:-2px;border-radius:6px}
.u073-segs{display:flex;gap:3px;flex:none}
.u073-segs i{width:12px;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.u073-segs i::after{content:"";display:block;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(var(--f,0))}
.u073-b{width:30px;height:30px;flex:none;border:0;padding:0;border-radius:9px;display:grid;place-items:center;background:none;color:#fff;cursor:pointer;transition:background-color .2s,transform .3s var(--ux-spring)}
.u073-b:hover{background:rgba(255,255,255,.18)}
.u073-b:active{transform:scale(.88)}
.u073-b:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.u073-b svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* ヘッダーのベル（閉じたあとだけ出る） */
.u073-bell{width:34px;height:34px;flex:none;border:0;padding:0;border-radius:50%;display:grid;place-items:center;background:var(--ux-surface-2);color:var(--ux-ink);cursor:pointer;opacity:0;transform:scale(.5);pointer-events:none;transition:opacity .3s,transform .45s var(--ux-spring)}
.u073-bell[hidden]{display:none}
.u073-bell.on{opacity:1;transform:none;pointer-events:auto;transition-delay:.25s}
.u073-bell svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u073-bell:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .u073,.u073 *,.u073 *::before,.u073 *::after,.u073-bell{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* お知らせのリンク先（固定ヘッダーの下に隠れないように） */
#zrefine,#zcards{scroll-margin-top:84px}