/* AFRIDAL — client portal hero: 3D land-intelligence scene (js/landtwin.js).
   The scene lives in the hero's middle-to-right area only; the left copy keeps its own column. */

.portal-hero{min-height:344px}
.portal-hero .ph-copy{max-width:min(540px,41%)}
.portal-hero .ph-scene{position:absolute;z-index:1;top:0;bottom:0;right:0;left:45%;width:auto;padding:0;transform:none;display:block;pointer-events:none}

.lt{position:absolute;inset:0;overflow:hidden;contain:layout paint;--cy:#5CE6F0;--tl:#37D3B5;--gd:#E9CF97;
  font-family:Inter,system-ui,sans-serif;color:#fff}
.lt-gl{position:absolute;inset:0;width:100%;height:100%;display:block}   /* edge fade is drawn by the renderer itself */
.lt-fallback{display:none}

/* ---- glass panels ---- */
/* Base glass is "light": no live blur, so it costs nothing on machines without a GPU (software rendering).
   The renderer adds .lt-hw when it has a hardware-accelerated context; only then is the frosted blur switched on. */
.lt-panel{position:absolute;width:150px;padding:9px 11px 10px;border-radius:14px;opacity:0;
  background:linear-gradient(140deg,rgba(30,90,120,.8),rgba(12,60,92,.84) 55%,rgba(8,43,80,.88));
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 12px 30px -10px rgba(0,8,24,.55),inset 0 1px 0 rgba(255,255,255,.22),0 0 calc(var(--hit,0) * 22px) rgba(92,230,240,calc(var(--hit,0) * .55))}
.lt-hw .lt-panel{will-change:transform,opacity;background:linear-gradient(140deg,rgba(255,255,255,.14),rgba(127,230,208,.05) 55%,rgba(8,43,80,.18));
  -webkit-backdrop-filter:blur(9px) saturate(1.25);backdrop-filter:blur(9px) saturate(1.25)}
.lt-hw .lt-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid rgba(92,230,240,calc(.12 + var(--hit,0) * .6));-webkit-mask:linear-gradient(135deg,#000,transparent 60%);mask:linear-gradient(135deg,#000,transparent 60%)}
.lt-ph{display:flex;align-items:center;gap:6px;font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(214,246,247,.72);white-space:nowrap;min-width:0}
.lt-ph>span{overflow:hidden;text-overflow:ellipsis}
.lt-ph .ls{display:none}
.lt-ph svg{width:13px;height:13px;flex:none;fill:none;stroke:var(--cy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lt-pv{margin-top:5px;display:flex;align-items:baseline;gap:4px;min-width:0}
.lt-pv b{font-size:17px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-pv small{font-size:10.5px;color:rgba(255,255,255,.66);font-weight:600}
.lt-pv b.ok{font-size:14px;color:#8FF0DC}.lt-pv b.warn{font-size:13px;color:var(--gd)}
.lt-sub{margin-top:2px;font-size:10px;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lt-bar{margin-top:7px;height:3px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.lt-bar i{display:block;height:100%;width:72%;border-radius:inherit;background:linear-gradient(90deg,var(--tl),var(--cy));box-shadow:0 0 8px var(--cy)}
.lt-own{align-items:center;gap:8px}
.lt-own>span:last-child{display:flex;flex-direction:column;min-width:0}
.lt-own b{font-size:12.5px}.lt-own small{font-size:9.5px;letter-spacing:.06em}
.lt-av{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:10px;font-weight:800;
  background:linear-gradient(135deg,#0E9E83,#0B3563);box-shadow:0 0 0 1.5px var(--gd),0 0 12px rgba(233,207,151,.35)}
.lt-dots{display:flex;gap:4px;margin-top:6px}
.lt-dots i{width:12px;height:8px;border-radius:2px;border:1px solid rgba(92,230,240,.75);background:rgba(55,211,181,.18);transform:skewX(-18deg)}
.lt-dots i:first-child{border-color:var(--gd);background:rgba(233,207,151,.22)}

/* positions (desktop): corners of the scene, the land between them */
.lt-panel[data-lt-p="area"]{left:7%;top:9%}
.lt-panel[data-lt-p="owner"]{right:3%;top:7%}
.lt-panel[data-lt-p="verify"]{right:3.5%;bottom:9%}
.lt-panel[data-lt-p="count"]{left:5%;bottom:9%}

/* ---- holographic title deed ---- */
.lt-deed{position:absolute;left:0;top:0;width:98px;opacity:0;perspective:520px}
.lt-hw .lt-deed{will-change:transform,opacity}
.lt-deed-in{position:relative;padding:8px 9px 8px;border-radius:9px;transform-style:preserve-3d;overflow:hidden;
  background:linear-gradient(160deg,rgba(150,240,245,.22),rgba(55,211,181,.08) 45%,rgba(10,50,90,.28));
  border:1px solid rgba(140,236,244,.55);
  box-shadow:0 0 0 1px rgba(233,207,151,calc(var(--pulse,0) * .5)),0 0 calc(14px + var(--pulse,0) * 26px) rgba(92,230,240,calc(.22 + var(--pulse,0) * .35)),inset 0 0 18px rgba(92,230,240,.14)}
.lt-deed-in::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(160,245,250,.07) 0 1px,transparent 1px 3px)}
.lt-deed-hd{display:flex;flex-direction:column;align-items:center;gap:1px;padding-bottom:5px;border-bottom:1px solid rgba(140,236,244,.35)}
.lt-deed-hd span{font-size:8.5px;font-weight:800;letter-spacing:.24em;color:#E9FBFC;text-shadow:0 0 8px rgba(92,230,240,.8)}
.lt-deed-hd b{font-size:6.5px;font-weight:700;letter-spacing:.2em;color:var(--gd)}
.lt-deed-map{display:block;width:100%;height:auto;margin:5px 0 3px}
.lt-deed-map .g{fill:none;stroke:rgba(140,236,244,.18);stroke-width:.6}
.lt-deed-map .p{fill:rgba(233,207,151,.18);stroke:var(--gd);stroke-width:1.2;stroke-linejoin:round;filter:drop-shadow(0 0 2px rgba(233,207,151,.7))}
.lt-deed-ln{display:grid;gap:3px}
.lt-deed-ln i{display:block;height:2px;border-radius:1px;background:rgba(190,245,250,.38)}
.lt-deed-ln i:nth-child(2){width:78%}.lt-deed-ln i:nth-child(3){width:58%}
.lt-deed-ft{display:flex;align-items:center;justify-content:space-between;margin-top:6px;font-size:7.5px;font-weight:700;letter-spacing:.1em;color:rgba(214,246,247,.8)}
.lt-seal{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F7E3B4,#B8924E);
  box-shadow:0 0 calc(6px + var(--pulse,0) * 12px) rgba(233,207,151,.8)}
.lt-seal svg{width:12px;height:12px;fill:none;stroke:#3B2A0E;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lt-deed-sheen{position:absolute;top:-20%;bottom:-20%;width:38%;left:0;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:translateX(calc(var(--sheen,-1) * 300%)) skewX(-12deg)}

/* ---- micro labels ---- */
.lt-tag{position:absolute;left:0;top:0;margin:-6px 0 0 6px;font:600 8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:rgba(170,240,245,.6);white-space:nowrap;opacity:0}

/* ---- no WebGL: calm static backdrop, panels and deed stay ---- */
.lt-nogl .lt-gl{display:none}
.lt-nogl .lt-fallback{display:block;position:absolute;inset:0;
  background:radial-gradient(ellipse 46% 40% at 62% 56%,rgba(55,211,181,.24),transparent 70%),
    linear-gradient(rgba(92,230,240,.10) 1px,transparent 1px) 0 0/26px 26px,linear-gradient(90deg,rgba(92,230,240,.10) 1px,transparent 1px) 0 0/26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 62% 55%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 60% at 62% 55%,#000,transparent 75%)}
.lt-nogl .lt-tag{display:none}

/* ---- responsive ---- */
@media (max-width:1180px){
  .lt-panel{width:140px;padding:8px 10px 9px}
  .lt-ph{letter-spacing:.1em}
  .lt-ph .lf{display:none}.lt-ph .ls{display:inline}
  .lt-panel[data-lt-p="area"]{left:6%;top:auto;bottom:8%}
  .lt-panel[data-lt-p="count"]{display:none}
}
@media (max-width:900px){
  .portal-hero .ph-copy{max-width:43%}
  .portal-hero .ph-scene{left:47%}
  .lt-panel[data-lt-p="area"]{display:none}
  .lt-tag[data-lt-tag="1"]{display:none}
}
@media (max-width:700px){
  .portal-hero{display:flex;flex-direction:column;min-height:0;padding:24px 18px 0}
  .portal-hero .ph-copy{max-width:none}
  .portal-hero .ph-scene{order:2;position:relative;left:auto;right:auto;top:auto;bottom:auto;height:clamp(290px,84vw,360px);margin:2px -18px 0}
  .lt-panel{width:min(46%,150px);padding:7px 9px 8px;border-radius:12px}
  .lt-ph{font-size:8px;letter-spacing:.05em}
  .lt-pv b{font-size:15px}
  .lt-panel[data-lt-p="area"]{display:block;left:4%;top:auto;bottom:5%}
  .lt-panel[data-lt-p="owner"]{display:none}
  .lt-panel[data-lt-p="verify"]{right:4%;bottom:5%}
  .lt-deed{width:88px}
  .lt-deed-hd span{letter-spacing:.14em;font-size:8px}
  .lt-tag{display:none}
}
@media (prefers-reduced-motion:reduce){.lt-hw .lt-panel,.lt-hw .lt-deed{will-change:auto}}