/* Homepage art direction: original covers and cyan/gold identity, layered in CSS.
   Static by default; one short entrance and pointer hover only. */
.hero-section { isolation: isolate; background: #080d0e; }
.hero-scenery { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-scenery::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 78% 43%, #1459494d, transparent 54%), radial-gradient(ellipse at 94% 78%, #a1712320, transparent 35%); }
.hero-grid-lines { position: absolute; inset: 0; background-image: linear-gradient(#8bbdb609 1px, transparent 1px), linear-gradient(90deg, #8bbdb609 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(90deg, transparent 25%, #000 75%); }
.hero-brand-lines { position: absolute; width: 780px; height: 780px; max-width: none; right: -72px; top: -60px; stroke: #54d7bd; stroke-width: 1; opacity: .18; transform: rotate(-9deg); }
.hero-brand-lines path + path { stroke: var(--gold); opacity: .7; }
.hero-light { position: absolute; width: 1px; height: 370px; transform: rotate(36deg); }
.hero-light-cyan { right: 31%; top: -240px; background: linear-gradient(transparent, #39e8cbaa, transparent); box-shadow: 0 0 20px #39e8cb55; }
.hero-light-gold { right: 7%; bottom: -240px; background: linear-gradient(transparent, #f0d07899, transparent); box-shadow: 0 0 20px #f0d07855; }
.hero-copy h1 .neon-text { position: relative; display: inline-block; }
.hero-copy h1 .neon-text::after { content: ''; position: absolute; bottom: 1px; height: 2px; left: 4%; right: 1%; background: linear-gradient(90deg, var(--cyan), #39e8cb44 70%, transparent); transform: rotate(-2deg); box-shadow: 0 2px 12px #39e8cb2b; }

/* Three planes: the lit floor, the original book covers, then readable callouts. */
.product-showcase { overflow: visible; border-color: #4d8f804d; background: radial-gradient(ellipse at 50% 35%, #174b3d63, transparent 70%), linear-gradient(145deg, #101c1eeb, #080e10f5 70%); box-shadow: 0 28px 70px #0007, 0 0 65px #39e8cb0b, inset 0 1px 0 #9cdec017; }
.product-showcase::before { width: 105px; left: 30px; }
.product-showcase::after { content: ''; position: absolute; right: -1px; bottom: 30px; width: 2px; height: 65px; background: linear-gradient(transparent, #f0d078a8, transparent); box-shadow: 0 0 20px #f0d07833; pointer-events: none; }
.showcase-stage { overflow: hidden; }
.showcase-floor { position: absolute; left: -25%; bottom: -78px; width: 150%; height: 290px; transform: perspective(380px) rotateX(59deg); transform-origin: 50% 100%; background-image: linear-gradient(#4bb59c26 1px, transparent 1px), linear-gradient(90deg, #4bb59c26 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(ellipse at center, #000, transparent 68%); }
.showcase-halo { top: 11%; height: 66%; border-color: #53dab93d; transform: rotate(-24deg); background: radial-gradient(ellipse at 50% 80%, #39e8cb18, transparent 73%); }
.showcase-halo::before, .showcase-halo::after { content: ''; position: absolute; pointer-events: none; border: 1px solid; border-radius: 50%; }
.showcase-halo::before { inset: -22px 18px; border-color: #d4a85324; transform: rotate(48deg); }
.showcase-halo::after { inset: 32px -25px; border-color: #39e8cb18; }
.showcase-glint { position: absolute; width: 7px; height: 7px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 15px #f0d07888; }
.showcase-glint::before, .showcase-glint::after { content: ''; position: absolute; background: currentColor; color: #f0d07888; }
.showcase-glint::before { width: 21px; height: 1px; top: 3px; left: -7px; }
.showcase-glint::after { height: 21px; width: 1px; left: 3px; top: -7px; }
.showcase-glint-one { top: 27%; left: 10%; }
.showcase-glint-two { bottom: 28%; right: 8%; width: 4px; height: 4px; opacity: .55; }
.showcase-glint-two::before, .showcase-glint-two::after { display: none; }
.showcase-plinth { box-shadow: 0 20px 28px #000b, 0 -12px 45px #39e8cb20; }
.showcase-books { transition: translate .35s ease; }
.showcase-book { box-shadow: 15px 22px 24px #000a, 3px 0 0 #d4a85370; }
.showcase-heading, .showcase-summary { position: relative; z-index: 2; }
.showcase-callouts { position: static; }
.showcase-detail { position: absolute; top: 77px; right: -13px; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 13px 17px; border: 1px solid #b79c5463; border-left: 2px solid var(--gold); border-radius: 4px; background: #15201ff5; box-shadow: 0 12px 24px #0006; transform: rotate(3deg); }
.showcase-detail svg { width: 26px; height: 26px; color: var(--gold); stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.showcase-detail strong, .showcase-preview strong { display: block; color: var(--text); font-weight: 500; font-size: 14px; line-height: 1.6; }
.showcase-detail span > span, .showcase-preview span > span { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.showcase-preview { position: absolute; left: -18px; bottom: 111px; z-index: 4; display: flex; align-items: center; gap: 13px; padding: 11px 15px 11px 13px; border: 1px solid #5c9c8b80; border-radius: 4px; background: #111d1bf7; box-shadow: 0 16px 32px #0008; transform: rotate(-3deg); transition: transform .2s, border-color .2s; }
.showcase-preview img { width: 37px; height: 52px; object-fit: cover; box-shadow: 3px 4px 0 #a7b09844; transform: rotate(-5deg); }
.showcase-preview .showcase-preview-arrow { font: 400 22px/1 var(--latin); color: var(--cyan); margin-left: 8px; }
.showcase-preview:hover { transform: rotate(0) translateY(-3px); border-color: var(--cyan); }

/* The existing three topics become useful, tactile entry points into the reader. */
.promise-strip { position: relative; background: linear-gradient(110deg, #101d1c, #0c1316 65%, #1a1b16); border-top-color: #608e7659; border-bottom-color: #608e7638; box-shadow: 0 -8px 35px #0003; }
.promise-inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; min-height: 124px; padding-block: 18px; }
.promise-item { display: flex; align-items: center; gap: 16px; position: relative; min-width: 0; min-height: 86px; padding: 12px; border: 1px solid transparent; border-radius: 5px; transition: background .2s, border-color .2s; }
.promise-item:hover { background: #39e8cb08; border-color: #39e8cb30; }
.promise-icon { flex: 0 0 48px; height: 48px; display: grid; place-items: center; color: var(--cyan); background: linear-gradient(135deg, #173930, #0f191a); border: 1px solid #43877780; border-radius: 9px; box-shadow: inset 0 1px 0 #aeffe72b, 0 5px 12px #0004; transform: rotate(-5deg); }
.promise-icon svg { width: 27px; height: 27px; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(5deg); }
.promise-icon-gold { color: var(--gold); border-color: #9b855c70; background: linear-gradient(135deg, #383020, #191a15); }
.promise-copy { min-width: 0; }
.promise-copy strong { display: block; font-size: 17px; font-weight: 500; }
.promise-copy > span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.promise-arrow { margin-left: auto; padding-left: 4px; color: var(--muted); font: 400 19px/1 var(--latin); }
.promise-item:hover .promise-arrow { color: var(--cyan); }
.promise-item:not(:last-child)::after { content: ''; position: absolute; right: -13px; height: 32px; width: 1px; background: linear-gradient(transparent, #7a9e8c66, transparent); pointer-events: none; }

/* Carry a little of the stage treatment down the page. */
.collection-section { background: radial-gradient(ellipse at 0 50%, #173b3220, transparent 48%); }
.collection-section .book-stage { box-shadow: inset 0 1px 0 #76d2b21a, 0 18px 36px #0003; }
.collection-section .book-stage::before { content: ''; position: absolute; inset: 16px; border: 1px solid #4b97831c; border-radius: 50%; transform: rotate(-20deg) scaleX(.8); pointer-events: none; }
.collection-section .book-stage::after { content: ''; position: absolute; top: -1px; right: 28px; height: 2px; width: 68px; background: linear-gradient(90deg, transparent, var(--cyan)); box-shadow: 0 0 16px #39e8cb55; pointer-events: none; }
.collection-section .book-stage-three::after { background: linear-gradient(90deg, transparent, var(--gold)); box-shadow: 0 0 16px #f0d07844; }
.sample-section { background: radial-gradient(ellipse at 90% 50%, #1b483122, transparent 50%), #0b1215; }

@media (hover: hover) and (pointer: fine) {
  .product-showcase:hover .showcase-books { translate: 0 -5px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-scenery, .showcase-callouts { animation: depth-arrive .55s ease-out both; }
  @keyframes depth-arrive { from { opacity: .4; } to { opacity: 1; } }
}
@media (min-width: 1024px) and (max-width: 1199px) {
  .showcase-detail { top: 69px; right: -9px; gap: 8px; padding: 10px 12px; }
  .showcase-preview { left: -10px; bottom: 107px; gap: 9px; }
  .showcase-preview .showcase-preview-arrow { margin-left: 0; }
  .promise-inner { gap: 14px; }
  .promise-item { gap: 11px; padding-inline: 4px; }
}
@media (max-width: 1023px) {
  .hero-brand-lines { width: 800px; height: 800px; top: auto; bottom: 30px; right: -190px; opacity: .13; }
  .hero-grid-lines { mask-image: linear-gradient(transparent, #000 65%); }
  .showcase-detail { right: -12px; top: 81px; }
  .showcase-preview { left: -12px; bottom: 117px; }
  .promise-inner { gap: 10px; padding-block: 14px; }
  .promise-item { align-items: flex-start; flex-wrap: wrap; gap: 12px; padding: 12px 7px; }
  .promise-copy { width: 100%; }
  .promise-copy strong { font-size: 16px; }
  .promise-arrow { position: absolute; top: 30px; right: 10px; }
  .promise-item:not(:last-child)::after { right: -6px; height: 68px; top: 22px; }
}
@media (max-width: 600px) {
  .hero-copy h1 .neon-text::after { bottom: 2px; height: 1px; }
  .hero-brand-lines { width: 550px; height: 550px; right: -165px; bottom: 130px; }
  .hero-grid-lines { background-size: 48px 48px; opacity: .65; }
  .hero-light { display: none; }
  .product-showcase { overflow: hidden; }
  .showcase-callouts { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr; gap: 10px; margin: -14px 18px 20px; }
  .showcase-detail { position: static; transform: none; width: fit-content; gap: 9px; padding: 6px 10px; border: 0; border-left: 2px solid var(--gold); border-radius: 0; background: transparent; box-shadow: none; }
  .showcase-detail svg { width: 21px; height: 21px; }
  .showcase-detail > span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
  .showcase-detail span > span { margin: 0; }
  .showcase-preview { position: static; transform: none; gap: 13px; padding: 10px 13px; min-height: 68px; box-shadow: 0 8px 20px #0004; }
  .showcase-preview img { width: 30px; height: 43px; }
  .showcase-preview .showcase-preview-arrow { margin-left: auto; }
  .showcase-preview:hover { transform: none; }
  .showcase-floor { bottom: -95px; }
  .showcase-summary { margin-top: 0; }
  .promise-inner { grid-template-columns: 1fr; gap: 0; padding-block: 8px; }
  .promise-item { align-items: center; flex-wrap: nowrap; min-height: 88px; padding: 13px 0; gap: 15px; border-radius: 0; }
  .promise-item + .promise-item { border-top-color: #55786538; }
  .promise-item:not(:last-child)::after { display: none; }
  .promise-icon { flex-basis: 44px; height: 44px; }
  .promise-copy { width: auto; }
  .promise-copy strong { font-size: 17px; }
  .promise-arrow { position: static; padding-right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scenery, .showcase-callouts { animation: none; }
  .showcase-books, .showcase-preview, .promise-item { transition: none; }
  .product-showcase:hover .showcase-books { translate: none; }
  .showcase-preview:hover { transform: none; }
}