/*
 * Quo Forma — page-turning magazine
 * Adapted from Jamie Coulter's pen (codepen.io/jcoulterdesign/pen/oRRRPY).
 * All sizes inside the book use container units (cqw) so the whole
 * magazine scales with its width.
 */

.magazine {
  --mag-ink: #f3ebe1;
  --mag-solid: #4a2512;
  --mag-ease: cubic-bezier(0.6, 0.045, 0.165, 1);
  --mag-flip: 1s;
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  outline: none;
}

/* Reserve the book's space (plus the dots row below it) until magazine.js
   builds it, so the content underneath doesn't jump when it loads. */
.magazine:empty::before {
  content: "";
  display: block;
  aspect-ratio: 2 / 1;
  margin-bottom: 48px; /* .mag-dots: 34px margin + 14px buttons */
  background: #2a160a;
}

.magazine:focus-visible .mag-book {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

.mag-book {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;
  container-type: inline-size;
  perspective: 1800px;
  box-shadow: 0 41px 38px -20px rgba(55, 22, 1, 0.45);
  background: #2a160a;
  user-select: none;
}

/* ---- Pages & leaves -------------------------------------------------- */

.mag-page {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  background: #2a160a;
  color: var(--mag-ink);
}

.mag-page--base {
  left: 0;
  z-index: 0; /* own stacking context so its furniture stays beneath turned leaves */
}

.mag-leaf {
  --d: 0s;
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  /* z-index swaps half-way through the turn, as in the original pen */
  transition:
    transform var(--mag-flip) var(--d) cubic-bezier(0.645, 0.045, 0.355, 1),
    z-index 0s calc(var(--d) + var(--mag-flip) / 2);
}

.mag-leaf.is-flipped {
  transform: rotateY(-180deg);
}

.mag-face {
  left: 0;
  width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.mag-face--back {
  transform: rotateY(180deg);
}

/* Each page is a window onto a double-width spread */
.mag-window {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.mag-spread {
  position: absolute;
  top: 0;
  width: 200%;
  height: 100%;
  perspective: 1300px;
}

.mag-window--left .mag-spread { left: 0; }
.mag-window--right .mag-spread { left: -100%; }

.mag-gutter {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.mag-gutter--left {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.08) 3%, rgba(0, 0, 0, 0) 9%);
}

.mag-gutter--right {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.06) 3%, rgba(0, 0, 0, 0) 8%);
}

/* ---- Shared spread pieces ------------------------------------------- */

.mag-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 2.4s ease-out;
}

/* half-spread images zoom away from the spine so they never cross it */
.mag-bg--left { right: 50%; transform-origin: 100% 50%; }
.mag-bg--right { left: 50%; transform-origin: 0 50%; }

/* whole image visible, page colour in the gaps */
.mag-bg--contain {
  background-color: var(--mag-solid);
  background-size: contain;
  background-repeat: no-repeat;
}

/* zoomed-out image: the picture sits smaller, a blurred copy fills behind */
.mag-bg--zoomed { overflow: hidden; }

.mag-bg__blur,
.mag-bg__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.mag-bg__blur {
  transform: scale(1.15);
  filter: blur(24px) brightness(0.92);
}

.is-active .mag-bg {
  transform: scale(1);
}

.mag-tint {
  position: absolute;
  inset: 0;
  background: rgba(30, 14, 4, var(--tint, 0.3));
}

.mag-solid {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  background: var(--mag-solid);
}

.mag-solid--left {
  left: 0;
  right: 50%;
}

/* Page furniture: logo, page numbers, footer */
.mag-logo {
  position: absolute;
  z-index: 3;
  top: 4.5%;
  left: 4.5%;
  font-family: "Jost", sans-serif;
  font-size: max(0.85cqw, 9px);
  font-weight: 400;
  letter-spacing: 0.38em;
  text-transform: uppercase;
}

.mag-pagenumber {
  position: absolute;
  z-index: 3;
  bottom: 5%;
  left: 4.5%;
  display: flex;
  align-items: center;
  font-family: "Cormorant Garamond", serif;
  font-size: max(1.2cqw, 11px);
}

.mag-pagenumber span:first-child::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 1px;
  margin: 0 0.8cqw;
  background: currentColor;
  transition: width 0.5s 0.2s var(--mag-ease);
}

.is-active .mag-pagenumber span:first-child::after {
  width: 7cqw;
  transition: width 1s 0.7s var(--mag-ease);
}

.mag-footer {
  position: absolute;
  z-index: 3;
  bottom: 5%;
  right: 4.5%;
  font-family: "Jost", sans-serif;
  font-size: max(0.7cqw, 8px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* Title centred on the spine (splits in two when the page turns) */
.mag-spine {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 24%;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -50%) translateZ(200px);
  transition: transform 1.5s 0.2s var(--mag-ease), opacity 0.6s;
}

.is-active .mag-spine,
.mag-spread--cover .mag-spine {
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: transform 1.5s 0.4s var(--mag-ease), opacity 1s 0.4s;
}

.mag-spine h4 {
  margin: 0;
  padding: 1.3cqw 1.6cqw 1.7cqw;
  border-top: 1px solid;
  border-bottom: 1px solid;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 3cqw;
  line-height: 1.02;
}

.mag-spine h6 {
  margin: 1.1cqw 0 0;
  font-family: "Jost", sans-serif;
  font-weight: 400;
  font-size: max(0.8cqw, 8px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.8;
}

.mag-spine p {
  margin: 2.2cqw 0 0;
  font-family: "Cormorant Garamond", serif;
  font-size: max(1.2cqw, 10px);
  line-height: 1.45;
}

/* ---- Cover ----------------------------------------------------------- */

/* cover title sits in the middle of the left page */
.mag-spread--cover .mag-spine {
  left: 25%;
}

/* boxed title: the title sits on a solid panel so it reads over busy images */
.mag-spine--boxed {
  width: 28%;
  padding: 2.4cqw 2.2cqw 2.6cqw;
  background: var(--mag-solid);
  box-shadow: 0 1.2cqw 3cqw rgba(20, 8, 2, 0.35);
}

/* on a cover, the box is centred across the spine */
.mag-spread--cover .mag-spine--boxed {
  left: 50%;
}

/* ---- Panel ----------------------------------------------------------- */

/* one image across both pages, boxed title in the middle of the right page */
.mag-spread--panel .mag-spine {
  left: 82%;
  top: 73%;
}

/* soft dark glow behind the headline, fading out so it has no visible edge */
.mag-headline-shade {
  position: absolute;
  left: 0;
  top: 0;
  width: 42%;
  height: 60%;
  background: radial-gradient(ellipse at 30% 35%, rgba(30, 14, 4, 0.45), rgba(30, 14, 4, 0) 70%);
  pointer-events: none;
}

/* without a title, the subtitle leads the box */
.mag-spine--boxed h6:first-child { margin-top: 0; }

/* ---- Stack ----------------------------------------------------------- */

/* image on the left page; right page is solid with a small picture above the title */
.mag-spread--stack .mag-spine {
  left: 75%;
  width: 32%;
}

.mag-stack__img {
  display: block;
  max-width: 70%;
  max-height: 20cqw;
  margin: 0 auto 2.4cqw;
  box-shadow: 0 1cqw 2.4cqw rgba(20, 8, 2, 0.4);
}

/* ---- Feature --------------------------------------------------------- */

.mag-headline {
  position: absolute;
  z-index: 1;
  left: 6%;
  top: 10%;
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 4.4cqw;
  line-height: 0.98;
  letter-spacing: -0.05cqw;
  text-transform: uppercase;
  transform-style: preserve-3d;
}

.mag-letter {
  display: inline-block;
  opacity: 0;
  transform: translateZ(var(--z));
  transition: transform 1.5s var(--mag-ease), opacity 0.8s;
}

.is-active .mag-letter {
  opacity: 1;
  transform: translateZ(0);
  transition: transform 1.5s 0.4s var(--mag-ease), opacity 1s 0.4s;
}

.mag-inset {
  position: absolute;
  z-index: 1;
  left: 28%;
  top: 38%;
  width: 14%;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 0.4s var(--mag-ease);
}

.mag-inset img {
  display: block;
  width: 100%;
}

.is-active .mag-inset {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 1s 0.8s var(--mag-ease);
}

.mag-offset {
  position: absolute;
  z-index: 1;
  left: 6%;
  top: 50%;
  width: 18%;
  opacity: 0;
  filter: blur(10px);
  transition: opacity 1s 0.2s, filter 1s 0.2s;
}

.is-active .mag-offset {
  opacity: 1;
  filter: blur(0);
  transition: opacity 1s 0.6s, filter 1s 0.6s;
}

.mag-offset h2,
.mag-section h2 {
  margin: 0 0 0.7cqw;
  font-family: "Jost", sans-serif;
  font-weight: 400;
  font-size: max(0.85cqw, 9px);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.mag-offset p,
.mag-section p {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: max(1.2cqw, 10px);
  line-height: 1.45;
}

.mag-quote {
  position: absolute;
  z-index: 1;
  left: 60%;
  bottom: 15%;
  width: 28%;
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 2.7cqw;
  line-height: 1.1;
  transform-style: preserve-3d;
}

.mag-quote__mark {
  display: block;
  height: 3.2cqw;
  font-size: 6cqw;
  line-height: 1;
  opacity: 0.7;
}

.mag-quote__word {
  display: inline-block;
  opacity: 0;
  transform: translateZ(var(--z));
  transition: transform 1.5s var(--mag-ease), opacity 0.8s;
}

.is-active .mag-quote__word {
  opacity: 1;
  transform: translateZ(0);
  transition: transform 1.5s 0.5s var(--mag-ease), opacity 1s 0.5s;
}

.mag-quote cite {
  display: block;
  margin-top: 1.2cqw;
  font-family: "Jost", sans-serif;
  font-style: normal;
  font-size: max(0.75cqw, 8px);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* ---- Split ----------------------------------------------------------- */

.mag-spread--split .mag-tint {
  right: 50%;
}

.mag-spread--split .mag-spine {
  top: 51%;
}

/* with no framed image, the title moves to the middle of the right page */
.mag-spread--split .mag-spine--right {
  left: 75%;
}

.mag-centerimage {
  position: absolute;
  z-index: 1;
  left: 65%;
  top: 50%;
  width: 22%;
  transform: translateY(-50%);
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: clip-path 0.8s var(--mag-ease);
}

.mag-centerimage img {
  display: block;
  width: 100%;
}

.is-active .mag-centerimage {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.8s 0.5s var(--mag-ease);
}

/* ---- Sections -------------------------------------------------------- */

.mag-spread--sections .mag-tint {
  background: linear-gradient(90deg,
    rgba(30, 14, 4, calc(var(--tint) + 0.25)) 0%,
    rgba(30, 14, 4, var(--tint)) 40%,
    rgba(30, 14, 4, 0) 75%);
}

.mag-section {
  position: absolute;
  z-index: 1;
  opacity: 0;
  filter: blur(20px);
  transform: translateX(-6cqw);
  transition: all 0.8s 0.3s var(--mag-ease);
}

.mag-section--1 { left: 6%;  top: 14%; width: 16%; }
.mag-section--2 { left: 16%; top: 40%; width: 22%; }
.mag-section--3 { left: 9%;  top: 66%; width: 19%; }

.is-active .mag-section {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

.is-active .mag-section--1 { transition-delay: 0.3s; }
.is-active .mag-section--2 { transition-delay: 0.45s; }
.is-active .mag-section--3 { transition-delay: 0.6s; }

.mag-section h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.2cqw;
  letter-spacing: 0;
  text-transform: none;
}

/* ---- Photo ----------------------------------------------------------- */

.mag-caption {
  position: absolute;
  z-index: 1;
  left: 54%;
  bottom: 12%;
  width: 36%;
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 2.2cqw;
  line-height: 1.15;
}

/* ---- Controls -------------------------------------------------------- */

.mag-control {
  position: absolute;
  z-index: 500;
  top: 50%;
  left: 2.3%;
  width: max(2.4cqw, 30px);
  height: max(2.4cqw, 30px);
  padding: 0;
  border: 1px solid var(--mag-ink);
  border-radius: 50%;
  background: rgba(30, 14, 4, 0.15);
  color: var(--mag-ink);
  transform: translateY(-50%);
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(243, 235, 225, 0.3);
  transition: all 0.23s;
}

.mag-control[hidden] {
  display: none;
}

/* the short line running off the page edge */
.mag-control::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1 * max(2.5cqw, 20px));
  width: max(2.5cqw, 20px);
  height: 1px;
  background: var(--mag-ink);
  transition: all 0.2s;
}

/* chevron */
.mag-control::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26%;
  height: 26%;
  border-left: 1px solid var(--mag-ink);
  border-bottom: 1px solid var(--mag-ink);
  transform: translate(-30%, -50%) rotate(45deg);
}

.mag-control:hover,
.mag-control:focus-visible {
  left: calc(2.3% + 4px);
  box-shadow: 0 0 0 10px rgba(243, 235, 225, 0.25);
  outline: none;
}

.mag-control:hover::before {
  left: calc(-1 * max(2.5cqw, 20px) - 8px);
  width: calc(max(2.5cqw, 20px) + 8px);
}

.mag-control--next {
  left: auto;
  right: 2.3%;
}

.mag-control--next::before {
  left: auto;
  right: calc(-1 * max(2.5cqw, 20px));
}

.mag-control--next::after {
  transform: translate(-70%, -50%) rotate(-135deg);
}

.mag-control--next:hover,
.mag-control--next:focus-visible {
  left: auto;
  right: calc(2.3% + 4px);
}

.mag-control--next:hover::before {
  left: auto;
  right: calc(-1 * max(2.5cqw, 20px) - 8px);
}

/* ---- Spread indicator ------------------------------------------------ */

.mag-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 34px;
}

.mag-dots button {
  width: 28px;
  height: 14px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

.mag-dots button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--ink);
  opacity: 0.3;
  transition: opacity 0.3s, height 0.3s;
}

.mag-dots button.is-current::after {
  opacity: 1;
  height: 2px;
}

/* ---- Small screens --------------------------------------------------- */

@media (max-width: 700px) {
  .mag-book,
  .magazine:empty::before {
    aspect-ratio: 2 / 1.45;
  }

  .mag-spine { width: 34%; }
  .mag-spine--boxed { width: 40%; }
  .mag-spread--panel .mag-spine { left: 78%; }
  .mag-spread--stack .mag-spine { width: 38%; }
  .mag-stack__img { max-height: 32cqw; }
  .mag-spine h4 { font-size: 4cqw; }
  .mag-headline { font-size: 5.4cqw; }
  .mag-offset { width: 38%; top: 58%; }
  .mag-inset,
  .mag-logo,
  .mag-footer { display: none; }
  .mag-quote { font-size: 3.4cqw; width: 32%; }
  .mag-section { width: 36% !important; left: 6% !important; }
  .mag-offset p,
  .mag-section p,
  .mag-spine p { display: none; }
  .mag-section h2 { font-size: 3.2cqw; }
  .mag-section--2 { top: 36%; }
  .mag-section--3 { top: 58%; }
  .mag-centerimage { width: 26%; left: 62%; }
}

@media (prefers-reduced-motion: reduce) {
  .magazine { --mag-flip: 0.01s; }
  .magazine * { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}