/* ⚠️ PROTECTED — 임의 수정 금지. 어워드 품질 프레임워크 정본. 변경하려면 먼저 사용자 승인 → chmod u+w → 수정 → node tools/check-protected.mjs --update → chmod 444. 상세: PROTECTED.md */
/* House Imagery Treatment — art-direction utilities for real photography.
   Requires: tokens/dist/tokens.css (for CSS custom properties).
   No framework, no bundler, no external dependencies.
   All treatments are token-driven; override --img-* vars per element to
   specialise without touching the global theme.

   Usage:
     <link rel="stylesheet" href="/tokens/dist/tokens.css">
     <link rel="stylesheet" href="/tools/imagery/treatment.css">

   Pair with treatment.js for fine-grained JS control (duotone colors, grain
   opacity, ken-burns parameters). CSS classes here are the zero-JS path. */

/* ── layer declaration ──────────────────────────────────────────────────── */
/* Runs inside @layer house.imagery so it stays below house.components and
   can be overridden from host pages without !important. If the host does not
   declare @layer at all, this layer sorts last = still overridable. */
@layer house.imagery {

  /* ── element-scoped custom properties (overridable per element) ── */
  .house-img,
  [class*="house-img--"] {
    /* duotone colors (override per element for a different palette) */
    --img-shadow:    var(--c-neutral-ink);      /* dark anchor */
    --img-highlight: var(--accent-signature);   /* light anchor */
    --img-grain-opacity: 0.14;
    --img-grain-size: 180px;                    /* fractalNoise tile size */
    --img-kb-duration: 14s;                     /* ken-burns cycle */
    --img-kb-scale: 1.08;                       /* end scale */
    --img-fade-size: 28%;                       /* edge-fade radius */
    /* object-on-white */
    --img-object-bg:      var(--bg-raised);
    --img-object-padding: var(--space-7);
    --img-object-radius:  var(--radius-xl);
  }

  /* ─────────────────────────────────────────────────────────────────────
     1. BLEED — full-bleed hero, covers its parent absolutely
     ───────────────────────────────────────────────────────────────────── */
  .house-img--bleed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* ensures it stays behind content layers */
    z-index: 0;
    pointer-events: none;
    display: block;
    /* smooth reveal on load */
    opacity: 0;
    transition: opacity var(--motion-reveal, 700ms cubic-bezier(0.16, 1, 0.3, 1));
  }
  .house-img--bleed.is-loaded,
  .house-img--bleed[data-loaded] {
    opacity: 1;
  }
  /* parent that uses --bleed must be position:relative (or absolute/fixed) */
  .house-img-host {
    position: relative;
    overflow: hidden;
    isolation: isolate; /* new stacking context so content overlaps correctly */
  }

  /* ─────────────────────────────────────────────────────────────────────
     2. GRAIN — film grain overlay (SVG fractalNoise, static, no animation)
        Implemented as a pseudo-element so it requires no extra DOM node.
        The SVG data-URI is an inline fractalNoise filter — no external file.
     ───────────────────────────────────────────────────────────────────── */

  /* The grain class targets an <img> wrapper div, not the img directly,
     because ::after on a replaced element has inconsistent browser support.
     Wrap: <div class="house-img-grain-wrap"><img …></div>
     Or use treatment.js applyGrain() which handles the wrapper automatically. */
  .house-img-grain-wrap {
    position: relative;
    display: inline-block; /* shrinks to image size */
    line-height: 0;        /* no phantom space below img */
  }
  .house-img-grain-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    /* SVG fractalNoise grain — static, no GIF */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
    background-size: var(--img-grain-size, 180px) var(--img-grain-size, 180px);
    opacity: var(--img-grain-opacity, 0.14);
    mix-blend-mode: overlay;
    pointer-events: none;
    border-radius: inherit;
  }

  /* Shorthand class: apply to the img itself — treatment.js will auto-wrap */
  .house-img--grain {
    /* flag read by treatment.js; CSS-only grain requires the wrapper above */
    --img-has-grain: 1;
  }

  /* ─────────────────────────────────────────────────────────────────────
     3. MONO — desaturate to greyscale
        CSS filter: grayscale(). Pure CSS, no wrapper needed.
     ───────────────────────────────────────────────────────────────────── */
  .house-img--mono {
    filter: grayscale(1);
    transition: filter var(--motion-hover, 200ms cubic-bezier(0.16, 1, 0.3, 1));
  }
  .house-img--mono:hover {
    filter: grayscale(0);
  }
  /* no-hover variant: stays mono always */
  .house-img--mono-static {
    filter: grayscale(1);
  }

  /* ─────────────────────────────────────────────────────────────────────
     4. DUOTONE — two-tone colour mapping via CSS filter
        CSS-only duotone uses sepia + hue-rotate + saturate as an approximation.
        For precision (feColorMatrix), use treatment.js applyDuotone().

        CSS-only path maps to accent + ink palette:
          sepia(1) → warm monochrome
          hue-rotate(Xdeg) → shift toward accent hue (blue=210°)
          saturate(Y) → intensity

        Override --img-dt-hue and --img-dt-saturation per element.
     ───────────────────────────────────────────────────────────────────── */
  .house-img--duotone {
    --img-dt-hue:        210deg;  /* blue accent zone; override per element */
    --img-dt-saturation: 2.4;
    filter: sepia(1) hue-rotate(var(--img-dt-hue)) saturate(var(--img-dt-saturation));
  }

  /* Accent-signature shorthand — hue is approximately the blue token */
  .house-img--duotone-accent {
    filter: sepia(1) hue-rotate(210deg) saturate(2.6);
  }

  /* Warm (orange accent) variant */
  .house-img--duotone-warm {
    filter: sepia(1) hue-rotate(340deg) saturate(1.8);
  }

  /* ─────────────────────────────────────────────────────────────────────
     5. OBJECT-ON-WHITE — product / portrait on neutral background
        Wraps the image in a padded container; image is centered.
        Works on <img> directly — no wrapper needed for the framing.
     ───────────────────────────────────────────────────────────────────── */
  .house-img--object {
    display: block;
    background: var(--img-object-bg);
    padding: var(--img-object-padding);
    border-radius: var(--img-object-radius);
    object-fit: contain;   /* don't crop the subject */
    /* soft drop shadow — reads expensive, avoids CSS box-shadow */
    box-shadow:
      0 2px  8px  rgba(0,0,0,0.06),
      0 8px  32px rgba(0,0,0,0.08),
      0 24px 80px rgba(0,0,0,0.06);
  }

  /* ─────────────────────────────────────────────────────────────────────
     6. KEN-BURNS — slow scale + slight pan (prefers-reduced-motion: skips)
        Applied as a CSS animation; no JS needed.
        The parent must be overflow:hidden to clip the scaled image.
     ───────────────────────────────────────────────────────────────────── */
  @keyframes house-kenburns {
    from { transform: scale(1)    translate(0,    0);     }
    to   { transform: scale(var(--img-kb-scale, 1.08)) translate(-1%, -0.5%); }
  }

  .house-img--kenburns {
    animation:
      house-kenburns var(--img-kb-duration, 14s)
      cubic-bezier(0.25, 0, 0.75, 1)
      infinite alternate both;
    will-change: transform;
  }

  /* Hard stop for prefers-reduced-motion — no static frame needed,
     just no animation. The image remains fully visible. */
  @media (prefers-reduced-motion: reduce) {
    .house-img--kenburns {
      animation: none;
    }
  }

  /* ─────────────────────────────────────────────────────────────────────
     7. FADE-EDGE — radial mask, edges dissolve to background
        Creates an immersive "bleeding into the page" effect.
        Uses mask-image with a radial gradient.
     ───────────────────────────────────────────────────────────────────── */
  .house-img--fade-edge {
    -webkit-mask-image: radial-gradient(
      ellipse at center,
      black calc(100% - var(--img-fade-size, 28%)),
      transparent 100%
    );
    mask-image: radial-gradient(
      ellipse at center,
      black calc(100% - var(--img-fade-size, 28%)),
      transparent 100%
    );
  }

  /* ─────────────────────────────────────────────────────────────────────
     8. FADE-BOTTOM — linear mask: bottom half fades out
        Use for hero images where type sits below.
     ───────────────────────────────────────────────────────────────────── */
  .house-img--fade-bottom {
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image:         linear-gradient(to bottom, black 50%, transparent 100%);
  }

  /* ─────────────────────────────────────────────────────────────────────
     9. PLACEHOLDER — visible scaffold while real image is sourced
        Shows background with dashed border — signals "image needed here".
        Never ship this as a finished state.
     ───────────────────────────────────────────────────────────────────── */
  .house-img--placeholder {
    display: block;
    background: var(--bg-raised);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-md);
    /* screen-reader hint */
    position: relative;
    overflow: hidden;
  }
  .house-img--placeholder::before {
    content: "[ IMAGE ]";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--text-mono-label-size);
    letter-spacing: var(--text-mono-label-tracking);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  /* ─────────────────────────────────────────────────────────────────────
     10. COMBINATION HELPERS — common award-site patterns
     ───────────────────────────────────────────────────────────────────── */

  /* emmit-fenn pattern: bleed + duotone-accent + grain */
  .house-img--emmit {
    filter: sepia(1) hue-rotate(210deg) saturate(2.6);
    --img-has-grain: 1;
  }

  /* inside-kristallnacht pattern: bleed + mono-static (no hover) */
  .house-img--editorial {
    filter: grayscale(1);
  }

  /* polene pattern: object-on-white + warm grain */
  .house-img--luxury {
    display: block;
    background: var(--c-neutral-50, #FAFAF7);
    padding: var(--img-object-padding);
    border-radius: var(--img-object-radius);
    object-fit: contain;
    box-shadow:
      0 2px  8px  rgba(0,0,0,0.04),
      0 8px  32px rgba(0,0,0,0.06);
    --img-has-grain: 1;
    --img-dt-hue: 340deg;
    --img-grain-opacity: 0.10;
  }

} /* end @layer house.imagery */