/* =========================================================
   DEUCE ENTERTAINMENT — obys.agency-inspired
   ========================================================= */

:root{
  --white:#fafaf7;
  --black:#0a0a0a;
  --gray:#c9c9c9;
  --accent:#ff3b1c;          /* deep orange */
  --accent-2:#162b1b;
  --pale-gold:#fffce0;       /* Hero 粒子の主色、home-board / サブページの調和トーン */
  --pale-gold-soft:#fff8c0;
  --g:1rem;
  --m-x:1rem;
  --m-y:1rem;
  --c:calc((100vw - (var(--m-x)*2 + var(--g)*11))/12);
  --serif:"Shippori Mincho B1","Hiragino Mincho ProN","YuMincho",serif;
  --display:"Italiana","Shippori Mincho B1",serif;
  --gothic:"Zen Kaku Gothic Antique","Hiragino Sans","Yu Gothic",sans-serif;
  --mono:"JetBrains Mono","Menlo",monospace;
  --easeOut: cubic-bezier(.16,1,.3,1);
  --easeStrong: cubic-bezier(.77,0,.18,1);
}

html{
  font-size: clamp(13px, .694vw, 22px);
  -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased;
  background: var(--white);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
body{
  background: var(--white);
  color: var(--black);
  font-family: var(--gothic);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.4;
  letter-spacing: -.005em;
  overflow-x:hidden;
  cursor:none;
  overscroll-behavior:none;
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: break-word;
}
h1, h2, h3, h4, .big-line, .sv-row__title, .ar-row__name, .nw-row__title, .hero-claim__h{
  word-break: keep-all;
  line-break: strict;
}
@media (max-width: 820px){ body{ cursor:auto; font-size:15px; } html{ font-size:16px; } }
img,svg,video,picture{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ background:none; border:0; color:inherit; font:inherit; cursor:none; }
ul,ol,li{ list-style:none; }
::selection{ background:var(--accent); color:#fff; }

/* Line reveal primitives (obys-pattern) */
.ln_{ overflow:hidden; display:block; line-height:inherit; }
.ln {
  position:relative;
  display:block;
  will-change:transform;
  transform:translateY(102%);
  transition: transform 1s var(--easeStrong);
}
.is-loading .ln{ transform: translateY(102%); }
.in .ln, .is-on .ln{ transform: translateY(0); }
span.ln, span.ln_{ display:block; }
.ln_ em, .ln em, .ln strong{ font-style:normal; }

/* Underline scaleX primitive (obys-pattern) */
.l{ overflow:hidden; width:100%; height:3px; position:relative; }
.l>div{
  border-bottom:1.34px solid currentColor;
  width:100%; height:1px;
  transform: translateX(-100.1%);
  transition: transform .8s var(--easeOut);
}
.is-on .l>div, a:hover .l>div{ transform: translateX(0); }

/* =========================================================
   GL canvas placeholder (kept transparent for now)
   ========================================================= */
#gl{
  position:fixed; pointer-events:none;
  width:100%; height:100%; top:0; left:0; z-index:1;
  opacity:0;
}

/* =========================================================
   Guide grid (12 columns) — obys debug grid
   ========================================================= */
#g_{
  position:fixed; z-index:9999;
  top:var(--m-y); bottom:var(--m-y);
  left:var(--m-x); right:var(--m-x);
  display:flex; pointer-events:none;
  opacity:0; transition: opacity .3s ease;
}
#g_.g_o{ opacity:.15; }
#g{
  display:flex; gap:var(--g);
  width:100%; height:100%;
}
#g div{
  background:rgba(255, 59, 28, .35);
  flex:1; height:100%;
}

/* =========================================================
   Grain
   ========================================================= */
.grain{
  position:fixed; inset:0;
  pointer-events:none; z-index:9998; opacity:.08;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.85'/></svg>");
  mix-blend-mode:multiply;
}

/* =========================================================
   Custom cursor
   ========================================================= */
.cursor{
  position:fixed; top:0; left:0; width:14px; height:14px;
  /* white border + difference blend = visible on light bg (becomes black)
     and dark images (stays white) */
  border:1.4px solid #ffffff;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:10000;
  transition:width .35s var(--easeOut), height .35s var(--easeOut),
             background-color .3s ease, border-color .3s ease;
  display:flex; align-items:center; justify-content:center;
  mix-blend-mode:difference;
  background:transparent;
}
.cursor__label{
  font-family:var(--mono);
  font-size:10px; letter-spacing:.1em;
  color:var(--white);
  opacity:0; transform:scale(.7);
  transition:opacity .25s ease, transform .25s ease;
  text-transform:uppercase;
  white-space:nowrap;
}
.cursor.is-hover{
  width:84px; height:84px;
  background:var(--white);
  border-color:var(--white);
}
.cursor.is-hover .cursor__label{ opacity:1; transform:scale(1); }
.cursor.is-down{ transform:translate(-50%,-50%) scale(.8); }
@media (max-width: 820px){ .cursor{ display:none; } }

/* =========================================================
   Logo (centered, splits on scroll)
   ========================================================= */
/* Logo — positioned top-left (obys-style) */
#logo{
  position:fixed;
  top: var(--m-y);
  left: var(--m-x);
  z-index:9999;
  mix-blend-mode: difference;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing:.02em; font-weight:400;
  display:flex; gap:.35em;
  pointer-events:auto;
  white-space:nowrap;
  align-items: baseline;
}
#logo > span{
  display:inline-block;
  transition: letter-spacing .6s var(--easeOut), opacity .5s ease;
}
#logo #logo-r{ font-size: .82em; opacity:.85; }
#logo:hover #logo-l{ letter-spacing:.16em; }
#logo:hover #logo-r{ opacity:1; letter-spacing:.12em; }

/* Hide redundant header-title (logo now lives top-left) */
#header-title{ display:none !important; }
/* Keep header right-side as-is, but adjust justify since left side is empty */
#header{ justify-content: flex-end; }

/* =========================================================
   Header
   ========================================================= */
#header{
  position:fixed;
  top: var(--m-y);
  left: var(--m-x); right: var(--m-x);
  display:flex; justify-content:space-between;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events:none;
  z-index: 9997;
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.06em;
  text-transform: uppercase;
}
#header-title{
  max-width: calc(var(--c) * 2 + var(--g) * 2);
  pointer-events:all; overflow:hidden;
  font-family: var(--gothic);
  font-size: 12px;
  letter-spacing:.02em;
  text-transform:none;
}
#header-title em{ font-style:normal; opacity:.8; }
#header-right{
  display:flex; align-items: flex-start;
  gap: var(--g);
}
#header-right > *{ width: calc(var(--c) * 2); pointer-events:all; }
#header-menu{ display:flex; gap:.6rem; flex-wrap:wrap; }
#header-menu > a{
  position:relative; display:inline-block;
  height: 1.2lh; line-height:1;
}
#header-menu > a > span{ position:relative; display:inline-block; }
#header-menu > a > span > .l{
  position:absolute; left:0; bottom:-3px; width:100%;
}
#header-time em{ font-style:normal; }
#header-contact{ text-align:right; pointer-events:all; cursor:none; display:block; }
#header-contact > span{ position:relative; display:inline-block; }
#header-contact > span > .l{ position:absolute; left:0; bottom:-3px; width:100%; }

/* lang toggle — JP / EN */
#lang-toggle{
  display:flex; align-items:baseline; gap:.45rem;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing:.04em;
  text-transform: uppercase;
  pointer-events: all;
}
#lang-toggle button{
  position:relative; display:inline-block;
  background:none; border:0; padding:0; margin:0;
  cursor:none !important;   /* defeat browser default cursor on <button> */
  color: inherit; font: inherit; letter-spacing: inherit;
  height: 1.2lh; line-height:1;
  opacity:.5;
  transition: color .35s var(--ease, ease), opacity .35s var(--ease, ease);
}
#lang-toggle button > span{ position:relative; display:inline-block; }
#lang-toggle button > span > .l{ position:absolute; left:0; bottom:-3px; width:100%; }
#lang-toggle button.is-active{
  opacity:1;
  font-weight:500;
}
#lang-toggle button:hover{
  opacity:1;
  color: var(--accent);
}
#lang-toggle .lang-sep{ opacity:.3; }

@media (max-width:820px){
  #header-time, #header-menu{ display:none; }
  #header-right{ flex-direction:row; gap:.6rem; }
  #header-right > *{ width:auto; }
  #lang-toggle{ font-size: 11px; }
}

/* =========================================================
   HERO — three-mode work showcase (column / rotated / grid)
   ========================================================= */
.hero{
  position:relative;
  width:100%; height:100svh;
  overflow:hidden;
}
#ho-wo{
  position:absolute; inset:0;
  width:100%; height:100svh;
}

/* shared layer */
.ho-wo-s_{
  position:absolute; inset:0;
  width:100%; height:100svh;
  pointer-events:none;
  opacity:0; visibility:hidden;
  transition: opacity .55s var(--easeOut), visibility 0s .55s;
}
.ho-wo-s_.is-active{
  opacity:1; visibility:visible; pointer-events:auto;
  transition: opacity .55s var(--easeOut), visibility 0s 0s;
}

/* Tile shared */
#ho-wo .r{
  display:block;
  background:#1c1c1c;
  background-size:cover; background-position:center;
  flex-shrink:0;
  position:relative;
  filter: grayscale(.15) contrast(1.05);
  transition: filter .5s ease, transform .8s var(--easeOut);
  cursor:none;
}
#ho-wo .r:hover{ filter:none; transform: scale(1.03); z-index:2; }
#ho-wo .r::after{
  content:""; position:absolute; inset:0;
  background: rgba(10,10,10,.16);
  transition: background .35s ease;
}
#ho-wo .r:hover::after{ background: rgba(10,10,10,0); }

/* ============ MODE 0 — vertical column ============ */
#ho-wo-0 > .ho-wo-s{
  position:absolute; inset:0;
  display:flex; justify-content:center;
  overflow:hidden;
}
.ho-wo-col{
  display:flex; flex-direction:column; align-items:center;
  gap:.5rem;
  will-change:transform;
}

/* Title list — left, multi-line, active centered */
#ho-wo-0-ti{
  position:absolute; top:50%;
  left: var(--g);
  width: calc(var(--c) * 2 + var(--g) * 1);
  height: 25.25rem;
  overflow:hidden;
  line-height: 1.2;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight:500; letter-spacing:-.02em;
  z-index: 4;
  pointer-events:none;
}
#ho-wo-0-ti > div{
  display:flex; flex-direction:column; align-items:flex-start;
  will-change:transform;
  transition: transform .9s var(--easeOut);
}
#ho-wo-0-ti a{
  display: block;
  opacity: .28;                          /* up from .18 — still subdued but readable */
  color: inherit;
  transition: opacity .4s ease, color .3s ease;
  position: relative;
}
#ho-wo-0-ti a.is-active{
  opacity: 1;
  color: var(--accent);                  /* DEUCE deep orange #ff3b1c on the focused column */
}
/* Subtle underline that sweeps in under the active entry */
#ho-wo-0-ti a.is-active::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -.15em;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform-origin: left;
  animation: ho-wo-0-ti-line .5s var(--easeStrong) forwards;
}
@keyframes ho-wo-0-ti-line{
  from{ transform: scaleX(0); }
  to{   transform: scaleX(1); }
}

/* Meta bar — right of title, single line */
#ho-wo-0-me_{
  position:absolute; top:50%;
  left: calc(var(--c) * 2 + var(--g) * 3);
  width: calc(var(--c) * 9 + var(--g) * 8);
  overflow:hidden; pointer-events:none;
  height: 1lh; line-height: 1.2;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.08em; text-transform:uppercase;
  z-index: 4;
}
#ho-wo-0-me_ #ho-wo-0-me{
  position:absolute; inset:0; will-change:transform;
}
#ho-wo-0-me_ #ho-wo-0-me > div{
  position:absolute; display:flex; opacity:0;
  top:50%; left:0; width:100%;
  transform: translateY(-50%);
  transition: opacity .4s ease;
}
#ho-wo-0-me_ #ho-wo-0-me > div.is-on{ opacity:1; }
#ho-wo-0-me_ #ho-wo-0-me > div > span:first-child{ width: calc(var(--c) * 5 + var(--g) * 5); }
#ho-wo-0-me_ #ho-wo-0-me > div > span:nth-child(2){ width: calc(var(--c) * 3 + var(--g) * 2); }
#ho-wo-0-me_ #ho-wo-0-me > div > span:nth-child(3){ width: var(--c); text-align:right; margin-left:auto; }

/* ============ MODE 1 — rotated horizontal ============ */
#ho-wo-1 > .ho-wo-s{
  position:absolute; inset:0;
  overflow:hidden;
}
.ho-wo-row{
  position:absolute;
  display:flex; align-items:center; gap:.5rem;
  top:50%; left:0;
  transform: translateY(-50%);
  will-change:transform;
}
#ho-wo-1 .ho-wo-row .r{
  transform: rotate(-90deg);
}
#ho-wo-1-ti{
  position:absolute; bottom:0; right: var(--g);
  width: calc(var(--c) * 3 + var(--g) * 2);
  height: 24.5rem;
  clip-path: inset(0 0 2.5% 0);
  overflow:hidden;
  z-index:4;
  pointer-events:none;
  font-family: var(--serif);
  font-size: 1.5rem; line-height: 1.2; font-weight:500; letter-spacing:-.02em;
}
#ho-wo-1-ti > div{
  display:flex; flex-direction:column; justify-content:flex-end;
  width:100%; height:max-content;
  will-change:transform;
  transition: transform .9s var(--easeOut);
  text-align:right;
}
#ho-wo-1-ti a{ display:block; white-space:nowrap; opacity:.18; transition:opacity .4s ease; }
#ho-wo-1-ti a.is-active{ opacity:1; }
#ho-wo-1-me_{
  position:absolute; bottom: var(--g); right: var(--g);
  width: calc(var(--c) * 6 + var(--g) * 5);
  pointer-events:none; height: 24.5rem;
  z-index:3;
}
#ho-wo-1-me_ #ho-wo-1-me{
  position:absolute; overflow:hidden;
  width:100%; height: 1.1lh;
  bottom:0; left:0;
  font-family: var(--mono); font-size: 11px;
  letter-spacing:.08em; text-transform:uppercase;
}
#ho-wo-1-me_ #ho-wo-1-me > div{
  position:absolute; inset:0;
}
#ho-wo-1-me_ #ho-wo-1-me > div > div{
  position:absolute; inset:0;
  display:flex; justify-content:space-between; opacity:0;
  transition: opacity .35s ease;
}
#ho-wo-1-me_ #ho-wo-1-me > div > div.is-on{ opacity:1; }
#ho-wo-1-me_ .l{ position:absolute; bottom:0; left:0; width:100%; }
#ho-wo-1-me_ .l > div{ border-color: var(--gray); }

/* ============ MODE 2 — static grid ============ */
#ho-wo-2{ overflow:auto; }
#ho-wo-2 > .ho-wo-s{
  position:absolute; width:100%; top:0; left:0;
}
.ho-wo-grid{
  position:relative;
  padding: calc(var(--g) * 3) var(--g);
  display:grid;
  grid-template-columns: repeat(12, var(--c));
  gap: 4rem var(--g);
}
.ho-wo-2-li{
  position:relative;
  grid-row: var(--gr); grid-column: var(--gc);
  opacity:0; transform: translateY(40px);
  transition: opacity .8s var(--easeOut), transform 1s var(--easeOut);
  background: #1c1c1c;
  background-size:cover; background-position:center;
  filter: grayscale(.15) contrast(1.05);
}
.ho-wo-2-li.is-in{ opacity:1; transform:none; }
.ho-wo-2-li::before{
  content:""; position:absolute; inset:0;
  background: rgba(10,10,10,.16);
  transition: background .35s ease;
}
.ho-wo-2-li:hover::before{ background: rgba(10,10,10,0); }
.ho-wo-2-li:hover{ filter:none; }
.ho-wo-2-ti{
  position:absolute; left:0; right:0; bottom:0;
  text-align:center; overflow:hidden;
  font-family: var(--serif);
  font-size: clamp(36px, 6vw, 92px);
  line-height: 1; padding: .2em 0;
  letter-spacing:-.02em;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events:none;
  transform: translateY(50%);
}
.ho-wo-2-ti > div{
  transform: translateY(110%);
  transition: transform 1s var(--easeOut);
  will-change: transform;
}
.ho-wo-2-li.is-in .ho-wo-2-ti > div{ transform: translateY(0); }
.ho-wo-2-me{
  position:fixed; top:50%; left: var(--g); right: var(--g);
  display:flex; gap: var(--g);
  transform: translateY(-50%);
  pointer-events:none;
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.08em; text-transform:uppercase;
  z-index: 5;
  color: var(--gray);
  opacity: 0; transition: opacity .5s ease;
}
#ho-wo-2.is-active .ho-wo-2-me{ opacity:1; }
.ho-wo-2-me > div{ overflow:hidden; }
.ho-wo-2-me > div:first-child{ width: calc(var(--c) * 2 + var(--g) * 1); }
.ho-wo-2-me > div:nth-child(2){ width: calc(var(--c) * 2 + var(--g) * 1); }
.ho-wo-2-me > div:nth-child(3){ margin-left: calc(var(--c) * 5 + var(--g) * 5); }
.ho-wo-2-me > div:nth-child(4){ margin-left:auto; text-align:right; }

/* ============ Mode switcher ============ */
#ho-wo-mo{
  position:absolute; left: var(--g); bottom: var(--g);
  z-index:5;
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.12em; text-transform:uppercase;
  display:flex; gap: 1rem;
  pointer-events:auto;
}
#ho-wo-mo > a{
  position:relative; display:inline-block;
  cursor:none;
  padding-bottom: 2px;
  color: var(--gray);
  transition: color .35s ease;
}
#ho-wo-mo > a:hover{ color: var(--black); }
#ho-wo-mo > a.is-on{ color: var(--black); }
#ho-wo-mo > a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .55s var(--easeOut);
}
#ho-wo-mo > a:hover::after,
#ho-wo-mo > a.is-on::after{ transform: scaleX(1); transform-origin: left; }

/* ============ Copyright bottom-right ============ */
#ho-cp{
  position:absolute; bottom: var(--g); right: var(--g);
  font-family: var(--mono); font-size:11px; letter-spacing:.08em;
  color: var(--gray);
  z-index:5;
}

/* ============ #fix description (top-right) ============ */
#fix{
  position:absolute;
  top: 5rem;
  right: calc(var(--c) * 1 + var(--g) * 3);
  width: calc(var(--c) * 2 + var(--g));
  z-index: 9997;
  font-family: var(--gothic);
  font-size: 13px; line-height: 1.5;
  pointer-events:auto;
}
#fix-de{
  margin-bottom: 1.3rem;
}
#fix-de .ln_{ display:block; }
#fix-co{ font-size: 12px; color: var(--gray); }
#fix-co em{ font-style:normal; color: var(--black); }
#fix-co-em{ position:relative; display:inline-block; cursor:none; }
#fix-co-em .l{
  position:absolute; left:0; bottom:-2px; width:100%;
}
#fix-co-em .l > div{ transform: translateX(0); }
#fix-co-em:hover .l > div{ transform: translateX(101%); }

@media (max-width:820px){
  #fix{ display:none; }
  #ho-wo-0-ti{ left:.5rem; width:60vw; font-size:1.3rem; height:18rem; }
  #ho-wo-0-me_{ left:.5rem; width:calc(100vw - 1rem); top: auto; bottom: 5rem; transform:none; }
  #ho-wo-0-me_ #ho-wo-0-me > div > span:first-child{ width:60%; }
  #ho-wo-0-me_ #ho-wo-0-me > div > span:nth-child(2){ width:30%; }
  #ho-wo-0-me_ #ho-wo-0-me > div > span:nth-child(3){ width:10%; }
}

/* =========================================================
   ABOUT
   ========================================================= */
section{ position:relative; }
.ab{
  padding: 8rem var(--g) 5rem;
}
#ab-co-ma{
  position:relative;
  padding-block-start: 5rem;
  padding-inline: var(--g) 0;
  letter-spacing: -.03em;
  font-size: clamp(40px, 4.4vw, 84px);
  line-height: 1.18;
  font-family: var(--serif);
  font-weight: 500;
}
#ab-co-ma > div:first-child{
  width: calc(var(--c) * 9 + var(--g) * 8);
}
#ab-co-ma .ln_{ margin-block-start: -.4rem; margin-block-end: -.4rem; padding-block: .3rem; }
#ab-co-ma u{
  text-decoration: underline; text-underline-offset: .15em;
  cursor:none; transition: color .3s;
  color: var(--accent);
}
#ab-co-ma u:hover{ color: var(--gray); }

.big-line em{
  font-style:normal; color: var(--accent);
}

.ab-meta{
  display:grid;
  grid-template-columns: var(--c) calc(var(--c) * 6 + var(--g) * 5) 1fr;
  gap: var(--g);
  padding-top: 6rem;
  border-top: 1px solid rgba(10,10,10,.16);
  margin-top: 6rem;
}
.ab-meta__col p{
  font-size: 1.1rem; line-height: 1.7;
  max-width: 42ch;
}
.ab-meta__col em{ font-style:normal; font-family: var(--display); letter-spacing:.04em; }
.ab-meta__col--list dl{ display:flex; flex-direction:column; gap:.6rem; }
.ab-meta__col--list dl > div{
  display:flex; justify-content:space-between;
  padding: .8rem 0;
  border-bottom: 1px solid rgba(10,10,10,.16);
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.08em; text-transform:uppercase;
}
.ab-meta__col--list dt{ color: var(--gray); }
.ab-meta__col--list dd{ font-family: var(--display); font-size: 13px; }
.micro{
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.12em; text-transform:uppercase;
  color: var(--gray);
  display:inline-block;
}
@media (max-width: 820px){
  .ab-meta{ grid-template-columns: 1fr; gap: 2rem; }
}

/* =========================================================
   Big marquee
   ========================================================= */
.mq{
  padding: 1.5rem 0;
  border-top: 1px solid rgba(10,10,10,.16);
  border-bottom: 1px solid rgba(10,10,10,.16);
  overflow:hidden; white-space:nowrap;
}
.mq__track{
  display:inline-flex; gap: 3rem;
  animation: ticker 28s linear infinite;
  will-change: transform;
}
.mq h3{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(60px, 12vw, 200px);
  letter-spacing: -.04em; line-height:1;
  display:inline-block;
}
.mq h3.outline{
  -webkit-text-stroke: 1px var(--black);
  color: transparent;
}

/* =========================================================
   SERVICES
   ========================================================= */
.sv{ padding: 7rem var(--g) 5rem; }
.sv-head{
  display:flex; justify-content:space-between;
  border-top: 1px solid rgba(10,10,10,.16);
  padding-top: 1.4rem;
  margin-bottom: 4rem;
}

.sv-list{ border-top: 1px solid rgba(10,10,10,.16); }
.sv-row{
  position:relative;
  display:grid;
  grid-template-columns: 4rem 1.4fr 1fr 1.6fr 3rem;
  gap: var(--g);
  align-items: center;
  padding: 2.2rem var(--g);
  border-bottom: 1px solid rgba(10,10,10,.16);
  overflow:hidden; isolation:isolate;
  cursor:none;
  transition: color .35s ease;
}
.sv-row__num{ font-family: var(--mono); font-size: 11px; letter-spacing:.12em; color: var(--gray); }
.sv-row__title{
  font-family: var(--serif); font-weight: 500; line-height:1;
  font-size: clamp(36px, 4.6vw, 78px);
  letter-spacing: -.02em;
}
.sv-row__title .ln{ transition: transform 1s var(--easeOut); }
.sv-row:hover .sv-row__title .ln{ transform: translateX(1rem); }
.sv-row__cat{
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.12em; text-transform: uppercase;
  color: var(--gray);
}
.sv-row__desc{
  font-size: .96rem; line-height: 1.6;
  color: rgba(10,10,10,.7);
  max-width: 38ch;
}
.sv-row__arrow{
  display:flex; align-items:center; justify-content:flex-end;
  transition: transform .4s ease;
}
.sv-row__arrow svg{ width: 26px; height: 26px; }
.sv-row__hover{
  position:absolute; inset:0; z-index:-1;
  background-position:center; background-size:cover;
  background-image: var(--img);
  filter: grayscale(.2) contrast(1.05) brightness(.7);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .65s var(--easeStrong);
}
.sv-row:hover{ color: #fff; }
.sv-row:hover .sv-row__hover{ transform: scaleY(1); transform-origin: top; }
.sv-row:hover .sv-row__num,
.sv-row:hover .sv-row__cat,
.sv-row:hover .sv-row__desc{ color: rgba(255,255,255,.8); }
.sv-row:hover .sv-row__arrow{ transform: translate(8px,-6px); }
@media (max-width: 820px){
  .sv-row{ grid-template-columns: 1fr; gap:.6rem; padding: 1.6rem var(--g); }
  .sv-row__arrow{ display:none; }
}

/* =========================================================
   ARTISTS
   ========================================================= */
.ar{ padding: 7rem var(--g) 5rem; position:relative; }
.ar-claim{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(48px, 6vw, 110px);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 2rem 0 5rem;
}
.ar-list{ border-top: 1px solid rgba(10,10,10,.16); }
.ar-list li + li{ }

.ar-row{
  position:relative;
  display:grid;
  grid-template-columns: 4rem 1.5fr 1fr 0.6fr;
  gap: var(--g);
  align-items: baseline;
  padding: 1.8rem var(--g);
  border-bottom: 1px solid rgba(10,10,10,.16);
  overflow:hidden;
  transition: padding .5s var(--easeOut), color .3s;
}
.ar-row__num{ font-family: var(--mono); font-size: 11px; color: var(--gray); letter-spacing:.12em; }
.ar-row__name{
  font-family: var(--serif);
  font-weight: 500; line-height:1;
  font-size: clamp(34px, 4.4vw, 72px);
  letter-spacing: -.02em;
}
.ar-row__name .ln{ transition: transform 1s var(--easeOut); }
.ar-row:hover .ar-row__name .ln{ transform: translateX(1.5rem); }
.ar-row__role{
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.12em; text-transform:uppercase; color: var(--gray);
}
.ar-row__year{
  font-family: var(--display); font-size: 14px;
  letter-spacing: .04em; color: var(--gray); text-align: right;
}
.ar-row__line{
  position:absolute; left:0; bottom:0; width:100%;
}
.ar-row__line .l{ width:100%; }
.ar-row:hover{ padding-left: calc(var(--g) + 1.4rem); }
@media (max-width: 820px){
  .ar-row{ grid-template-columns: 3rem 1fr 4rem; }
  .ar-row__role{ display:none; }
}

/* hover image follow */
.hover-image{
  position:fixed;
  pointer-events:none;
  width: 22rem; height: 28rem;
  z-index: 90;
  top:0; left:0;
  transform: translate(-50%, -50%) scale(.92);
  opacity:0;
  transition: opacity .35s ease, transform .55s var(--easeOut);
  overflow:hidden;
  clip-path: inset(0 0 0 0);
}
.hover-image.is-show{ opacity:1; transform: translate(-50%,-50%) scale(1); }
.hover-image__inner{
  width:100%; height:100%;
  background-size:cover; background-position:center;
  background-color:#222;
  filter: contrast(1.05) saturate(.92);
  transform: scale(1.08);
  transition: transform 1s var(--easeOut);
}
.hover-image.is-show .hover-image__inner{ transform: scale(1); }
@media (max-width:820px){ .hover-image{ display:none; } }

/* =========================================================
   NEWS
   ========================================================= */
.nw{ padding: 7rem var(--g) 5rem; }
.nw-list{ border-top: 1px solid rgba(10,10,10,.16); }
.nw-row{
  position:relative;
  display:grid;
  grid-template-columns: 8rem 6rem 1fr 2.2rem;
  gap: var(--g);
  align-items: baseline;
  padding: 1.6rem var(--g);
  border-bottom: 1px solid rgba(10,10,10,.16);
  cursor:none;
  overflow:hidden;
  transition: padding .4s var(--easeOut);
}
.nw-row:hover{ padding-left: calc(var(--g) + 1.4rem); }
.nw-row__date{ font-family: var(--mono); font-size: 13px; letter-spacing:.04em; }
.nw-row__cat{
  font-family: var(--mono); font-size: 10px; letter-spacing:.14em; text-transform:uppercase;
  color: #fff; background: var(--accent); padding: 4px 8px; align-self: center; justify-self:start;
}
.nw-row__title{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(18px, 1.5vw, 26px);
  line-height: 1.4;
}
.nw-row__title .ln{ transition: transform 1s var(--easeOut); }
.nw-row:hover .nw-row__title .ln{ transform: translateX(.7rem); }
.nw-row__arrow{ font-size: 1.2rem; justify-self:end; transition: transform .35s ease; }
.nw-row:hover .nw-row__arrow{ transform: translateX(10px); }
@media (max-width: 820px){
  .nw-row{ grid-template-columns: 1fr; gap: .4rem; }
  .nw-row__arrow{ display:none; }
}

/* =========================================================
   CONTACT / FOOTER
   ========================================================= */
.ct{ padding: 7rem var(--g) 0; }
.ct-lead{ display:flex; flex-direction:column; gap: 1.6rem; }
.ct-lead .micro{
  border-top: 1px solid rgba(10,10,10,.16);
  padding-top: 1.4rem; display:block; width:100%;
}
.ct-lead .big-line{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(48px, 6vw, 110px);
  line-height: 1.1; letter-spacing: -.03em;
  margin-top: 1rem;
}

.cta-circle{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width: clamp(220px, 28vw, 380px);
  height: clamp(220px, 28vw, 380px);
  margin: 5rem auto;
  border-radius:50%;
  isolation:isolate;
  cursor:none;
}
.cta-circle__bg{
  position:absolute; inset:0; border-radius:50%;
  background: var(--black);
  transform: scale(.94);
  transition: transform .55s var(--easeStrong), background .35s ease;
}
.cta-circle:hover .cta-circle__bg{ transform: scale(1); background: var(--accent); }
.cta-circle__inner{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width: 5rem; height: 5rem;
  border:1px solid #fff; border-radius:50%;
  color:#fff;
}
.cta-circle__inner svg{ width: 1.6rem; height: 1.6rem; transition: transform .45s var(--easeOut); }
.cta-circle:hover .cta-circle__inner svg{ transform: translateX(.4rem) rotate(-45deg); }
.cta-circle__label{
  position:absolute; inset:0; z-index:2;
  animation: spin-slow 18s linear infinite;
}
.cta-circle__label svg{ width:100%; height:100%; }
@keyframes spin-slow{ to{ transform: rotate(360deg); } }

.ct-grid{
  margin-top: 4rem;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  border-top: 1px solid rgba(10,10,10,.16);
  padding-top: 3.5rem;
}
.ct-grid p{ font-size: 13px; line-height: 1.7; color: rgba(10,10,10,.65); }
.ct-grid .micro{ display:block; margin-bottom: .6rem; }
.link-line{
  position:relative; display:inline-block;
  padding-bottom: 4px;
}
.link-line .l{ position:absolute; left:0; bottom:0; width:100%; }
.socials{ display:flex; flex-direction:column; gap: .4rem; font-size: 13px; }
@media (max-width:820px){
  .ct-grid{ grid-template-columns: 1fr 1fr; }
}

/* footer */
.ft{ margin-top: 6rem; }
.ft-mega{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(120px, 26vw, 460px);
  line-height: .85;
  letter-spacing: -.04em;
  text-align:center;
  -webkit-text-stroke: 1.2px var(--black);
  color: transparent;
  white-space:nowrap;
  user-select:none;
  pointer-events:none;
  overflow:hidden;
}
.ft-mega .ln_{ display:block; }
.ft-mega .ln{ transition: transform 1.4s var(--easeStrong); }
.ft-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding: 1.4rem var(--g);
  border-top: 1px solid rgba(10,10,10,.16);
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.1em; text-transform: uppercase;
  color: var(--gray);
  flex-wrap: wrap; gap: .8rem;
}
@media (max-width: 820px){
  .sv, .ar, .nw, .ct, .ab{ padding-left: 1rem; padding-right: 1rem; }
  .ft-bottom{ flex-direction: column; align-items:flex-start; }
}

/* =========================================================
   Obys-style hero lock: only mode 0 (vertical column),
   wheel-driven, sections below are not reachable until
   user clicks a tile or menu link.
   ========================================================= */

/* Hide other hero modes & the mode switcher */


/* Lock state */
body.is-hero-locked{
  overflow:hidden;
  height:100svh;
}
/* Hide everything below hero while locked (so it's truly invisible) */
body.is-hero-locked main > section:not(.hero){
  visibility:hidden;
  pointer-events:none;
}

/* Tiles get cursor + smooth interactivity */
#ho-wo-0 .r{
  cursor:none;
  transition: transform .8s var(--easeOut), filter .5s ease;
}
#ho-wo-0 .r:hover{
  transform: scale(1.04);
  filter: brightness(1.1) contrast(1.05);
}

/* Visual hint that hero is locked: subtle scroll indicator */
.scroll-hint{
  position:fixed;
  left:50%; bottom: 1.4rem;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
  z-index: 8000;
  pointer-events:none;
  display:flex; align-items:center; gap:.6rem;
  mix-blend-mode: difference; color: #fff;
  opacity: 0;
  transition: opacity .6s ease .3s;
}
.is-ready .scroll-hint{ opacity:.85; }
body:not(.is-hero-locked) .scroll-hint{ opacity:0 !important; transition: opacity .25s ease; }
.scroll-hint__line{
  display:inline-block;
  width: 28px; height:1px;
  background: currentColor;
  position:relative; overflow:hidden;
}
.scroll-hint__line::after{
  content:""; position:absolute; inset:0;
  background: var(--white);
  transform: translateX(-101%);
  animation: hintLine 1.8s linear infinite;
}
@keyframes hintLine{
  0%{ transform: translateX(-101%); }
  60%, 100%{ transform: translateX(101%); }
}

/* =========================================================
   Subpage layout (about / services / artists / news)
   ========================================================= */
main.subpage{
  padding-top: 6rem;     /* below the fixed header */
}

/* Page hero (per-section title block) */
.page-hero{
  position:relative;
  padding: 8rem var(--g) 6rem;
  border-bottom: 1px solid rgba(10,10,10,.16);
  display:grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.page-hero__num{
  font-family: var(--mono);
  font-size: 11px; letter-spacing:.14em; text-transform: uppercase;
  color: var(--gray);
}
.page-hero__title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(64px, 11vw, 200px);
  line-height: .95;
  letter-spacing: -.04em;
  margin: 0;
}
.page-hero__title .line--en{
  font-family: var(--display);
  font-style: italic;
  color: var(--gray);
  font-size: .55em;
  letter-spacing: -.02em;
  margin-top: .4rem;
}
.page-hero__title .line--en i{
  font-style: italic; color: var(--accent);
}
.page-hero__lead{
  max-width: 56ch;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(10,10,10,.7);
}

/* Highlight active menu link in header */
#header-menu a.is-active > span > .l > div{
  transform: translateX(0);
  transform-origin: left;
}
#header-menu a.is-active{ font-weight: 500; }

/* Subpage footer */
.subpage-ft{
  margin-top: 6rem;
  border-top: 1px solid rgba(10,10,10,.16);
  padding-top: 2rem;
}
.subpage-ft__nav{
  display:flex; justify-content: space-between; align-items: flex-end;
  padding: 2rem var(--g) 4rem;
  border-bottom: 1px solid rgba(10,10,10,.16);
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 56px);
  letter-spacing: -.02em;
  line-height: 1.1;
  gap: 2rem;
  flex-wrap: wrap;
}
.subpage-ft__nav a{
  display: inline-block;
  position: relative;
}
.subpage-ft__nav .micro{
  display:block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--gray);
  margin-bottom: .6rem;
  text-transform: uppercase;
}
.subpage-ft .ft-bottom{
  display:flex;
  justify-content: space-between;
  padding: 1.4rem var(--g);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray);
  flex-wrap: wrap; gap: .8rem;
}

/* On subpages we don't want hero-locked behavior to bleed in */
body[data-page]:not([data-page="home"]) .scroll-hint{ display: none; }

@media (max-width:820px){
  .page-hero{ padding: 6rem 1rem 3rem; }
  .subpage-ft__nav{ padding: 2rem 1rem 3rem; }
}

/* =========================================================
   Hide header menu — navigation is provided by hero tiles
   and subpage Next/Back links. Keeps logo area clean.
   ========================================================= */
#header-menu{ display:none !important; }

/* Ensure header-right cluster sticks to the RIGHT now that title is hidden */
#header{ justify-content: flex-end !important; }
#header-right{ flex: 0 0 auto; }
#header-right > *{ width: auto !important; }
#header-time, #header-contact_{ text-align: right; }

/* =========================================================
   v2 enhancements (2026-05-06)
   - WebGL background grain layer (replaces #grain CSS overlay)
   - Tile hover micro-distortion
   - Long-form easing for hero/page-hero
   - Page transition curtain
   - Cursor state variants
   - Mode-switch crossfade
   - Marquee dual-layer counter-flow
   ========================================================= */

/* WebGL canvas — disabled (grain effect deemed unnecessary, 2026-05-06).
   Re-enable by removing the `display: none` line below. */
#gl{
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
  opacity: .45;
}
/* Hide the legacy CSS grain when WebGL grain is active (prevents stacking) */
body.has-webgl-grain .grain{ display: none; }
/* Ensure firstview & main content sit ABOVE the WebGL grain */
#firstview-3d{ z-index: 10; }
main{ position: relative; z-index: 5; }
/* Header, logo, cursor, fix panel all need to stay above the grain too */
#header, #logo, #cursor, #fix, #ho-wo-mo{ z-index: 20; }
#cursor{ z-index: 9995; }

/* Tile hover — subtle saturation/scale lift with long ease */
#ho-wo .r,
.ho-wo-2-li{
  transition:
    transform 1.6s var(--easeStrong),
    filter 1.2s var(--easeOut),
    opacity .9s var(--easeOut);
  will-change: transform, filter;
}
#ho-wo .r:hover,
.ho-wo-2-li:hover{
  transform: scale(1.035) translateZ(0);
  filter: saturate(1.18) contrast(1.04) brightness(.98);
}
/* Slightly dim siblings to focus attention on hovered tile */
#ho-wo-0 .ho-wo-col:hover .r:not(:hover),
#ho-wo-1 .ho-wo-row:hover .r:not(:hover),
#ho-wo-2 .ho-wo-grid:hover .ho-wo-2-li:not(:hover){
  opacity: .55;
  filter: saturate(.6) brightness(.85);
}

/* Page transition curtain — covers screen on internal nav */
/* Translucent dark veil (boss spec, 2026-05-15) — was #1a1a1a opaque.
   rgba alpha 0.78 lets the underlying page peek through, giving the
   transition a "soft fog" feel rather than a hard cut. */
#curtain{
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(20, 20, 20, 0.78);
  transform: translateY(100%);
  pointer-events: none;
  will-change: transform;
}
/* In-transit landing (set by pre-paint inline <script> when arriving from a
   curtain'd link). Keeps curtain covering the viewport from the first paint,
   so the underlying "blank page + hidden text" never flashes through. */
html.curtain-in-transit #curtain{
  transform: translateY(0);
  pointer-events: auto;
}
/* Specificity guard: when JS adds .is-falling after pre-paint cover, this
   rule outranks `html.curtain-in-transit #curtain` so the curtain lifts up
   smoothly even if the cover class is still on <html>. */
html.curtain-in-transit #curtain.is-falling{
  transform: translateY(-100%);
  transition: transform .8s var(--easeStrong);
}
#curtain.is-rising{
  transform: translateY(0);
  transition: transform .6s var(--easeStrong);
  pointer-events: auto;
}
#curtain.is-falling{
  transform: translateY(-100%);
  transition: transform .8s var(--easeStrong);
}

/* Cursor state variants — small icon hint per element type */
#cursor.is-external::after,
#cursor.is-email::after,
#cursor.is-video::after,
#cursor.is-view::after{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .12em;
  color: var(--white);
  pointer-events: none;
}
#cursor.is-external::after{ content: "↗"; font-size: 1rem; line-height: 1; }
#cursor.is-email::after{    content: "EMAIL"; }
#cursor.is-video::after{    content: "PLAY"; }
#cursor.is-view::after{     content: "VIEW"; }
#cursor.is-external .cursor__label,
#cursor.is-email .cursor__label,
#cursor.is-video .cursor__label,
#cursor.is-view .cursor__label{ display: none; }

/* Mode-switch crossfade — replace the old display:none flip */
.ho-wo-s_{
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s var(--easeOut);
}
.ho-wo-s_.is-active{
  opacity: 1;
  pointer-events: auto;
}
/* Make sure inactive layers don't capture clicks even though they remain in DOM */
.ho-wo-s_:not(.is-active){ visibility: hidden; }
.ho-wo-s_.is-active{ visibility: visible; }

/* Marquee — second counter-flow layer (uses existing .mq__track styling) */
.mq{ position: relative; overflow: hidden; }
.mq__track--reverse{
  animation-direction: reverse;
  animation-duration: 36s;
  opacity: .42;
  margin-top: -.45em;
}

/* Magnetic targets — reset transform after release */
.magnetic{
  display: inline-block;
  transition: transform .6s var(--easeOut);
  will-change: transform;
}

/* Long ease for page-hero text reveal */
.page-hero .ln,
.hero-claim__h .ln,
.big-line .ln{
  transition: transform 1.4s var(--easeStrong);
}

/* =========================================================
   Tile caption modal — hover bubble over hero tiles
   Captions sourced from deuce-entertainment.com/about-2.
   Card sits above cursor; black bg ensures readability over
   any tile image (white-on-image was rejected earlier).
   ========================================================= */
#tile-modal{
  position: fixed; top:0; left:0;
  z-index: 95;
  pointer-events: none;
  padding: .95rem 1.35rem 1rem;
  background: rgba(10,10,10,.94);
  color: var(--white);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .05em;
  white-space: pre-line;
  max-width: 26rem;
  border-radius: 1px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -100%) scale(.96);
  transition: opacity .32s var(--easeOut),
              transform .42s var(--easeOut),
              visibility 0s .32s;
  will-change: transform, opacity, left, top;
}
#tile-modal.is-on{
  opacity: 1; visibility: visible;
  transform: translate(-50%, -100%) scale(1);
  transition: opacity .3s var(--easeOut),
              transform .4s var(--easeOut),
              visibility 0s 0s;
}
.tile-modal__cap{ display:block; }
@media (max-width: 820px){ #tile-modal{ display:none; } }

/* =========================================================
   Work-detail page layout — obys.agency 生 CSS そのまま流用
   + スクショ実測値での補正 (2026-05-15)
   - 全テキストは obys と同じ 1.1rem (= body font-size 継承)
   - 画像は viewport 71vh × 53vw, aspect ≈ 1.33:1 横長
   - body 自体は overflow:hidden で縦スクロール禁止
     → JS が wheel event を #wo-ga に転送する
   ========================================================= */

/* Lock the body to 1 viewport on this page only */
body[data-page="management"]{
  overflow: hidden;
  overscroll-behavior: none;
  height: 100svh;
}
body[data-page="management"] .subpage{
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  padding-top: 0;          /* override main.subpage{padding-top:6rem} so #wo
                              actually fills the viewport top-to-bottom */
}

#wo{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100svh;
}

#wo-back{
  position: absolute;
  bottom: var(--g);
  left: var(--g);
  color: #c9c9c9;
  z-index: 10;
  font-size: 1.1rem;
  line-height: 1.2;
}
#wo-back .l{ transform-origin: right; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
#wo-back:hover .l{ transform: scaleX(0); }
#wo-back:not(:hover) .l{ transform-origin: left; }

#wo-info{
  display: flex;
  align-items: center;       /* wo-ti と wo-meta を縦中央に揃える (boss spec) */
  padding-left: var(--g);
}
.wo-ti{
  width: calc(var(--c) * 2 + var(--g) * 1);
  font-family: var(--display);
  font-size: 1.1rem;          /* obys 完全一致 */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.wo-meta{
  width: calc(var(--c) * 3 + var(--g) * 2);
  padding-inline: var(--m-x);
  box-sizing: border-box;
}
.wo-meta-g{
  font-family: var(--serif);
  font-size: 1.1rem;          /* obys 完全一致 */
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -.005em;
  margin-bottom: 0;
}
.wo-link{
  display: inline-block;
  margin-top: 1.1rem;
}
.wo-link a{
  display: inline-block;
  font-family: var(--serif);
  font-size: 1.1rem;          /* obys 完全一致 */
  line-height: 1.2;
}
.wo-link .l{ transform-origin: right; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.wo-link:hover .l{ transform: scaleX(0); }
.wo-link:not(:hover) .l{ transform-origin: left; }

#wo-ga{
  position: relative;
  width: calc(var(--c) * 6 + var(--g) * 6.5);
  height: 100svh;
  overflow: hidden;           /* JS が scrollTop 制御、ネイティブ scrollbar 不要 */
  scrollbar-width: none;
}
#wo-ga::-webkit-scrollbar{ display: none; }

/* On management.html, each .wo-ga__item is absolutely positioned and
   JS sets its translateY + scale every frame. cumulative-Y uses the
   *scaled* height so neighboring images stay flush even when scale<1
   (obys: Q += j with j = baseH * scale). No CSS gap, no margin.
   On other pages, the natural flow + .is-in fade-in fallback applies. */
.wo-ga__item{
  position: relative;
  width: 100%;
  aspect-ratio: 1.33 / 1;
  height: auto;
  margin: 0;
  overflow: hidden;
  transform-origin: center center;
  will-change: transform;
}
body[data-page="management"] #wo-ga{ position: relative; }
body[data-page="management"] .wo-ga__item{
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top center;   /* scale shrink goes downward only,
                                     so item i's bottom == item i+1's top
                                     when JS accumulates with scaled height */
}
.wo-ga__item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Fallback fade-in for non-management subpages (future use) */
body:not([data-page="management"]) .wo-ga__item{
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.2s var(--easeStrong), transform 1.4s var(--easeStrong);
}
body:not([data-page="management"]) .wo-ga__item.is-in{
  opacity: 1;
  transform: scale(1);
}

/* Mobile: collapse the flex layout into stacked sections */
@media (max-width: 820px){
  body[data-page="management"]{ overflow: auto; height: auto; }
  body[data-page="management"] .subpage{ height: auto; overflow: visible; }
  #wo{
    flex-direction: column;
    height: auto;
    min-height: 100svh;
    padding: 5rem var(--m-x) 3rem;
    align-items: stretch;
  }
  #wo-info{
    flex-direction: column;
    padding: 0;
    margin-bottom: 2rem;
  }
  .wo-ti, .wo-meta{
    width: 100%;
    padding: 0;
  }
  #wo-ga{
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .wo-ga__item{
    height: 60vh;
    margin-block: 3vh;
  }
}

/* =========================================================
   First-view 3D — image-sequence cinematic overlay
   (replaces the old intro.mp4 first-view, 2026-05-19)
   Fixed-overlay model: covers the whole viewport while playing,
   hijacks wheel/touch to drive the 647-frame progress, then fades
   out so the underlying home page (existing tile-grid) is revealed.
   ========================================================= */
#firstview-3d{
  position: fixed;
  inset: 0;
  background: #0a0a0a;
  overflow: hidden;
  z-index: 100;
  /* Soft fade-out when the user finishes the sequence. */
  transition: opacity .6s var(--easeOut, ease), visibility 0s linear .6s;
}
#firstview-3d.is-completed{
  /* Hero の本体 (image sequence + hint + progress + loader) は隠すが、
     粒子レイヤー (#fv3d-particles) だけは生かして home-board でもカーソル追従粒子を継続。
     parent 全体の opacity/visibility は触らない。 */
  pointer-events: none;
  background: transparent;
}
#firstview-3d.is-completed #fv3d-stage,
#firstview-3d.is-completed #fv3d-hint,
#firstview-3d.is-completed #fv3d-progress,
#firstview-3d.is-completed #fv3d-loader{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* While the cinematic overlay is up, lock page scroll so the user
   can't bail mid-sequence and the underlying page doesn't move. */
body.fv3d-playing{
  overflow: hidden;
  height: 100vh;
  touch-action: none;
}
#fv3d-stage{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
#fv3d-canvas{
  /* size is driven by JS resizeCanvas() in `object-fit: cover` mode —
     it can intentionally exceed 100vw/100vh so the viewport is filled
     even on ultrawide / portrait aspect ratios. The parent #fv3d-stage
     centers it, and #firstview-3d has overflow:hidden to clip the bleed. */
  display: block;
  image-rendering: -webkit-optimize-contrast;
  transition: filter .08s linear;
  will-change: filter;
}
#fv3d-particles{
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
}
#fv3d-progress{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(255,255,255,0.06);
  z-index: 3;
}
#fv3d-progress > i{
  display: block;
  height: 100%;
  background: #ff3b1c;
  width: 0%;
  transition: width .06s linear;
}
#fv3d-hint{
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: .62rem;
  letter-spacing: .24em;
  color: rgba(255,255,255,.55);
  pointer-events: none;
  z-index: 3;
  animation: fv3dBob 2.2s ease-in-out infinite;
  white-space: nowrap;
}
@keyframes fv3dBob{
  0%, 100%{ transform: translate(-50%, 0); }
  50%    { transform: translate(-50%, 4px); }
}
#fv3d-loader{
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  background: #0a0a0a;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
#fv3d-loader.is-done{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#fv3d-loader .fv3d-loader__inner{
  text-align: center;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: .72rem;
  letter-spacing: .22em;
  color: #ffffff;
}
#fv3d-loader .fv3d-loader__bar{
  margin-top: 12px;
  width: 200px;
  height: 1px;
  background: rgba(255,255,255,0.1);
  position: relative;
}
#fv3d-loader .fv3d-loader__bar > i{
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: #ffffff;
  transition: width .1s linear;
}
#fv3d-loader .fv3d-loader__pct{
  margin-top: 8px;
  font-size: .58rem;
  opacity: .5;
  font-feature-settings: "tnum";
}
@media (max-width: 820px){
  #fv3d-hint{ font-size: .55rem; letter-spacing: .2em; }
}
@media (prefers-reduced-motion: reduce){
  #fv3d-hint{ animation: none; }
}

/* =========================================================
   DEUCE ロゴ固定表示 (全ページ共通、画面上部中央 z-17)
   - Hero (firstview-3d) / home-board / サブページ どこでも表示
   ========================================================= */
.db-logo{
  position: fixed;
  top: 0.55em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 17;
  width: clamp(46px, 4.4vw, 70px);
  height: auto;
  pointer-events: auto;
  opacity: 0.92;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45));
  transition: opacity 0.4s ease;
}
.db-logo:hover{ opacity: 1; }
.db-logo img{ width: 100%; height: auto; display: block; }

/* =========================================================