/* Dad Said… shared extras: the 3D scene, day slider, translator, stickers. Used by the day, translator and home pages. */
.mono-l{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sec-head{margin:0 0 22px}
.sec-head h1,.sec-head h2{font-size:clamp(44px,6.4vw,92px);line-height:.94;letter-spacing:-.025em;margin:10px 0 0}
.sec-head h1 em,.sec-head h2 em,.giant em{font-style:italic;color:var(--accent)}
.sec-head p{color:var(--muted);margin:14px 0 0;max-width:620px;font-size:19px}
.burst{position:fixed;z-index:120;pointer-events:none;font-size:24px;animation:burst 1.05s ease-out forwards}
@keyframes burst{0%{transform:translate(0,0) rotate(0) scale(.4);opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1.2);opacity:0}}
.scene{position:relative;height:min(88vh,800px);min-height:580px;border-radius:40px;overflow:hidden;border:1px solid var(--ink);background:radial-gradient(120% 95% at 72% 38%,#fcefd6,#f2d7a9 58%,#e8c18c);box-shadow:8px 8px 0 var(--ink);transition:background .6s}
.scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.scene.no-gl canvas{display:none}
.fl{position:absolute;z-index:7;pointer-events:none;font-family:var(--serif);font-style:italic;font-size:30px;color:var(--ink);animation:fl 2.4s ease-out forwards}
.fl.note{color:var(--accent);font-style:normal}
@keyframes fl{0%{transform:translate(-50%,0) scale(.6);opacity:0}15%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),-110px) scale(1.5);opacity:0}}
@keyframes flash{0%,60%{box-shadow:0 0 0 4px var(--sun)}100%{box-shadow:0 0 0 0 transparent}}

/* ===== A DAY IN DAD'S LIFE (time slider) ===== */
.dayfold{margin-top:72px}
.dayfold .sec-head{margin-bottom:18px}
.day-track{position:relative}
.day-sticky{position:relative;height:min(90vh,820px);min-height:600px;margin:0 10px}
.scene.dayscene{position:absolute;inset:0;height:auto;min-height:0;background:linear-gradient(var(--sky1,#86bff0),var(--sky2,#fbe2b6));transition:none}
html[data-theme=night] .scene.dayscene{background:linear-gradient(var(--sky1,#86bff0),var(--sky2,#fbe2b6))}
.scene.dayscene:after{display:none}
.day-ui{position:absolute;inset:0;z-index:6;pointer-events:none}
.clockbig{position:absolute;right:clamp(84px,9vw,130px);top:clamp(14px,2.4vw,34px);font-family:var(--serif);font-size:clamp(64px,9vw,148px);line-height:1;color:#fff;mix-blend-mode:difference;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.clockbig small{font-family:var(--mono);font-size:.14em;letter-spacing:.1em;margin-left:.5em;vertical-align:.2em}
.chapters{position:absolute;left:clamp(22px,4vw,56px);bottom:clamp(22px,4vw,44px);width:min(450px,calc(100% - 44px));display:grid}
.chap{grid-area:1/1;align-self:end;background:#fffaf0;color:#16130e;border:2px solid #16130e;border-radius:28px;padding:20px 24px 22px;box-shadow:6px 6px 0 #16130e;opacity:0;transform:translateY(24px) scale(.98);pointer-events:none;transition:opacity .45s ease,transform .45s cubic-bezier(.2,1.2,.4,1)}
.chap.on{opacity:1;transform:none;pointer-events:auto}
.chap .mono-l{color:#8a5a34}
.chap h3{font-size:clamp(32px,3.6vw,48px);line-height:.98;letter-spacing:-.02em;margin:6px 0 8px}
.chap h3 em{font-style:italic;color:#e8431f}
.chap .narr{font-size:16px;line-height:1.5;color:#4a4236;margin:0 0 12px}
.chap-joke{border-top:1px dashed #16130e55;padding-top:12px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.chap .cq{font-family:var(--serif);font-size:24px;line-height:1.1;margin:0}
.chap .ca{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.1;color:#e8431f;margin:0}
.chap .copy{color:#16130e;box-shadow:inset 0 0 0 2px #16130e;background:var(--sun)}
.chap-quote{margin:12px 0 0;font-size:14px;color:#6a5f4d;font-style:italic}
/* the slider: vertical on the right edge (desktop), horizontal under the scene on phones */
.timeslider{position:absolute;right:clamp(18px,2.6vw,36px);top:clamp(150px,22vw,230px);bottom:96px;width:64px;pointer-events:auto;cursor:grab;touch-action:none;outline-offset:6px}
.timeslider:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:8px;margin-left:-4px;border-radius:8px;background:#fffaf0cc;border:2px solid #16130e}
.timeslider.drag{cursor:grabbing}
.ts-tick{position:absolute;right:0;top:calc(var(--p) * 100%);width:100%;height:0;border:0;background:none;padding:0;cursor:pointer}
.ts-tick i{position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#16130e;border:2px solid #fffaf0}
.ts-tick span{position:absolute;right:calc(50% + 16px);top:-10px;background:#16130e;color:#f5eddc;font:600 11px/1 var(--mono);letter-spacing:.04em;padding:5px 8px;border-radius:99px;white-space:nowrap;opacity:.8;transition:opacity .2s}
.ts-tick:hover span,.ts-tick.on span{opacity:1}
.ts-tick.on span{background:var(--sun);color:#16130e}
.ts-thumb{position:absolute;left:50%;top:calc(var(--p, 0) * 100%);width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fffaf0;border:3px solid #16130e;box-shadow:0 4px 0 #16130e;display:grid;place-items:center;font-size:26px;pointer-events:none}
.dayplay{position:absolute;right:clamp(18px,2.6vw,36px);bottom:28px;pointer-events:auto;border:2px solid #16130e;background:#fffaf0;color:#16130e;border-radius:99px;padding:10px 18px;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 3px 0 #16130e}
.dayplay:hover{background:var(--sun)}
.day-hint{position:absolute;right:clamp(18px,2.6vw,36px);top:clamp(136px,19vw,200px);margin:0;transform:translateY(-100%);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#fff;mix-blend-mode:difference;transition:opacity .4s;max-width:150px;text-align:right}
.day-hint.gone{opacity:0}
@media(max-width:900px){
  .day-sticky{height:auto;min-height:0;display:flex;flex-direction:column;gap:12px}
  .scene.dayscene{position:relative;height:46vh;min-height:300px;flex:none}
  .day-ui{position:static;pointer-events:auto;display:flex;flex-direction:column;gap:12px}
  .clockbig{position:absolute;top:calc(46vh - 74px);right:14px;font-size:clamp(40px,12vw,64px);z-index:7;pointer-events:none}
  .day-sticky{position:relative}
  .timeslider{position:relative;right:auto;top:auto;bottom:auto;width:auto;height:64px;margin:4px 22px 0;order:2}
  .timeslider:before{left:0;right:0;top:50%;bottom:auto;width:auto;height:8px;margin:-4px 0 0}
  .ts-tick{top:0;right:auto;left:calc(var(--p) * 100%);width:0;height:100%}
  .ts-tick i{left:-6px;top:50%;margin:-6px 0 0}
  .ts-tick span{right:auto;left:50%;top:auto;bottom:-2px;transform:translateX(-50%);font-size:9px;padding:3px 5px;background:none;color:var(--ink);opacity:.8}
  .ts-tick.on span{background:var(--sun);color:#16130e}
  .ts-thumb{left:calc(var(--p, 0) * 100%);top:50%;margin:-26px 0 0 -26px}
  .chapters{position:relative;left:auto;bottom:auto;width:auto;order:3}
  .chap{padding:16px 18px 18px;border-radius:24px}
  .chap h3{font-size:30px}.chap .narr{font-size:14px;margin-bottom:8px}.chap .cq,.chap .ca{font-size:21px}
  .dayplay{position:absolute;left:14px;right:auto;top:calc(46vh - 56px);bottom:auto;padding:8px 14px;font-size:13px}
  .day-hint{display:none}
}


/* ===== STICKERS ===== */
.st-hide{cursor:pointer;font-style:normal;font-size:22px;display:inline-block;padding:0 8px;transition:transform .2s}
.st-hide:hover{transform:scale(1.4) rotate(-12deg)}
.st-btn{position:fixed;left:14px;bottom:14px;z-index:85;display:inline-flex;align-items:center;gap:6px;border:2px solid #16130e;background:#fffaf0;color:#16130e;border-radius:99px;padding:8px 14px;font:700 15px/1 var(--sans);cursor:pointer;box-shadow:0 3px 0 #16130e;transition:transform .15s}
.st-btn:hover{transform:translateY(-2px);background:var(--sun)}
.st-btn b{font-family:var(--mono);font-size:14px}.st-of{font-family:var(--mono);font-size:12px;opacity:.6}
.st-btn.full{background:var(--sun)}
.st-wiggle{animation:wig .7s}
@keyframes wig{0%,100%{transform:rotate(0) scale(1)}20%{transform:rotate(-12deg) scale(1.25)}40%{transform:rotate(10deg) scale(1.2)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}
.st-fly{position:fixed;z-index:300;pointer-events:none;width:110px;height:110px;border-radius:50%;background:#fffaf0;border:4px solid #16130e;box-shadow:0 6px 0 #16130e;display:grid;place-items:center;font-size:62px}
.st-nudge{position:fixed;left:14px;bottom:62px;z-index:84;background:#16130e;color:#f5eddc;font:600 13px/1.3 var(--mono);padding:9px 14px;border-radius:14px 14px 14px 2px;animation:pop .4s cubic-bezier(.2,1.6,.4,1);max-width:230px}
dialog.stickerbook{border:1px solid var(--ink);border-radius:30px;padding:0;width:min(860px,94vw);max-height:90vh;background:var(--surface);color:var(--ink);box-shadow:10px 10px 0 var(--ink)}
dialog.stickerbook::backdrop{background:#12100dcc;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sb-in{padding:24px 26px 20px}
.sb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sb-head h2{font-size:clamp(38px,5vw,60px);line-height:.95;margin-top:6px}
.sb-sub{color:var(--muted);margin:10px 0 18px}.sb-sub b{color:var(--ink)}
.sb-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.slot{border:2px dashed var(--line);border-radius:20px;padding:14px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--bg)}
.slot .se{font-size:44px;line-height:1.1;filter:grayscale(1);opacity:.4;font-family:var(--serif)}
.slot b{font-size:14px;line-height:1.2}
.slot small{font-size:12px;line-height:1.35;color:var(--muted)}
.slot.on{border:2px solid #16130e;background:var(--sun);color:#16130e;rotate:var(--r);box-shadow:0 3px 0 #16130e}
.slot.on .se{filter:none;opacity:1}.slot.on small{color:#4a4236}
.sb-cert{margin-top:22px;border-top:1px dashed var(--line);padding-top:18px}
.sb-cert h3{font-size:34px}.sb-cert p{color:var(--muted);margin:6px 0 12px}
.sb-row{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.sb-row input{flex:1;min-width:180px;border:1px solid var(--line);border-radius:99px;background:var(--bg);padding:12px 18px;font-size:17px}
#st-cv{width:100%;height:auto;border:2px solid #16130e;border-radius:12px;margin-top:8px}
.sb-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;font-size:13px;color:var(--muted)}
@media(max-width:760px){.sb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.st-btn{bottom:12px}}
.sb-row[hidden],#st-cv[hidden]{display:none}


/* TRANSLATOR */
.translator{padding-top:72px}
.xl{--p:0;position:relative;border:1px solid var(--ink);border-radius:36px;overflow:hidden;background:var(--surface);min-height:340px;box-shadow:8px 8px 0 var(--ink)}
.xl-layer{padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;justify-content:center}
.xl-said{position:relative;min-height:340px}
.xl-meant{position:absolute;inset:0}
.xl-layer p{margin:0;font-family:var(--serif);line-height:1;letter-spacing:-.02em}
.xl-said p{font-size:clamp(36px,5.2vw,80px)}
.xl-meant{background:var(--accent);color:#16130e;clip-path:inset(0 calc((1 - var(--p)) * 100%) 0 0)}
.xl-meant p{font-size:clamp(26px,3.4vw,50px);line-height:1.08;letter-spacing:-.01em;max-width:18em}
.xl-tag{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;opacity:.7}
.xl-handle{position:absolute;top:0;bottom:0;left:calc(var(--p) * 100%);width:3px;background:#16130e;transform:translateX(-1.5px);pointer-events:none}
.xl-handle:after{content:"⇆";position:absolute;top:50%;left:50%;width:54px;height:54px;border-radius:50%;background:#16130e;color:var(--sun);display:grid;place-items:center;font-size:24px;transform:translate(-50%,-50%);box-shadow:0 6px 20px #0006}
.xl-ctl{display:flex;align-items:center;gap:16px;margin-top:22px;flex-wrap:wrap}
#lever{-webkit-appearance:none;appearance:none;flex:1;min-width:200px;height:14px;border-radius:99px;background:linear-gradient(90deg,var(--accent) calc(var(--p) * 100%),var(--line) 0);outline-offset:6px;cursor:grab;--p:0}
#lever::-webkit-slider-thumb{-webkit-appearance:none;width:42px;height:42px;border-radius:50%;background:var(--ink);border:4px solid var(--sun);cursor:grab}
#lever::-moz-range-thumb{width:34px;height:34px;border-radius:50%;background:var(--ink);border:4px solid var(--sun);cursor:grab}
.xl-lab{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}


@media(max-width:620px){.xl{min-height:420px}}
.xl-page{margin-top:22px}