:root { --ink: #111; --accent: #c8102e; --bg: #fff; color-scheme: light; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }
body { font: 700 1.4rem/1.3 'Amatic SC', 'Segoe Print', cursive; color: var(--ink); }
#stage { position: fixed; inset: 0; }
.flash-stage { direction: ltr; display: block; width: 100%; height: 100%; overflow: visible; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.flash-stage text { user-select: text; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Keyboard / screen-reader layer: real buttons kept off-screen; the ring shows which drawing is focused. */
#a11y ul { margin: 0; padding: 0; list-style: none; }
#a11y button {
  position: fixed; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; margin: 0;
  opacity: 0; overflow: hidden;
}
#focus-ring {
  position: fixed; z-index: 20; pointer-events: none;
  border: 3px dashed var(--accent); border-radius: 10px;
  box-shadow: 0 0 0 3px #fff;
}
#focus-ring::after {
  content: attr(data-label); position: absolute; top: 100%; inset-inline-start: 0; margin-top: 6px;
  background: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 0 .5em; white-space: nowrap;
  font-size: 1.3rem;
}

#video-layer {
  position: fixed; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; text-align: center; pointer-events: none;
}
#video-layer video { width: 100%; height: 100%; object-fit: contain; background: #000; pointer-events: auto; }
#video-layer .video-note { margin: 0; font-size: clamp(1rem, 2.4vw, 2rem); padding: 0 1em; }
#video-layer.missing video { display: none; }
#video-layer iframe { width: 100%; height: 100%; border: 0; background: #000; pointer-events: auto; }
#video-layer.embedded video { display: none; }
#video-layer:not(.missing) .video-note { display: none; }
.noscript { padding: 2rem; font-size: 2rem; }

/* the movie calls Mouse.hide() and draws its own pointer */
.flash-no-cursor, .flash-no-cursor * { cursor: none !important; }
.flash-no-cursor #video-layer video { cursor: auto !important; }
.flash-touch .flash-top { display: none; }

/* home link: the name bubble, in the window's top corner */
#home-link {
  position: fixed; z-index: 8; top: max(10px, env(safe-area-inset-top, 0px)); inset-inline-start: 12px;
  width: clamp(92px, 11vw, 140px); padding: 0; border: 0; background: none;
  transform-origin: 40% 30%; animation: home-in .5s cubic-bezier(.3, 1.6, .5, 1) both;
}
#home-link svg { display: block; width: 100%; height: auto; overflow: visible; pointer-events: none; } /* the name re-draws while hovered: clicks must land on the button itself */
#home-link:hover, #home-link:focus-visible { animation: home-wobble .6s ease-in-out; }
#home-link:focus-visible { outline: 3px dashed var(--accent); outline-offset: 4px; border-radius: 12px; }
@keyframes home-in { from { transform: translateY(-140%) rotate(-12deg); } to { transform: none; } }
@keyframes home-wobble { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-6deg) scale(1.06); } 70% { transform: rotate(4deg) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { #home-link, #home-link:hover { animation: none; } }

/* illustrations shown inside the open mouth (doodles section) */
#mouth-gallery {
  position: fixed; z-index: 6; display: flex; align-items: center; justify-content: center;
  color: #f7e9e0; text-align: center; pointer-events: none;
}
#mouth-gallery figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#mouth-gallery img { max-width: 100%; max-height: calc(100% - 2em); object-fit: contain; border: 3px solid #fff; border-radius: 6px; background: #fff; }
#mouth-gallery figcaption { font-size: clamp(1rem, 2vw, 1.6rem); }
/* the preview opens over the teeth when the front tooth is clicked; the teeth themselves are the carousel */
#mouth-gallery figure { display: none; pointer-events: auto; cursor: zoom-out; }
#mouth-gallery.viewing figure { display: flex; }
#mouth-gallery .mouth-note { display: none; }
.mouth-note { margin: 0; font-size: clamp(1.6rem, 5vw, 3.6rem); text-shadow: 0 2px 0 #000; animation: mouth-note-in .5s ease-out both; }
#mouth-gallery button {
  pointer-events: auto; position: absolute; top: 50%; margin-top: -26px; width: 52px; height: 52px; padding: 0;
  display: grid; place-items: center; background: none; border: 0; cursor: pointer; transition: transform .15s;
}
#mouth-gallery button svg { width: 100%; height: 100%; display: block; overflow: visible; }
#mouth-gallery button:hover { transform: scale(1.1) rotate(-4deg); }
#mouth-gallery button:focus-visible { outline: 3px dashed var(--accent); outline-offset: 2px; border-radius: 50%; }
.mg-prev { left: -10px; } .mg-next { right: -10px; }
@keyframes mouth-note-in { from { opacity: 0; transform: scale(.6) rotate(-6deg); } to { opacity: 1; transform: none; } }

/* ---- English: a handwritten face that sits with Shy's lettering */
:root[lang="en"] body { font-family: 'Coming Soon', 'Comic Sans MS', cursive; font-weight: 400; text-transform: uppercase; }
/* English lettering: Coming Soon in capitals — thin, monoline and squarish like Shy's Hebrew hand.
   (text-transform is visual only; screen readers still get normal words) */
.ftext-en { font-family: 'Coming Soon', 'Comic Sans MS', cursive; text-transform: uppercase; paint-order: stroke; }

/* ---- language switcher: two hand-drawn flags on a scrap of paper, bottom-right, always there */
#lang-switch {
  position: fixed; z-index: 9; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 6px; align-items: flex-end; padding: 6px 10px 4px;
  background: #fff; border: 3px solid var(--ink);
  border-radius: 18px 6px 16px 8px / 8px 16px 6px 18px;
  box-shadow: 3px 4px 0 rgba(0,0,0,.25); transform: rotate(-2deg); direction: ltr;
}
#lang-switch button {
  display: flex; flex-direction: column; align-items: center; gap: 0; padding: 2px 3px; margin: 0;
  background: none; border: 0; color: var(--ink); cursor: pointer; border-radius: 8px;
  transition: transform .2s cubic-bezier(.3,1.6,.5,1), filter .2s, opacity .2s;
}
#lang-switch svg { width: clamp(38px, 4.4vw, 54px); height: auto; overflow: visible; transform-origin: 0 50%; }
#lang-switch span { font-size: .95rem; line-height: 1.1; }
#lang-switch [lang="he"] span { font-family: 'Amatic SC', cursive; font-weight: 700; font-size: 1.25rem; line-height: .9; }
#lang-switch [lang="en"] span { font-family: 'Coming Soon', cursive; text-transform: uppercase; font-size: .8rem; line-height: 1.6; padding-bottom: 2px; }
#lang-switch button[aria-pressed="false"] { filter: grayscale(.85); opacity: .6; transform: scale(.86); }
#lang-switch button[aria-pressed="false"]:hover { filter: none; opacity: 1; transform: scale(.95) rotate(-3deg); }
/* only wave while pointed at (or keyboard-focused) */
#lang-switch button:focus-visible { outline: 3px dashed var(--accent); outline-offset: 2px; }
@keyframes flag-wave { 0%, 100% { transform: skewY(0) scaleX(1); } 30% { transform: skewY(-3deg) scaleX(.97); } 60% { transform: skewY(2deg) scaleX(1); } }
.flash-overlay { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 60; overflow: visible; }
/* the menu face: bottom-left corner of the window, at the stage's scale — the stage viewBox is
   1120×864 (1024×768 + 48px margins), so 1024 stage px = min(1024/1120 · 100vw, 1024/864 · 100vh).
   On small screens it is enlarged (up to 1.8×, to about 55% of its original size) to stay tappable. */
.flash-pinned {
  --base: min(91.43vw, 118.52vh);
  position: fixed; left: 0; bottom: 0; z-index: 2; overflow: hidden; pointer-events: none; transform-origin: 0 100%; /* its box edge is the old stage edge: the face photo stops there, as it did in Flash */
  width: max(var(--base), min(563px, calc(1.8 * var(--base)))); aspect-ratio: 1024 / 768; height: auto;
}

/* the capitals are for the lettering; the movie's own text (the email address) keeps its case */
.flash-stage { text-transform: none; }
.flash-stage .ftext-en { text-transform: uppercase; }