/* GOOD CYCLE FES イベントページ 動きとギミック v1（2026-10-06）
   about / food-drive / vintage-on / booth / kitchen-car で共通。
   JS（gcf-motion-v1.js）が html に .mo-on を付けたときだけ動く。JSが動かなくても内容はすべて見える。 */

/* ── 1. 上の読み進みバー ── */
.mo-bar{position:fixed;left:0;top:0;height:4px;width:100%;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,#389B5A,#7FD49A 60%,#FFD23F);transform-origin:0 50%;transform:scaleX(0)}

/* ── 2. スクロールで出てくる ── */
.mo-on .mo-r{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--mo-d,0s)}
.mo-on .mo-r.mo-in{opacity:1;transform:none}

/* ── 3. 見出しのペン（緑の言葉に、黄色いマーカーを引く） ── */
.mo-on .sec .h2 em{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath d='M3 15.5C40 9 98 8.5 160 9.8 230 11 300 7.8 396 9.5c1.6 2.4 1.2 6.4-.6 8.6-70 .4-140 4-212 3.2C120 20.6 60 21.4 6 22.6c-2.6-1.8-3.6-4.6-3-7.1z' fill='%23FFD23F' fill-opacity='.78'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:0 92%;background-size:0% .5em;
  transition:background-size 1s cubic-bezier(.65,0,.35,1) .25s}
.mo-on .sec .h2.mo-pen em{background-size:100% .5em}

/* 小見出し（GUIDE など）の左の線が、さっと伸びる */
.mo-on .sec .eb::before{transform-origin:0 50%;transform:scaleX(0);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.mo-on .sec .eb.mo-pen::before{transform:none}

/* THEME「捨てる」の線と「つなぐ」の丸を、ペンで書くように */
.mo-on .mk path{stroke-dasharray:1;stroke-dashoffset:1}
.mo-on .mk-x path{transition:stroke-dashoffset .55s cubic-bezier(.6,0,.4,1) .3s}
.mo-on .mk-o path{transition:stroke-dashoffset 1s cubic-bezier(.55,0,.35,1) 1s}
.mo-on .mo-pen .mk path{stroke-dashoffset:0}
/* 線が引かれたあと「捨てる」が少しうすくなる */
.mo-on .mk-x{transition:color .4s ease .8s}
.mo-on .mo-pen .mk-x{color:#8B8F87}

/* ── 4. 来場ガイド（スライド） ── */
.gv{border:2.5px solid #141513;border-radius:18px;background:#fff;box-shadow:5px 6px 0 #141513;padding:clamp(10px,1.6vw,18px);display:grid;gap:12px;min-width:0}
.gv-stage{position:relative;min-width:0}
.gv-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border:2px solid #141513;border-radius:12px;background:#F4F3EC;scrollbar-width:none;overscroll-behavior-x:contain;outline:none}
.gv-track::-webkit-scrollbar{display:none}
.gv-track:focus-visible{box-shadow:0 0 0 3px #FFD23F}
.gv-slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;aspect-ratio:16/9;margin:0;min-width:0}
.gv-slide a{display:block;height:100%;cursor:zoom-in}
.gv-slide img{width:100%;height:100%;object-fit:contain;display:block}
/* パソコンでは、スライド・矢印・ページ数が1画面に収まる大きさに */
@media (min-width:761px){.gv{max-width:calc((100svh - 250px) * 16 / 9 + 40px);margin-inline:auto}}
.gv-nav{position:absolute;top:50%;z-index:2;width:54px;height:54px;margin-top:-27px;border-radius:50%;border:2.5px solid #141513;background:#fff;color:#141513;box-shadow:3px 4px 0 #141513;display:grid;place-items:center;cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .2s}
.gv-nav:hover{transform:translate(-2px,-2px);box-shadow:5px 6px 0 #141513}
.gv-nav:active{transform:translate(2px,3px);box-shadow:1px 1px 0 #141513}
.gv-nav:disabled{opacity:0;pointer-events:none}
.gv-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.gv-prev{left:-20px}.gv-next{right:-20px}
.gv-bar{display:flex;align-items:center;gap:12px;min-width:0}
.gv-count{font-family:"Montserrat","Zen Kaku Gothic New",sans-serif;font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap;min-width:4.6em}
.gv-count b{font-size:22px;color:#2C7D48}
.gv-prog{flex:1;height:6px;border-radius:99px;background:#E7E6DF;overflow:hidden;min-width:40px}
.gv-prog i{display:block;height:100%;width:5%;border-radius:99px;background:linear-gradient(90deg,#389B5A,#7FD49A);transition:width .35s cubic-bezier(.2,.7,.2,1)}
.gv-sbtn{flex:none;width:44px;height:44px;border-radius:50%;border:2px solid #141513;background:#fff;color:#141513;display:none;place-items:center;cursor:pointer}
.gv-sbtn:disabled{opacity:.3;cursor:default}
.gv-sbtn svg,.gv-zoom svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.gv-zoom{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:999px;border:2px solid #141513;background:#FFD23F;color:#141513;font:900 13px/1.2 "Zen Kaku Gothic New",sans-serif;cursor:pointer;box-shadow:3px 3px 0 #141513;transition:transform .15s,box-shadow .15s}
.gv-zoom:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #141513}
.gv-thumbs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin;min-width:0}
.gv-thumbs button{flex:0 0 auto;width:clamp(76px,10vw,112px);padding:0;border:2px solid #D8D7CF;border-radius:8px;overflow:hidden;background:#F4F3EC;cursor:pointer;opacity:.55;transition:opacity .2s,border-color .2s,transform .2s,box-shadow .2s}
.gv-thumbs button:hover{opacity:.9}
.gv-thumbs button[aria-current="true"]{opacity:1;border-color:#141513;box-shadow:2px 3px 0 #141513;transform:translateY(-2px)}
.gv-thumbs img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.gv-thumbs button:focus-visible,.gv-nav:focus-visible,.gv-sbtn:focus-visible,.gv-zoom:focus-visible{outline:3px solid #FFD23F;outline-offset:2px}
@media (max-width:760px){
  .gv-nav{display:none}
  .gv-sbtn{display:grid}
  .gv-zoom span{display:none}
  .gv-zoom{padding:0 12px}
}

/* 拡大表示 */
.gv-lb{position:fixed;inset:0;z-index:2147483647;background:rgba(20,21,19,.94);display:grid;grid-template-rows:auto 1fr auto;opacity:0;transition:opacity .25s;touch-action:pan-y pinch-zoom}
.gv-lb.on{opacity:1}
.gv-lb-top{display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 8px;color:#fff;font:800 15px "Montserrat",sans-serif}
.gv-lb-x{width:46px;height:46px;border-radius:50%;border:2px solid #fff;background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer}
.gv-lb-x svg,.gv-lb-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.gv-lb-img{display:grid;place-items:center;padding:0 12px;min-height:0}
.gv-lb-img img{max-width:min(1600px,100%);max-height:100%;width:auto;height:auto;border-radius:10px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.gv-lb-bot{display:flex;justify-content:center;gap:14px;padding:12px 16px calc(env(safe-area-inset-bottom,0px) + 16px)}
.gv-lb-nav{width:52px;height:52px;border-radius:50%;border:2px solid #fff;background:#fff;color:#141513;display:grid;place-items:center;cursor:pointer}
.gv-lb-nav:disabled{opacity:.3;cursor:default}
.gv-lb-hint{color:#C8E6CF;font-size:12px;align-self:center}
html.gv-lock,html.gv-lock body{overflow:hidden}

/* 印刷するときは、すべて表示 */
@media print{.mo-bar{display:none}.mo-r{opacity:1!important;transform:none!important}}

/* 動きを減らす設定の人には、動きを止めて最初から表示 */
@media (prefers-reduced-motion:reduce){
  .mo-bar{display:none}
  .mo-on .mo-r{opacity:1;transform:none;transition:none}
  .mo-on .sec .h2 em{background-size:100% .5em;transition:none}
  .mo-on .sec .eb::before{transform:none;transition:none}
  .mo-on .mk path{stroke-dashoffset:0;transition:none}
  .gv-prog i,.gv-thumbs button,.gv-lb{transition:none}
}