/* ============================================================
 * WAGA · waga-site.css —— 唯一真实样式表（从首页 index.html 抽出）
 * 首页与所有子页面共用同一份：字体、间距、字句规则全部一致。
 * 不要在别处另写一套；要改样式改这里。
 * ============================================================ */

:root { --waga-red: oklch(60% 0.235 27); }  /* 全站唯一强调色：改这里即可全站生效 */
    /* Hallmark · macrostructure: conversational manifesto
     * tone: austere editorial · language: English only
     * source: v1-interview structure, original preserved
     */

    /* 中文衬线：自托管思源宋体 SC 子集（仅站内实际用到的 939 字，~171KB）。
     * 自托管而非 Google Fonts —— 国内直连服务器也能下载，不依赖被墙的 CDN。
     * unicode-range 限定 CJK：拉丁字符不命中此字体，仍回落到 Source Serif 4。
     * 若改动中文文案出现缺字，按 DEVLOG「中文字体子集」一节重新生成此 woff2。 */
    @font-face {
      font-family: "Noto Serif SC Subset";
      src: url("fonts/NotoSerifSC-subset.woff2?v=607b") format("woff2");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
      unicode-range: U+2E80-9FFF, U+3000-303F, U+FF00-FFEF;
    }
    @font-face {
      font-family: "Noto Serif SC Subset";
      src: url("fonts/NotoSerifSC-subset-bold.woff2?v=607b") format("woff2");
      font-weight: 700;
      font-style: normal;
      font-display: swap;
      unicode-range: U+2E80-9FFF, U+3000-303F, U+FF00-FFEF;
    }
    /* 日文衬线：自托管思源明朝 JP 子集（明朝体 = 日本字形，日文版用之才"正"）。
     * 含假名 U+3040-30FF。改动日文文案缺字时按 DEVLOG 重新生成。 */
    @font-face {
      font-family: "Noto Serif JP Subset";
      src: url("fonts/NotoSerifJP-subset.woff2?v=607b") format("woff2");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
      unicode-range: U+2E80-9FFF, U+3000-30FF, U+FF00-FFEF;
    }
    @font-face {
      font-family: "Noto Serif JP Subset";
      src: url("fonts/NotoSerifJP-subset-bold.woff2?v=607b") format("woff2");
      font-weight: 700;
      font-style: normal;
      font-display: swap;
      unicode-range: U+2E80-9FFF, U+3000-30FF, U+FF00-FFEF;
    }

    html {
      background: oklch(95.5% 0.012 80);
      overscroll-behavior-y: none;
    }

    body {
      overflow-x: clip;
      background: oklch(95.5% 0.012 80);
      color: oklch(95.5% 0.012 80);
      font-family: "IBM Plex Sans", sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    ::selection {
      background: var(--waga-red);
      color: oklch(95.5% 0.012 80);
    }

    .paper {
      background: oklch(95.5% 0.012 80);
      color: oklch(18% 0.008 60);
    }

    .grain-light {
      background-image: radial-gradient(oklch(18% 0.008 60 / 0.04) 1px, transparent 1px);
      background-size: 28px 28px;
    }

    .grain-dark {
      background-image: radial-gradient(oklch(95.5% 0.012 80 / 0.035) 1px, transparent 1px);
      background-size: 28px 28px;
    }

    .balanced {
      text-wrap: balance;
    }

    /* 自托管思源宋体子集排第一：所有设备（iOS/安卓/应用内浏览器）都用同一份宋体，
       彻底消除平台差异、全站一致；系统 Songti 仅作离线兜底。 */
    html.is-zh .font-serif {
      font-family: "Noto Serif SC Subset", "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC", "Source Serif 4", serif;
    }
    /* 日文明朝同理：自托管思源明朝 JP 子集排第一 */
    html.is-ja .font-serif {
      font-family: "Noto Serif JP Subset", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "Yu Mincho", "Source Han Serif", "Source Serif 4", serif;
    }

    .brand-lockup {
      display: inline-grid;
      grid-template-columns: minmax(0, auto) auto;
      gap: 0.12em;
      align-items: start;
      max-width: 100%;
      white-space: nowrap;
    }

    .brand-title {
      font-family: "IBM Plex Sans", sans-serif;
      font-weight: 600;
      letter-spacing: -0.055em;
      line-height: 0.9;
    }

    .coop-badge {
      writing-mode: vertical-rl;
      border-left: 1px solid oklch(60% 0.235 27 / 0.42);
      padding-left: 0.44em;
      font-family: "IBM Plex Mono", monospace;
      font-size: 0.5rem;
      letter-spacing: 0.16em;
      line-height: 1;
      color: var(--waga-red);
    }

    .hero-mark {
      transform-origin: 58% 82%;
    }

    html.is-ja [data-i18n="heroSlogan"] {
      max-width: 12em;
      white-space: normal;
      line-height: 1.08;
      letter-spacing: -0.04em;
    }

    @media (min-width: 768px) {
      .brand-lockup {
        gap: 0.22em;
      }

      .coop-badge {
        padding-left: 0.65em;
        font-size: clamp(0.58rem, 0.9vw, 0.78rem);
        letter-spacing: 0.2em;
      }

      html.is-ja [data-i18n="heroSlogan"] {
        max-width: none;
        white-space: nowrap;
        line-height: 1.02;
        letter-spacing: -0.045em;
      }

      .hero-mark-align-black-edge {
        transform: translate(12.84%, 4.47%);
      }
    }

    .half-open-door {
      position: relative;
      width: min(44vw, 360px);
      height: min(58vw, 460px);
      max-height: 58vh;
    }

    .half-open-door::before {
      content: "";
      position: absolute;
      inset: 0;
      border: 1.5px solid oklch(18% 0.008 60 / 0.35);
      background: oklch(95.5% 0.012 80 / 0.58);
    }

    .half-open-door::after {
      content: "";
      position: absolute;
      inset: 10px 10px 10px 32%;
      background: oklch(18% 0.008 60);
      transform: skewY(-4deg);
      transform-origin: left center;
      box-shadow: -18px 0 0 oklch(60% 0.235 27 / 0.18);
    }

    .door-slit {
      position: absolute;
      top: 10px;
      bottom: 10px;
      left: 32%;
      width: 2px;
      background: var(--waga-red);
      z-index: 2;
    }

    .door-caption {
      position: absolute;
      left: 0;
      bottom: -34px;
      font-family: "IBM Plex Mono", monospace;
      font-size: 10px;
      letter-spacing: 0.22em;
      color: oklch(18% 0.008 60 / 0.48);
    }

    .link-line {
      background-image: linear-gradient(currentColor, currentColor);
      background-repeat: no-repeat;
      background-position: 0 100%;
      background-size: 0 1px;
      transition: background-size 160ms cubic-bezier(0.2, 0, 0, 1);
    }

    .link-line:hover,
    .link-line:focus-visible {
      background-size: 100% 1px;
    }

    .water-edge {
      position: absolute;
      left: 0;
      width: 100%;
      height: 320px;
      pointer-events: none;
      z-index: 1;
      display: block;
      transform: translateZ(0);
    }

    .water-edge--top { top: -160px; }
    .water-edge--bottom { bottom: -160px; }

    .top-blur-header {
      position: fixed;
      inset: 0 0 auto 0;
      height: 148px;
      z-index: 45;
      pointer-events: none;
      overflow: hidden;
      background: transparent;
    }

    .top-blur-header__layer {
      position: absolute;
      inset: 0 0 auto 0;
      height: 100%;
      background: transparent;
      -webkit-backdrop-filter: blur(var(--blur));
      backdrop-filter: blur(var(--blur));
      -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 var(--hold), transparent var(--fade));
      mask-image: linear-gradient(to bottom, #000 0%, #000 var(--hold), transparent var(--fade));
    }

    .top-blur-header__layer:nth-child(1) {
      --blur: 2px;
      --hold: 18%;
      --fade: 100%;
    }

    .top-blur-header__layer:nth-child(2) {
      --blur: 6px;
      --hold: 12%;
      --fade: 76%;
    }

    .top-blur-header__layer:nth-child(3) {
      --blur: 12px;
      --hold: 8%;
      --fade: 52%;
    }

    .top-blur-header__layer:nth-child(4) {
      --blur: 20px;
      --hold: 0%;
      --fade: 30%;
    }

    .crow-chaser {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 9999;
      width: 64px;
      height: 42px;
      pointer-events: none;
      transform: translate3d(-120px, -120px, 0);
      transform-style: preserve-3d;
      will-change: transform;
      mix-blend-mode: difference;
    }

    .crow-chaser__model {
      width: 100%;
      height: 100%;
      color: #ffffff;
      transform-origin: 50% 50%;
      transform-style: preserve-3d;
      will-change: transform;
      transition: color 120ms linear;
    }

    .crow-chaser__svg {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .crow-chaser__wing {
      transform-box: fill-box;
      will-change: transform;
    }

    .crow-chaser__wing--top {
      transform-origin: 96% 96%;
      transform: rotate(var(--wing-top, -5deg)) translateZ(1px);
    }

    .crow-chaser__wing--bottom {
      transform-origin: 96% 4%;
      transform: rotate(var(--wing-bottom, 5deg)) translateZ(-1px);
    }

    #works-showcase::before,
    footer::before {
      content: "";
      position: absolute;
      inset: 0 0 auto 0;
      height: 132px;
      background:
        radial-gradient(oklch(18% 0.008 60 / 0.04) 1px, transparent 1px),
        oklch(95.5% 0.012 80);
      background-size: 28px 28px, auto;
      pointer-events: none;
      z-index: 0;
    }

    #conversation {
      isolation: isolate;
    }

    #conversation h2,
    #conversation h3 {
      color: oklch(95.5% 0.012 80) !important;
    }

    #conversation article p {
      color: oklch(89% 0.012 80 / 0.78) !important;
    }

    #conversation header p,
    #conversation .text-waga-ash {
      color: oklch(55% 0.01 75) !important;
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 1ms !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
      }
      .water-edge { display: none; }
      .crow-chaser { display: none; }
    }

    /* ── Works Showcase Custom Styles ── */
    .works-showcase-section {
      position: relative;
      isolation: isolate;
      background-color: #000000 !important;
      color: oklch(95.5% 0.012 80) !important;
    }
    
    /* Cinematic Full-Bleed */
    .cinematic-fold {
      position: relative;
      width: 100%;
      height: 85vh;
      min-height: 600px;
      overflow: hidden;
      border: 1px solid oklch(95.5% 0.012 80 / 0.15);
      background: #000;
    }
    
    .cinematic-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.65;
      transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .cinematic-fold:hover .cinematic-bg {
      transform: scale(1.03);
    }
    
    .cinematic-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.85) 100%);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 3rem;
      color: #fff;
    }

    @media (max-width: 767px) {
      .cinematic-fold {
        height: min(720px, calc(100svh - 2rem));
        min-height: 620px;
      }

      .cinematic-bg {
        opacity: 0.72;
        object-position: center;
      }

      .cinematic-overlay {
        gap: 1.5rem;
        padding: 1.25rem;
        background:
          linear-gradient(to bottom, rgba(0,0,0,0.64) 0%, rgba(0,0,0,0.18) 34%, rgba(0,0,0,0.94) 100%);
      }

      .work-meta {
        align-items: flex-start;
        gap: 0.75rem;
        justify-content: space-between;
      }

      .work-meta span {
        overflow-wrap: normal;
      }

      .work-meta span:first-child {
        max-width: 58%;
        padding: 0.25rem 0.42rem;
        font-size: 8px;
        letter-spacing: 0.12em;
      }

      .work-meta span:last-child {
        max-width: 38%;
        font-size: 8px;
        line-height: 1.45;
        text-align: right;
        letter-spacing: 0.08em;
      }

      .work-copy {
        max-width: 100%;
      }

      .work-copy h3 {
        font-size: clamp(1.7rem, 8.5vw, 2.15rem);
        line-height: 1;
      }

      .work-copy [data-i18n$="Credits"] {
        display: -webkit-box;
        overflow: hidden;
        font-size: 10px;
        line-height: 1.55;
        letter-spacing: 0.08em;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
      }

      .work-copy [data-i18n$="Desc"] {
        display: -webkit-box;
        overflow: hidden;
        font-size: 13px;
        line-height: 1.65;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
      }

      .work-action {
        width: 100%;
      }

      .work-action button {
        width: 100%;
        padding: 0.8rem 1rem;
        text-align: left;
        background: rgba(0, 0, 0, 0.34);
      }
    }

    .which-news-dossier {
      position: relative;
      display: grid;
      overflow: hidden;
      background:
        radial-gradient(circle at 52% 44%, rgba(255, 214, 79, 0.08), transparent 24%),
        #030303;
    }

    @media (min-width: 768px) {
      .which-news-dossier {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    .which-news-text {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 3rem;
      padding: 3rem;
      background: #030303;
    }

    .which-news-image {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 520px;
      padding: 0;
      background: #fff;
    }

    .which-news-image img {
      width: 100%;
      height: 100%;
      border: 0;
      background: #fff;
      object-fit: contain;
      opacity: 1;
      filter: grayscale(0.08) contrast(1.05);
    }

    @media (max-width: 767px) {
      .which-news-text {
        padding: 2rem;
      }

      .which-news-image {
        min-height: 340px;
        padding: 0;
      }
    }
    /* Lightbox */
    .custom-lightbox {
      position: fixed;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.94);
      z-index: 100;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      display: flex;
      flex-direction: column;
    }
    
    .custom-lightbox.active {
      opacity: 1;
      pointer-events: auto;
    }
    
    .lightbox-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.5rem 2rem;
      color: white;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .lightbox-body {
      flex: 1;
      overflow-y: auto;
      padding: 3rem 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3rem;
    }
    
    .lightbox-img {
      max-width: 100%;
      max-height: 85vh;
      object-fit: contain;
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    }

/* ---- 媒体骨架占位：加载前同尺寸卡片 + 忽明忽暗脉动，加载完淡入 ---- */
.media-frame { position: relative; overflow: hidden; }
.media-frame > video,
.media-frame > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .55s ease;
}
.media-frame.is-loaded > video,
.media-frame.is-loaded > img { opacity: 1; }
.media-skel {
  position: absolute; inset: 0; z-index: 0;
  background: oklch(34% 0.006 60);
  animation: wagaSkel 1.5s ease-in-out infinite;
}
.media-frame.is-loaded .media-skel { opacity: 0; transition: opacity .4s ease; pointer-events: none; }
@keyframes wagaSkel { 0%, 100% { opacity: .32; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .media-skel { animation: none; opacity: .5; } }