@import url('./wave2-showcase.css');

body[data-coast3d='true'] .wave2-main{width:min(100%,1280px)}
body[data-coast3d='true'] .wave2-panel{min-height:720px}

.coast3d-heading{margin-bottom:18px}
.coast3d-stage{position:relative;z-index:1}
.coast3d-canvas-wrap{position:relative;overflow:hidden;border:1px solid var(--w2-line);border-radius:28px;background:#14232b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 24px 70px rgba(0,0,0,.22)}
.coast3d-canvas{display:block;width:100%;height:min(66vh,690px);min-height:470px;background:linear-gradient(#8eb7ce,#d6c8a7);touch-action:none;outline:none}
.coast3d-hud{position:absolute;inset:14px 14px auto;display:flex;justify-content:space-between;gap:10px;pointer-events:none}
.coast3d-hud span{padding:9px 12px;border-radius:999px;background:rgba(8,12,15,.58);color:#fff;border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(14px);font-size:.8rem;font-weight:800;letter-spacing:.02em}
.coast3d-toast{position:absolute;left:50%;top:15%;transform:translate(-50%,-10px);opacity:0;pointer-events:none;padding:10px 15px;border-radius:999px;background:rgba(8,12,15,.76);color:#fff;font-weight:850;box-shadow:0 12px 28px rgba(0,0,0,.22);backdrop-filter:blur(12px);transition:.22s ease;z-index:4}
.coast3d-toast.is-visible{opacity:1;transform:translate(-50%,0)}
.coast3d-flash{position:absolute;inset:0;pointer-events:none;background:rgba(255,102,74,.28);opacity:0;z-index:3}
.coast3d-flash.is-visible{animation:coast3d-flash .16s ease-out}
@keyframes coast3d-flash{0%{opacity:.8}100%{opacity:0}}

.coast3d-controls{display:flex;justify-content:center;gap:12px;margin-top:16px}
.coast3d-controls button,.coast3d-result-card button{min-width:64px;min-height:52px;border:1px solid var(--w2-line);border-radius:999px;background:var(--w2-surface);color:var(--w2-ink);font:800 .95rem/1 system-ui;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.1);touch-action:none}
.coast3d-controls button.boost{min-width:116px;color:#fff;background:#a4513f;border-color:#a4513f;letter-spacing:.06em}
.coast3d-controls button[aria-pressed='true']{transform:translateY(2px) scale(.98);box-shadow:0 2px 10px rgba(0,0,0,.12);border-color:var(--w2-accent-2)}
.coast3d-controls button:focus-visible,.coast3d-result-card button:focus-visible{outline:3px solid var(--w2-accent-2);outline-offset:3px}

.coast3d-meter-row{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;margin-top:15px}
.coast3d-meter-row p{margin:8px 0 0;color:var(--w2-muted);font-size:.9rem;line-height:1.45}
.coast3d-meter-row>strong{color:var(--w2-muted);font-size:.82rem;white-space:nowrap}
.coast3d-meter{height:11px;border-radius:999px;overflow:hidden;background:color-mix(in srgb,var(--w2-line) 76%,transparent)}
.coast3d-meter span{display:block;width:35%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#4d8296,#d99b55);transition:width .12s linear}

.coast3d-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:22px;background:rgba(6,10,13,.5);backdrop-filter:blur(10px);z-index:7}
.coast3d-overlay[hidden]{display:none}
.coast3d-result-card{width:min(92%,520px);padding:30px;border-radius:28px;background:rgba(20,23,25,.9);border:1px solid rgba(255,255,255,.16);color:#fff;text-align:center;box-shadow:0 28px 90px rgba(0,0,0,.45)}
.coast3d-result-card h2{margin:0;font-size:clamp(2.2rem,7vw,4.2rem);letter-spacing:-.055em;line-height:.95}
.coast3d-result-card p:not(.showcase-kicker){color:#d4d8da;line-height:1.55}
.coast3d-result-card>strong{display:block;margin-top:16px;font-size:1.2rem}
.coast3d-result-card button{margin-top:22px;padding:0 22px;background:#fff;color:#111;border-color:#fff}

@media(max-width:720px){
  body[data-coast3d='true'] .wave2-panel{min-height:620px;padding:13px}
  .coast3d-canvas-wrap{border-radius:20px}
  .coast3d-canvas{height:52vh;min-height:390px;max-height:560px}
  .coast3d-controls{position:sticky;bottom:max(84px,env(safe-area-inset-bottom));z-index:5;padding:8px;border-radius:999px;background:color-mix(in srgb,var(--w2-bg) 76%,transparent);backdrop-filter:blur(14px)}
  .coast3d-controls button{flex:0 0 64px}
  .coast3d-controls button.boost{flex-basis:104px;min-width:104px}
  .coast3d-meter-row{grid-template-columns:1fr}
  .coast3d-meter-row>strong{white-space:normal}
}

@media(prefers-reduced-motion:reduce){
  .coast3d-toast,.coast3d-meter span{transition:none!important}
  .coast3d-flash.is-visible{animation:none!important;opacity:0!important}
  .coast3d-controls button[aria-pressed='true']{transform:none}
}

@media(prefers-contrast:more){
  .coast3d-canvas-wrap,.coast3d-controls button,.coast3d-result-card{border-width:2px}
}

@media(forced-colors:active){
  .coast3d-canvas-wrap,.coast3d-controls button,.coast3d-result-card,.coast3d-meter{border:1px solid CanvasText;box-shadow:none}
  .coast3d-controls button[aria-pressed='true']{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
}