/*
Theme Name: The Purple Giraffes – Coming Soon
Theme URI: https://thepurplegiraffes.com
Author: The Purple Giraffes
Description: One-page "Coming Soon" theme with email sign-ups. Subscribers are listed under Tools → Coming Soon Subscribers (with CSV export).
Version: 1.0.0
Requires at least: 5.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: tpg-cs
*/
:root{
  --bg:#05030d;
  --ink:#ffffff;
  --muted:#d9d3ea;
  --purple:#a02cff;
  --purple-2:#7b1fe6;
  --violet:#c13dff;
  --line:rgba(170,90,255,.55);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;background:var(--bg)}
body{
  font-family:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Scene / background ---------- */
.tpg-scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 42%, rgba(90,30,170,.22), transparent 70%),
    radial-gradient(ellipse 40% 60% at 0% 60%, rgba(120,40,220,.35), transparent 70%),
    radial-gradient(ellipse 40% 60% at 100% 60%, rgba(120,40,220,.35), transparent 70%),
    linear-gradient(#070314,#05030d 60%,#0a0420);
}
/* dotted texture */
.tpg-scene::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(190,140,255,.18) 1px,transparent 1.2px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,#000 0,transparent 30%,transparent 70%,#000 100%);
          mask-image:linear-gradient(90deg,#000 0,transparent 30%,transparent 70%,#000 100%);
  opacity:.55}
/* perspective floor grid */
.tpg-floor{position:absolute;left:-50%;right:-50%;bottom:-8%;height:48%;
  background-image:
    linear-gradient(rgba(160,70,255,.35) 1px,transparent 1px),
    linear-gradient(90deg,rgba(160,70,255,.28) 1px,transparent 1px);
  background-size:70px 70px;
  transform:perspective(420px) rotateX(62deg);transform-origin:50% 0;
  -webkit-mask-image:linear-gradient(transparent,#000 35%,#000 70%,transparent);
          mask-image:linear-gradient(transparent,#000 35%,#000 70%,transparent);
  opacity:.55;animation:tpg-floor 14s linear infinite}
@keyframes tpg-floor{to{background-position:0 70px,0 0}}
/* horizon glow */
.tpg-horizon{position:absolute;left:0;right:0;top:66%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(190,90,255,.9) 20%,rgba(190,90,255,.25) 50%,rgba(190,90,255,.9) 80%,transparent);
  box-shadow:0 0 30px 6px rgba(150,50,255,.35);opacity:.8}

/* glass panels */
.tpg-panel{position:absolute;border:1.5px solid rgba(190,110,255,.55);border-radius:22px;
  background:linear-gradient(135deg,rgba(150,70,255,.22),rgba(60,15,120,.08) 60%,rgba(150,70,255,.12));
  box-shadow:inset 0 0 40px rgba(160,80,255,.18),0 0 24px rgba(150,60,255,.35);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.tpg-panel::after{content:"";position:absolute;inset:-1px;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 18%);opacity:.35}
.tpg-p1{left:-6%;top:6%;width:30%;height:44%;transform:perspective(900px) rotateY(38deg) skewY(-10deg)}
.tpg-p2{left:-4%;top:44%;width:22%;height:32%;transform:perspective(900px) rotateY(38deg) skewY(-6deg);opacity:.8}
.tpg-p3{right:-6%;top:28%;width:26%;height:48%;transform:perspective(900px) rotateY(-38deg) skewY(10deg)}
.tpg-p4{right:-3%;top:6%;width:14%;height:22%;transform:perspective(900px) rotateY(-38deg) skewY(8deg);opacity:.45}

/* vertical light beams */
.tpg-beam{position:absolute;top:0;bottom:30%;width:2px;
  background:linear-gradient(transparent,rgba(210,140,255,.95) 55%,rgba(210,140,255,.2));
  box-shadow:0 0 18px 3px rgba(170,70,255,.55);animation:tpg-pulse 4.5s ease-in-out infinite}
.tpg-b1{left:19.5%}
.tpg-b2{right:12%;animation-delay:1.6s}
@keyframes tpg-pulse{0%,100%{opacity:.45}50%{opacity:1}}

/* ---------- Content ---------- */
.tpg-wrap{position:relative;z-index:1;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:48px 16px 40px}
.tpg-logo{display:block;width:clamp(190px,20vw,280px);height:auto;margin-bottom:clamp(28px,4vw,44px);
  filter:drop-shadow(0 0 24px rgba(150,50,255,.25))}
.tpg-title{font-family:"Plus Jakarta Sans","Jost",sans-serif;font-weight:800;
  font-size:clamp(2.6rem,7.2vw,6rem);line-height:1.02;letter-spacing:-.035em}
.tpg-title span{display:block}
.tpg-title .tpg-accent{
  background:linear-gradient(90deg,#9d2bff,#c742ff 45%,#a52dff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(170,50,255,.35))}
.tpg-lead{max-width:760px;margin:clamp(22px,3vw,34px) auto 0;
  font-size:clamp(1.05rem,1.7vw,1.5rem);line-height:1.5;color:var(--muted);font-weight:400}

/* form */
.tpg-form{position:relative;display:flex;align-items:center;gap:10px;
  width:100%;max-width:680px;margin:clamp(30px,4vw,44px) auto 0;padding:7px 7px 7px 26px;
  border:1.5px solid rgba(170,90,255,.6);border-radius:999px;
  background:linear-gradient(90deg,rgba(40,15,80,.75),rgba(25,8,55,.75));
  box-shadow:0 0 30px rgba(140,50,255,.25),inset 0 0 20px rgba(140,60,255,.15)}
.tpg-form:focus-within{border-color:#c071ff;box-shadow:0 0 38px rgba(160,60,255,.45),inset 0 0 20px rgba(140,60,255,.2)}
.tpg-form svg.tpg-mail{flex:none;width:26px;height:26px;color:#e8defa}
.tpg-form input[type=email]{flex:1;min-width:0;background:none;border:0;outline:0;
  color:#fff;font:inherit;font-size:1.15rem;padding:14px 4px}
.tpg-form input::placeholder{color:#c9bfe0;opacity:1}
.tpg-btn{flex:none;display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  border:1.5px solid rgba(220,170,255,.6);border-radius:999px;padding:15px 28px;
  font:inherit;font-weight:500;font-size:1.15rem;color:#fff;
  background:linear-gradient(90deg,#8a1fff,#b536ff);
  box-shadow:0 0 22px rgba(160,50,255,.6),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .15s,box-shadow .15s}
.tpg-btn:hover{transform:translateY(-1px);box-shadow:0 0 32px rgba(180,70,255,.85),inset 0 1px 0 rgba(255,255,255,.4)}
.tpg-btn svg{width:20px;height:20px;transition:transform .15s}
.tpg-btn:hover svg{transform:translateX(3px)}
.tpg-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.tpg-msg{min-height:1.5em;margin-top:14px;font-size:1rem;color:#d8b8ff}
.tpg-msg.is-error{color:#ff9fc4}

/* features */
.tpg-features{list-style:none;display:flex;justify-content:center;align-items:stretch;
  margin-top:clamp(40px,6vw,76px)}
.tpg-features li{display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:0 clamp(22px,4vw,56px);font-size:.9rem;letter-spacing:.22em;text-transform:uppercase;
  line-height:1.6;font-weight:500;color:#fff}
.tpg-features li+li{border-left:1.5px solid rgba(170,70,255,.75)}
.tpg-features svg{width:38px;height:38px;color:#d33cff;filter:drop-shadow(0 0 8px rgba(210,60,255,.55))}

.tpg-foot{margin-top:40px;font-size:.85rem;color:rgba(217,211,234,.55);letter-spacing:.04em}

.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

@media (max-width:640px){
  .tpg-form{flex-direction:column;border-radius:26px;padding:10px;gap:8px}
  .tpg-form .tpg-field{display:flex;align-items:center;gap:10px;width:100%;padding:0 12px}
  .tpg-btn{width:100%;justify-content:center}
  .tpg-features{flex-direction:column;gap:26px}
  .tpg-features li+li{border-left:0;border-top:1.5px solid rgba(170,70,255,.5);padding-top:26px}
  .tpg-p1,.tpg-p3{opacity:.5}
  .tpg-p2,.tpg-p4,.tpg-beam{display:none}
}
@media (min-width:641px){.tpg-form .tpg-field{display:flex;align-items:center;gap:14px;flex:1;min-width:0}}
@media (prefers-reduced-motion:reduce){.tpg-floor,.tpg-beam{animation:none}}