/* PropFact 3D layer. Photography, depth, tilt and scroll reveals on top of the
   Deep Harbour tokens in pf.css. Everything here switches off under
   prefers-reduced-motion, and nothing in it is needed to read the page. */

/* --------------------------------------------------------------- tilt */
[data-tilt]{--rx:0deg;--ry:0deg;--gx:50%;--gy:50%;--lift:0px;
  transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--lift));
  transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,border-color .3s;
  will-change:transform;position:relative}
[data-tilt].tilting{transition:transform .08s linear,box-shadow .3s,border-color .3s;--lift:14px;
  box-shadow:0 30px 60px -22px rgba(0,0,0,.65),0 0 0 1px rgba(79,209,197,.14)}
[data-tilt]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(520px circle at var(--gx) var(--gy),rgba(255,255,255,.10),transparent 42%);
  opacity:0;transition:opacity .4s}
[data-tilt].tilting::after{opacity:1}
[data-tilt] .pop{transform:translateZ(38px)}
[data-tilt] .pop2{transform:translateZ(70px)}

/* ------------------------------------------------------------- reveal */
.reveal{opacity:0;transform:perspective(1200px) translateY(46px) rotateX(14deg) scale(.98);
  transform-origin:50% 100%;transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,.84,.24,1);
  transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
/* once in, hand transform back to the tilt handler without a jump */
.reveal.in[data-tilt]{transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(var(--lift))}

/* ----------------------------------------------------------- 3D hero */
.hero3d{position:relative;min-height:min(94vh,900px);display:flex;align-items:center;overflow:hidden;
  isolation:isolate;border-bottom:1px solid var(--line)}
.hero3d .bg{position:absolute;inset:-8% 0 -8% 0;z-index:-3;background:#071824 center/cover no-repeat;
  transform:translate3d(0,var(--py,0px),0) scale(1.08);will-change:transform}
.hero3d::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(90deg,rgba(7,24,36,.96) 0%,rgba(7,24,36,.86) 34%,rgba(7,24,36,.35) 64%,rgba(7,24,36,.55) 100%),
             linear-gradient(0deg,#071824 0%,rgba(7,24,36,0) 30%)}
.hero3d .inner{width:100%;max-width:1240px;margin:0 auto;padding:72px 32px 90px;display:flex;gap:40px;
  align-items:center;flex-wrap:wrap}
.hero3d .copy{flex:1 1 470px;min-width:0}
.hero3d h1{font-size:clamp(36px,min(5.4vw,max(calc(73.76 * var(--u)),12px)),64px);line-height:1.02;letter-spacing:-.035em;margin-bottom:22px}
.hero3d h1 em{font-style:normal;background:linear-gradient(100deg,#4fd1c5,#d9a552);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero3d .copy p{font-size:18px;line-height:1.6;color:var(--ink);max-width:48ch;margin-bottom:28px}
.hero3d .acts{display:flex;gap:12px;flex-wrap:wrap}
.hero3d .proof{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
.hero3d .proof div{font-size:13px;color:var(--ink-muted);line-height:1.35}
.hero3d .proof b{display:block;font-family:var(--disp);font-size:24px;color:var(--ink-strong);letter-spacing:-.02em}

/* the floating composition */
.stage{flex:1 1 480px;min-width:0;height:560px;position:relative;perspective:1500px}
.stage .rig{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(calc(8deg + var(--sy,0deg))) rotateY(calc(-16deg + var(--sx,0deg)));
  transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.stage .layer{position:absolute;transform-style:preserve-3d;border-radius:18px}
.stage .ph{overflow:hidden;box-shadow:0 50px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1)}
.stage .ph img{width:100%;height:100%;object-fit:cover;display:block}
.stage .ph.main{left:6%;top:9%;width:74%;height:66%;transform:translateZ(0)}
.stage .ph.back{right:0;top:0;width:40%;height:40%;transform:translateZ(-160px);filter:saturate(.8) brightness(.8)}
.stage .ph.low{right:3%;bottom:4%;width:38%;height:34%;transform:translateZ(90px)}
.stage .glass{background:rgba(9,32,45,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -24px rgba(0,0,0,.7)}
.stage .ev{left:-2%;bottom:3%;width:60%;padding:18px 20px 14px;transform:translateZ(150px)}
.stage .ev .t{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.stage .ev .n{font-size:12px;color:var(--ink-muted);margin-bottom:6px}
.stage .chip{padding:10px 14px;border-radius:12px;font-size:12px;color:var(--ink-muted);white-space:nowrap}
.stage .chip b{display:block;font-family:var(--disp);font-size:19px;color:var(--ink-strong);letter-spacing:-.02em}
.stage .chip.c1{left:60%;top:3%;transform:translateZ(210px)}
.stage .chip.c2{right:-2%;top:47%;transform:translateZ(240px)}
.stage .chip .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--good);
  margin-right:6px;box-shadow:0 0 0 4px rgba(63,191,114,.18);animation:pulse 2.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(63,191,114,0)}}
.stage .float{animation:bob 7s ease-in-out infinite}
.stage .float.f2{animation-delay:-3.5s;animation-duration:8s}
@keyframes bob{50%{margin-top:-12px}}
.scrollcue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);display:flex;flex-direction:column;align-items:center;gap:8px}
.scrollcue i{width:1px;height:34px;background:linear-gradient(var(--teal),transparent);animation:cue 2s infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:760px){
  .stage{height:420px;flex-basis:100%}
  .stage .chip.c2{right:0}
  .stage .ev{width:70%}
  .hero3d::before{background:linear-gradient(180deg,rgba(7,24,36,.9) 0%,rgba(7,24,36,.75) 55%,#071824 100%)}
}

/* ------------------------------------------------------- photo pieces */
.photo{position:relative;overflow:hidden;border-radius:12px;background:#0a2634}
.photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.card:hover .photo img,[data-tilt]:hover .photo img{transform:scale(1.07)}
.door .photo{aspect-ratio:16/10;margin-bottom:22px}
.door .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(7,24,36,.55))}

/* depth stack beside the "three ways" copy */
.fourth{display:flex;gap:60px;align-items:center;flex-wrap:wrap}
.fourth .pics{flex:1 1 420px;min-width:0;height:520px;position:relative;perspective:1400px}
.fourth .pics .rig{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateY(calc(14deg + var(--sx,0deg))) rotateX(calc(4deg + var(--sy,0deg)));transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.fourth .pics .photo{position:absolute;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08)}
.fourth .pics .a{left:0;top:0;width:72%;height:62%;transform:translateZ(-60px)}
.fourth .pics .b{right:0;bottom:0;width:66%;height:58%;transform:translateZ(60px)}
.fourth .pics .tagfloat{position:absolute;left:8%;bottom:14%;transform:translateZ(150px);padding:14px 18px;border-radius:14px}
.fourth .txt{flex:1 1 460px;min-width:0}
.fourth .txt p{font-size:17px;line-height:1.62;color:var(--ink-muted);margin-bottom:18px}
@media(max-width:760px){.fourth .pics{height:360px}}

/* -------------------------------------------------------- 3D street */
.street{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(900px 480px at 70% 0%,#123a4c,transparent 70%),#06151f;min-height:540px}
.street canvas{display:block;width:100%;height:100%;position:absolute;inset:0;cursor:grab;touch-action:pan-y}
.street canvas:active{cursor:grabbing}
.street .over{position:relative;z-index:2;padding:36px 40px;max-width:430px;pointer-events:none}
.street .over *{pointer-events:auto}
.street .over p{font-size:15.5px;line-height:1.6;color:var(--ink-muted);margin-bottom:18px}
.street .seg{display:inline-flex;background:rgba(0,0,0,.35);border:1px solid var(--line);border-radius:999px;padding:4px;
  backdrop-filter:blur(8px)}
.street .seg button{font:inherit;font-size:13px;font-weight:700;border:0;background:none;color:var(--ink-muted);
  padding:9px 16px;border-radius:999px;cursor:pointer}
.street .seg button.on{background:var(--teal);color:#04141d}
.street .legend{position:absolute;right:22px;bottom:18px;z-index:2;font-size:12px;color:var(--ink-faint);
  text-align:right;line-height:1.5;pointer-events:none}
.street .hint{position:absolute;left:40px;bottom:18px;z-index:2;font-size:12px;color:var(--ink-faint);pointer-events:none}
@media(max-width:760px){
  .street{min-height:560px}
  .street .over{padding:24px 22px 60px;max-width:none;background:linear-gradient(#06151f 55%,rgba(6,21,31,0))}
  .street .hint{left:22px}
}

/* ------------------------------------------------------ ring gallery */
.ringwrap{position:relative;height:460px;perspective:1800px;margin-top:10px;touch-action:pan-y;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ringwrap:active{cursor:grabbing}
.ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.ring .it{position:absolute;width:300px;height:370px;left:-150px;top:-185px;border-radius:16px;overflow:hidden;
  backface-visibility:hidden;box-shadow:0 30px 60px -25px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.1);
  user-select:none;-webkit-user-drag:none}
.ring .it img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.ring .it figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;
  background:linear-gradient(transparent,rgba(4,16,24,.92));font-size:13px;color:var(--ink-muted)}
.ring .it figcaption b{display:block;font-family:var(--disp);font-size:18px;color:var(--ink-strong);margin-bottom:2px}
.ring .it.front{box-shadow:0 40px 80px -25px rgba(0,0,0,.9),0 0 0 1px rgba(79,209,197,.5)}
@media(max-width:760px){.ringwrap{height:380px}.ring .it{width:220px;height:290px;left:-110px;top:-145px}}

/* ------------------------------------------------------- photo bands */
.band3d{position:relative;height:420px;overflow:hidden;isolation:isolate;margin-bottom:-190px}
.band3d .bg{position:absolute;inset:-12% 0;z-index:-2;background:center/cover no-repeat;
  transform:translate3d(0,var(--py,0px),0) scale(1.06)}
.band3d::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,24,36,.35) 0%,rgba(7,24,36,.7) 55%,#071824 100%)}
.band3d + .wrap{position:relative}

.cta.photo-cta{position:relative;overflow:hidden;isolation:isolate;border-color:rgba(255,255,255,.12)}
.cta.photo-cta .bg{position:absolute;inset:-20% 0;z-index:-2;background:center/cover no-repeat;
  transform:translate3d(0,var(--py,0px),0)}
.cta.photo-cta::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(7,24,36,.95) 0%,rgba(7,24,36,.82) 55%,rgba(7,24,36,.55) 100%)}

/* 3D numerals on step cards */
.stepnum{font-family:var(--disp);font-size:64px;font-weight:700;line-height:.9;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px rgba(79,209,197,.55);float:right;margin:-6px -4px 0 12px;
  transform:translateZ(60px);text-shadow:6px 6px 0 rgba(79,209,197,.07)}

/* -------------------------------------------------------- auth pages */
.authbg{position:fixed;inset:0;z-index:-1;background:center/cover no-repeat;filter:saturate(.85)}
.authbg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(700px 520px at 50% 40%,rgba(7,24,36,.55),rgba(7,24,36,.94))}
body.has-authbg{background:#071824}
.auth .card{background:rgba(8,28,40,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-color:rgba(255,255,255,.13);box-shadow:0 40px 90px -30px rgba(0,0,0,.8)}

/* --------------------------------------------------------- nav glass */
/* sticky only where the nav fits on one row; on a phone it wraps to three */
@media(min-width:900px){
  .nav{position:sticky;top:0;z-index:50;background:rgba(7,24,36,.62);backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px)}
}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  [data-tilt],.stage .rig,.fourth .pics .rig{transition:none}
  .stage .float,.scrollcue i,.stage .chip .dot{animation:none}
}