/* AutoMinds Africa — V4 visual enhancement layer */

/* =========================================================
   BUSINESS FLIGHT STORY — REAL PLANE + PREMIUM WEATHER
   ========================================================= */
.business-flight-rail{
  height:360px;
  background:#fff;
  box-shadow:inset 0 1px 0 rgba(10,38,66,.04);
}
.flight-half{bottom:46px}
.flight-before{
  background:
    radial-gradient(circle at 16% 90%,rgba(79,96,114,.12),transparent 26%),
    linear-gradient(180deg,#dfe4e9 0%,#cfd6dc 47%,#e7ebee 100%);
}
.flight-before::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(93,108,123,.10),transparent 35%,rgba(255,255,255,.12) 70%,rgba(103,118,133,.10));
  animation:stormHaze 6s ease-in-out infinite alternate;
}
.flight-after{
  background:
    radial-gradient(circle at 78% 24%,rgba(255,184,65,.18),transparent 20%),
    linear-gradient(180deg,#d9f1ff 0%,#eff9ff 50%,#fff8e5 100%);
}
.flight-after::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(125deg,transparent 0 50%,rgba(255,255,255,.36) 60%,transparent 73%);
  animation:sunSweep 8s ease-in-out infinite;
}
@keyframes stormHaze{from{opacity:.42;transform:translateX(-1%)}to{opacity:.72;transform:translateX(1.5%)}}
@keyframes sunSweep{0%,100%{transform:translateX(-18%);opacity:.15}50%{transform:translateX(17%);opacity:.55}}

.storm-cloud{background:#9ca7b2;filter:blur(.15px) drop-shadow(0 12px 14px rgba(47,62,78,.14));opacity:.92;animation:cloudDrift 11s ease-in-out infinite alternate}
.storm-cloud.c2{animation-duration:15s}.storm-cloud.c3{animation-duration:9s}
@keyframes cloudDrift{from{margin-left:-12px}to{margin-left:20px}}

/* Multi-depth rain: far, mid and near streaks */
.rain-field{inset:64px 0 0;background:none!important;opacity:1!important;overflow:hidden}
.rain-field::before,.rain-field::after{content:"";position:absolute;inset:-38% -12% 0;pointer-events:none;will-change:transform;background-repeat:repeat}
.rain-field::before{
  background-image:
    repeating-linear-gradient(108deg,transparent 0 22px,rgba(67,85,103,.22) 23px 24px,transparent 25px 49px),
    repeating-linear-gradient(106deg,transparent 0 41px,rgba(109,128,146,.15) 42px 43px,transparent 44px 78px);
  background-size:100% 76px,100% 115px;
  filter:blur(.2px);
  animation:rainFar 1.25s linear infinite;
}
.rain-field::after{
  background-image:
    repeating-linear-gradient(110deg,transparent 0 52px,rgba(49,70,90,.34) 53px 55px,transparent 56px 93px),
    repeating-linear-gradient(107deg,transparent 0 71px,rgba(59,80,100,.22) 72px 74px,transparent 75px 131px);
  background-size:100% 145px,100% 185px;
  filter:blur(.45px);
  animation:rainNear .72s linear infinite;
}
@keyframes rainFar{to{transform:translate(-42px,112px)}}
@keyframes rainNear{to{transform:translate(-64px,190px)}}

.flight-before .flight-ground{
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(100,113,126,.16));
  box-shadow:inset 0 10px 24px rgba(60,72,84,.08);
}
.flight-before .flight-ground::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);opacity:.65;
}
.flight-after .flight-ground{background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,248,223,.58))}
.sun-orb{width:70px;height:70px;box-shadow:0 0 0 18px rgba(255,177,59,.08),0 0 72px rgba(255,177,59,.35)}
.clear-cloud{animation:clearCloudDrift 10s ease-in-out infinite alternate}
.clear-cloud.b{animation-duration:14s}
@keyframes clearCloudDrift{to{transform:translateX(28px) scale(.92)}}

/* Use the real uploaded transparent plane asset — never render a card/panel behind it */
.flight-plane{
  width:108px;
  height:78px;
  padding:0!important;
  margin:0;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background-color:transparent!important;
  background-image:url("airplane-take-off-svgrepo-com.png")!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  animation:realPlaneJourney 13s cubic-bezier(.36,.03,.42,.98) infinite;
  transform-origin:50% 55%;
  filter:drop-shadow(0 12px 15px rgba(6,24,45,.20));
  overflow:visible!important;
  isolation:isolate;
}
.flight-plane::before{content:none!important;display:none!important;background:none!important;box-shadow:none!important;border:0!important}
.flight-plane svg{display:none!important}
.flight-plane::after{
  content:"";position:absolute;width:58px;height:2px;right:74%;top:63%;background:linear-gradient(90deg,transparent,rgba(20,92,255,.35));filter:blur(1px);opacity:0;animation:contrail 13s ease-in-out infinite;
}
@keyframes contrail{0%,44%{opacity:0}55%,92%{opacity:.85}100%{opacity:0}}
@keyframes realPlaneJourney{
  0%{left:-10%;top:74%;transform:rotate(-11deg) scale(.88)}
  8%{left:2%;top:58%;transform:rotate(8deg) scale(.9)}
  16%{left:12%;top:67%;transform:rotate(-7deg) scale(.92)}
  24%{left:22%;top:49%;transform:rotate(7deg) scale(.95)}
  32%{left:31%;top:61%;transform:rotate(-5deg) scale(.98)}
  40%{left:40%;top:45%;transform:rotate(6deg) scale(1)}
  48%{left:48%;top:50%;transform:rotate(1deg) scale(1.02)}
  53%{left:53%;top:43%;transform:rotate(-7deg) scale(1.03)}
  62%{left:63%;top:34%;transform:rotate(-11deg) scale(1.04)}
  72%{left:73%;top:24%;transform:rotate(-14deg) scale(1.05)}
  82%{left:83%;top:12%;transform:rotate(-17deg) scale(1.06)}
  91%{left:93%;top:-4%;transform:rotate(-20deg) scale(1.07)}
  100%{left:108%;top:-38%;transform:rotate(-22deg) scale(1.08)}
}
.flight-label-strip{height:46px;background:rgba(248,251,255,.96);backdrop-filter:blur(10px)}

/* =========================================================
   HOMEPAGE NFC VIDEO
   ========================================================= */
.home-nfc-media{position:relative;aspect-ratio:16/9;min-height:230px;background:var(--am-navy);border:1px solid #244a72;overflow:hidden;box-shadow:0 18px 34px rgba(6,24,45,.12)}
.home-nfc-media video{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.home-video-badge{position:absolute;left:14px;top:14px;z-index:5;padding:8px 10px;background:rgba(6,24,45,.84);border:1px solid rgba(255,255,255,.15);color:#fff;font:600 9px var(--am-mono);letter-spacing:.12em}
.home-unmute-wrap{position:absolute;right:14px;bottom:52px;z-index:6;display:flex;align-items:center;gap:8px}
.home-unmute-cue{padding:9px 10px;background:rgba(6,24,45,.94);color:#fff;border:1px solid rgba(255,255,255,.16);font:600 8px var(--am-mono);letter-spacing:.1em;animation:homeCue 1.1s ease-in-out infinite}
.home-unmute-cue::after{content:"  ↘";color:var(--am-orange);font-size:14px}
.home-unmute-btn{border:0;background:var(--am-orange);color:#07111d;padding:11px 13px;font:800 9px var(--am-mono);letter-spacing:.08em;cursor:pointer;box-shadow:0 10px 25px rgba(255,121,0,.28)}
.home-unmute-wrap.sound-on .home-unmute-cue{opacity:0;pointer-events:none;animation:none}
@keyframes homeCue{50%{transform:translate(-5px,-3px)}}
.project-feature:has(.home-nfc-media){background:linear-gradient(135deg,#fff 0 62%,#eef5ff 62%)}

/* Mini real-media preview for the Smart Card project */
.project-card-visual.smart-video-preview{padding:0!important;background:#06182d!important;overflow:hidden}
.project-card-visual.smart-video-preview::before,.project-card-visual.smart-video-preview::after{display:none!important}
.project-card-visual.smart-video-preview video{display:block;width:100%;height:100%;min-height:240px;object-fit:cover;background:#000}

/* =========================================================
   ANIMATED PLACEHOLDERS FOR MEDIA WE DO NOT HAVE YET
   ========================================================= */
.project-card-visual.animated-placeholder{
  min-height:255px;position:relative;overflow:hidden;background-color:#071a31!important;
  background-image:
    radial-gradient(circle at 18% 25%,rgba(255,121,0,.95) 0 3px,transparent 4px),
    radial-gradient(circle at 71% 33%,rgba(20,92,255,.95) 0 3px,transparent 4px),
    radial-gradient(circle at 38% 73%,rgba(255,255,255,.55) 0 2px,transparent 3px),
    radial-gradient(circle at 84% 74%,rgba(20,92,255,.65) 0 2px,transparent 3px),
    linear-gradient(90deg,rgba(99,146,195,.10) 1px,transparent 1px),
    linear-gradient(rgba(99,146,195,.09) 1px,transparent 1px),
    linear-gradient(145deg,#081d36,#06182d)!important;
  background-size:auto,auto,auto,auto,28px 28px,28px 28px,auto!important;
  border-bottom:1px solid #163857;
}
.project-card-visual.animated-placeholder::before{
  content:""!important;display:block!important;position:absolute!important;left:10%!important;right:10%!important;top:18%!important;height:46%!important;
  border:1px solid rgba(91,144,201,.56)!important;background:linear-gradient(135deg,rgba(20,92,255,.08),rgba(255,121,0,.04))!important;
  clip-path:none!important;animation:placeholderFloat 4.8s ease-in-out infinite!important;
  box-shadow:22px 28px 0 -12px rgba(20,92,255,.11),-18px 48px 0 -17px rgba(255,121,0,.16)!important;
}
.project-card-visual.animated-placeholder::after{
  content:attr(data-placeholder)!important;display:block!important;position:absolute!important;left:18px!important;right:auto!important;bottom:16px!important;top:auto!important;
  width:auto!important;height:auto!important;padding:8px 10px!important;background:rgba(6,24,45,.88)!important;color:#bcd0e5!important;border:1px solid rgba(112,153,196,.24)!important;
  font:600 8px var(--am-mono)!important;letter-spacing:.12em!important;clip-path:none!important;animation:placeholderStatus 1.8s ease-in-out infinite!important;
}
.project-card-visual.animated-placeholder .placeholder-scan{position:absolute;left:8%;right:8%;top:18%;height:2px;background:linear-gradient(90deg,transparent,var(--am-blue),var(--am-orange),transparent);box-shadow:0 0 14px rgba(20,92,255,.45);animation:scanDown 3.1s ease-in-out infinite}
.project-card-visual.animated-placeholder .placeholder-ring{position:absolute;width:92px;height:92px;border:1px dashed rgba(104,159,216,.28);border-radius:50%;right:12%;top:27%;animation:ringSpin 9s linear infinite}
.project-card-visual.animated-placeholder .placeholder-ring::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--am-orange);left:6px;top:13px;box-shadow:0 0 18px rgba(255,121,0,.5)}
@keyframes placeholderFloat{50%{transform:translateY(-8px) rotate(.4deg);border-color:rgba(255,121,0,.4)}}
@keyframes placeholderStatus{50%{opacity:.58}}
@keyframes scanDown{0%{top:20%;opacity:0}15%{opacity:1}80%{opacity:1}100%{top:73%;opacity:0}}
@keyframes ringSpin{to{transform:rotate(360deg)}}

/* Live-site browser-like animated preview — not a missing-media placeholder */
.project-card-visual.live-browser-preview{min-height:255px;background:linear-gradient(145deg,#06182d,#0a2848)!important;position:relative;overflow:hidden}
.project-card-visual.live-browser-preview::before{content:"AUTOMINDS AFRICA / LIVE"!important;position:absolute!important;left:10%!important;right:10%!important;top:16%!important;height:57%!important;background:linear-gradient(#f8fbff 0 20%,#eaf2fb 20% 21%,#fff 21%)!important;border:1px solid #5c7b9e!important;color:#0a2442!important;padding:16px!important;font:600 8px var(--am-mono)!important;letter-spacing:.1em!important;clip-path:none!important;animation:browserGlow 4s ease-in-out infinite!important}
.project-card-visual.live-browser-preview::after{content:"LIVE SITE ↗"!important;position:absolute!important;right:18px!important;bottom:16px!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;color:#8fb9e8!important;font:600 8px var(--am-mono)!important;letter-spacing:.12em!important;clip-path:none!important;background:none!important}
@keyframes browserGlow{50%{box-shadow:0 0 35px rgba(20,92,255,.22);transform:translateY(-3px)}}

/* =========================================================
   FOOTER — REAL LOGO, NO WHITE PLACEHOLDER BLOCK
   ========================================================= */
.footer-v3-brand img{
  width:min(240px,90%)!important;height:auto!important;max-height:88px!important;
  background:transparent!important;padding:0!important;object-fit:contain!important;object-position:left center!important;
  filter:drop-shadow(0 9px 18px rgba(0,0,0,.18));
}
.footer-v3-brand{background:linear-gradient(145deg,rgba(20,92,255,.035),transparent 55%)}

/* Naming emphasis */
.smart-solutions-accent{color:var(--am-orange)}

@media(max-width:900px){
  .business-flight-rail{height:330px}.flight-plane{width:88px;height:66px}
  .home-nfc-media{min-height:200px}.project-card-visual.smart-video-preview video{min-height:220px}
}
@media(max-width:600px){
  .business-flight-rail{height:300px}.flight-plane{width:72px;height:54px}.flight-scene-label{max-width:155px}.flight-divider::before{top:70px}
  .home-nfc-media{min-height:178px}.home-unmute-wrap{right:8px;bottom:46px}.home-unmute-cue{display:none}.home-unmute-btn{padding:9px 10px;font-size:8px}
  .project-card-visual.animated-placeholder,.project-card-visual.live-browser-preview{min-height:210px}.project-card-visual.smart-video-preview video{min-height:210px}
  .footer-v3-brand img{width:180px!important;max-height:72px!important}
}

@media(prefers-reduced-motion:reduce){
  .storm-cloud,.rain-field::before,.rain-field::after,.flight-plane,.flight-after::after,.project-card-visual.animated-placeholder::before,.project-card-visual.animated-placeholder::after,.placeholder-scan,.placeholder-ring{animation:none!important}
}