{# HyperWeave Divider Frame — specimen-faithful variants only.
   Geometry and palettes are resolved in Python; this template is a stencil.
   Extends document.svg.j2.  Context: ComposeSpec dict.

   Specimens (source of truth):
     block      → specs/components/dividers/block_divider.svg
     current    → specs/components/dividers/current_divider.svg
     takeoff    → specs/components/dividers/takeoff_divider.svg
     void       → specs/components/dividers/void_divider.svg
     zeropoint  → specs/components/dividers/zeropoint_divider.svg
#}
{% extends "document.svg.j2" %}

{# ═══════════════════════════════════════════════
   DEFS BLOCK — gradients, filters, patterns per variant
   ═══════════════════════════════════════════════ #}
{% block defs %}

{% if divider_variant == 'block' %}
  {# ── De Stijl #}
  <linearGradient id="{{ uid }}-rule-fade" x1="0%" y1="0%" x2="100%" y2="0%">
{% for stop in divider_rule_fade_stops %}
    <stop offset="{{ stop.offset }}" stop-color="{{ stop.color }}" stop-opacity="{{ stop.opacity }}"/>
{% endfor %}
  </linearGradient>
  <pattern id="{{ uid }}-dots" x="{{ divider_pattern_x }}" y="{{ divider_pattern_y }}" width="{{ divider_pattern_w }}" height="{{ divider_pattern_h }}" patternUnits="userSpaceOnUse">
    <circle cx="{{ divider_dot_cx }}" cy="{{ divider_dot_cy }}" r="{{ divider_dot_r }}" fill="{{ divider_dot_color }}" opacity="0.2"/>
  </pattern>

{% elif divider_variant == 'current' %}
  {# ── Five Currents #}
  <linearGradient id="{{ uid }}-rainbow" x1="0%" y1="0%" x2="100%" y2="0%">
{% for stop in divider_rainbow_stops %}
    <stop offset="{{ stop.offset }}" stop-color="{{ stop.color }}"/>
{% endfor %}
    <animate attributeName="x1" values="0%;100%;0%" dur="10s" repeatCount="indefinite"/>
  </linearGradient>
  <filter id="{{ uid }}-flow-shadow" x="-20%" y="-20%" width="140%" height="140%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
    <feOffset dx="1" dy="1" result="offsetBlur"/>
    <feComponentTransfer>
      <feFuncA type="linear" slope="0.5"/>
    </feComponentTransfer>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>

{% elif divider_variant == 'takeoff' %}
  {# ── Rocket #}
  <linearGradient id="{{ uid }}-escape" x1="0%" y1="0%" x2="0%" y2="100%">
{% for stop in divider_escape_stops %}
    <stop offset="{{ stop.offset }}" stop-color="{{ stop.color }}">
      <animate attributeName="stop-color"
        values="{{ stop['values'] }}"
        dur="1s" repeatCount="indefinite"/>
    </stop>
{% endfor %}
  </linearGradient>
  <filter id="{{ uid }}-thruster-glow" x="-50%" y="-50%" width="200%" height="200%">
    <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
    <feMerge>
      <feMergeNode in="coloredBlur"/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>

{% elif divider_variant == 'void' %}
  {# ── Spectral Terminus #}
  <linearGradient id="{{ uid }}-flux" x1="0%" y1="0%" x2="100%" y2="0%">
{% for stop in divider_flux_stops %}
    <stop offset="{{ stop.offset }}" stop-color="{{ stop.color }}" stop-opacity="{{ stop.opacity }}"/>
{% endfor %}
  </linearGradient>
  <filter id="{{ uid }}-bloom" x="-50%" y="-200%" width="200%" height="500%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="2.5" result="glow"/>
    <feComponentTransfer in="glow" result="intensified">
      <feFuncA type="linear" slope="1.5"/>
    </feComponentTransfer>
    <feMerge>
      <feMergeNode in="intensified"/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>

{% else %}
  {# ── Zeropoint (default): variant-aware aurora.
       Endpoint stops fade to ``surface_deep`` (variant substrate); the
       intermediate halo stops carry ``accent_complement`` (variant tonal
       pair); the centre peak carries ``accent`` (variant identity).
       Pre-v0.3.3 this gradient hardcoded substrate/intermediate/peak/halo
       chromatic literals and bled mint-green through every brutalist light
       variant (crimson/cream/gold/brown/teal) regardless of palette. ── #}
  <linearGradient id="{{ uid }}-aurora" x1="0%" x2="100%" y1="50%" y2="50%">
    <stop offset="0%" style="stop-color:{{ surface_deep }};stop-opacity:0"/>
    <stop offset="20%" style="stop-color:{{ accent_complement }};stop-opacity:0.8"/>
    <stop offset="50%" style="stop-color:{{ accent }};stop-opacity:1"/>
    <stop offset="80%" style="stop-color:{{ accent_complement }};stop-opacity:0.8"/>
    <stop offset="100%" style="stop-color:{{ surface_deep }};stop-opacity:0"/>
  </linearGradient>

{% endif %}
{% endblock %}

{# ═══════════════════════════════════════════════
   CONTENT BLOCK — specimen-faithful rendering per variant
   ═══════════════════════════════════════════════ #}
{% block content %}

{# ═══════════════════════════════════════════════════════════
   VARIANT: block — De Stijl Geometric Composition
   Source: block_divider.svg (700x80)
   ═══════════════════════════════════════════════════════════ #}
{% if divider_variant == 'block' %}

{# No background — transparent (matches updated specimen destijl_divider.svg) #}

{# Central thick rule with edge fade #}
<rect x="{{ block_rule_x }}" y="{{ block_rule_y }}" width="{{ divider_w }}" height="{{ block_rule_h }}"
      fill="url(#{{ uid }}-rule-fade)"/>

{# De Stijl composition centered #}
<g transform="translate({{ block_offset }}, 0)">
  {# Left colored block — Mondrian red #}
  <rect x="{{ block_rect_x }}" y="{{ block_y }}" width="{{ block_size }}" height="{{ block_size }}"
        fill="{{ block_red }}" opacity="0.9"/>
  <rect x="{{ block_rect_x }}" y="{{ block_y }}" width="{{ block_size }}" height="{{ block_size }}"
        fill="none" stroke="{{ block_black }}" stroke-width="2"/>

  {# Right colored block — Mondrian blue #}
  <rect x="{{ block_spread }}" y="{{ block_y }}" width="{{ block_size }}" height="{{ block_size }}"
        fill="{{ block_blue }}" opacity="0.9"/>
  <rect x="{{ block_spread }}" y="{{ block_y }}" width="{{ block_size }}" height="{{ block_size }}"
        fill="none" stroke="{{ block_black }}" stroke-width="2"/>

  {# Center § nexus — white box with black border #}
  <g transform="translate({{ block_center_x }}, {{ divider_cy }})">
    <rect x="{{ block_center_rect_x }}" y="{{ block_center_rect_y }}" width="{{ block_center_rect_w }}" height="{{ block_center_rect_h }}"
          fill="{{ block_white }}" stroke="{{ block_black }}" stroke-width="2"/>
    <text x="{{ block_symbol_x }}" y="{{ block_symbol_y }}" font-family="'Georgia', serif" font-size="12" font-weight="400"
          text-anchor="middle" fill="{{ block_black }}">&#xa7;</text>
  </g>
</g>

{# Gold accent squares #}
<rect x="{{ block_gold_left_x }}" y="{{ block_gold_y }}" width="{{ block_gold_size }}" height="{{ block_gold_size }}"
      fill="{{ block_gold }}"/>
<rect x="{{ block_gold_right_x }}" y="{{ block_gold_y }}" width="{{ block_gold_size }}" height="{{ block_gold_size }}"
      fill="{{ block_gold }}"/>

{# Section break label #}
<text x="{{ block_label_x }}" y="{{ block_label_y }}" font-family="'SF Mono', monospace"
      font-size="9" text-anchor="middle" fill="{{ block_label_color }}" opacity="0.7">
  {{ divider_label | default('SECTION BREAK') | upper }}
</text>

{# ═══════════════════════════════════════════════════════════
   VARIANT: current — Animated Rainbow Bezier
   Source: current_divider.svg (800x30)
   ═══════════════════════════════════════════════════════════ #}
{% elif divider_variant == 'current' %}
<path d="{{ current_path }}"
      stroke="url(#{{ uid }}-rainbow)" stroke-width="4" stroke-linecap="round"
      fill="none" filter="url(#{{ uid }}-flow-shadow)" stroke-dasharray="20 5">
  <animate attributeName="stroke-dashoffset" from="0" to="25" dur="3s" repeatCount="indefinite"/>
</path>

{# ═══════════════════════════════════════════════════════════
   VARIANT: takeoff — Rocket Trajectory
   Source: takeoff_divider.svg (800x100)
   ═══════════════════════════════════════════════════════════ #}
{% elif divider_variant == 'takeoff' %}

{# Trajectory arc — dashed bezier #}
<path d="{{ takeoff_trajectory_path }}"
      fill="none" stroke="{{ takeoff_trajectory_color }}" stroke-width="1"
      stroke-dasharray="5,5" opacity="0.5"/>

{# Warning zone — full-width glow strip at low opacity #}
<rect x="{{ takeoff_warning_x }}" y="{{ takeoff_warning_y }}" width="{{ divider_w }}" height="{{ takeoff_warning_h }}"
      fill="url(#{{ uid }}-escape)" opacity="0.1"/>

{# Rocket group — travels along trajectory #}
<g transform="translate({{ takeoff_rocket_x }}, {{ takeoff_rocket_y }})">
  {# Nose cone #}
  <path d="M-10,0 L0,-15 L10,0 Z" fill="{{ takeoff_nose_color }}"/>
  {# Body #}
  <rect x="{{ takeoff_body_x }}" y="{{ takeoff_body_y }}" width="{{ takeoff_body_w }}" height="{{ takeoff_body_h }}" fill="{{ takeoff_body_color }}"/>

  {# Thruster flames — 3 paths with animated geometry + glow #}
  <g filter="url(#{{ uid }}-thruster-glow)">
    {# Left flame #}
    <path d="M-7,15 L-12,30 L-2,20 Z" fill="url(#{{ uid }}-escape)">
      <animate attributeName="d" values="M-7,15 L-12,30 L-2,20 Z; M-7,15 L-15,45 L-2,20 Z; M-7,15 L-12,30 L-2,20 Z"
               dur="0.3s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="1;0.7;1" dur="0.3s" repeatCount="indefinite"/>
    </path>
    {# Right flame #}
    <path d="M7,15 L12,30 L2,20 Z" fill="url(#{{ uid }}-escape)">
      <animate attributeName="d" values="M7,15 L12,30 L2,20 Z; M7,15 L15,45 L2,20 Z; M7,15 L12,30 L2,20 Z"
               dur="0.2s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="1;0.7;1" dur="0.2s" repeatCount="indefinite"/>
    </path>
    {# Center flame #}
    <path d="M-3,15 L0,35 L3,15 Z" fill="url(#{{ uid }}-escape)">
      <animate attributeName="d" values="M-3,15 L0,35 L3,15 Z; M-3,15 L0,50 L3,15 Z; M-3,15 L0,35 L3,15 Z"
               dur="0.25s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="1;0.6;1" dur="0.25s" repeatCount="indefinite"/>
    </path>
  </g>

  {# Emergency boosters — alternating blink #}
  <circle cx="{{ takeoff_left_booster_cx }}" cy="{{ takeoff_booster_cy }}" r="{{ takeoff_booster_r }}" fill="{{ takeoff_booster_color }}" opacity="0">
    <animate attributeName="opacity" values="0;1;0" dur="0.5s" repeatCount="indefinite"/>
  </circle>
  <circle cx="{{ takeoff_right_booster_cx }}" cy="{{ takeoff_booster_cy }}" r="{{ takeoff_booster_r }}" fill="{{ takeoff_booster_color }}" opacity="0">
    <animate attributeName="opacity" values="0;1;0" dur="0.5s" begin="0.25s" repeatCount="indefinite"/>
  </circle>

  {# Rocket travels along trajectory #}
  <animateMotion path="{{ takeoff_motion_path }}"
                 dur="5s" repeatCount="indefinite"/>
</g>

{# CRITICAL warning label #}
<text x="{{ takeoff_warning_label_x }}" y="{{ takeoff_warning_label_y }}"
      font-family="'Courier New', monospace" font-size="10"
      fill="{{ takeoff_booster_color }}" font-weight="bold">
  &#x26a0; {{ divider_label | default('CRITICAL') | upper }}
  <animate attributeName="opacity" values="1;0.3;1" dur="1s" repeatCount="indefinite"/>
</text>

{# ═══════════════════════════════════════════════════════════
   VARIANT: void — Spectral Terminus
   Source: void_divider.svg (1000x40)
   ═══════════════════════════════════════════════════════════ #}
{% elif divider_variant == 'void' %}

{# Inline style for void hover interaction #}
<style>
  .{{ uid }}-void-root {
    --hw-gain: 0.4;
    --hw-scale-x: 0.8;
    --hw-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .{{ uid }}-void-root:hover {
    --hw-gain: 0.9;
    --hw-scale-x: 1;
  }
  @media (prefers-color-scheme: light) {
    .{{ uid }}-void-root { --hw-gain: 0.25; }
    .{{ uid }}-void-root:hover { --hw-gain: 0.6; }
  }
  .{{ uid }}-aura {
    fill: url(#{{ uid }}-flux);
    filter: url(#{{ uid }}-bloom);
    opacity: var(--hw-gain);
    transform-origin: center;
    transform: scaleX(var(--hw-scale-x));
    transition: opacity 0.6s var(--hw-ease), transform 0.8s var(--hw-ease);
    will-change: opacity, transform;
  }
  .{{ uid }}-filament {
    fill: url(#{{ uid }}-flux);
    opacity: calc(var(--hw-gain) + 0.1);
    transform-origin: center;
    transform: scaleX(var(--hw-scale-x));
    transition: transform 0.8s var(--hw-ease);
  }
  @media (prefers-reduced-motion: reduce) {
    .{{ uid }}-aura, .{{ uid }}-filament { transition: none; }
  }
</style>

<g class="{{ uid }}-void-root">
  {# Layer 1: Volumetric Glow — the aura #}
  <ellipse class="{{ uid }}-aura"
           cx="{{ aura_cx }}" cy="{{ aura_cy }}"
           rx="{{ aura_rx }}" ry="{{ aura_ry }}"/>

  {# Layer 2: Core Photon Stream — the visible terminus #}
  <rect class="{{ uid }}-filament"
        x="{{ filament_x }}" y="{{ filament_y }}"
        width="{{ filament_w }}" height="{{ filament_h }}" rx="{{ filament_rx }}"/>
</g>

{# ═══════════════════════════════════════════════════════════
   VARIANT: dissolve — Bifamily bridge, static-baked
   Source: cellular-automata-divider.svg (800x28)
   Palette: cellular_palette.bridge fields from compose/palette.py (primary
            tone left terminal, secondary tone right terminal, dissolve via
            per-rect opacity). Bridge is paired-only — solo variants never
            reach this branch because frame_variant_defaults.divider routes
            to a paired variant by default.
   NO <style>, NO animation — renderer-independent per feedback rule
   feedback_static_rendering_renderer_independence + baked composite
   colors for transparent artifacts.
   ═══════════════════════════════════════════════════════════ #}
{% elif divider_variant == 'dissolve' %}
{# Bridge layout — LEFT terminal uses primary tone, RIGHT terminal uses
   secondary tone. For ?variant=teal&pair=violet: primary=teal renders left,
   secondary=violet renders right. Local variable names are paradigm-agnostic
   (primary_main / primary_deep / secondary_main / secondary_deep) so the
   template reads cleanly regardless of which two solo tones the pairing
   grammar composed at request time. #}
{# Center line spans between terminals #}
<line x1="{{ dissolve_line_x1 }}" y1="{{ dissolve_line_y }}" x2="{{ dissolve_line_x2 }}" y2="{{ dissolve_line_y }}" stroke="{{ dissolve_primary_main }}" stroke-width="0.6" opacity="0.45"/>
{# Left terminal — 4 x 2 primary-tone block grid at full opacity #}
{% for cell in dissolve_left_cells %}
  <rect x="{{ cell.x }}" y="{{ cell.y }}" width="{{ cell.w }}" height="{{ cell.h }}" fill="{{ cell.fill }}"/>
{% endfor %}
{# Left scatter — primary tone with per-rect opacity dissolve (inward fade) #}
{% for pos in dissolve_left_scatter %}
<rect x="{{ pos.x }}" y="{{ pos.y }}" width="{{ pos.size }}" height="{{ pos.size }}" fill="{{ dissolve_primary_main }}" opacity="{{ pos.opacity }}"/>
{% endfor %}
{# Right scatter — secondary tone mirror (inward fade) #}
{% for pos in dissolve_right_scatter %}
<rect x="{{ pos.x }}" y="{{ pos.y }}" width="{{ pos.size }}" height="{{ pos.size }}" fill="{{ dissolve_secondary_main }}" opacity="{{ pos.opacity }}"/>
{% endfor %}
{# Right terminal — 4 x 2 secondary-tone block grid at full opacity #}
{% for cell in dissolve_right_cells %}
  <rect x="{{ cell.x }}" y="{{ cell.y }}" width="{{ cell.w }}" height="{{ cell.h }}" fill="{{ cell.fill }}"/>
{% endfor %}

{# ═══════════════════════════════════════════════════════════
   VARIANT: zeropoint — Aurora Nexus Beacon (default)
   Source: zeropoint_divider.svg (300x20)
   Palette (v0.3.3+): variant-aware via injected context vars.
     - surface_deep — substrate endpoint + nexus inner well
     - accent_complement — aurora halo (intermediate stops)
     - accent — aurora peak + nexus outer ring
   Label tint comes from resolver context to keep this template literal-free.
   ═══════════════════════════════════════════════════════════ #}
{% else %}
{# Aurora rule — full width 2px line #}
<rect fill="url(#{{ uid }}-aurora)" height="{{ zeropoint_line_h }}" width="{{ divider_w }}" x="{{ zeropoint_line_x }}" y="{{ zeropoint_line_y }}"/>

{# Nexus beacon — variant accent outer, variant substrate inner #}
<circle cx="{{ divider_cx }}" cy="{{ divider_cy }}" r="{{ zeropoint_outer_r }}" fill="{{ accent }}"/>
<circle cx="{{ divider_cx }}" cy="{{ divider_cy }}" r="{{ zeropoint_inner_r }}" fill="{{ surface_deep }}"/>

{# Label #}
{% if divider_label %}
<text x="{{ zeropoint_label_x }}" y="{{ zeropoint_label_y }}" text-anchor="middle"
      font-family="'SF Mono','JetBrains Mono',monospace"
      font-size="7" fill="{{ zeropoint_label_color }}" opacity="0.5"
      letter-spacing="0.15em">{{ divider_label | upper }}</text>
{% endif %}

{% endif %}
{% endblock %}
