/* Dryaides home — full-screen intro (click to enter) + side decoration.
   On load a full-screen foliage overlay covers the page (dense "bush") with a CTA. Clicking
   parts the foliage, reveals "Dryaides / Nos projets", then fades away to the clean projects
   page underneath. Click-triggered, not auto. JS-only: a <noscript> rule hides #intro, so
   without JS the page shows straight away. Type comes from herbier.css tokens. */

/* styled by #id so it never collides with herbier.css's legacy `.intro` paragraph rule.
   Transparent on purpose: the foliage parts over the real projects page behind it. */
#intro { position:fixed; inset:0; width:100%; height:100%; max-width:none; margin:0; z-index:9999;
  overflow:hidden; cursor:pointer; transition:opacity .55s ease; background:transparent; }
#intro.done { opacity:0; pointer-events:none; }
.intro-stage { position:absolute; inset:0; }

.ileaf { position:absolute; inset:0; width:100%; height:100%; z-index:3; overflow:visible;
  will-change:transform; backface-visibility:hidden; pointer-events:none; }

.intro-cta { position:absolute; left:50%; bottom:38px; z-index:4; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:#f3efe6; padding:12px 22px; border-radius:999px; background:rgba(20,30,25,0.74);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition:opacity .3s ease, transform .2s ease; }
#intro:hover .intro-cta { transform:translateX(-50%) translateY(-2px); }
.intro-cta svg { width:17px; height:17px; }

/* header wordmark on the projects page: match the intro (dark "Dry" + green "aides"), bold */
.brand { font-weight:700; color:#1d2c29; }
.brand .accent { color:#609a81; }

/* projects column is narrow + centred; foliage fills both gutters, faded on the inner edge */
.content { position:relative; }
.wrap { position:relative; z-index:1; }
.side-foliage { position:absolute; top:0; bottom:0; width:clamp(88px,16vw,250px); z-index:0; pointer-events:none;
  background-repeat:repeat-y; background-position:top center; background-size:100% auto; opacity:0.5;
  -webkit-mask-image:linear-gradient(to right, #000 38%, transparent 88%);
          mask-image:linear-gradient(to right, #000 38%, transparent 88%); }
.side-foliage.left { left:0; }
.side-foliage.right { right:0; transform:scaleX(-1); }
@media (max-width:720px){ .side-foliage { width:60px; opacity:0.4; } }