/* ============================================================
   KASA — THE INNOVATION BOOK

   A hardcover book lying on a dark surface. Scroll and it opens: the
   cover swings on its hinge, the first leaf turns, and the spread
   underneath is what is coming next.

   What makes it read as a real object rather than a rotating rectangle:

   - Thickness. A cover is not a plane; it has a board edge, and the page
     block under it has a fore edge made of many thin leaves.
   - Light that belongs to the room. One key from the upper left, so the
     cover's outer face DARKENS as it swings away from it while the inner
     face BRIGHTENS as it turns to face it. That single inversion is most
     of the realism.
   - A shadow that behaves. It spreads and softens as the cover lifts,
     because the object casting it is further from the surface.
   - Paper that is not white. Warm off-white, with the very slight
     gradient a real page has where it curves into the gutter.

   All of it is CSS 3D — no library, no model, nothing to download.
   ============================================================ */

.k-booksec{
  position:relative;
  /* Scroll distance IS the animation length. Too short and the book
     snaps open; this gives it about three screens to move through. */
  height:340vh;
  padding:0 !important;
  background:
    radial-gradient(ellipse 80% 50% at 50% 40%, rgba(217,169,74,.05), transparent 70%),
    var(--bg);
}
.k-bookstage{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(18px,3.4vh,40px);
  overflow:hidden;
  perspective:2600px;
  perspective-origin:50% 42%;
}

.k-book-kicker{
  font-family:var(--k-ui,'Geist',sans-serif);font-weight:300;
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink-soft);
  opacity:calc(1 - var(--open, 0) * 1.4);
  transition:opacity .3s linear;
}

/* ---------- the object ---------- */
.k-book{
  position:relative;
  width:min(46vw,520px);
  height:min(62vh,680px);
  transform-style:preserve-3d;
  /* Lying at an angle, straightening as it opens — the way a book you
     pick up rotates toward you before you read it. */
  transform:
    rotateX(calc(14deg - var(--open,0) * 10deg))
    rotateZ(calc(-2deg + var(--open,0) * 2deg))
    translateX(calc(var(--open,0) * 22%))
    scale(calc(1 - var(--open,0) * 0.06));
  transition:transform .1s linear;
}

/* The page block: the body of the book, always there under the cover. */
.k-pages{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  background:linear-gradient(100deg,#F6F1E4 0%,#EFE8D7 46%,#E4DAC4 92%);
  border-radius:2px 7px 7px 2px;
  box-shadow:inset -12px 0 22px -16px rgba(90,72,44,.7);
  overflow:hidden;
}
/* The fore edge — many thin leaves, drawn as a repeating gradient. It is
   the cheapest possible way to say "this is made of paper". */
.k-pages::after{
  content:"";position:absolute;top:2px;bottom:2px;right:0;width:11px;
  background:repeating-linear-gradient(180deg,
    rgba(120,98,62,.30) 0 1px, rgba(255,252,244,.9) 1px 3px);
  border-radius:0 6px 6px 0;
}
/* The gutter shadow, where the paper curves down into the spine. */
.k-pages::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:56px;
  background:linear-gradient(90deg,rgba(74,58,34,.34),rgba(74,58,34,0));
  z-index:2;pointer-events:none;
}

.k-spread{
  position:absolute;inset:0;
  padding:clamp(26px,4vh,54px) clamp(26px,3.4vw,52px) clamp(26px,4vh,54px) clamp(46px,5vw,78px);
  display:flex;flex-direction:column;justify-content:center;
  color:#2A2115;
  opacity:calc((var(--open,0) - .55) * 3.2);
  transition:opacity .1s linear;
}
.k-spread .k-sp-label{
  font-family:var(--k-ui,'Geist',sans-serif);font-weight:300;
  font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;
  color:#8A7248;margin-bottom:18px;
}
.k-spread h3{
  font-family:var(--k-display,serif) !important;font-weight:400 !important;
  font-size:clamp(24px,2.6vw,40px) !important;line-height:1.12 !important;
  color:#241C11 !important;margin:0 0 16px !important;letter-spacing:-0.015em !important;
}
.k-spread p{
  font-family:var(--k-ui,'Geist',sans-serif);
  font-size:clamp(12.5px,1.05vw,15px);line-height:1.7;color:#5A4A31;margin:0 0 12px;
  max-width:34ch;
}
.k-spread .k-sp-list{list-style:none;margin:14px 0 0;padding:0;}
.k-spread .k-sp-list li{
  font-family:var(--k-ui,'Geist',sans-serif);
  font-size:clamp(11.5px,.95vw,13.5px);color:#4A3D28;
  padding:9px 0;border-top:1px solid rgba(90,72,44,.16);
  display:flex;gap:12px;align-items:baseline;
}
.k-spread .k-sp-list li b{color:#8A6A2E;font-weight:500;font-size:10px;letter-spacing:.16em;}
.k-spread .k-sp-go{
  margin-top:22px;align-self:flex-start;
  font-family:var(--k-ui,'Geist',sans-serif);font-size:11px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;
  color:#241C11;text-decoration:none;
  border-bottom:1px solid rgba(36,28,17,.35);padding-bottom:5px;
  transition:border-color .3s ease,color .3s ease;
}
.k-spread .k-sp-go:hover{color:#8A6A2E;border-color:#8A6A2E;}

/* ---------- the leaf that turns ---------- */
.k-leaf{
  position:absolute;inset:0;
  transform-origin:left center;
  transform-style:preserve-3d;
  transform:rotateY(calc(var(--leaf,0) * -178deg));
  transition:transform .1s linear;
  z-index:3;
}
.k-leaf-face{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:2px 6px 6px 2px;
  background:linear-gradient(100deg,#F7F2E6 0%,#F1EADA 60%,#E9E0CB 100%);
  padding:clamp(26px,4vh,54px) clamp(26px,3.4vw,52px) clamp(26px,4vh,54px) clamp(46px,5vw,78px);
  display:flex;flex-direction:column;justify-content:center;
}
.k-leaf-back{
  transform:rotateY(180deg);
  background:linear-gradient(260deg,#F4EEE0 0%,#EBE3D0 100%);
  border-radius:6px 2px 2px 6px;
}
.k-leaf-face h4{
  font-family:var(--k-display,serif) !important;font-weight:400 !important;
  font-size:clamp(20px,2.2vw,32px) !important;color:#241C11 !important;
  margin:0 0 14px !important;line-height:1.16 !important;
}
.k-leaf-face p{
  font-family:var(--k-ui,'Geist',sans-serif);
  font-size:clamp(12px,1vw,14.5px);line-height:1.7;color:#5A4A31;margin:0;max-width:32ch;
}
.k-leaf-face .k-sp-label{
  font-family:var(--k-ui,'Geist',sans-serif);font-weight:300;
  font-size:9.5px;letter-spacing:.32em;text-transform:uppercase;
  color:#8A7248;margin-bottom:16px;
}

/* ---------- the cover ---------- */
.k-cover{
  position:absolute;inset:-6px -6px -6px 0;
  transform-origin:left center;
  transform-style:preserve-3d;
  transform:rotateY(calc(var(--open,0) * -172deg));
  transition:transform .1s linear;
  z-index:6;
}
.k-cover-face{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:3px 9px 9px 3px;
  overflow:hidden;
}
/* Outer: a deep board with a woven grain and a bevelled edge. */
.k-cover-front{
  background:
    linear-gradient(118deg,#171220 0%,#0E0B14 42%,#1B1524 100%);
  box-shadow:
    inset 0 0 0 1px rgba(217,169,74,.20),
    inset -2px 0 0 rgba(0,0,0,.5),
    inset 3px 0 10px -4px rgba(255,255,255,.10);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;padding:44px 34px;
}
/* Grain. Two crossed fine gradients, low opacity — cloth, not noise. */
.k-cover-front::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px);
}
/* The key light. It slides across the board and fades out as the cover
   turns away from the room — this is the part that sells the material. */
.k-cover-front::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,
    rgba(255,255,255,.13) 0%,
    rgba(255,255,255,.03) 26%,
    rgba(0,0,0,.20) 62%,
    rgba(0,0,0,.42) 100%);
  opacity:calc(1 - var(--open,0) * .75);
}
.k-cover-rule{
  width:56%;height:1px;background:linear-gradient(90deg,transparent,rgba(217,169,74,.75),transparent);
}
.k-cover-title{
  font-family:var(--k-display,serif);
  font-size:clamp(26px,3vw,46px);line-height:1;text-align:center;
  letter-spacing:.02em;
  background-image:linear-gradient(96deg,#8A6A2E,#F5DC9B 38%,#D9A94A 62%,#8A6A2E);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.5));
}
.k-cover-sub{
  font-family:var(--k-ui,'Geist',sans-serif);font-weight:300;
  font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(217,169,74,.72);text-align:center;
}
.k-cover-mark{
  width:46px;height:46px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 1px rgba(217,169,74,.5);
}
/* Inner: paper pasted to the board — pale, and lit the OTHER way. */
.k-cover-inside{
  transform:rotateY(180deg);
  background:linear-gradient(260deg,#EFE7D5 0%,#E4DAC3 100%);
  border-radius:9px 3px 3px 9px;
  display:flex;align-items:center;justify-content:center;
  padding:40px;
}
.k-cover-inside::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(258deg,rgba(0,0,0,.30),rgba(0,0,0,0) 55%);
  opacity:calc(1 - var(--open,0) * .85);
}
.k-cover-plate{
  text-align:center;color:#6B573A;
  font-family:var(--k-ui,'Geist',sans-serif);font-weight:300;
  font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;line-height:2.1;
  border:1px solid rgba(107,87,58,.3);padding:20px 26px;
  opacity:calc(var(--open,0) * 1.2 - .3);
}

/* The spine, standing up on the hinge. */
.k-spine{
  position:absolute;top:-6px;bottom:-6px;left:-24px;width:24px;
  transform-origin:right center;
  transform:rotateY(90deg) translateZ(0);
  background:linear-gradient(180deg,#1B1524,#0C0912 50%,#1B1524);
  box-shadow:inset 0 0 0 1px rgba(217,169,74,.18);
  border-radius:3px 0 0 3px;
  z-index:5;
}

/* The shadow on the table. It grows and softens as the cover lifts,
   because the thing casting it is further away from the surface. */
.k-book-shadow{
  position:absolute;left:6%;right:6%;bottom:-6%;height:12%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.72),rgba(0,0,0,0) 70%);
  filter:blur(calc(16px + var(--open,0) * 26px));
  transform:translateZ(-40px) scaleX(calc(1 + var(--open,0) * .55));
  opacity:calc(.85 - var(--open,0) * .3);
  z-index:0;
}

/* A hint that it is scroll-driven, which fades the moment it starts. */
.k-book-hint{
  font-family:var(--k-ui,'Geist',sans-serif);font-weight:300;
  font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-soft);
  display:flex;align-items:center;gap:12px;
  opacity:calc(1 - var(--open,0) * 3);
  transition:opacity .3s linear;
}
.k-book-hint span{
  display:block;width:1px;height:26px;
  background:linear-gradient(180deg,transparent,var(--gold-bright));
  animation:k-hintdrop 2.2s ease-in-out infinite;
}
@keyframes k-hintdrop{
  0%,100%{transform:translateY(-4px);opacity:.35;}
  50%{transform:translateY(4px);opacity:1;}
}

/* ---------- small screens ----------
   A 3D book on a phone is a 3D book you cannot read. The scroll-open
   still happens, but the object is portrait, the type steps down, and
   the tilt comes off so nothing is lost to foreshortening. */
@media(max-width:860px){
  .k-booksec{height:300vh;}
  .k-book{
    width:min(78vw,420px);height:min(56vh,520px);
    transform:rotateX(calc(8deg - var(--open,0) * 8deg)) scale(calc(1 - var(--open,0) * .04));
  }
  .k-spread,.k-leaf-face{padding:26px 22px 26px 34px;}
  .k-cover-front{padding:30px 22px;gap:16px;}
}
/* Touch devices and reduced motion: the book is simply open, with the
   spread readable. Nothing is hidden behind an interaction that will
   not happen. */
@media(prefers-reduced-motion:reduce){
  .k-booksec{height:auto;}
  .k-bookstage{position:relative;height:auto;padding:80px 20px;perspective:none;}
  .k-book{transform:none;}
  .k-cover,.k-leaf,.k-spine,.k-book-shadow,.k-book-hint{display:none;}
  .k-spread{opacity:1 !important;position:relative;}
  .k-pages{position:relative;height:auto;min-height:420px;}
}