/* Weathered limestone is shared with the desktop material; no GPU needed on phones. */
.stone-fallback{filter:drop-shadow(8px 17px 7px #26302e33);--rock-outline:polygon(18% 4%,56% 0,80% 12%,94% 30%,100% 60%,86% 90%,61% 99%,26% 94%,5% 74%,0 40%)}
.stone-station:nth-child(2) .stone-fallback{--rock-outline:polygon(30% 0,70% 4%,87% 19%,92% 45%,100% 77%,82% 95%,43% 100%,15% 86%,0 52%,9% 19%)}
.stone-station:nth-child(3) .stone-fallback{--rock-outline:polygon(14% 14%,45% 0,73% 5%,93% 23%,100% 57%,87% 87%,60% 100%,28% 94%,5% 76%,0 39%)}
.stone-fallback:before{border-radius:0;clip-path:var(--rock-outline);background:linear-gradient(126deg,#fff1ca33,transparent 32%,#26343f55 92%),url('assets/limestone-surface.webp') 50% 50%/cover;box-shadow:none;transform:rotate(-4deg)}
.stone-station:nth-child(2) .stone-fallback:before,.stone-station:nth-child(3) .stone-fallback:before{border-radius:0;clip-path:var(--rock-outline);transform:rotate(3deg)}
.stone-fallback:after{content:"";position:absolute;inset:0;clip-path:polygon(74% 13%,94% 30%,100% 60%,86% 90%,61% 99%,70% 65%);background:#26323f2b;pointer-events:none;transition:opacity .3s;transform:rotate(-4deg)}
.stone-station[aria-expanded=true] .stone-fallback:after{opacity:0}
.stone-half{border-radius:0;box-shadow:none;width:55%;background:linear-gradient(125deg,#fff3d028,transparent 36%,#1d2c3c55),url('assets/limestone-surface.webp');background-size:200% 100%;transition:opacity .22s,transform .45s cubic-bezier(.22,.72,.18,1);filter:none}
.half-left{background-position:0 0;clip-path:polygon(32% 3%,94% 0,84% 29%,100% 48%,86% 66%,96% 100%,47% 96%,8% 76%,0 39%)}
.half-right{background-position:100% 0;clip-path:polygon(3% 0,62% 12%,92% 32%,100% 63%,72% 94%,0 100%,9% 67%,21% 48%,5% 29%)}
.stone-station[aria-expanded=true] .half-left{transform:translate(-57%,-3%) rotate(-10deg)}
.stone-station[aria-expanded=true] .half-right{transform:translate(57%,1%) rotate(10deg)}
.stone-core{width:82%;height:auto;top:6%;left:50%;transform:translateX(-50%) translateY(9px) scale(.9);transition:opacity .12s,transform .2s;text-shadow:none;line-height:0;filter:drop-shadow(0 8px 6px #233f622b);z-index:2}
.stone-station[aria-expanded=true] .stone-core{transform:translateX(-50%) translateY(0) scale(1);transition:opacity .2s .24s,transform .3s .24s cubic-bezier(.22,.72,.18,1)}
.stone-station:nth-child(2) .stone-core{top:23%;width:92%}.stone-station:nth-child(3) .stone-core{top:-3%;width:82%}
.service-scene{display:block;width:100%;height:auto;overflow:visible}
.scene-step{transform-box:fill-box;transform-origin:center;animation:none}
.stone-station[aria-expanded=true] .scene-step{animation:service-assemble 4.5s both;animation-iteration-count:1}
.stone-station[aria-expanded=true] .step-two{animation-delay:.35s}.stone-station[aria-expanded=true] .step-three{animation-delay:.7s}.stone-station[aria-expanded=true] .step-four{animation-delay:1s}.stone-station[aria-expanded=true] .step-five{animation-delay:1.4s}
.stone-station[aria-expanded=true] .website-cursor{animation:website-select 4.5s both}
.stone-station[aria-expanded=true] .typing-dot{animation:advice-thinking 4.5s both;transform-box:fill-box;transform-origin:center}.typing-dot:nth-child(2){animation-delay:.12s!important}.typing-dot:nth-child(3){animation-delay:.24s!important}
.workflow-packet{offset-path:path('M29 49h30v39h59V49h33');offset-distance:0%;opacity:0}.stone-station[aria-expanded=true] .workflow-packet{animation:task-delivery 4.5s linear both}
@keyframes service-assemble{0%,3%{opacity:0;transform:translateY(8px) scale(.94)}13%,100%{opacity:1;transform:none}}
@keyframes advice-thinking{0%,8%{transform:scale(.75)}14%{transform:scale(1.18)}20%,100%{transform:scale(1)}}
@keyframes website-select{0%,48%{opacity:0;transform:translate(22px,-12px)}59%,100%{opacity:1;transform:none}66%,70%{opacity:1;transform:scale(.94)}}
@keyframes task-delivery{0%,32%{opacity:0;offset-distance:0%}34%{opacity:1;offset-distance:0%}66%{opacity:1;offset-distance:100%}69%,100%{opacity:0;offset-distance:100%}}
.landscape-paused .scene-step,.landscape-paused .typing-dot{animation:none!important;opacity:1!important;transform:none!important}.landscape-paused .workflow-packet{animation:none!important;opacity:0!important}
.landscape-suspended .service-scene *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.service-scene *{animation:none!important;opacity:1!important;transform:none!important}.service-scene .workflow-packet{opacity:0!important}}
@media(max-width:700px){.stone-core{top:6%;width:139%}.stone-station:nth-child(2) .stone-core{top:20%;width:166%}.stone-station:nth-child(3) .stone-core{top:-2%;width:135%}}



/* Separate the small-screen illustration from the stone's busy surface. */
.stone-core{background:#fffdf6;border:1px solid #d9e0e9;border-radius:12px;padding:6px;box-shadow:0 8px 20px #233f6224}
.landscape-paused .stone-station .stone-core{transition:none}

@media(max-width:700px){.stone-core{max-width:118px}}

/* Matching first frames: the same camera, geometry, material and light as WebGL.
   Orthographic units: min(stage height / 4.45, stage width / 11).
   Keep this projection in sync with resize() in rock-scene.js. */
.rock-posters{display:none}
@supports (container-type:size){
  @media(min-width:901px){
    .rock-posters{display:block;position:absolute;inset:0;container-type:size;pointer-events:none}
    .rock-posters picture{position:absolute;top:50%;left:50%;width:min(100cqh,40.45454545cqw);height:min(100cqh,40.45454545cqw);transform:translate(-50%,-50%)}
    .rock-posters .rock-poster-0{left:calc(50% - min(107.86516854cqh,43.63636364cqw,28.2cqw))}
    .rock-posters .rock-poster-2{left:calc(50% + min(107.86516854cqh,43.63636364cqw,28.2cqw))}
    .rock-posters img{display:block;width:100%;height:100%;max-width:none}
    /* Swap matching frames atomically, avoiding a dark double-exposure crossfade. */
    #rock-canvas{transition:none}
    .rocks-ready .rock-posters{visibility:hidden}
    .immersive-hero:not(.rock-posters-failed) .stone-station[aria-expanded=false] .stone-fallback{visibility:hidden}
    .immersive-hero[data-active="0"] .rock-poster-0,
    .immersive-hero[data-active="1"] .rock-poster-1,
    .immersive-hero[data-active="2"] .rock-poster-2{visibility:hidden}
    .rock-posters-failed .rock-posters{display:none}
  }
}