/* Original 3D imagery for WebDeveloper.lk (kept local for self-hosting). */
:root{--three-d-card:#101016;--three-d-stroke:rgba(255,255,255,.15)}
.brief-hero-art,.page-art{overflow:visible}
.page-illustration.hero-3d-illustration{
  position:relative;z-index:2;width:min(100%,560px)!important;
  max-width:none;height:auto!important;max-height:380px;
  aspect-ratio:auto!important;object-fit:contain;
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  background:radial-gradient(circle at 72% 16%,rgba(236,35,35,.21),transparent 52%),linear-gradient(140deg,#14131a,#070a10);
  box-shadow:0 25px 75px rgba(0,0,0,.65),0 0 45px rgba(217,9,9,.16),inset 0 1px 0 rgba(255,255,255,.13);
  filter:none!important;
  overflow:hidden;
  will-change:transform;
}
.brief-hero-art:before,.page-art:before{
  content:"";pointer-events:none;position:absolute;z-index:0;inset:15% 7%;
  border-radius:50%;background:radial-gradient(ellipse,rgba(220,8,18,.35),rgba(15,31,59,.18) 44%,transparent 72%);
  filter:blur(30px);
}
.visual-3d-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:1000px;margin:32px 0 10px}
.visual-3d-tile{
  position:relative;display:flex;flex-direction:column;min-width:0;
  overflow:hidden;border:1px solid var(--three-d-stroke);border-radius:19px;
  color:#fff!important;text-decoration:none!important;
  background:linear-gradient(140deg,#171820,#050608);
  box-shadow:0 18px 40px rgba(0,0,0,.29);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.visual-3d-tile img{display:block;width:100%;height:clamp(145px,17vw,240px);object-fit:cover;object-position:center;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .3s ease;
}
.visual-3d-tile-caption{display:flex;align-items:center;justify-content:space-between;gap:10px;
 padding:14px 18px;min-height:62px;background:linear-gradient(90deg,#0c0a0d,#181016);font-size:clamp(13px,1.25vw,17px);line-height:1.4}
.visual-3d-tile-caption strong{font-weight:700;color:#fff}
.visual-3d-tile-caption>span{font-size:23px;color:#ff4545;flex:none}
.card-3d-visual{position:relative;overflow:hidden;isolation:isolate;margin:4px 0 20px;
 border-radius:14px;border:1px solid rgba(255,255,255,.12);
 background:linear-gradient(145deg,#181a27,#0b0910);
 box-shadow:0 10px 30px rgba(0,0,0,.28)}
.card-3d-visual img{width:100%;height:clamp(135px,13vw,202px);display:block;object-fit:cover;
 transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .3s ease}
.page-card{overflow:hidden}
.page-card.page-card-with-3d{display:flex;flex-direction:column}
.page-card.page-card-with-3d h3{margin-top:0}
.page-card.page-card-with-3d>a:last-child{margin-top:auto;padding-top:12px}
@media (hover:hover) and (pointer:fine){
  .visual-3d-tile:hover,.visual-3d-tile:focus-visible{transform:translateY(-5px);border-color:rgba(250,69,69,.82);box-shadow:0 23px 45px rgba(0,0,0,.48),0 0 26px rgba(218,10,10,.23)}
  .visual-3d-tile:hover img,.visual-3d-tile:focus-visible img{transform:scale(1.055)}
  .page-card:hover .card-3d-visual img{transform:scale(1.05)}
}
@media(max-width:1000px){
  .page-illustration.hero-3d-illustration{max-height:330px}
  .visual-3d-tile img{height:190px}
  .card-3d-visual img{height:160px}
}
@media(max-width:760px){
  .brief-hero-art{order:1!important;min-height:0!important;margin-top:18px}
  .page-art{min-height:0!important;margin-top:20px}
  .page-illustration.hero-3d-illustration{width:min(100%,510px)!important;max-height:none;border-radius:17px}
  .visual-3d-pair{gap:12px;margin-top:26px}
  .visual-3d-tile img{height:clamp(130px,26vw,200px)}
  .visual-3d-tile-caption{padding:12px 13px;min-height:60px;font-size:13px}
  .card-3d-visual img{height:clamp(145px,30vw,225px)}
}
@media(max-width:490px){
  .visual-3d-pair{grid-template-columns:1fr;gap:16px}
  .visual-3d-tile img{height:clamp(175px,51vw,250px)}
  .card-3d-visual img{height:clamp(155px,48vw,220px)}
  .brief-hero-art,.page-art{min-height:0!important}
}
@media(prefers-reduced-motion:reduce){
  .page-illustration.hero-3d-illustration,.visual-3d-tile,.visual-3d-tile img,.card-3d-visual img{
    animation:none!important;transition:none!important;transform:none!important
  }
}

/* On small screens, feature artwork directly after the heading rather than after a long intro. */
.mobile-hero-3d{display:none}
@media(max-width:760px){
  .brief-hero-art,.page-art{display:none!important}
  .mobile-hero-3d{display:block;margin:20px 0 23px;width:100%}
  .mobile-hero-3d .page-illustration.hero-3d-illustration{
     width:100%!important;max-width:520px;max-height:320px;margin:0 auto;
     border-radius:16px;animation:none!important;
  }
}