/* ============================================================
   julythird.online — design language
   Dark "magenta dark-theatre": near-black plum, dusty-rose accent,
   Libre Caslon Display / EB Garamond / IBM Plex Mono. Mobile-first.
   ============================================================ */

:root{
  --bg:#0A070A;
  --grad:radial-gradient(130% 90% at 50% -5%, #241620 0%, #110A0F 55%, #0A070A 100%);
  --rose:#CE7E97; --rose-dim:#9C5C72;
  --ink:#EFE9EC; --ink2:#F3ECEE;
  --mut:#A79BA1; --mut2:#736A70; --mut3:#6E626A;
  --card:#1A1318; --line:#2A2028; --line2:#382A34; --dash:#46323F;
  --paper:#F1EBEE; --paperink:#5A5157;
  --serifD:'Libre Caslon Display',Georgia,'Times New Roman',serif;
  --serif:'EB Garamond',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --vh:100vh; --vh:100dvh;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;background:var(--bg)}
body{
  font-family:var(--serif);color:var(--ink);
  background:var(--grad);background-attachment:fixed;
  min-height:var(--vh);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overscroll-behavior:none;
}
::selection{background:rgba(206,126,151,.24)}
::-webkit-scrollbar{width:0;height:0;background:transparent}
img{-webkit-user-drag:none;user-select:none}

/* ---- film grain ---- */
#grain{
  position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;animation:grain 1.1s steps(3) infinite;
}
@keyframes grain{0%{background-position:0 0}33%{background-position:-30px 15px}66%{background-position:25px -25px}100%{background-position:0 0}}

/* ============================================================
   MAP
   ============================================================ */
#mapWrap{position:fixed;inset:0;z-index:1;overflow:hidden;
  transition:transform 1.6s cubic-bezier(.4,.1,.2,1)}
#map{width:100%;height:100%;display:block}
.land{fill:#0D090E;stroke:rgba(206,126,151,.05);stroke-width:1}
.river-label{fill:rgba(167,155,161,.12);font-family:var(--mono);font-size:8px;
  letter-spacing:.34em;text-anchor:middle}
.bridge{stroke:rgba(206,126,151,.16);stroke-width:1.1;stroke-dasharray:1.5 3}
#island{fill:#181117;stroke:#3A2A34;stroke-width:1.3}
#grid line{stroke:var(--rose);stroke-width:.5;opacity:.07}
#park{fill:rgba(120,90,105,.10);stroke:rgba(206,126,151,.18);stroke-width:.8}
#parkLabel{fill:rgba(167,155,161,.4);font-family:var(--mono);font-size:6px;
  letter-spacing:.12em;text-anchor:middle;white-space:pre}

.seg{stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:0.1 10;
  filter:drop-shadow(0 0 4px rgba(255,255,255,.55))}
.drawmask{stroke:#fff;stroke-width:11;fill:none;stroke-linecap:round}

.pin{opacity:0;transition:opacity .35s ease}
.pin .dot{fill:#fff;stroke:rgba(0,0,0,.25);stroke-width:1;
  transform:scale(0);transform-origin:center;transform-box:fill-box}
.pin .glow{opacity:0;transition:opacity .6s}
.pin.show{opacity:1}
.pin.show .glow{opacity:1}
.pin.show .dot{animation:pinDrop .65s cubic-bezier(.2,1.3,.4,1) forwards}
.pin.instant .dot{animation:none;transform:scale(1)}
@keyframes pinDrop{0%{transform:scale(0)}55%{transform:scale(1.4)}100%{transform:scale(1)}}

#closing{
  position:absolute;left:0;right:0;top:0;bottom:0;z-index:15;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;padding:40px 34px;text-align:center;
  opacity:0;transition:opacity 1.6s ease;pointer-events:none}
#closing[hidden]{display:none}
#closing.show{opacity:1}
.closing-print{background:var(--paper);padding:11px 11px 34px;transform:rotate(-1.6deg);
  box-shadow:0 22px 50px rgba(0,0,0,.6),0 5px 10px rgba(0,0,0,.4)}
.closing-print img{display:block;width:min(58vw,220px);height:auto;background:#111;
  filter:grayscale(1) contrast(1.04) brightness(.98)}
.closing-print .cap{font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  color:var(--paperink);margin-top:11px}
.closing-line{font-family:var(--serifD);font-style:italic;font-size:21px;line-height:1.4;
  color:rgba(243,236,238,.94);text-shadow:0 2px 18px rgba(0,0,0,.8);max-width:320px}

/* ---- keepsake photo pop (between steps) ---- */
#photopop{align-items:center;justify-content:center;padding:34px;
  background:rgba(6,4,6,.92);backdrop-filter:blur(2px)}
.polaroid{background:var(--paper);padding:14px 14px 44px;
  box-shadow:0 30px 70px rgba(0,0,0,.7),0 8px 16px rgba(0,0,0,.5);
  opacity:0;transform:rotate(-2deg) scale(.82) translateY(22px);
  transition:opacity .5s ease,transform .7s cubic-bezier(.2,1.2,.4,1)}
.polaroid.in{opacity:1;transform:rotate(-2deg) scale(1) translateY(0)}
.polaroid.out{opacity:0;transform:rotate(-2deg) scale(.92) translateY(-16px);transition:all .5s ease}
.polaroid img{display:block;width:min(72vw,290px);height:auto;background:#111;
  filter:grayscale(1) contrast(1.04) brightness(.05);transition:filter 1.9s ease .25s}
.polaroid.in img{filter:grayscale(1) contrast(1.04) brightness(.98)}
.polaroid .cap{font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  color:var(--paperink);text-align:center;margin-top:13px}
.pp-hint{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);left:0;right:0;
  text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(206,126,151,.6);animation:fade 1.8s ease-in-out infinite}

/* ============================================================
   PERSISTENT TIMER (top-right, unlabeled)
   ============================================================ */
#timer{
  position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;z-index:40;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:rgba(206,126,151,.72);pointer-events:none;
  text-shadow:0 1px 8px rgba(0,0,0,.7)}

/* ============================================================
   MASTHEAD
   ============================================================ */
#masthead{
  position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 30px);z-index:20;
  text-align:center;padding:0 28px;pointer-events:none}
.mast-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rose);margin-bottom:10px}
.mast-title{font-family:var(--serifD);font-style:italic;font-size:33px;line-height:1;
  color:rgba(243,236,238,.94);text-shadow:0 2px 20px rgba(0,0,0,.7)}
.mast-names{margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--mut);display:flex;gap:8px;justify-content:center;align-items:center}
.mast-names i{color:var(--rose);font-style:normal}

/* ============================================================
   STOP CARDS (bottom carousel)
   ============================================================ */
#sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:25;
  padding:0 22px calc(env(safe-area-inset-bottom,0px) + 26px);
  display:flex;justify-content:center;
}
#sheet[hidden]{display:none}
.stopcard{
  width:100%;max-width:340px;
  background:#100B0E;border:1px solid var(--line);border-radius:20px;
  padding:16px 16px 17px;box-shadow:0 24px 60px rgba(0,0,0,.55);
  position:relative;overflow:hidden}
.stopcard .num{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rose);margin-bottom:auto}
.stopcard .cd{font-family:var(--serifD);font-size:30px;color:var(--ink2);
  letter-spacing:.02em;margin-top:12px;line-height:1}
.stopcard .cd-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut2);margin-top:9px}
.stopcard.locked{min-height:150px;display:flex;flex-direction:column}

.stopcard.ready{border-color:rgba(206,126,151,.5);
  background:linear-gradient(180deg,#1a1016,#120b0f);cursor:pointer;
  animation:nowpulse 2.6s ease-in-out infinite}
.stopcard.ready .tapcue{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rose);margin-top:12px;display:flex;
  align-items:center;gap:8px}
.stopcard.ready .tapcue .rp{width:7px;height:7px;border-radius:50%;background:var(--rose);
  animation:blink 1.3s ease-in-out infinite}
.stopcard.ready .cd{font-style:italic;font-size:26px}

.stopcard.done{cursor:pointer;display:flex;gap:13px;align-items:center;min-height:150px}
.stopcard.done .thumb{flex:0 0 74px;height:96px;background:var(--paper);
  padding:4px 4px 14px;transform:rotate(-2deg);box-shadow:0 8px 18px rgba(0,0,0,.5)}
.stopcard.done .thumb img{width:100%;height:74px;object-fit:cover;
  filter:grayscale(1) contrast(1.04) brightness(.98);background:#111;display:block}
.stopcard.done .meta{min-width:0}
.stopcard.done .time{font-family:var(--mono);font-size:12px;color:var(--rose);letter-spacing:.02em}
.stopcard.done .name{font-family:var(--serifD);font-size:21px;color:var(--ink2);
  line-height:1.08;margin:4px 0 5px}
.stopcard.done .pl{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut);margin-bottom:8px}
.stopcard.done .replay{font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut2)}

@keyframes nowpulse{0%,100%{box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(206,126,151,.3),0 0 18px rgba(206,126,151,.28)}
  50%{box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(206,126,151,.55),0 0 30px rgba(206,126,151,.5)}}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}

/* ============================================================
   OVERLAYS (gate / drip / moment)
   ============================================================ */
.overlay{position:fixed;inset:0;z-index:50;background:var(--grad);
  display:flex;flex-direction:column;min-height:var(--vh)}
.overlay[hidden]{display:none}

/* ---- Gates ---- */
#gate{align-items:center;justify-content:center;padding:32px 30px}
.gate-inner{width:100%;max-width:420px;text-align:center;
  animation:rise .7s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.gate-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--rose);margin-bottom:22px}
.gate-q{font-family:var(--serifD);font-size:29px;line-height:1.18;color:var(--ink2);
  margin-bottom:30px;letter-spacing:-.01em}
.gate-q .it{font-style:italic;color:var(--mut)}

.digits{display:flex;gap:14px;justify-content:center;margin-bottom:8px}
.digit{width:60px;height:78px;background:#120C10;border:1px solid var(--line);
  border-radius:14px;font-family:var(--serifD);font-size:40px;color:var(--ink2);
  text-align:center;caret-color:var(--rose);outline:none;
  transition:border-color .2s,box-shadow .2s}
.digit:focus{border-color:var(--rose);box-shadow:0 0 0 3px rgba(206,126,151,.16)}
.digit.filled{border-color:rgba(206,126,151,.4)}

.gate-input{width:100%;background:#120C10;border:1px solid var(--line);border-radius:14px;
  padding:17px 18px;font-family:var(--serif);font-size:20px;color:var(--ink2);
  text-align:center;outline:none;transition:border-color .2s,box-shadow .2s}
.gate-input:focus{border-color:var(--rose);box-shadow:0 0 0 3px rgba(206,126,151,.16)}
.gate-input::placeholder{color:var(--mut2)}

.gate-btns{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.gate-btn{background:#150E13;border:1px solid var(--line);border-radius:14px;
  padding:17px;font-family:var(--serifD);font-size:22px;color:var(--ink2);
  cursor:pointer;transition:border-color .2s,background .2s,transform .1s}
.gate-btn:hover{border-color:rgba(206,126,151,.45)}
.gate-btn:active{transform:scale(.98)}

.gate-go{margin-top:22px;background:var(--rose);color:#1B0810;border:none;border-radius:12px;
  padding:15px 30px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;font-weight:600;transition:opacity .2s,transform .1s}
.gate-go:active{transform:scale(.98)}
.gate-go[disabled]{opacity:.35;pointer-events:none}

.gate-tease{min-height:20px;margin-top:20px;font-style:italic;font-size:16px;
  color:var(--rose);opacity:0;transition:opacity .3s}
.gate-tease.show{opacity:.92}

.shake{animation:wiggle .42s ease}
@keyframes wiggle{0%,100%{transform:translateX(0) rotate(0)}
  20%{transform:translateX(-8px) rotate(-1.4deg)}
  40%{transform:translateX(7px) rotate(1.2deg)}
  60%{transform:translateX(-5px) rotate(-.8deg)}
  80%{transform:translateX(3px) rotate(.5deg)}}

/* ============================================================
   DRIP / THREAD
   ============================================================ */
#drip{padding:0}
.thread{flex:1;overflow-y:auto;padding:70px 20px 24px;display:flex;
  flex-direction:column;gap:9px;scroll-behavior:smooth}
.thread-head{position:fixed;top:0;left:0;right:0;height:58px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(#0A070A,rgba(10,7,10,.0));
  padding-top:env(safe-area-inset-top,0px);
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mut2)}

.tsdiv{align-self:center;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:var(--mut2);margin:14px 0 6px;text-transform:none}

.bubble{max-width:80%;padding:11px 15px;border-radius:20px;font-size:16px;
  line-height:1.42;animation:pop .28s cubic-bezier(.2,.8,.3,1.2) both;
  word-wrap:break-word}
.bubble.him{align-self:flex-end;background:var(--rose);color:#1B0810;
  border-bottom-right-radius:6px}
.bubble.her,.bubble.other{align-self:flex-start;background:#241c22;color:var(--ink);
  border:1px solid var(--line);border-bottom-left-radius:6px}
.sender{align-self:flex-start;font-family:var(--mono);font-size:10px;letter-spacing:.04em;
  color:var(--mut2);margin:8px 0 -3px 6px}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}

/* group-thread variant (stop 4) — understated, dimmer, smaller */
.thread.group .bubble{max-width:72%;font-size:14px;padding:9px 13px;opacity:.82}
.thread.group .bubble.him{background:rgba(206,126,151,.82)}
.thread.group .bubble.her,.thread.group .bubble.other{background:#1e171d}

/* typing indicator */
.typing{align-self:flex-start;background:#241c22;border:1px solid var(--line);
  border-radius:20px;border-bottom-left-radius:6px;padding:13px 16px;display:flex;gap:5px}
.typing.him{align-self:flex-end;background:rgba(206,126,151,.35);border:none}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--mut);display:block;
  animation:tb 1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.16s}
.typing i:nth-child(3){animation-delay:.32s}
@keyframes tb{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-5px);opacity:1}}

/* tap-to-advance cue */
.tapadv{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);
  text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(206,126,151,.7);pointer-events:none;
  animation:fade 1.8s ease-in-out infinite}
@keyframes fade{0%,100%{opacity:.3}50%{opacity:.9}}

/* ---- revealed location card (end of drip) ---- */
.reveal{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 28px;text-align:center;animation:rise .8s cubic-bezier(.2,.7,.3,1) both}
.print{background:var(--paper);padding:11px 11px 34px;transform:rotate(-1.6deg);
  box-shadow:0 22px 50px rgba(0,0,0,.6),0 5px 10px rgba(0,0,0,.4);margin-bottom:26px}
.print img{display:block;width:min(64vw,240px);height:auto;background:#111;
  filter:grayscale(1) contrast(1.04) brightness(.98)}
.print .cap{font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  color:var(--paperink);margin-top:11px;text-align:center}
.reveal .time{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--rose);
  text-transform:uppercase;margin-bottom:9px}
.reveal .name{font-family:var(--serifD);font-size:34px;line-height:1.05;color:var(--ink2);
  margin-bottom:8px}
.reveal .date{font-style:italic;font-size:16px;color:var(--mut);margin-bottom:14px;max-width:300px}
.reveal .addr{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--mut2);
  text-transform:uppercase;margin-bottom:4px}
.reveal .arr{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--mut2);
  text-transform:uppercase}
.reveal .cont{margin-top:30px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(206,126,151,.7);animation:fade 1.8s ease-in-out infinite}
.prelude-line{font-family:var(--serifD);font-style:italic;font-size:30px;line-height:1.3;
  color:var(--ink2);max-width:340px;text-shadow:0 2px 20px rgba(0,0,0,.6)}

/* ============================================================
   HIDDEN 9PM MOMENT
   ============================================================ */
#moment{background:rgba(6,4,6,.0);backdrop-filter:blur(0);align-items:center;
  justify-content:center;padding:34px;transition:background 1.4s ease,backdrop-filter 1.4s ease}
#moment.dim{background:rgba(6,4,6,.94);backdrop-filter:blur(3px)}
.moment-inner{width:100%;max-width:400px;display:flex;flex-direction:column;gap:10px}
.moment-inner .bubble{animation:pop .5s cubic-bezier(.2,.8,.3,1.2) both}
.moment-line{text-align:center;font-family:var(--serifD);font-style:italic;
  font-size:26px;line-height:1.3;color:var(--ink2);margin-top:26px;
  opacity:0;transition:opacity 2s ease}
.moment-line.show{opacity:1}
.moment-tap{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);left:0;right:0;
  text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(206,126,151,.55);opacity:0;transition:opacity 1s ease .8s}
.moment-tap.show{opacity:1;animation:fade 2s ease-in-out infinite}

/* ---- redacted venue name on the reveal card ---- */
.reveal .name .redact{display:inline-block;background:#050409;color:transparent;
  border-radius:2px;padding:1px 14px;line-height:1.12;
  box-shadow:inset 0 0 0 1px rgba(206,126,151,.22),0 6px 22px rgba(0,0,0,.55)}

/* ---- inline redaction inside message bubbles ---- */
.redact-inline{display:inline-block;background:#07050b;color:transparent;
  border-radius:2px;padding:0 .42em;margin:0 .06em;line-height:1.05;
  box-shadow:inset 0 0 0 1px rgba(206,126,151,.3)}

/* ---- sentence-case UI copy (override the mono all-caps) ---- */
.stopcard .num,.stopcard .cd-sub,.stopcard.ready .tapcue,.thread-head,.tapadv,
.pp-hint,.moment-tap,.reveal .time,.reveal .addr,.reveal .arr,.reveal .cont,.gate-go{
  text-transform:none}

/* ---- 9PM: greeting drops in, lights up, bursts into fireworks ---- */
.moment-title{position:relative;z-index:2;font-family:var(--serifD);font-style:italic;
  font-size:34px;line-height:1.12;color:var(--ink2);text-align:center;
  transform:translateY(-16vh) scale(.96);opacity:0;
  transition:transform 1.7s cubic-bezier(.2,.7,.3,1),opacity 1.3s ease,text-shadow 1.2s ease}
.moment-title.drop{transform:translateY(0) scale(1);opacity:1}
.moment-title.glow{text-shadow:0 0 24px rgba(255,255,255,.85),0 0 54px rgba(255,255,255,.5)}
.moment-title.sparked{opacity:.92}
.fw-canvas{position:fixed;inset:0;z-index:1;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  #grain{animation:none}
  .seg{transition:none}
  *{animation-duration:.001ms!important}
}