/* styles.css — stable build
   - header/footer top.png: quick expand, short shake, 1.5s smooth shrink, 3s idle
   - sliders + grids intact
*/
:root {
  --maxw: 1280px;
  --gap: 16px;
  --radius: 14px;
  --bg: #f7f8fb;
  --fg: #0f172a;
  --muted: #6b7280;
  --card: #ffffff;
  --border: rgba(0,0,0,.08);
  --shadow: 0 6px 20px rgba(0,0,0,.08);
  --brand: #2563eb;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0b0e14; --fg:#e5e7eb; --muted:#9aa1ad; --card:#0f1420; --border: rgba(255,255,255,.08); --shadow:0 8px 28px rgba(0,0,0,.5); }
}

/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.6;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: clamp(8px, 3vw, 18px); }
.site-head { margin-bottom: clamp(14px, 2.5vw, 22px); }
h1 { margin: 0 0 6px; font-size: clamp(1.0rem, 1rem + 0.5vw, 2.0rem); }
.lead { margin: 0; color: var(--muted); font-size: .95rem; }
.section {
  margin-top: clamp(20px, 6.0vw, 60px);
  margin-bottom: clamp(20px, 6.0vw, 60px);
}
.section-title { font-size: clamp(1.1rem, 0.9rem + 1vw, 1.6rem); margin: 0 0 10px; }
.note { color: var(--muted); font-size: .85rem; margin: 6px 2px 0; }

/* Card & Frame */
.card { margin: 0; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); }
.caption { padding: 10px 12px; font-size: .95rem; color: var(--muted); }

.frame-16x9, .frame-1x1 {
  position: relative;
  background: #e5e7eb;
  overflow: hidden;            /* scale/shake clipping */
  aspect-ratio: 16/9;
}
.frame-1x1 { aspect-ratio: 1/1; }

.media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

/* Layout helpers */
.stack { display: grid; gap: var(--gap); }
.grid  { display: grid; gap: var(--gap); }
.grid--square { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .grid--square { grid-template-columns: 1fr; } }

/* Slider */
.slider { display: grid; gap: 8px; }
.slider__viewport { overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); background: var(--card); }
.slider__track { display: flex; transition: transform 600ms ease; will-change: transform; height: 100%; }
.slide { position: relative; }

/* Numeric dots */
.slider__dots { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.slider__dots .dot {
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--card); color: var(--fg);
  display: grid; place-items: center; font-size: 1.1rem; line-height: 1; padding: 0; cursor: pointer;
}
.slider__dots .dot:hover { filter: brightness(0.98); }
.slider__dots .dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.slider__dots .dot.active { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 700; box-shadow: 0 2px 8px rgba(37,99,235,.35); }

/* Banner */
.banner { display: block; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); background: var(--card); }
.banner__img { display: block; width: 100%; height: auto; }

/* Header / Footer visuals off */
.site-head { background: transparent; box-shadow: none; border: 0;  margin-top: clamp(0px, 3.2vw, 0px); }
.site-foot { background: transparent; box-shadow: none; border: 0;  margin-top: clamp(0px, 3.2vw, 0px); }
.site-head .card, .site-foot .card { background: transparent; box-shadow: none; border: 0; }
.site-head .frame-16x9, .site-foot .frame-16x9 { background: transparent; }

/* ===== Motion: header/footer top.png =====
   Cycle = 5.5s (adds 3s idle after shrink)
   0.00–0.24s  : scale to 1.2
   0.24–0.72s  : shake (shorter)
   0.72–1.00s  : hold 1.2
   1.00–2.50s  : smooth back to 1.0 (1.5s)
   2.50–5.50s  : idle
*/
.fx-scale { animation: topScale 5.5s infinite both, topRound 5.5s infinite both; will-change: transform, border-radius; }
.fx-shake-rot { animation: topShake 5.5s infinite both; will-change: transform; }

@keyframes topScale {
  0%        { transform: scale(1); }
  4.364%    { transform: scale(1.2); }   /* 0.24s */
  18.182%   { transform: scale(1.2); }   /* 1.00s */
  45.455%   { transform: scale(1); }     /* 2.50s */
  100%      { transform: scale(1); }     /* idle to 5.50s */
}
@keyframes topRound {
  0%, 13.091%   { border-radius: var(--radius); } /* 0.72s */
  13.092%, 100% { border-radius: 0; }
}
@keyframes topShake {
  0%       { transform: translate(0,0) rotate(0deg); }
  2.182%   { transform: translate( 20px, -20px) rotate( 1.6deg); }  /* 0.12s */
  4.364%   { transform: translate(-30px,  10px) rotate(-1.8deg); }  /* 0.24s */
  6.545%   { transform: translate( 30px,  30px) rotate( 1.9deg); }  /* 0.36s */
  8.727%   { transform: translate(-20px, -30px) rotate(-1.7deg); }  /* 0.48s */
  10.909%  { transform: translate( 10px,  20px) rotate( 1.2deg); }  /* 0.60s */
  13.091%  { transform: translate(0,0) rotate(0deg); }              /* stop @0.72s */
  100%     { transform: translate(0,0) rotate(0deg); }
}

/* Reduced motion: keep .force-motion moving */
@media (prefers-reduced-motion: reduce) {
  .fx-shake-rot:not(.force-motion) { animation: none; }
}