/*
 * Premium image-world activation layer.
 * New photographic slots remain completely inert while marked "pending".
 * After the matching assets have been produced, change the slot to
 * data-image-status="ready"; image-world.js then loads the correct size.
 */

:root {
  --shot-radius: clamp(22px, 3vw, 46px);
  --shot-shadow: 0 44px 120px rgba(5, 8, 16, .25);
  --shot-ease: cubic-bezier(.22, .72, .18, 1);
}

/*
 * No real photography exists for these demos, and none will be produced —
 * so "pending" is treated as a first-class rendered state (a designed
 * gradient/texture panel) rather than an invisible one. This keeps every
 * page visually complete instead of leaving blank gaps where a photo
 * would have gone. Per-branch accent colors are set below via
 * [data-showroom-theme]; the fallback here is a neutral steel tone.
 */
.premium-shot[data-image-status="pending"],
.premium-shot[data-image-status="error"] {
  position: relative;
  display: block;
  min-height: clamp(280px, 42vw, 660px);
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--shot-radius);
  background:
    radial-gradient(120% 130% at 18% 12%, var(--shot-fallback-a, rgba(255, 255, 255, .16)), transparent 55%),
    radial-gradient(110% 120% at 88% 92%, var(--shot-fallback-b, rgba(90, 105, 130, .35)), transparent 60%),
    linear-gradient(145deg, rgba(123, 136, 155, .18), rgba(9, 13, 22, .82));
  box-shadow: var(--shot-shadow);
}
.premium-shot[data-image-status="pending"]::before,
.premium-shot[data-image-status="error"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .5;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 28px);
}

/* Per-branch fallback tint for the pending-shot panels, matched to each
   demo's own established palette (see branch-experience.css). */
[data-showroom-theme="salon"] { --shot-fallback-a: rgba(255, 255, 255, .1); --shot-fallback-b: rgba(120, 40, 58, .38); }
[data-showroom-theme="physio"] { --shot-fallback-a: rgba(204, 231, 222, .3); --shot-fallback-b: rgba(30, 90, 76, .4); }
[data-showroom-theme="garage"] { --shot-fallback-a: rgba(255, 200, 60, .14); --shot-fallback-b: rgba(20, 26, 34, .55); }
[data-showroom-theme="clean"] { --shot-fallback-a: rgba(160, 232, 245, .28); --shot-fallback-b: rgba(15, 60, 82, .4); }

.premium-shot[data-image-status="ready"] {
  position: relative;
  display: block;
  min-height: clamp(280px, 42vw, 660px);
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--shot-radius);
  background:
    radial-gradient(circle at 72% 22%, rgba(255, 255, 255, .16), transparent 28%),
    linear-gradient(145deg, rgba(123, 136, 155, .18), rgba(9, 13, 22, .72));
  box-shadow: var(--shot-shadow);
}

.premium-shot__media {
  position: absolute;
  z-index: 0;
  inset: -3%;
  display: block;
  background-image: var(--shot-image, none);
  background-position: var(--shot-position, 50% 50%);
  background-size: cover;
  opacity: 0;
  transform: scale(1.055) translate3d(0, var(--premium-media-y, 0), 0);
  transition: opacity .72s var(--shot-ease), filter .8s var(--shot-ease), transform 1s var(--shot-ease);
  will-change: transform;
}

.premium-shot.is-shot-loaded .premium-shot__media { opacity: 1; }

.premium-shot::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 9, 15, .04), transparent 45%, rgba(6, 9, 15, .32)),
    linear-gradient(115deg, rgba(255, 255, 255, .1), transparent 26%);
}

.image-world-collage {
  position: relative;
  z-index: 3;
  width: min(1280px, calc(100% - clamp(32px, 8vw, 128px)));
  margin: clamp(48px, 7vw, 104px) auto;
  min-height: clamp(470px, 61vw, 780px);
  perspective: 1500px;
}

.image-world-collage .premium-shot { position: absolute; }
.image-world-collage .premium-shot--primary { inset: 2% 18% 8% 0; transform: rotateY(2.5deg) rotateZ(-.35deg); }
.image-world-collage .premium-shot--secondary { z-index: 2; right: 0; bottom: 0; width: min(38%, 440px); min-height: 48%; transform: translateZ(60px) rotateY(-4deg) rotateZ(1.25deg); }

.image-world-seam {
  position: relative;
  z-index: 3;
  width: min(1500px, calc(100% - clamp(24px, 5vw, 80px)));
  margin: clamp(-30px, -2vw, -8px) auto clamp(-30px, -2vw, -8px);
  padding: clamp(20px, 3vw, 46px) 0;
  pointer-events: none;
}

.image-world-seam .premium-shot {
  min-height: clamp(420px, 56vw, 810px);
  border-radius: clamp(30px, 5vw, 76px);
  clip-path: inset(0 round clamp(30px, 5vw, 76px));
  mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.image-world-seam .premium-shot::after {
  background: linear-gradient(180deg, rgba(7, 10, 16, .22), transparent 28%, transparent 72%, rgba(7, 10, 16, .32));
}

.image-world-inline {
  position: relative;
  z-index: 4;
  width: min(1220px, calc(100% - clamp(32px, 8vw, 128px)));
  margin: clamp(42px, 6vw, 88px) auto;
}

.image-world-inline .premium-shot { min-height: clamp(360px, 48vw, 650px); }

.image-world-cta-shot {
  position: absolute !important;
  z-index: 0;
  inset: -12% -3% !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 100%);
}

.image-world-cta-shot::after {
  background: linear-gradient(90deg, rgba(7, 10, 16, .82), rgba(7, 10, 16, .4) 55%, rgba(7, 10, 16, .7));
}

.has-image-world > :not(.premium-shot):not([data-image-group]) { position: relative; z-index: 2; }

/* Salon: the photographs become the lookbook's material, not another card row. */
.salon-look { isolation: isolate; }
.salon-look .premium-shot {
  position: absolute;
  z-index: 0;
  inset: 0;
  min-height: 0;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
}
.salon-look .premium-shot::after { background: linear-gradient(180deg, transparent 40%, rgba(18, 12, 14, .76)); }
.salon-look > span:not(.premium-shot) { position: relative; z-index: 3; }
.salon-services .image-world-inline .premium-shot { --shot-position: 50% 42%; }
.salon-cta.has-image-world { overflow: hidden; isolation: isolate; }
.salon-cta .image-world-cta-shot::after { background: linear-gradient(90deg, rgba(29, 20, 23, .9), rgba(29, 20, 23, .46) 63%, rgba(29, 20, 23, .72)); }
.salon-cta.has-image-world .experience-section-head { color: #fff; }
.salon-cta.has-image-world .experience-section-head p { color: rgba(255, 255, 255, .88); opacity: 1; }
.salon-cta.has-image-world .experience-index { color: #f0d8d4; opacity: 1; }

/* Physio: calm asymmetry with room for the information architecture. */
.physio-symptoms .image-world-collage .premium-shot--primary { inset: 0 22% 8% 0; }
.physio-symptoms .image-world-collage .premium-shot--secondary { width: 34%; bottom: 2%; }
.physio-path .image-world-collage { min-height: clamp(430px, 54vw, 680px); }
.physio-philosophy-visual:not(.has-ready-shot) { display: contents; }
.physio-philosophy-visual.has-ready-shot { position: relative; min-height: clamp(420px, 42vw, 610px); display: grid; place-items: center; }
.physio-philosophy-visual > .premium-shot { position: absolute; inset: 0; min-height: 100%; border-radius: 50% 50% 30px 30px; }
.physio-philosophy-visual.has-ready-shot .physio-pulse { position: absolute; z-index: 2; right: -5%; bottom: -3%; width: 34%; opacity: .82; }
.physio-cta.has-image-world { overflow: hidden; isolation: isolate; }
.physio-cta .image-world-cta-shot::after { background: linear-gradient(90deg, rgba(21, 57, 54, .92), rgba(21, 57, 54, .4) 66%, rgba(21, 57, 54, .68)); }
.physio-cta.has-image-world .experience-section-head { color: #fff; }
.physio-cta.has-image-world .experience-section-head p { color: rgba(255, 255, 255, .88); opacity: 1; }
.physio-cta.has-image-world .experience-index { color: #bfe6de; opacity: 1; }

/* Automotive: larger mechanical frames and foreground instrument detail. */
.garage-bay { isolation: isolate; }
.garage-bay > .premium-shot { position: absolute; z-index: 1; inset: 0; min-height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.garage-bay > .premium-shot::after { background: linear-gradient(0deg, rgba(4, 6, 9, .76), transparent 58%); }
.garage-bay:has(> .premium-shot.is-shot-loaded)::after { z-index: 3; }
.garage-live .image-world-collage { width: 100%; margin-inline: 0; }
.garage-cta.has-image-world { overflow: hidden; isolation: isolate; }
.garage-cta .image-world-cta-shot::after { background: linear-gradient(90deg, rgba(5, 7, 10, .94), rgba(5, 7, 10, .5) 58%, rgba(5, 7, 10, .76)); }
.garage-cta.has-image-world .experience-section-head { color: #fff; }
.garage-cta.has-image-world .experience-section-head p { color: rgba(255, 255, 255, .82); opacity: 1; }
.garage-cta.has-image-world .experience-index { color: #ffc928; opacity: 1; }

/* Cleaning: airy precision, bright architectural images and restrained depth. */
.clean-quality-visual:not(.has-ready-shot) { display: contents; }
.clean-quality-visual.has-ready-shot { position: relative; min-height: clamp(520px, 50vw, 720px); }
.clean-quality-visual .clean-protocol { position: relative; z-index: 3; }
.clean-quality-visual > .premium-shot--primary { position: absolute; inset: 0 16% 10% 0; min-height: 100%; }
.clean-quality-visual > .premium-shot--secondary { position: absolute; z-index: 2; right: 0; bottom: 0; width: 38%; min-height: 42%; }
.clean-quality-visual.has-ready-shot .clean-protocol { width: min(76%, 680px); margin-left: auto; padding-top: clamp(260px, 27vw, 390px); }
.clean-quality-visual .clean-protocol { backdrop-filter: none; -webkit-backdrop-filter: none; }
.clean-quality-visual .clean-protocol article { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.clean-cta.has-image-world { overflow: hidden; isolation: isolate; }
.clean-cta .image-world-cta-shot::after { background: linear-gradient(90deg, rgba(7, 47, 58, .92), rgba(7, 47, 58, .42) 65%, rgba(7, 47, 58, .64)); }
.clean-cta.has-image-world .experience-section-head { color: #fff; }
.clean-cta.has-image-world .experience-section-head p { color: rgba(255, 255, 255, .88); opacity: 1; }
.clean-cta.has-image-world .experience-index { color: #c9f2f4; opacity: 1; }

/* Existing multi-page showrooms only receive the two documented gap-fill scenes. */
[data-showroom-theme="handwerk"] .contact-image-world { align-self: stretch; min-height: 600px; margin: 0; width: 100%; }
[data-showroom-theme="handwerk"] .contact-image-world .premium-shot--primary { inset: 0 8% 12% 0; }
[data-showroom-theme="handwerk"] .contact-image-world .premium-shot--secondary { width: 38%; }
[data-showroom-theme="handwerk"] .contact-hero.has-image-world { grid-template-columns: minmax(280px, .78fr) minmax(320px, .72fr) minmax(380px, 1fr); gap: clamp(28px, 4vw, 72px); }
[data-showroom-theme="gastro"] .image-world-seam .premium-shot { --shot-position: 50% 58%; }
[data-showroom-theme="gastro"] .gastro-kitchen-image-world { perspective: 1400px; }
[data-showroom-theme="gastro"] .gastro-kitchen-image-world .premium-shot { width: min(620px, 72%); min-height: clamp(560px, 70vw, 820px); margin-left: 9%; transform: rotateY(3deg) rotateZ(calc(-.7deg + var(--gastro-tilt, 0deg))); --shot-position: 50% 48%; }
[data-showroom-theme="gastro"] .gastro-kitchen-image-world::after { content: ""; position: absolute; z-index: -1; right: 5%; top: 14%; width: min(52vw, 680px); aspect-ratio: 1; border: 1px solid rgba(185, 101, 69, .22); border-radius: 50%; box-shadow: 0 0 100px rgba(185, 101, 69, .14); }
[data-showroom-theme="gastro"] .reservation-image-world { width: min(1220px, calc(100% - clamp(32px, 8vw, 128px))); margin: clamp(36px, 6vw, 76px) auto 0; }
[data-showroom-theme="gastro"] .reservation-image-world .premium-shot { min-height: clamp(350px, 48vw, 620px); --shot-position: 50% 48%; }

@media (max-width: 900px) {
  .image-world-collage { width: min(100% - 32px, 760px); min-height: auto; display: grid; gap: 16px; }
  .image-world-collage .premium-shot,
  .image-world-collage .premium-shot--primary,
  .image-world-collage .premium-shot--secondary {
    position: relative;
    inset: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    min-height: clamp(310px, 76vw, 520px);
    transform: none;
  }
  .image-world-collage .premium-shot--secondary { width: min(72%, 480px); margin: -82px 0 0 auto; }
  .physio-philosophy-visual.has-ready-shot .physio-pulse { right: 1%; bottom: 2%; }
  .clean-quality-visual.has-ready-shot .clean-protocol { width: 88%; padding-top: clamp(240px, 53vw, 390px); }
  [data-showroom-theme="handwerk"] .contact-image-world { min-height: auto; }
  [data-showroom-theme="handwerk"] .contact-hero.has-image-world { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  :root { --shot-radius: 22px; --shot-shadow: 0 26px 70px rgba(5, 8, 16, .2); }
  .image-world-seam { width: calc(100% - 20px); padding-block: 12px; }
  .image-world-seam .premium-shot { min-height: 78vw; border-radius: 28px; clip-path: inset(0 round 28px); }
  .image-world-inline { width: calc(100% - 32px); }
  .image-world-collage .premium-shot--secondary { width: 84%; margin-top: -48px; }
  .physio-philosophy-visual { min-height: 112vw; }
  .physio-philosophy-visual.has-ready-shot .physio-pulse { width: 38%; }
  .clean-quality-visual { min-height: auto; display: grid; gap: 16px; }
  .clean-quality-visual > .premium-shot--primary,
  .clean-quality-visual > .premium-shot--secondary { position: relative; inset: auto; right: auto; bottom: auto; width: 100%; min-height: 74vw; }
  .clean-quality-visual > .premium-shot--secondary { width: 78%; margin: -52px 0 0 auto; }
  .clean-quality-visual.has-ready-shot .clean-protocol { width: 100%; padding-top: 0; }
  .image-world-cta-shot { inset: -5% -8% !important; }
  .image-world-cta-shot::after { background: linear-gradient(180deg, rgba(7, 10, 16, .64), rgba(7, 10, 16, .88)) !important; }
  [data-showroom-theme="gastro"] .gastro-kitchen-image-world .premium-shot { width: 88%; min-height: 122vw; margin-left: 0; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-shot__media { transform: scale(1.015) !important; transition: opacity .2s ease !important; will-change: auto !important; }
}