/* Creative X — design of 2026-10-04, viewer since 2026-10-08 (Issue #97): the three cards switch the
   main viewer (manga reader / video player). Continues the shared backdrop (home-sections.css).
   Data from WordPress via js/home-creative-x.js; index.html keeps a JS-off link to BizAnime.
   PC sizes also follow the viewport height (svh) so the section fits one laptop screen. */
.cxcx { --cxcx-ink:#07143b; --cxcx-body:#2a3654; --cxcx-muted:#5d6a84; --cxcx-blue:#2563eb;
  padding:clamp(60px,8svh,150px) clamp(24px,3.8vw,64px) clamp(20px,3svh,48px); color:var(--cxcx-ink); }
.cxcx-media { position:relative; display:block; overflow:hidden; background:#dfe8f2; }
.cxcx-media img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .3s cubic-bezier(.16,1,.3,1); }
.cxcx-eyebrow { display:flex; align-items:center; gap:18px; margin:0; color:var(--cxcx-muted); font-family:Inter,Arial,sans-serif; font-size:clamp(11px,.95vw,15px); font-weight:500; letter-spacing:.35em; line-height:1.4; }
.cxcx-eyebrow::after { content:''; width:44px; height:1px; background:currentColor; opacity:.7; }

/* Top: copy | main viewer */
.cxcx-top { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.88fr); align-items:center; gap:clamp(24px,4.3vw,72px); max-width:1600px; margin-inline:auto; }
.cxcx-top>*,.cxcx-bottom>* { min-width:0; }
.cxcx h2 { margin:clamp(10px,1.5svh,24px) 0 0; font-size:clamp(28px,min(3.75vw,6.4svh),62px); font-weight:900; line-height:1.3; letter-spacing:-.03em; word-break:auto-phrase; overflow-wrap:anywhere; }
.cxcx-lead { margin:clamp(10px,1.8svh,28px) 0 0; color:var(--cxcx-body); font-size:clamp(14px,min(1.4vw,2.3svh),21px); letter-spacing:.06em; line-height:1.85; }
.cxcx-button { display:inline-flex; align-items:center; justify-content:center; gap:28px; min-height:clamp(46px,7svh,68px); margin-top:clamp(14px,2.8svh,40px); padding:0 clamp(32px,3.7vw,56px); border-radius:999px; background:linear-gradient(90deg,#2a64ee,#4a8bff); color:#fff; font-size:clamp(14px,1.25vw,18px); font-weight:700; letter-spacing:.02em; box-shadow:0 14px 30px rgba(37,99,235,.32); transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease; }
.cxcx-button-arrow { font-size:1.3em; line-height:1; transition:transform .25s cubic-bezier(.16,1,.3,1); }


/* Bottom: OUR WORKS | three service cards */
.cxcx-bottom { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,.68fr) minmax(0,3fr); align-items:stretch; gap:clamp(12px,1.4vw,22px); max-width:1600px; margin:clamp(16px,3svh,48px) auto 0; }
.cxcx-works-intro { display:flex; flex-direction:column; justify-content:center; }
.cxcx-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,22px); }
.cxcx-works-intro h3 { margin:clamp(8px,1.4svh,16px) 0 0; font-size:clamp(22px,min(2.35vw,4.2svh),36px); font-weight:900; line-height:1.3; }
.cxcx-works-intro h3 span { font-family:Inter,Arial,'Noto Sans JP',sans-serif; font-weight:800; letter-spacing:-.01em; }
.cxcx-works-intro p:not(.cxcx-eyebrow) { margin:clamp(8px,1.4svh,16px) 0 0; color:var(--cxcx-body); font-size:clamp(12px,1.05vw,15px); line-height:1.75; }

.cxcx-card { --cxcx-accent:#ef5a17; position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto 1fr; column-gap:12px; padding:clamp(12px,1.25vw,18px); border:1px solid rgba(255,255,255,.9); border-radius:18px; background:rgba(255,255,255,.92); color:var(--cxcx-ink); box-shadow:0 16px 40px rgba(17,52,104,.1); transition:box-shadow .3s ease; }
.cxcx-card--anime { --cxcx-accent:#2563eb; }
.cxcx-card--video { --cxcx-accent:#7c3aed; }
.cxcx-card-media { grid-column:1 / -1; height:clamp(72px,12svh,170px); border-radius:10px; }
.cxcx-card-body { display:grid; align-content:center; gap:4px; min-width:0; padding:clamp(10px,1.6svh,16px) 0 2px 2px; }
.cxcx-card-name { color:var(--cxcx-accent); font-size:clamp(18px,1.55vw,24px); font-weight:900; line-height:1.3; letter-spacing:.02em; }
.cxcx-card-desc { color:var(--cxcx-body); font-size:clamp(12px,.98vw,14px); line-height:1.6; word-break:auto-phrase; overflow-wrap:anywhere; }
.cxcx-card-go { align-self:center; display:grid; place-items:center; width:clamp(40px,3.6vw,52px); aspect-ratio:1; margin-top:clamp(8px,1.2svh,14px); border-radius:50%; background:#eef2f8; transition:transform .25s cubic-bezier(.16,1,.3,1),background .25s ease; }
.cxcx-card-go::before { content:''; width:9px; height:9px; margin-left:-4px; border-top:2px solid var(--cxcx-ink); border-right:2px solid var(--cxcx-ink); transform:rotate(45deg); }

.cxcx-tagline { position:relative; z-index:1; display:flex; align-items:center; gap:clamp(16px,2vw,28px); max-width:1500px; margin:clamp(14px,2.6svh,48px) auto 0; color:#7a879e; font-family:Inter,Arial,sans-serif; font-size:clamp(10px,.85vw,12px); letter-spacing:.5em; white-space:nowrap; }
.cxcx-tagline::before,.cxcx-tagline::after { content:''; flex:1; height:1px; background:#c9d3e2; }
/* A soft white backing keeps the words readable over darker parts of the blurred backdrop. */
.cxcx-tagline span { padding:4px 14px 4px calc(14px + .5em); border-radius:999px; background:rgba(255,255,255,.72); color:#52627e; }

.cxcx-button:focus-visible,.cxcx-card:focus-visible { outline:3px solid #005cff; outline-offset:3px; }


@media (hover:hover) {
  .cxcx-button:hover { transform:translateY(-2px); box-shadow:0 18px 36px rgba(37,99,235,.38); }
  .cxcx-button:hover .cxcx-button-arrow { transform:translateX(4px); }
  .cxcx-card:hover { box-shadow:0 22px 48px rgba(17,52,104,.15); }
  .cxcx-card:hover .cxcx-card-go { transform:translateX(4px); background:#e3e9f4; }
}
/* Tablet & SP: one column — copy → OUR WORKS → cards → viewer. The cards (tabs) sit above the
   viewer so the tapped card never moves when the viewer height changes. */
@media (max-width:1100px) {
  .cxcx-body { display:flex; flex-direction:column; gap:clamp(18px,3vw,28px); }
  .cxcx-top,.cxcx-bottom { display:contents; }
  .cxcx-copy { order:1; }
  .cxcx-works-intro { order:2; margin-top:clamp(10px,3vw,24px); }
  .cxcx-cards { order:3; }
  .cxcx-viewer { order:4; }
  .cxcx-card-media { height:auto; aspect-ratio:5 / 2; }
}
/* SP: same order; the viewer spans the full width (rules further below). */
@media (max-width:768px) {
  .cxcx { padding:clamp(80px,21vw,116px) 16px 40px; }
  .cxcx-body { max-width:560px; margin-inline:auto; gap:22px; }
  .cxcx h2 { font-size:clamp(30px,8.4vw,44px); }
  .cxcx-lead { font-size:clamp(14px,4vw,17px); letter-spacing:.03em; }
  .cxcx-button { width:100%; min-height:56px; font-size:16px; }
  .cxcx-works-intro { margin-top:10px; }
  .cxcx-works-intro h3 { font-size:clamp(24px,7vw,32px); }
  .cxcx-works-intro p:not(.cxcx-eyebrow) { font-size:14px; }
  .cxcx-tagline { margin-top:28px; letter-spacing:.35em; }
}

/* ---------- Main viewer (Issue #97; video carousel Issue #102) ----------
   One frame for manga and video. Sizes follow the frame width (container units): a video uses the
   whole width at 16:9 and the manga stage gets the same height, so switching never changes the
   frame height on PC/tablet. Short screens cap the height so the section stays on one screen. */
.cxcx { --cxcx-view-h:min(56.25cqw,calc(100svh - 140px)); --cxcx-manga-h:var(--cxcx-view-h); }
/* PC: on short laptops (under ~800px tall) the height is capped so the cards still fit one screen. */
@media (min-width:1101px) { .cxcx { --cxcx-view-h:min(56.25cqw,calc(100svh - 340px)); } }
.cxcx-viewer { position:relative; min-width:0; container-type:inline-size; padding:clamp(8px,.7vw,10px); border-radius:18px; background:#0b1838; color:#fff; box-shadow:0 26px 60px rgba(17,52,104,.2); }
.cxcx-panel { min-height:var(--cxcx-view-h); transition:opacity .2s ease; }
.cxcx-panel.is-fading { opacity:0; }
.cxcx-message { display:grid; place-content:center; justify-items:center; gap:12px; min-height:var(--cxcx-view-h); padding:20px; color:#dbe4f3; font-size:14px; text-align:center; }
.cxcx-message p { margin:0; }
.cxcx-message a { color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.cxcx-fallback { position:relative; display:block; height:var(--cxcx-view-h); overflow:hidden; border-radius:12px; color:#fff; }
.cxcx-fallback img { display:block; width:100%; height:100%; object-fit:cover; }
.cxcx-fallback span { position:absolute; left:20px; bottom:18px; padding:8px 14px; border-radius:999px; background:rgba(7,20,59,.78); font-size:14px; font-weight:700; }

/* Laptops up to 860px tall: lower card images so the bigger viewer and the cards share one screen. */
@media (min-width:1101px) and (max-height:860px) {
  .cxcx { padding-top:clamp(36px,5svh,150px); }
  .cxcx-card-media { height:clamp(52px,7.5svh,170px); }
  .cxcx-bottom { margin-top:clamp(10px,1.8svh,48px); }
}

/* Video carousel (js/cx-video-player.js) — one 16:9 video per view, scrolled sideways. */
.cxvp { position:relative; }
.cxvp-track { display:flex; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:12px; background:#000; }
.cxvp-track::-webkit-scrollbar { display:none; }
.cxvp-stage { position:relative; flex:0 0 100%; height:var(--cxcx-view-h); overflow:hidden; scroll-snap-align:center; scroll-snap-stop:always; background:#000; }
.cxvp-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cxvp-stage::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,20,59,0) 55%,rgba(7,20,59,.82)); pointer-events:none; }
.cxvp-stage.is-playing::after { display:none; }
.cxvp-caption { position:absolute; left:clamp(16px,2vw,32px); right:clamp(16px,2vw,32px); bottom:clamp(14px,1.8vw,26px); z-index:1; pointer-events:none; }
.cxvp-title { margin:0; font-size:clamp(16px,1.6vw,26px); font-weight:800; line-height:1.4; text-shadow:0 2px 10px rgba(7,20,59,.5); overflow-wrap:anywhere; }
.cxvp-desc { margin:4px 0 0; max-width:40em; font-size:clamp(12px,.95vw,14px); line-height:1.6; opacity:.92; white-space:pre-line; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.cxvp-play { position:absolute; inset:0; z-index:2; display:grid; place-items:center; padding:0; border:0; background:transparent; cursor:pointer; }
.cxvp-play-ring { display:grid; place-items:center; width:clamp(56px,5.6vw,80px); aspect-ratio:1; border:2.5px solid #fff; border-radius:50%; background:rgba(7,20,59,.25); transition:transform .2s ease,background .2s ease; }
.cxvp-play-ring::before { content:''; margin-left:5px; border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent #fff; }
.cxvp-media { position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }
.cxvp-loading { position:absolute; inset:0; z-index:1; display:grid; place-items:center; padding:20px; color:#dbe4f3; font-size:14px; text-align:center; pointer-events:none; }
.cxvp-stage:not(.is-loading):not(.is-error) .cxvp-loading { display:none; }
/* ‹ › sit on the left/right edges of the video; the dots show which video is in view. */
.cxvp-arrow { position:absolute; top:50%; z-index:3; display:grid; place-items:center; width:44px; height:44px; margin-top:-22px; padding:0; border:1px solid rgba(255,255,255,.4); border-radius:50%; background:rgba(7,20,59,.62); color:#fff; font-size:24px; line-height:1; cursor:pointer; transition:opacity .2s ease,background .2s ease; }
.cxvp-arrow-prev { left:12px; }
.cxvp-arrow-next { right:12px; }
.cxvp-arrow:disabled { opacity:0; pointer-events:none; }
.cxvp-arrow span { margin-top:-2px; }
.cxvp-dots { position:absolute; top:14px; left:50%; z-index:3; display:flex; gap:8px; padding:6px 10px; border-radius:999px; background:rgba(7,20,59,.5); transform:translateX(-50%); pointer-events:none; }
.cxvp-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.45); transition:background .2s ease,transform .2s ease; }
.cxvp-dot.is-active { background:#fff; transform:scale(1.25); }
.cxvp.is-playing .cxvp-dots { display:none; }

/* Manga reader (js/cx-manga-reader.js) — pages are never cropped. */
.cxmr { position:relative; display:grid; gap:12px; }
.cxmr-stage { position:relative; display:flex; align-items:center; justify-content:center; height:var(--cxcx-manga-h); overflow:hidden; border-radius:12px; background:#111a33; touch-action:pan-y; }
.cxmr-spread { display:flex; justify-content:center; height:100%; }
.cxmr-page { display:block; height:100%; width:auto; max-width:100%; object-fit:contain; background:#fff; }
.cxmr-stage.is-spread .cxmr-page { max-width:50%; }
.cxmr-page.is-broken { min-width:120px; background:#2a3654; }
.cxmr-stage.is-vertical { display:block; overflow-y:auto; overscroll-behavior:contain; }
.cxmr-stage.is-vertical .cxmr-page { width:min(100%,520px); height:auto; margin:0 auto; }
.cxmr-stage.is-zoomed { display:block; overflow:auto; touch-action:pan-x pan-y; }
.cxmr-stage.is-zoomed .cxmr-spread { height:200%; width:max-content; min-width:100%; }
.cxmr-stage.is-zoomed.is-vertical .cxmr-page { width:min(200%,1040px); }
.cxmr-bar { position:relative; display:flex; align-items:center; justify-content:center; gap:16px; min-height:64px; }
.cxmr-btn { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid rgba(255,255,255,.3); border-radius:50%; background:rgba(255,255,255,.06); color:#fff; font-size:24px; line-height:1; cursor:pointer; }
.cxmr-btn:disabled { opacity:.35; cursor:default; }
.cxmr-btn[hidden] { display:none; }
.cxmr-btn span { margin-top:-2px; }
.cxmr-count { min-width:88px; font-family:Inter,Arial,sans-serif; font-size:14px; letter-spacing:.06em; text-align:center; }
.cxmr-zoom { position:absolute; right:4px; min-height:44px; padding:0 16px; border:1px solid rgba(255,255,255,.3); border-radius:999px; background:transparent; color:#fff; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.cxmr-zoom[aria-pressed="true"] { background:#fff; color:#07143b; }
.cxmr-status { position:absolute; inset:0 0 76px; display:grid; place-items:center; padding:20px; color:#dbe4f3; font-size:14px; text-align:center; pointer-events:none; }
.cxmr-status:empty { display:none; }
.cxmr.is-error .cxmr-stage,.cxmr.is-error .cxmr-bar { visibility:hidden; }
/* PC & tablet: the pages take the whole panel height; controls sit in the free side space
   (next on the left, previous on the right, as in a right-bound book). */
@media (min-width:769px) {
  .cxmr { gap:0; }
  .cxmr-stage { height:var(--cxcx-manga-h); }
  .cxmr-bar { position:absolute; inset:0; min-height:0; pointer-events:none; }
  .cxmr-bar>* { pointer-events:auto; }
  .cxmr-btn { position:absolute; top:50%; margin-top:-22px; background:rgba(7,20,59,.72); }
  .cxmr-next { left:12px; }
  .cxmr-prev { right:12px; }
  .cxmr-count { position:absolute; right:12px; bottom:12px; min-width:0; padding:6px 12px; border-radius:999px; background:rgba(7,20,59,.72); font-size:13px; }
  .cxmr-zoom { top:12px; right:12px; background:rgba(7,20,59,.72); }
  .cxmr-status { inset:0; }
}

/* Service cards are the switch: the selected one is outlined in its colour. */
.cxcx-card { width:100%; font:inherit; text-align:left; text-decoration:none; cursor:pointer; }
.cxcx-card[aria-selected="true"] { border-color:var(--cxcx-accent); box-shadow:0 0 0 2px var(--cxcx-accent),0 16px 40px rgba(17,52,104,.12); background:#fff; }
.cxcx-card[aria-selected="true"] .cxcx-card-go { background:var(--cxcx-accent); }
.cxcx-card[aria-selected="true"] .cxcx-card-go::before { border-color:#fff; }

.cxvp-arrow:focus-visible,.cxvp-play:focus-visible,.cxmr-stage:focus-visible,.cxmr-btn:focus-visible,.cxmr-zoom:focus-visible,.cxcx-fallback:focus-visible,.cxcx-message a:focus-visible { outline:3px solid #7fb1ff; outline-offset:2px; }
@media (hover:hover) {
  .cxvp-play:hover .cxvp-play-ring { transform:scale(1.06); background:rgba(255,255,255,.14); }
  .cxvp-arrow:hover { background:rgba(7,20,59,.86); }
}
@media (prefers-reduced-motion:reduce) {
  .cxvp-play-ring,.cxvp-arrow,.cxvp-dot { transition:none; }
}
/* SP: cards become a compact three-way switch; manga pages get a tall single-page stage. */
@media (max-width:768px) {
  .cxcx { --cxcx-view-h:56.25cqw; --cxcx-manga-h:min(125cqw,70svh); }
  .cxcx-viewer { padding:10px; }
  .cxcx-panel[data-service="manga"] { min-height:var(--cxcx-manga-h); }
  .cxvp-arrow-prev { left:8px; }
  .cxvp-arrow-next { right:8px; }
  .cxmr-zoom { position:static; }
  .cxmr-bar { gap:12px; }
  .cxcx-cards { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .cxcx-card { grid-template-columns:minmax(0,1fr); padding:8px; border-radius:12px; }
  .cxcx-card-media { height:auto; aspect-ratio:16 / 10; border-radius:8px; }
  .cxcx-card-body { padding:8px 2px 2px; }
  .cxcx-card-name { font-size:clamp(13px,3.8vw,16px); }
  .cxcx-card-desc,.cxcx-card-go { display:none; }
}
/* Phones: the viewer runs edge to edge. */
@media (max-width:592px) {
  .cxcx-viewer { margin-inline:-16px; border-radius:0; }
}