/* parts/photo.css: owned by the photo workstream. Loaded after styles.css.

   Photography and media treatment:
   1. One warm, film-like grade for every photographic image (filter + vignette + light grain).
   2. Art-directed crops (object-position) that favour details over wide scenes.
   3. Styling hooks for the optional hero video (see js/parts/photo.js and media/README.md).

   Everything is selector-driven (no markup changes) and GPU-cheap: one static filter per
   image, one static pseudo-element overlay per frame, no blend modes, no animation.
   Logos, favicons, UI icons and the poster-style graphic (interior-4.jpg) are excluded.

   To retune the grade for the real photos, edit only the variables below.
   To switch the whole treatment off, set --photo-grade: none and --photo-overlay: 0. */

:root {
  /* Warm, slightly deeper-than-neutral grade. Sepia is kept tiny so Flag Red stays red. */
  --photo-grade: contrast(1.06) saturate(0.95) sepia(0.07) brightness(0.97);
  /* 1 = overlay (vignette + grain) on, 0 = off */
  --photo-overlay: 1;
  /* Vignette depth at the corners, midnight-indigo tinted so shadows feel inked, not grey */
  --photo-vignette: rgba(10, 14, 32, 0.34);
  /* Film grain tile: inline SVG feTurbulence, ivory specks at very low alpha. 160px, static. */
  --photo-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.9  0 0 0 0 0.84  0.5 0 0 0 -0.19'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------------------------------------------------------------------------
   1. Grade
   --------------------------------------------------------------------------- */
img[src*="images/"]:not([src*="logo"]):not([src*="interior-4"]):not([data-ungraded]),
.uhero__frame video,
.photo-video {
  filter: var(--photo-grade);
}

.uhero__frame::before,
.uhero__orb::before,
.card__media::before,
.split-feature__media::before,
.duo__tile::before,
.tile::before,
.page-header__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--photo-overlay);
  background:
    var(--photo-grain),
    radial-gradient(ellipse at 50% 46%, rgba(0, 0, 0, 0) 52%, var(--photo-vignette) 100%);
  background-size: 160px 160px, 100% 100%;
}

.card__media,
.split-feature__media {
  position: relative;
}

.duo__tile::before,
.tile::before,
.page-header__bg::before {
  z-index: -1;
}

.uhero__frame::before,
.uhero__orb::before,
.card__media::before,
.split-feature__media::before {
  z-index: 1;
}

.uhero__orb::before {
  background:
    var(--photo-grain),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 55%, var(--photo-vignette) 100%);
  background-size: 160px 160px, 100% 100%;
}

/* ---------------------------------------------------------------------------
   2. Framing — object-fit: cover; positions keep faces / food / rooms in frame
   --------------------------------------------------------------------------- */

img[src*="images/"] {
  object-fit: cover;
}

/* Homepage hero: dining room → logo wall (PDF p02) */
.uhero__frame img[src$="images/hero-interior.jpg"] {
  object-position: 52% 46%;
}

/* Menu column: chopsticks / nigiri (PDF p03) — center the lift */
.menu-bar__photo img[src$="images/menu-food.jpg"],
.menu-bar__photo img[src$="images/menu-chopsticks.jpg"] {
  object-position: 50% 45%;
}

/* Bar column: bartender shake (PDF p03) — keep face + shaker */
.menu-bar__photo img[src$="images/bar-interior.jpg"],
.menu-bar__photo img[src$="images/bar-bartender.jpg"] {
  object-position: 50% 28%;
}

/* Designed to be experienced — PDF p05 woman.
   Source art crops eyes under a red beam; pin to TOP so nose/lips stay in frame
   (not chest). Portrait container is 3/4 in layout.css. */
.split-feature--plain .split-feature__media img[src$="images/experience-portrait.jpg"],
.split-feature__media img[src$="images/experience-portrait.jpg"] {
  object-position: 50% 0%;
  object-fit: cover;
}

/* Fullbleed: PDF p06 busy bar under lattice light */
.fullbleed img[src$="images/experience-bar.jpg"] {
  object-position: 50% 35%;
}

/* Happy Hour / Rare Hours glass (PDF p07) */
.split-feature__media img[src$="images/rare-hours-glass.jpg"] {
  object-position: 50% 40%;
}

/* Plan Your Visit duo — central bar / radial ceiling (PDF p07 tile) */
.duo__tile img[src$="images/plan-visit.jpg"],
.duo__tile img[src$="images/hero.jpg"] {
  object-position: 50% 42%;
}

/* About Explore the Menu — dumplings + cocktail (PDF p08) */
.duo__tile img[src$="images/explore-menu-dumplings.jpg"] {
  object-position: 50% 45%;
}

/* Wide bar interiors */
img[src$="images/bar-wide.jpg"],
img[src$="images/u-bar.jpg"],
img[src$="images/bar-lanterns.jpg"] {
  object-position: 48% 42%;
}

/* Banquette + red wall */
.split-feature__media img[src$="images/dining.jpg"],
.page-header__bg img[src$="images/dining.jpg"] {
  object-position: 50% 44%;
}

/* Orange / red grid wall */
img[src$="images/interior-5.jpg"] {
  object-position: 50% 42%;
}
.mega__promo img[src$="images/interior-5.jpg"],
.intro-split__photo img[src$="images/interior-5.jpg"] {
  object-position: 55% 40%;
}

/* Dining table set — portrait sources in landscape/duo/hero frames */
.card__media img[src$="images/atmosphere.jpg"],
.fullbleed img[src$="images/interior-2.jpg"],
.duo__tile img[src$="images/interior-2.jpg"],
.split-feature__media img[src$="images/atmosphere.jpg"],
.split-feature__media img[src$="images/interior-2.jpg"],
.page-header__bg img[src$="images/atmosphere.jpg"] {
  object-position: 50% 38%;
}

.card__media img[src$="images/hero.jpg"],
.page-header__bg img[src$="images/hero.jpg"],
.split-feature__media img[src$="images/hero.jpg"] {
  object-position: 50% 42%;
}

/* Noren curtain — keep fabric in frame */
img[src$="images/interior-3.jpg"] {
  object-position: 50% 32%;
}

/* Plates / textures */
img[src$="images/plate-3.jpg"],
img[src$="images/plate-2.jpg"],
img[src$="images/plate-1.jpg"] {
  object-position: 50% 50%;
}

/* About pair accents */
img[src$="images/dining-table.jpg"],
img[src$="images/table-detail.jpg"],
img[src$="images/server-apron.jpg"],
img[src$="images/portrait-collar.jpg"],
img[src$="images/portrait-bar.jpg"],
img[src$="images/window-logo.jpg"] {
  object-position: 50% 36%;
}
img[src$="images/window-street.jpg"] {
  object-position: 50% 42%;
}

/* Pair grids: keep both faces readable */
.split-feature__media--pair img {
  object-fit: cover;
  object-position: 50% 40%;
}

/* ---------------------------------------------------------------------------
   3. Hero video slot
   --------------------------------------------------------------------------- */
.uhero__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  background: transparent;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}

.uhero__frame.has-video video {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .uhero__frame video {
    display: none;
  }
}