.tear-reveal-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.tear-reveal-fallback,
.tear-reveal-fallback img {
  display: block;
  width: 100%;
  height: 100%;
}

.tear-reveal-fallback img {
  object-fit: cover;
}

.tear-reveal-fallback[hidden] {
  display: none;
}

.tear-reveal-canvas[hidden] {
  visibility: hidden;
}

/* Static fallback counterpart of the WebGL edge shadow. The page supplies
   only the retained-paper mask; the wrapper owns the common right/down light
   direction and keeps the shadow decorative and input-transparent. */
.tear-reveal-fallback-shadow {
  --tear-reveal-fallback-shadow-x: 8px;
  --tear-reveal-fallback-shadow-y: 8px;
  --tear-reveal-fallback-shadow-blur: 8px;
  --tear-reveal-fallback-shadow-color: rgba(0, 0, 0, 0.16);
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: drop-shadow(
    var(--tear-reveal-fallback-shadow-x)
    var(--tear-reveal-fallback-shadow-y)
    var(--tear-reveal-fallback-shadow-blur)
    var(--tear-reveal-fallback-shadow-color)
  );
}

.tear-reveal-fallback-shadow__paper {
  position: absolute;
  inset: 0;
  background: var(--tear-reveal-fallback-paper-color, #f7f6f2);
  clip-path: var(--tear-reveal-fallback-paper-mask);
}

html.js:not(.is-fallback) .tear-reveal-fallback-shadow {
  display: none;
}