/* Crysten Curry Elementor Widget - shared video look (Case Study + Video Showcase) */

.cc-vid-frame { position: relative; width: 100%; background: #14100F; overflow: hidden; }
.cc-vid-frame--ratio { aspect-ratio: var(--cc-vid-ratio, 16 / 9); }

.cc-vid {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
}
.cc-vid--still { cursor: default; }
.cc-vid img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
button.cc-vid:hover img, a.cc-vid:hover img { transform: scale(1.03); }
.cc-vid::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 7, 8, .35), rgba(10, 7, 8, 0) 45%); pointer-events: none; }
.cc-vid--still::after { display: none; }

.cc-vid__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: clamp(54px, 6vw, 84px);
  height: clamp(54px, 6vw, 84px);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(253, 251, 245, .94);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
  transition: transform .3s, background .3s;
}
.cc-vid__play svg { width: 42%; height: 42%; margin-left: 6%; fill: #0A0708; }
.cc-vid:hover .cc-vid__play, .cc-vid:focus-visible .cc-vid__play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.cc-vid:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }

.cc-vid__player, .cc-vid__loop { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; border: 0; background: #000; object-fit: cover; }
.cc-vid__player { object-fit: contain; }