/* ============ $SEEDTACIO — Shell Shocked ============ */

:root{
  --sky: #6bc3ec;
  --sky-deep: #4fa9d9;
  --sun-yellow: #ffd23f;
  --sun-yellow-dark: #f2a81d;
  --sun-brown: #7a4b23;
  --sun-brown-dark: #5c371a;
  --leaf: #4c8a3d;
  --leaf-dark: #356329;
  --frog: #64825a;
  --ink: #1c1a14;
  --cream: #fff6e2;
  --cream-2: #fdecc6;
  --night: #1c2410;
  --night-2: #131a0b;
  --accent: #ff8a3d;
  --shadow: rgba(0,0,0,.25);
  font-size: 16px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:'Baloo 2',system-ui,sans-serif; margin:0 0 .4em; }
p{ line-height:1.6; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }
ol,ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

.grain{
  position:fixed; inset:0; pointer-events:none; z-index:5000; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Topbar ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem 1.5rem;
  background:rgba(28,26,20,.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.brand{ display:flex; align-items:center; gap:.5rem; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.15rem; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.35); }
.brand-emoji{ font-size:1.4rem; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.nav-links{ display:flex; align-items:center; gap:1.3rem; }
.nav-links a{ color:#fff; font-weight:600; font-size:.95rem; opacity:.92; transition:opacity .15s; }
.nav-links a:hover{ opacity:1; text-decoration:underline; }
.nav-links .nav-buy{
  background:var(--accent); color:#1c1a14; padding:.45rem 1rem; border-radius:999px; font-weight:700;
}
.burger{ display:none; color:#fff; font-size:1.5rem; }

.ca-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.25);
  color:#fff; font-family:'JetBrains Mono',monospace,monospace; font-size:.8rem;
  padding:.4rem .8rem; border-radius:999px; white-space:nowrap;
  transition:background .15s, transform .1s;
}
.ca-pill:hover{ background:rgba(0,0,0,.5); }
.ca-pill:active{ transform:scale(.97); }
.ca-pill .copy-icon{ opacity:.7; }
.ca-pill.copied{ background:var(--leaf); border-color:var(--leaf); }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  background:var(--sky);
}
.hero-media{
  position:absolute; inset:-4%; width:108%; height:108%; z-index:1;
}
.mascot-photo{
  width:100%; height:100%; object-fit:cover; object-position:50% 24%; display:block;
  transform-origin:50% 88%;
  animation:heroSway 8s ease-in-out infinite;
}
@keyframes heroSway{
  0%,100%{ transform:rotate(-.55deg) translateX(-.4%); }
  50%{ transform:rotate(.55deg) translateX(.4%); }
}
.hero-vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 62%, rgba(0,0,0,.55) 100%);
}
.pupil{
  position:absolute; top:0; left:0; z-index:3; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 34% 30%, #4a4a48 0%, #17130f 45%, #060503 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset;
}

.sunflower-field{
  position:absolute; left:0; right:0; bottom:0; height:26vh; min-height:140px;
  z-index:4; pointer-events:none; overflow:visible;
}
.field-flower{
  position:absolute; bottom:-4%; transform-origin:50% 100%;
  animation-name:flowerSway; animation-timing-function:ease-in-out; animation-iteration-count:infinite;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.2));
}
@keyframes flowerSway{
  0%,100%{ transform:rotate(calc(var(--amp) * -1deg)) translateX(calc(var(--amp) * -1px)); }
  50%{ transform:rotate(calc(var(--amp) * 1deg)) translateX(calc(var(--amp) * 1px)); }
}

.hero-copy{
  position:relative; z-index:6; text-align:center; color:#fff;
  padding:1.4rem 1.2rem 6.5rem;
  text-shadow:0 3px 10px rgba(0,0,0,.45);
}
.hero-title{
  font-size:clamp(2.6rem, 8vw, 5.2rem); font-weight:800; letter-spacing:.5px;
  -webkit-text-stroke:2px rgba(0,0,0,.25);
}
.hero-tagline{ font-size:clamp(1rem,2.4vw,1.3rem); font-weight:600; margin-bottom:1.3rem; opacity:.95; }
.cta-row{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-bottom:1rem; }
.btn{
  padding:.85rem 1.6rem; border-radius:999px; font-weight:700; font-size:1rem;
  box-shadow:0 6px 0 rgba(0,0,0,.25); transition:transform .12s, box-shadow .12s;
}
.btn:active{ transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.25); }
.btn-primary{ background:var(--accent); color:#1c1a14; }
.btn-secondary{ background:#fff; color:#1c1a14; }
.ca-pill-hero{ font-size:.85rem; margin-top:.2rem; }

.scroll-hint{
  position:absolute; bottom:1.3rem; left:50%; transform:translateX(-50%);
  z-index:6; color:#fff; font-size:.8rem; font-weight:600; opacity:.85;
  animation:bob 2.2s ease-in-out infinite; text-shadow:0 2px 6px rgba(0,0,0,.4);
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,6px);} }

/* ---------- Shared section styling ---------- */
main section{ padding:5rem 1.5rem; position:relative; }
.lore-inner,.stats-inner,.howto-inner,.gallery-inner{ max-width:820px; margin:0 auto; }

.lore{ background:var(--cream); }
.lore h2{ font-size:2.2rem; color:var(--sun-brown-dark); }
.lore p{ font-size:1.08rem; }
.lore-tags{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.6rem; }
.tag{
  background:var(--leaf); color:#fff; font-weight:700; font-size:.8rem;
  padding:.4rem .9rem; border-radius:999px; letter-spacing:.03em;
}

.stats{ background:var(--cream-2); border-top:3px dashed var(--sun-brown); border-bottom:3px dashed var(--sun-brown); }
.stats h2{ font-size:2rem; color:var(--sun-brown-dark); }
.stats-sub{ opacity:.75; margin-bottom:1.6rem; }
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; }
.stat-card{
  background:#fff; border:2px solid var(--ink); border-radius:14px; padding:1.1rem;
  display:flex; flex-direction:column; gap:.3rem; box-shadow:0 4px 0 rgba(0,0,0,.12);
}
.stat-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; opacity:.6; font-weight:700; }
.stat-value{ font-family:'Baloo 2',sans-serif; font-size:1.5rem; font-weight:700; color:var(--sun-brown-dark); }
.stats-note{ margin-top:1.4rem; font-size:.82rem; opacity:.6; }
.stats-note code{ background:rgba(0,0,0,.06); padding:.1rem .35rem; border-radius:5px; }

.howto{ background:var(--cream); }
.howto h2{ font-size:2rem; color:var(--sun-brown-dark); margin-bottom:1.8rem; }
.howto-steps{ display:grid; gap:1.3rem; }
.howto-steps li{ display:flex; gap:1.1rem; align-items:flex-start; }
.step-num{
  font-family:'Baloo 2',sans-serif; font-size:1.4rem; font-weight:800; color:#fff;
  background:var(--leaf); width:2.6rem; height:2.6rem; min-width:2.6rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.howto-steps h3{ font-size:1.1rem; margin-bottom:.2rem; }
.howto-steps p{ font-size:.95rem; opacity:.8; margin:0; }

.gallery{ background:var(--cream-2); }
.gallery h2{ font-size:2rem; color:var(--sun-brown-dark); margin-bottom:1.6rem; }
.notes-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.note{
  background:#fff; border:2px dashed var(--sun-brown); border-radius:12px;
  padding:1rem 1.1rem; font-size:.92rem; font-style:italic; color:#3a3020; margin:0;
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--night); color:#e9e6d8; padding:3rem 1.5rem 2rem; }
.footer-inner{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:1.1rem; text-align:center; }
.footer-brand{ display:flex; align-items:center; gap:.5rem; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.2rem; }
.footer-links{ display:flex; gap:1.3rem; flex-wrap:wrap; justify-content:center; }
.footer-links a{ font-weight:600; opacity:.85; }
.footer-links a:hover{ opacity:1; text-decoration:underline; }
.disclaimer{ font-size:.75rem; opacity:.55; max-width:560px; line-height:1.5; margin-top:.6rem; }

/* ---------- Flies ---------- */
#fliesLayer{ position:fixed; inset:0; z-index:9999; pointer-events:none; }
.fly{ position:absolute; top:0; left:0; width:20px; height:16px; will-change:transform; }
.fly svg{ width:100%; height:100%; overflow:visible; }
.fly .wing{ transform-origin:10px 7px; animation:flap .09s linear infinite alternate; }
.fly .wing-r{ animation-delay:.045s; }
@keyframes flap{ from{ transform:scaleX(1) rotate(-6deg); } to{ transform:scaleX(.55) rotate(10deg); } }

/* ---------- Sound toggle ---------- */
#soundToggle{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:400;
  width:3rem; height:3rem; border-radius:50%; background:rgba(28,26,20,.65); color:#fff;
  font-size:1.25rem; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.3); backdrop-filter:blur(4px);
}
#soundToggle.on{ background:var(--accent); color:#1c1a14; }

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .nav-links{
    position:fixed; top:0; right:0; height:100vh; width:min(80vw,320px);
    background:rgba(20,18,14,.97); flex-direction:column; align-items:flex-start;
    padding:5.5rem 1.6rem 2rem; gap:1.4rem;
    transform:translateX(100%); visibility:hidden; opacity:0; pointer-events:none;
    transition:transform .25s ease, opacity .25s ease, visibility .25s;
  }
  .nav-links.open{ transform:translateX(0); visibility:visible; opacity:1; pointer-events:auto; }
  .burger{ display:block; }
}
@media (max-width:560px){
  .hero-copy{ padding-bottom:5.5rem; }
  main section{ padding:3.4rem 1.1rem; }
}