/*
Theme Name: AirShutter
Theme URI: https://airshutter.co.za
Author: HTCO Group
Description: Cinematic one-page theme for AirShutter — aerial filming and 360 fly-throughs. Hero video, showreel popup, work gallery, services and enquiry form. Content is editable under Appearance > Customize > AirShutter.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: airshutter
Tags: one-column, custom-colors, custom-menu, featured-images, full-width-template, video
*/

/* ===================================================================
   AirShutter — cinematic drone film site
   Plain CSS, no build step. Edit colours in :root below.
   =================================================================== */

:root {
  --bg:        #07090f;
  --bg-alt:    #0d111b;
  --surface:   #131826;
  --text:      #eef2fb;
  --muted:     #9aa6bf;
  --line:      rgba(255,255,255,.09);
  --accent:    #e2141b;   /* AirShutter red */
  --accent-hi: #ff2b33;   /* brighter red (hover/glow) */
  --accent-2:  #c9ced8;   /* chrome silver */
  --silver:    #cfd4de;
  --radius:    16px;
  --maxw:      1180px;
  --ease:      cubic-bezier(.22,1,.36,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.brand__text { font-family:'Sora',sans-serif; line-height:1.1; font-weight:700; letter-spacing:-.02em; }
a { color:inherit; text-decoration:none; }
img,video { display:block; max-width:100%; }
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,40px); }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.95em 1.8em; border-radius:100px; font-weight:600; font-size:.95rem;
  cursor:pointer; border:1px solid transparent; transition:transform .25s var(--ease), background .25s, box-shadow .25s;
}
.btn--primary { background:var(--accent); color:#fff; box-shadow:0 8px 30px rgba(226,20,27,.4); }
.btn--primary:hover { transform:translateY(-3px); background:var(--accent-hi); box-shadow:0 14px 44px rgba(226,20,27,.55); }
.btn--ghost { background:rgba(255,255,255,.06); color:#fff; border-color:var(--line); backdrop-filter:blur(6px); }
.btn--ghost:hover { background:rgba(255,255,255,.12); transform:translateY(-3px); }
.btn--full { width:100%; }

/* ---------- Nav ---------- */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition:background .3s, backdrop-filter .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled { background:rgba(7,9,15,.82); backdrop-filter:blur(14px); border-color:var(--line); }
.nav__inner { display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand { display:flex; align-items:center; gap:.6em; font-size:1.2rem; }
.brand__logo { height:38px; width:auto; display:block; }
.brand__text { font-weight:800; letter-spacing:.02em; color:var(--silver); }
.brand__text span { color:var(--accent); }
.nav__links { display:flex; align-items:center; gap:2rem; font-size:.95rem; font-weight:500; }
.nav__links a { color:var(--muted); transition:color .2s; }
.nav__links a:hover { color:#fff; }
.nav__cta { color:#fff !important; border:1px solid var(--line); padding:.6em 1.3em; border-radius:100px; }
.nav__cta:hover { background:var(--accent); color:#fff !important; border-color:var(--accent); }
.nav__toggle { display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav__toggle span { width:24px; height:2px; background:#fff; border-radius:2px; transition:.3s; }

/* ---------- Hero ---------- */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; }
.hero__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.hero__overlay {
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(7,9,15,.7) 100%),
    linear-gradient(180deg, rgba(7,9,15,.55) 0%, rgba(7,9,15,.35) 45%, var(--bg) 100%);
}
.hero__content { position:relative; padding-top:80px; max-width:760px; }
.hero__eyebrow { color:var(--accent); font-weight:600; letter-spacing:.18em; text-transform:uppercase; font-size:.78rem; margin-bottom:1.2rem; }
.hero__title { font-size:clamp(2.8rem,8vw,5.6rem); font-weight:800; }
.hero__sub { color:var(--muted); font-size:clamp(1.05rem,2.4vw,1.3rem); margin:1.6rem 0 2.4rem; max-width:560px; }
.hero__actions { display:flex; flex-wrap:wrap; gap:1rem; }
.hero__trust { display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:3rem; color:var(--muted); font-size:.85rem; font-weight:500; }
.hero__trust span { white-space:nowrap; }
.hero__scroll {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  color:var(--muted); font-size:1.4rem; animation:bob 2s infinite;
}
@keyframes bob { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,8px)} }

/* ---------- Trust strip ---------- */
.strip { background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.strip__inner { display:flex; align-items:center; gap:2rem; padding:1.4rem 0; flex-wrap:wrap; }
.strip__inner > span { color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.15em; white-space:nowrap; }
.strip__items { display:flex; flex-wrap:wrap; gap:2rem 2.6rem; }
.strip__items em { font-style:normal; font-weight:600; color:#cdd6e8; font-size:1.05rem; }

/* ---------- Sections ---------- */
.section { padding:clamp(70px,11vw,130px) 0; }
.section--alt { background:var(--bg-alt); }
.section__head { max-width:640px; margin-bottom:3.2rem; }
.section__eyebrow { color:var(--accent); font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:.76rem; margin-bottom:.9rem; }
.section__title { font-size:clamp(1.9rem,4.5vw,3rem); }

/* ---------- Gallery ---------- */
.gallery { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:230px; gap:1rem; }
.gallery__item {
  position:relative; border-radius:var(--radius); overflow:hidden;
  background-image:linear-gradient(180deg,transparent 40%,rgba(7,9,15,.85)), var(--img);
  background-size:cover; background-position:center;
  display:flex; align-items:flex-end; transition:transform .5s var(--ease);
}
.gallery__item::after { content:""; position:absolute; inset:0; background:var(--accent); opacity:0; mix-blend-mode:overlay; transition:opacity .4s; }
.gallery__item:hover { transform:scale(.985); }
.gallery__item:hover::after { opacity:.25; }
.gallery__item--lg { grid-column:span 2; grid-row:span 1; }
.gallery__meta { position:relative; padding:1.4rem; z-index:2; }
.gallery__meta span { color:var(--accent); font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; font-weight:600; }
.gallery__meta h3 { font-size:1.3rem; margin-top:.2rem; }

/* ---------- Services ---------- */
/* auto-fit rather than a fixed 3 so an odd number of services still balances */
.services { display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:1.2rem; }
.service {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem 1.8rem; transition:transform .35s var(--ease), border-color .35s, background .35s;
}
.service:hover { transform:translateY(-6px); border-color:rgba(226,20,27,.55); background:#171922; }
.service__icon { font-size:2rem; display:block; margin-bottom:1rem; }
.service h3 { font-size:1.22rem; margin-bottom:.6rem; }
.service p { color:var(--muted); font-size:.96rem; }

/* ---------- Process ---------- */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.step { padding:1.8rem 0; border-top:2px solid var(--line); }
.step__num { color:var(--accent); font-family:'Sora',sans-serif; font-weight:800; font-size:1.4rem; }
.step h3 { font-size:1.25rem; margin:.6rem 0 .4rem; }
.step p { color:var(--muted); font-size:.94rem; }

/* ---------- About ---------- */
.about { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.about__media {
  aspect-ratio:4/5; border-radius:var(--radius); background-image:var(--img);
  background-size:cover; background-position:center; border:1px solid var(--line);
}
.about__text p { color:var(--muted); margin-bottom:1.1rem; }
.about__points { list-style:none; margin-top:1.6rem; display:grid; gap:.7rem; }
.about__points li { color:#cdd6e8; font-weight:500; }

/* ---------- Stats ---------- */
.stats { background:linear-gradient(120deg,var(--accent) 0%, #8f0d12 100%); color:#fff; }
.stats__inner { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; padding:clamp(40px,7vw,72px) 0; text-align:center; }
.stat strong { font-family:'Sora',sans-serif; font-size:clamp(2.4rem,6vw,3.6rem); font-weight:800; display:block; line-height:1; }
.stat span { font-weight:600; opacity:.8; font-size:.95rem; }

/* ---------- Contact ---------- */
.contact__inner { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.contact__text p { color:var(--muted); }
.contact__list { list-style:none; margin:1.8rem 0; display:grid; gap:.9rem; font-weight:500; }
.contact__list a:hover { color:var(--accent); }
.contact__social { display:flex; gap:1.4rem; flex-wrap:wrap; }
.contact__social a { color:var(--muted); font-weight:600; border-bottom:1px solid transparent; transition:.2s; }
.contact__social a:hover { color:var(--accent); border-color:var(--accent); }
.form { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.6rem,4vw,2.4rem); display:grid; gap:1.1rem; }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.form label { display:grid; gap:.45rem; font-size:.85rem; font-weight:600; color:#cdd6e8; }
.form input,.form select,.form textarea {
  background:var(--bg); border:1px solid var(--line); border-radius:10px;
  padding:.85em 1em; color:#fff; font-family:inherit; font-size:.95rem; transition:border-color .2s;
}
.form input:focus,.form select:focus,.form textarea:focus { outline:none; border-color:var(--accent); }
.form textarea { resize:vertical; }

/* ---------- Footer ---------- */
.footer { background:var(--bg-alt); border-top:1px solid var(--line); padding:2.5rem 0; }
.footer__inner { display:flex; align-items:center; justify-content:space-between; gap:1.4rem; flex-wrap:wrap; }
.footer p { color:var(--muted); font-size:.88rem; }
.footer__links { display:flex; gap:1.4rem; }
.footer__links a { color:var(--muted); font-size:.9rem; transition:color .2s; }
.footer__links a:hover { color:#fff; }

/* ---------- Reveal animation ---------- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .nav__links {
    position:fixed; inset:72px 0 auto 0; flex-direction:column; gap:0;
    background:rgba(7,9,15,.97); backdrop-filter:blur(16px); border-bottom:1px solid var(--line);
    padding:1rem 0; transform:translateY(-120%); transition:transform .4s var(--ease); pointer-events:none;
  }
  .nav__links.open { transform:none; pointer-events:auto; }
  .nav__links a { padding:1rem 8vw; width:100%; }
  .nav__cta { margin:.6rem 8vw; text-align:center; }
  .nav__toggle { display:flex; }
  .gallery { grid-template-columns:repeat(2,1fr); grid-auto-rows:200px; }
  .gallery__item--lg { grid-column:span 2; }
  .services,.steps,.stats__inner { grid-template-columns:repeat(2,1fr); }
  .about,.contact__inner { grid-template-columns:1fr; }
  .about__media { aspect-ratio:16/10; }
}
@media (max-width:520px){
  .services,.steps,.gallery { grid-template-columns:1fr; }
  .gallery__item--lg { grid-column:span 1; }
  .form__row { grid-template-columns:1fr; }
  .hero__trust { gap:1rem; }
}

/* ============ SHOWREEL FEATURE ============ */
.reel-feature {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: center;
  margin-bottom: 40px;
}
.reel-feature__play {
  position: relative;
  border: 0;
  padding: 0;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--img) center/cover no-repeat, #05070c;
  display: grid;
  place-items: center;
  transition: transform .35s ease;
}
.reel-feature__play::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7,9,15,.55), rgba(7,9,15,.05));
  transition: background .3s ease;
}
.reel-feature__play:hover { transform: scale(1.012); }
.reel-feature__play:hover::after { background: linear-gradient(to top, rgba(7,9,15,.4), rgba(7,9,15,0)); }
.reel-feature__icon {
  position: relative;
  z-index: 1;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(226,20,27,.92);
  color: #fff;
  font-size: 26px;
  display: grid;
  place-items: center;
  padding-left: 5px;
  box-shadow: 0 10px 40px rgba(226,20,27,.45);
  transition: transform .3s ease;
}
.reel-feature__play:hover .reel-feature__icon { transform: scale(1.08); }
.reel-feature__meta h3 { font-size: 1.6rem; margin: .3rem 0 .8rem; }
.reel-feature__meta p { color: var(--muted, #9aa1b1); line-height: 1.7; margin-bottom: 1.4rem; }

@media (max-width: 820px) {
  .reel-feature { grid-template-columns: 1fr; gap: 22px; }
}

/* ============ SHOWREEL MODAL ============ */
.reel-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(3, 4, 8, .93);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 5vw;
  animation: reelIn .22s ease;
}
.reel-modal[hidden] { display: none; }
@keyframes reelIn { from { opacity: 0; } to { opacity: 1; } }
.reel-modal__inner { width: min(1200px, 100%); }
.reel-modal video {
  width: 100%;
  border-radius: 12px;
  display: block;
  box-shadow: 0 30px 90px rgba(0,0,0,.7);
}
.reel-modal__close {
  position: absolute;
  top: 22px;
  right: 26px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background .2s ease;
}
.reel-modal__close:hover { background: rgba(255,255,255,.14); }

/* Gallery tiles are now stills, not links — keep the hover lift, drop the pointer. */
.gallery__item { cursor: default; }

/* ============ HERO SLIDER ============ */
.hero__slides { position: absolute; inset: 0; overflow: hidden; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
  will-change: opacity;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide .hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Copy blocks stack so the crossfade doesn't reflow the page. */
.hero__content { position: relative; }
.hero__copy {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
  pointer-events: none;
}
.hero__copy.is-active { opacity: 1; transform: none; pointer-events: auto; }
.hero__copy:not(.is-active) {
  position: absolute; top: 0; left: 0; right: 0;
}

.hero__dots {
  position: absolute; bottom: 2.6rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; z-index: 4;
}
.hero__dot {
  width: 34px; height: 4px; border: 0; padding: 0; cursor: pointer;
  border-radius: 3px; background: rgba(255,255,255,.28);
  transition: background .3s ease, width .3s ease;
}
.hero__dot:hover { background: rgba(255,255,255,.5); }
.hero__dot.is-active { background: var(--accent, #e2141b); width: 52px; }

@media (max-width: 640px) {
  .hero__dots { bottom: 1.8rem; }
  .hero__dot { width: 26px; }
  .hero__dot.is-active { width: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide, .hero__copy { transition: none; }
}

/* ============ HERO LEGIBILITY ============ */
/* The slider runs footage of wildly different brightness — a dark sunset and a
   bright midday BMX park. A top-down scrim alone is only tuned for the dark
   one, so the copy gets a left-weighted bed that works for both. */
.hero__overlay {
  background:
    linear-gradient(100deg,
      rgba(7,9,15,.88) 0%,
      rgba(7,9,15,.66) 34%,
      rgba(7,9,15,.24) 62%,
      rgba(7,9,15,.06) 82%,
      transparent 100%),
    radial-gradient(120% 90% at 50% 0%, transparent 45%, rgba(7,9,15,.6) 100%),
    linear-gradient(180deg, rgba(7,9,15,.5) 0%, rgba(7,9,15,.2) 45%, var(--bg) 100%);
}

/* Muted grey reads fine on a dark still and disappears on a bright frame. */
.hero__sub { color: rgba(255,255,255,.88); text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.hero__trust { color: rgba(255,255,255,.8); text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.hero__eyebrow { text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.hero__title { text-shadow: 0 2px 30px rgba(0,0,0,.4); }

@media (max-width: 820px) {
  /* Copy goes full width on phones, so weight the scrim bottom-up instead. */
  .hero__overlay {
    background:
      linear-gradient(180deg,
        rgba(7,9,15,.5) 0%,
        rgba(7,9,15,.42) 30%,
        rgba(7,9,15,.78) 72%,
        var(--bg) 100%);
  }
}

/* ============ HERO COPY STACKING ============ */
/* Both copy blocks occupy the same grid cell so they cross-fade in place
   instead of overlapping as two separately-flowed headings. Grid sizes the
   cell to the taller of the two, so nothing below it shifts on transition. */
.hero__copies { display: grid; }
.hero__copies > .hero__copy { grid-area: 1 / 1; }
.hero__copy:not(.is-active) { position: static; }

/* ---------- Enquiry confirmation ---------- */
.as-notice {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 300; padding: 12px 22px; border-radius: 9px; font-size: .95rem;
  box-shadow: 0 12px 34px rgba(0,0,0,.5); max-width: 90vw;
}
.as-notice--ok  { background: #0e2a1d; color: #6ee7a8; border: 1px solid rgba(41,192,122,.45); }
.as-notice--err { background: #2a0e10; color: #ff9a9a; border: 1px solid rgba(226,20,27,.45); }
.reel-modal__embed iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: 12px; }


/* ============ WORDPRESS ADMIN BAR ============ */
/* The nav is position:fixed at top:0, so when an admin is logged in WordPress's
   32px bar sits on top of it and slices the brand in half — it reads as
   "SHUTTER". Visitors never see this; admins see it on every page. */
body.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .nav { top: 46px; }
}


/* ============ HERO CROP POSITION ============ */
/* A 16:9 video in a wider-than-16:9 window loses ~10% vertically to
   object-fit:cover. Centred, that takes half off the top — which on the BMX
   slide slices straight through the rider at the peak of the flip. Bias the
   crop upward so the action survives and the loss comes off the empty ground
   at the bottom instead. Wilderness stays centred: its interest (waves, beach)
   sits low, so cropping its bottom would cost more than its sky. */
.hero__slide[data-slide="1"] .hero__video { object-position: 50% 12%; }