/*
 * Painted Academy layer (shared by the legacy Home renderer and Website Studio v2).
 * Plan: PLAN_Home_Page_Painted_Redesign_AllThemes.md (sections 5-7, D3 hybrid painting).
 *
 * Opt-in only: rules apply to elements that carry data-paint="...", so pages whose markup
 * does not opt in look exactly as before. Colours come from the theme's CSS custom
 * properties with a solid fallback, and nothing here animates a filter or a box-shadow.
 */

@layer paint {
  /* Colour wash: a static, pre-blurred pseudo-element bleeding past the section edge. */
  [data-paint~="wash"] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  [data-paint~="wash"]::before {
    content: "";
    position: absolute;
    inset: -12% -8%;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(60% 55% at 85% 20%, color-mix(in oklch, var(--ws-accent, #c89b3c) 28%, transparent), transparent 70%),
      radial-gradient(50% 50% at 10% 90%, color-mix(in oklch, var(--ws-primary, #0b3d2e) 22%, transparent), transparent 72%);
    filter: blur(40px);
  }

  /* Paper grain: a low-alpha tile, single static layer, no animation. */
  [data-paint~="grain"] {
    position: relative;
  }

  [data-paint~="grain"]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.07;
    background: repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      color-mix(in oklch, var(--ws-text, #1f2937) 9%, transparent) 3px 4px
    );
  }

  /* Brush-stroke divider: a masked gradient rule, no image request. */
  [data-paint~="divider"] {
    height: 14px;
    border: 0;
    background: linear-gradient(
      90deg,
      transparent,
      var(--ws-accent, #c89b3c) 18%,
      var(--ws-accent, #c89b3c) 82%,
      transparent
    );
    -webkit-mask: linear-gradient(#000 0 0) 0 50% / 100% 60% no-repeat;
            mask: linear-gradient(#000 0 0) 0 50% / 100% 60% no-repeat;
    opacity: 0.85;
  }

  /* Painterly category cover, drawn in CSS when no painting is set (plan section 6: the
     CSS "cover" option). Built only from theme colours; no image request. */
  [data-paint~="cover"] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    background:
      radial-gradient(circle at 28% 26%, color-mix(in oklch, var(--ws-accent, #c89b3c) 70%, #fff) 0 16%, transparent 17%),
      linear-gradient(135deg, var(--ws-primary, #0b3d2e) 0%, color-mix(in oklch, var(--ws-primary, #0b3d2e) 70%, #000) 100%);
  }

  [data-paint~="cover"]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.08;
    background: repeating-linear-gradient(45deg, transparent 0 6px, #fff 6px 7px);
  }

  /* Gold-rule draw and reveal: transform and opacity only, and only with motion allowed. */
  @media (prefers-reduced-motion: no-preference) {
    [data-paint~="reveal"] {
      animation: paint-reveal 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }
  }

  @keyframes paint-reveal {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Solid fallback for browsers without color-mix(): the wash is simply not drawn. */
@supports not (background: color-mix(in oklch, red 50%, blue)) {
  [data-paint~="wash"]::before { display: none; }
}