/* ===== Portfolio Gate — CodePen CSS ===== */
/* Gen Interface JP Display（yamatoiizuka / SIL OFL 1.1）
   Adobe Fonts ではなく jsDelivr 配信のため、Web Project ID や
   許可ドメイン（codepen.io / cdpn.io など）の設定は不要。
   このページで使うのは 700（タイトル）と 500（タグ）の2ウェイトのみ。
   Google Fonts 同様のサブセット化により、実際に落ちるのはラテン分だけ。
   ウェイトを増やす場合は display-100〜display-800 を追加で読み込む。 */
@import url("https://cdn.jsdelivr.net/npm/gen-interface-jp@0.7.0/cdn/display-500.css");
@import url("https://cdn.jsdelivr.net/npm/gen-interface-jp@0.7.0/cdn/display-700.css");

:root{
  --gate-duration: .8s;                        /* パネル拡縮の時間 */
  --gate-ease: cubic-bezier(.33, 1, .68, 1);    /* パネル拡縮のイージング */
  --filter-duration: .7s;                       /* 明るさ変化の時間 */
  --gate-pad: clamp(22px, 2.6vw, 40px);         /* パネル内余白 */
}

*, *::before, *::after { box-sizing: border-box; }

/* iframe の固定高さに追従するため 100vh は使わず height:100% 基準 */
html, body{
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body{
  font-family: "Gen Interface JP Display", Helvetica, Arial, sans-serif;
  background: #000;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}

.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------------- Gate ---------------- */

.portfolio-gate{
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.gate-panel{
  position: relative;
  display: block;
  height: 100%;
  flex: 0 0 50%;
  min-width: 0;
  overflow: hidden;
  background: #08080c;           /* 動画・poster 読み込み前のフォールバック */
  color: #fff;
  text-decoration: none;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  transition: flex-basis var(--gate-duration) var(--gate-ease);
}

.gate-panel__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;             /* 幅変化時は中央基準でトリミング */
  pointer-events: none;
  filter: brightness(.72) contrast(1.05);   /* 通常時：黒オーバーレイではなく filter で少し暗く */
  transition: filter var(--filter-duration) ease;
}

.gate-panel__inner{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  max-width: 100%;
  padding: var(--gate-pad);
  pointer-events: none;
}

.gate-panel__title{
  margin: 0;
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

.gate-panel__tags{
  margin: 14px 0 0;
  font-size: clamp(10px, .82vw, 12px);
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.75;
  opacity: .95;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

.gate-panel__tags span{ display: block; }

/* ---------------- Hover（PC・マウス環境のみ） ---------------- */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference){
  .portfolio-gate:hover .gate-panel{ flex-basis: 30%; }
  .portfolio-gate .gate-panel:hover{ flex-basis: 70%; }

  .gate-panel:hover .gate-panel__video{
    filter: brightness(1) contrast(1.08) saturate(1.05);
  }

  /* 縮んだ側は filter のみで沈める（参考画像準拠・黒オーバーレイ不使用） */
  .portfolio-gate:hover .gate-panel:not(:hover) .gate-panel__video{
    filter: brightness(.45) contrast(1.02) saturate(.85);
  }
}

/* キーボードフォーカス時もホバー同等に開く（:has 非対応ブラウザでは無視される） */
@media (prefers-reduced-motion: no-preference){
  .portfolio-gate:has(.gate-panel:focus-visible) .gate-panel{ flex-basis: 30%; }
  .portfolio-gate .gate-panel:focus-visible{ flex-basis: 70%; }
  .gate-panel:focus-visible .gate-panel__video{
    filter: brightness(1) contrast(1.08) saturate(1.05);
  }
}

.gate-panel:focus-visible::after{
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, .55);
  pointer-events: none;
}

/* ---------------- スマホ：上下2分割・サイズ変化なし ---------------- */

@media (max-width: 768px){
  .portfolio-gate{ flex-direction: column; }

  .gate-panel{
    width: 100%;
    flex-basis: 50%;
  }

  .portfolio-gate:hover .gate-panel,
  .portfolio-gate .gate-panel:hover{ flex-basis: 50%; }
}

/* :has を含むため別ブロック（非対応ブラウザで上のルールまで無効化されないように） */
@media (max-width: 768px){
  .portfolio-gate:has(.gate-panel:focus-visible) .gate-panel,
  .portfolio-gate .gate-panel:focus-visible{ flex-basis: 50%; }
}

/* ---------------- ローディング（初回のみ） ---------------- */

.loader{
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  transition: opacity .6s ease;
}

.loader.is-hidden{
  opacity: 0;
  pointer-events: none;
}

html.gate-visited .loader{ display: none; }

.loader__logo{
  width: min(300px, 56vw);
  height: auto;
  animation:
    neon-ignite 1.35s linear both,
    neon-idle 2.8s ease-in-out 1.35s infinite;
}

/* 暗い → 一瞬強く光る → 落ちる → 不安定に揺れる → 安定 */
@keyframes neon-ignite{
  0%   { opacity: .05; filter: brightness(.55) drop-shadow(0 0 0 rgba(255,255,255,0)); }
  5%   { opacity: .05; filter: brightness(.55) drop-shadow(0 0 0 rgba(255,255,255,0)); }
  11%  { opacity: 1;   filter: brightness(1.8)  drop-shadow(0 0 30px rgba(255,255,255,.85)); }
  16%  { opacity: .2;  filter: brightness(.75)  drop-shadow(0 0 3px  rgba(255,255,255,.12)); }
  22%  { opacity: .85; filter: brightness(1.15) drop-shadow(0 0 12px rgba(255,255,255,.4)); }
  27%  { opacity: .3;  filter: brightness(.8)   drop-shadow(0 0 4px  rgba(255,255,255,.12)); }
  33%  { opacity: 1;   filter: brightness(1.4)  drop-shadow(0 0 20px rgba(255,255,255,.6)); }
  41%  { opacity: .55; filter: brightness(.9)   drop-shadow(0 0 8px  rgba(255,255,255,.25)); }
  49%  { opacity: .95; filter: brightness(1.2)  drop-shadow(0 0 16px rgba(255,255,255,.5)); }
  57%  { opacity: .72; filter: brightness(1)    drop-shadow(0 0 10px rgba(255,255,255,.3)); }
  68%  { opacity: 1;   filter: brightness(1.18) drop-shadow(0 0 16px rgba(255,255,255,.45)); }
  82%  { opacity: .93; filter: brightness(1.08) drop-shadow(0 0 13px rgba(255,255,255,.38)); }
  100% { opacity: 1;   filter: brightness(1.06) drop-shadow(0 0 14px rgba(255,255,255,.35)); }
}

/* 安定後のごく弱い呼吸 */
@keyframes neon-idle{
  0%, 100% { filter: brightness(1.06) drop-shadow(0 0 14px rgba(255,255,255,.35)); }
  50%      { filter: brightness(1.14) drop-shadow(0 0 18px rgba(255,255,255,.48)); }
}

/* ---------------- prefers-reduced-motion ---------------- */

@media (prefers-reduced-motion: reduce){
  .gate-panel,
  .gate-panel__video,
  .loader{ transition: none; }

  .loader__logo{
    animation: none;
    opacity: 1;
    filter: brightness(1.06) drop-shadow(0 0 14px rgba(255,255,255,.35));
  }
}