/* ====================================================================
   Color + font tokens. Tweak these to restyle the whole site.
   ==================================================================== */
:root {
  --bg: #c9d6a3;       /* light green background */
  --text: #34481a;     /* dark green text */
  --accent: #5a7d1e;   /* mid green accent (readable on light bg) */
  --green: #3f6b12;    /* secondary green */
  --muted: #6f3d12;    /* dark bolete-cap brown (italic notes / muted text) */
  --heart: rgb(180, 60, 60);
  --stem: #f1e6c8;     /* cream mushroom stem */
  --spot: #f3ead4;     /* cream cap spots */
}

* { box-sizing: border-box; }

/* force monospace everywhere */
*, button, input, textarea {
  font-family: "Roboto Mono", ui-monospace, Menlo, Consolas, monospace;
}

body {
  background: var(--bg);
  color: var(--text);
  margin: 1.5em 3.5em;
  font-family: "Roboto Mono", ui-monospace, Menlo, monospace;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
html { scroll-behavior: smooth; scroll-padding-top: 6em; }

.wrapper { overflow: hidden; }

a { text-decoration: none; color: var(--text); }

.fn-name { color: var(--muted); font-weight: 400; }
.fn-method { color: var(--accent); }

/* ===================== HEADER / NAV ===================== */
header {
  position: fixed;
  top: 0; left: 0;
  height: 5.2em;
  width: 100%;
  background: var(--bg);
  z-index: 10;
  padding: 0 3.5em;
}
.logo {
  float: left;
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin-top: 2em;
}
.logo .logo-text {
  color: var(--text);
  font-weight: bold;
  font-size: 1.7rem;
}
.logo img {
  height: 2.5em;
  width: auto;
  display: block;
  transition: transform 0.15s;
}
.logo:hover .logo-text { color: var(--accent); }
.logo:hover img { transform: scale(1.08); }

nav {
  position: fixed;
  right: 0; top: 0;
  height: 100vh;
  width: 60%;
  background: var(--bg);
  z-index: 999;
  text-transform: lowercase;
  transform: translateX(100%);
  transition: transform 0.5s ease-in-out;
}
nav.open-nav { transform: translateX(0%); }
nav ul { list-style: none; padding: 0; margin-top: 5em; }
nav ul a {
  display: block;
  width: 100%;
  padding: 1em 3em;
  color: var(--text);
  font-size: 1rem;
}
nav ul a:hover { color: var(--accent); }
nav .close { float: right; margin: 1.5em 2.1em 0 0; width: 1em; cursor: pointer; }
nav .close:hover { transform: scale(1.1); }

header .menu {
  float: right;
  width: 2em;
  margin-top: 2.3em;
  z-index: 20;
  cursor: pointer;
  color: var(--text);   /* icon uses currentColor */
}
nav .close { color: var(--text); }
header .menu:hover { transform: scale(1.1); }

/* ===================== SIDE OVERLAY ===================== */
.overlay { display: none; }

/* ===================== HERO ===================== */
section.hero {
  min-height: 80vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: moveDown 1s ease-in-out forwards;
}
section.hero .name { margin: 0; font-size: 3rem; max-width: 90%; line-height: 1.2; width: 100%; text-align: center; }
section.hero .name { perspective: 800px; }
.letter {
  display: inline-block;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s ease;
}
.letter.flipped { transform: rotateX(180deg); }
.letter .face {
  display: inline-block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.letter .front {
  transform: rotateX(0deg); /* engages backface culling so it hides when flipped */
}
.letter .back {
  position: absolute;
  left: 0; top: 0;
  transform: rotateX(180deg);
  /* striped fill of the same glyph */
  background-image: repeating-linear-gradient(
    45deg,
    var(--text) 0, var(--text) 2px,
    transparent 2px, transparent 4px
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
section.hero .desc { display: none; }
section.hero .desc2 { color: var(--accent); font-size: 1.3rem; margin-top: 0.8em; }
.cursor { color: var(--accent); font-weight: 700; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

section.hero .hero-social {
  display: flex;
  justify-content: center;
  gap: 1.3em;
  margin-top: 2.5em;
  color: var(--accent);
}
section.hero .hero-social a { color: inherit; display: inline-flex; }
section.hero .hero-social svg { width: 1.7em; height: 1.7em; transition: transform 0.15s; }
section.hero .hero-social a:hover svg { transform: scale(1.15); }

/* ===================== ABOUT ===================== */
section.about {
  text-align: center;
  margin-top: 8em;
  padding-top: 3em;
  padding-bottom: 10em;
}
section.about .sectionhead { margin: 0; font-size: 1.5rem; }
section.about .daynight {
  display: block;
  text-align: center;
  margin: 1em 0 2em;
  font-size: 1rem;
}
section.about .daynight span { color: var(--accent); }
section.about img {
  display: inline-block;
  width: 70%;
  height: auto;
  margin: 1em 0 2em;
  border-radius: 4px;
}
section.about .content {
  display: inline-block;
  text-align: left;
  font-size: 0.8rem;
  line-height: 2em;
}
section.about .content .dotdot { font-weight: bold; font-size: 0.9rem; }
section.about .content .list span { color: var(--accent); }

/* ===================== EXPERIENCE ===================== */
section.experience { margin: auto; }
section.experience .sectionhead {
  padding-top: 10px;
  font-size: 1.5rem;
  text-align: center;
}
section.experience .topbar { text-align: center; padding-top: 2em; }
section.experience .topbar ul {
  display: inline-block;
  list-style: none;
  font-size: 1.15rem;
  padding: 0;
}
section.experience .topbar ul li { display: inline-block; margin: 0 0.7em; }
section.experience .topbar .tab { cursor: pointer; color: var(--text); }
section.experience .topbar .tab:hover { color: var(--accent); }
section.experience .topbar .tab.active { color: var(--accent); border-bottom: 1px solid var(--accent); }

section.experience .tabbody {
  display: none;
  max-width: 722px;
  margin: 2em auto 0;
  text-align: left;
}
section.experience .tabbody.active { display: block; }
section.experience .tabbody h2 {
  color: var(--accent);
  font-size: 1.3rem;
  margin-bottom: 0.1em;
}
section.experience .tabbody h2 ~ h2 { margin-top: 1.4em; }
section.experience .tabbody .exp-img {
  display: block;
  max-width: 265px;
  width: 100%;
  height: auto;
  margin: 1em auto 0;
  border-radius: 6px;
}
section.experience .tabbody p {
  line-height: 1.7em;
  margin-top: 0;
  font-size: 1rem;
}
section.experience .tabbody p span { font-style: italic; color: var(--muted); }
section.experience .tabbody p.green { color: var(--green); font-style: italic; margin-top: 0.7em; }
section.experience .tabbody .exp-list {
  list-style: disc;
  margin: 0.6em 0 0;
  padding-left: 1.4em;
  font-size: 1rem;
  line-height: 1.7em;
}

/* ===================== CONTACT / THANKS ===================== */
section.thanks {
  display: block;
  margin: 15em auto 0;
  padding-bottom: 9em;   /* clear the fixed mushrooms so footer stays readable */
  text-align: center;
}
section.thanks .sectionhead {
  margin: 2em;
  margin-top: 8em;
  margin-bottom: 0.2em;
  font-size: 1em;
}
section.thanks .sectionhead p { color: var(--muted); font-style: italic; font-size: 0.9rem; }
section.thanks .email-inline {
  color: var(--accent);
  font-size: 1.1rem;
  cursor: pointer;
}
section.thanks .email-inline:hover { color: var(--text); }
section.thanks .email-inline.copied::after { content: "  copied!"; color: var(--text); font-size: 0.8rem; }
section.thanks .madeby { margin-top: 0.2em; }
section.thanks .madeby p { font-size: 0.7rem; margin: 0; }
section.thanks .madeby p:last-child { margin-top: 3.5em; }
section.thanks .madeby p a { color: var(--accent); }
section.thanks .madeby p a:hover { color: var(--text); }
section.thanks .madeby p span { color: var(--heart); }

/* ===================== DESKTOP (>= 940px) ===================== */
@media only screen and (min-width: 940px) {
  .menu { display: none; }
  nav {
    transform: translateX(0);
    position: unset;
    width: auto;
    height: auto;
    background: none;
  }
  nav .close { display: none; }
  nav ul { float: right; display: flex; margin: 0; margin-right: 1em; }
  nav ul a { padding: 2.2em 0.9em 1em; font-size: 1.15rem; }
  nav ul a:hover { transform: scale(1); }

  /* side overlay: social on the left, rotated email on the right */
  .overlay {
    display: block;
    position: fixed;
    width: 100%;
    top: 80%;
    z-index: 5;
  }
  .overlay .rightside { position: fixed; bottom: 6em; right: 2%; }
  .overlay .rightside .email {
    color: var(--accent);
    font-size: 1rem;
    transform: rotate(90deg);
    transform-origin: right;
    white-space: nowrap;
    cursor: pointer;
    margin: 0;
  }
  .overlay .rightside .email:hover { color: var(--text); }
  .overlay .rightside .hiddendiv { display: none; }
  .overlay .rightside .email.copied + .hiddendiv {
    display: block;
    position: absolute;
    right: 2em;
    color: var(--text);
    font-size: 0.8rem;
    transform: rotate(90deg);
  }
  .overlay .rightside .rightline { display: none; }

  section.hero .desc { display: block; color: var(--accent); font-size: 1.3rem; margin-top: 0.8em; }
  section.hero .desc2 { display: none; }

  section.about { padding-inline: 25%; }
}

/* ===================== FOREST (decorative mushrooms) ===================== */
.forest {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  height: 110px;
  z-index: 4;
  pointer-events: none;   /* never block clicks */
}
.forest .mushroom {
  position: absolute;
  bottom: 0;
  margin-bottom: -22px;   /* sink into the ground so bottoms are clipped at viewport edge */
  display: block;
  height: auto;
  transform: translateY(120%);
  animation: mushPop 1.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* sporadic clusters: left pair (oyster + cep), middle pair, lone right */
/* brown (cep) + white (enoki) are already standing when the page loads */
.forest .m1 { left: 17%; width: 72px;  bottom: -4px; animation: none; transform: translateY(0); }  /* cep — brown   */
.forest .m4 { left: 57%; width: 56px;  bottom: 0;    animation: none; transform: translateY(0); }  /* enoki — white */
/* then orange grows up first, red second */
.forest .m2 { left: 46%; width: 88px;  bottom: 0;    animation-delay: 11.2s; }  /* chanterelle — orange (rises ~11.2s–13.0s) */
.forest .m5 { left: 88%; width: 74px;  bottom: -3px; animation-delay: 14.0s; }  /* amanita — red    (rises ~14.0s–15.8s)     */

/* floating oyster, vertically centered on the left edge */
.oyster-float {
  position: fixed;
  top: 50%;
  left: -48px;            /* creep in from off-screen left */
  transform: translateY(-50%);
  width: 110px;
  height: auto;
  z-index: 4;
  pointer-events: none;
}

/* grass tufts tucked between mushroom clusters */
.forest .grass {
  position: absolute;
  bottom: -2px;
  display: block;
  height: auto;
  transform: translateY(120%);
  animation: mushPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.forest .g1 { left: 30%; width: 34px; animation-delay: 0.46s; }
.forest .g2 { left: 71%; width: 48px; animation-delay: 0.58s; }

@keyframes mushPop {
  from { transform: translateY(120%); }
  to   { transform: translateY(0); }
}

/* thin out on narrow viewports so they don't crowd */
@media only screen and (max-width: 560px) {
  .forest .m3, .forest .m4 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .forest .mushroom { animation: none; transform: translateY(0); }
}

/* ===================== ANIMATIONS ===================== */
@keyframes moveDown {
  from { transform: translateY(-150px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}