/* zheenga — depth layer
 *
 * Off    → no change (flat editorial)
 * Paper  → layered shadows on cards, edge highlight (top) + bottom shadow,
 *          hover lift, photo cursor-tilt (JS — see depth.js)
 * Pressed → everything in Paper + letterpress feel on buttons and display
 *          italic accents
 *
 * Print depth, not screen depth. Shadows are warm-tinted (rgba of the
 * oxblood deep), highlights cream — so the language matches the parchment
 * surface rather than fighting it.
 */

/* ─── 1. Paper: cards ─────────────────────────────────────────── */
body[data-depth="paper"] .event-card,
body[data-depth="paper"] .artist-card,
body[data-depth="paper"] .moment,
body[data-depth="paper"] .explore-card,
body[data-depth="paper"] .trend-row,
body[data-depth="paper"] .mini-event-row,
body[data-depth="paper"] .review,
body[data-depth="paper"] .venue-card,
body[data-depth="paper"] .auth-card,
body[data-depth="pressed"] .event-card,
body[data-depth="pressed"] .artist-card,
body[data-depth="pressed"] .moment,
body[data-depth="pressed"] .explore-card,
body[data-depth="pressed"] .trend-row,
body[data-depth="pressed"] .mini-event-row,
body[data-depth="pressed"] .review,
body[data-depth="pressed"] .venue-card,
body[data-depth="pressed"] .auth-card {
  box-shadow:
    /* Ambient — soft, broad lift off the page */
    0 10px 28px rgba(59, 23, 18, 0.09),
    /* Contact — tight, anchors the card to the surface */
    0 2px 4px rgba(59, 23, 18, 0.06),
    /* Top inner highlight — paper edge catching light */
    inset 0 1px 0 rgba(255, 245, 232, 0.55),
    /* Bottom inner shadow — the underside of the paper */
    inset 0 -1px 0 rgba(59, 23, 18, 0.05);
  transition: box-shadow 280ms var(--ease-z), transform 280ms var(--ease-z);
}

/* Hover lift — picks the card up off the page slightly */
body[data-depth="paper"] .event-card:hover,
body[data-depth="paper"] .artist-card:hover,
body[data-depth="paper"] .explore-card:hover,
body[data-depth="paper"] .trend-row:hover,
body[data-depth="paper"] .mini-event-row:hover,
body[data-depth="pressed"] .event-card:hover,
body[data-depth="pressed"] .artist-card:hover,
body[data-depth="pressed"] .explore-card:hover,
body[data-depth="pressed"] .trend-row:hover,
body[data-depth="pressed"] .mini-event-row:hover {
  transform: translateY(-3px);
  box-shadow:
    0 16px 38px rgba(59, 23, 18, 0.13),
    0 4px 8px rgba(59, 23, 18, 0.08),
    inset 0 1px 0 rgba(255, 245, 232, 0.65),
    inset 0 -1px 0 rgba(59, 23, 18, 0.06);
}

/* Cinematic theme runs a darker surface — soften the highlight so it
   doesn't read as a hard cream line on near-black. */
[data-theme="cinematic"] body[data-depth="paper"] .event-card,
[data-theme="cinematic"] body[data-depth="paper"] .artist-card,
[data-theme="cinematic"] body[data-depth="paper"] .moment,
[data-theme="cinematic"] body[data-depth="paper"] .explore-card,
[data-theme="cinematic"] body[data-depth="paper"] .trend-row,
[data-theme="cinematic"] body[data-depth="paper"] .mini-event-row,
[data-theme="cinematic"] body[data-depth="paper"] .review,
[data-theme="cinematic"] body[data-depth="paper"] .venue-card,
[data-theme="cinematic"] body[data-depth="paper"] .auth-card,
[data-theme="cinematic"] body[data-depth="pressed"] .event-card,
[data-theme="cinematic"] body[data-depth="pressed"] .artist-card,
[data-theme="cinematic"] body[data-depth="pressed"] .moment,
[data-theme="cinematic"] body[data-depth="pressed"] .explore-card,
[data-theme="cinematic"] body[data-depth="pressed"] .trend-row,
[data-theme="cinematic"] body[data-depth="pressed"] .mini-event-row,
[data-theme="cinematic"] body[data-depth="pressed"] .review,
[data-theme="cinematic"] body[data-depth="pressed"] .venue-card,
[data-theme="cinematic"] body[data-depth="pressed"] .auth-card {
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 220, 196, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20);
}

/* ─── 2. Paper: photo tilt host elements ──────────────────────── */
/* JS sets the transform per-frame on hover; the class is just a marker
   so we can set up the 3D context and a soft ease-back transition. */
.zh-tilt-host {
  transform-style: preserve-3d;
  transition: transform 320ms cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
}
/* Each tilt host's photo is normally clipped by the *parent* card's
   border-radius + overflow: hidden. But a 3D transform on the child
   (perspective + rotateX/Y) breaks that clip in every major browser:
   3D-transformed elements escape their 2D-clipping parent. The visible
   symptom is square photo corners showing through the card's rounded edge
   during hover-tilt. Fix: give the tilt host its own matching radii so it
   self-clips. Event/artist cards have rounded *top* corners (card body
   sits below); the spotlight hero is rounded on all four corners; the
   lineup photo is already a circle and needs no change. */
body[data-depth="paper"] .event-card-media,
body[data-depth="pressed"] .event-card-media,
body[data-depth="paper"] .artist-card-photo,
body[data-depth="pressed"] .artist-card-photo {
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  overflow: hidden;
}
body[data-depth="paper"] .spotlight-hero,
body[data-depth="pressed"] .spotlight-hero,
body[data-depth="paper"] .detail-hero,
body[data-depth="pressed"] .detail-hero {
  border-radius: var(--radius);
  overflow: hidden;
}
body[data-depth="paper"] .profile-photo-frame,
body[data-depth="pressed"] .profile-photo-frame {
  border-radius: inherit;
  overflow: hidden;
}
/* When depth is off, kill any lingering inline transform from the JS. */
body:not([data-depth="paper"]):not([data-depth="pressed"]) .zh-tilt-host {
  transform: none !important;
}

/* ─── 3. Pressed: buttons ─────────────────────────────────────── */
/* Hairline top highlight + bottom shadow → button looks pressed into the
   surface rather than floating on it. On :active, depresses 1px. */
body[data-depth="pressed"] .btn {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(20, 8, 12, 0.14),
    0 1px 2px rgba(59, 23, 18, 0.10);
  transition: transform 120ms var(--ease-z), box-shadow 200ms var(--ease-z), background 200ms, border-color 200ms, color 200ms;
}
body[data-depth="pressed"] .btn-primary {
  /* Primary already carries the orange glow; layer the embossed edges on top
     without clobbering the lift. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(120, 38, 14, 0.40),
    0 12px 28px rgba(223, 99, 55, 0.32);
}
body[data-depth="pressed"] .btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(20, 8, 12, 0.10),
    0 0 0 rgba(0, 0, 0, 0);
}
body[data-depth="pressed"] .btn-primary:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(120, 38, 14, 0.28),
    0 6px 14px rgba(223, 99, 55, 0.24);
}

/* ─── 4. Pressed: display italic emboss ───────────────────────── */
/* Letterpress feel ONLY on the italicized accent words in section heads
   over the light parchment. Dark heros skip it — there, the same shadow
   reads as glow rather than print. */
body[data-depth="pressed"] .section-head h2 em,
body[data-depth="pressed"] .moment h3 em,
body[data-depth="pressed"] .creator h2 em,
body[data-depth="pressed"] .profile-section h2 em {
  text-shadow:
    0 1px 0 rgba(255, 245, 232, 0.85),
    0 -1px 0 rgba(20, 8, 12, 0.08);
}
/* Cinematic flip — light surface treatment reverses on dark. */
[data-theme="cinematic"] body[data-depth="pressed"] .section-head h2 em,
[data-theme="cinematic"] body[data-depth="pressed"] .moment h3 em,
[data-theme="cinematic"] body[data-depth="pressed"] .creator h2 em,
[data-theme="cinematic"] body[data-depth="pressed"] .profile-section h2 em {
  text-shadow:
    0 -1px 0 rgba(255, 220, 196, 0.18),
    0 1px 0 rgba(0, 0, 0, 0.32);
}

/* ─── 5. Reduced-motion override ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body[data-depth="paper"] .event-card,
  body[data-depth="paper"] .artist-card,
  body[data-depth="paper"] .explore-card,
  body[data-depth="paper"] .trend-row,
  body[data-depth="paper"] .mini-event-row,
  body[data-depth="pressed"] .event-card,
  body[data-depth="pressed"] .artist-card,
  body[data-depth="pressed"] .explore-card,
  body[data-depth="pressed"] .trend-row,
  body[data-depth="pressed"] .mini-event-row {
    transition: box-shadow 0ms;
  }
  body[data-depth="paper"] .event-card:hover,
  body[data-depth="paper"] .artist-card:hover,
  body[data-depth="pressed"] .event-card:hover,
  body[data-depth="pressed"] .artist-card:hover {
    transform: none;
  }
  .zh-tilt-host {
    transition: transform 0ms;
  }
}