/* ============================================================
   RIEWA — the 6 signature tile animations
   3 sector scenes + 3 waarde badges. Mechanical, layered, precise.
   ============================================================ */

/* reusable animation container (used by homepage cards AND sector pages) */
.anim { position:relative; overflow:hidden; background:var(--panel-2); }
.anim .grid { position:absolute; inset:0; background:repeating-linear-gradient(to right, rgba(255,255,255,0.03) 0 1px, transparent 1px 28px), repeating-linear-gradient(to bottom, rgba(255,255,255,0.03) 0 1px, transparent 1px 28px); }

/* shared ground line inside sector scenes */
.scene-city, .scene-portal, .scene-infra { position:absolute; inset:0; }
.scene-city .street, .scene-portal .street {
  position:absolute; left:0; right:0; bottom:34px; height:2px; background:#2E3136;
}

/* ---------- 01 WONINGBOUW : skyline + tower crane ---------- */
.scene-city .blk { position:absolute; bottom:36px; background:#1D1F23; border:1px solid #33373C; display:grid; gap:6px; padding:9px 8px; align-content:start; }
.scene-city .blk i { width:6px; height:6px; background:#F58220; opacity:0.15; display:block; }
.scene-city .b1 { left:26px; width:44px; height:70px; grid-template-columns:repeat(2,1fr); }
.scene-city .b2 { left:78px; width:52px; height:104px; grid-template-columns:repeat(2,1fr); }
.scene-city .b3 { left:138px; width:34px; height:56px; grid-template-columns:1fr; }
.scene-city .b1 i:nth-child(1){ animation:win 3s ease-in-out 0.2s infinite; }
.scene-city .b1 i:nth-child(3){ animation:win 3s ease-in-out 1.1s infinite; }
.scene-city .b2 i:nth-child(2){ animation:win 3s ease-in-out 0.6s infinite; }
.scene-city .b2 i:nth-child(4){ animation:win 3s ease-in-out 1.7s infinite; }
.scene-city .b2 i:nth-child(5){ animation:win 3s ease-in-out 2.3s infinite; }
.scene-city .b3 i:nth-child(1){ animation:win 3s ease-in-out 0.9s infinite; }
@keyframes win { 0%,100%{opacity:0.14;} 50%{opacity:1;} }

.scene-city .crane { position:absolute; right:30px; bottom:36px; width:96px; height:150px; }
.scene-city .crane .mast { position:absolute; left:20px; bottom:0; width:5px; height:150px; background:#45494F; }
.scene-city .crane .mast::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(to bottom, transparent 0 10px, rgba(0,0,0,0.4) 10px 11px); }
.scene-city .crane .jib { position:absolute; left:0; top:0; width:96px; height:4px; background:#45494F; transform-origin:22px center; animation:jibSwing 9s ease-in-out infinite; }
.scene-city .crane .cw { position:absolute; left:0; top:-6px; width:14px; height:14px; background:#33373C; transform-origin:28px center; animation:jibSwing 9s ease-in-out infinite; }
@keyframes jibSwing { 0%,100%{transform:rotate(0deg);} 50%{transform:rotate(-13deg);} }
.scene-city .crane .hoist { position:absolute; right:8px; top:2px; animation:hoistY 3.4s ease-in-out infinite; }
.scene-city .crane .hoist .cable { display:block; width:2px; height:40px; background:#7C828A; margin:0 auto; }
.scene-city .crane .hoist .hook { display:block; width:13px; height:10px; background:#F58220; }
@keyframes hoistY { 0%,100%{transform:translateY(0);} 50%{transform:translateY(20px);} }
.scene-city .c-ring { position:absolute; right:60px; bottom:34px; width:34px; height:11px; border:2px solid rgba(245,130,32,0.7); border-radius:50%; transform:translate(50%,-50%); animation:cRing 3.4s ease-out 0.4s infinite; opacity:0; }
@keyframes cRing { 0%,45%{transform:translate(50%,-50%) scale(0.3);opacity:0;} 55%{opacity:0.9;} 100%{transform:translate(50%,-50%) scale(2.6);opacity:0;} }

/* ---------- 02 UTILITEITSBOUW : portal frame + drop hammer ---------- */
.scene-portal .leg { position:absolute; bottom:36px; width:6px; height:104px; background:#45494F; }
.scene-portal .leg.l { left:34px; }
.scene-portal .leg.r { right:34px; }
.scene-portal .beam { position:absolute; left:34px; right:34px; top:34px; height:6px; background:#45494F; }
.scene-portal .beam::after { content:""; position:absolute; left:0; right:0; bottom:-9px; height:3px; background:repeating-linear-gradient(90deg,#33373C 0 12px,transparent 12px 20px); }
.scene-portal .drop { position:absolute; left:50%; top:44px; transform:translateX(-50%); width:38px; height:30px; background:repeating-linear-gradient(45deg,#F58220 0 9px,#1B1D20 9px 18px); border:1px solid #45494F; animation:pDrop 2.2s cubic-bezier(0.6,0,0.85,1) infinite; }
@keyframes pDrop { 0%{top:44px;} 40%{top:104px;} 50%{top:98px;} 58%{top:104px;} 100%{top:44px;} }
.scene-portal .upile { position:absolute; left:50%; bottom:36px; transform:translateX(-50%); width:15px; height:52px; background:linear-gradient(to right,#7E848B,#D6D9DC 40%,#5F646A); }
.scene-portal .u-ring { position:absolute; left:50%; bottom:36px; width:44px; height:14px; border:2px solid rgba(245,130,32,0.75); border-radius:50%; transform:translate(-50%,50%); animation:uRing 2.2s ease-out infinite; opacity:0; }
@keyframes uRing { 0%,42%{transform:translate(-50%,50%) scale(0.25);opacity:0;} 50%{opacity:0.95;} 100%{transform:translate(-50%,50%) scale(3);opacity:0;} }
.scene-portal .spark { position:absolute; left:50%; bottom:60px; width:3px; height:3px; background:#F58220; opacity:0; }
.scene-portal .spark.s1 { animation:spk1 2.2s ease-out infinite; }
.scene-portal .spark.s2 { animation:spk2 2.2s ease-out infinite; }
@keyframes spk1 { 0%,42%{transform:translate(-50%,0);opacity:0;} 50%{opacity:1;} 100%{transform:translate(-260%,-40%);opacity:0;} }
@keyframes spk2 { 0%,42%{transform:translate(-50%,0);opacity:0;} 50%{opacity:1;} 100%{transform:translate(160%,-46%);opacity:0;} }

/* ---------- 03 INFRA : bridge + hauler + water ---------- */
.scene-infra .deck { position:absolute; left:10px; right:10px; top:78px; height:7px; background:#45494F; }
.scene-infra .deck::before { content:""; position:absolute; left:0; right:0; top:-4px; height:2px; background:repeating-linear-gradient(90deg,#5F646A 0 18px,transparent 18px 30px); }
.scene-infra .pier { position:absolute; top:85px; width:9px; height:52px; background:linear-gradient(to right,#7E848B,#C9CED4 40%,#5F646A); }
.scene-infra .pier.p1 { left:44px; }
.scene-infra .pier.p2 { left:50%; margin-left:-4px; }
.scene-infra .pier.p3 { right:44px; }
.scene-infra .hauler { position:absolute; top:62px; left:0; width:16px; height:11px; background:#F58220; animation:haul 4.5s linear infinite; }
.scene-infra .hauler::before { content:""; position:absolute; left:-6px; bottom:0; width:6px; height:7px; background:#C9CED4; }
@keyframes haul { 0%{transform:translateX(-40px);opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{transform:translateX(240px);opacity:0;} }
.scene-infra .water { position:absolute; left:0; right:0; top:150px; height:26px; overflow:hidden; }
.scene-infra .water span { position:absolute; top:6px; left:0; width:300%; height:4px; background:repeating-linear-gradient(90deg,rgba(122,148,166,0.4) 0 14px,transparent 14px 28px); animation:flow 1.4s linear infinite; }
.scene-infra .water::after { content:""; position:absolute; top:14px; left:0; width:300%; height:3px; background:repeating-linear-gradient(90deg,rgba(122,148,166,0.22) 0 10px,transparent 10px 30px); animation:flow 2.1s linear infinite reverse; }
@keyframes flow { from{transform:translateX(0);} to{transform:translateX(-28px);} }

/* ---------- WAARDE 1 : equalizer (jong & gedreven) ---------- */
.waarde .eq { position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; gap:7px; padding-bottom:20px; }
.waarde .eq span { width:9px; background:#F58220; transform-origin:bottom; }
.waarde .eq span:nth-child(1){ height:26px; background:#7C828A; animation:eqb 1.1s ease-in-out infinite alternate; }
.waarde .eq span:nth-child(2){ height:44px; background:#F58220; animation:eqb 0.85s ease-in-out 0.2s infinite alternate; }
.waarde .eq span:nth-child(3){ height:34px; background:#C9CED4; animation:eqb 1.25s ease-in-out 0.45s infinite alternate; }
.waarde .eq span:nth-child(4){ height:20px; background:#F58220; animation:eqb 0.95s ease-in-out 0.65s infinite alternate; }
@keyframes eqb { from{transform:scaleY(0.3);} to{transform:scaleY(1);} }

/* ---------- WAARDE 2 : precision target (betrouwbaar) ---------- */
.waarde .target { position:absolute; inset:0; }
.waarde .target .core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:11px; height:11px; background:#F58220; }
.waarde .target .r1, .waarde .target .r2 { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid rgba(245,130,32,0.8); }
.waarde .target .r1 { width:22px; height:22px; animation:tgt 2.6s ease-out infinite; }
.waarde .target .r2 { width:22px; height:22px; border-color:rgba(245,130,32,0.5); animation:tgt 2.6s ease-out 1.3s infinite; }
@keyframes tgt { 0%{width:14px;height:14px;opacity:0.9;} 100%{width:64px;height:64px;opacity:0;} }
.waarde .target .cross-h, .waarde .target .cross-v { position:absolute; background:rgba(201,206,212,0.35); }
.waarde .target .cross-h { left:16px; right:16px; top:50%; height:1px; }
.waarde .target .cross-v { top:16px; bottom:16px; left:50%; width:1px; }

/* ---------- WAARDE 3 : caliper reticle (focus op kwaliteit) ---------- */
.waarde .cal { position:absolute; inset:0; }
.waarde .cal .cal-h { position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(255,255,255,0.12); }
.waarde .cal .cal-v { position:absolute; top:0; bottom:0; left:50%; width:1px; background:rgba(255,255,255,0.12); }
.waarde .cal .cal-ring { position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border:1px dashed #7C828A; border-radius:50%; animation:riewaSpin 9s linear infinite; }
.waarde .cal .cal-dot { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:8px; height:8px; background:#F58220; }
.waarde .cal .cal-tick { position:absolute; left:50%; width:1px; height:7px; background:#F58220; transform-origin:50% 24px; }
.waarde .cal .cal-tick.t1 { top:calc(50% - 24px); animation:calpulse 2.4s ease-in-out infinite; }
.waarde .cal .cal-tick.t2 { top:calc(50% - 24px); transform:rotate(90deg); animation:calpulse 2.4s ease-in-out 0.6s infinite; }
@keyframes calpulse { 0%,100%{opacity:0.3;} 50%{opacity:1;} }