:root{
  --green:#06261e;--green-deep:#031a15;--ivory:#f2ede4;--gold:#bd8c4a;--gold-light:#d4b27c;
  --serif:"Italiana","Bodoni 72",Didot,serif;--sans:"DM Sans","Helvetica Neue",sans-serif;
}
*{box-sizing:border-box}
html{min-width:320px;height:100%;background:var(--green);font-family:var(--sans);overflow:hidden}
body{margin:0;min-width:320px;height:100%;color:var(--ivory);background:var(--green);overflow:hidden}
a{color:inherit}

.opening{position:relative;width:100%;height:100svh;overflow:hidden;background:var(--green-deep)}

/* Sub-canvas layers stack, each filling the viewport. */
.layer{position:absolute;inset:0;width:100%;height:100%;display:block}
.layer[data-canvas="bg"]{z-index:0}
.layer[data-canvas="giraffe"]{z-index:1}
.layer[data-canvas="text"]{z-index:2}

/* Accessible fallback: present for screen readers / no-JS, visually hidden.
   If the script runs it stays hidden (canvas provides the visible render). */
.fallback{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Email: a real hyperlink as a full-width gold bottom bar across all viewports. */
.contact-footer{position:fixed;z-index:60;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;padding:.9rem 1rem;
  background:var(--gold);color:var(--green-deep);
  box-shadow:0 -.5rem 1.4rem rgba(3,26,21,.32);
  font-size:.59rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  opacity:0;transform:translateY(100%);
  transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1)}
[data-anim] .contact-footer{opacity:0}
/* Animated reveal: gentle fade + rise from the bottom. */
.contact-footer.is-in{opacity:1;transform:translateY(0)}
/* Reduced motion: appear in place, no rise. */
@media (prefers-reduced-motion: reduce){
  .contact-footer{transform:none;transition:none}
}
.contact-footer a{color:inherit;text-decoration:none;display:inline-flex;align-items:center}
.contact-footer a span{margin-left:.65rem;color:var(--green-deep);transition:transform .3s ease;display:inline-block}
.contact-footer a:hover span{transform:translate(.25rem,-.2rem)}