/* Reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #f6f7f9;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

:root {
  --base-size: min(72vmin, 680px);
  --plunger-size: min(56vmin, 520px);
}

/* Centering stage */
.scene {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  position: relative;
  perspective: 1200px;
}

/* 3D rig that holds the base and the plunger at an angle */
.rig {
  position: relative;
  width: var(--base-size);
  height: var(--base-size);
  transform-style: preserve-3d;
  transform: rotateX(28deg) rotateZ(-16deg) rotateY(-6deg);
  transition: transform 900ms cubic-bezier(.2,.8,.2,1);
  z-index: 1;
  overflow: visible;
}

/* Metallic base resembling the photo */
.base {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--base-size);
  height: var(--base-size);
  border-radius: 50%;

  /* Layered gradients to fake brushed metal */
  background:
    radial-gradient(120% 120% at 65% 35%, #9fa3a9 0 40%, rgba(255,255,255,0) 41%) top left / 100% 100% no-repeat,
    conic-gradient(from 210deg, #9ea3aa, #cfd3d9 12%, #8a9096 29%, #f6f7f8 45%, #b5bac0 62%, #858b91 75%, #dee1e6 88%, #9ea3aa 100%);
  box-shadow:
    0 6px 14px rgba(0,0,0,.25),
    inset 0 10px 16px rgba(255,255,255,.45),
    inset 0 -10px 18px rgba(0,0,0,.35);
}

/* Outer rim highlight */
.base::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background:
    radial-gradient(120% 100% at 25% 25%, rgba(255,255,255,.65), rgba(255,255,255,0) 60%);
  filter: blur(2px);
  pointer-events: none;
}

/* Inner seat (well) where the plunger sits */
.base::after {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background:
    radial-gradient(130% 90% at 60% 70%, rgba(0,0,0,.35), rgba(0,0,0,.1) 35%, rgba(255,255,255,0) 70%),
    conic-gradient(from 200deg, #cfd3d8, #9da2a8 20%, #eceff2 45%, #8b9096 68%, #e4e7ea 86%, #cfd3d8 100%);
  box-shadow:
    inset 0 26px 36px rgba(0,0,0,.35),
    inset 0 -16px 22px rgba(255,255,255,.35);
}

/* Red plunger (the button body) */
.plunger {
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--plunger-size);
  height: var(--plunger-size);
  border: none;
  outline: none;
  border-radius: 50%;
  cursor: pointer;
  background:
    radial-gradient(60% 70% at 55% 35%, rgba(255,255,255,.9), rgba(255,255,255,0) 55%),
    radial-gradient(100% 120% at 50% 65%, #f44141 0, #e23434 50%, #cf1f1f 100%);

  /* The lip/shadow around the button to sit within base */
  box-shadow:
    0 12px 0 0 #b71c1c,
    0 22px 26px rgba(0,0,0,.35),
    inset 0 6px 10px rgba(255,255,255,.55),
    inset 0 -18px 22px rgba(0,0,0,.35);

  /* Depth position: initial height above the seat */
  transform: translateZ(46px) translateY(-8px) rotateX(.6deg);
  transform-origin: 50% 60%;
  transition: transform 900ms cubic-bezier(.2,.8,.2,1), box-shadow 900ms cubic-bezier(.2,.8,.2,1), filter 900ms ease;
}

/* Glossy highlights and subtle side shading */
.plunger::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(80% 70% at 38% 28%, rgba(255,255,255,.9), rgba(255,255,255,.45) 20%, rgba(255,255,255,0) 48%),
    radial-gradient(120% 100% at 75% 85%, rgba(0,0,0,.15), rgba(0,0,0,0) 50%);
  pointer-events: none;
  mix-blend-mode: screen;
}

.plunger:hover {
  /* Slow press: move downward, reduce outer drop shadow to feel pressed */
  transform: translateZ(30px) translateY(-2px) rotateX(1.2deg);
  box-shadow:
    0 6px 0 0 #9e1111,
    0 12px 16px rgba(0,0,0,.4),
    inset 0 4px 8px rgba(255,255,255,.5),
    inset 0 -10px 14px rgba(0,0,0,.35);
  filter: saturate(1.05);
}

.plunger:active {
  /* Extra press on click */
  transform: translateZ(18px) translateY(2px) rotateX(2deg);
  box-shadow:
    0 2px 0 0 #7a0c0c,
    0 6px 12px rgba(0,0,0,.5),
    inset 0 2px 6px rgba(255,255,255,.45),
    inset 0 -6px 10px rgba(0,0,0,.4);
}

/* Accessibility focus style */
.plunger:focus-visible {
  outline: 6px solid rgba(25, 118, 210, .35);
  outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .plunger { transition: none; }
}

/* Elongated cast shadow on the right like in the photo */
.cast {
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(var(--base-size) * 1.5);
  height: calc(var(--base-size) * .5);
  background: radial-gradient(80% 60% at 38% 50%, rgba(0,0,0,.45) 0, rgba(0,0,0,.3) 35%, rgba(0,0,0,.0) 72%);
  transform: translate(22%, 34%) rotate(-14deg);
  filter: blur(18px);
  opacity: .55;
  pointer-events: none;
}