/* ==========================================================================
   Concrete resurfacing layer animation
   Transparent background — inherits the page's font and sits on any backdrop.
   Add data-ui="dark" to .cr when placing it on a LIGHT background.
   ========================================================================== */

.cr{
  /* light text, for dark backgrounds (default) */
  --text:#eef2f0;
  --text-soft:#c3ccc8;
  --hair:rgba(255,255,255,.5);
  --btn-bg:rgba(255,255,255,.10);
  --btn-line:rgba(255,255,255,.26);
  --btn-on-bg:#f0f3f1;
  --btn-on-text:#151b1a;
  --shade:rgba(0,0,0,.55);

  position:relative;
  width:100%;
  max-width:940px;
  margin-inline:auto;
  overflow:hidden;
  background:transparent;
  color:var(--text);
  font-family:inherit;
  contain:layout style paint;
}

.cr[data-ui="dark"]{
  --text:#151b1a;
  --text-soft:#3a4441;
  --hair:rgba(21,27,26,.55);
  --btn-bg:rgba(21,27,26,.06);
  --btn-line:rgba(21,27,26,.22);
  --btn-on-bg:#1d2422;
  --btn-on-text:#f0f3f1;
  --shade:rgba(24,34,31,.45);
}

/* --- source content: read by the script, kept in the DOM for crawlers --- */
.cr-source{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* --- stage --------------------------------------------------------------- */
.cr-stage{
  position:relative;width:100%;
  aspect-ratio:720/560;
  display:flex;align-items:center;justify-content:center;
}
.cr-fit{
  width:720px;height:560px;position:relative;flex:0 0 auto;
  transform:scale(var(--fit,1));
  transform-origin:center center;
}
.cr-world{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:translateY(40px) rotateX(58deg) rotateZ(-45deg);
}
.cr-layer{
  position:absolute;left:50%;top:50%;
  width:300px;height:300px;margin:-150px 0 0 -150px;
  transform-style:preserve-3d;
}
.cr-sheet{
  position:absolute;inset:0;border-radius:26px;
  background:var(--edge);
}
.cr-sheet--top{
  background-size:cover;background-position:center;
  isolation:isolate;
}
.cr-sheet--top::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(199deg, rgba(255,255,255,.34), rgba(255,255,255,0) 44%, rgba(0,0,0,.22));
  mix-blend-mode:soft-light;
}
.cr-sheet--glass{
  background:linear-gradient(203deg, rgba(255,255,255,.44), rgba(210,228,226,.10) 44%, rgba(255,255,255,.32));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
}
.cr-shadow{
  position:absolute;left:50%;top:50%;
  width:420px;height:420px;margin:-210px 0 0 -210px;
  background:radial-gradient(closest-side, var(--shade), rgba(0,0,0,0) 72%);
  transform:translateZ(-3px);
}

/* --- leader labels ------------------------------------------------------- */
.cr-labels{position:absolute;inset:0;pointer-events:none}
.cr-label{
  position:absolute;left:0;top:50%;
  width:calc(50% - 212px - 16px);
  display:flex;align-items:center;justify-content:flex-end;
  opacity:0;
}
.cr-label span{font-size:15px;line-height:1.2;color:var(--text);white-space:nowrap}
.cr-label i{display:block;height:1px;width:28px;margin-left:10px;background:var(--hair)}
.cr-label b{display:block;width:5px;height:5px;border-radius:50%;background:var(--hair);margin-left:-2px}

/* --- readout ------------------------------------------------------------- */
.cr-read{
  position:absolute;left:0;right:0;bottom:0;
  padding:18px 26px 22px;
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 26px;
}
.cr-copy{flex:1 1 330px;min-width:0}
.cr-copy h3{
  margin:0 0 4px;font-size:23px;font-weight:600;
  letter-spacing:-.01em;line-height:1.2;color:var(--text);
}
.cr-copy p{margin:0;font-size:15px;line-height:1.45;color:var(--text-soft);max-width:54ch}

.cr-controls{display:flex;align-items:center;gap:6px}
.cr-controls button{
  font:inherit;font-size:13px;line-height:1.2;color:var(--text);
  background:var(--btn-bg);border:1px solid var(--btn-line);
  border-radius:999px;padding:6px 12px;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.cr-controls button:hover{border-color:var(--text)}
.cr-controls button[aria-current="true"]{
  background:var(--btn-on-bg);border-color:var(--btn-on-bg);color:var(--btn-on-text);
}
.cr-controls button:focus-visible{outline:2px solid var(--text);outline-offset:2px}
.cr-play{width:32px;height:32px;padding:0;display:grid;place-items:center}
.cr-play svg{width:11px;height:11px;fill:currentColor}

@media (max-width:660px){
  .cr-read{padding:12px 14px 14px;gap:10px 16px}
  .cr-copy{flex:1 1 100%}
  .cr-copy h3{font-size:19px}
  .cr-copy p{font-size:13.5px}
  .cr-label span{font-size:13px}
  .cr-label i{width:18px}
  .cr-controls button{padding:5px 9px;font-size:12px}
}