/* ============================================================
   visite3d.css — Visite 3D WebGL d'une machiya de Kyoto (Three.js)
   Esthétique « planche d'archive » : angles vifs, filets 1px,
   AUCUN border-radius (sauf le nub du joystick), tons sourds.
   La scène est rendue dans un <canvas> ; ici : overlay + HUD.
   ============================================================ */

/* ---------- Overlay ---------- */
#v3d{
  position:fixed; inset:0; z-index:9999; display:none;
  background:#0d0c0a;
  font-family:"Zen Kaku Gothic New",sans-serif;
  color:#e8dfca;
  -webkit-user-select:none; user-select:none;
}
body.v3d-open{ overflow:hidden; }

/* vignettage discret au-dessus du rendu */
#v3d::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:5;
  background:radial-gradient(ellipse at 50% 44%, rgba(0,0,0,0) 55%, rgba(0,0,0,.5) 100%);
}

/* ---------- Scène WebGL ---------- */
.v3d-vp{
  position:absolute; inset:0; overflow:hidden;
  touch-action:none; cursor:grab;
}
.v3d-vp:active{ cursor:grabbing; }
.v3d-canvas{ display:block; width:100%; height:100%; }
#v3d.mode-visit .v3d-vp{ cursor:crosshair; }

/* ---------- Étiquettes de pièces (mode plan, projetées à l'écran) ---------- */
.v3d-labels{ position:absolute; inset:0; z-index:6; pointer-events:none; }
.v3d-roomlabel{
  position:absolute; left:0; top:0; width:132px;
  transform:translate(-50%,-50%);
  pointer-events:auto; cursor:pointer;
  text-align:center; padding:7px 4px 6px;
  background:rgba(27,25,21,.58);
  border:1px solid rgba(232,223,202,.55);
  transition:background .25s, opacity .35s;
  will-change:left,top;
}
.v3d-roomlabel b{
  display:block; font-family:"Shippori Mincho",serif; font-weight:600;
  font-size:22px; line-height:1.05; color:#faf7f0; letter-spacing:.06em;
}
.v3d-roomlabel span{
  display:block; margin-top:3px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(232,223,202,.85);
}
.v3d-roomlabel:hover{ background:rgba(176,84,58,.78); }
#v3d.mode-visit .v3d-roomlabel{ display:none; }
#v3d.mode-fly   .v3d-roomlabel{ opacity:0; pointer-events:none; }

/* ---------- HUD ---------- */
#v3d button{
  appearance:none; -webkit-appearance:none;
  background:rgba(250,247,240,.07);
  border:1px solid rgba(232,223,202,.45);
  color:#e8dfca;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:10px 15px; cursor:pointer;
  transition:background .2s, border-color .2s;
  z-index:10; position:absolute;
}
#v3d button:hover{ background:rgba(250,247,240,.16); border-color:rgba(232,223,202,.8); }
#v3d button:focus-visible{ outline:1px solid #b0543a; outline-offset:2px; }

.v3d-x{ top:14px; right:14px; width:42px; height:42px; padding:0; font-size:15px; }
#v3dMode{ top:14px; left:14px; }

/* Titre du mode plan */
.v3d-title{
  position:absolute; top:18px; left:50%; transform:translateX(-50%);
  text-align:center; z-index:8; pointer-events:none;
  transition:opacity .35s;
}
.v3d-title b{
  display:block; font-family:"Shippori Mincho",serif; font-weight:600;
  font-size:19px; letter-spacing:.1em; color:#faf7f0;
}
.v3d-title small{
  display:block; margin-top:4px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(232,223,202,.7);
}
#v3d.mode-visit .v3d-title, #v3d.mode-fly .v3d-title{ opacity:0; }
#v3d.mode-visit .v3d-enter, #v3d.mode-fly .v3d-enter{ display:none; }

/* Bouton « Entrer · 見学 » */
.v3d-enter{
  bottom:64px; left:50%; transform:translateX(-50%);
  background:#b0543a !important;
  border:1px solid #8c4029 !important;
  color:#faf7f0 !important;
  font-size:12.5px; padding:15px 30px;
}
.v3d-enter:hover{ background:#8c4029 !important; }

/* Sous-titres de film (bas) */
.v3d-cap{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:8; pointer-events:none;
  max-width:min(700px,90vw); text-align:center;
  font-family:"Shippori Mincho",serif;
  text-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.6);
  opacity:0; transition:opacity .6s;
}
#v3d.mode-visit .v3d-cap.show{ opacity:1; }
#v3d.mode-plan .v3d-cap{ display:none; }
.v3d-cap b{ font-size:23px; font-weight:600; letter-spacing:.08em; color:#faf7f0; margin-right:12px; }
.v3d-cap span{ font-size:14.5px; color:rgba(232,223,202,.94); }

/* Aide (auto-masquée) */
.v3d-hint{
  position:absolute; top:72px; left:50%; transform:translateX(-50%);
  z-index:8; pointer-events:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px; letter-spacing:.12em;
  color:rgba(232,223,202,.85);
  background:rgba(13,12,10,.6);
  border:1px solid rgba(232,223,202,.25);
  padding:8px 13px;
  opacity:0; transition:opacity .45s;
}
.v3d-hint.on{ opacity:1; }

/* Invite pointer lock « cliquez pour regarder autour » (desktop, mode visite) */
.v3d-lock{
  position:absolute; bottom:96px; left:50%; transform:translateX(-50%);
  z-index:8; pointer-events:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(232,223,202,.9);
  background:rgba(13,12,10,.62);
  border:1px solid rgba(232,223,202,.3);
  padding:9px 14px;
  opacity:0; transition:opacity .4s;
}
.v3d-lock.on{ opacity:1; }

/* Panneau « rendu 3D interrompu » (perte de contexte WebGL) */
.v3d-lost{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:12; display:none; text-align:center;
  background:rgba(13,12,10,.92);
  border:1px solid rgba(232,223,202,.4);
  padding:26px 34px;
}
.v3d-lost.on{ display:block; }
.v3d-lost p{
  margin:0 0 16px;
  font-family:"Shippori Mincho",serif; font-size:15px; color:#faf7f0;
}
.v3d-lost button{ position:static !important; }

/* Message « WebGL indisponible » */
.v3d-nogl{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:12; max-width:min(420px,84vw); text-align:center;
  font-family:"Shippori Mincho",serif; font-size:15.5px; color:#faf7f0;
  background:rgba(13,12,10,.9);
  border:1px solid rgba(232,223,202,.4);
  padding:24px 30px;
}

/* Joystick tactile (moitié gauche) */
.v3d-joy{
  position:absolute; width:108px; height:108px; z-index:9;
  border:1px solid rgba(232,223,202,.4);
  background:rgba(13,12,10,.25);
  display:none; pointer-events:none;
  margin:-54px 0 0 -54px;
}
.v3d-joy.on{ display:block; }
.v3d-joy-nub{
  position:absolute; left:50%; top:50%; width:38px; height:38px;
  margin:-19px 0 0 -19px;
  background:rgba(232,223,202,.55);
  border:1px solid rgba(27,25,21,.6);
  border-radius:50%; /* seule exception arrondie du module */
}

/* ---------- Teaser intégré (#v3dInline, page d'accueil) ----------
   Le même canvas WebGL est rendu directement dans ce conteneur en
   mode plan orbital ; un clic le reparente dans l'overlay #v3d.  */
/* :where() = spécificité nulle : les réglages du site (styles.css,
   #v3dInline) gardent la main sur fond/bordure/hauteur. */
:where(#v3dInline){
  position:relative; overflow:hidden;
  background:#0d0c0a;
  cursor:grab;
  touch-action:pan-y;            /* le doigt peut toujours faire défiler la page */
  -webkit-user-select:none; user-select:none;
}
:where(#v3dInline):active{ cursor:grabbing; }
#v3dInline{ position:relative; overflow:hidden; }   /* invariants du module */
#v3dInline .v3d-canvas{ position:absolute; inset:0; }
/* .v3d-labels / .v3d-roomlabel / .v3d-nogl : règles globales déjà
   applicables ici (position:absolute relative au conteneur). */

/* Indice « molette pour zoomer » (après le premier clic/toucher) */
.v3d-wheelhint{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  z-index:8; pointer-events:none; white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(232,223,202,.9);
  background:rgba(13,12,10,.62);
  border:1px solid rgba(232,223,202,.3);
  padding:7px 12px;
  opacity:0; transition:opacity .4s;
}
.v3d-wheelhint.on{ opacity:1; }

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .v3d-title b{ font-size:15px; }
  .v3d-title{ top:66px; max-width:74vw; }
  #v3dMode{ font-size:10px; padding:9px 11px; }
  .v3d-roomlabel{ width:104px; }
  .v3d-roomlabel b{ font-size:17px; }
  .v3d-cap b{ font-size:19px; margin-right:8px; }
  .v3d-cap span{ font-size:12.5px; }
  .v3d-cap{ bottom:18px; }
  .v3d-enter{ bottom:84px; padding:13px 22px; }
  .v3d-hint{ top:auto; bottom:150px; max-width:86vw; text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  #v3d *{ transition-duration:.01s !important; }
}

/* ============================================================
   photo-3D scroll — visite « photos en relief » (visite-photo3d.js)
   La section porte vt3-on quand le moteur WebGL tourne (le repli
   DOM .vt3-fallback est alors caché) et vt3-off en cas de repli
   (reduced-motion, pas de WebGL, erreur) : la piste disparaît et
   les figures statiques restent seules visibles.
   ============================================================ */

/* états moteur */
#vt3Track{ display:none; }
.vt3-on  #vt3Track{ display:block; }
.vt3-on  .vt3-fallback{ display:none; }
.vt3-off #vt3Track{ display:none !important; }

/* piste + viewport sticky plein écran */
#vt3Track{ position:relative; }
.vt3-pin{
  position:sticky; top:0; height:100vh; height:100svh;
  overflow:hidden; background:#0d0c0a;
}
#vt3Stage{ position:absolute; inset:0; }
#vt3Stage .vt3-canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  object-fit:cover; background:#0d0c0a;
  transform-origin:50% 46%; will-change:transform;
  opacity:1; transition:opacity 1.1s ease;
}
.vt3-ended #vt3Stage .vt3-canvas{ opacity:.1; }

/* sous-titre façon film : gros kanji + titre + sous-titre */
#vt3Cap{
  position:absolute; left:clamp(18px,5vw,64px); bottom:0; height:8.5vh;
  z-index:6; display:flex; align-items:center; gap:14px;
  pointer-events:none; color:#e8dfca;
  opacity:0; transition:opacity .5s;
}
#vt3Cap.on{ opacity:1; }
#vt3Cap.on .vt3-cap-k{ animation:vt3capk .9s cubic-bezier(.2,.8,.2,1) both; }
#vt3Cap.on .vt3-cap-t{ animation:vt3capt .9s .12s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vt3capk{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes vt3capt{ from{ opacity:0; transform:translateX(-10px);} to{ opacity:1; transform:none; } }
.vt3-cap-k{
  font-family:'Shippori Mincho','Noto Serif JP',serif;
  font-size:clamp(26px,5vh,46px); line-height:1;
  color:rgba(232,223,202,.94);
  text-shadow:0 2px 26px rgba(0,0,0,.75);
}
.vt3-cap-t{ display:flex; flex-direction:column; gap:4px;
  border-left:1px solid rgba(232,223,202,.35); padding-left:16px; }
.vt3-cap-t b{
  font-family:'Shippori Mincho','Noto Serif JP',serif; font-weight:600;
  font-size:clamp(14px,2vh,19px); letter-spacing:.14em; text-transform:uppercase;
  text-shadow:0 1px 14px rgba(0,0,0,.8);
}
.vt3-cap-t i{
  font-style:normal; font-size:clamp(10px,1.3vh,12px);
  letter-spacing:.1em; color:rgba(232,223,202,.66);
  text-shadow:0 1px 10px rgba(0,0,0,.8);
}
.vt3-ended #vt3Cap{ opacity:0; }

/* rail de progression : un kanji par pièce, l'actif s'allume */
#vt3Rail{
  position:absolute; right:clamp(14px,3vw,44px); bottom:0; height:8.5vh;
  z-index:6; display:flex; flex-direction:row; align-items:center; gap:clamp(10px,1.6vw,20px);
  pointer-events:none;
}
.vt3-rk{
  font-family:'Shippori Mincho','Noto Serif JP',serif;
  font-size:13px; line-height:1; text-align:center;
  writing-mode:vertical-rl;
  color:rgba(232,223,202,.28);
  text-shadow:0 1px 8px rgba(0,0,0,.7);
  transition:color .45s, text-shadow .45s, transform .45s;
}
.vt3-rk.on{
  color:#e8dfca; transform:scale(1.28);
  text-shadow:0 0 14px rgba(232,223,202,.45);
}
.vt3-ended #vt3Rail{ opacity:0; transition:opacity .6s; }

/* indice « Faites défiler pour entrer » */
.vt3-hint{
  position:absolute; left:50%; bottom:calc(8.5vh + 16px);
  transform:translateX(-50%);
  z-index:6; pointer-events:none; white-space:nowrap;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(232,223,202,.85);
  background:rgba(13,12,10,.55);
  border:1px solid rgba(232,223,202,.28);
  padding:8px 14px;
  animation:vt3hint 2.4s ease-in-out infinite;
  transition:opacity .6s;
}
@keyframes vt3hint{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,6px);} }
.vt3-hint-off{ opacity:0 !important; }

/* carte finale (CTAs fournis par l'appelant) */
#vt3Final{
  position:absolute; inset:0; z-index:7;
  display:grid; place-items:center;
  opacity:0; pointer-events:none;
  transition:opacity .9s .35s ease;
}
.vt3-ended #vt3Final{ opacity:1; pointer-events:auto; }

/* mode cinéma : header + FAB du site s'effacent pendant la traversée */
body.vt3-cinema .site-header{ transform:translateY(-100%); transition:transform .6s cubic-bezier(.16,1,.3,1); }
.site-header{ transition:transform .6s cubic-bezier(.16,1,.3,1); }
body.vt3-cinema .wa-fab{ opacity:0 !important; pointer-events:none !important; transition:opacity .4s; }
body.vt3-cinema .topbar{ opacity:0; transition:opacity .4s; }

/* letterbox cinéma : deux barres noires, injectées par le moteur */
.vt3-bar{
  position:absolute; left:0; right:0; height:0; z-index:5;
  background:#080706;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(18px,4vw,56px); overflow:hidden;
  transition:height 1.1s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.vt3-bar-t{ top:0; border-bottom:1px solid rgba(232,223,202,.08); }
.vt3-bar-b{ bottom:0; border-top:1px solid rgba(232,223,202,.08); padding-bottom:env(safe-area-inset-bottom); }
.vt3-live .vt3-bar{ height:8.5vh; }
.vt3-ended .vt3-bar{ height:0; }
.vt3-film{
  font-family:'Shippori Mincho','Noto Serif JP',serif;
  font-size:clamp(10px,1.5vh,13px); letter-spacing:.32em;
  color:rgba(232,223,202,.78); white-space:nowrap;
}
.vt3-count{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(9px,1.3vh,11px); letter-spacing:.3em;
  color:rgba(232,223,202,.52);
}
/* indicateur de chargement du film (barre basse), visible tant que vt3-loading */
.vt3-load{
  display:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(9px,1.3vh,11px); letter-spacing:.22em;
  color:rgba(232,223,202,.55);
  animation:vt3loadpulse 1.6s ease-in-out infinite;
}
.vt3-loading .vt3-load{ display:inline; }
.vt3-loading #vt3Cap{ opacity:0; }
@keyframes vt3loadpulse{ 0%,100%{ opacity:.35; } 50%{ opacity:.9; } }

/* mobile */
@media (max-width:640px){
  .vt3-live .vt3-bar{ height:7vh; }
  #vt3Cap{ gap:10px; height:7vh; }
  .vt3-cap-k{ font-size:24px; }
  .vt3-cap-t b{ font-size:12px; }
  .vt3-cap-t i{ display:none; }
  #vt3Rail{ display:none; }
  .vt3-film{ letter-spacing:.18em; }
  .vt3-hint{ bottom:calc(7vh + 12px); }
}

/* ---- kanjis-ouvriers de la maquette 3D (kyomachiya3d.js) ---- */
.km3-workers{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.km3-k{position:absolute;left:0;top:0;font-family:var(--display,"Shippori Mincho",serif);
  font-size:30px;line-height:1;color:var(--ink,#1b1915);opacity:0;will-change:transform,opacity;
  text-shadow:0 1px 0 rgba(250,247,240,.9),0 0 14px rgba(250,247,240,.65);
  filter:drop-shadow(2px 3px 2px rgba(27,25,21,.18))}

/* ---- étiquettes des pièces (kyomachiya3d.js, étapes intérieures) ---- */
.km3-label{position:absolute;left:0;top:0;font-family:var(--display,"Shippori Mincho",serif);
  font-size:15px;line-height:1.15;color:var(--ink,#1b1915);opacity:0;text-align:center;
  will-change:transform,opacity;white-space:nowrap;transform-origin:center;
  margin-left:-40px;margin-top:-14px;
  text-shadow:0 1px 0 rgba(250,247,240,.95),0 0 12px rgba(250,247,240,.8)}
.km3-label i{display:block;font-style:normal;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent,#b0543a)}