/* Home page only. Loaded after site.css. */

/* first screen: the title page fills the screen, and Hannah flies in */
.home .page{min-height:100vh;min-height:100svh}
.home .sheet h1{font-size:clamp(44px,6.6vw,96px);line-height:1.02;letter-spacing:-.02em}
.home .sheet .sub{margin-top:16px;max-width:31em;font-size:clamp(17px,1.35vw,19.5px)}
.mo .home .sheet > .sub,.home.mo .sheet > .sub{animation-delay:1.25s}
.bird{width:clamp(220px,27vh,320px);aspect-ratio:1;margin:-6px 0 -14px;position:relative}
.bird{-webkit-mask-image:radial-gradient(closest-side,#000 64%,transparent 100%);mask-image:radial-gradient(closest-side,#000 64%,transparent 100%)}
.bird video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bird .land{transition:opacity .3s}.bird .loop{opacity:0;transition:opacity .3s}.bird.landed .loop{opacity:1}.bird.landed .land{opacity:0}
/* phone: the first screen spreads into the height it has; spare space goes above the kicker and below the button */
@media (max-width:700px){
  .home .sheet{padding-bottom:26px}
  .home .sheet > .kicker{margin-top:auto;padding-top:clamp(14px,3svh,30px)}
  .home .sheet h1{font-size:clamp(38px,11vw,46px);margin-top:clamp(12px,2svh,20px)}
  .home .sheet .sub{font-size:16.5px;line-height:1.6;margin-top:clamp(14px,2.4svh,22px)}
  .bird{width:min(240px,27svh);margin:clamp(14px,2.6svh,26px) 0 clamp(6px,1.2svh,12px)}
  .home .sheet .orn{margin:clamp(16px,2.6svh,24px) 0 clamp(18px,3svh,28px)}
  .home .sheet > .cta{flex-direction:column;gap:12px;margin-bottom:auto;padding-bottom:clamp(8px,2svh,24px)}
  .home .sheet > .cta .who{font-size:14.5px}
}

/* second screen: a Book of Hours. One phone in an arched window; the day moves through it */
.hours{min-height:100vh;min-height:100svh;justify-content:center;padding:clamp(40px,6vh,72px) var(--gutter);display:flex;flex-direction:column;align-items:center;text-align:center}
.hours h2{margin-top:14px;font-size:clamp(34px,3.8vw,54px)}
.explain{margin:14px auto 0;max-width:44em;font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.6;color:var(--muted)}
.book{margin-top:clamp(22px,4vh,44px);display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,4vw,64px);align-items:center;width:100%;max-width:1100px}
.col{display:flex;flex-direction:column;gap:clamp(40px,8vh,96px)}
.col.l{text-align:right;align-items:flex-end}.col.r{text-align:left;align-items:flex-start}
.hour{text-align:inherit;background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;gap:6px;font:inherit;color:inherit;max-width:17em;opacity:.45;transition:opacity .4s}
.col.l .hour{align-items:flex-end}.hour.on{opacity:1}
.hour .tm{font:600 11.5px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px}
.col.l .hour .tm::after,.col.r .hour .tm::before{content:"";width:28px;height:1px;background:var(--accent);opacity:.5;transition:width .4s}
.hour.on .tm::after,.hour.on .tm::before{width:56px}
.hour .nm{font-family:var(--display);font-size:clamp(22px,2vw,28px);line-height:1.15;color:var(--ink)}
.hour .ds{font-size:15.5px;line-height:1.45;color:var(--muted)}
.window{position:relative;width:min(290px,24vw,31vh);padding:min(60px,6.5vh) 28px 26px;border-radius:999px 999px 18px 18px;background:radial-gradient(ellipse 80% 55% at 50% 22%,#FBEFE9,var(--rose) 70%);border:1px solid #DCC0B8;box-shadow:inset 0 0 0 8px var(--cream),inset 0 0 0 9px #DCC0B8,0 30px 60px -30px rgba(122,46,59,.35)}
.window::before{content:"";position:absolute;top:min(30px,3.4vh);left:50%;translate:-50% 0;width:9px;height:9px;background:var(--accent);transform:rotate(45deg);opacity:.6}
.phone{container-type:inline-size;width:100%;aspect-ratio:9/19.5;border-radius:40px;background:#1d1214;padding:8px;box-shadow:0 26px 50px rgba(43,26,30,.22),0 4px 12px rgba(43,26,30,.14);position:relative;text-align:left}
.phone .scr{position:absolute;inset:8px;border-radius:32px;overflow:hidden;display:flex;flex-direction:column;gap:4cqw;padding:17cqw 6cqw 6cqw;opacity:0;transition:opacity .6s ease}
.phone .scr.on{opacity:1}
.phone .notch{position:absolute;top:6.5cqw;left:50%;translate:-50% 0;width:32%;height:21px;border-radius:12px;background:#1d1214;z-index:2}
.phone .day{background:var(--cream);color:var(--ink)}.phone .night{background:var(--night);color:var(--night-ink)}
.phone .t{font-size:3.6cqw;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}.phone .night .t{color:var(--candle)}
.phone .big{font-family:var(--display);font-size:8cqw;line-height:1.15}
.phone .sm{font-size:4.6cqw;line-height:1.4;color:var(--muted)}.phone .night .sm{color:var(--night-muted)}
.phone .vc{background:var(--rose);border-radius:12px;padding:4.2cqw;display:flex;flex-direction:column;gap:5px}
.phone .vc .v{font-family:var(--display);font-size:5.6cqw;line-height:1.3}.phone .vc .r{font-size:4cqw;letter-spacing:.06em;color:var(--accent)}
.phone .art{width:74%;align-self:center;margin-top:auto;aspect-ratio:1;object-fit:cover;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
.phone .pill{border-radius:999px;padding:3cqw;text-align:center;font-weight:600;font-size:4.6cqw}
.phone .pill.b{background:var(--accent);color:var(--cream)}.phone .pill.g{background:var(--candle);color:var(--ink)}
.phone .me{align-self:flex-end;max-width:84%;background:var(--night);color:var(--night-ink);border-radius:14px 14px 4px 14px;padding:3cqw 3.8cqw;font-size:4.6cqw;line-height:1.35}
.phone .hb{background:var(--card);border:1px solid var(--line);border-radius:4px 14px 14px 14px;padding:3cqw 3.8cqw;font-size:4.6cqw;line-height:1.4;display:flex;flex-direction:column;gap:7px}
.phone .kept{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:3.8cqw 4.4cqw;display:flex;flex-direction:column;gap:6px}
.phone .kept .lab{font-size:3.6cqw;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:400}
.phone .kept .row{display:flex;justify-content:space-between;font-size:4.6cqw;gap:3cqw}.phone .kept .row span:last-child{color:var(--accent);font-size:4.2cqw;flex:none}
.phone .kept .row.mine{border-top:1px dashed var(--line);padding-top:2.4cqw;font-family:var(--display);font-style:italic;font-size:5.4cqw}
.phone .reply{display:grid}.phone .reply>*{grid-area:1/1}
.phone .typing{display:none;align-self:start;justify-self:start;background:var(--card);border:1px solid var(--line);border-radius:4px 14px 14px 14px;padding:3.6cqw 4.2cqw;gap:1.6cqw}
.phone .typing i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:var(--muted);animation:dot 1s ease-in-out infinite}
.phone .typing i:nth-child(2){animation-delay:.15s}.phone .typing i:nth-child(3){animation-delay:.3s}
.dots,.cap{display:none}
.hours .cta-row{margin-top:clamp(26px,4vh,40px)}
@media (max-width:860px){
  .hours{padding-top:28px;justify-content:flex-start}.hours h2{font-size:32px}
  .explain{font-size:16px;margin-top:12px}
  .book{grid-template-columns:1fr;gap:16px;justify-items:center;margin-top:18px}
  .col{display:none}
  .window{width:min(252px,66vw);padding:44px 16px 16px}
  .phone{aspect-ratio:9/17.5}
  .dots{display:flex;gap:8px;justify-content:center}
  .dots button{width:9px;height:9px;border-radius:50%;border:1px solid var(--accent);background:none;padding:0;cursor:pointer}
  .dots button.on{background:var(--accent)}
  .cap{display:flex;flex-direction:column;gap:6px;align-items:center;min-height:6.5em;max-width:22em}
  .cap .tm{font:600 11.5px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
  .cap .nm{font-family:var(--display);font-size:22px;line-height:1.2}
  .cap .ds{font-size:15px;line-height:1.45;color:var(--muted)}
}

/* third screen: the day turns to night as she scrolls */
.dusk{--top:#F6EFEA;--bot:#F6EFEA;position:relative;height:280vh;background:linear-gradient(var(--top),var(--bot))}
.dusk-stick{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2.4vh,26px);overflow:hidden;padding:24px 18px;text-align:center}
.dusk .lines{position:relative;width:min(1000px,100%);height:clamp(170px,22vh,210px)}
.dusk .line{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;transition:opacity .5s ease,transform .5s ease}
.dusk .line .k{font:600 12px/1 var(--body);letter-spacing:.26em;text-transform:uppercase;display:flex;align-items:center;gap:14px}
.dusk .line .k::before,.dusk .line .k::after{content:"";width:38px;height:1px;background:currentColor;opacity:.45}
.dusk .line h2{font-size:clamp(30px,3.3vw,48px);line-height:1.1;max-width:20em}
.dusk .line h2 em{display:block}
.dusk .dl-day{color:var(--ink)}.dusk .dl-day .k{color:var(--accent)}
.dusk .dl-night{color:var(--night-ink);opacity:0;transform:translateY(14px)}.dusk .dl-night .k{color:var(--candle)}.dusk .dl-night h2 em{color:var(--night-em)}
.dusk.is-night .dl-day{opacity:0;transform:translateY(-14px)}.dusk.is-night .dl-night{opacity:1;transform:none}
/* the still painting sits behind the clip, so Hannah shows even where a phone will not draw the video (iPhones until a clip has played) */
.dusk .dv{position:relative;width:min(560px,58vh,88vw);aspect-ratio:1;background:url(../video/hannah-dusk-poster.webp) center/cover no-repeat;-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);mask-image:radial-gradient(closest-side,#000 72%,transparent 100%)}
.dusk.is-night .dv{background-image:url(../video/hannah-dusk-night.webp)}
.dusk video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dusk video.scrub{opacity:0}.dusk video.scrub.drawn{opacity:1}
.dusk .nightloop{opacity:0;transition:opacity .4s}
.dusk .dv.loop-on .nightloop{opacity:1}
.dusk .scrub{transition:opacity 0s}.dusk .dv.loop-on .scrub.drawn{opacity:0;transition:opacity 0s .45s}
.dusk .hint{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);opacity:.7;transition:opacity .4s}
.dusk.started .hint{opacity:0}
.dusk .get{position:absolute;bottom:clamp(28px,6vh,64px);left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;transform:translateY(16px);transition:opacity .6s ease .15s,transform .6s ease .15s;pointer-events:none}
.dusk.is-night .get{opacity:1;transform:none;pointer-events:auto}
.dusk .get .who{font-size:14px;color:var(--night-muted)}
@media (max-width:700px){.dusk .line .k::before,.dusk .line .k::after{width:18px}.dusk .lines{height:178px}.dusk .line h2{font-size:30px}}
/* less motion: no scroll scene, just the night */
@media (prefers-reduced-motion:reduce){
  .dusk{height:auto;background:var(--night)}
  .dusk-stick{position:static;height:auto;padding-block:72px}
  .dusk .dl-day,.dusk .hint{display:none}
  .dusk .lines{height:auto}.dusk .dl-night{position:static;opacity:1;transform:none}
  .dusk .get{position:static;opacity:1;transform:none;pointer-events:auto}
}

/* Verse First: the verse before her apps */
.verse-first{padding-top:0}
.verse-first .split{max-width:980px}
.verse-first .window{justify-self:center}
@media (max-width:860px){.verse-first .split{gap:36px}.verse-first .prose{text-align:center;align-items:center}.verse-first .kicker.left{justify-content:center}.verse-first .kicker.left::before{display:block}}

/* praying Scripture, your people, your lamp */
.pair2{margin-top:clamp(36px,6vh,60px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,40px);width:100%;max-width:1000px}
@media (max-width:860px){.pair2{grid-template-columns:1fr}}
.lamp{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.lamp div{display:flex;justify-content:space-between;gap:12px;font-size:15.5px;border-top:1px solid var(--line);padding-top:8px}
.lamp div span:first-child{display:flex;align-items:center;gap:12px}
.lamp div span:last-child{color:var(--accent);text-align:right}
.fl{width:9px;height:9px;border-radius:0 50% 50% 50%;transform:rotate(45deg);background:var(--accent);flex:none}
.lamp .r1 .fl{opacity:.28}.lamp .r2 .fl{opacity:.65}.lamp .r3 .fl{box-shadow:0 0 10px 3px rgba(122,46,59,.22)}
.note{display:flex;gap:10px;align-items:flex-start;margin-top:4px}
.note img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.note p{background:var(--cream);border:1px solid var(--line);border-radius:4px 14px 14px 14px;padding:10px 14px;color:var(--ink);font-size:15.5px}
.night-band .more{margin-top:34px;font-size:15.5px}

/* MOTION, home only (see site.css for the rest) */
@keyframes step{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes dot{0%,60%,100%{transform:none;opacity:.35}30%{transform:translateY(-1.2cqw);opacity:.85}}
@keyframes typing{0%{opacity:0}12%,85%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* the phone plays like the app: each screen plays in when it is shown */
.mo .phone .scr .st{opacity:0}
.mo .phone .scr.play .st{animation:step .55s cubic-bezier(.2,.7,.2,1) var(--at,0s) both}
.mo .phone .scr.play .typing{display:flex;animation:typing 1.3s ease .85s both}
.mo .phone .scr .row.mine span:first-child{clip-path:inset(0 100% 0 0)}
.mo .phone .scr.play .row.mine span:first-child{animation:write 1s ease-in-out 1.75s both}
/* Marie's note arrives */
.mo .note{opacity:0;transform:translateY(18px);transition:opacity .7s ease .4s,transform .7s cubic-bezier(.2,.7,.2,1) .4s}
.mo .note.in{opacity:1;transform:none}
.mo .note.in img{animation:ring 1.4s ease-out 1.1s 2}
/* the lamp lights row by row */
.mo .lamp div{opacity:.3;transition:opacity .7s ease}
.mo .lamp .fl{transform:rotate(45deg) scale(.2);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.mo .lamp .r2,.mo .lamp .r2 .fl{transition-delay:.6s}.mo .lamp .r3,.mo .lamp .r3 .fl{transition-delay:1.2s}
.mo .lamp.in div{opacity:1}.mo .lamp.in .fl{transform:rotate(45deg)}
.mo .lamp.in .r3 .fl{animation:breathe 3.2s ease-in-out 2s infinite}
/* short phones (most phones with the browser bars showing): keep the spacing open, drop the ornament, button and note side by side */
@media (max-width:700px) and (max-height:760px){
  .home .sheet{padding-top:20px;padding-bottom:18px}
  .home .sheet > .kicker{padding-top:10px}
  .home .sheet h1{font-size:clamp(36px,9.6vw,40px);margin-top:12px}
  .home .sheet .sub{font-size:16px;margin-top:14px}
  .bird{width:min(200px,21svh);margin:12px 0 8px}
  .home .sheet .orn{display:none}
  .home .sheet > .verse{margin-bottom:18px}
  .home .sheet > .cta{flex-direction:row;gap:14px;padding-bottom:4px}
}
.words h2 em{display:block}
.words .body em{font-family:var(--display);font-size:1.1em;color:var(--ink)}