/* ============================================================
   front-extras.css — 記録映像（movie-band）／あゆみ（ayumi）／
   所有: Agent C
   トークン（--mag, --cyn, --ink, --r-x, --sh-x, --ease, --grad, .sec 骨格等）は
   style.css（Agent A所有）で定義済みのものを参照のみ。ここでは :root を定義しない。
   ============================================================ */

/* ============ 記録映像：ダークバンド ============ */
.movie-band{position:relative;background:var(--ink);color:#fff;padding-block:clamp(66px,9vw,116px);padding-inline:clamp(20px,6vw,80px);overflow:clip}
.movie-band::before{content:"";position:absolute;inset:0;opacity:.10;background:
  linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px) 0 0/100% 88px,
  linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px) 0 0/88px 100%}
.movie-band .sec__eyebrow{color:var(--yel)}
.movie-band .sec__title{color:#fff}
.movie-band .sec__tk{color:rgba(255,255,255,.55)}
.movie-band .tk b{color:var(--yel)}

.movies{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,32px)}
.movie__frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-m);overflow:hidden;cursor:pointer;
  background:#000;border:1px solid rgba(255,255,255,.16);transition:border-color .3s ease,transform .3s var(--ease)}
.movie__frame:hover{border-color:rgba(255,255,255,.5);transform:translateY(-4px)}
.movie__frame[data-ready="0"]{cursor:default}
.movie__thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.66;
  transition:transform .6s var(--ease),opacity .3s ease}
.movie__frame:hover .movie__thumb{transform:scale(1.05);opacity:.55}
/* scanline hover */
.movie__frame::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 4px);transition:opacity .3s ease}
.movie__frame:hover::after{opacity:1}
.movie__play{position:absolute;inset:0;margin:auto;width:62px;height:62px;border-radius:50%;
  background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-l);
  transition:transform .3s var(--ease)}
.movie__frame:hover .movie__play{transform:scale(1.12)}
.movie__play::after{content:"";margin-left:4px;border-style:solid;border-width:9px 0 9px 16px;
  border-color:transparent transparent transparent var(--ink)}
.movie__rec{position:absolute;top:12px;left:14px;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:#fff}
.movie__rec::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rc);
  animation:fxBlink 1.6s ease-in-out infinite}
@keyframes fxBlink{50%{opacity:.25}}
.movie--24{--rc:var(--mag)}.movie--25{--rc:var(--cyn)}
.movie__cap{margin-top:14px;display:flex;align-items:baseline;justify-content:flex-end;gap:10px}
.movie__cap .tk{color:rgba(255,255,255,.5)}
.movie__note{margin-top:26px;text-align:center;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;color:rgba(255,255,255,.45)}

/* iframe注入後（front-extras.jsが .movie__frame に生成） */
.movie__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media(max-width:768px){.movies{grid-template-columns:1fr}}

/* ============ あゆみ：6色レール年表 ============ */
.ayumi__rail{position:relative;display:flex;align-items:flex-start;justify-content:space-between;
  margin:16px 0 40px;padding-top:10px}
.ayumi__rail::before{content:"";position:absolute;left:2%;right:2%;top:15px;height:2px;
  background:linear-gradient(90deg,var(--cyn),var(--grn),var(--blu),var(--cor),var(--yel),var(--mag))}
.ayumi__node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;flex:1}
.ayumi__dot{width:12px;height:12px;border-radius:50%;background:var(--nc);border:3px solid #fff;
  box-shadow:0 0 0 2px var(--nc);transition:transform .25s var(--ease)}
.ayumi__node:hover .ayumi__dot{transform:scale(1.35)}
.ayumi__yr{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.06em}
.ayumi__label{font-size:10.5px;color:var(--muted);letter-spacing:.04em}
.ayumi__node--next .ayumi__yr{color:var(--mag)}
.ayumi__node--next .ayumi__label{color:var(--mag);font-weight:700}
.ayumi__foot{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}

@media(max-width:640px){
  .ayumi__rail{flex-wrap:wrap;gap:18px 0}
  .ayumi__rail::before{display:none}
  .ayumi__node{flex:0 0 33%}
}

@media screen and (max-width:600px){
        }

@media(prefers-reduced-motion:reduce){
  .movie__rec::before{animation:none!important}
}