/* Lily's Ledger homepage, desktop. Fonts: Poppins (headings) + Nunito (body). */
.v3{--cream:#FFF8EE; --ink:#1D2340; --ink80:rgba(29,35,64,.8); --blue:#3474B5; --blue-h:#2B67A6; --pink:#B83A82;
  position:relative; background:var(--cream); color:var(--ink); font-family:'Nunito',system-ui,sans-serif; -webkit-font-smoothing:antialiased}
.v3 *,.v3 *::before,.v3 *::after{box-sizing:border-box}
.v3 img{display:block; max-width:none; user-select:none; -webkit-user-drag:none}
.v3 :focus-visible{outline:3px solid #D85DA2; outline-offset:4px; border-radius:12px}

.v3 .scroller{position:relative; width:100%; height:100vh; overflow-y:auto; overflow-x:hidden; scroll-snap-type:y mandatory; scrollbar-width:none}
.v3 .scroller::-webkit-scrollbar{display:none}
.v3 .stage{position:sticky; top:0; width:100%; height:100vh; overflow:hidden; background:var(--cream)}
.v3 .snaps{margin-top:-100vh; pointer-events:none}
.v3 .snap{height:100vh; scroll-snap-align:start; scroll-snap-stop:always}

.v3 .world{position:absolute; left:0; top:0; height:100%; will-change:transform}
.v3 .sky{position:absolute; left:0; top:0; height:100%}
.v3 .tile{position:absolute; top:0; height:100%; background-size:100% 100%; background-repeat:no-repeat}
.v3 .tile.day{background-image:url(https://static.wixstatic.com/media/40168f_1a6834aab369453487af1c7e023e6bc5~mv2.webp)}
.v3 .tile.eve{background-image:url(https://static.wixstatic.com/media/40168f_b2dd9b7ca60a49f78cd83a0b2b42aad8~mv2.webp)}
.v3 .it{position:absolute}
.v3 .sh{position:absolute; border-radius:50%; background:radial-gradient(closest-side, rgba(29,35,64,.18), rgba(29,35,64,.18) 55%, rgba(29,35,64,0))}
.v3 .chalk{position:absolute; display:flex; align-items:center; justify-content:center; font:800 15px/1 'Poppins',sans-serif; color:#FFF6DA; letter-spacing:-.01em}

.v3 .scrim{position:absolute; left:0; top:0; bottom:0; pointer-events:none; z-index:5}

.v3 .hdr{position:absolute; left:0; right:0; top:0; height:100px; z-index:20; display:flex; align-items:center; gap:64px; padding:0 96px}
.v3 .hdr .logo{display:flex; align-items:center; height:72px}
.v3 .hdr .logo img{height:72px; width:auto}
.v3 .menu{display:flex; gap:36px; list-style:none; margin:0; padding:0}
.v3 .menu a{font:600 18px 'Poppins',sans-serif; color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; min-height:44px}
.v3 .menu a:hover{color:var(--blue)}

.v3 .txt{position:absolute; left:96px; width:620px; z-index:10; display:flex; flex-direction:column; gap:22px}
.v3 .txt.off{pointer-events:none}
.v3 .lbl{margin:0; font:600 18px 'Poppins',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--pink)}
.v3 .hl{margin:0; max-width:620px; font:800 84px/1.02 'Poppins',sans-serif; letter-spacing:-.02em; color:var(--ink)}
.v3 .sup{margin:0; max-width:540px; font:400 26px/1.4 'Nunito',sans-serif; color:var(--ink80)}
.v3 .acts{display:flex; align-items:center; gap:28px; margin-top:10px}
.v3 .btn{display:inline-flex; align-items:center; justify-content:center; height:56px; padding:0 30px; border-radius:999px; background:var(--blue);
  color:#fff; font:600 19px 'Poppins',sans-serif; text-decoration:none; white-space:nowrap; box-shadow:0 10px 22px -10px rgba(29,35,64,.55)}
.v3 .btn:hover{background:var(--blue-h); color:#fff}
.v3 .lnk{display:inline-flex; align-items:center; min-height:44px; font:600 19px 'Poppins',sans-serif; color:var(--ink); text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:2px}
.v3 .lnk:hover{color:var(--blue)}

.v3 .hl .ln{white-space:nowrap}
.v3 .pr{position:absolute; z-index:12; pointer-events:none}
.v3 .pr img{display:block; width:100%; height:auto}
.v3 .lily{position:absolute}
@keyframes v4-bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-9px) rotate(6deg)}}
@keyframes v4-flutter{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(3deg) translateY(-6px)}}
@keyframes v4-twinkle{0%,100%{transform:scale(.82) rotate(-8deg); opacity:.75}50%{transform:scale(1.08) rotate(8deg); opacity:1}}
@keyframes v4-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(5deg)}}
@keyframes v4-spin{to{transform:rotate(360deg)}}
@keyframes v4-ring{0%,22%,100%{transform:rotate(0)}3%{transform:rotate(-10deg)}7%{transform:rotate(9deg)}11%{transform:rotate(-7deg)}15%{transform:rotate(5deg)}19%{transform:rotate(-2deg)}}
.v3 .a-bob{animation:v4-bob 4.2s ease-in-out infinite}
.v3 .a-flutter{transform-origin:50% 90%; animation:v4-flutter 3.6s ease-in-out infinite}
.v3 .a-twinkle{animation:v4-twinkle 2.8s ease-in-out infinite}
.v3 .a-float{animation:v4-float 4.6s ease-in-out infinite}
.v3 .a-spin{animation:v4-spin 12s linear infinite}
.v3 .a-ring{transform-origin:50% 85%; animation:v4-ring 2.6s ease-in-out infinite}
.v3 .d1{animation-delay:-1.1s}.v3 .d2{animation-delay:-2.2s}.v3 .d3{animation-delay:-3.1s}
@media (prefers-reduced-motion: reduce){.v3 .pr img{animation:none !important}}

/* About + FAQ section below the street */
.v3 .track{position:relative}
.v3 .foot{position:relative; background:#EAF4FC; color:#14254A; scroll-snap-align:start; padding:120px 96px 0}
.v3 .foot-in{max-width:1248px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); gap:96px; align-items:start}
.v3 .about-col{display:flex; flex-direction:column; gap:24px}
.v3 .faq-col{display:flex; flex-direction:column; gap:24px; scroll-margin-top:48px}
.v3 .f-h{margin:0; font:800 48px/1.08 'Poppins',sans-serif; letter-spacing:-.02em; color:#14254A}
.v3 .f-p{margin:0; font:400 20px/1.6 'Nunito',sans-serif; color:#4A5A78}
.v3 .mv{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:8px}
.v3 .card{padding:28px; border-radius:24px; background:#FFFFFF; box-shadow:0 12px 30px -20px rgba(20,37,74,.3)}
.v3 .card h3{margin:0 0 8px; font:600 20px/1.3 'Poppins',sans-serif; color:var(--ink)}
.v3 .card p{margin:0; font:400 17px/1.55 'Nunito',sans-serif; color:#4A5A78}
.v3 .foot .mv .card:nth-child(1) h3{color:#1F5A96}
.v3 .foot .mv .card:nth-child(2) h3{color:#A8326F}
.v3 .foot .lbl{display:inline-flex; align-items:center; align-self:flex-start; height:32px; padding:0 14px; border-radius:999px; background:#FFFFFF; color:#1F5A96; font:600 13px 'Poppins',sans-serif; letter-spacing:.1em}
.v3 .faq{display:grid; gap:12px}
.v3 .faq details{background:#FFFFFF; border-radius:20px; padding:0 24px; border:0; box-shadow:0 8px 24px -18px rgba(20,37,74,.35)}
.v3 .faq summary{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px; cursor:pointer; list-style:none; font:600 18px/1.35 'Poppins',sans-serif; color:#14254A}
.v3 .faq summary::-webkit-details-marker{display:none}
.v3 .faq summary::after{content:"+"; flex:none; width:32px; height:32px; border-radius:50%; background:#EAF4FC; color:#1F5A96; display:flex; align-items:center; justify-content:center; font:600 20px/1 'Poppins',sans-serif}
.v3 .faq details[open] summary::after{content:"\2212"}
.v3 .faq .ans{display:grid; gap:12px; padding:0 0 22px}
.v3 .faq .ans p{margin:0; font:400 17px/1.6 'Nunito',sans-serif; color:#4A5A78}
.v3 .fbar{max-width:1248px; margin:96px auto 0; padding:32px 0 48px; border-top:1px solid rgba(20,37,74,.1); display:flex; flex-wrap:wrap; align-items:center; gap:16px 40px; font:400 15px 'Nunito',sans-serif; color:#4A5A78}
.v3 .fbar img{height:56px; width:auto}
.v3 .fbar .motto{font:italic 600 16px 'Poppins',sans-serif; color:#A8326F}
.v3 .fbar ul{display:flex; flex-wrap:wrap; gap:8px 28px; list-style:none; margin:0 0 0 auto; padding:0}
.v3 .fbar a{font:600 16px 'Poppins',sans-serif; color:#14254A; text-decoration:none}
.v3 .fbar a:hover{color:#1F5A96}
.v3 .fbar .copy{flex-basis:100%}

/* Intro: zooming into Harmonyville from behind the bushes */
.v3 .snap-q{height:25vh; scroll-snap-align:start; scroll-snap-stop:normal}
.v3 .intro{position:absolute; inset:0; z-index:15; overflow:hidden; background:#6EBCFB; pointer-events:none}
.v3 .intro .pl{position:absolute; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 80px); mask-image:linear-gradient(to bottom, transparent 0, #000 80px)}
.v3 .intro .pl img{position:absolute; inset:0; width:100%; height:100%}
.v3 .intro .i-sign,.v3 .intro .i-fol{position:absolute; display:block}
.v3 .intro .i-logo{position:absolute; left:50%; top:84px; height:168px; width:auto; transform:translateX(-50%)}
.v3 .intro .i-hint{position:absolute; left:0; right:0; bottom:28px; display:flex; flex-direction:column; align-items:center; gap:4px; font:600 15px 'Poppins',sans-serif; letter-spacing:.14em; color:#FFF6DA; text-shadow:0 1px 10px rgba(3,27,30,.85)}
.v3 .intro .i-hint svg{filter:drop-shadow(0 1px 6px rgba(3,27,30,.8)); animation:v8-nudge 1.6s ease-in-out infinite}
@keyframes v8-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion: reduce){.v3 .intro .i-hint svg{animation:none}}

/* Enter screen with sound choice + music toggle */
.v3.locked .scroller{overflow:hidden}
.v3 .gate{position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center; background:rgba(14,32,58,.5); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.v3 .gate-in{display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; padding:0 24px}
.v3 .gate-in img{height:150px; width:auto; margin-bottom:8px}
.v3 .gate-in h2{margin:0; font:800 48px/1.05 'Poppins',sans-serif; letter-spacing:-.02em; color:#FFFFFF}
.v3 .gate-in p{margin:0; font:400 20px/1.5 'Nunito',sans-serif; color:rgba(255,255,255,.9)}
.v3 .gate-acts{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:12px}
.v3 .enter{display:inline-flex; align-items:center; gap:12px; height:60px; padding:0 34px; border:0; border-radius:999px; background:#F7C04D; color:#1D2340; font:600 19px 'Poppins',sans-serif; cursor:pointer; box-shadow:0 12px 28px -12px rgba(0,0,0,.55)}
.v3 .enter:hover{background:#FFD066}
.v3 .quiet{min-height:44px; padding:0 12px; border:0; background:none; color:#FFFFFF; font:600 16px 'Poppins',sans-serif; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px; cursor:pointer}
.v3 .snd{position:fixed; right:28px; bottom:84px; z-index:45; width:56px; height:56px; border:0; border-radius:50%; background:rgba(255,255,255,.94); color:#1D2340; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 10px 26px -12px rgba(20,37,74,.65)}
.v3 .snd:hover{background:#FFFFFF}
.v3 .bars{display:flex; align-items:flex-end; gap:3px; height:20px}
.v3 .bars i{display:block; width:4px; height:5px; border-radius:2px; background:#3474B5}
.v3 .snd.on .bars i{animation:v12-eq 1s ease-in-out infinite}
.v3 .snd.on .bars i:nth-child(2){animation-delay:-.35s}
.v3 .snd.on .bars i:nth-child(3){animation-delay:-.7s}
.v3 .snd.on .bars i:nth-child(4){animation-delay:-.15s}
@keyframes v12-eq{0%,100%{height:5px}50%{height:20px}}
@media (prefers-reduced-motion: reduce){.v3 .snd.on .bars i{animation:none; height:14px}}