/* One light direction, three surfaces: paper, mounted photographs, inset hardware. */
.depth-design {
  --depth-ease: cubic-bezier(.22, 1, .36, 1);
  --depth-shadow: 0 2px 3px #0a0a0a0a, 0 14px 26px -12px #0a0a0a26, 0 36px 58px -30px #0a0a0a40;
}
.depth-hero {
  isolation: isolate;
  background-image: radial-gradient(ellipse at 77% 42%, #34383b 0%, #1b1d1f 28%, #0a0a0a 65%) !important;
}
.depth-hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 27%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, #ffffff03 66%, #0003);
  border-bottom: 1px solid #ffffff1c;
}
.depth-hero-copy { animation: none !important; }
.depth-hero-copy h1, .depth-hero-copy h2 { text-shadow: 0 2px 1px #0003, 0 14px 32px #0004; }
.depth-verb { position: relative; white-space: nowrap; color: #fff; }
.depth-verb::after {
  content: "";
  position: absolute;
  inset: auto 0 -.13em;
  height: 1px;
  background: #ffffff94;
  transform-origin: left;
  animation: depth-underline 640ms var(--depth-ease) both;
  animation-delay: calc(320ms + var(--verb-index, 0) * 70ms);
}
@keyframes depth-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.depth-design .charger-launch { animation: none !important; }
.depth-design .charger-launch::before,
.depth-design .charger-launch::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.depth-design .charger-launch::before {
  inset: -34% -14% -8%;
  background: radial-gradient(ellipse at 50% 47%, #abb9c720 0%, #ffffff08 35%, transparent 65%);
}
.depth-design .charger-launch::after {
  left: 13%; right: 4%; bottom: 6%; height: 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #000b, #0004 38%, transparent 70%);
  transform: rotate(-7deg);
}
.depth-design .charger-launch video {
  filter: none;
  transition: none;
}
.depth-design .charger-launch:is(:hover, :focus-visible) video { filter: none; }
.depth-design .charger-launch-cue {
  z-index: 2;
  right: 0; bottom: -8px;
  padding: 12px 18px 12px 12px;
  border: 1px solid #ffffff24;
  border-top-color: #ffffff54;
  border-radius: 12px;
  background: linear-gradient(135deg, #363a3deb, #161819f5);
  box-shadow: inset 0 1px #ffffff0a, 0 8px 20px #0005, 0 1px 2px #0006;
  transition: transform 180ms var(--depth-ease);
}
.depth-design .charger-launch-icon { border-color: #ffffff38; border-radius: 6px; background: #ffffff08; }
.depth-design .charger-launch:is(:hover, :focus-visible) .charger-launch-cue { transform: translateY(-3px); }
.depth-design .charger-launch:active .charger-launch-cue { transform: translateY(1px); }

.depth-portrait,
.depth-design figure > div:first-child {
  position: relative;
  box-shadow: var(--depth-shadow);
  outline: 1px solid #0a0a0a14;
  outline-offset: -1px;
}
.depth-portrait::after,
.depth-design figure > div:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 1px 1px #ffffff63, inset 0 -1px 1px #0003;
  pointer-events: none;
}
.depth-portrait > img,
.depth-design figure > div:first-child > img {
  display: block;
  transform: scale(1) !important;
  transition: transform 650ms var(--depth-ease) !important;
}
.depth-design .on-dark figure > div:first-child { outline-color: #ffffff30; box-shadow: 0 16px 36px -16px #000b; }
.depth-stage {
  isolation: isolate;
  border-radius: 14px;
  background: radial-gradient(ellipse at 40% 10%, #fff, #eff0f0 60%, #e3e5e6);
  box-shadow: inset 0 1px 3px #0a0a0a16, inset 0 -1px #fff, 0 1px 0 #fff;
}
.depth-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #0a0a0a0d;
  border-radius: inherit;
  pointer-events: none;
}
.depth-hero .depth-stage { background: transparent; box-shadow: none; }
.depth-hero .depth-stage::after { display: none; }
.depth-hero .depth-stage::before {
  content: "";
  position: absolute;
  left: 14%; right: 10%; bottom: 3%; height: 14%;
  background: radial-gradient(ellipse, #0009, transparent 68%);
  pointer-events: none;
}
.depth-panel {
  background: linear-gradient(145deg, #eeefee, #dedfdf) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 #fff, inset 1px 0 0 #ffffffa6, 0 1px 2px #00000012, 0 12px 24px -18px #00000038;
  outline: 1px solid #00000009;
}
.depth-design [data-depth-button] {
  position: relative;
  transition: transform 180ms var(--depth-ease), background 180ms ease, color 180ms ease, border-color 180ms ease !important;
}
.depth-design [data-depth-button="glass"] {
  background-image: linear-gradient(150deg, #ffffff16, transparent) !important;
  box-shadow: inset 0 1px #ffffff24, 0 4px 8px #0002;
}
.depth-design [data-depth-button="outline"] { box-shadow: inset 0 1px #ffffff70, 0 3px 4px -3px #0003; }
.depth-design [data-depth-button]:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.depth-design [data-depth-button]:focus-visible > span:last-child { transform: translateX(3px) !important; }
.depth-design [data-depth-button]:active { transform: translateY(1px); }
.depth-design [data-depth-button="link"]::after {
  content: ""; position: absolute; inset: auto 0 -1px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 180ms var(--depth-ease);
}
.depth-design [data-depth-button="link"]:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.depth-design [data-depth-label],
.depth-design [data-depth-rule] > span { color: #65676a !important; }
.depth-design .on-dark [data-depth-label],
.depth-design .on-dark [data-depth-rule] > span { color: #bdc0c2 !important; }
.depth-design [data-depth-rule] > span[style*="flex: 1"] { transform-origin: left; }
@media (hover: hover) and (pointer: fine) {
  .depth-portrait:hover > img, .depth-design figure > div:first-child:hover > img { transform: scale(1.015) !important; }
  .depth-design [data-depth-button]:not([data-depth-button="link"]):hover { transform: translateY(-2px); }
}
@media (max-width: 860px) {
  .depth-hero { background-image: radial-gradient(ellipse at 68% 67%, #303538, #17191b 34%, #0a0a0a 72%) !important; }
  .depth-design .charger-launch-cue { padding: 10px 14px 10px 10px; right: 0; bottom: -18px; }
  .depth-design .charger-launch video { filter: none; }
  .depth-design .charger-launch:is(:hover, :focus-visible) video { filter: none; }
  .depth-portrait, .depth-design figure > div:first-child { box-shadow: 0 3px 5px #0000000c, 0 18px 28px -18px #0000004d; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .depth-design *, .depth-design *::before, .depth-design *::after { animation: none !important; transition: none !important; }
  .depth-portrait:hover > img, .depth-design figure > div:first-child:hover > img { transform: none !important; }
  .depth-design .charger-launch-cue, .depth-design [data-depth-button]:hover { transform: none !important; }
}
html[data-depth-motion="off"] .depth-design *,
html[data-depth-motion="off"] .depth-design *::before,
html[data-depth-motion="off"] .depth-design *::after { animation: none !important; transition: none !important; }
html[data-depth-motion="off"] .depth-design img,
html[data-depth-motion="off"] .charger-launch-cue,
html[data-depth-motion="off"] .depth-design [data-depth-button] { transform: none !important; }