/* ============================================================
   QUILLON — living paper: 3D scene + document sheets
   ============================================================ */

/* ---------- 3D scene ---------- */
.scene{ position:relative; perspective:1200px; perspective-origin:50% 42%; width:100%; height:100%; }
.scene__inner{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transition:transform .5s var(--ease-soft);
  will-change:transform;
}

/* a positioned slot in 3D space (layout transform lives here) */
.sheet-pos{
  position:absolute; top:50%; left:50%;
  transform-style:preserve-3d;
  will-change:transform;
}
/* breathing wrapper (continuous float) */
.sheet-float{ transform-style:preserve-3d; will-change:transform; }

/* ---------- the document sheet ---------- */
.sheet{
  --sw:320px;
  position:relative;
  width:var(--sw); height:calc(var(--sw) * 1.414);
  margin:calc(var(--sw) * -0.707) 0 0 calc(var(--sw) * -0.5);
  background:
    linear-gradient(180deg, #ffffff, #fbfaf6);
  border-radius:3px;
  box-shadow:var(--shadow-paper);
  overflow:hidden;
  padding:8.5% 8% 7%;
  display:flex; flex-direction:column;
  border:1px solid rgba(26,24,19,.05);
  transform-style:preserve-3d;
  backface-visibility:hidden;
}
/* stacked-page side edges for thickness illusion */
.sheet::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(255,255,255,.65) 0%, transparent 24%, transparent 72%, rgba(26,24,19,.045) 100%);
  pointer-events:none;
}
.sheet::before{
  content:""; position:absolute; top:0; bottom:0; left:13%;
  width:1px; background:rgba(154,106,52,.20);
}

.sheet__head{ display:flex; align-items:center; gap:6px; margin-bottom:7%; }
.sheet__mark{ width:14px; height:14px; border:2px solid var(--ink); border-radius:2px; position:relative; flex:none; }
.sheet__mark::after{ content:""; position:absolute; inset:2px; border-bottom:2px solid var(--tick); border-right:2px solid var(--tick); width:5px; height:8px; left:3px; top:0; transform:rotate(40deg); }
.sheet__code{ font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; color:var(--tick-deep); font-weight:600; background:var(--tick-glow); padding:2px 5px; border-radius:2px; }
.sheet__kind{ font-family:var(--font-mono); font-size:7.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--t-mute); margin-left:auto; }

.sheet__title{ height:9px; width:74%; border-radius:2px; background:var(--ink); margin-bottom:5px; }
.sheet__sub{ height:6px; width:48%; border-radius:2px; background:rgba(26,24,19,.28); margin-bottom:8%; }

.line{ height:5px; border-radius:2px; background:rgba(26,24,19,.13); margin-bottom:7px; }
.line.s{ width:64%; } .line.m{ width:86%; } .line.l{ width:97%; }

/* checkbox rows */
.crow{ display:flex; align-items:center; gap:7px; margin-bottom:9px; }
.cbox{ width:11px; height:11px; border:1.5px solid var(--ink); border-radius:2px; flex:none; position:relative; }
.cbox.on{ background:var(--tick); border-color:var(--tick); }
.cbox.on::after{ content:""; position:absolute; left:3px; top:0px; width:3.5px; height:6.5px; border-bottom:1.5px solid #fff; border-right:1.5px solid #fff; transform:rotate(40deg); }
.crow .line{ margin:0; flex:1; }

/* mapping grid */
.mapgrid{ display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:3px; margin-top:4%; }
.mapgrid .gc{ height:13px; border-radius:1.5px; background:rgba(26,24,19,.07); display:flex; align-items:center; justify-content:center; }
.mapgrid .gc.h{ background:var(--ink); }
.mapgrid .gc.lbl{ background:rgba(26,24,19,.13); }
.mapgrid .gc .gt{ width:6px; height:6px; opacity:0; transform:scale(.4); transition:opacity .4s var(--ease), transform .4s var(--ease); }
.mapgrid .gc .gt::after{ content:""; display:block; width:5px; height:8px; border-bottom:1.5px solid var(--tick); border-right:1.5px solid var(--tick); transform:rotate(40deg) translate(-1px,-1px); }
.mapgrid.drawn .gc .gt{ opacity:1; transform:none; }

/* mini slide variant */
.sheet--slide{ height:calc(var(--sw)*0.62); padding:7%; background:linear-gradient(150deg,#1b1813,#2e2a20); }
.sheet--slide .sheet__title{ background:var(--paper-hi); width:66%; }
.sheet--slide .sheet__sub{ background:rgba(255,255,255,.4); }
.sheet--slide .line{ background:rgba(255,255,255,.22); }
.sheet--slide .sheet__kind{ color:var(--tick-soft); }
.sheet--slide::before{ display:none; }

/* pull-quote block for guide variant */
.qblock{ border-left:2px solid var(--tick); padding-left:8px; margin:6% 0; }
.qblock .line{ background:rgba(26,24,19,.2); }

/* tactile stacked-pages edge */
.sheet--stack::before,
.sheet--stack-2::after{}

/* lit / active sheet during the build scroll */
.sheet{ transition:box-shadow .6s var(--ease), filter .6s var(--ease); }
.sheet.lit{ box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 34px 64px -22px rgba(28,22,12,.45), 0 0 0 2px var(--tick); }
.sheet-pos{ transition:opacity .9s var(--ease); }

/* SVG tick that draws on scroll */
.draw-tick path{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.1s var(--ease); }
.draw-tick.go path{ stroke-dashoffset:0; }
.draw-tick path{ pathLength:1; }

@media(max-width:760px){
  .sheet{ --sw:240px; }
}