/*
Theme Name: Alfareedfly Coming Soon
Theme URI: https://alfareedfly.com
Author: Alfareedfly
Author URI: https://alfareedfly.com
Description: A single-page "coming soon" theme for Alfareedfly.com with an animated compass clock and full contact details.
Version: 1.0
Requires at least: 5.6
Requires PHP: 7.2
Text Domain: alfareedfly
*/

/* ---------- Tokens ---------- */
:root{
  --navy-deep:   #0e1620;
  --navy:        #16212f;
  --navy-glass:  rgba(22,33,47,0.55);
  --ivory:       #f3efe6;
  --steel:       #8a97ab;
  --gold:        #c9a961;
  --gold-dim:    rgba(201,169,97,0.35);
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  background: var(--navy-deep);
  color: var(--ivory);
  font-family: var(--font-body);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---------- Skyline backdrop ---------- */
.af-hero{
  position:relative;
  min-height:100vh;
  width:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(201,169,97,0.07), transparent 55%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-deep) 100%);
}

.af-skyline{
  position:absolute;
  left:0; right:0; bottom:0;
  width:100%;
  height:38vh;
  min-height:220px;
  fill: rgba(6,10,15,0.65);
  z-index:1;
}

.af-flighttrail{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  z-index:0;
  opacity:0.5;
}
.af-flighttrail path{
  fill:none;
  stroke: var(--gold);
  stroke-width:1;
  stroke-dasharray: 6 10;
  opacity:0.35;
  animation: af-dash 40s linear infinite;
}
@keyframes af-dash{ to{ stroke-dashoffset:-1000; } }

.af-stars{
  position:absolute; inset:0; z-index:0;
}
.af-stars span{
  position:absolute;
  width:2px; height:2px;
  background: var(--ivory);
  border-radius:50%;
  opacity:0.25;
  animation: af-twinkle 4s ease-in-out infinite;
}
@keyframes af-twinkle{ 0%,100%{opacity:0.15;} 50%{opacity:0.6;} }

/* ---------- Top bar ---------- */
.af-topbar{
  position:relative; z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 34px 6vw 0;
}

.af-logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform:uppercase;
  color: var(--ivory);
}
.af-logo-mark{
  width:34px; height:34px;
  border:1px solid var(--gold-dim);
  display:flex; align-items:center; justify-content:center;
  border-radius:2px;
}
.af-logo-mark svg{ width:16px; height:16px; }
.af-logo b{ font-weight:600; color:var(--gold); }

.af-topnav{
  display:flex; gap:26px;
  font-family: var(--font-mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--steel);
}
.af-topnav a{ transition: color .2s ease; }
.af-topnav a:hover{ color: var(--gold); }

/* ---------- Center content ---------- */
.af-center{
  position:relative; z-index:5;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 60px 20px 40px;
}

.af-compass{
  position:relative;
  width:300px; height:300px;
  margin-bottom:36px;
}
@media (max-width:600px){
  .af-compass{ width:220px; height:220px; }
}

.af-compass svg{ width:100%; height:100%; overflow:visible; }

.af-ring-outer{
  fill:none;
  stroke: var(--gold-dim);
  stroke-width:1;
}
.af-ring-pulse{
  fill:none;
  stroke: var(--gold);
  stroke-width:1;
  opacity:0.5;
  transform-origin:center;
  animation: af-pulse 3.4s ease-out infinite;
}
@keyframes af-pulse{
  0%{ transform:scale(0.72); opacity:0.55; }
  100%{ transform:scale(1.18); opacity:0; }
}

.af-tick{ stroke: var(--steel); stroke-width:1; }
.af-tick.long{ stroke: var(--gold); }

.af-sweep{
  transform-origin:150px 150px;
  animation: af-rotate 12s linear infinite;
}
@media (max-width:600px){ .af-sweep{ transform-origin:110px 110px; } }

@keyframes af-rotate{ to{ transform: rotate(360deg); } }

.af-sweep-line{
  stroke: var(--gold);
  stroke-width:1.4;
  stroke-linecap:round;
}
.af-plane{ fill: var(--gold); }

.af-compass-copy{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  pointer-events:none;
}
.af-eyebrow{
  font-family: var(--font-mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color: var(--steel);
  margin:0 0 10px;
}
.af-headline{
  font-family: var(--font-display);
  font-weight:600;
  font-size: clamp(28px, 5vw, 44px);
  line-height:1.05;
  letter-spacing:0.02em;
  text-transform:uppercase;
  margin:0;
  color: var(--ivory);
}
.af-headline em{
  display:block;
  font-style:normal;
  color: var(--gold);
}

.af-sub{
  font-family: var(--font-mono);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color: var(--steel);
  margin-top: 18px;
}

/* ---------- Contact block ---------- */
.af-contact{
  position:relative; z-index:5;
  width:min(720px, 92vw);
  margin: 8px auto 0;
  padding: 26px 28px;
  border-top: 1px solid rgba(243,239,230,0.12);
  border-bottom: 1px solid rgba(243,239,230,0.12);
  background: var(--navy-glass);
  backdrop-filter: blur(6px);
  border-radius:4px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap: 14px 34px;
}

.af-contact-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-mono);
  font-size:13px;
  letter-spacing:0.03em;
  color: var(--ivory);
}
.af-contact-item svg{ width:16px; height:16px; flex:none; stroke: var(--gold); }
.af-contact-item a{ transition: color .2s ease; }
.af-contact-item a:hover{ color: var(--gold); }

.af-contact-divider{
  width:1px; height:18px;
  background: rgba(243,239,230,0.15);
}
@media (max-width:600px){ .af-contact-divider{ display:none; } }

/* ---------- Social rail ---------- */
.af-social{
  position:fixed;
  right: 28px; top:50%;
  transform: translateY(-50%);
  z-index:6;
  display:flex; flex-direction:column; gap:16px;
}
.af-social a{
  width:34px; height:34px;
  border:1px solid rgba(243,239,230,0.18);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.af-social a svg{ width:14px; height:14px; fill: var(--ivory); }
.af-social a:hover{
  border-color: var(--gold);
  background: rgba(201,169,97,0.12);
  transform: translateY(-2px);
}
@media (max-width:780px){
  .af-social{ display:none; }
}

/* ---------- Footer strip ---------- */
.af-foot{
  position:relative; z-index:5;
  text-align:center;
  padding: 18px 20px 26px;
  font-family: var(--font-mono);
  font-size:10.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color: rgba(138,151,171,0.7);
}

/* ---------- Motion respect ---------- */
@media (prefers-reduced-motion: reduce){
  .af-sweep, .af-ring-pulse, .af-flighttrail path, .af-stars span{
    animation: none !important;
  }
}

/* ---------- Entrance ---------- */
.af-fade-up{
  opacity:0;
  animation: af-fadeUp 0.9s ease forwards;
}
@keyframes af-fadeUp{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}