/* TECH JCORP magazine showcase. Loaded after pages.css on pages that show the magazine.
   Pairs with scripts/magazine.js, which turns the magazine when a visitor drags it.

   HOW IT IS BUILT
   The magazine is two cover images standing back to back, with two hairline edges between them.
   There is no 3D model. CSS 3D transforms place the faces, and the script only changes one number,
   the custom property --turn (the angle in degrees). Everything else is plain CSS.

   WHERE TO EDIT
   - Thickness ........ --magazine-thickness below (a share of the magazine height)
   - Size ............. --magazine-fill below (how much of the stage the magazine fills)
   - Cover shape ...... --magazine-ratio below (width divided by height of the cover image)
   - Glow colour ...... --magazine-glow below
   - Stage shape ...... the three media queries at the end
   - Spin speed, drag feel, pause time ... CONFIG at the top of scripts/magazine.js

   Every size is relative (em, rem, %, aspect-ratio, container units). Mobile first: the base rules are for
   phones, and the media queries add room on larger screens. */

.magazine-stage {
  --magazine-ratio: .75;        /* cover width divided by height. 3 by 4 is .75 */
  --magazine-thickness: .012;   /* a thin magazine. Raise it for a chunkier one */
  --magazine-fill: .94;         /* share of the free space the magazine fills */
  --magazine-glow: rgba(var(--accent-rgb), .35);

  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; aspect-ratio: 4 / 5; max-height: 85vh;
  background: var(--surface) url('../assets/techjungle-bg.jpg') center / cover no-repeat;
  border: .0625rem solid var(--line); border-radius: var(--r-lg);
}

/* Dark wash so the cover reads clearly, with a faint green light behind the magazine */
.magazine-stage::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 50% 52%, rgba(var(--accent-rgb), .16), transparent 70%),
    linear-gradient(180deg, rgba(9, 11, 10, .62), rgba(9, 11, 10, .82));
}

/* The viewer measures the free space, so the magazine can size itself from it (container units).
   The glow is a drop shadow on this flat parent, because a filter on the turning element would flatten the 3D. */
.magazine-viewer {
  position: absolute; inset: 4% 0 12%;   /* the space at the bottom is kept for the hint */
  container-type: size;
  filter: drop-shadow(0 0 1.25em var(--magazine-glow));
}

/* Holds the perspective and the gentle floating motion */
.magazine-scene {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  perspective: 70em;
  animation: magazine-float 5s ease-in-out infinite alternate;
}

/* The magazine itself. --turn is written by scripts/magazine.js. */
.magazine-book {
  --height: min(calc(100cqh * var(--magazine-fill)), calc(100cqw / var(--magazine-ratio) * .9));
  --width: calc(var(--height) * var(--magazine-ratio));
  --thickness: calc(var(--height) * var(--magazine-thickness));
  --turn: -25deg;

  position: relative; transform-style: preserve-3d;
  width: var(--width); height: var(--height);
  transform: rotateX(-5deg) rotateY(var(--turn));
  cursor: grab;
  touch-action: pan-y;               /* a vertical swipe still scrolls the page, a sideways drag turns the magazine */
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
.magazine-stage.is-dragging .magazine-book { cursor: grabbing; }
.magazine-book:focus-visible { outline: .125rem solid var(--accent); outline-offset: 1em; }

/* The two covers. backface-visibility hides a cover when it faces away, so only the near one shows. */
.magazine-face {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: .1em; background: var(--black);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  pointer-events: none;              /* so a drag is never taken over by the browser's image drag */
  -webkit-user-drag: none;
}
.magazine-face--front { transform: translateZ(calc(var(--thickness) / 2)); }
.magazine-face--back  { transform: rotateY(180deg) translateZ(calc(var(--thickness) / 2)); }

/* The two thin edges, which close the gap between the covers */
.magazine-edge {
  position: absolute; top: 0; left: 50%; height: 100%;
  width: var(--thickness); margin-left: calc(var(--thickness) / -2);
  background: #1c211e;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.magazine-edge--right { transform: rotateY(90deg)  translateZ(calc(var(--width) / 2)); }
.magazine-edge--left  { transform: rotateY(-90deg) translateZ(calc(var(--width) / 2)); }

.magazine-hint {
  position: absolute; inset: auto 0 .75em; z-index: 1;
  font-size: var(--size-xs); font-weight: 500; letter-spacing: .08em; text-align: center; line-height: var(--lh-small);
  color: var(--muted); pointer-events: none;
  transition: opacity .6s var(--fade-ease);
}
.magazine-stage.is-touched .magazine-hint { opacity: 0; }   /* the script adds is-touched after the first drag */

@keyframes magazine-float {
  from { transform: translateY(-1.5%); }
  to   { transform: translateY(1.5%); }
}

/* Tablet: a landscape stage that sits beside the text */
@media (min-width: 37.5em) {
  .magazine-stage { aspect-ratio: 4 / 3; }
}

/* Laptop: a square stage */
@media (min-width: 56.25em) {
  .magazine-stage { aspect-ratio: 1 / 1; max-height: none; }
}

/* Large desktop: a slightly wider stage */
@media (min-width: 75em) {
  .magazine-stage { aspect-ratio: 5 / 4; }
}

@media (prefers-reduced-motion: reduce) {
  .magazine-scene { animation: none; }
  .magazine-hint { transition: none; }
}