/* SITE-WIDE 3D EFFECTS (assets/v5d/site-3d.js), inspired by the real-estate showreel:
   1. smooth section reveals  2. rising out of clouds  3. photo inside big text  4. images in 3D arrow shapes */

/* 1. 3D scroll: each section tilts up out of depth as it arrives and tips back as it leaves
      (the transform is set by site-3d.js as you scroll) */
.s3-sec{will-change:auto;backface-visibility:visible}

/* 2. rising out of clouds: big visuals rise up out of glowing mist, then the mist clears */
.s3-rise{opacity:0;transform:translateY(70px) scale(.97);transition:opacity 1.2s ease,transform 1.8s cubic-bezier(.16,.84,.24,1)}
.s3-rise.s3-up{opacity:1;transform:none}
.s3-mist{position:absolute;left:-12%;right:-12%;bottom:-8%;height:48%;z-index:7;pointer-events:none;opacity:0;transition:opacity 1.6s ease;
  background:
    radial-gradient(ellipse 28% 60% at 18% 70%,rgba(200,230,255,.55),transparent 70%),
    radial-gradient(ellipse 30% 55% at 46% 80%,rgba(170,215,255,.6),transparent 70%),
    radial-gradient(ellipse 26% 60% at 74% 72%,rgba(205,232,255,.5),transparent 70%),
    radial-gradient(ellipse 40% 50% at 50% 100%,rgba(120,190,255,.45),transparent 75%);
  filter:blur(22px);animation:s3Drift 9s ease-in-out infinite alternate}
.s3-rise.s3-up .s3-mist{animation:s3Clear 3.4s ease forwards,s3Drift 9s ease-in-out infinite alternate}
.s3-rise:not(.s3-up) .s3-mist{opacity:1}
@keyframes s3Drift{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
@keyframes s3Clear{0%{opacity:1}55%{opacity:.75}100%{opacity:0}}

/* 3. photo inside big text: key words are filled with a moving light image that slides as you scroll */
.s3-imgtext{background-image:linear-gradient(180deg,rgba(215,246,255,.6),rgba(100,190,255,.3)),url(work-portal-bg.webp);
  background-size:100% 100%,max(1400px,100vw) auto;background-repeat:no-repeat,repeat;background-position:0 0,center;
  -webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important}
/* (no filter/glow on these: in some sections a filter here stops the whole heading from drawing) */

/* 4. images in 3D arrow shapes: our websites fly in on scroll */
.s3-chev-strip{position:relative;padding:clamp(60px,9vh,110px) 0;overflow:hidden;background:transparent}
.s3-chev-head{width:min(1240px,calc(100% - 40px));margin:0 auto 34px;display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px}
.s3-chev-head small{display:block;font:500 12px/1 'JetBrains Mono',monospace;letter-spacing:.3em;text-transform:uppercase;color:#7fc0ff;margin-bottom:14px}
.s3-chev-head h2{margin:0;font-size:clamp(30px,4vw,56px);line-height:1.05;letter-spacing:-.035em;font-weight:600;color:#eef6fb}
.s3-chev-head a{color:#8cd5ff;font-weight:600;text-decoration:none;border-bottom:1px solid #8cd5ff66;padding-bottom:4px}
.s3-chev-row{display:flex;gap:0;width:min(1500px,100%);margin:0 auto;padding:10px 20px 30px;perspective:1200px;overflow-x:auto;scrollbar-width:none}
.s3-chev-row::-webkit-scrollbar{display:none}
.s3-chev{position:relative;flex:0 0 clamp(170px,19vw,260px);aspect-ratio:1.15;margin-right:-3.2%;text-decoration:none;color:#fff;
  clip-path:polygon(0 0,76% 0,100% 50%,76% 100%,0 100%,24% 50%);
  background:#0b1a30 center/cover no-repeat;filter:drop-shadow(0 18px 30px #000b);
  transform:translateX(60vw) translateZ(-400px) rotateY(-55deg);opacity:0;
  transition:transform 1.3s cubic-bezier(.16,.84,.24,1) var(--s3d,0s),opacity .9s ease var(--s3d,0s),filter .4s}
.s3-chev::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,12,26,.55),transparent 45%,rgba(4,12,26,.35));transition:opacity .4s}
.s3-chev span{position:absolute;left:28%;bottom:12%;z-index:1;font-weight:700;font-size:clamp(12px,1vw,15px);text-shadow:0 2px 10px #000}
.s3-chev-strip.s3-in .s3-chev{transform:rotateY(-14deg);opacity:1}
.s3-chev-strip.s3-in .s3-chev:hover,.s3-chev-strip.s3-in .s3-chev:focus-visible{transform:rotateY(0) translateZ(60px) scale(1.06);filter:drop-shadow(0 24px 40px #2f8fff55) brightness(1.1);z-index:2;outline:none}
.s3-chev-strip.s3-in .s3-chev:hover::after{opacity:0}
@media(max-width:700px){.s3-chev{flex-basis:200px;margin-right:-28px}.s3-chev-strip.s3-in .s3-chev{transform:none}}

@media (prefers-reduced-motion:reduce){
  .s3-rev,.s3-rise,.s3-chev{opacity:1!important;transform:none!important;transition:none!important}
  .s3-mist{display:none}.s3-imgtext{background-attachment:scroll}
}

/* A blue-lit edge gives each passing screen depth, then clears at rest. */
.s3-sec.s3-turning{border-radius:22px;box-shadow:0 0 0 1px rgb(110 200 255 / calc(var(--s3-edge,0) * .5)),0 28px 75px rgb(0 5 18 / calc(var(--s3-edge,0) * .7));}
@media(prefers-reduced-motion:reduce){.s3-sec{transform:none!important;opacity:1!important;box-shadow:none!important}}

/* Strong cube faces at section boundaries; controls stay flat at the reading position. */
.s3-sec.s3-turning{border-radius:8px;background-color:#040d1b;box-shadow:inset 0 0 0 1px #73caff66,0 25px 80px #000a;backface-visibility:hidden}

/* Soft blue light and depth replace the cube's hard faces. */
.s3-sec.s3-turning{border-radius:0;background-color:transparent;box-shadow:0 -28px 75px -45px rgb(63 177 255 / calc(var(--s3-edge,0) * .8));}

/* The entire viewport becomes a blue-glass tile surface during each handover. */
.s3-portal-wipe{position:fixed;z-index:18;inset:90px 0 0;pointer-events:none;visibility:hidden;opacity:0;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#0b4271,#030c1bee 75%)}
.s3-tile-stage{position:absolute;inset:0;perspective:1100px;display:grid;place-items:center;background:radial-gradient(ellipse,#0b45766b,transparent 70%)}
.s3-tile-grid{position:absolute;inset:-8%;transform-style:preserve-3d}
.s3-wave-tile{position:absolute;left:calc(var(--col)*6.25%);top:calc(var(--row)*10%);width:calc(6.25% - 3px);height:calc(10% - 3px);border-radius:3px;border:1px solid #7bdfff65;background:linear-gradient(145deg,#67d5ff,#176cb6 36%,#08284a 85%);box-shadow:inset 0 2px 1px #c5f4ff80,5px 9px 0 #041526,7px 13px 12px #0009;backface-visibility:hidden;will-change:transform}
.s3-wave-orb{position:absolute;left:50%;top:45%;width:clamp(65px,9vw,150px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 22%,white,#9eeaff 12%,#2575a7 30%,#051421 48%,#8adcf5 70%,#0e3c62 83%);box-shadow:inset -12px -14px 24px #00102188,0 35px 50px #00101dcc,0 0 45px #48baff77;will-change:transform}
@media(max-width:760px){.s3-portal-wipe{inset:74px 0 0}.s3-tile-stage{perspective:800px}}
@media(prefers-reduced-motion:reduce){.s3-portal-wipe{display:none}#team,#contact{clip-path:none!important}}

/* Pricing → Team: a separate cinematic split-door reveal. */
.s3-shutters{display:none;position:absolute;inset:0;perspective:1200px}
.s3-portal-wipe[data-mode="shutters"]{background:transparent}
.s3-portal-wipe[data-mode="shutters"] .s3-tile-stage{display:none}
.s3-portal-wipe[data-mode="shutters"] .s3-shutters{display:block}
.s3-shutter{position:absolute;left:0;right:0;height:50%;background-image:linear-gradient(135deg,#051428bb,#17497944,#020c1ad9),url(work-portal-bg.webp);background-size:100% 200%;box-shadow:inset 0 0 80px #001021aa;will-change:transform;backface-visibility:hidden}
.s3-shutter-top{top:0;background-position:center top;border-bottom:2px solid #90e8ff;transform-origin:50% 0;transform:translateY(calc(var(--shutter-open)*-108%)) rotateX(calc(var(--shutter-open)*-22deg));box-shadow:0 6px 28px #27b9ff88,inset 0 -1px #e0fbff}
.s3-shutter-bottom{bottom:0;background-position:center bottom;border-top:2px solid #90e8ff;transform-origin:50% 100%;transform:translateY(calc(var(--shutter-open)*108%)) rotateX(calc(var(--shutter-open)*22deg));box-shadow:0 -6px 28px #27b9ff88,inset 0 1px #e0fbff}

.s3-tile-stage.has-real-wave{background:linear-gradient(#020a16aa,#041321bb),url(work-portal-bg.webp) center/cover}
.has-real-wave>.s3-tile-grid,.has-real-wave>.s3-wave-orb{display:none}
.s3-real-wave{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}