#!/usr/bin/env python3
"""Revitalise pilot v2: console-component glass language on 3 mockups.
v2: no literal box-reflect (text mirrors read cheap + Chromium killed alpha on home-f);
grounding comes from an under-card floor glow. Sparks sit ON the card surface (clipped
by the corner) like the ethos cards. Edge light is a crisp rim line, not a smear."""
import os
os.chdir(os.path.join(os.path.dirname(__file__), '..', 'os-renders'))

NOISE = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")"

def css(radius, extra=''):
    return f"""
\t/* ---- revitalise layer: console-component glass language ---- */
\t.glowpool {{ position:absolute; z-index:0; pointer-events:none;
\t\tbackground:radial-gradient(50% 50% at 50% 50%, rgba(76,183,130,.24), rgba(76,183,130,.08) 55%, transparent 78%);
\t\tfilter:blur(6px); }}
\t.floorglow {{ position:absolute; z-index:0; pointer-events:none;
\t\tbackground:radial-gradient(50% 50% at 50% 50%, rgba(17,70,44,.20), rgba(76,183,130,.10) 45%, transparent 72%);
\t\tfilter:blur(10px); }}
\t.glint {{ position:absolute; right:0; top:0; width:42%; height:36%; pointer-events:none; z-index:6;
\t\tborder-top:3px solid rgba(255,255,255,.85); border-right:3px solid rgba(255,255,255,.55);
\t\tborder-top-right-radius:{radius}px; filter:blur(1.6px);
\t\t-webkit-mask:radial-gradient(130% 130% at 100% 0%, #000 0%, rgba(0,0,0,.65) 42%, transparent 74%);
\t\t        mask:radial-gradient(130% 130% at 100% 0%, #000 0%, rgba(0,0,0,.65) 42%, transparent 74%); }}
\t.glintB {{ position:absolute; left:0; bottom:0; width:30%; height:24%; pointer-events:none; z-index:6;
\t\tborder-bottom:2px solid rgba(255,255,255,.6); border-left:2px solid rgba(255,255,255,.6);
\t\tborder-bottom-left-radius:{radius}px; filter:blur(2px); opacity:.6;
\t\t-webkit-mask:radial-gradient(130% 130% at 0% 100%, #000 0%, rgba(0,0,0,.5) 40%, transparent 70%);
\t\t        mask:radial-gradient(130% 130% at 0% 100%, #000 0%, rgba(0,0,0,.5) 40%, transparent 70%); }}
\t.grain {{ position:absolute; inset:0; z-index:5; pointer-events:none; opacity:.03;
\t\tbackground-image:{NOISE}; }}
\t.spark {{ position:absolute; pointer-events:none; z-index:7; width:150px; height:54px; right:5%; top:-16px;
\t\tbackground:radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.9), transparent 72%);
\t\tfilter:blur(9px); transform:rotate(-14deg); opacity:.9; }}
\t.edgelight {{ position:absolute; z-index:6; pointer-events:none; width:2px; border-radius:2px;
\t\tbackground:linear-gradient(180deg, transparent, rgba(126,205,164,.85) 30%, rgba(126,205,164,.7) 70%, transparent);
\t\tbox-shadow:0 0 14px 2px rgba(76,183,130,.30); }}
{extra}"""

GLINTS = '<div class="glint"></div><div class="glintB"></div><div class="grain"></div><div class="spark"></div>'

def build(src, out, radius, pool, floor, edge, host_marker, extra_css=''):
    s = open(src).read()
    s = s.replace('</style>', css(radius, extra_css) + '</style>', 1)
    s = s.replace('<body>', f'<body>\n\t<div class="glowpool" style="{pool}"></div>\n\t<div class="floorglow" style="{floor}"></div>', 1)
    s = s.replace(host_marker, host_marker + GLINTS, 1)
    s = s.replace('</body>', f'\t<div class="edgelight" style="{edge}"></div>\n</body>', 1)
    open(out, 'w').write(s)
    print('wrote', out)

build('home/home-m.html', 'home/home-m-premium.html', 22,
      'left:110px; top:150px; width:780px; height:480px;',
      'left:170px; top:560px; width:660px; height:110px;',
      'left:69px; top:170px; height:380px;',
      '<div class="card">')

build('util/util-m.html', 'util/util-m-premium.html', 22,
      'left:150px; top:180px; width:700px; height:380px;',
      'left:220px; top:470px; width:560px; height:100px;',
      'left:119px; top:250px; height:210px;',
      '<div class="card">',
      extra_css="""\t.rule { height:2px; background:linear-gradient(90deg, var(--hair-strong) 0%, rgba(76,183,130,.6) 16%, rgba(76,183,130,.6) 44%, var(--hair-strong) 62%);
\t\tbox-shadow:0 0 18px 2px rgba(76,183,130,.25); }
""")

build('home/home-f-alpha.html', 'home/home-f-premium.html', 12,
      'left:250px; top:250px; width:1050px; height:560px;',
      'left:200px; top:880px; width:940px; height:110px;',
      'left:69px; top:380px; height:460px;',
      '<div class="window front-win">')
