/* Opening screen A — photo splash + carousel. Camo colors. New users only. */

/* Splash photo must fill the screen; app.css otherwise shrinks all .splash img. */
.splash-hero picture{
  position:absolute;inset:0;margin:0;z-index:0;
}
.splash-hero picture img{
  width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 42%;
  display:block;
}
.splash.splash-hero{
  padding:0;background:#3a3d28;align-items:flex-end;justify-content:center;
}
.splash-hero .splash-scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(28,32,14,.55) 0%,rgba(28,32,14,.18) 45%,rgba(28,32,14,.08) 100%);
  pointer-events:none;
}
.splash-hero .splash-logo{
  position:relative;z-index:2;width:min(320px,82vw);margin:0 auto;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.65));
  padding:0 16px calc(48px + env(safe-area-inset-bottom));
}

.firstrun{
  position:fixed;inset:0;z-index:80;background:#3a3d28;color:#f9f6ef;
  display:flex;flex-direction:column;
}
.firstrun[hidden]{display:none !important}
.firstrun-slides{flex:1;position:relative;min-height:0}
.firstrun-slide{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  opacity:0;pointer-events:none;transition:opacity .4s ease;
}
.firstrun-slide.is-on{opacity:1;pointer-events:auto}
.firstrun-slide .shot{position:absolute;inset:0;margin:0}
.firstrun-slide .shot img,
.firstrun-slide .shot picture,
.firstrun-slide .shot picture img{
  width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 42%;
}
.firstrun-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(28,32,14,.62) 0%,rgba(28,32,14,.22) 46%,rgba(28,32,14,.08) 72%,transparent 100%);
}
.firstrun-slide .copy{
  position:relative;z-index:2;
  padding:20px 22px 10px;
  color:#f9f6ef;
}
.firstrun-slide h1, .firstrun-slide h2{
  font-size:clamp(1.85rem,7.2vw,2.55rem);line-height:1.12;letter-spacing:-.02em;
  margin:0 0 .55rem;color:#f9f6ef;text-shadow:0 2px 16px rgba(0,0,0,.7);max-width:16ch;font-weight:800;
}
.firstrun-slide p.lead{
  margin:0 0 .2rem;color:#f9f6ef;font-size:1.05rem;max-width:32em;
  text-shadow:0 1px 8px rgba(0,0,0,.75);
}
.firstrun-logo{
  width:min(260px,72vw);height:auto;margin:0 0 14px;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.65));
}
.firstrun-bar{
  position:relative;z-index:3;
  display:flex;flex-direction:column;gap:10px;
  padding:8px 22px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(28,32,14,.5) 0%,rgba(28,32,14,.18) 70%,transparent 100%);
  border:0;
}
.firstrun-bar .btn.primary{
  min-height:52px;border-radius:14px;font-size:1.05rem;font-weight:800;
  background:#f7c600;border-color:#f7c600;color:#1a170e;width:100%;
}
.firstrun-bar-row{display:flex;align-items:center;gap:10px}
.firstrun-dots{display:flex;gap:6px;flex:1;align-items:center}
.firstrun-dots button{
  width:8px;height:8px;padding:0;border-radius:50%;border:0;background:rgba(243,239,228,.45);cursor:pointer;
  min-width:8px;min-height:8px;
}
.firstrun-dots button[aria-current="true"]{background:#f7c600;width:18px;border-radius:99px}
.firstrun-skip,.firstrun-credit{
  background:none;border:0;color:#f9f6ef;font:inherit;font-weight:600;cursor:pointer;
  min-height:44px;padding:0;text-shadow:0 1px 6px rgba(0,0,0,.7);opacity:.92;
}
.firstrun-credit{font-size:.78rem;font-weight:600;text-decoration:none;min-height:0;opacity:.8}
.firstrun-credit:hover{opacity:1}
.firstrun-progress{
  height:3px;background:rgba(243,239,228,.25);border-radius:99px;overflow:hidden;margin:0 0 8px;
}
.firstrun-progress > span{
  display:block;height:100%;width:0;background:#f7c600;
  transform-origin:left center;
}
.firstrun.is-autoplay .firstrun-progress > span{
  animation:open-progress 5s linear forwards;
}
@keyframes open-progress{from{width:0}to{width:100%}}

body.firstrun-open{overflow:hidden}

iframe[title="Netlify Badge"], .netlify-badge, #netlify-badge, [data-netlify-badge]{display:none !important}

@media (prefers-reduced-motion:reduce){
  .firstrun-slide{transition:none}
  .firstrun.is-autoplay .firstrun-progress > span{animation:none;width:0}
  .splash{transition:none}
}
