/* /assets/css/latest.css（全文：追記あり＝HomeはPCのみSTARTまで隠す）
   ※変更点は「HOME gating」ブロックのみ（PC限定化）。 */

/* =========================================================
   0) Latest-only fonts
   ========================================================= */

/* tspc98 の @font-face は base.css に移動済み */

/* =========================================================
   1) Tuning variables（ここだけ触ればOK）
   ========================================================= */

.latest{
  --latest-w-pc: 90%;
  --latest-w-sp: 90%;
  --latest-ar-pc: 4 / 1;
  --latest-ar-sp: 4 / 1;
  --latest-bottom-pc: 5%;
  --latest-bottom-sp: 5%;
  --latest-fs-pc: clamp(calc(14px * var(--pc-ui-scale, 1)), 1.6vw, calc(24px * var(--pc-ui-scale, 1)));
  --latest-fs-sp: clamp(10px, 4.2vw, 12px);
  --latest-h-pc: auto;
  --latest-h-sp: auto;

  --latest-pad-l-pc: 4%;
  --latest-pad-r-pc: 4%;
  --latest-pad-t-pc: 0%;
  --latest-pad-b-pc: 0%;

  --latest-pad-l-sp: 4%;
  --latest-pad-r-sp: 4%;
  --latest-pad-t-sp: 0%;
  --latest-pad-b-sp: 0%;

  --latest-fw-pc: 400;
  --latest-fw-sp: 400;

  --latest-lh: 1.3;
  --latest-track: 0.2em;

  --latest-text: rgba(245,245,245,1.00);
  --latest-stroke: rgba(3, 25, 20, 0.5);
  --latest-stroke-w: calc(0.6px * var(--pc-ui-scale, 1));

  --latest-font: "wapuro","tspc98","MOBO", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", Arial, sans-serif;

  --latest-w: var(--latest-w-pc);
  --latest-ar: var(--latest-ar-pc);
  --latest-bottom: var(--latest-bottom-pc);
  --latest-fs: var(--latest-fs-pc);
  --latest-h: var(--latest-h-pc);
  --latest-pad-l: var(--latest-pad-l-pc);
  --latest-pad-r: var(--latest-pad-r-pc);
  --latest-pad-t: var(--latest-pad-t-pc);
  --latest-pad-b: var(--latest-pad-b-pc);
  --latest-fw: var(--latest-fw-pc);

  --latest-appear-ms: var(--motion-latest-appear, 1500ms);
}

@media (max-width: 767px){
  .latest{
    --latest-w: var(--latest-w-sp);
    --latest-ar: var(--latest-ar-sp);
    --latest-bottom: var(--latest-bottom-sp);
    --latest-fs: var(--latest-fs-sp);
    --latest-h: var(--latest-h-sp);
    --latest-pad-l: var(--latest-pad-l-sp);
    --latest-pad-r: var(--latest-pad-r-sp);
    --latest-pad-t: var(--latest-pad-t-sp);
    --latest-pad-b: var(--latest-pad-b-sp);
    --latest-fw: var(--latest-fw-sp);
  }
}

/* =========================================================
   HOME gating（修正）
   - PCだけ：トップページは PRESS START まで Latest を完全に隠す
   - SPは：最初から表示（＝このブロックは効かせない）
   ========================================================= */
@media (min-width: 768px){
  body[data-page="main"]:not(.is-started) #latest{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* =========================================================
   2) Layout
   ========================================================= */

.latest{
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--latest-bottom);
  z-index: 5;

  pointer-events: auto;

  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  opacity: 1;
  visibility: visible;
  /*
     NOTE:
     - visibility に delay を入れると「表示時」にも遅延が掛かり、
       opacity のフェード中ずっと不可視 → 最後にパッと出る事故が起きる。
     - なので通常状態は visibility 即時（delay 0）。
     - 隠す時（.is-hidden）だけ visibility をフェード時間ぶん遅延させる。
  */
  transition:
    opacity var(--motion-latest-fade, 1500ms) var(--ease, ease),
    visibility 0s linear 0s;

  --latest-float-amp-pc: calc(6px * var(--pc-ui-scale, 1));
  --latest-float-amp-sp: 2px;
  --latest-float-dur: var(--motion-latest-float, 4s);
  --latest-float-amp: var(--latest-float-amp-pc);
}

@media (max-width: 767px){
  .latest{
    --latest-float-amp: var(--latest-float-amp-sp);
  }
}

.latest:not(.is-hidden){
  animation: latestFloat var(--latest-float-dur) ease-in-out infinite;
  will-change: transform;
}

@keyframes latestFloat{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(calc(var(--latest-float-amp) * -1)); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .latest:not(.is-hidden){
    animation: none;
  }
}

.latest-inner{
  width: var(--latest-w);
  margin: 0 auto;

  pointer-events: auto;
  position: relative;
  overflow: hidden;

  aspect-ratio: var(--latest-ar);
  height: var(--latest-h);

  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;

  cursor: pointer;

  display: grid;
  place-items: center start;
  text-align: left;

  padding-left: var(--latest-pad-l);
  padding-right: var(--latest-pad-r);
  padding-top: var(--latest-pad-t);
  padding-bottom: var(--latest-pad-b);

  color: var(--latest-text);
  font-family: var(--latest-font);
  font-weight: var(--latest-fw);
  letter-spacing: var(--latest-track);
  line-height: var(--latest-lh);
  font-size: var(--latest-fs);

  -webkit-text-stroke: var(--latest-stroke-w) var(--latest-stroke);

  text-shadow:
    0 0 0 var(--latest-stroke),
    0 1px 0 var(--latest-stroke),
    1px 0 0 var(--latest-stroke),
    -1px 0 0 var(--latest-stroke),
    0 -1px 0 var(--latest-stroke),
    1px 1px 0 var(--latest-stroke),
    -1px 1px 0 var(--latest-stroke),
    1px -1px 0 var(--latest-stroke),
    -1px -1px 0 var(--latest-stroke);

  white-space: normal;
  overflow: visible;
  text-overflow: clip;

  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.latest-inner *{
  -webkit-user-select: none;
  user-select: none;
}

.latest--show .latest-inner{
  background-image: url("/pages/latest/field3.png");
}

.latest--hide .latest-inner{
  background-image: url("/pages/latest/fieldagain.png");
  color: transparent;
  -webkit-text-stroke: 0 transparent;
  text-shadow: none;
  place-items: center;
  text-align: center;
}

body.is-ready .latest.is-appear{
  opacity: 0;
  visibility: visible;
  pointer-events: none;
}

body.is-ready .latest.is-appear.is-appear--on{
  opacity: 1;
  pointer-events: none;
  transition: opacity var(--latest-appear-ms) ease;
}

.latest--show .latest-inner::after{
  content:"";
  position:absolute;
  top:-5%;
  left:-60%;
  width:40%;
  height:120%;
  transform: skewX(-18deg);

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.16) 45%,
    rgba(255,255,255,0.28) 50%,
    rgba(255,255,255,0.16) 55%,
    transparent 100%
  );

  pointer-events:none;
  animation: latestGlint var(--motion-latest-glint, 1500ms) var(--ease-out, ease-out) var(--motion-latest-glint-delay, 1000ms) 1;
}

@keyframes latestGlint{
  from{ left:-60%; opacity:0; }
  20% { opacity:1; }
  to { left:120%; opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .latest--show .latest-inner::after{ animation: none; }
}

.hero{
  padding-bottom: 0;
}
@media (max-width: 767px){
  .hero{
    padding-bottom: 0;
  }
}

.latest--show.is-flash .latest-inner{
  filter: brightness(1.35) saturate(1.10) contrast(1.05);
}

.latest-inner{
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  outline: none;
}

.latest-inner{
  transition: transform var(--motion-ui-tap, 120ms) var(--ease, ease), filter var(--motion-ui-tap, 120ms) var(--ease, ease);
  transform-origin: center;
}

.latest-inner:active{
  transform: scale(0.99);
  filter: brightness(1.55) contrast(1.05) saturate(1.05);
}

.latest-inner::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,0.0);
  pointer-events:none;
  transition: background var(--motion-ui-tap, 120ms) var(--ease, ease);
}

.latest-inner:active::before{
  background: rgba(255,255,255,0.14);
}

.latest--hide .latest-inner{
  transition: transform var(--motion-ui-tap, 120ms) var(--ease, ease);
}

.latest--hide .latest-inner:active{
  transform: scale(0.99);
  filter: none;
}

.latest--hide .latest-inner::before{
  background: rgba(255,255,255,0.0);
}

.latest--hide .latest-inner:active::before{
  background: rgba(255,255,255,0.0);
}

.latest-inner:focus{ outline: none; }
.latest-inner:focus-visible{
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 6px rgba(15,18,28,0.25));
}

.latest.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* 隠す時だけ visibility を遅延させて「フェードアウト後に不可視」へ */
  transition:
    opacity var(--motion-latest-fade, 1500ms) var(--ease, ease),
    visibility 0s linear var(--motion-latest-fade, 1500ms);
}

.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}