/* PLATRIX plate component styles: the six HSRP categories, the plate drawing, hologram and the windscreen sticker.
   Shared by every public site. Colours follow the national plate scheme; registration numbers are always illustrative. */

@font-face{font-family:"PlateFace";font-weight:900;font-display:swap;src:url("../fonts/roboto-black.woff2") format("woff2")}

@property --pl-bg{syntax:"<color>";inherits:true;initial-value:#F7F6F1}
@property --pl-fg{syntax:"<color>";inherits:true;initial-value:#111111}
@property --pl-edge{syntax:"<color>";inherits:true;initial-value:#111111}
@property --pl-ind{syntax:"<color>";inherits:true;initial-value:#1C3F9A}

/* ================= plate categories (data-tone) ================= */
[data-tone=private]{--pl-bg:#F7F6F1;--pl-fg:#111111;--pl-edge:#111111;--pl-ind:#1C3F9A;--pl-hi:rgba(255,255,255,.75);--pl-lo:rgba(0,0,0,.4)}
[data-tone=transport]{--pl-bg:#FFC72C;--pl-fg:#111111;--pl-edge:#111111;--pl-ind:#1C3F9A;--pl-hi:rgba(255,255,255,.55);--pl-lo:rgba(0,0,0,.4)}
[data-tone=ev]{--pl-bg:#0F8A4E;--pl-fg:#FFFFFF;--pl-edge:#FFFFFF;--pl-ind:#D9EBFF;--pl-hi:rgba(255,255,255,.2);--pl-lo:rgba(0,0,0,.35)}
[data-tone=evt]{--pl-bg:#0F8A4E;--pl-fg:#FFD84A;--pl-edge:#FFD84A;--pl-ind:#D9EBFF;--pl-hi:rgba(255,255,255,.2);--pl-lo:rgba(0,0,0,.35)}
[data-tone=rental]{--pl-bg:#171717;--pl-fg:#FFC72C;--pl-edge:#FFC72C;--pl-ind:#8DB6FF;--pl-hi:rgba(255,255,255,.18);--pl-lo:rgba(0,0,0,.6)}
[data-tone=evr]{--pl-bg:#0F8A4E;--pl-fg:#111111;--pl-edge:#111111;--pl-ind:#06142E;--pl-hi:rgba(255,255,255,.3);--pl-lo:rgba(0,0,0,.3)}
.plate,.mini{transition:--pl-bg .7s ease,--pl-fg .7s ease,--pl-edge .7s ease,--pl-ind .7s ease}

/* ---------- the plate ---------- */
.plate{position:relative;width:100%;aspect-ratio:500/120;filter:drop-shadow(0 26px 22px rgba(8,32,38,.28)) drop-shadow(0 3px 4px rgba(0,0,0,.25))}
.plate.two{aspect-ratio:2/1}
.pl-svg{display:block;width:100%;height:100%;overflow:visible}
.pl-body{fill:var(--pl-bg);stroke:rgba(0,0,0,.4);stroke-width:1}
.pl-edge{fill:none;stroke:var(--pl-edge);stroke-width:2.6}
.pl-ind{font-family:"Manrope";font-weight:800;font-size:15px;fill:var(--pl-ind);letter-spacing:.5px}
.pl-laser{font-family:"Manrope";font-weight:800;font-size:7.4px;fill:var(--pl-fg);opacity:.7;letter-spacing:.35px}
.pl-chars{filter:drop-shadow(.9px .9px 0 var(--pl-hi)) drop-shadow(-.8px -.8px 0 var(--pl-lo))}
.pl-chars text{font-family:"PlateFace",Roboto,Arial,sans-serif;font-weight:900;font-size:90px;fill:var(--pl-fg)}
.pl-locks circle.lk{fill:url(#px-lock);stroke:rgba(0,0,0,.5);stroke-width:1;transform-box:fill-box;transform-origin:center}
.pl-locks circle.dm{fill:rgba(0,0,0,.28)}
.holo{position:absolute;left:3.8%;top:17.5%;width:6.8%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from calc(var(--mx,.3)*360deg),#6ee7ff,#b79bff,#ffe27a,#8dffb5,#6ee7ff);box-shadow:inset 0 0 0 1px rgba(0,0,0,.28),0 0 10px rgba(120,200,255,.55);animation:rot 7s linear infinite}
.plate.two .holo{left:5.25%;top:11%;width:10.5%}
.holo svg{position:absolute;inset:0;width:100%;height:100%}
@keyframes rot{to{rotate:360deg}}
.pl-sheen{position:absolute;inset:0;border-radius:2.2%/9%;overflow:hidden;pointer-events:none;background:radial-gradient(circle at calc(var(--mx,.3)*100%) calc(var(--my,.2)*100%),rgba(255,255,255,.5),transparent 42%),repeating-linear-gradient(60deg,rgba(0,0,0,.028) 0 1px,transparent 1px 5px),repeating-linear-gradient(-60deg,rgba(0,0,0,.028) 0 1px,transparent 1px 5px)}
.pl-sheen::after{content:"";position:absolute;inset:-10% 0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%);transform:translateX(-130%);opacity:0}
.laser-beam{position:absolute;left:2.6%;width:9.6%;top:74%;height:2px;background:#ff2d55;box-shadow:0 0 10px 2px #ff2d55;opacity:0;border-radius:2px}
.plate.two .laser-beam{left:3%;width:15%;top:67%}

.sticker{position:relative;width:100%;aspect-ratio:1;border-radius:18px;background:var(--stk,#cfeaf7);box-shadow:0 18px 26px -10px rgba(0,0,0,.45),inset 0 0 0 2px rgba(15,17,16,.55);overflow:hidden;color:#0F1110}
.sticker[data-tint=sky]{--stk:#cfeaf7}.sticker[data-tint=amber]{--stk:#ffd9a3}.sticker[data-tint=stone]{--stk:#dedfd9}
.sticker .strip{position:absolute;left:0;right:0;top:0;height:17%;background:#2DBE60;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:10px;letter-spacing:.14em;color:#06330f}
.sticker .holo{left:37%;top:34%;width:26%}
.sticker .ind{position:absolute;left:0;right:0;top:66%;text-align:center;font-weight:800;font-size:12px;color:#1C3F9A;letter-spacing:.05em}
.sticker .ln{position:absolute;left:14%;right:14%;height:5px;border-radius:3px;background:rgba(15,17,16,.55)}
.sticker .ln.l1{top:80%}.sticker .ln.l2{top:88%;right:34%}

.px-defs{position:absolute;width:0;height:0;overflow:hidden}
.plate.two .pl-chars text:first-child{font-size:38px}
.plate.two .pl-chars text:last-child{font-size:44px}
.plate.two .pl-ind{font-size:11px}
.plate.two .pl-laser{font-size:5.2px}

/* A slow glint crossing the big hero plates every few seconds, like light on the embossed face. */
.hero .pw .plate::after{content:"";position:absolute;inset:2% 1%;border-radius:3.5% / 14%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.6) 50%,transparent 58%) no-repeat;background-size:250% 100%;background-position:130% 0;animation:pl-glint 8s ease-in-out 2.5s infinite;pointer-events:none;mix-blend-mode:soft-light}
@keyframes pl-glint{0%,60%{background-position:130% 0}100%{background-position:-30% 0}}
@media (prefers-reduced-motion:reduce){.hero .pw .plate::after{display:none}}
.no-motion .hero .pw .plate::after{display:none}


/* ================= live plate: the plate builds itself =================
   One sequence, about seven seconds, in the order a plate is really made: a blank aluminium sheet, the border drawn, the
   characters embossed with a thud, the hologram stamped with a flash, the laser code etched, the snap locks fitted. It plays
   when the element has the classes "lp lp-run" (liveplate.js can take the second off and put it back to replay). Every
   animation ends on the plate's normal look (fill-mode backwards), so category changes and the tilt keep working afterwards. */
.lp{--lp-d:0s}
.lp .pw-two{--lp-d:.8s}
.lp .pl-edge{stroke-dasharray:1200}
.lp .pl-chars,.lp .pl-locks circle{transform-box:fill-box;transform-origin:center}
.lp.lp-run .plate{animation:lp-in .9s cubic-bezier(.2,.8,.2,1) var(--lp-d) backwards}
.lp.lp-run .pl-body{animation:lp-blank 1.9s ease-out calc(var(--lp-d) + .1s) backwards}
.lp.lp-run .pl-edge{animation:lp-edge 1.3s cubic-bezier(.4,.1,.2,1) calc(var(--lp-d) + .35s) backwards}
.lp.lp-run .pl-chars{animation:lp-emboss .95s cubic-bezier(.2,.8,.2,1) calc(var(--lp-d) + 1.9s) backwards}
.lp.lp-run .pl-ind{animation:lp-fade .6s ease calc(var(--lp-d) + 3.3s) backwards}
.lp.lp-run .plate .holo{animation:rot 7s linear infinite,lp-stamp 1.05s cubic-bezier(.2,.9,.3,1.25) calc(var(--lp-d) + 3.1s) backwards}
.lp.lp-run .pl-laser{animation:lp-laser 1.3s ease-in calc(var(--lp-d) + 4.4s) backwards}
.lp.lp-run .plate .laser-beam{animation:lp-beam 1.3s linear calc(var(--lp-d) + 4.4s) backwards}
.lp.lp-run .pl-locks circle{animation:lp-lock .55s cubic-bezier(.3,1.6,.5,1) calc(var(--lp-d) + 5.8s) backwards}
.lp.lp-run .pl-locks circle:nth-of-type(n+3){animation-delay:calc(var(--lp-d) + 6s)}
@keyframes lp-in{from{opacity:0;translate:0 22px}}
@keyframes lp-blank{0%{fill:#BDC3C5}55%{fill:#D5D9DB}100%{fill:var(--pl-bg)}}
@keyframes lp-edge{from{stroke-dashoffset:1200}to{stroke-dashoffset:0}}
@keyframes lp-emboss{from{opacity:0;transform:translateY(-7px) scale(1.07);filter:drop-shadow(0 16px 8px rgba(0,0,0,.45))}
  60%{opacity:1}to{opacity:1;transform:none;filter:drop-shadow(.9px .9px 0 var(--pl-hi)) drop-shadow(-.8px -.8px 0 var(--pl-lo))}}
@keyframes lp-fade{from{opacity:0}}
@keyframes lp-stamp{0%{opacity:0;scale:2.6}55%{opacity:1;scale:.8;box-shadow:inset 0 0 0 1px rgba(0,0,0,.28),0 0 0 8px rgba(255,255,255,.9),0 0 34px 16px rgba(255,255,255,.95)}
  100%{opacity:1;scale:1;box-shadow:inset 0 0 0 1px rgba(0,0,0,.28),0 0 10px rgba(120,200,255,.55)}}
@keyframes lp-laser{from{opacity:0}}
@keyframes lp-beam{0%{opacity:0;transform:scaleX(.04);transform-origin:left}8%{opacity:1}92%{opacity:1;transform:scaleX(1);transform-origin:left}100%{opacity:0;transform:scaleX(1);transform-origin:left}}
@keyframes lp-lock{from{opacity:0;scale:0}}

/* a soft light behind the plates that flashes with the hologram stamp (hsrp.tracole.com stage) */
.lp.stage::before{content:"";position:absolute;inset:-8% -3%;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--tint,#E4DCC6) 65%,#fff),transparent 72%);opacity:.32}
.lp.lp-run.stage::before{animation:lp-glow 1.8s ease-out 3.1s backwards}
@keyframes lp-glow{0%{opacity:0}28%{opacity:.95}100%{opacity:.32}}

/* the caption: five steps that light up as the plate reaches them */
.lp-cap{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-top:18px}
.lp-steps{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0;padding:0;list-style:none;counter-reset:lps}
.lp-steps li{counter-increment:lps;display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 6px;border-radius:999px;font-size:12.5px;font-weight:700;line-height:1.2;
  border:1px solid var(--line-ui);color:var(--fg);background:color-mix(in srgb,var(--card) 70%,transparent)}
.lp-steps li::before{content:counter(lps);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:11px;font-weight:800;background:var(--bg2);color:var(--muted)}
.lp.lp-run .lp-steps li{animation:lp-step .5s ease backwards}
.lp.lp-run .lp-steps li:nth-child(1){animation-delay:.9s}
.lp.lp-run .lp-steps li:nth-child(2){animation-delay:2.7s}
.lp.lp-run .lp-steps li:nth-child(3){animation-delay:3.9s}
.lp.lp-run .lp-steps li:nth-child(4){animation-delay:5.6s}
.lp.lp-run .lp-steps li:nth-child(5){animation-delay:6.6s}
@keyframes lp-step{from{background:transparent;color:var(--muted);border-color:var(--line);opacity:.55}}
.lp-steps li{background:color-mix(in srgb,var(--brand) 10%,var(--card))}
.lp-steps li::before{background:var(--brand);color:var(--brand-fg)}
.lp.lp-run .lp-steps li::before{animation:lp-num .5s ease backwards}
.lp.lp-run .lp-steps li:nth-child(1)::before{animation-delay:.9s}.lp.lp-run .lp-steps li:nth-child(2)::before{animation-delay:2.7s}
.lp.lp-run .lp-steps li:nth-child(3)::before{animation-delay:3.9s}.lp.lp-run .lp-steps li:nth-child(4)::before{animation-delay:5.6s}
.lp.lp-run .lp-steps li:nth-child(5)::before{animation-delay:6.6s}
@keyframes lp-num{from{background:var(--bg2);color:var(--muted)}}
.lp-replay{border:0;background:none;padding:6px 4px;font-weight:800;font-size:13px;color:var(--accent-ink);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.lp-replay:hover{color:var(--fg)}

/* hero statistics strip (hsrp.tracole.com): figures count up when the page opens */
@property --lp-n{syntax:"<integer>";inherits:false;initial-value:0}
.lp-stats{display:grid;grid-template-columns:repeat(4,1fr);margin:6px auto 34px;border:1px solid var(--line);border-radius:24px;overflow:hidden;
  background:color-mix(in srgb,var(--card) 80%,transparent);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);box-shadow:var(--shadow);position:relative}
.lp-stats::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.lp-stats>div{padding:20px 24px 18px;display:grid;gap:4px;align-content:start}
.lp-stats>div+div{border-left:1px solid var(--line)}
.lp-stats strong{font-family:var(--display);font-weight:var(--dw);letter-spacing:var(--dtrack);font-size:calc(clamp(2rem,3.4vw,2.9rem) * var(--dscale));line-height:1;color:var(--fg);white-space:nowrap}
.lp-stats .cnt{--lp-n:6;counter-reset:lpn var(--lp-n);animation:lp-count 2.6s cubic-bezier(.15,.7,.2,1) .6s backwards}
.lp-stats .cnt::before{content:counter(lpn)}
.lp-stats .c20{--lp-n:20}
.lp-stats .plus::after{content:"+";color:var(--accent-ink);margin-left:2px}
@keyframes lp-count{from{--lp-n:0}}
.lp-stats>div>span{font-size:14px;font-weight:600;color:var(--muted);line-height:1.35}
@media (max-width:760px){
  .lp-stats{grid-template-columns:repeat(2,1fr);margin-bottom:24px}
  .lp-stats>div:nth-child(3){border-left:0}
  .lp-stats>div:nth-child(n+3){border-top:1px solid var(--line)}
  .lp-stats>div{padding:16px 18px 14px}
}
@media (prefers-reduced-motion:reduce){.lp *,.lp.stage::before,.lp-stats .cnt{animation:none!important}}
.no-motion .lp *,.no-motion .lp.stage::before,.no-motion .lp-stats .cnt{animation:none!important}
@media print{.lp-replay{display:none}}

/* the snap locks stand proud of the plate: a soft cast shadow below and a pale edge catching the light */
.pl-locks circle.lk{filter:drop-shadow(.8px 2.4px 1.6px rgba(0,0,0,.45)) drop-shadow(0 0 .6px rgba(255,255,255,.75))}