/* Overlooked — the film. Scoped to .ofilm; the page gives the container its size. */
.ofilm { position: relative; overflow: hidden; background: #EFE8D6; color: #1B2140; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.ofilm:focus { outline: none; }
.ofilm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }
.ofilm[data-fstate="ended"] .ofilm-canvas, .ofilm[data-fstate="debug"] .ofilm-canvas, .ofilm[data-fstate="loading"] .ofilm-canvas { cursor: default; }
.ofilm-dot { position: absolute; z-index: 2; border: 0; padding: 0; border-radius: 50%; background: none; cursor: pointer; }
.ofilm-dot[hidden] { display: none; }
.ofilm-dot:focus-visible { outline: 1.5px dashed #2A3C9C; outline-offset: -6px; }

/* sound: the film's own dot. Muted, it pulses on the beat; on, it sends out waves. */
.ofilm-sound { position: absolute; z-index: 3; right: max(8px, env(safe-area-inset-right, 0px)); bottom: max(8px, env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 10px; border: 0; background: none; cursor: pointer; color: #1B2140;
  font: 400 10px/1 "DM Mono", ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; transition: color .4s, opacity .4s; }
.ofilm-sound[hidden] { display: none; }
.ofilm-sound[data-tone="light"] { color: #F4EEDF; }
.ofilm-sound svg { width: 30px; height: 22px; overflow: visible; flex: none; }
.ofilm-sound .d { fill: #2A3C9C; }
.ofilm-sound .u { fill: #F2672E; opacity: .9; }
.ofilm-sound[data-tone="light"] .d { fill: #F4EEDF; }
.ofilm-sound .rip circle { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ofilm-sound path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; transition: opacity .3s; }
.ofilm-sound[data-state="muted"] .wav { display: none; }
.ofilm-sound[data-state="muted"] .r1 { animation: ofilm-ripple .667s cubic-bezier(.2, .7, .3, 1) var(--ph, 0s) infinite; }
.ofilm-sound[data-state="muted"] .r2 { animation: ofilm-ripple .667s cubic-bezier(.2, .7, .3, 1) calc(var(--ph, 0s) + .11s) infinite; }
.ofilm-sound[data-state="on"] .w1 { animation: ofilm-wave 1.333s ease-out infinite; }
.ofilm-sound[data-state="on"] .w2 { animation: ofilm-wave 1.333s ease-out .22s infinite; }
.ofilm-sound[data-state="on"] .w3 { animation: ofilm-wave 1.333s ease-out .44s infinite; }
.ofilm-sound[data-state="off"] path { opacity: .28; }
.ofilm-sound[data-state="idle"] path { opacity: .55; }
.ofilm-sound-l { position: absolute; right: 100%; top: 50%; translate: 0 -50%; opacity: 0; transition: opacity .3s; white-space: nowrap; pointer-events: none; }
@media (hover: hover) { .ofilm-sound:hover .ofilm-sound-l { opacity: 1; } }
.ofilm-sound:focus-visible .ofilm-sound-l { opacity: 1; }
.ofilm-sound:focus-visible { outline: 1.5px dashed currentColor; outline-offset: -2px; }
@keyframes ofilm-wave { 0% { opacity: .25; } 30% { opacity: 1; } 100% { opacity: .25; } }
@keyframes ofilm-ripple { 0% { opacity: 1; transform: scale(.45); } 100% { opacity: 0; transform: scale(1.1); } }

.ofilm-again { position: absolute; z-index: 3; left: 50%; translate: -50% 0; border: 0; background: none; cursor: pointer; min-height: 44px; padding: 8px 14px; color: #1B2140;
  font: 400 11px/1 "DM Mono", ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; opacity: 0; animation: ofilm-in .9s ease-out .2s forwards; }
.ofilm-again[hidden] { display: none; }
.ofilm-again .g { display: inline-block; transition: rotate .6s cubic-bezier(.3, 1.4, .5, 1); }
.ofilm-again .g[hidden] { display: none; }
@media (hover: hover) { .ofilm-again:hover .g { rotate: -300deg; } .ofilm-again:hover { opacity: 1 !important; } }
.ofilm-again:focus-visible { outline: 1.5px dashed currentColor; outline-offset: 2px; }
@keyframes ofilm-in { from { opacity: 0; translate: -50% 6px; } to { opacity: .75; translate: -50% 0; } }

.ofilm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .ofilm-sound .rip circle, .ofilm-sound path, .ofilm-again { animation: none !important; }
  .ofilm-sound[data-state="muted"] .r2 { opacity: .8; transform: scale(1); }
  .ofilm-again { opacity: .75; }
}
/* "overlook again" → "look over again": set in the wordmark's italic, so the joke reads; the words are pieces that can trade places */
.ofilm-again:has(.w) { font: italic 400 clamp(19px, 2vw, 26px)/1 "Instrument Serif", Georgia, serif; letter-spacing: 0; text-transform: none; padding: 10px 16px; }
.ofilm-again:has(.w) .g { font: 400 .7em/1 "DM Mono", ui-monospace, monospace; margin-left: .25em; vertical-align: .12em; }
.ofilm-again .w { display: inline-block; white-space: pre; }