/* =========================================================
   fudosha.net / WORKS PICK UP visual override
   Concept:
   - PICK UP = "current story / title-screen"
   - DISCography cards = "stored archive windows"
   - white + pale sky + analog fade, not a Windows parody

   Background source remains controlled by works.js:
     --works-hero-bg-pc / --works-hero-bg-sp
   so a future dedicated hero artwork can be swapped in without
   changing this stylesheet.
   ========================================================= */

body[data-page="works"] .works-hero{
  --works-pickup-paper: rgba(247,247,245,.98);
  --works-pickup-ink: #171b22;
  --works-pickup-blue: #6f9cc4;
  --works-pickup-red: #c91e1e;

  /* 白ベールではなく、背景絵そのものの濃さで調整する。 */
  --works-hero-art-opacity-pc: .72;
  --works-hero-art-opacity-sp: .56;
  --works-hero-art-opacity: var(--works-hero-art-opacity-pc);
}

/* ---------------------------------------------------------
   1) Background: let the illustration surface, then dissolve
      into the white page on all four sides.
   --------------------------------------------------------- */
body[data-page="works"] .works-hero-media{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: none !important;
  background-color: transparent;
}

body[data-page="works"] .works-hero-media::before{
  content: "";
  position: absolute;
  z-index: 0;
  inset: -2%;
  pointer-events: none;

  background-image: var(--works-hero-bg-pc, var(--works-hero-bg-sp));
  background-repeat: no-repeat;
  background-size: contain;
  background-position: var(--works-hero-bgpos-pc, center);

  opacity: var(--works-hero-art-opacity);
  filter: saturate(.86) contrast(.96) brightness(1.04);
  transform: scale(1.015);

  /* 白を重ねず、絵そのものを四辺で透明へ溶かす。
     これなら2.5秒の流れる背景が下からそのまま見える。 */
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 52% 50%, #000 0 58%, rgba(0,0,0,.94) 68%, rgba(0,0,0,.56) 82%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 72% at 52% 50%, #000 0 58%, rgba(0,0,0,.94) 68%, rgba(0,0,0,.56) 82%, transparent 100%);
}

/* 旧「白い紙へのフェード」は廃止。透明化は::beforeのmaskで行う。 */
body[data-page="works"] .works-hero-media::after{
  content: none;
  display: none;
}

body[data-page="works"] .works-hero-overlay{
  position: relative;
  z-index: 2;
  min-height: inherit;
  padding:
    clamp(1.15rem, 3vw, 2.2rem)
    clamp(1.0rem, 2.5vw, 1.8rem)
    clamp(1.4rem, 3vw, 2.25rem);
  align-items: end;
}

/* テキスト側の白ベールも廃止。可読性は文字のshadowで確保する。 */
body[data-page="works"] .works-hero-overlay::before{
  content: none;
  display: none;
}

/* Very faint analog-print grain using CSS only. */
body[data-page="works"] .works-hero-overlay::after{
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(24,31,38,.055) 0,
      rgba(24,31,38,.055) 1px,
      transparent 1px,
      transparent 4px
    );
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

/* ---------------------------------------------------------
   2) Text area: editorial / title-screen hierarchy
   --------------------------------------------------------- */
body[data-page="works"] .works-hero-info{
  max-width: min(44rem, 66vw);
  padding: clamp(.25rem, .8vw, .55rem) 0;
}

body[data-page="works"] .works-hero-head{
  justify-content: flex-start;
  margin-bottom: .8rem;
}

body[data-page="works"] .works-hero-pickup{
  padding: 7px 16px;
  border-radius: 3px;
  background: var(--works-pickup-red);
  color: #fff;
  border: 1px solid rgba(104,0,0,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 3px 8px rgba(40,0,0,.10);
  font-size: clamp(14px, 1.25vw, 17px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .16em;
}

/* selector stays in the upper row but no longer stretches the head */
body[data-page="works"] .works-hero-dots{
  margin-left: .55rem;
}

body[data-page="works"] .works-hero-title{
  color: var(--works-pickup-ink);
  font-size: clamp(1.9rem, 3.25vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: .02em;
  text-wrap: balance;
}

body[data-page="works"] .works-hero-title-sub{
  margin-top: .45rem;
  color: rgba(23,27,34,.78);
  font-size: clamp(.72rem, 1vw, .92rem);
  font-weight: 700;
  letter-spacing: .18em;
}

body[data-page="works"] .works-hero-lead{
  width: min(42rem, 100%);
  margin-top: 1.05rem;
  padding-top: .8rem;
  color: rgba(23,27,34,.86);
  border-top: 1px dashed rgba(49,58,68,.38);
  line-height: 1.78;
}

/* The old 8-direction white outline is unnecessary once the text-side
   fade exists. Keep only a light paper halo. */
@media (min-width: 768px){
  body[data-page="works"] .works-hero-info :is(.works-hero-title, .works-hero-title-sub, .works-hero-lead){
    text-shadow: 0 1px 0 rgba(255,255,255,.86), 0 0 8px rgba(255,255,255,.52);
  }
}

/* ---------------------------------------------------------
   3) Actions: connect to retro cards, but do not mimic Win98.
   --------------------------------------------------------- */
body[data-page="works"] .works-hero-actions{
  gap: 12px;
  margin-top: 17px;
}

body[data-page="works"] .works-hero-open,
body[data-page="works"] .works-hero-shop{
  min-height: 38px;
  border-radius: 4px;
  padding: 9px 15px;
  box-sizing: border-box;
  letter-spacing: .035em;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.36),
    0 3px 9px rgba(18,24,32,.09);
  transition: transform .14s ease, background-color .14s ease, border-color .14s ease;
}

body[data-page="works"] .works-hero-open{
  border: 1px solid #161a20;
  background: rgba(21,24,29,.93);
  color: #fff;
}

body[data-page="works"] .works-hero-shop{
  border: 1px solid rgba(76,126,174,.62);
  background: rgba(244,248,251,.77);
  color: #1b2733;
}

body[data-page="works"] .works-hero-open:hover,
body[data-page="works"] .works-hero-shop:hover{
  transform: translateY(-1px);
}

/* ---------------------------------------------------------
   4) Featured cover = printed object laid over the fading scene
   --------------------------------------------------------- */
body[data-page="works"] .works-hero-right{
  position: relative;
  z-index: 3;
  align-items: center;
  padding: .45rem .35rem .35rem 1rem;
}

body[data-page="works"] .works-hero-stand{
  max-width: min(210px, 46vw);
  padding: 8px;
  border-radius: 5px;
  border: 1px solid rgba(69,74,79,.36);
  background: rgba(252,252,249,.89);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 14px 26px rgba(25,31,38,.17),
    5px 6px 0 rgba(255,255,255,.26);
  transform: rotate(.55deg);
  transition: transform .2s ease, box-shadow .2s ease;
}

body[data-page="works"] .works-hero-stand:hover{
  background: rgba(255,255,252,.96);
  transform: rotate(.15deg) translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.96) inset,
    0 17px 30px rgba(25,31,38,.19),
    5px 7px 0 rgba(255,255,255,.30);
}

body[data-page="works"] .works-hero-stand-img{
  border-radius: 1px;
  background: #111;
  box-shadow: 0 0 0 1px rgba(37,41,45,.16);
}

/* ---------------------------------------------------------
   5) The handoff to DISCOGRAPHY should feel deliberate.
   --------------------------------------------------------- */
body[data-page="works"] .works-sep{
  margin-top: clamp(1rem, 2.2vw, 1.55rem);
  opacity: .78;
}

/* ---------------------------------------------------------
   SP: keep the idea, simplify the layers for readability.
   --------------------------------------------------------- */
@media (max-width: 900px){
  body[data-page="works"] .works-hero-overlay{
    grid-template-columns: 1fr;
    align-items: start;
  }

  body[data-page="works"] .works-hero-info{
    max-width: 100%;
  }

  body[data-page="works"] .works-hero-right{
    padding: 1rem 0 .25rem;
    justify-content: flex-end;
  }
}

@media (max-width: 767px){
  body[data-page="works"] .works-hero{
    --works-hero-art-opacity: var(--works-hero-art-opacity-sp);
  }

  body[data-page="works"] .works-hero-media::before{
    background-image: var(--works-hero-bg-sp, var(--works-hero-bg-pc));
    /* SPでは背景絵を大きく見せる。150%を基準に必要なら調整可能。 */
    background-size: var(--works-hero-bgsize-sp, 150% auto);
    background-position: var(--works-hero-bgpos-sp, center);
    opacity: var(--works-hero-art-opacity);
    filter: saturate(.82) contrast(.96) brightness(1.06);
  }

  body[data-page="works"] .works-hero-title{
    font-size: clamp(1.65rem, 8vw, 2.25rem);
  }

  body[data-page="works"] .works-hero-title-sub{
    letter-spacing: .12em;
  }

  body[data-page="works"] .works-hero-lead{
    text-shadow: 0 1px 0 rgba(255,255,255,.90), 0 0 7px rgba(255,255,255,.58);
  }

  body[data-page="works"] .works-hero-stand{
    max-width: min(170px, 52vw);
    transform: rotate(.35deg);
  }
}

@media (prefers-reduced-motion: reduce){
  body[data-page="works"] .works-hero-stand,
  body[data-page="works"] .works-hero-open,
  body[data-page="works"] .works-hero-shop{
    transition: none;
  }
}

/* =========================================================
   Global flowing-backdrop coexistence
   - 白レイヤーは一切増やさない。
   - 2.5秒中は背景絵だけ少し薄い状態から通常濃度へ戻す。
   - 下の流れる背景が透明部から見える。
   ========================================================= */
body.is-page-sky-active[data-page="works"] .works-hero-media::before{
  animation: worksHeroArtSettle var(--motion-page-sky-total) cubic-bezier(.22,.61,.36,1) both;
}
body.is-page-sky-active[data-page="works"] .works-hero-overlay::after{
  animation: worksHeroGrainSettle var(--motion-page-sky-total) cubic-bezier(.22,.61,.36,1) both;
}

@keyframes worksHeroArtSettle{
  0%{ opacity: calc(var(--works-hero-art-opacity) * .48); }
  58%{ opacity: calc(var(--works-hero-art-opacity) * .78); }
  100%{ opacity: var(--works-hero-art-opacity); }
}
@keyframes worksHeroGrainSettle{
  0%{ opacity: 0; }
  58%{ opacity: .07; }
  100%{ opacity: .12; }
}

@media (prefers-reduced-motion: reduce){
  body.is-page-sky-active[data-page="works"] .works-hero-media::before,
  body.is-page-sky-active[data-page="works"] .works-hero-overlay::after{
    animation: none;
  }
}


/* =========================================================
   Final hero text readability
   - keep the emotional layout, but restore a definite white outline
   - make the lead/body copy slightly heavier
   ========================================================= */
body[data-page="works"] .works-hero-info :is(.works-hero-title, .works-hero-title-sub, .works-hero-lead){
  text-shadow:
    1px 0 0 rgba(255,255,255,.98),
    -1px 0 0 rgba(255,255,255,.98),
    0 1px 0 rgba(255,255,255,.98),
    0 -1px 0 rgba(255,255,255,.98),
    1px 1px 0 rgba(255,255,255,.96),
    -1px 1px 0 rgba(255,255,255,.96),
    1px -1px 0 rgba(255,255,255,.96),
    -1px -1px 0 rgba(255,255,255,.96),
    0 0 6px rgba(255,255,255,.34);
}

body[data-page="works"] .works-hero-lead{
  font-weight: 600;
}

/* =========================================================
   SP hero composition
   ABOUT heroと同じ考え方で、表紙を情報ブロックより先に見せる。
   DOM自体は変えず、SPだけ visual order を入れ替える。
   ========================================================= */
@media (max-width: 767px){
  body[data-page="works"] .works-hero-overlay{
    display: flex;
    flex-direction: column;
    align-items: stretch;

    /* 情報ブロックは引き続きヒーロー下端基準。 */
    justify-content: flex-end;

    /* SP表紙の右上位置。必要ならこの2値だけ調整。 */
    --works-hero-cover-top-sp: clamp(5.25rem, 18vw, 6.25rem);
    --works-hero-cover-right-sp: clamp(.75rem, 4vw, 1.25rem);
  }

  /* 表紙だけ通常フローから外し、ヒーロー右上へ浮かせる。 */
  body[data-page="works"] .works-hero-right{
    position: absolute;
    z-index: 4;
    top: var(--works-hero-cover-top-sp);
    right: var(--works-hero-cover-right-sp);
    width: auto;
    padding: 0;
    justify-content: flex-end;
    align-items: flex-start;
  }

  body[data-page="works"] .works-hero-info{
    width: 100%;
  }
}