/*
 * botany.tech — the footer's live branch  (footer3d.css)
 * ---------------------------------------------------------------------------
 * The branch over `botany.tech` is the hero's scene (hero-scene.js), mounted a
 * second time on footer.end-ftr[data-hero-scene] as the footer nears: a clear
 * ground (data-scene-alpha), no stones, opening as the bark and moss finish
 * growing (data-scene-start), its tail laid level instead of climbing
 * (data-scene-tail=flat) and the lens turned a little so the wood lies
 * across the page (data-scene-roll). The canvas spans the whole footer; it
 * lies in front of the word and behind the links. The picture (.end-branch) holds the place until the scene adds
 * .is-live, and stays for good under reduced motion (site.js never loads the
 * scene then) or without WebGL (.is-failed).
 * ---------------------------------------------------------------------------
 */
.end-ftr > .end-canvas{z-index:2;pointer-events:none}
/* the frame the scene composes into, anchored on the word at the foot:
   wider than the page, so the wood runs off both edges, and set so its
   upper bark crosses the tops of the letters */
/* the stage: only as much sky above the word as the wood needs */
.end-ftr--floor .end-stage{padding-top:clamp(110px,17vw,250px)}
.end-slot{position:absolute;pointer-events:none;left:-8%;right:-8%;bottom:3vw;height:42vw}
@media (min-width:1481px){.end-slot{height:calc(400px + 15vw)}}
@media (max-width:639px){.end-slot{left:-78%;right:-78%;bottom:-10vw;height:100vw}}
.end-ftr .end-branch{transition:opacity 700ms var(--ease)}
.end-ftr.is-live .end-branch{opacity:0;visibility:hidden;transition:opacity 700ms var(--ease),visibility 0s 700ms}
/* the picture, where it stays (reduced motion, no WebGL): lowered the same
   way, so its bark crosses the tops of the letters too */
/* while the scene loads, the picture sits a touch low and small, so its
   crest stays clear of the risk line on the tightened stage */
.end-ftr--floor .end-branch{width:112vw;left:-6vw;top:-4vw}
/* where the picture is all there will be (reduced motion: site.js never
   loads the scene; or no WebGL: .is-failed), the stage keeps its old sky,
   so the full arch lies across the tops of the letters as it was set */
@media (prefers-reduced-motion:reduce){
  .end-ftr--floor .end-stage{padding-top:clamp(160px,27vw,400px)}
  .end-ftr--floor .end-branch{width:140vw;left:-34vw;top:-5vw}
}
.end-ftr--floor.is-failed .end-stage{padding-top:clamp(160px,27vw,400px)}
.end-ftr--floor.is-failed .end-branch{width:140vw;left:-34vw;top:-5vw}
@media (max-width:639px){.end-ftr--floor .end-branch{top:10vw}}

/* FIELD: the glyph ground of the BTSE door under everything in the footer
   (footer-field.js), in olive ink on the sky; the dotted layer under it.
   The links, the marks and the small print stand on a hush of the sky's
   own colour, so the field gives way where the words are (owner,
   29.10.2026). */
.end-field{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;pointer-events:none}
.end-hush{position:absolute;left:0;right:0;top:0;height:min(520px,60%);z-index:0;pointer-events:none;
  background:radial-gradient(85% 100% at 50% 0%,var(--end-sky) 45%,transparent 100%)}
/* on a phone the links wrap to more lines and the small print sits lower,
   past the hush's soft edge, on the glyphs: the hush runs down past it
   there and stays solid longer (owner, 01.11.2026: hard to read) */
@media (max-width:639px){
  .end-hush{height:76%;background:radial-gradient(140% 100% at 50% 0%,var(--end-sky) 70%,transparent 100%)}
  .end-risk{color:rgb(46 47 41/.85)}
}