/* Smart Citizens — 3D depth layer (added 2026-10-06). Loaded after modern.css. */

/* perspective stages */
.hero-art{perspective:1400px;transform-style:preserve-3d}
.prog-grid,.impact-grid,.involved-grid,.voices-grid,.gallery-grid,.scf-grid,.about-photos{perspective:1300px}
.section .wrap,.scf-latest .wrap{perspective:1600px}

/* hero: photo, chip and hand sit on different depth planes */
.hero-art .hero-photo{transform-style:preserve-3d;transition:rotate .9s cubic-bezier(.16,1,.3,1),clip-path 1.4s cubic-bezier(.16,1,.3,1)!important;will-change:rotate}
.hero-art .hero-chip,.hero-art .hero-hand{transition:translate .9s cubic-bezier(.16,1,.3,1);will-change:translate}
.hero-art .hero-chip{animation:none!important;filter:drop-shadow(0 18px 24px rgba(84,16,27,.25))}
.hero-art .hero-hand{filter:drop-shadow(0 22px 30px rgba(84,16,27,.22))}

/* floating 3D orbit rings behind the hero photo */
.hero-art{position:relative}
.scf-orbit{position:absolute;left:50%;top:50%;width:128%;aspect-ratio:1;translate:-50% -50%;z-index:-1;pointer-events:none;transform-style:preserve-3d;perspective:900px}
.scf-orbit i{position:absolute;inset:0;border-radius:50%;border:2.5px solid rgba(166,30,45,.35);transform-style:preserve-3d}
.scf-orbit i:nth-child(1){animation:scf-spin1 22s linear infinite}
.scf-orbit i:nth-child(2){inset:9%;border-color:rgba(240,154,50,.55);animation:scf-spin2 28s linear infinite}
.scf-orbit i:nth-child(3){inset:20%;border:2px dashed rgba(126,22,38,.22);animation:scf-spin3 34s linear infinite}
.scf-orbit i::after{content:"";position:absolute;top:-7px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--marigold,#F09A32);box-shadow:0 0 18px rgba(240,154,50,.8)}
.scf-orbit i:nth-child(2)::after{background:var(--henna,#A61E2D);box-shadow:0 0 18px rgba(166,30,45,.6)}
@keyframes scf-spin1{from{transform:rotateX(68deg) rotateZ(0)}to{transform:rotateX(68deg) rotateZ(360deg)}}
@keyframes scf-spin2{from{transform:rotateY(64deg) rotateZ(0)}to{transform:rotateY(64deg) rotateZ(-360deg)}}
@keyframes scf-spin3{from{transform:rotateX(40deg) rotateY(-30deg) rotateZ(0)}to{transform:rotateX(40deg) rotateY(-30deg) rotateZ(360deg)}}

/* 3D tilt cards (uses the rotate property so it never fights the reveal transform) */
.scf-tilt{transition:rotate .6s cubic-bezier(.16,1,.3,1),translate .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1),opacity 1s,transform 1.1s cubic-bezier(.16,1,.3,1),filter 1s!important;will-change:rotate}
.scf-tilt.scf-tilting{transition:rotate .12s linear,translate .5s cubic-bezier(.16,1,.3,1),box-shadow .5s!important}
.scf-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .4s;background:linear-gradient(var(--ga,135deg),rgba(255,255,255,.42) 0%,rgba(255,255,255,0) 55%);mix-blend-mode:soft-light}
.scf-tilt:hover .scf-glare{opacity:1}

/* 3D entrances on scroll: cards rise and swing up into place */
.pcard.rv,.inv.rv,figure.quote.rv,.scf-card.rv{rotate:x 18deg;transform-origin:50% 100%}
.icard.rv{rotate:x -75deg;transform-origin:50% 0;backface-visibility:hidden}
.section-head.rv{rotate:x 22deg;transform-origin:50% 100%}
.pcard.rv.in,.inv.rv.in,figure.quote.rv.in,.scf-card.rv.in,.icard.rv.in,.section-head.rv.in{rotate:none}
.pcard.rv,.inv.rv,figure.quote.rv,.scf-card.rv,.icard.rv,.section-head.rv{transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1),filter 1s,rotate 1.2s cubic-bezier(.16,1,.3,1),translate .5s,box-shadow .5s!important}

/* about photos: layered depth that follows the pointer */
.about-photos{transform-style:preserve-3d}
.about-photos .ap{transition:translate .8s cubic-bezier(.16,1,.3,1),rotate .8s cubic-bezier(.16,1,.3,1),clip-path 1.4s cubic-bezier(.16,1,.3,1),box-shadow .5s!important}

/* gallery: pop forward in 3D on hover */
.gitem{transition:rotate .6s cubic-bezier(.16,1,.3,1),translate .5s cubic-bezier(.16,1,.3,1),box-shadow .5s,clip-path 1.4s cubic-bezier(.16,1,.3,1)!important}
.gitem:hover{translate:0 -10px;box-shadow:0 40px 70px -30px rgba(84,16,27,.55)}

/* 3D press on buttons */
.btn:active{translate:0 2px!important}

@media (max-width:900px){.scf-orbit{width:115%;opacity:.6}}
@media (prefers-reduced-motion:reduce){
  .scf-orbit{display:none}
  .pcard.rv,.inv.rv,figure.quote.rv,.scf-card.rv,.icard.rv,.section-head.rv,.scf-tilt,.hero-art .hero-photo,.about-photos .ap{rotate:none!important;translate:none!important}
}