/* ============================================================
   ROOT LIFE — THE GARDEN LAYER (styles). Pairs with rootlife-garden.js.
   ------------------------------------------------------------
   A quiet forest walk, canopy to roots. Link AFTER rootlife-tokens.css.

   Every rule here is keyed to an attribute rootlife-garden.js sets
   (data-garden-on, -zone, -edge, -reveal, -clear) or to an element it creates.
   If the script does not run, nothing in this file applies.

   All shapes are drawn here in code. No generated or stock imagery: the only
   photographs on a page are the farm's own, where the page already puts them.
   ============================================================ */

/* ---- the walk's ground --------------------------------------------------
   The script paints body with a blend of GARDEN_GROUNDS as you scroll. Cream
   wrappers that would hide it are cleared. Guard 50 checks every blend against
   the text inks. */
html[data-garden-on] [data-garden-clear] { background-color: transparent !important; }
html[data-garden-on] [data-garden-zone] { scroll-margin-top: var(--rl-header-h, 91px); }

/* ---- one entrance per section: "root rise" -------------------------------
   Hidden-until-seen ONLY for people who have not asked for less motion, and
   only for sections that were below the fold when the page opened. Guard 50
   refuses this rule outside the gate. */
@media (prefers-reduced-motion: no-preference) {
  html[data-garden-on] [data-garden-reveal] > * {
    transition: opacity 700ms var(--ease-sun-rise, cubic-bezier(0.4, 0, 0.2, 1)),
                transform 800ms var(--ease-root-emerge, cubic-bezier(0.16, 0.84, 0.24, 1));
  }
  html[data-garden-on] [data-garden-reveal="wait"] > * { opacity: 0; transform: translateY(21px); }
}

@media print {
  [data-garden-reveal] > * { opacity: 1 !important; transform: none !important; }
  .garden-dapple, .garden-stem, .garden-path { display: none !important; }
  [data-garden-edge] { -webkit-mask: none !important; mask: none !important; }
}

/* ---- edges: where a dark band meets a light ground -----------------------
   Each zone draws its own: leaf tips in the canopy, fern fronds in the
   understory, leaf litter on the forest floor, crumbled soil at the roots.
   The script only sets an edge where the band has at least 30px of padding,
   so a drawn edge never touches content. */
html[data-garden-on] [data-garden-zone="canopy"] {
  --gedge-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 24V14C12 4 24 4 30 12C36 2 52 2 58 11C66 3 80 5 86 13C94 1 110 2 116 12C124 4 138 3 144 11C152 2 168 3 172 12C180 5 194 4 200 13C208 2 224 3 240 14V24Z'/%3E%3C/svg%3E");
  --gedge-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath fill='%23000' transform='matrix(1 0 0 -1 0 24)' d='M0 24V14C12 4 24 4 30 12C36 2 52 2 58 11C66 3 80 5 86 13C94 1 110 2 116 12C124 4 138 3 144 11C152 2 168 3 172 12C180 5 194 4 200 13C208 2 224 3 240 14V24Z'/%3E%3C/svg%3E");
}
html[data-garden-on] [data-garden-zone="understory"] {
  --gedge-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 24V16L10 9L18 15L28 6L38 14L48 8L58 15L70 5L80 14L92 9L102 16L114 7L124 15L136 10L146 16L158 6L168 14L180 9L190 15L202 5L212 14L224 9L240 16V24Z'/%3E%3C/svg%3E");
  --gedge-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath fill='%23000' transform='matrix(1 0 0 -1 0 24)' d='M0 24V16L10 9L18 15L28 6L38 14L48 8L58 15L70 5L80 14L92 9L102 16L114 7L124 15L136 10L146 16L158 6L168 14L180 9L190 15L202 5L212 14L224 9L240 16V24Z'/%3E%3C/svg%3E");
}
html[data-garden-on] [data-garden-zone="floor"] {
  --gedge-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 24V15C20 11 30 17 48 13S78 9 96 14S130 18 150 12S186 10 204 15S228 12 240 15V24Z'/%3E%3C/svg%3E");
  --gedge-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath fill='%23000' transform='matrix(1 0 0 -1 0 24)' d='M0 24V15C20 11 30 17 48 13S78 9 96 14S130 18 150 12S186 10 204 15S228 12 240 15V24Z'/%3E%3C/svg%3E");
}
html[data-garden-on] [data-garden-zone="roots"] {
  --gedge-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M0 24V13Q8 9 14 13T30 12Q38 16 46 11T62 13Q72 8 80 12T98 14Q106 10 116 13T134 11Q144 15 152 12T170 13Q180 9 188 13T206 12Q216 16 224 12T240 13V24Z'/%3E%3C/svg%3E");
  --gedge-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath fill='%23000' transform='matrix(1 0 0 -1 0 24)' d='M0 24V13Q8 9 14 13T30 12Q38 16 46 11T62 13Q72 8 80 12T98 14Q106 10 116 13T134 11Q144 15 152 12T170 13Q180 9 188 13T206 12Q216 16 224 12T240 13V24Z'/%3E%3C/svg%3E");
}

html[data-garden-on] [data-garden-edge="top"] {
  -webkit-mask-image: var(--gedge-top), linear-gradient(#000, #000);
  -webkit-mask-size: 240px 22px, 100% calc(100% - 21px);
  -webkit-mask-position: left top, left bottom;
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-image: var(--gedge-top), linear-gradient(#000, #000);
  mask-size: 240px 22px, 100% calc(100% - 21px);
  mask-position: left top, left bottom;
  mask-repeat: repeat-x, no-repeat;
}
html[data-garden-on] [data-garden-edge="bottom"] {
  -webkit-mask-image: var(--gedge-bottom), linear-gradient(#000, #000);
  -webkit-mask-size: 240px 22px, 100% calc(100% - 21px);
  -webkit-mask-position: left bottom, left top;
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-image: var(--gedge-bottom), linear-gradient(#000, #000);
  mask-size: 240px 22px, 100% calc(100% - 21px);
  mask-position: left bottom, left top;
  mask-repeat: repeat-x, no-repeat;
}
html[data-garden-on] [data-garden-edge="top bottom"] {
  -webkit-mask-image: var(--gedge-top), var(--gedge-bottom), linear-gradient(#000, #000);
  -webkit-mask-size: 240px 22px, 240px 22px, 100% calc(100% - 42px);
  -webkit-mask-position: left top, left bottom, left 21px;
  -webkit-mask-repeat: repeat-x, repeat-x, no-repeat;
  mask-image: var(--gedge-top), var(--gedge-bottom), linear-gradient(#000, #000);
  mask-size: 240px 22px, 240px 22px, 100% calc(100% - 42px);
  mask-position: left top, left bottom, left 21px;
  mask-repeat: repeat-x, repeat-x, no-repeat;
}

/* ---- the footer is soil: roots drawn behind its content ----------------- */
html[data-garden-on] footer[data-garden-zone="roots"] { position: relative; isolation: isolate; }
html[data-garden-on] footer[data-garden-zone="roots"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.14;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 260' fill='none' stroke='%23C0AE94' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M70 0C66 40 82 76 60 130S70 210 52 260M68 46C48 62 36 76 24 104M62 118C84 134 94 156 118 190M250 0C246 54 262 96 240 158S252 220 244 260M246 64C222 80 212 102 200 140M242 150C266 170 272 196 296 232M470 0C476 34 458 88 474 146S462 214 480 260M472 70C494 88 502 108 520 144M466 176C442 190 430 214 414 250M640 0C634 44 652 90 632 150M636 96C614 112 604 134 590 172M634 150C656 168 664 192 690 226'/%3E%3C/svg%3E") left top / 720px 260px repeat-x;
}

/* ---- canopy light: fades as you leave the top of the page ---------------- */
.garden-dapple {
  position: fixed;
  inset: -8vh -8vw;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38vmax 26vmax at 16% 4%, rgba(255, 251, 230, 0.6), transparent 70%),
    radial-gradient(24vmax 16vmax at 70% 10%, rgba(227, 169, 27, 0.07), transparent 70%),
    radial-gradient(30vmax 20vmax at 88% 34%, rgba(168, 212, 138, 0.1), transparent 70%),
    radial-gradient(18vmax 14vmax at 38% 28%, rgba(255, 251, 230, 0.4), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .garden-dapple { animation: rlGardenDrift var(--motion-seasonal, 24s) var(--ease-wind-drift, ease-in-out) infinite alternate; }
}
@keyframes rlGardenDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(2vw, 1.5vh, 0); }
}

/* ---- phones: a stem that grows down the left edge ------------------------ */
.garden-stem {
  position: fixed;
  left: 0;
  top: 0;
  width: 3px;
  height: 100vh;
  z-index: 55;
  pointer-events: none;
  background: linear-gradient(180deg, #A8D48A 0%, #405828 38%, #5E4A38 78%, #3E2E20 100%);
  transform-origin: top center;
  transform: scaleY(var(--garden-depth, 0));
  border-radius: 0 0 3px 0;
}

/* ---- wide screens: the forest path --------------------------------------- */
.garden-path { display: none; }
@media (min-width: 1200px) {
  .garden-stem { display: none; }
  .garden-path {
    display: flex;
    position: fixed;
    left: 14px;
    top: 50%;
    height: 52vh;
    width: 28px;
    transform: translateY(-50%);
    z-index: 40;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
}
.garden-path .gp-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 2px rgba(248, 244, 235, 0.85));
}
.garden-path .gp-line path { fill: none; stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.garden-path .gp-track { stroke: var(--border-strong-warm, #D6C9B4); }
.garden-path .gp-grown {
  stroke: var(--accent, #405828);
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--garden-depth, 0));
}
.garden-path button {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.garden-path .gp-leaf {
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border-radius: 12px 2px 12px 2px;
  background: var(--surface-card, #FFFDF7);
  border: 1.5px solid var(--accent, #405828);
  box-shadow: 0 0 0 2px rgba(248, 244, 235, 0.85);
  transform: rotate(-45deg) scale(0.85);
  transition: background-color 180ms var(--ease-sun-rise, ease), transform 180ms var(--ease-leaf-unfold, ease);
}
.garden-path button[data-passed] .gp-leaf { background: var(--accent, #405828); }
.garden-path button[aria-current] .gp-leaf {
  background: var(--highlight, #E3A91B);
  border-color: var(--accent-hover, #2E4A1E);
  transform: rotate(-45deg) scale(1.2);
}
.garden-path .gp-label {
  position: absolute;
  left: 34px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font: 700 11px/1 'Source Sans 3', 'Helvetica Neue', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-body, #22301F);
  background: var(--surface-card, #FFFDF7);
  padding: 7px 10px;
  border-radius: 13px 5px 13px 5px;
  box-shadow: var(--elev-rest, 0 8px 24px rgba(16, 27, 11, 0.05));
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease-sun-rise, ease);
}
.garden-path button:hover .gp-label,
.garden-path button:focus-visible .gp-label { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .garden-path .gp-leaf, .garden-path .gp-label { transition: none; }
}