/* Home page as concept A (design/system/concept-a.html; rules from design/mockups/site.css, "Home page, as concept A").
   Scenes: the paper fern and its light, the passport scene, the one-line diff, the process rail.
   Played by js/home.js; with reduced motion the end state shows at once. */

.over{margin:0 0 18px}
.h2.mb{margin:0 0 16px;max-width:720px}
.bodyw{max-width:680px;margin:0 0 20px}
/* text with notes in the margin; below 1100px the notes move under the text (.fnotes) */
.annot{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:64px}
.annot>div{min-width:0}
.wnotes{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:110px 0 8px}

/* hero */
.hero-band{position:relative;overflow:hidden;isolation:isolate}
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;padding:96px 0 112px;position:relative}
.hero .display{max-width:660px}
.hero .lead{max-width:560px}
/* the light: one source for the page, up and to the left, where the logo is */
.hero-band .room{position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:0;
  background:radial-gradient(ellipse 75% 95% at var(--lx,20%) var(--ly,-8%),rgba(255,252,240,1),rgba(255,252,240,0) 72%)}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .w>span{display:inline-block}
.fern-wrap{position:relative;justify-self:center}
.fern{width:360px;max-width:100%;height:auto;display:block;overflow:visible}
.fern .stem{fill:var(--navy-600);stroke:var(--navy-600);stroke-width:1.2}
.fern .leaf{transform-box:fill-box}
.fern .leaf .blade{fill:var(--green-500)}
.fern .leaf.l{transform-origin:100% 100%}
.fern .leaf.r{transform-origin:0% 100%}
/* paper cut-out: two smaller sheets on every leaf and on the stem, each a shade darker, each with a small shadow.
   One light for the page, up and to the left: shadows fall to the lower right (brand book, shadows). */
.fern .blade,.fern .stem{filter:url(#paper-base)}
.fern .ply{filter:url(#paper-ply)}
.fern .ply1{fill:#4C8A2F}.fern .ply2{fill:#407828}
.fern .sply1{fill:#163F5E}.fern .sply2{fill:#0F2F48}
/* hand notes: the PHP 4 note top left of the fern, right-aligned; the hand-drawn note bottom right */
.hnote{position:absolute;width:210px;font-style:italic;font-size:15px;line-height:22px;color:var(--ink-muted);margin:0}
.hnote::before{content:"";position:absolute;top:10px;width:40px;border-top:1px solid var(--border-strong)}
.hnote.a{left:-150px;top:-10px;text-align:right}.hnote.a::before{right:-52px}
.hnote.b{right:-60px;bottom:-36px}.hnote.b::before{left:-52px}

/* Original.Webrozum: text on the left, the package, its QR code, the scan, the passport and the stamp on the right */
.flag{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
.flag>div{min-width:0}
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:13px;line-height:1;font-weight:500;color:var(--accent-text);background:var(--green-50);border:1px solid var(--green-200);border-radius:999px;padding:6px 10px;margin-bottom:18px}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--green-600);display:block;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.hfacts{display:flex;gap:28px;margin:28px 0 32px;padding:0;list-style:none;font-family:var(--font-display);font-size:15px;line-height:20px;font-weight:500;color:var(--ink-muted)}
.hfacts b{display:block;font-size:22px;line-height:28px;font-weight:600;color:var(--ink)}
.fnotes2{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.stage{position:relative;background:var(--surface-raised);border:1px solid var(--border);border-radius:16px;aspect-ratio:5/4;overflow:hidden}
.stage svg{position:absolute;inset:0;width:100%;height:100%}
/* behind the scene: the real Original.Webrozum home page. Its logo, top left, shows in full;
   towards the lower right the page fades to half strength, so the drawing stays in front */
.stage-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;
  -webkit-mask-image:linear-gradient(135deg,#000 0,#000 12%,rgba(0,0,0,.5) 70%);mask-image:linear-gradient(135deg,#000 0,#000 12%,rgba(0,0,0,.5) 70%)}
.stage svg{z-index:1}
.pk{fill:none;stroke:var(--navy-600);stroke-width:2;stroke-linejoin:round}
.pk-fill{fill:var(--navy-50)}
.qr rect{fill:var(--navy-900)}
.scan{fill:var(--green-500);opacity:.35}
.stamp{transform-box:fill-box;transform-origin:50% 50%}
.stamp rect{fill:none;stroke:var(--green-700);stroke-width:3}
.stamp text{font:600 22px var(--font-display);letter-spacing:.14em;fill:var(--green-700)}
.pass text{font:400 13px var(--font-mono);fill:var(--ink-muted)}
.pass .t{font:600 15px var(--font-display);fill:var(--ink)}
.pass rect.card{fill:var(--surface);stroke:var(--border)}

/* what we do: three cards with a green line icon, then legacy in one line */
.hcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.hcard{display:flex;flex-direction:column;gap:10px;background:var(--surface-raised);border:1px solid var(--border);border-radius:8px;padding:24px;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .3s var(--ease)}
.hcard:hover{border-color:var(--navy-600);transform:translateY(-3px);color:var(--ink)}
.hcard .ic{width:28px;height:28px;color:var(--green-600)}
.hcard h3{font:600 22px/30px var(--font-display);margin:4px 0 0}
.hcard p{font-size:16px;line-height:26px;color:var(--ink-muted);margin:0;flex:1}
.hcard .more{font:500 15px/20px var(--font-display);color:var(--link)}
.hcard .more i{font-style:normal;display:inline-block;transition:transform .25s var(--ease)}
.hcard:hover .more i{transform:translateX(4px)}
.mini{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:center;margin-top:48px;padding-top:40px;border-top:1px solid var(--border)}
.mini>*{min-width:0}
.mini h3{font:600 22px/30px var(--font-display);margin:0 0 6px}
.mini p{font-size:16px;line-height:26px;color:var(--ink-muted);margin:0}
/* the old line is struck out, the new ones appear */
.diff{background:var(--code-bg);color:var(--code-ink);border-radius:8px;padding:16px 0;font:400 14px/22px var(--font-mono);overflow:hidden}
.ln{display:grid;grid-template-columns:28px 1fr;padding:0 18px;white-space:pre;max-height:22px;transition:max-height .45s var(--ease),opacity .35s ease,background-color .35s ease}
.ln i{font-style:normal;color:var(--code-comment)}
.ln .k{color:var(--code-keyword)}.ln .s{color:var(--code-string)}
.ln.add{max-height:0;opacity:0}
.after .ln.del{background:#3B2A33}.after .ln.del i{color:#E79A8E}
.after .ln.add{max-height:22px;opacity:1;background:#203F33}.after .ln.add i{color:#9DCA7E}
.after.settled .ln.del{max-height:0;opacity:0}
.after.settled .ln.add{background:transparent}.after.settled .ln.add i{color:var(--code-comment)}

/* work: the own project large, tilted, straightening on hover; then client sites as cards */
.feature{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center;margin-top:40px;text-decoration:none;color:var(--ink)}
.feature:hover{color:var(--ink)}
.feature>*{min-width:0}
/* the one shadow the brand book allows outside illustrations: a screenshot lifted off the page */
.shot{border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--surface-raised);box-shadow:0 20px 50px rgba(18,41,59,.10);transform:perspective(1200px) rotateY(-6deg) rotateX(2deg);transition:transform .7s var(--ease)}
.feature:hover .shot{transform:perspective(1200px) rotateY(0) rotateX(0)}
.shot .chrome{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border);font:400 12px var(--font-mono);color:var(--ink-subtle)}
.shot .chrome i{width:9px;height:9px;border-radius:50%;background:var(--paper-300);display:block}
.shot .chrome span{margin-left:10px}
.shot img{display:block;width:100%;height:auto}
.feature h3{font:600 28px/36px var(--font-display);margin:0 0 10px}
.feature p{margin:0 0 14px}
.feature .mtags{font:400 13px/20px var(--font-mono);color:var(--accent-text)}
.sites{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.site{background:var(--surface-raised);border:1px solid var(--border);border-radius:8px;padding:22px;text-decoration:none;color:var(--ink);transition:border-color .2s;overflow:hidden}
.site:hover{border-color:var(--navy-600);color:var(--ink)}
/* the 16:10 shots keep their left edge, where the site logos are */
.site img{display:block;width:calc(100% + 44px);max-width:none;margin:-22px -22px 16px;border-bottom:1px solid var(--border);aspect-ratio:16/10;object-fit:cover;object-position:left top}
.site .dom{font:400 13px/20px var(--font-mono);color:var(--accent-text)}
.site h3{font:600 20px/28px var(--font-display);margin:6px 0}
.site p{font-size:15px;line-height:24px;color:var(--ink-muted);margin:0}
.earlier{margin-top:40px;font-size:16px;line-height:26px;color:var(--ink-muted)}
.earlier b{font:600 16px/26px var(--font-display);color:var(--ink)}
.earlier ul{margin:8px 0 0;padding-left:20px}

/* process: the rail grows with the scroll, a leaf opens at each step */
.hsteps{position:relative;margin-top:56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.hsteps .rail{position:absolute;left:0;right:0;top:15px;border-top:2px solid var(--navy-600);transform-origin:0 50%}
.hstep{position:relative;padding-top:56px}
.hstep .leaf{position:absolute;left:0;top:-8px;width:46px;height:46px;transform-origin:20% 90%}
.hstep .k{font:400 13px/20px var(--font-mono);color:var(--accent-text);display:block;margin-bottom:6px}
.hstep h3{font:600 22px/30px var(--font-display);margin:0 0 8px}
.hstep p{font-size:16px;line-height:26px;color:var(--ink-muted);margin:0}

/* request: text on the left, the form on the right, without a card */
.brief{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.brief>*{min-width:0}
.brief-form .field label{font-size:16px;line-height:20px}
.brief-form .field input{height:48px;padding:0 14px;border:1px solid var(--border-strong);border-radius:6px;font-family:var(--font-display);font-size:16px}
.brief-form .field textarea{min-height:96px;border:1px solid var(--border-strong);border-radius:6px;font-size:16px;line-height:26px}
.hint{font:400 14px/20px var(--font-display);color:var(--ink-muted);margin:16px 0 0}

/* 404: one leaf has fallen off the fern */
.lost .fallen{position:absolute;width:96px;right:-40px;bottom:-40px;transform:rotate(28deg);animation:fall 3.2s var(--ease) both .6s}
@keyframes fall{0%{transform:translate(-120px,-260px) rotate(-40deg);opacity:0}20%{opacity:1}55%{transform:translate(-40px,-90px) rotate(50deg)}100%{transform:rotate(28deg)}}

@media (max-width:1100px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
  /* the text column is narrower here: the PHP 4 note goes above the fern, not over the heading */
  .hnote.a{left:auto;right:0;top:-52px;width:240px}.hnote.a::before{display:none}
  .annot,.flag,.brief{grid-template-columns:minmax(0,1fr)}
  .annot>aside{display:none}
  .hsteps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .hsteps .rail{display:none}
}
@media (max-width:700px){
  .hero{grid-template-columns:minmax(0,1fr);padding:32px 0 56px;gap:24px}
  .fern-wrap{order:-1}
  .fern{width:220px}
  .hnote{display:none}
  .hfacts{flex-direction:column;gap:14px}
  .fnotes2,.hcards,.sites,.feature,.mini,.hsteps{grid-template-columns:minmax(0,1fr)}
  .mini{gap:16px}
  .shot{transform:none}
  .ln{font-size:12px}
  .diff{overflow-x:auto}
}