/* =====================================================================
   genba-field.css — GENBA FIELD 共有動的レイヤー（ハブページ用）
   genba-field.js が装飾DOM（粒状ノイズ/グリッド線/プログレスバー/
   レティクル/ヒーロー粒子キャンバス）を注入する。追加型・レイアウト不変。
   パレット: 紙 #F7F5EF × インク #0E2233 × レッド #C5963A
   ===================================================================== */

/* ---------- 背景レイヤー ---------- */
.gf-gridlines{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(14,34,51,.05) 1px,transparent 1px);
  background-size:calc(100%/6) 100%;
}
.gf-grain{
  position:fixed;inset:0;z-index:900;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---------- 下端プログレスバー（赤） ---------- */
.gf-progress{position:fixed;left:0;bottom:0;width:100%;height:3px;z-index:1400;pointer-events:none;}
.gf-progress b{display:block;height:100%;width:100%;background:#C5963A;transform:scaleX(0);transform-origin:left;}

/* ---------- ヒーロー粒子キャンバス ---------- */
[data-gf-hero]{position:relative;}
.gf-field{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
[data-gf-hero] > :not(.gf-field){position:relative;z-index:1;}

/* ---------- レティクルカーソル（座標付き） ---------- */
html.gf-cursor,html.gf-cursor a,html.gf-cursor button{cursor:none;}
.gf-ret{position:fixed;left:0;top:0;z-index:1500;pointer-events:none;display:none;will-change:transform;}
html.gf-cursor .gf-ret{display:block;}
.gf-ret .rc::before,.gf-ret .rc::after{content:'';position:absolute;background:#0E2233;transition:opacity .18s;}
.gf-ret .rc::before{left:-7px;top:-.5px;width:14px;height:1px;}
.gf-ret .rc::after{left:-.5px;top:-7px;width:1px;height:14px;}
.gf-ret .rdot{position:absolute;left:-1.5px;top:-1.5px;width:3px;height:3px;background:#C5963A;border-radius:50%;}
.gf-ret .rbox{
  position:absolute;left:-14px;top:-14px;width:28px;height:28px;
  border:1px solid #C5963A;opacity:0;transform:scale(.4);
  transition:opacity .18s,transform .22s cubic-bezier(.16,1,.3,1);
}
.gf-ret.on .rbox{opacity:1;transform:scale(1);}
.gf-ret.on .rc::before,.gf-ret.on .rc::after{opacity:0;}
.gf-ret .rlab{
  position:absolute;left:16px;top:12px;white-space:nowrap;
  font:500 .5rem 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.18em;color:#8A887F;
}

/* ---------- スクロールリビール ---------- */
.gf-pre{opacity:0;transform:translateY(24px);}
.gf-in{opacity:1;transform:none;transition:opacity .8s ease,transform .85s cubic-bezier(.16,1,.3,1);}

/* ---------- デコード演出のスクランブル部 ---------- */
.gf-hx{opacity:.4;}

/* ---------- 常駐コーナーHUD（デスクトップのみ） ---------- */
.gf-hud{
  position:fixed;left:18px;bottom:14px;z-index:1300;pointer-events:none;
  font:500 .56rem 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.24em;text-transform:uppercase;color:#8A887F;
  display:flex;align-items:center;gap:.7rem;
}
.gf-hud i{width:6px;height:6px;background:#C5963A;border-radius:50%;animation:gfpulse 1.6s ease infinite;}
.gf-hud-r{position:fixed;right:18px;bottom:14px;left:auto;}
@keyframes gfpulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (max-width:1100px){.gf-hud{display:none;}}

/* ---------- メディア保存の抑止（右クリック/ドラッグ/長押し） ---------- */
img,video,picture{
  -webkit-user-drag:none;user-drag:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;user-select:none;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .gf-field,.gf-ret,.gf-grain,.gf-hud{display:none !important;}
  .gf-pre{opacity:1 !important;transform:none !important;}
}