/* ============================================================
   esccoコンパス — トップページの動き
   app/static/css/compass.css として新規に置き、index.html から
   app.css の後に読み込む。既存のセレクタは上書きせず、追加のみ。
   ============================================================ */

:root{
  --cmp-navy:#0E2350;
  --cmp-blue:#3B7CC4;
  --cmp-gold:#D99A2B;
}

/* ── コンパス本体 ─────────────────────────── */

.compass{
  position:relative;
  width:100%;
  max-width:340px;
  margin:0 auto;
  aspect-ratio:1;
}

/* 起動時：方位磁針が大きく振れ、行き過ぎて戻り、北で止まる。 */
.compass__rose{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform-origin:50% 50%;
  animation:cmp-seek 2.4s cubic-bezier(.34,1.28,.4,1) both;
}
@keyframes cmp-seek{
  0%  {transform:rotate(-56deg) scale(.94);opacity:0}
  20% {opacity:1}
  55% {transform:rotate(10deg) scale(1)}
  78% {transform:rotate(-3.5deg)}
  100%{transform:rotate(0)}
}

/* 静止後もわずかに揺れている。止まりきらないのが方位磁針らしさ。 */
.compass.is-live .compass__rose{
  animation:cmp-breathe 7s ease-in-out 0s infinite;
}
@keyframes cmp-breathe{
  0%,100%{transform:rotate(0)}
  50%    {transform:rotate(.9deg)}
}

.compass__bearing{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}

/* app.css の .hero__art svg{max-width:320px} は、重ねてある この SVG にも
   効いてしまい、針が画像とズレる。既存行は触らず、詳細度で打ち消す。 */
.hero__art .compass__bearing{max-width:none}

/* 狭い画面。app.css の .hero__art svg{max-width:200px} と大きさを揃える。 */
@media(max-width:820px){
  .compass{max-width:200px}
}

/* 針の向き。JS が --deg を書き換える。CSS の遷移で重みを出す。 */
.compass__needle{
  transform-origin:170px 170px;
  transform:rotate(var(--deg,45deg));
  transition:transform .9s cubic-bezier(.22,1.4,.36,1);
}

.compass__ray{
  fill:none;
  stroke:var(--cmp-blue);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:130;
  stroke-dashoffset:130;
  animation:cmp-draw 1.2s cubic-bezier(.2,.9,.3,1) 2.2s forwards;
}
@keyframes cmp-draw{to{stroke-dashoffset:0}}

.compass__dot{
  fill:var(--cmp-blue);
  opacity:0;
  animation:cmp-pop .5s ease 3.2s forwards;
}
@keyframes cmp-pop{to{opacity:1}}

.compass__halo{
  fill:none;
  stroke:var(--cmp-blue);
  stroke-width:1.5;
  opacity:0;
  animation:cmp-halo 2.2s ease 3.3s infinite;
}
@keyframes cmp-halo{
  0%  {r:4;opacity:.55}
  100%{r:24;opacity:0}
}

/* カーソルが乗っているあいだは線と着地点を強める。 */
.compass.is-aiming .compass__ray{stroke-width:2.6}
.compass.is-aiming .compass__dot{r:5.5}

/* ── ヒーロー周辺 ───────────────────────── */

.eyebrow .dot{
  animation:cmp-blink 2.4s ease-in-out infinite;
}
@keyframes cmp-blink{
  0%,100%{opacity:1}
  50%    {opacity:.35}
}

.hero__actions .btn-primary{
  position:relative;
  overflow:hidden;
  transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease;
}
.hero__actions .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px -10px rgba(14,35,80,.55);
}
/* 押したときに一度だけ光が横切る。常時光らせない。 */
.hero__actions .btn-primary::after{
  content:"";
  position:absolute;
  top:0;left:-60%;
  width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);
  transform:skewX(-18deg);
  transition:left .55s ease;
}
.hero__actions .btn-primary:hover::after{left:120%}

.hero__actions .btn-ghost{
  transition:transform .2s ease, color .2s ease;
}
.hero__actions .btn-ghost:hover{transform:translateX(3px)}

/* ── 4つの力カード ──────────────────────── */

.fcard{
  position:relative;
  overflow:hidden;
  transition:transform .26s cubic-bezier(.22,1,.36,1),
             box-shadow .26s ease,
             border-color .26s ease;
}
.fcard:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 32px -18px rgba(14,35,80,.42);
}

/* 上辺を金の線がなぞる。カードごとに方角が違う、という含み。 */
.fcard::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:100%;height:2px;
  background:var(--cmp-gold);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .38s cubic-bezier(.22,1,.36,1);
}
.fcard:hover::before{transform:scaleX(1)}

.fcard__no{
  transition:color .26s ease, transform .26s ease;
}
.fcard:hover .fcard__no{
  color:var(--cmp-gold);
  transform:translateX(2px);
}

.fcard__ic{
  transition:transform .4s cubic-bezier(.34,1.4,.4,1);
}
.fcard:hover .fcard__ic{transform:rotate(-8deg) scale(1.08)}

/* ── 動きを減らす設定 ───────────────────── */

@media (prefers-reduced-motion:reduce){
  .compass__rose,
  .compass__ray,
  .compass__dot,
  .compass__halo,
  .eyebrow .dot{animation:none}
  .compass__rose{transform:none;opacity:1}
  .compass__needle{transition:none}
  .compass__ray{stroke-dashoffset:0}
  .compass__dot{opacity:1}
  .compass__halo{display:none}
  .fcard,.fcard__no,.fcard__ic,
  .hero__actions .btn-primary,
  .hero__actions .btn-ghost{transition:none}
  .hero__actions .btn-primary::after{display:none}
}