/* ArcGX Company Profile · 3D book viewer
   Brand: Light Cyan #A7F0FF · ArcGX Cyan #0CC1E0 · Coral #FF8071 · Navy #081A24 */
:root{
  --navy:#081A24; --ink:#081A24; --text:#34434D; --muted:#6A7883;
  --cyan:#0CC1E0; --cyan-ink:#087A90; --light:#A7F0FF; --coral:#FF8071;
  --bg1:#EEF5F8; --bg2:#D6E7EE; --line:#D5E0E6;
  --pw:420px;            /* page width  (set by JS) */
  --ph:594px;            /* page height (set by JS) */
  --t:2.4px;             /* sheet thickness */
  --n:11;                /* number of sheets */
  --tr:0px;              /* right stack thickness (JS) */
  --tl:0px;              /* left stack thickness  (JS) */
  --rx:16deg; --ry:-24deg; --px:0px; --py:0px;  /* camera (JS); zoom is applied to --pw/--ph, not as scale() */
  --tx:0px;              /* book centring (JS) */
  --flip:1100ms;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:Inter,system-ui,sans-serif;color:var(--text);
  background:radial-gradient(120% 90% at 50% 10%, #FFFFFF 0%, var(--bg1) 45%, var(--bg2) 100%);
  overflow:hidden;-webkit-font-smoothing:antialiased;overscroll-behavior:none;
}
.app{display:flex;flex-direction:column;height:100vh;height:100dvh;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body::before{ /* faint map grid */
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(8,26,36,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(8,26,36,.045) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 20%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 50%,#000 20%,transparent 100%);
}

/* ---------- chrome ---------- */
.top,.bottom{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:14px 22px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand img{height:34px;display:block}
.brand span{display:flex;flex-direction:column;line-height:1.15}
.brand b{font-family:Outfit;font-weight:600;letter-spacing:.26em;font-size:11px}
.brand small{font-size:11px;color:var(--cyan-ink);font-weight:500;margin-top:2px}
.actions{display:flex;gap:8px}
.btn{font:500 13px Inter,system-ui,sans-serif;border-radius:999px;padding:9px 16px;min-height:40px;display:inline-flex;align-items:center;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;text-decoration:none;transition:.18s;white-space:nowrap}
.btn:hover{border-color:var(--cyan);box-shadow:0 2px 10px rgba(12,193,224,.18)}
.btn.solid{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.solid:hover{background:#0F2C3C}
.btn.small{padding:7px 12px;font-size:12px}
.btn:focus-visible,.nav:focus-visible,.th:focus-visible,.zbtn:focus-visible,.zval:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.btn.active{background:var(--cyan);border-color:var(--cyan);color:var(--navy)}

.stage{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden}
.hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:12px;color:var(--muted);background:rgba(255,255,255,.75);backdrop-filter:blur(6px);padding:7px 14px;border-radius:999px;border:1px solid var(--line);pointer-events:none;transition:opacity .6s;z-index:4;white-space:nowrap}
.hint.hide{opacity:0}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.9);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.18s;z-index:4;backdrop-filter:blur(6px)}
.nav svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav:hover{border-color:var(--cyan);box-shadow:0 4px 16px rgba(8,26,36,.12);transform:translateY(-50%) scale(1.06)}
.nav.prev{left:18px}.nav.next{right:18px}
.nav[disabled]{opacity:.3;pointer-events:none}

.zoom{position:absolute;right:18px;bottom:14px;display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:999px;padding:3px;z-index:4}
.zbtn,.zval{border:0;background:none;color:var(--ink);cursor:pointer;border-radius:999px;min-height:34px;font:600 15px Inter,system-ui,sans-serif}
.zbtn{width:34px}.zbtn:hover,.zval:hover{background:var(--bg1)}
.zval{font:600 11px Outfit,sans-serif;letter-spacing:.06em;padding:0 8px;min-width:48px}
.loader{position:absolute;inset:0;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;z-index:6;background:rgba(238,245,248,.9);font-size:13px;color:var(--muted);transition:opacity .5s}
.loader.hide{opacity:0;pointer-events:none}
.loader .bar{width:180px;height:4px;border-radius:2px;background:#fff;border:1px solid var(--line);overflow:hidden}
.loader .bar i{display:block;height:100%;width:0;background:var(--cyan);transition:width .2s}

/* ---------- strip ---------- */
.strip{flex:1;display:flex;gap:4px;justify-content:center;overflow-x:auto;padding:4px 10px;scrollbar-width:none;min-width:0}
.strip::-webkit-scrollbar{display:none}
.th{flex:none;border:0;background:none;padding:4px 2px;cursor:pointer;border-radius:5px;opacity:.6;transition:.18s}
.th img{height:40px;width:auto;display:block;border-radius:3px;border:1.5px solid transparent;background:#fff}
.th:hover{opacity:1;transform:translateY(-2px)}
.th.on{opacity:1}
.th.on img{border-color:var(--cyan);box-shadow:0 2px 8px rgba(12,193,224,.3)}
.counter{font:600 12px Outfit,sans-serif;letter-spacing:.08em;color:var(--ink);min-width:84px;text-align:center}

/* ---------- 3D scene ---------- */
.scene{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;perspective:2400px;perspective-origin:50% 42%;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
.scene.dragging{cursor:grabbing}
.orbit{position:relative;width:0;height:0;transform-style:preserve-3d;
  transform:translate(var(--px),var(--py)) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.scene.dragging .orbit,.scene.zoomed .orbit{transition:transform .12s linear}
.scene.zoomed{cursor:move}

.book{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;
  transform:translateX(var(--tx)) translateY(calc(var(--ph) * -.5));
  transition:transform var(--flip) cubic-bezier(.3,.7,.25,1)}

/* sheets hinge on the spine line x = 0 */
.sheet{position:absolute;left:0;top:0;width:var(--pw);height:var(--ph);transform-style:preserve-3d;transform-origin:0 50%;
  transition:transform var(--flip) cubic-bezier(.3,.7,.25,1);will-change:transform}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:#fff;border-radius:0 3px 3px 0}
.face img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;pointer-events:none}
.face.back{transform:rotateY(180deg);border-radius:3px 0 0 3px}
/* gutter shading: pages curve into the spine */
.face.front::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,26,36,.22) 0,rgba(8,26,36,.08) 4%,rgba(255,255,255,0) 14%,rgba(255,255,255,0) 100%)}
.face.back::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(270deg,rgba(8,26,36,.22) 0,rgba(8,26,36,.08) 4%,rgba(255,255,255,0) 14%,rgba(255,255,255,0) 100%)}
/* hard covers: slight overhang, print finish, no gutter shade on the outside */
.sheet.cover{width:calc(var(--pw) * 1.025);height:calc(var(--ph) * 1.03);top:calc(var(--ph) * -.015)}
.sheet.cover .face{border-radius:0 6px 6px 0;box-shadow:inset 0 0 0 1px rgba(8,26,36,.08)}
.sheet.cover .face.back{border-radius:6px 0 0 6px}
.sheet.cover .face.outside::after{background:linear-gradient(115deg,rgba(255,255,255,.14) 0,rgba(255,255,255,0) 35%,rgba(8,26,36,.07) 100%)}
.sheet.cover .face.outside::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,26,36,.18) 0,rgba(8,26,36,0) 3%)}
.sheet.cover.last .face.outside::before{background:linear-gradient(270deg,rgba(8,26,36,.18) 0,rgba(8,26,36,0) 3%)}
/* moving light while a sheet turns */
.sheet.turning .face::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,26,36,.0),rgba(8,26,36,.28));animation:turnlight var(--flip) ease-in-out}
.sheet.turning.rev .face::before{background:linear-gradient(270deg,rgba(8,26,36,.0),rgba(8,26,36,.28))}
@keyframes turnlight{0%{opacity:0}45%{opacity:1}100%{opacity:0}}

/* ---------- edges (page block) ---------- */
.edge{position:absolute;pointer-events:none;background:#EDEEEA;
  background-image:repeating-linear-gradient(90deg,rgba(8,26,36,0) 0 1px,rgba(8,26,36,.13) 1px 2.4px);
  transition:width var(--flip) cubic-bezier(.3,.7,.25,1),height var(--flip) cubic-bezier(.3,.7,.25,1)}
.edge.v{top:0;height:var(--ph)}
/* fore-edge of the right stack: at x = pw, facing +x, thickness along z */
.edge.fore-r{left:var(--pw);width:var(--tr);transform-origin:0 50%;transform:rotateY(-90deg)}
/* fore-edge of the left stack: at x = -pw, facing -x */
.edge.fore-l{left:calc(var(--pw) * -1);width:var(--tl);transform-origin:0 50%;transform:rotateY(-90deg)}
/* head and tail edges, thickness along z */
.edge.h{height:var(--t);background-image:repeating-linear-gradient(0deg,rgba(8,26,36,0) 0 1px,rgba(8,26,36,.13) 1px 2.4px)}
.edge.head-r{left:0;top:0;width:var(--pw);height:var(--tr);transform-origin:50% 0;transform:rotateX(90deg)}
.edge.tail-r{left:0;top:var(--ph);width:var(--pw);height:var(--tr);transform-origin:50% 0;transform:rotateX(90deg)}
.edge.head-l{left:calc(var(--pw) * -1);top:0;width:var(--pw);height:var(--tl);transform-origin:50% 0;transform:rotateX(90deg)}
.edge.tail-l{left:calc(var(--pw) * -1);top:var(--ph);width:var(--pw);height:var(--tl);transform-origin:50% 0;transform:rotateX(90deg)}
/* spine: at x = 0, perpendicular, as thick as the taller stack */
.edge.spine{left:0;width:var(--ts);transform-origin:0 50%;transform:rotateY(-90deg);background:var(--navy);background-image:linear-gradient(90deg,rgba(255,255,255,.08),rgba(0,0,0,.25));border-radius:2px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.edge.spine span{font:600 9px Outfit,sans-serif;letter-spacing:.3em;color:#A7F0FF;white-space:nowrap;transform:rotate(-90deg);opacity:.9}

.shadow{position:absolute;left:0;top:calc(var(--ph) * .5);width:calc(var(--pw) * 2.6);height:calc(var(--pw) * .5);transform:translate(-50%,-50%) rotateX(90deg) translateZ(-10px);
  background:radial-gradient(50% 50% at 50% 50%,rgba(8,26,36,.45) 0,rgba(8,26,36,.18) 40%,rgba(8,26,36,0) 72%);filter:blur(6px);pointer-events:none;transition:transform var(--flip) cubic-bezier(.3,.7,.25,1)}

/* reading view */
.scene.read{perspective:none;cursor:default}
.scene.read .shadow{opacity:.5}

@media (prefers-reduced-motion:reduce){
  .orbit{transition:none}.sheet.turning .face::before{animation:none}
}
@media (max-width:720px){
  .top,.bottom{padding:10px 12px}
  .brand small{display:none}
  .brand img{height:28px}
  .actions{gap:6px}
  .actions .btn{padding:7px 10px;font-size:11px}
  #btnFull{display:none}
  .nav{width:44px;height:44px;top:auto;bottom:12px;transform:none}.nav.prev{left:10px}.nav.next{left:62px;right:auto}
  .nav:hover{transform:scale(1.06)}
  .th img{height:34px}
  .hint{font-size:11px;bottom:62px;max-width:calc(100% - 24px);white-space:normal;text-align:center}
  .counter{min-width:52px;font-size:11px}
  .zoom{right:10px;bottom:12px}
  .btn.small{padding:6px 9px}
}