/* Adventure Checklist — cinematic landing page */
:root{
  --landing-lime:#c9df55;
  --landing-lime-soft:#a9c94a;
  --landing-forest:#07160f;
  --landing-glass:rgba(7,20,13,.62);
  --landing-glass-strong:rgba(5,17,11,.82);
  --landing-line:rgba(211,233,166,.22);
}

/* The existing app keeps the authentication logic in app.js/auth.js.
   This stylesheet only transforms the unauthenticated landing experience. */
#s-login{
  display:none;
  min-height:100svh;
  align-items:stretch;
  justify-content:flex-start;
  background:#06120c;
  color:#fff;
}
#s-login.active{display:flex;}

.landing-page{
  position:relative;
  width:100%;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:#07140d;
}

.landing-hero-bg,
.landing-hero-overlay,
.landing-grain{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.landing-hero-bg{
  z-index:-4;
  background-image:url('../assets/adventures/hike-dashboard-bg.webp');
  background-size:cover;
  background-position:center 48%;
  transform:scale(1.06);
  animation:landing-hero-drift 18s ease-in-out infinite alternate;
  will-change:transform;
}

.landing-hero-overlay{
  z-index:-3;
  background:
    radial-gradient(circle at 76% 22%,rgba(221,179,102,.20),transparent 25%),
    linear-gradient(90deg,rgba(3,13,8,.90) 0%,rgba(4,17,10,.68) 37%,rgba(3,13,8,.46) 66%,rgba(3,13,8,.66) 100%),
    linear-gradient(180deg,rgba(2,11,7,.34) 0%,rgba(2,11,7,.05) 36%,rgba(2,10,6,.82) 100%);
}

.landing-grain{
  z-index:-2;
  opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

.landing-orb{
  position:absolute;
  z-index:-1;
  width:420px;
  height:420px;
  border-radius:50%;
  right:-160px;
  top:-180px;
  background:radial-gradient(circle,rgba(201,223,85,.12),transparent 68%);
  filter:blur(8px);
  pointer-events:none;
}

.landing-nav{
  position:relative;
  z-index:5;
  width:min(1240px,calc(100% - 48px));
  margin:0 auto;
  padding:24px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.landing-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#fff;
}
.landing-brand-mark{
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid rgba(201,223,85,.78);
  background:rgba(3,15,9,.52);
  padding:4px;
  box-shadow:0 0 30px rgba(201,223,85,.12);
}
.landing-brand-name{
  display:flex;
  flex-direction:column;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:14px;
  font-weight:850;
}
.landing-brand-name span:last-child{
  color:var(--landing-lime);
  font-size:11px;
  margin-top:5px;
  letter-spacing:.28em;
}

.landing-nav-links{
  display:flex;
  align-items:center;
  gap:30px;
}
.landing-nav-links a{
  color:rgba(255,255,255,.78);
  text-decoration:none;
  font-size:13px;
  font-weight:650;
  transition:color .2s ease;
}
.landing-nav-links a:hover{color:#fff}
.landing-nav-cta{
  border:1px solid rgba(201,223,85,.62)!important;
  border-radius:11px;
  padding:10px 17px;
  color:var(--landing-lime)!important;
  background:rgba(201,223,85,.05);
  box-shadow:inset 0 0 20px rgba(201,223,85,.03);
}
.landing-nav-cta:hover{background:rgba(201,223,85,.12)}

.landing-hero{
  width:min(1240px,calc(100% - 48px));
  min-height:calc(100svh - 96px);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(390px,510px);
  gap:clamp(36px,6vw,92px);
  align-items:center;
  padding:34px 0 124px;
}

.landing-copy{
  max-width:650px;
  padding-left:clamp(0px,2vw,28px);
  animation:landing-rise .8s .08s ease both;
}
.landing-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--landing-lime);
  font-size:12px;
  font-weight:800;
  letter-spacing:.20em;
  text-transform:uppercase;
  margin-bottom:17px;
}
.landing-eyebrow:before{
  content:'';
  width:32px;
  height:1px;
  background:var(--landing-lime);
  box-shadow:0 0 12px rgba(201,223,85,.55);
}
.landing-title{
  font-size:clamp(54px,6.5vw,92px);
  line-height:.91;
  letter-spacing:-.055em;
  font-weight:950;
  color:#fff;
  text-shadow:0 10px 40px rgba(0,0,0,.48);
  max-width:720px;
}
.landing-title .accent{
  display:block;
  color:var(--landing-lime);
  font-style:italic;
  font-weight:850;
  letter-spacing:-.065em;
  margin-top:8px;
}
.landing-description{
  max-width:520px;
  margin:24px 0 28px;
  color:rgba(255,255,255,.72);
  font-size:16px;
  line-height:1.65;
}

.landing-login-wrap{width:min(100%,390px)}
.landing-google-btn{
  width:100%;
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  border:0;
  border-radius:15px;
  background:#fff;
  color:#171a18;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 16px 45px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.12);
  transition:transform .22s ease,box-shadow .22s ease;
}
.landing-google-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 52px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.18);
}
.landing-google-btn:active{transform:translateY(0) scale(.99)}
.landing-google-btn img{width:23px;height:23px}
.landing-login-note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:13px;
  color:rgba(255,255,255,.42);
  font-size:11px;
}
.landing-lock{font-size:12px;color:var(--landing-lime)}

.landing-feature-card{
  position:relative;
  overflow:hidden;
  min-height:490px;
  border:1px solid var(--landing-line);
  border-radius:25px;
  background:var(--landing-glass);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 28px 80px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.08);
  transform:perspective(1100px) rotateY(-2deg);
  animation:landing-card-in .9s .22s cubic-bezier(.2,.8,.2,1) both;
}
.landing-feature-image{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:57%;
  background-image:url('../assets/adventures/hike-dashboard-bg.webp');
  background-size:cover;
  background-position:center;
}
.landing-feature-image:after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(3,12,7,.08) 25%,rgba(3,12,7,.90) 100%);
}
.landing-feature-content{
  position:absolute;
  inset:auto 0 0;
  padding:25px 26px 24px;
}
.landing-feature-badge{
  display:inline-flex;
  border-radius:20px;
  padding:6px 11px;
  background:rgba(10,29,17,.78);
  border:1px solid rgba(201,223,85,.28);
  color:var(--landing-lime);
  font-size:10px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.landing-feature-title{
  color:#fff;
  font-size:30px;
  line-height:1.02;
  font-weight:900;
  letter-spacing:-.035em;
}
.landing-feature-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px 17px;
  margin-top:10px;
  color:rgba(255,255,255,.75);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.landing-feature-meta span{display:inline-flex;align-items:center;gap:6px}
.landing-feature-meta i{font-style:normal;color:var(--landing-lime)}
.landing-feature-divider{height:1px;background:rgba(255,255,255,.13);margin:18px 0 14px}
.landing-feature-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.landing-tool{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  padding:7px 3px;
  color:rgba(255,255,255,.68);
  font-size:10px;
  font-weight:650;
  text-align:center;
}
.landing-tool-icon{font-size:20px;line-height:1;color:var(--landing-lime);filter:drop-shadow(0 0 8px rgba(201,223,85,.20))}
.landing-feature-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.70);
  font-size:11px;
  font-weight:700;
}
.landing-avatar-stack{display:flex;align-items:center}
.landing-avatar{
  width:27px;height:27px;border-radius:50%;
  margin-left:-7px;
  border:2px solid #14251a;
  background:linear-gradient(135deg,#e5c19d,#697d66);
}
.landing-avatar:first-child{margin-left:0}
.landing-avatar:nth-child(2){background:linear-gradient(135deg,#c98c66,#536d59)}
.landing-avatar:nth-child(3){background:linear-gradient(135deg,#d8a778,#354b3c)}
.landing-avatar.more{display:flex;align-items:center;justify-content:center;background:#30482f;color:#d7e5c0;font-size:8px}
.landing-feature-arrow{color:var(--landing-lime);font-size:19px}

.landing-scroll{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:111px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.62);
  background:none;
  border:0;
  cursor:pointer;
  font-size:9px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.landing-scroll-circle{
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(201,223,85,.55);
  color:var(--landing-lime);
  animation:landing-bob 2.2s ease-in-out infinite;
}
.landing-scroll-chevron{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}

.landing-features{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:17px;
  transform:translateX(-50%);
  width:min(1160px,calc(100% - 48px));
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(201,223,85,.18);
  border-radius:18px;
  background:rgba(5,18,11,.66);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 16px 50px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.06);
}
.landing-feature-item{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:11px;
  align-items:center;
  min-width:0;
  padding:15px 18px;
}
.landing-feature-item + .landing-feature-item{border-left:1px solid rgba(255,255,255,.10)}
.landing-feature-item-icon{font-size:25px;color:var(--landing-lime);line-height:1}
.landing-feature-item strong{display:block;color:var(--landing-lime);font-size:12px;margin-bottom:3px}
.landing-feature-item span{display:block;color:rgba(255,255,255,.57);font-size:10px;line-height:1.35}

.landing-adventures{
  position:relative;
  z-index:6;
  background:#07170e;
  border-top:1px solid rgba(201,223,85,.10);
  padding:48px 24px 55px;
  text-align:center;
}
.landing-adventures-label{color:var(--landing-lime);font-size:10px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;margin-bottom:22px}
.landing-adventure-types{width:min(1080px,100%);margin:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.landing-adventure-type{padding:12px 8px;color:rgba(255,255,255,.75);font-size:12px;font-weight:750;letter-spacing:.03em}
.landing-adventure-type .icon{display:block;color:var(--landing-lime);font-size:25px;margin-bottom:8px}
.landing-version{position:absolute;right:18px;bottom:5px;color:rgba(255,255,255,.18);font-size:9px}

@keyframes landing-hero-drift{0%{transform:scale(1.06) translate3d(-.5%,0,0)}100%{transform:scale(1.11) translate3d(.7%,-.6%,0)}}
@keyframes landing-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes landing-card-in{from{opacity:0;transform:perspective(1100px) translateY(25px) rotateY(-6deg) scale(.98)}to{opacity:1;transform:perspective(1100px) translateY(0) rotateY(-2deg) scale(1)}}
@keyframes landing-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

@media(max-width:980px){
  .landing-hero{grid-template-columns:minmax(0,1fr) minmax(330px,430px);gap:30px}
  .landing-title{font-size:clamp(50px,7vw,70px)}
  .landing-feature-card{min-height:440px}
  .landing-feature-item{padding:13px 12px;grid-template-columns:28px 1fr}
}

@media(max-width:760px){
  #s-login{display:none;overflow:auto;min-height:100svh}
  #s-login.active{display:block}
  .landing-page{overflow:hidden;min-height:100svh}
  .landing-hero-bg{background-position:center center;animation:none;transform:scale(1.04)}
  .landing-hero-overlay{background:linear-gradient(180deg,rgba(2,11,7,.58) 0%,rgba(2,11,7,.60) 34%,rgba(2,10,6,.92) 72%,#07170e 100%)}
  .landing-nav{width:calc(100% - 32px);padding:16px 0}
  .landing-brand-mark{width:40px;height:40px}
  .landing-brand-name{font-size:12px}
  .landing-brand-name span:last-child{font-size:9px}
  .landing-nav-links a:not(.landing-nav-cta){display:none}
  .landing-nav-cta{padding:9px 13px;font-size:12px!important}
  .landing-hero{display:flex;flex-direction:column;align-items:stretch;width:calc(100% - 32px);min-height:0;padding:38px 0 36px;gap:30px}
  .landing-copy{padding:0;text-align:left}
  .landing-eyebrow{font-size:10px;letter-spacing:.16em;margin-bottom:14px}
  .landing-title{font-size:clamp(48px,14vw,68px);line-height:.92}
  .landing-description{font-size:14px;line-height:1.55;margin:18px 0 20px;max-width:430px}
  .landing-login-wrap{width:100%;max-width:430px}
  .landing-google-btn{min-height:56px}
  .landing-feature-card{min-height:410px;border-radius:21px;transform:none;animation:landing-card-in-mobile .75s .18s ease both}
  .landing-feature-image{height:54%}
  .landing-feature-content{padding:21px 19px 18px}
  .landing-feature-title{font-size:25px}
  .landing-feature-tools{gap:2px}
  .landing-tool{font-size:9px}
  .landing-feature-footer{font-size:10px}
  .landing-scroll{display:none}
  .landing-features{position:relative;left:auto;bottom:auto;transform:none;width:calc(100% - 32px);margin:0 auto 18px;grid-template-columns:1fr 1fr;border-radius:16px}
  .landing-feature-item{padding:13px 12px}
  .landing-feature-item:nth-child(3){border-left:0;border-top:1px solid rgba(255,255,255,.10)}
  .landing-feature-item:nth-child(4){border-top:1px solid rgba(255,255,255,.10)}
  .landing-adventures{padding:40px 16px 50px}
  .landing-adventure-types{grid-template-columns:repeat(2,1fr)}
  .landing-adventure-type:last-child{grid-column:1 / -1}
  .landing-version{position:static;margin-top:22px}
  @keyframes landing-card-in-mobile{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
}

@media(max-width:390px){
  .landing-title{font-size:45px}
  .landing-description{font-size:13px}
  .landing-feature-card{min-height:385px}
  .landing-feature-meta{gap:6px 10px;font-size:9px}
  .landing-feature-title{font-size:23px}
}

@media(prefers-reduced-motion:reduce){
  .landing-hero-bg,.landing-scroll-circle,.landing-copy,.landing-feature-card{animation:none!important;transition:none!important}
}