/* =====================================================================================
   THE WITCH FOUND-FOOTAGE HALLOWEEN DESIGN (theme halloween-witch, envelope_style "witch"), loaded only for it
   (views/guest.ejs). Ported 2 Oct 2026 from the test page Gary approved (previews/witch-hazel, laptop
   C:/Claude/witch-video/invite/index.html): the start screen over the live cauldron, the found-footage film with its
   REC timer, the glitch, then the app's own scroll page in the witch's look (potion green on the night forest):
   the name's letters fly in, the cards swing in on scroll, smoke, embers, bubbles and bats (public/js/witch-fx.js).
   Headings and body follow the theme's fonts (--font-display / --font-ui, so the editor's font picker still works);
   the name and the start title are Creepster, the same file the Halloween design already serves.
   ===================================================================================== */
/* Inter (the test page's body font) is linked by views/guest.ejs without blocking the page (media=print swap) */
@font-face { font-family: 'Creepster'; src: url('/themes/halloween/assets/fire/Creepster-Regular.ttf') format('truetype'); font-display: block; }

.witch-page { --w-ink: #050806; --w-potion: #8dff5a; --w-potion-dim: #4fae2c; --w-ember: #ff8a3d; --w-text: #ece7da; --w-muted: #a9a294;
  --w-card: rgba(10, 16, 11, .72); --w-line: rgba(141, 255, 90, .22); --w-rec: #ff3b30; --w-dark-ink: #0b1408;
  --w-creep: 'Creepster', Georgia, serif; color-scheme: dark; }

/* the app has no global [hidden] rule, and these pieces set their own display: hidden must win (a faded start screen
   that stayed on top once swallowed every tap on the standalone page) */
.witch-page [hidden] { display: none !important; }

/* ---- locking: until the film has played (or been skipped) the page is just the stage (witch-stage.js .witch-sealed) ---- */
.witch-page.gf-locked { position: static; height: auto; overflow: visible; }
.witch-page.gf-locked .stage-scroll { pointer-events: auto; }
body.witch-sealed { overflow: hidden; overscroll-behavior: none; }
.witch-sealed .sc-flow, .witch-sealed .sc-music, .witch-sealed .witch-top, .witch-sealed #wt-bg, .witch-sealed .wt-fx { display: none !important; }
body.witch-open .witch-scene { display: none; }
/* the top block below carries the name, the date and the place */
.witch-page .sc-hero { display: none; }
html:has(body.witch-page), body.witch-page { overflow-x: hidden; background: var(--w-ink); }
.witch-page .app-container.app-scroll, .witch-page #card-stage.stage-scroll { background: transparent; }
.witch-page .sc-flow { position: relative; overflow-x: clip; }

/* ---- the stage: start screen, then the film ---- */
.witch-scene { position: relative; z-index: 2; display: block; width: 100%; max-width: 520px; height: 100vh; height: 100svh; margin: 0 auto;
  overflow: hidden; background: var(--w-ink); touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none; font-family: Inter, system-ui, sans-serif; color: var(--w-text); }
.wt-start { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; text-align: center; padding: 0 32px; isolation: isolate;
  background: var(--w-ink) center / cover no-repeat; transition: opacity .5s; }
.wt-start .wt-live { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.wt-start::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 55% at 60% 62%, transparent 30%, rgba(0,0,0,.45)), linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.25) 45%, rgba(0,0,0,.7)); }
.wt-start-in { height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: max(9vh, env(safe-area-inset-top)) 0 max(10vh, env(safe-area-inset-bottom)); }
.wt-kicker { max-width: 300px; margin: 0 0 10px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 22px; line-height: 1.3;
  color: #c9c2b2; text-shadow: 0 1px 8px rgba(0,0,0,.9); overflow-wrap: anywhere; }
.wt-title { margin: 0; font-family: var(--w-creep); font-weight: 400; font-size: 46px; line-height: 1.05; color: var(--w-potion);
  text-shadow: 0 2px 0 #050806, 0 0 6px rgba(0,0,0,.95), 0 0 16px rgba(0,0,0,.8), 0 0 28px rgba(141,255,90,.45); }
.wt-go { border: 1px solid var(--w-potion); background: rgba(141,255,90,.12); color: var(--w-text); padding: 15px 30px; border-radius: 999px;
  font: 600 16px Inter, system-ui, sans-serif; letter-spacing: .02em; cursor: pointer; box-shadow: 0 0 24px rgba(141,255,90,.25);
  animation: wt-pulse 2.2s ease-in-out infinite; }
.wt-hint { margin: 16px 0 0; font-size: 13px; color: var(--w-muted); text-shadow: 0 1px 6px rgba(0,0,0,.9); }
@keyframes wt-pulse { 50% { box-shadow: 0 0 38px rgba(141,255,90,.5); } }

.wt-film { position: absolute; inset: 0; z-index: 10; background: #000; }
.wt-film video { width: 100%; height: 100%; object-fit: cover; display: block; }
.wt-rec { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); background: var(--w-rec); color: #fff;
  font: 600 15px/1 'SF Pro Text', Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; padding: 6px 10px; border-radius: 7px; opacity: .92; pointer-events: none; }
.wt-skip { position: absolute; right: 14px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 2; background: rgba(0,0,0,.45); color: #ddd;
  border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 8px 14px; font: 500 13px Inter, system-ui, sans-serif; cursor: pointer; }
.wt-glitch { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 20; display: none; background: #000; pointer-events: none; }

/* the sound button: top right over the film, top left once the page is open (the music pill takes the right) */
.wt-sound { position: fixed; z-index: 45; top: max(12px, env(safe-area-inset-top)); right: 12px; width: 42px; height: 42px; padding: 0;
  border-radius: 50%; border: 1px solid var(--w-line); background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center; cursor: pointer; }
body:not(.witch-sealed) .wt-sound { right: auto; left: 12px; }
.wt-sound svg { width: 20px; height: 20px; }
.edit-mode .wt-sound, .edit-mode .witch-scene { display: none !important; }

/* ---- behind the page: the blurred cauldron loop, and the smoke / embers canvas (witch-fx.js) ---- */
#wt-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--w-ink); }
#wt-bg video { width: 100%; height: 100%; object-fit: cover; opacity: .8; transform: scale(1.08); }
#wt-bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 60% at 50% 30%, rgba(60,140,30,.16), transparent 60%), linear-gradient(rgba(5,8,6,.35), rgba(5,8,6,.55) 40%, rgba(5,8,6,.9)); }
.wt-fx { position: fixed; top: 0; left: 0; pointer-events: none; }
#wt-fx-back { z-index: 0; }
#wt-fx-front { z-index: 35; }

/* ---- the top: the name's letters fly in ---- */
.witch-top { position: relative; z-index: 1; min-height: 92vh; min-height: 92svh; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center; padding: 48px 22px 24px; font-family: var(--font-ui); color: var(--w-text); }
.wt-eyebrow { margin: 0 0 6px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 21px; color: var(--w-muted); }
.wt-name { margin: 6px 0 4px; font-family: var(--w-creep); font-weight: 400; font-size: clamp(54px, 17vw, 78px); line-height: .98; color: var(--w-potion);
  text-shadow: 0 0 22px rgba(141,255,90,.6), 0 0 60px rgba(141,255,90,.3); overflow-wrap: normal; }
.wt-name .wt-wd { display: inline-block; white-space: nowrap; }
.wt-name .wt-ch { display: inline-block; }
.wt-occasion { margin: 0 0 22px; font-family: var(--font-display); font-weight: 600; font-size: 30px; letter-spacing: .04em; color: var(--w-text); overflow-wrap: anywhere; }
.wt-when { margin: 0; font-size: 17px; line-height: 1.6; color: var(--w-text); overflow-wrap: anywhere; }
.wt-when b { font-weight: 600; color: #fff; }
.wt-fx-hint { margin: 22px 0 0; font-size: 13px; color: var(--w-potion); opacity: .85; }
.wt-scroll { margin-top: 22px; font-size: 13px; color: var(--w-muted); text-decoration: none; }
.wt-scroll.in { animation: wt-fly .95s cubic-bezier(.18,1.3,.4,1) var(--d, 0s) both, wt-bob 1.8s ease-in-out 3.9s infinite; }
@keyframes wt-bob { 50% { transform: translateY(5px); } }

/* text flies in: --fx/--fy/--fr/--fs = where it comes from, --d = delay (only once the page is open: .wt-armed) */
.wt-armed .wt-fly { opacity: 0; }
.wt-armed .wt-fly.in { animation: wt-fly .95s cubic-bezier(.18,1.3,.4,1) var(--d, 0s) both; }
@keyframes wt-fly {
  from { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 40px)) rotate(var(--fr, 0deg)) scale(var(--fs, 1)); filter: blur(8px); }
  45% { opacity: 1; filter: blur(0); }
  to { opacity: 1; transform: none; filter: none; } }
.wt-armed .wt-name .wt-ch { opacity: 0; }
.wt-armed .wt-name.in .wt-ch { animation: wt-ch 1.1s cubic-bezier(.2,1.4,.35,1) var(--d) both; }
@keyframes wt-ch {
  from { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(.2); filter: blur(10px); }
  55% { opacity: 1; filter: blur(0); }
  to { opacity: 1; transform: none; } }
.wt-name.landed { animation: wt-glow .6s ease-out; }
@keyframes wt-glow { 40% { text-shadow: 0 0 30px rgba(141,255,90,1), 0 0 80px rgba(141,255,90,.7); transform: scale(1.06); } }

/* ---- the app's sections, as the witch page's cards; they swing in from alternating sides on scroll ---- */
.witch-page .sc-flow > .sc-section, .witch-page .sc-flow > .sc-footer { position: relative; z-index: 1; }
.witch-page .sc-section { max-width: 520px; margin: 14px auto; width: calc(100% - 32px); padding: 22px 20px; text-align: left; border: 1px solid var(--w-line);
  border-bottom: 1px solid var(--w-line); border-radius: 18px; background: var(--w-card); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--font-ui); color: var(--w-text); }
.witch-page .sc-section.sc-centered { text-align: left; }
.witch-page .sc-countdown-wrap { background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 6px 0; }
.witch-page .sc-h2, .witch-page .sc-section .sc-script { margin: 0 0 10px; font-family: var(--font-display); font-weight: 600; font-size: 25px; line-height: 1.2;
  color: #fff; letter-spacing: 0; text-transform: none; text-align: left; }
.witch-page .sc-rule, .witch-page .sc-rule-sm { display: none; }
.witch-page .sc-lead { margin: 0 0 10px; font-size: 16px; line-height: 1.6; color: var(--w-text); text-align: left; }
.witch-page .sc-signature { margin: 6px 0 0; font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--w-potion); text-align: left; }
.witch-page .sc-detail { display: block; padding: 0; margin: 0 0 14px; border: 0; }
.witch-page .sc-label { display: block; margin: 0 0 4px; color: var(--w-potion); font: 600 12px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.witch-page .sc-value { font-family: var(--font-ui); font-size: 16px; line-height: 1.55; color: var(--w-text); }
.witch-page #travel .sc-value { font-size: 14px; color: var(--w-muted); }
.wt-replyby { margin: -2px 0 12px; font-size: 14px; color: var(--w-muted); }

.witch-page .countdown-bar { display: flex; justify-content: center; gap: 10px; margin: 0; padding: 0; background: none; border: 0; }
.witch-page .countdown-item { width: 70px; padding: 10px 0 8px; border: 1px solid var(--w-line); border-radius: 12px; background: var(--w-card); text-align: center; }
.witch-page .countdown-val { display: block; font: 600 24px/1.2 var(--font-ui); color: var(--w-potion); font-variant-numeric: tabular-nums; }
.witch-page .countdown-lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--w-muted); }

.witch-page .sc-timeline { list-style: none; margin: 0; padding: 0; text-align: left; }
.witch-page .sc-timeline li { display: grid; grid-template-columns: 76px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.07); border-bottom: 0; line-height: 1.45; }
.witch-page .sc-timeline li:first-child { border-top: 0; }
.witch-page .sc-timeline .sc-dot, .witch-page .sc-timeline .sc-ico { display: none; }
.witch-page .sc-time { color: var(--w-potion); font: 600 14px var(--font-ui); padding-top: 2px; letter-spacing: 0; }
.witch-page .sc-what { font-family: var(--font-ui); font-size: 16px; color: var(--w-text); }

.witch-page .sc-map { position: relative; margin: 12px 0 4px; padding: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--w-line); aspect-ratio: 4 / 3;
  background: #0c120d; box-shadow: none; }
.witch-page .sc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  filter: invert(.92) hue-rotate(180deg) saturate(.55) brightness(.92) contrast(.95); }
.witch-page .sc-map::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(transparent 55%, rgba(5,8,6,.55)); }
.witch-page .sc-btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; justify-content: stretch; }
.witch-page .sc-btn { position: relative; flex: 1 1 140px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 46px; padding: 0 10px;
  white-space: nowrap; border-radius: 12px; border: 1px solid var(--w-line); background: rgba(141,255,90,.08); color: var(--w-text); text-decoration: none;
  font: 500 15px var(--font-ui); letter-spacing: 0; text-transform: none; box-shadow: none; }
html:not([data-ss]) .witch-page .sc-btn-solid, html:not([data-ss]) .witch-page .sc-btn.js-maps { background: var(--w-potion); background-image: none; color: var(--w-dark-ink); border-color: var(--w-potion); font-weight: 600; }
[data-ss] .witch-page .sc-btn.js-maps { color: var(--w-dark-ink); font-weight: 600; isolation: isolate; overflow: hidden; border-color: transparent; background: var(--w-potion); }
.witch-page .sc-btn:active { transform: scale(.98); }
.witch-page .sc-btn-block { width: 100%; }
.witch-page .sc-alt-links, .witch-page .sc-alt-links a { margin: 12px 0 0; font-size: 13px; color: var(--w-muted); text-align: left; }

.witch-page .sc-form { text-align: left; }
.witch-page .sc-form label, .witch-page .sc-legend { display: block; margin: 12px 0 6px; font: 400 14px var(--font-ui); color: var(--w-muted); letter-spacing: 0; text-transform: none; }
.witch-page .sc-form input[type="text"], .witch-page .sc-form input[type="tel"], .witch-page .sc-form input[type="email"], .witch-page .sc-form select, .witch-page .sc-form textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--w-line); background: rgba(0,0,0,.35); color: #fff; font: 400 16px var(--font-ui); }
.witch-page .sc-form input:focus, .witch-page .sc-form select:focus, .witch-page .sc-form textarea:focus { outline: 2px solid var(--w-potion); outline-offset: 1px; }
.witch-page .sc-choice { display: flex; gap: 10px; margin: 6px 0 4px; }
.witch-page .sc-choice label { flex: 1; margin: 0; }
.witch-page .sc-choice span { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 8px; border-radius: 12px; text-align: center;
  border: 1px solid var(--w-line); color: var(--w-text); font: 600 15px var(--font-ui); letter-spacing: 0; text-transform: none; box-shadow: none; }
html:not([data-ss]) .witch-page .sc-choice span { background: rgba(255,255,255,.04); }
html:not([data-ss]) .witch-page .sc-choice input:checked + span { background: var(--w-potion); border-color: var(--w-potion); color: var(--w-dark-ink); }
[data-ss] .witch-page .sc-choice input:checked + span { border-color: var(--w-potion); }
.witch-page .sc-form .sc-btn-solid { margin-top: 18px; }
.witch-page .sc-thanks, .witch-page #rsvp-response-message { margin-top: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--w-line); background: rgba(141,255,90,.06);
  text-align: center; color: var(--w-text); font-size: 15px; line-height: 1.5; }
.witch-page #rsvp-response-message.error { border-color: rgba(255,155,138,.6); color: #ff9b8a; background: rgba(255,80,60,.06); }
.wt-done-big { display: block; margin: 0 0 6px; font-family: var(--w-creep); font-size: 40px; line-height: 1.1; color: var(--w-potion); text-shadow: 0 0 16px rgba(141,255,90,.5); }

.witch-page .sc-footer { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; padding: 24px 20px 70px; text-align: center; border: 0; background: none; }
.witch-page .sc-footer .sc-script { margin: 0 0 6px; font-family: var(--w-creep); font-weight: 400; font-size: 36px; line-height: 1.1; color: var(--w-potion);
  text-shadow: 0 0 18px rgba(141,255,90,.45); text-align: center; }
.witch-page .sc-footer-sub { color: var(--w-muted); font-size: 14px; }
.witch-page .wt-again { width: 100%; max-width: 360px; margin: 18px auto 0; }

/* the sections swing in from alternating sides (--wx / --wr set in page order by witch-stage.js), their contents follow.
   Only part-way off the side: guest.js's IntersectionObserver watches the section itself (its moved box), so a card that
   started fully off-screen would never be seen and never come in */
.witch-page .sc-section.reveal { opacity: 0; transform: translateX(var(--wx, -60%)) translateY(30px) rotate(var(--wr, -7deg)); filter: blur(8px);
  transition: opacity .55s ease, transform .95s cubic-bezier(.18,1.3,.4,1), filter .6s ease; }
.witch-page .sc-section.reveal.seen { opacity: 1; transform: none; filter: none; }
.witch-page .sc-section.reveal > *, .witch-page .sc-footer.reveal > * { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,1.2,.4,1); }
.witch-page .sc-section.reveal.seen > *, .witch-page .sc-footer.reveal.seen > * { opacity: 1; transform: none; transition-delay: calc(.35s + var(--i, 0) * .09s); }
.witch-page .sc-countdown-wrap.reveal { transform: none; filter: none; }
.witch-page .sc-countdown-wrap.reveal > .countdown-bar { opacity: 1; transform: none; }
.witch-page .sc-countdown-wrap.reveal .countdown-item { opacity: 0; transform: translateY(-90px) rotate(var(--cr, -12deg)); transition: opacity .5s ease, transform .9s cubic-bezier(.18,1.3,.4,1); }
.witch-page .sc-countdown-wrap.reveal.seen .countdown-item { opacity: 1; transform: none; }
.witch-page .sc-countdown-wrap.reveal.seen .countdown-item:nth-child(2) { transition-delay: .12s; }
.witch-page .sc-countdown-wrap.reveal.seen .countdown-item:nth-child(3) { transition-delay: .24s; }
.witch-page .sc-countdown-wrap.reveal.seen .countdown-item:nth-child(4) { transition-delay: .36s; }
.witch-page .sc-countdown-wrap .countdown-item:nth-child(even) { --cr: 12deg; }

@media (prefers-reduced-motion: reduce) {
  .witch-page .wt-fly, .witch-page .wt-name .wt-ch, .witch-page .sc-section.reveal, .witch-page .sc-section.reveal > *, .witch-page .countdown-item { opacity: 1 !important; animation: none !important; transform: none !important; filter: none !important; }
  .wt-go, .wt-scroll { animation: none !important; }
}

/* ---- Samsung Internet (html[data-ss], Android): its dark mode flips colours a page draws and dims pictures, but leaves
   canvases and videos alone. The page colour is a canvas (#wt-ss-page); the green buttons take their green from a
   picture inside them and their dark words from an ink picture (guest.ejs for .sc-btn-solid, witch-stage.js for the
   directions button; themes/halloween-witch/assets/ss-button.jpg + ss-ink-button.jpg). ---- */
#wt-ss-page { display: none; }
[data-ss] #wt-ss-page { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
html[data-ss]:has(body.witch-page), [data-ss] body.witch-page { background: transparent; }
[data-ss] .witch-page :is(.sc-btn.js-maps) > .ss-fill { position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px);
  border-radius: inherit; object-fit: cover; z-index: -1; pointer-events: none; }
[data-ss] .wt-ss-ink { background: url('/themes/halloween-witch/assets/ss-ink-button.jpg') center / cover; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; }

/* Gary 2/10: "make sure the colouring's fine and it's a bit lighter on the Samsung browser". On Samsung Internet the whole
   look is lifted a little: the cauldron behind the page shows through brighter, the start screen's shade is lighter, the
   cards and form boxes are less black and their green edges stronger (the green glow itself is unchanged). Videos and
   canvases keep their colours there; the drawn colours below are dark enough that its dark mode leaves them be. */
[data-ss] .witch-page { --w-card: rgba(20, 34, 21, .56); --w-line: rgba(141, 255, 90, .36); --w-muted: #c4beb0; --w-text: #f3efe5; }
[data-ss] .wt-start::before { background: radial-gradient(90% 55% at 60% 62%, transparent 38%, rgba(0,0,0,.28)), linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.1) 45%, rgba(0,0,0,.52)); }
[data-ss] .wt-start .wt-live { filter: brightness(1.12); }
[data-ss] #wt-bg video { opacity: 1; filter: brightness(1.18); }
[data-ss] #wt-bg::after { background: radial-gradient(120% 60% at 50% 30%, rgba(80,170,40,.18), transparent 60%), linear-gradient(rgba(5,8,6,.12), rgba(5,8,6,.32) 40%, rgba(5,8,6,.7)); }
[data-ss] .witch-page .sc-form input[type="text"], [data-ss] .witch-page .sc-form select, [data-ss] .witch-page .sc-form textarea { background: rgba(255,255,255,.07); }
[data-ss] .witch-page .sc-choice input:not(:checked) + span { background-color: rgba(255,255,255,.07); }
[data-ss] .witch-page .countdown-item { background: rgba(20, 34, 21, .62); }
/* the map: on Samsung its own dark mode may darken the map itself, and our night tint (an invert) on top of that would
   turn it light again. So on Samsung the map is only softened, never inverted: dark mode on = a dark map, off = a calm one */
[data-ss] .witch-page .sc-map iframe { filter: brightness(.88) saturate(.8); }