/* ==========================================================================
   site.css — shared styles for the Perceptual Reality Lab website
   Loaded by every page after Tailwind. Just the handful of custom touches
   that Tailwind utilities can't express.
   ========================================================================== */

/* A hand-drawn-looking underline for one or two key words */
.squiggle {
  padding-bottom: 0.15em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='9' viewBox='0 0 120 9'%3E%3Cpath d='M2 6.5 Q 12 2.5, 24 5.5 T 46 5.5 T 68 5 T 90 5.5 T 118 4.5' fill='none' stroke='%23c2410c' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: 120px 9px;
}

/* The little eye in the nav blinks once in a while */
@keyframes eye-blink {
  0%, 94%, 100% { transform: scaleY(1); }
  97%           { transform: scaleY(0.1); }
}

.eye-mark {
  animation: eye-blink 7s ease-in-out infinite;
  transform-origin: center;
}

/* --- The hero -----------------------------------------------------------
   A dark band under the navigation holding images/forest-gabor.png: a birch
   forest that breaks apart into oriented Gabor patches, each taking its
   orientation and contrast from the trees it replaces. The image is opaque and
   its background is this same colour, so it has no visible frame. */

.hero-dark {
  background: #131a2a;
}

.hero-frame { position: relative; }

.hero-stage { position: relative; }

.hero-picture { display: block; }

.hero-art {
  display: block;
  width: 100%;
  height: auto;      /* the width/height attributes reserve space; this keeps the ratio */
}

.hero-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 33rem;
}

/* The squiggle needs a brighter orange to hold up on the dark ground */
.squiggle-bright {
  padding-bottom: 0.15em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='9' viewBox='0 0 120 9'%3E%3Cpath d='M2 6.5 Q 12 2.5, 24 5.5 T 46 5.5 T 68 5 T 90 5.5 T 118 4.5' fill='none' stroke='%23fb923c' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: 120px 9px;
}

/* --- The subpixel magnifier ---------------------------------------------
   The lens holds a full copy of the hero, scaled up and shifted so the point
   under the pointer sits at its centre, with an R/G/B stripe pattern
   multiplied over it at one triple per image pixel. On a dark ground that
   multiply is what a real screen does: unlit areas stay black, and only where
   the picture is bright do the subpixels come on. */
.loupe {
  position: absolute;
  left: var(--lx, -999px);
  top: var(--ly, -999px);
  width: 230px;
  height: 230px;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  overflow: hidden;
  background: #131a2a;
  border: 3px solid rgba(247, 243, 236, 0.85);
  box-shadow: 0 14px 34px -8px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.is-magnifying .loupe { opacity: 1; }

.loupe-content {
  position: absolute;
  inset: 0;
}

.loupe-grid {
  position: absolute;
  inset: 0;
  /* 15px pitch = one display pixel: three 5px stripes plus a 2px row gap
     drawn over them. Must match PIXEL in the magnifier script on the homepage. */
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 2px, transparent 2px 15px),
    repeating-linear-gradient(90deg, #f00 0 5px, #0f0 5px 10px, #00f 10px 15px);
  background-position: var(--gx, 0px) var(--gy, 0px);
  mix-blend-mode: multiply;
}

/* On narrow screens there is no room to overlay: .hero-copy stops being
   positioned and the artwork simply follows it in the flow, in its portrait
   version. The magnifier is left to pointer devices. */
@media (max-width: 767px) {
  .hero-stage { display: flex; flex-direction: column; }
  .hero-copy {
    position: static;
    max-width: none;
    margin-bottom: 1.25rem;
  }
}

/* Gentle lift on cards */
.card-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -10px rgba(28, 36, 51, 0.18);
}

/* Respect reduced-motion preferences. The lens tracks the pointer directly,
   so it stays, but nothing fades or drifts on its own. */
@media (prefers-reduced-motion: reduce) {
  .eye-mark { animation: none; }
  .loupe { transition: none; }
  .card-lift, .card-lift:hover { transform: none; transition: none; }
}