/* ============================================================
   RIEWA — shared components
   Lifted out of index.html's inline <style> so the machine cutaway, spec table and
   proces steps have ONE definition, reused by index.html, machine.html and
   werkwijze.html. Depends on the tokens + keyframes in styles.css.
   ============================================================ */

/* ---- Machine cutaway — live cross-section under the maaiveld (home + machine page) ---- */
.cutaway {
  position: relative; width: 100%; max-width: 580px; aspect-ratio: 3/2;
  margin: 0 auto; background: var(--panel-2);
  border: 1px solid var(--line); overflow: hidden;
  box-shadow: var(--shadow-deep);
}
.cut-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);
}
.cut-glow {
  position: absolute; left: 50%; top: 62%; transform: translate(-50%,-50%);
  width: 130%; height: 60%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(245,130,32,0.16), transparent 70%);
}
/* vibration-free: the scene never shakes — motion is pure rotation + steady descent */
.scene { position: absolute; inset: 0; }
.ground { position: absolute; left:0; right:0; top:62%; bottom:0; }
.ground .l1 { position:absolute; left:0; right:0; top:0; height:40%; background: rgba(23,18,7,0.92); }
.ground .l2 { position:absolute; left:0; right:0; top:40%; height:33%; background: rgba(16,19,24,0.92); border-top:1px dashed rgba(255,255,255,0.14); }
.ground .l3 { position:absolute; left:0; right:0; top:73%; bottom:0; background: rgba(26,20,9,0.95); border-top:2px solid rgba(245,130,32,0.5); }
.maaiveld { position:absolute; left:0; right:0; top:62%; height:2px; background:#4A4E54; }
.crawler { position:absolute; left:24%; top:62%; width:132px; height:0; }
.crawler .body { position:absolute; left:0; bottom:18px; width:132px; height:34px; background:linear-gradient(#26282B,#17181B); border:1px solid #33373C; }
.crawler .cab { position:absolute; left:8px; bottom:52px; width:52px; height:30px; background:linear-gradient(#33373C,#1B1D20); border:1px solid #45494F; }
.crawler .beacon { position:absolute; left:26px; bottom:86px; width:7px; height:7px; border-radius:50%; background:#3DBB6E; animation:riewaBeacon 1.6s ease-in-out infinite; }
.crawler .track { position:absolute; left:-6px; bottom:0; width:144px; height:18px; border-radius:9px; background:#101113; border:1px solid #33373C; display:flex; align-items:center; justify-content:space-evenly; }
.crawler .track span { width:6px; height:6px; border-radius:50%; background:#33373C; }
.crawler .arm { position:absolute; left:60px; bottom:62px; width:98px; height:6px; background:#45494F; transform:rotate(-12deg); transform-origin:left center; }
.mast { position:absolute; left:54%; top:15%; width:10px; height:38%; margin-left:-1px; background:linear-gradient(to right,#5F646A,#9AA0A7 40%,#45494F); }
.mast-cap { position:absolute; left:54%; top:13%; width:26px; height:10px; margin-left:-8px; background:#33373C; border:1px solid #45494F; }
/* rotary drive head — electric power swivel that rotates the casing down */
.drive { position:absolute; left:54%; top:44%; width:48px; height:34px; margin-left:-24px; background:linear-gradient(#3A3E43,#191B1E); border:1px solid #50555C; box-shadow:0 6px 18px rgba(0,0,0,0.5); }
.drive .fin { position:absolute; left:5px; right:24px; top:5px; bottom:5px; background:repeating-linear-gradient(90deg,#2A2D31 0 2px,transparent 2px 6px); }
.drive .rotor { position:absolute; right:6px; top:50%; width:18px; height:18px; margin-top:-9px; border-radius:50%; border:1px solid #50555C; background:conic-gradient(#F58220 0 12%,#23262A 0 50%,#F58220 0 62%,#23262A 0); animation:riewaSpin 0.85s linear infinite; }
.drive .clamp { position:absolute; left:50%; bottom:-7px; width:22px; height:8px; margin-left:-11px; background:#26282B; border:1px solid #45494F; }
/* casing pile — hollow steel tube with helical thread scrolling down (screwing in) */
.pile-hero { position:absolute; left:54%; top:53%; width:16px; height:28%; margin-left:-8px; background:linear-gradient(to right,#7E848B,#D6D9DC 35%,#9AA0A7 70%,#5F646A); overflow:hidden; }
.pile-hero .helix { position:absolute; inset:0; background:repeating-linear-gradient(-42deg,rgba(255,255,255,0.16) 0 2px,transparent 2px 9px); animation:heroHelix 0.85s linear infinite; }
@keyframes heroHelix { from{background-position:0 0;} to{background-position:0 11px;} }
/* screw point + helical flight at the closed tip */
.pile-hero .tip { position:absolute; bottom:-15px; left:50%; width:22px; height:18px; margin-left:-11px; background:linear-gradient(to right,#9AA0A7,#EAEDF0,#7E848B); clip-path:polygon(50% 100%,0 26%,100% 26%); }
/* gentle soil-compaction rings — no spoil is ejected, ground is displaced outward */
.compact { position:absolute; left:54%; top:82%; width:58px; height:14px; margin:-7px 0 0 -29px; border:1.5px solid rgba(245,130,32,0.45); border-radius:50%; opacity:0; }
.compact.c1 { animation:heroCompact 2.6s ease-out infinite; }
.compact.c2 { animation:heroCompact 2.6s ease-out infinite 1.3s; }
@keyframes heroCompact { 0%{transform:scale(0.5);opacity:0;} 22%{opacity:0.6;} 100%{transform:scale(1.7);opacity:0;} }
/* real-time monitoring readout */
.cut-tele { position:absolute; top:16px; right:16px; width:128px; background:rgba(6,6,6,0.72); border:1px solid rgba(255,255,255,0.1); padding:10px 12px; }
.cut-tele .trow { display:flex; justify-content:space-between; align-items:baseline; }
.cut-tele .k { font-family:var(--f-mono); font-size:9px; letter-spacing:0.16em; color:var(--mono); }
.cut-tele .v { font-family:var(--f-mono); font-size:11px; letter-spacing:0.02em; color:var(--head); font-variant-numeric:tabular-nums; }
.cut-tele .tbar { height:3px; background:#26282B; margin:7px 0 8px; overflow:hidden; }
.cut-tele .tbar i { display:block; height:100%; width:60%; background:var(--orange); animation:teleBar 3.2s ease-in-out infinite; }
@keyframes teleBar { 0%,100%{width:50%;} 50%{width:84%;} }
@media (max-width:560px) {
  .cut-hud { top:10px; left:10px; padding:6px 9px; gap:7px; }
  .cut-hud .dot { width:6px; height:6px; }
  .cut-hud .txt { font-size:8px; letter-spacing:0.1em; }
  .cut-tele { top:auto; bottom:12px; right:12px; width:104px; padding:7px 9px; }
  .cut-tele .k { font-size:8px; letter-spacing:0.1em; }
  .cut-tele .v { font-size:9px; }
}
.cut-hud { position:absolute; top:16px; left:16px; display:flex; align-items:center; gap:10px; background:rgba(6,6,6,0.7); border:1px solid rgba(255,255,255,0.1); padding:8px 14px; }
.cut-hud .dot { width:8px; height:8px; background:var(--orange); animation:riewaBeacon 1.4s ease-in-out infinite; }
.cut-hud .txt { font-family:var(--f-mono); font-size:11px; letter-spacing:0.22em; color:var(--steel); }
.cut-label { position:absolute; left:16px; font-family:var(--f-mono); font-size:10px; letter-spacing:0.2em; }

/* ---- Spec table (home teaser + machine page) ---- */
.cut-cap { position:absolute; right:16px; bottom:14px; font-family:var(--f-mono); font-size:11px; letter-spacing:0.2em; color:var(--steel); z-index:2; }
.spec { display:flex; flex-direction:column; border:1px solid var(--line); }
.spec .row { padding:24px 26px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.spec .row:last-child { border-bottom:none; }
.spec .k { font-family:var(--f-mono); font-size:12px; letter-spacing:0.2em; color:var(--mono-lt); }
.spec .v { font-family:var(--f-display); font-weight:700; font-size:24px; color:var(--head); }
.spec .v.hi { color:var(--orange); }

/* ---- Machine studio photo panel ---- */
.machine-photo {
  position:relative; overflow:hidden; min-height:460px;
  border:1px solid var(--line); box-shadow:var(--shadow-deep);
  background: radial-gradient(120% 100% at 50% 0%, #F2F3F4 0%, #D6D9DC 55%, #B9BEC4 100%);
  display:flex; align-items:center; justify-content:center;
}
.machine-photo img { width:100%; height:100%; object-fit:contain; object-position:center; mix-blend-mode:multiply; padding:8px; }
.machine-photo .cap { position:absolute; left:20px; bottom:18px; font-family:var(--f-mono); font-size:11px; letter-spacing:0.2em; color:#3A3E43; }
.machine-photo .fallback { position:absolute; inset:0; display:none; flex-direction:column; gap:6px; align-items:center; justify-content:center; color:#5F646A; font-family:var(--f-mono); font-size:12px; line-height:1.9; letter-spacing:0.18em; text-align:center; padding:24px; background:radial-gradient(120% 100% at 50% 0%, #F2F3F4 0%, #D6D9DC 55%, #B9BEC4 100%); }

/* ---- Proces steps (home teaser + werkwijze page) ---- */
.proces { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:48px; border:1px solid var(--line); }
.step { padding:36px 32px 44px; border-right:1px solid var(--line); position:relative; transition:background 0.3s; }
.step:last-child { border-right:none; }
.step:hover { background:rgba(245,130,32,0.04); }
.step .n { font-family:var(--f-mono); font-size:12px; letter-spacing:0.3em; color:var(--orange); margin-bottom:24px; }
.step h3 { font-family:var(--f-display); font-weight:700; font-size:30px; text-transform:uppercase; color:var(--head); margin-bottom:12px; line-height:1.05; }
.step p { margin:0; font-size:14px; line-height:1.6; color:var(--text); }
.step .bar { position:absolute; left:0; top:-1px; width:0; height:3px; background:var(--orange); transition:width 0.5s ease; }
.step:hover .bar { width:100%; }

/* ---- Machine section layout (home + machine page) ---- */
.machine-grid { display:grid; grid-template-columns:1fr 1.35fr; gap:28px; align-items:start; }
/* right column pairs the studio shot (above ground) with the live cutaway (below ground) */
.machine-media { display:flex; flex-direction:column; gap:28px; }
.machine-media .cutaway { max-width:none; margin:0; aspect-ratio:3/2; }

@media (max-width: 960px) {
  .machine-grid { grid-template-columns:1fr; }
  .proces { grid-template-columns:1fr; }
  .step { border-right:none; border-bottom:1px solid var(--line); }
  .step:last-child { border-bottom:none; }
}