/*
Theme Name: GeneratorGlitchText
Theme URI: https://generatorglitchtext.com
Author: Converted from HTML
Description: Same as original HTML - Glitch Text Generator - Zalgo & Cursed Text Tool - Browser-only, WordPress ready
Version: 1.0.0
License: GPL v2 or later
Text Domain: generatorglitchtext
Tags: glitch, zalgo, generator, dark, tool
*/

:root{
    --bg:#08090c;
    --bg-panel:#101218;
    --bg-panel-2:#14161e;
    --cyan:#29fff0;
    --magenta:#ff2b6d;
    --phosphor:#6dff8c;
    --text:#e7e8ec;
    --text-dim:#8a8d98;
    --border:#24262f;
    --mono:'Space Mono', 'Courier New', monospace;
    --sans:'Inter', -apple-system, sans-serif;
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:
      radial-gradient(ellipse at 50% -10%, rgba(41,255,240,0.06), transparent 45%),
      radial-gradient(ellipse at 80% 100%, rgba(255,43,109,0.05), transparent 45%),
      var(--bg);
    color:var(--text);
    font-family:var(--sans);
    line-height:1.65;
    position:relative;
    min-height:100vh;
  }
  body::before{
    content:"";
    position:fixed; inset:0;
    background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 2px);
    pointer-events:none; z-index:999; mix-blend-mode:overlay;
  }
  a{ color:var(--cyan); }
  .wrap{ max-width:1040px; margin:0 auto; padding:0 24px; }

  header.site{ padding:20px 0; border-bottom:1px solid var(--border); }
  .nav{ display:flex; align-items:center; justify-content:space-between; }
  .logo{ font-family:var(--mono); font-weight:700; font-size:1rem; color:var(--text); text-decoration:none; }
  .logo span{ color:var(--cyan); }
  .logo .cursor{ display:inline-block; width:8px; height:1em; background:var(--magenta); margin-left:2px; animation:blink 1.1s steps(1) infinite; vertical-align:text-bottom; }
  @keyframes blink{ 50%{ opacity:0; } }
  .nav-links{ display:flex; gap:20px; font-family:var(--mono); font-size:0.78rem; }
  .nav-links a{ color:var(--text-dim); text-decoration:none; }
  .nav-links a:hover{ color:var(--cyan); }
  @media (max-width:700px){ .nav-links{ display:none; } }

  .hero{ padding:60px 0 36px; text-align:center; }
  .eyebrow{ font-family:var(--mono); font-size:0.75rem; color:var(--phosphor); letter-spacing:0.15em; text-transform:uppercase; margin-bottom:18px; }
  .glitch-title{ position:relative; font-family:var(--mono); font-weight:700; font-size:clamp(1.9rem, 5.4vw, 3.3rem); line-height:1.15; margin:0 0 20px; letter-spacing:-0.01em; }
  .glitch-title::before, .glitch-title::after{ content:attr(data-text); position:absolute; left:0; top:0; width:100%; background:var(--bg); background-clip:text; -webkit-background-clip:text; }
  .glitch-title::before{ color:var(--cyan); clip-path:inset(0 0 65% 0); animation:glitchTop 5s infinite linear; }
  .glitch-title::after{ color:var(--magenta); clip-path:inset(65% 0 0 0); animation:glitchBottom 6.5s infinite linear; }
  @keyframes glitchTop{ 0%,91%,100%{ transform:translate(0,0); clip-path:inset(0 0 65% 0); } 92%{ transform:translate(-4px,-2px); clip-path:inset(10% 0 50% 0); } 94%{ transform:translate(3px,1px); clip-path:inset(30% 0 35% 0); } 96%{ transform:translate(-2px,2px); clip-path:inset(5% 0 60% 0); } }
  @keyframes glitchBottom{ 0%,90%,100%{ transform:translate(0,0); clip-path:inset(65% 0 0 0); } 91.5%{ transform:translate(4px,2px); clip-path:inset(55% 0 5% 0); } 93.5%{ transform:translate(-3px,-1px); clip-path:inset(40% 0 20% 0); } 95.5%{ transform:translate(2px,-2px); clip-path:inset(60% 0 8% 0); } }
  @media (prefers-reduced-motion:reduce){ .glitch-title::before,.glitch-title::after,.logo .cursor{ animation:none; } }
  .hero p.sub{ max-width:640px; margin:0 auto; color:var(--text-dim); font-size:1.02rem; }

  .badges{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:22px; }
  .badge{ font-family:var(--mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-dim); border:1px solid var(--border); padding:5px 11px; border-radius:999px; }

  .tool{ margin:40px 0 60px; border:1px solid var(--border); border-radius:10px; background:var(--bg-panel); overflow:hidden; }
  .tool-grid{ display:grid; grid-template-columns:1fr 1fr; }
  @media (max-width:760px){ .tool-grid{ grid-template-columns:1fr; } .tool-grid > div:first-child{ border-bottom:1px solid var(--border); } }
  .tool-grid > div:first-child{ border-right:1px solid var(--border); }
  .panel{ padding:20px 22px; }
  .panel-label{ font-family:var(--mono); font-size:0.7rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:0.1em; display:flex; justify-content:space-between; margin-bottom:10px; }
  textarea#input{ width:100%; min-height:130px; resize:vertical; background:var(--bg-panel-2); border:1px solid var(--border); border-radius:6px; color:var(--text); font-family:var(--sans); font-size:1rem; padding:12px; }
  textarea#input:focus, .btn:focus-visible, .chip:focus-visible, input[type=range]:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
  #output{ width:100%; min-height:130px; background:var(--bg-panel-2); border:1px solid var(--border); border-radius:6px; padding:12px; font-size:1.15rem; word-break:break-word; white-space:pre-wrap; color:var(--phosphor); }
  #output:empty::before{ content:"Your glitched text will appear here…"; color:var(--text-dim); font-size:1rem; }

  .controls{ padding:4px 22px 22px; border-top:1px solid var(--border); }
  .control-row{ display:flex; align-items:center; gap:16px; margin:16px 0; flex-wrap:wrap; }
  .control-row label.field-label{ font-family:var(--mono); font-size:0.75rem; color:var(--text-dim); min-width:110px; }
  input[type=range]{ flex:1; min-width:160px; accent-color:var(--cyan); height:4px; }
  .zones{ display:flex; gap:14px; font-family:var(--mono); font-size:0.78rem; color:var(--text-dim); }
  .zones label{ display:flex; align-items:center; gap:6px; cursor:pointer; }
  .zones input{ accent-color:var(--phosphor); }
  .chips{ display:flex; gap:8px; flex-wrap:wrap; }
  .chip{ font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; background:transparent; border:1px solid var(--border); color:var(--text-dim); padding:6px 12px; border-radius:999px; cursor:pointer; transition:.15s; }
  .chip:hover{ border-color:var(--phosphor); color:var(--phosphor); }
  .chip.active{ border-color:var(--phosphor); color:var(--phosphor); background:rgba(109,255,140,0.08); }

  .actions{ display:flex; gap:10px; padding:0 22px 22px; flex-wrap:wrap; }
  .btn{ font-family:var(--mono); font-size:0.8rem; text-transform:uppercase; letter-spacing:0.05em; border:1px solid var(--cyan); color:var(--cyan); background:transparent; padding:10px 18px; border-radius:6px; cursor:pointer; transition:.15s; }
  .btn:hover{ background:var(--cyan); color:#08090c; }
  .btn.magenta{ border-color:var(--magenta); color:var(--magenta); }
  .btn.magenta:hover{ background:var(--magenta); color:#08090c; }
  .btn.ghost{ border-color:var(--border); color:var(--text-dim); }
  .btn.ghost:hover{ background:var(--bg-panel-2); color:var(--text); border-color:var(--text-dim); }
  .count{ font-family:var(--mono); }

  .adspot{ margin:0 22px 22px; border:1px dashed var(--border); border-radius:8px; padding:14px; text-align:center; color:var(--text-dim); font-family:var(--mono); font-size:0.72rem; background:var(--bg-panel-2); }

  section.info{ padding:0 0 52px; max-width:760px; margin:0 auto; }
  section.info h2{ font-family:var(--mono); font-size:1.35rem; color:var(--text); border-left:3px solid var(--magenta); padding-left:12px; margin:0 0 16px; }
  section.info p{ color:var(--text-dim); margin:0 0 14px; }
  section.info ul, section.info ol{ color:var(--text-dim); padding-left:22px; margin:0 0 14px; }
  section.info li{ margin-bottom:8px; }
  section.info strong{ color:var(--text); }

  .byline{ display:flex; gap:12px; align-items:center; border:1px solid var(--border); border-radius:8px; padding:14px 16px; margin-bottom:36px; background:var(--bg-panel); font-family:var(--mono); font-size:0.78rem; color:var(--text-dim); }
  .byline b{ color:var(--phosphor); }

  .table-wrap{ overflow-x:auto; margin-bottom:14px; border:1px solid var(--border); border-radius:8px; }
  table{ width:100%; border-collapse:collapse; font-size:0.88rem; min-width:480px; }
  th, td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); }
  th{ font-family:var(--mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--phosphor); background:var(--bg-panel-2); }
  td{ color:var(--text-dim); }
  tr:last-child td{ border-bottom:none; }

  .faq details{ border:1px solid var(--border); border-radius:8px; padding:14px 16px; margin-bottom:10px; background:var(--bg-panel); }
  .faq summary{ cursor:pointer; font-weight:600; color:var(--text); list-style:none; font-family:var(--sans); }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::before{ content:"+ "; color:var(--cyan); font-family:var(--mono); }
  .faq details[open] summary::before{ content:"– "; color:var(--magenta); }
  .faq p{ margin-top:10px; margin-bottom:0; }

  footer.site{ border-top:1px solid var(--border); padding:26px 0 40px; text-align:center; color:var(--text-dim); font-family:var(--mono); font-size:0.75rem; }
  footer.site a{ color:var(--text-dim); margin:0 8px; }
  footer.site a:hover{ color:var(--cyan); }

/* WordPress fixes */
.wp-admin .site { background: #fff; }