/*
Theme Name: Draco Aerial Coming Soon
Theme URI: https://dracoaerial.co.za
Author: Draco Aerial
Description: A full-screen coming-soon theme for Draco Aerial: background footage, brand logo, launch notify form and a status strip. Activate it and the whole front end shows the coming-soon page.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: draco-aerial-coming-soon
*/

:root{
  --ink:#10171f;
  --paper:#f3f5ee;
  --mute:#9aa7ad;
  --line:rgba(243,245,238,.14);
  --green:#7bb02f;
  --green-core:#508317;
  --gold:#cba752;
  --display:'Archivo',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--body);
  color:var(--paper);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Stage ---- */
.stage{position:relative;height:100dvh;width:100%;overflow:hidden;display:flex;flex-direction:column}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

.scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(16,23,31,.10), rgba(16,23,31,.62) 78%),
    linear-gradient(180deg, rgba(16,23,31,.55) 0%, rgba(16,23,31,.28) 34%, rgba(16,23,31,.86) 100%);
}
.scrim::after{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 70% at 50% 62%, rgba(80,131,23,.16), transparent 70%);
  mix-blend-mode:soft-light;}

/* ---- Signature: slow coverage pass ---- */
.sweep{position:absolute;left:0;right:0;top:0;height:2px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(123,176,47,0) 8%,rgba(123,176,47,.7) 50%,rgba(123,176,47,0) 92%,transparent);
  box-shadow:0 0 26px 2px rgba(123,176,47,.28);
  opacity:0;
  animation:pass 11s cubic-bezier(.4,0,.2,1) infinite;}
@keyframes pass{
  0%{transform:translateY(-4vh);opacity:0}
  6%{opacity:.9}
  46%{opacity:.9}
  58%{transform:translateY(104vh);opacity:0}
  100%{transform:translateY(104vh);opacity:0}
}

/* ---- Viewfinder corner ticks ---- */
.hud{position:absolute;inset:20px;z-index:3;pointer-events:none}
.hud span{position:absolute;width:26px;height:26px;border:1.5px solid rgba(123,176,47,.55)}
.hud .tl{top:0;left:0;border-right:0;border-bottom:0}
.hud .tr{top:0;right:0;border-left:0;border-bottom:0}
.hud .bl{bottom:0;left:0;border-right:0;border-top:0}
.hud .br{bottom:0;right:0;border-left:0;border-top:0}

/* ---- Content ---- */
.panel{position:relative;z-index:4;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  gap:22px;padding:64px 24px 20px;}

.eyebrow{font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--green);
  display:flex;align-items:center;gap:.7em}
.eyebrow::before,.eyebrow::after{content:"";width:20px;height:1px;background:var(--green);opacity:.7}

.logo{width:min(300px,64vw);height:auto;filter:drop-shadow(0 14px 34px rgba(0,0,0,.45))}

.headline{display:flex;flex-direction:column;align-items:center;gap:14px}
.headline h1{font-family:var(--display);font-weight:800;
  font-size:clamp(2rem,6.2vw,3.4rem);line-height:1;letter-spacing:-.02em;color:var(--paper)}
.headline h1 .dot{color:var(--green)}
.lead{max-width:46ch;font-size:clamp(1rem,2.4vw,1.12rem);line-height:1.6;color:#dfe4e2}
.lead b{color:var(--paper);font-weight:500}

/* ---- Notify form ---- */
.notify{width:min(440px,90vw);display:flex;flex-direction:column;gap:10px;margin-top:4px}
.flabel{font-family:var(--mono);font-size:.66rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--mute);text-align:left}
.field{display:flex;gap:8px}
.field input{flex:1;min-width:0;font-family:var(--body);font-size:.98rem;color:var(--paper);
  background:rgba(16,23,31,.5);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;backdrop-filter:blur(6px);transition:border-color .18s,background .18s}
.field input::placeholder{color:#8794a0}
.field input:focus{outline:none;border-color:var(--green);
  background:rgba(16,23,31,.7);box-shadow:0 0 0 3px rgba(123,176,47,.22)}
.field button{font-family:var(--display);font-weight:700;font-size:.95rem;
  color:#0d1206;background:var(--green);border:0;border-radius:10px;
  padding:0 22px;cursor:pointer;white-space:nowrap;letter-spacing:.01em;
  transition:transform .12s,background .18s,box-shadow .18s}
.field button:hover{background:#8cc23a;box-shadow:0 8px 22px rgba(123,176,47,.32)}
.field button:active{transform:translateY(1px)}
.field button:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
.consent{font-family:var(--mono);font-size:.66rem;letter-spacing:.02em;color:var(--mute);text-align:left}
.notify.done .field,.notify.done .flabel{display:none}
.thanks{display:none;align-items:center;gap:.6em;font-family:var(--mono);
  font-size:.82rem;letter-spacing:.03em;color:var(--green);text-align:left}
.notify.done .thanks{display:flex}
.thanks svg{flex:0 0 auto}

/* ---- Telemetry footer ---- */
.telemetry{position:relative;z-index:4;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 18px;
  padding:16px 24px calc(16px + env(safe-area-inset-bottom))}
.telemetry .status{color:var(--paper)}
.telemetry .status i{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--green);margin-right:.6em;vertical-align:middle;
  animation:pulse 2.4s ease-out infinite}
.telemetry a{color:var(--mute);text-decoration:none;transition:color .16s}
.telemetry a:hover{color:var(--green)}
.telemetry .sep{opacity:.4}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(123,176,47,.55)}
  70%{box-shadow:0 0 0 7px rgba(123,176,47,0)}
  100%{box-shadow:0 0 0 0 rgba(123,176,47,0)}
}

@media (max-width:560px){
  .hud{inset:12px}
  .panel{gap:18px;padding:52px 20px 16px}
  .logo{width:min(210px,56vw)}
  .field{flex-direction:column}
  .field button{padding:13px 22px}
  .telemetry .sep{display:none}
}

@media (prefers-reduced-motion:reduce){
  .sweep{display:none}
  .telemetry .status i{animation:none}
}

/* keep the admin bar from covering the top ticks for logged-in admins */
body.admin-bar .hud{top:calc(20px + 32px)}