.elementor-kit-1253{--e-global-color-primary:#0D0D0D;--e-global-color-secondary:#FF4C00;--e-global-color-text:#E0E0E0;--e-global-color-accent:#FFFFFF;--e-global-typography-primary-font-family:"Orbitron";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Open Sans";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-1253 e-page-transition{background-color:#FFBC7D;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */# Retry: remove JS template literals to avoid $ conflicts
import json, os, datetime
from string import Template

raw_html_snippet = r"""
<!-- POWER OF THE PEN — Cinematic Footer Banner (Tailored Variant) -->
<section class="pop-footer-wrap" aria-label="Power of the Pen Footer" data-variant="$variant" style="--pop-maxw:$maxw;">
  <div class="pop-footer-bg" aria-hidden="true"></div>

  <div class="pop-footer-inner">
    <div class="pop-footer-left">
      <img class="pop-logo" src="$logo_url" alt="Power of the Pen logo" />
      <div class="pop-signature">Jay Jay Charles</div>
    </div>

    <div class="pop-footer-right">
      <h2 class="pop-title">POWER OF THE PEN</h2>
      <p class="pop-tagline"><em>Stories forged in ink. Worlds born in flame.</em></p>
      <p class="pop-url">powerofthepenpod.org</p>
    </div>
  </div>
</section>

<style>
  :root{
    --pop-blue:#4A90E2;        /* brand blue */
    --pop-bg:#1A1F26;          /* dark blue-gray */
    --pop-steel:#2a3240;       /* secondary steel tone */
    --pop-gray:#9ba2ad;        /* neutral text gray */
  }
  .pop-footer-wrap{
    position:relative;
    overflow:hidden;
    width:100%;
    $fullbleed_rule
    min-height:$min_height;
    color:#fff;
    isolation:isolate;
    transform:translateY(20px);
    opacity:.0;
    transition:opacity .6s ease, transform .6s ease;
  }
  .pop-footer-wrap.pop-in{
    transform:translateY(0);
    opacity:1;
  }
  .pop-footer-bg{
    position:absolute; inset:0;
    background:
      radial-gradient(120% 100% at 15% 50%, rgba(74,144,226,.25), transparent 60%),
      linear-gradient(120deg, var(--pop-bg), var(--pop-steel));
    z-index:-1;
    filter:saturate(.95) brightness(.95);
    transition:filter .8s ease, background .8s ease;
  }
  .pop-footer-wrap.pop-active .pop-footer-bg{
    filter:saturate(1.05) brightness(1.03);
    background:
      radial-gradient(120% 100% at 18% 50%, rgba(74,144,226,.33), transparent 60%),
      linear-gradient(120deg, #16202a, #2c3b4e);
  }
  .pop-footer-inner{
    display:grid;
    grid-template-columns: minmax(240px, 1fr) 2fr;
    gap:48px;
    align-items:center;
    max-width: var(--pop-maxw, 1200px);
    padding:56px 5vw;
    margin-inline:auto;
  }
  .pop-footer-left{
    display:flex; flex-direction:column; gap:16px; align-items:flex-start;
    transform:translateY(8px);
  }
  .pop-logo{
    width:min(26vw, 220px); height:auto;
    filter: drop-shadow(0 6px 24px rgba(74,144,226,.25));
  }
  .pop-signature{
    color: rgba(155,162,173,.75);
    font-style:italic;
    letter-spacing:.3px;
  }
  .pop-footer-right{
    transform:translateY(-6px);
  }
  .pop-title{
    margin:0 0 8px; font: 600 28px/1.2 "Georgia", serif; letter-spacing:.08em;
  }
  .pop-tagline{
    margin:0 0 10px; color: var(--pop-gray);
  }
  .pop-url{
    margin:6px 0 0; color: rgba(255,255,255,.9);
    font-weight:600; letter-spacing:.02em;
  }
  .pop-footer-wrap.pop-active .pop-footer-bg{
    animation: popBreath 12s ease-in-out infinite;
  }
  @keyframes popBreath{
    0%,100% { filter: saturate(1.02) brightness(1.02); }
    50%     { filter: saturate(1.08) brightness(1.06); }
  }
  @media (prefers-reduced-motion: reduce){
    .pop-footer-wrap,
    .pop-footer-bg{ animation:none !important; transition:none !important; }
    .pop-footer-wrap{ transform:none !important; opacity:1 !important; }
    .pop-footer-left, .pop-footer-right{ transform:none !important; }
  }
</style>

<script>
(function(){
  const section = document.currentScript.closest('.pop-footer-wrap');
  const bg = section ? section.querySelector('.pop-footer-bg') : null;
  const left = section ? section.querySelector('.pop-footer-left') : null;
  const right = section ? section.querySelector('.pop-footer-right') : null;
  if(!section) return;
  const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  const io = new IntersectionObserver((entries)=>{
    entries.forEach(function(e){
      if(e.isIntersecting){ section.classList.add('pop-in','pop-active'); }
      else{ section.classList.remove('pop-active'); }
    });
  }, { threshold: 0.3 });
  io.observe(section);

  function onScroll(){
    if(reduce) return;
    const rect = section.getBoundingClientRect();
    const vh = window.innerHeight || 1;
    const vis = Math.min(1, Math.max(0, 1 - rect.top / vh));
    if(bg) bg.style.transform = 'translateY(' + ((1 - vis)*12) + 'px)';
    if(left) left.style.transform = 'translateY(' + ((1 - vis)*8) + 'px)';
    if(right) right.style.transform = 'translateY(' + ((vis - 1)*6) + 'px)';
  }
  window.addEventListener('scroll', onScroll, { passive:true });
  onScroll();
})();
</script>
""".strip()

HTML_SNIPPET_TMPL = Template(raw_html_snippet)

def make_html(variant="contained", maxw="1200px", logo_url="pop_logo_placeholder.svg"):
    fullbleed_rule = "margin-left:50%; transform:translateX(-50%) translateY(20px);" if variant=="fullbleed" else ""
    return HTML_SNIPPET_TMPL.substitute(
        variant=variant, maxw=maxw, logo_url=logo_url,
        fullbleed_rule=fullbleed_rule, min_height="360px"
    )

def elementor_section_json(html_content, name="POP Footer (Tailored)"):
    template = {
        "version": "0.4",
        "title": name,
        "type": "section",
        "content": [
            {
                "id": "section-pop-footer",
                "elType": "section",
                "settings": {
                    "layout": "full_width",
                    "content_width": "full",
                    "padding": {"unit":"px","top":"0","right":"0","bottom":"0","left":"0","isLinked":True}
                },
                "elements": [
                    {
                        "id": "column-pop-footer",
                        "elType": "column",
                        "settings": {"_column_size": 100},
                        "elements": [
                            {
                                "id": "widget-pop-footer-html",
                                "elType": "widget",
                                "widgetType": "html",
                                "settings": {
                                    "html": html_content
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    }
    return template

base = "/mnt/data"
files = []

# Logo
SVG = """<svg xmlns="http://www.w3.org/2000/svg" width="800" height="260" viewBox="0 0 800 260">
  <defs>
    <linearGradient id="g" x1="0" x2="1" y1="0" y2="1">
      <stop offset="0" stop-color="#9ec8ff"/>
      <stop offset="1" stop-color="#4A90E2"/>
    </linearGradient>
  </defs>
  <rect width="100%" height="100%" fill="none"/>
  <g transform="translate(30,35)">
    <circle cx="70" cy="95" r="60" fill="url(#g)"/>
    <path d="M70 45 L90 95 L70 85 L50 95 Z" fill="#fff" fill-opacity=".9"/>
    <text x="150" y="75" font-family="Georgia, serif" font-size="42" fill="#ffffff">POWER OF THE PEN</text>
    <text x="150" y="120" font-family="Georgia, serif" font-size="22" fill="#b8c7da" font-style="italic">Stories forged in ink. Worlds born in flame.</text>
  </g>
</svg>
"""
logo_path = os.path.join(base, "pop_logo_placeholder.svg")
with open(logo_path, "w", encoding="utf-8") as f:
    f.write(SVG)
files.append(logo_path)

# Contained
html_contained = make_html("contained", "1200px", "pop_logo_placeholder.svg")
tmpl_contained = elementor_section_json(html_contained, "POP Footer — Contained (1200px)")
json_contained_path = os.path.join(base, "PowerOfThePen_Footer_Elementor_Contained.json")
with open(json_contained_path, "w", encoding="utf-8") as f:
    json.dump(tmpl_contained, f, ensure_ascii=False, indent=2)
files.append(json_contained_path)

# Full-Bleed
html_full = make_html("fullbleed", "1600px", "pop_logo_placeholder.svg")
tmpl_full = elementor_section_json(html_full, "POP Footer — Full Bleed (Edge-to-Edge)")
json_full_path = os.path.join(base, "PowerOfThePen_Footer_Elementor_FullBleed.json")
with open(json_full_path, "w", encoding="utf-8") as f:
    json.dump(tmpl_full, f, ensure_ascii=False, indent=2)
files.append(json_full_path)

# README
readme = f"""
POWER OF THE PEN — Elementor Footer (Tailored Variants)
=======================================================

Files:
  • PowerOfThePen_Footer_Elementor_Contained.json
  • PowerOfThePen_Footer_Elementor_FullBleed.json
  • pop_logo_placeholder.svg

How to Import
-------------
1) WordPress → Elementor → Templates → Import Templates → choose a JSON file.
2) Insert the section where you want it.
3) In the HTML widget, replace the logo src:
      src="pop_logo_placeholder.svg"
   with your real logo URL (SVG preferred).

Quick Tweaks
------------
• Content width: change on the <section> inline style:
      style="--pop-maxw: 1200px;"
• Footer height: edit min-height in the CSS (default 360px).
• Brand colors: edit CSS variables at the top of the snippet.

Motion & Accessibility
----------------------
• Drift-in + breathing glow included. Parallax reacts to scroll.
• Respects reduced motion (prefers-reduced-motion).

Notes
-----
• FullBleed variant stretches background edge-to-edge while keeping content centered.
• If any script conflicts occur, place this section at the bottom of the page.

— Generated for: Power of the Pen (Jay Jay Charles)
  {datetime.datetime.utcnow().isoformat()}Z
"""
readme_path = os.path.join(base, "PowerOfThePen_Footer_Tailored_README.txt")
with open(readme_path, "w", encoding="utf-8") as f:
    f.write(readme.strip())
files.append(readme_path)

{"created_files": files}/* End custom CSS */