/* A finite, local watercolor reveal. Without enhancement the complete image stays visible. */
.home-pilot .scene-reveal {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.home-pilot .scene-reveal-image { position: relative; z-index: 0; }
.home-pilot .scene-reveal-wash,
.home-pilot .scene-reveal-glint,
.home-pilot .scene-reveal-petal { position: absolute; pointer-events: none; opacity: 0; }
.home-pilot .scene-reveal-wash {
  z-index: 1;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 32%, rgb(0 0 0 / 65%) 48%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, #000 32%, rgb(0 0 0 / 65%) 48%, transparent 70%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 48% 64%;
  mask-position: 48% 64%;
}
.home-pilot .scene-reveal-glint {
  z-index: 2;
  left: 14%;
  top: 60%;
  width: 72%;
  height: 15%;
  background: linear-gradient(108deg, transparent 30%, rgb(255 251 235 / 30%) 46%, rgb(255 253 242 / 90%) 50%, transparent 59%);
  -webkit-mask-image: repeating-linear-gradient(to bottom, transparent 0 3px, #000 4px 5px, transparent 6px 11px);
  mask-image: repeating-linear-gradient(to bottom, transparent 0 3px, #000 4px 5px, transparent 6px 11px);
}
.home-pilot .scene-reveal-petal {
  z-index: 3;
  top: 27%;
  left: 28%;
  width: clamp(5px, .6vw, 8px);
  height: clamp(8px, .9vw, 12px);
  border-radius: 65% 35% 58% 42%;
  background: #d8a5ab;
  box-shadow: inset 1px -1px rgb(145 91 92 / 18%);
  --drift-x: 52px;
  --drift-y: 98px;
}
.home-pilot .scene-reveal-petal:nth-of-type(4) { top: 23%; left: 33%; --drift-x: 70px; --drift-y: 108px; }
.home-pilot .scene-reveal-petal:nth-of-type(5) { top: 34%; left: 22%; --drift-x: 38px; --drift-y: 82px; }
.home-pilot .scene-reveal.is-playing .scene-reveal-image { animation: scene-ink 3s ease-out 1 both; }
.home-pilot .scene-reveal.is-playing .scene-reveal-wash { opacity: 1; animation: scene-wash 3s cubic-bezier(.22, .61, .36, 1) 1 both; }
.home-pilot .scene-reveal.is-playing .scene-reveal-glint { animation: scene-glint .9s ease-in-out 1.85s 1 both; }
.home-pilot .scene-reveal.is-playing .scene-reveal-petal { animation: scene-petal 1.2s ease-in-out 1.45s 1 both; }
.home-pilot .scene-reveal.is-playing .scene-reveal-petal:nth-of-type(4) { animation-delay: 1.6s; }
.home-pilot .scene-reveal.is-playing .scene-reveal-petal:nth-of-type(5) { animation-delay: 1.75s; }

@keyframes scene-ink {
  0% { opacity: .12; filter: grayscale(1) contrast(1.12) brightness(1.08); }
  25% { opacity: 1; filter: grayscale(1) contrast(1.12) brightness(1.08); }
  72% { opacity: 1; filter: grayscale(1) contrast(1.12) brightness(1.08); }
  100% { opacity: 1; filter: none; }
}
@keyframes scene-wash {
  0%, 15% { opacity: 0; -webkit-mask-size: 0% 0%; mask-size: 0% 0%; }
  24% { opacity: 1; -webkit-mask-size: 35% 30%; mask-size: 35% 30%; }
  70% { opacity: 1; -webkit-mask-size: 240% 240%; mask-size: 240% 240%; }
  100% { opacity: 1; -webkit-mask-size: 430% 430%; mask-size: 430% 430%; }
}
@keyframes scene-glint {
  0% { opacity: 0; transform: translateX(-28%); }
  45% { opacity: .65; }
  100% { opacity: 0; transform: translateX(28%); }
}
@keyframes scene-petal {
  0% { opacity: 0; transform: translate(0, 0) rotate(-25deg); }
  18% { opacity: .85; }
  65% { opacity: .7; transform: translate(calc(var(--drift-x) * .6), calc(var(--drift-y) * .65)) rotate(65deg); }
  100% { opacity: 0; transform: translate(var(--drift-x), var(--drift-y)) rotate(130deg); }
}

.home-pilot .scene-reveal-footer {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 54px;
}
.home-pilot .scene-reveal-credit { grid-column: 2; grid-row: 1; min-width: 0; }
.home-pilot .scene-reveal-tools { grid-column: 1; grid-row: 1; min-height: 44px; }
.home-pilot .scene-reveal-replay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 88px;
  min-height: 44px;
  padding: 8px;
  border: 1px solid #c6b79b;
  border-radius: 999px;
  background: #faf6ec;
  color: #40574d;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.home-pilot .scene-reveal-replay[hidden] { display: none; }
.home-pilot .scene-reveal-replay svg { width: 14px; height: 14px; flex: none; }
.home-pilot .scene-reveal-replay:hover { background: #efe8d8; border-color: #8b9b83; }
.home-pilot .scene-reveal-replay:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .home-pilot .scene-reveal .scene-reveal-image { animation: none !important; opacity: 1 !important; filter: none !important; }
  .home-pilot .scene-reveal-wash,
  .home-pilot .scene-reveal-glint,
  .home-pilot .scene-reveal-petal,
  .home-pilot .scene-reveal-tools { display: none !important; animation: none !important; }
  .home-pilot .scene-reveal-footer { display: block; }
}
@media print {
  .home-pilot .scene-reveal .scene-reveal-image { animation: none !important; opacity: 1 !important; filter: none !important; }
  .home-pilot .scene-reveal-wash,
  .home-pilot .scene-reveal-glint,
  .home-pilot .scene-reveal-petal,
  .home-pilot .scene-reveal-tools { display: none !important; animation: none !important; }
  .home-pilot .scene-reveal-footer { display: block; }
}