/* 3D presentation for the product frames.
 *
 * The effect 3dtransformer.com and brandbird.app sell: a screen rotated in
 * three dimensions so it reads as an object rather than a rectangle.
 *
 * Both of those tools rasterise — you upload a PNG and download a PNG. Here
 * the frames are live HTML, so the transform applies to real DOM: every label
 * stays pin-sharp at any zoom and on any density of screen, the text is
 * selectable, and it costs a few hundred bytes instead of a megabyte.
 *
 * Technique borrowed from screenshot-studio and open-screenshot-generator
 * (both MIT): perspective on the parent, rotateX/Y/Z on the child, and a
 * directional shadow that agrees with the rotation. The shadow is the part
 * people skip, and skipping it is why most CSS tilts look like a sticker.
 */

.p3 {
  perspective: 1600px;
  perspective-origin: 50% 40%;
}

.p3 > * {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .85s cubic-bezier(.16, .84, .3, 1),
              box-shadow .85s cubic-bezier(.16, .84, .3, 1);
}

/* ── presets ─────────────────────────────────────────────────────────────── */
/* Each pairs a rotation with a shadow thrown the opposite way. Rotating right
   means the light is on the left, so the shadow falls right, and vice versa.
   Getting that backwards is what makes a tilt look pasted on. */

.p3-hero > * {
  transform: rotateX(9deg) rotateY(-14deg) rotateZ(1.5deg) scale(.94);
  box-shadow:
    28px 22px 30px -18px rgba(8, 30, 28, .30),
    56px 48px 70px -28px rgba(8, 30, 28, .34),
    100px 90px 140px -50px rgba(8, 30, 28, .30);
}

.p3-mirror > * {
  transform: rotateX(9deg) rotateY(14deg) rotateZ(-1.5deg) scale(.94);
  box-shadow:
    -28px 22px 30px -18px rgba(8, 30, 28, .30),
    -56px 48px 70px -28px rgba(8, 30, 28, .34),
    -100px 90px 140px -50px rgba(8, 30, 28, .30);
}

/* Barely-there tilt, for a frame that has to stay readable while it sells. */
.p3-tilt > * {
  transform: rotateX(6deg) rotateZ(-.4deg) scale(.985);
  box-shadow:
    0 2px 6px rgba(8, 30, 28, .16),
    0 22px 44px -14px rgba(8, 30, 28, .26),
    0 70px 120px -50px rgba(8, 30, 28, .28);
}

/* Laid back like a page on a desk. Good above a heading. */
.p3-lay > * {
  transform: rotateX(26deg) rotateZ(-2deg) scale(.9);
  transform-origin: 50% 100%;
  box-shadow:
    0 -4px 10px rgba(8, 30, 28, .10),
    0 40px 60px -24px rgba(8, 30, 28, .36),
    0 90px 140px -60px rgba(8, 30, 28, .30);
}

/* ── flatten on approach ─────────────────────────────────────────────────── */
/* The tilt sells the object; flat sells the product. So it starts tilted and
   settles toward flat when it scrolls into view, or on hover for a pointer.
   Both routes land on the same transform, so they cannot fight each other. */
.p3.is-in > *,
.p3:hover > * {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
  box-shadow:
    0 2px 6px rgba(8, 30, 28, .14),
    0 18px 40px -16px rgba(8, 30, 28, .22),
    0 60px 110px -50px rgba(8, 30, 28, .24);
}

/* ── the ground ──────────────────────────────────────────────────────────── */
/* An object needs something to sit on. A soft radial pool under the frame does
   more for the illusion than another shadow layer on the frame itself. */
.p3-ground { position: relative; }
.p3-ground:after {
  content: '';
  position: absolute; left: 8%; right: 8%; bottom: -26px; height: 70px;
  background: radial-gradient(60% 50% at 50% 50%, rgba(8, 30, 28, .22), transparent 72%);
  filter: blur(14px);
  z-index: -1;
  pointer-events: none;
}

/* ── full-bleed frames ───────────────────────────────────────────────────── */
/* The industry screen deck runs edge to edge, so rotating it pushes a few
   pixels past the viewport and the whole page grows a horizontal scrollbar for
   as long as the tilt lasts (measured: 1428 vs 1425 while tilted, gone once it
   settles). Clip on x ONLY - overflow-x:hidden would silently make the section
   a scroll container on y as well, which is how sticky headers die. */
.os-sec { overflow-x: clip; }

/* ── accessibility and small screens ─────────────────────────────────────── */
/* A 3D tilt is decoration. Anyone who has asked for less motion gets a flat,
   still frame, and so does every phone: at 400px wide a rotated frame throws
   its own content off the side of the screen. */
@media (prefers-reduced-motion: reduce) {
  .p3 > * { transition: none; transform: none; }
}
@media (max-width: 860px) {
  .p3 > * {
    transform: none;
    box-shadow: 0 2px 6px rgba(8, 30, 28, .12), 0 16px 34px -14px rgba(8, 30, 28, .22);
  }
  .p3-ground:after { display: none; }
}