/* ============================================================
   WaifuHunt — Guild Hall 2.5D : КАРУСЕЛЬ-ЗАЛ (coverflow hub)
   Карты залов листаются колесом/трекпадом/драгом. Активная —
   в центре, фон зала под ней. Клик = «раскрытие» → переход.
   Заменяет тяжёлый 3D. Чистый CSS/DOM.
   ============================================================ */

/* спрятать старый 3D-canvas и мобильную заглушку */
body.gh2d-on #guildHallCanvas{ display:none !important; }
body.gh2d-on .wh-guild-mobile-nav{ display:none !important; }

.wh-guild-hero{ position:relative; padding:0; margin:0; }

/* ---------- сцена / токены ---------- */
.gh-scene{
  --ink:#0a0810; --ink-2:#150f20;
  --gold:#e8c990; --gold-2:#f6e2b6; --gold-dim:#b39c74;
  --paper:#efe7d8; --muted:rgba(239,231,216,.62);
  --hair:rgba(238,228,214,.16);
  --hair-soft:rgba(238,228,214,.08);
  --brand:linear-gradient(132deg,#ff5fa8 0%,#a96bff 54%,#ff9a7e 100%);
  --e-out:cubic-bezier(.23,1,.32,1);
  --e-spring:cubic-bezier(.32,.72,0,1);
  --mx:0; --my:0;             /* параллакс-сдвиг px (ставит JS) */
  --acc:#b98cff;             /* текущий акцент сцены */
  position:relative; width:100%;
  min-height:calc(100vh - var(--gh-head,0px));
  min-height:calc(100svh - var(--gh-head,0px));
  overflow:hidden; isolation:isolate;
  background:var(--ink);
  color:var(--paper);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  cursor:default;
}
.gh-scene *{ box-sizing:border-box; }

/* ====================================================
   1. ЗАДНИК — общий зал (база) + фоны залов (bespoke)
   ==================================================== */
.gh-backdrop{
  position:absolute; inset:-6% -4%; z-index:0;
  background:#0a0810 url("../assets/guild/guild-hall-bg.webp") center/cover no-repeat;
  transform:scale(1.06) translate3d(calc(var(--mx)*.55px), calc(var(--my)*.55px),0);
  will-change:transform; filter:saturate(.9) brightness(.5);
}
.gh-bgs{ position:absolute; inset:0; z-index:1; }
.gh-bg{
  position:absolute; inset:-5% -3%;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  opacity:0; transition:opacity 1.1s var(--e-out);
  transform:scale(1.05) translate3d(calc(var(--mx)*.5px), calc(var(--my)*.5px),0);
  will-change:transform,opacity; filter:saturate(.92) brightness(.56);
}
.gh-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 82% at 60% 22%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 54%),
    radial-gradient(90% 70% at 20% 88%, rgba(169,107,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(8,6,14,.58) 0%, rgba(8,6,14,0) 28%, rgba(8,6,14,.16) 60%, rgba(7,5,12,.86) 100%);
}
.gh-bg.is-active{ opacity:1; }

/* объёмные лучи света */
.gh-rays{ position:absolute; inset:-20% -10%; z-index:2; pointer-events:none; opacity:.5;
  -webkit-mask-image:radial-gradient(80% 70% at 60% 20%,#000,transparent 78%);
  mask-image:radial-gradient(80% 70% at 60% 20%,#000,transparent 78%); }
.gh-rays::before,.gh-rays::after{
  content:""; position:absolute; top:-30%; left:46%; width:42%; height:160%;
  background:linear-gradient(180deg, rgba(246,226,182,.15), rgba(246,226,182,0) 70%);
  filter:blur(18px); transform-origin:top center; transform:rotate(14deg);
  animation:gh-ray 14s var(--e-out) infinite alternate;
}
.gh-rays::after{ left:30%; width:30%; transform:rotate(-9deg); opacity:.7;
  animation-duration:18s; animation-delay:-5s; }
@keyframes gh-ray{ from{opacity:.22; transform:rotate(13deg) translateX(-2%);}
  to{opacity:.55; transform:rotate(17deg) translateX(4%);} }

.gh-motes{ position:absolute; inset:0; z-index:3; pointer-events:none; }

/* ====================================================
   2. СЦЕНА-КАРУСЕЛЬ (coverflow)
   ==================================================== */
.gh-stage{
  position:absolute; inset:0; z-index:6;
  perspective:1700px; perspective-origin:50% 46%;
  display:grid; place-items:center;
  cursor:grab;
}
.gh-stage.is-grabbing{ cursor:grabbing; }
.gh-rail{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  opacity:0; transition:opacity 1s var(--e-out) .2s;
}
.gh-scene.is-in .gh-rail{ opacity:1; }

/* карта зала (трансформ ставит JS — здесь без transition на transform!) */
.gh-card{
  position:absolute; left:50%; top:50%;
  width:clamp(238px,25vw,346px); aspect-ratio:3/4.05;
  border-radius:18px; cursor:pointer;
  transform-origin:center center; backface-visibility:hidden;
  transition:opacity .5s var(--e-out), filter .5s var(--e-out);
  will-change:transform,opacity,filter;
  -webkit-tap-highlight-color:transparent;
}
.gh-card__frame{
  position:absolute; inset:0; border-radius:18px; overflow:hidden;
  background:#0c0913; border:1px solid var(--hair);
  box-shadow:0 26px 70px -24px rgba(0,0,0,.85),
             inset 0 0 0 1px rgba(0,0,0,.5),
             inset 0 1px 0 rgba(255,255,255,.05);
  transition:box-shadow .5s var(--e-out), border-color .5s var(--e-out);
}
.gh-card__art{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 16%;
  transform:scale(1.04); transform-origin:center 30%;
  transition:transform .9s var(--e-out), filter .6s var(--e-out);
  filter:saturate(1) brightness(.92) contrast(1.02);
}
.gh-card__scrim{
  position:absolute; inset:0; border-radius:18px; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,8,16,0) 36%, rgba(10,8,16,.62) 70%, rgba(8,6,12,.94) 100%);
}
.gh-card__glow{
  position:absolute; inset:-1px; border-radius:18px; pointer-events:none; opacity:0;
  background:radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--acc) 42%, transparent), transparent 70%);
  mix-blend-mode:screen; transition:opacity .5s var(--e-out);
}
.gh-card__corner{ position:absolute; width:17px; height:17px; pointer-events:none;
  border:1.5px solid color-mix(in srgb, var(--gold) 70%, transparent); opacity:.5;
  transition:opacity .5s var(--e-out), border-color .5s var(--e-out); }
.gh-card__corner.tl{ top:9px; left:9px; border-right:0; border-bottom:0; border-top-left-radius:8px; }
.gh-card__corner.tr{ top:9px; right:9px; border-left:0; border-bottom:0; border-top-right-radius:8px; }
.gh-card__corner.bl{ bottom:9px; left:9px; border-right:0; border-top:0; border-bottom-left-radius:8px; }
.gh-card__corner.br{ bottom:9px; right:9px; border-left:0; border-top:0; border-bottom-right-radius:8px; }

.gh-card__badge{
  position:absolute; top:12px; left:12px; z-index:3;
  width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
  background:rgba(10,8,16,.55); border:1px solid var(--hair);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--gold-2); transition:border-color .5s var(--e-out), color .5s var(--e-out);
}
.gh-card__badge svg{ width:19px; height:19px; }

.gh-card__plate{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:0 16px 16px; }
.gh-card__num{ font:600 10px/1 "Plus Jakarta Sans",monospace; letter-spacing:.22em;
  color:color-mix(in srgb, var(--acc) 78%, var(--paper)); opacity:.92; }
.gh-card__title{ margin:6px 0 2px; font-family:"Fraunces",Georgia,serif;
  font-weight:560; font-size:clamp(18px,1.7vw,26px); line-height:1.02;
  letter-spacing:.005em; color:#fbf6ec; }
.gh-card__kick{ font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); font-weight:600; }

/* фичер-лента (только на центральной) */
.gh-card__feat{ position:absolute; top:-13px; left:50%; transform:translateX(-50%) translateY(6px);
  z-index:4; padding:5px 13px; border-radius:999px; white-space:nowrap;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:#120c18; background:var(--gold-2); opacity:0;
  box-shadow:0 8px 24px -8px rgba(232,201,144,.6);
  transition:opacity .5s var(--e-out), transform .5s var(--e-out); }

/* кнопка «Войти в зал» — появляется только на центральной */
.gh-card__go{
  position:absolute; left:50%; bottom:15px; z-index:5;
  transform:translateX(-50%) translateY(10px);
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  padding:11px 18px; border-radius:12px; border:0; font-family:inherit;
  font-size:13.5px; font-weight:700; letter-spacing:.01em; color:#160a14; white-space:nowrap;
  background:var(--brand); opacity:0; pointer-events:none; overflow:hidden;
  box-shadow:0 14px 34px -12px rgba(169,107,255,.6), inset 0 1px 0 rgba(255,255,255,.32);
  transition:opacity .45s var(--e-out), transform .45s var(--e-out), box-shadow .4s var(--e-out); }
.gh-card__go svg{ width:16px; height:16px; }
.gh-card__go::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform:translateX(-120%); }
.gh-card__go:hover::after{ animation:gh-sheen 1.1s var(--e-out); }
@keyframes gh-sheen{ to{ transform:translateX(120%);} }

/* состояние ЦЕНТРАЛЬНОЙ карты */
.gh-card.is-center .gh-card__frame{
  border-color:color-mix(in srgb, var(--acc) 46%, var(--hair));
  box-shadow:0 44px 100px -34px color-mix(in srgb, var(--acc) 55%, transparent),
             0 0 0 1px color-mix(in srgb, var(--acc) 32%, transparent),
             inset 0 0 50px -20px color-mix(in srgb, var(--acc) 46%, transparent);
}
.gh-card.is-center .gh-card__art{ filter:saturate(1.04) brightness(.98) contrast(1.03); }
.gh-card.is-center .gh-card__glow{ opacity:.85; }
.gh-card.is-center .gh-card__corner{ opacity:.95; border-color:color-mix(in srgb,var(--acc) 60%, var(--gold)); }
.gh-card.is-center.is-feat .gh-card__feat{ opacity:1; transform:translateX(-50%) translateY(0); }
.gh-card.is-center .gh-card__plate{ padding-bottom:58px; }   /* место под кнопку */
.gh-card.is-center .gh-card__go{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.gh-card.is-center .gh-card__go:hover{ transform:translateX(-50%) translateY(-2px);
  box-shadow:0 20px 44px -12px rgba(169,107,255,.78), inset 0 1px 0 rgba(255,255,255,.4); }

/* hover по центральной — мягкое усиление (без transform, его держит JS) */
.gh-card.is-center:hover .gh-card__art{ transform:scale(1.1); }
.gh-card.is-center:hover .gh-card__glow{ opacity:1; }

/* ====================================================
   3. НАВИГАЦИЯ — стрелки + точки
   ==================================================== */
.gh-nav{ position:absolute; inset:0; z-index:8; pointer-events:none; }
.gh-nav__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  cursor:pointer; pointer-events:auto; color:var(--gold-2);
  background:rgba(10,8,16,.5); border:1px solid var(--hair);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 14px 36px -16px rgba(0,0,0,.8);
  transition:transform .35s var(--e-out), background .35s var(--e-out),
             border-color .35s var(--e-out), color .35s var(--e-out), opacity .8s var(--e-out);
  opacity:0; }
.gh-scene.is-in .gh-nav__arrow{ opacity:1; }
.gh-nav__arrow svg{ width:22px; height:22px; }
.gh-nav__arrow.prev{ left:clamp(16px,4vw,56px); }
.gh-nav__arrow.next{ right:clamp(16px,4vw,56px); }
.gh-nav__arrow.next svg{ transform:scaleX(-1); }
.gh-nav__arrow:hover{
  background:color-mix(in srgb, var(--acc) 22%, rgba(10,8,16,.6));
  border-color:color-mix(in srgb, var(--acc) 55%, var(--hair));
  color:#fff; }
.gh-nav__arrow.prev:hover{ transform:translateY(-50%) translateX(-3px); }
.gh-nav__arrow.next:hover{ transform:translateY(-50%) translateX(3px); }

.gh-nav__dots{
  position:absolute; left:50%; bottom:clamp(60px,7vh,82px); transform:translateX(-50%);
  z-index:9; display:flex; align-items:center; gap:11px; pointer-events:auto;
  opacity:0; transition:opacity 1s var(--e-out) 1.1s; }
.gh-scene.is-in .gh-nav__dots{ opacity:1; }
.gh-dot{ width:9px; height:9px; border-radius:50%; cursor:pointer; padding:0;
  background:rgba(238,228,214,.22); border:1px solid transparent;
  transition:transform .35s var(--e-out), background .35s var(--e-out), box-shadow .35s var(--e-out); }
.gh-dot:hover{ background:rgba(238,228,214,.5); transform:scale(1.15); }
.gh-dot.is-active{ background:var(--gold-2); width:24px; border-radius:6px;
  box-shadow:0 0 14px color-mix(in srgb, var(--acc) 60%, transparent); }

/* ====================================================
   4. ХОСТ — архивариус + реплика (передний план, низ-лево)
   ==================================================== */
.gh-host{ position:absolute; left:-1%; bottom:-2%; z-index:7; width:min(34vw,440px);
  transform:translateY(60px); opacity:0;
  transition:transform 1.1s var(--e-spring), opacity 1s var(--e-out);
  transition-delay:.55s; pointer-events:none;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.6)); }
.gh-scene.is-in .gh-host{ transform:translateY(0); opacity:1; }
.gh-host img{ display:block; width:100%; height:auto;
  transform:translate3d(calc(var(--mx)*-1px), calc(var(--my)*-1px),0); }
.gh-host::before{ content:""; position:absolute; left:6%; bottom:4%; width:74%; height:46%;
  background:radial-gradient(60% 60% at 50% 60%, rgba(232,201,144,.26), transparent 70%);
  filter:blur(22px); z-index:-1; }

.gh-speech{ position:absolute; left:min(30vw,400px); bottom:14%; z-index:8;
  max-width:min(30vw,380px); pointer-events:none;
  transform:translateY(16px); opacity:0;
  transition:transform .7s var(--e-out), opacity .7s var(--e-out); transition-delay:1.05s; }
.gh-scene.is-in .gh-speech{ transform:translateY(0); opacity:1; }
.gh-speech__who{ font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  font-weight:700; color:var(--gold); margin-bottom:7px; display:flex; align-items:center; gap:8px; }
.gh-speech__who::before{ content:""; width:18px; height:1px; background:var(--gold-dim); }
.gh-speech__bubble{ position:relative; padding:14px 17px; border-radius:14px;
  background:linear-gradient(180deg, rgba(22,16,30,.82), rgba(14,10,20,.82));
  border:1px solid var(--hair); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-family:"Fraunces",Georgia,serif; font-size:clamp(14px,1.2vw,16px); line-height:1.5;
  font-weight:380; color:#ece4d6; font-style:italic;
  box-shadow:0 20px 50px -24px rgba(0,0,0,.8); }
.gh-speech__bubble::after{ content:""; position:absolute; left:30px; bottom:-7px;
  width:14px; height:14px; background:inherit; border-right:1px solid var(--hair);
  border-bottom:1px solid var(--hair); transform:rotate(45deg); }
.gh-cursor{ display:inline-block; width:2px; height:1em; vertical-align:-2px;
  background:var(--gold); margin-left:2px; animation:gh-blink 1s steps(2) infinite; }
@keyframes gh-blink{ 50%{opacity:0;} }

/* подсказка управления (низ-право) */
.gh-hint{ position:absolute; right:clamp(18px,4vw,48px); bottom:clamp(60px,7vh,82px); z-index:9;
  display:inline-flex; align-items:center; gap:9px;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  opacity:0; transition:opacity 1s var(--e-out) 1.4s; pointer-events:none; }
.gh-scene.is-in .gh-hint{ opacity:.78; }
.gh-hint__ico{ display:inline-flex; color:var(--gold); }
.gh-hint__ico svg{ width:13px; height:13px; }
.gh-hint__ico svg:first-child{ margin-right:-7px; opacity:.5; }

/* ====================================================
   5. ВИНЬЕТКА / ЗЕРНО / DIVE-переход
   ==================================================== */
.gh-vignette{ position:absolute; inset:0; z-index:11; pointer-events:none;
  box-shadow:inset 0 0 200px 40px rgba(5,3,9,.7), inset 0 0 60px 0 rgba(5,3,9,.5);
  background:radial-gradient(130% 100% at 50% 46%, transparent 56%, rgba(5,3,9,.52) 100%); }
.gh-grain{ position:absolute; inset:0; z-index:12; pointer-events:none; opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:200px 200px; }

/* «раскрытие зоны» — кинематографичная глава + fade-to-black */
.gh-dive{ position:fixed; inset:0; z-index:4300; pointer-events:none; opacity:0;
  background:radial-gradient(125% 125% at 50% 44%, color-mix(in srgb,var(--acc) 42%, #0a0810), #07050c 78%);
  transition:opacity .45s var(--e-out); }
.gh-dive.is-on{ opacity:1; }
.gh-dive__card{ position:fixed; z-index:4301; border-radius:18px; overflow:hidden;
  background:#0c0913 center/cover no-repeat; pointer-events:none;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.9), 0 0 0 1px var(--hair);
  transition:left .62s var(--e-spring), top .62s var(--e-spring),
             width .62s var(--e-spring), height .62s var(--e-spring),
             border-radius .62s var(--e-spring), box-shadow .62s var(--e-out),
             filter .9s var(--e-out); }
.gh-dive__card.is-full{ left:-2vw !important; top:-2vh !important;
  width:104vw !important; height:104vh !important; border-radius:0 !important;
  filter:brightness(.6) saturate(1.06); box-shadow:none; }
.gh-dive__panel{ position:fixed; z-index:4302; left:0; right:0; top:50%;
  transform:translateY(-46%); text-align:center; pointer-events:none; opacity:0; padding:0 24px; }
.gh-dive__panel.is-in{ animation:gh-chapter .9s var(--e-out) forwards .14s; }
@keyframes gh-chapter{ from{opacity:0; transform:translateY(-30%);} to{opacity:1; transform:translateY(-50%);} }
.gh-dive__num{ font:700 12px/1 "Plus Jakarta Sans",system-ui,monospace;
  letter-spacing:.34em; text-transform:uppercase; margin-bottom:16px;
  color:color-mix(in srgb,var(--acc) 78%, #fff); }
.gh-dive__title{ font-family:"Fraunces",Georgia,serif; font-weight:360; font-style:italic;
  font-size:clamp(52px,9vw,124px); line-height:.94; letter-spacing:-.02em; color:#fbf6ec;
  text-shadow:0 20px 70px rgba(0,0,0,.55); }
.gh-dive__rule{ width:0; height:2px; margin:26px auto 20px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--acc), transparent);
  box-shadow:0 0 22px color-mix(in srgb,var(--acc) 60%, transparent);
  animation:gh-rule .7s var(--e-out) forwards .42s; }
@keyframes gh-rule{ to{ width:min(240px,42vw);} }
.gh-dive__load{ display:inline-flex; align-items:center; justify-content:center; gap:2px;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase; font-weight:600;
  color:rgba(239,231,216,.66); }
.gh-dive__load i{ width:3px; height:3px; border-radius:50%; background:currentColor;
  margin-left:3px; opacity:.25; animation:gh-loaddot 1s infinite; }
.gh-dive__load i:nth-child(2){ animation-delay:.16s; }
.gh-dive__load i:nth-child(3){ animation-delay:.32s; }
@keyframes gh-loaddot{ 0%,100%{opacity:.22;} 50%{opacity:1;} }
.gh-dive__ink{ position:fixed; inset:0; z-index:4303; background:#05040a; opacity:0;
  pointer-events:none; transition:opacity .52s var(--e-out) 1.02s; }
.gh-dive__ink.is-in{ opacity:1; }
.gh-scene.is-diving{ transition:transform .7s var(--e-spring), filter .7s var(--e-out);
  transform:scale(.965); filter:blur(8px) brightness(.4); }

/* ====================================================
   6. АДАПТИВ
   ==================================================== */
@media (max-width:1100px){
  .gh-host{ width:min(40vw,360px); opacity:.9; }
  .gh-speech{ left:min(34vw,330px); max-width:46vw; }
}
@media (max-width:820px){
  .gh-scene{ min-height:100svh; }
  .gh-backdrop{ filter:saturate(.9) brightness(.46); }
  .gh-rays{ display:none; }
  .gh-host{ width:54vw; max-width:280px; left:-7%; opacity:.42; z-index:1; }
  .gh-speech{ display:none; }
  .gh-nav__arrow{ display:none; }
  .gh-hint{ left:50%; right:auto; transform:translateX(-50%); bottom:14px; }

  /* стол-перспектива выключена; карты — горизонтальный scroll-snap */
  .gh-stage{ perspective:none; place-items:stretch; cursor:default; }
  .gh-rail{ display:flex; align-items:center; gap:16px;
    overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; transform-style:flat;
    padding:18vh 16vw 16vh; scrollbar-width:none; }
  .gh-rail::-webkit-scrollbar{ display:none; }
  .gh-card{ position:relative !important; left:auto !important; top:auto !important;
    transform:none !important; opacity:1 !important; filter:none !important;
    flex:0 0 auto; width:68vw; max-width:300px; scroll-snap-align:center; }
  .gh-card .gh-card__feat{ opacity:1; transform:translateX(-50%); }
  .gh-card .gh-card__go{ opacity:1; transform:translateX(-50%); pointer-events:auto; }
  .gh-card .gh-card__plate{ padding-bottom:58px; }
  .gh-nav__dots{ bottom:auto; top:calc(18vh - 26px); }
}

/* ====================================================
   7. reduced-motion
   ==================================================== */
@media (prefers-reduced-motion:reduce){
  .gh-scene *, .gh-scene *::before, .gh-scene *::after{
    animation:none !important; transition-duration:.001s !important; }
  .gh-backdrop,.gh-bg,.gh-host img{ transform:none !important; }
}