/* Wake landing · Round 2 shared layer (on top of wake.css): 10 Poster type + 02 One Day time.
   Rules: a download badge is on screen at every scroll position; no trial or "free" copy anywhere. */

/* ---------- Download dock: fixed top-right, shown whenever no inline badge is visible ---------- */
.dock{position:fixed;top:12px;right:max(12px,calc(var(--gutter) - 8px));z-index:70;padding:7px;border-radius:15px;line-height:0;
  background:color-mix(in srgb,var(--time-paper,#F7F4EF) 72%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--time-ink,#221C1A) 10%,transparent),0 10px 30px rgba(20,14,12,.10);
  transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),visibility 0s linear 0s}
.dock.off{opacity:0;transform:translateY(-12px);visibility:hidden;pointer-events:none;transition:opacity .22s,transform .22s,visibility 0s linear .22s}
.dock .store img{height:44px;width:auto}
@media (max-width:760px){.dock{top:10px;right:10px;padding:6px;border-radius:13px}.dock .store img{height:40px}}

/* official badge, black by day, white by night (both unmodified Apple artwork) */
.store.duo .w{display:none}
html[data-tone=night] .store.duo .b{display:none}
html[data-tone=night] .store.duo .w{display:block}

/* ---------- Swiss utilities ---------- */
html{background:var(--time-paper,#F7F4EF);color:var(--time-ink,#221C1A)}
body{background:transparent;color:inherit}
.lab{font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.mut{color:var(--time-muted,#4F3F39)}
.rule{border:0;border-top:1px solid color-mix(in srgb,var(--time-ink,#221C1A) 22%,transparent);margin:0}
.heavy{font-weight:820;letter-spacing:-.055em;line-height:.92}

/* ---------- Rolling clock (10's counting numerals, driven by 02's scroll time) ---------- */
.rc{display:inline-flex;align-items:flex-start;font-weight:820;letter-spacing:-.04em;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;line-height:1;white-space:nowrap}
.rc .rd{display:inline-block;height:.86em;overflow:hidden}
.rc .rs{display:flex;flex-direction:column;transform:translateY(calc(var(--n,0) * -.86em));transition:transform .6s cubic-bezier(.16,1,.3,1)}
.rc .rs>span{display:block;height:.86em;line-height:.86}
.rc .rd.t{max-width:0;transition:max-width .5s var(--ease-out)}
.rc .rd.t.on{max-width:.72em}
.rc .rcol{display:inline-block;height:.86em;line-height:.86;padding:0 .015em}
.rc .rsuf{display:inline-block;font-size:.2em;font-weight:650;letter-spacing:0;margin:.28em 0 0 .2em;height:1.1em;overflow:hidden}
.rc .rsuf .rs{transform:translateY(calc(var(--n,0) * -1.1em))}
.rc .rsuf .rs>span{height:1.1em;line-height:1.1}

/* ---------- Bird with day, asleep and ringing states ---------- */
.wbird{display:block;color:var(--time-ink,#221C1A)}
.wbird svg{width:100%;height:100%;overflow:visible}
.wbird .cut,.wbird .eye{fill:var(--cut,var(--time-paper,#F7F4EF))}
.wbird .shut{fill:none;stroke:var(--cut,var(--time-paper,#F7F4EF));stroke-width:4.5;stroke-linecap:round;opacity:0}
.wbird .zz{font:600 15px/1 var(--sf);fill:currentColor;opacity:0}
.asleep .wbird .eye{opacity:0}.asleep .wbird .shut{opacity:1}
.asleep .wbird .zz{animation:zz 3.2s ease-in-out infinite}.asleep .wbird .zz.b{animation-delay:1.6s}
@keyframes zz{0%{opacity:0;transform:translate(0,0)}30%{opacity:.85}100%{opacity:0;transform:translate(14px,-26px)}}

/* perched on the phone (02) */
.perch{position:absolute;right:13%;top:0;width:25%;aspect-ratio:1;transform:translateY(-84%);z-index:4;transform-origin:50% 100%}
.ring .perch{animation:hop .75s cubic-bezier(.3,.7,.4,1) 3}
@keyframes hop{0%,100%{transform:translateY(-84%)}40%{transform:translateY(-128%) rotate(-7deg)}70%{transform:translateY(-84%) rotate(2deg)}}
.waves{position:absolute;inset:0;pointer-events:none;z-index:0}
.waves i{position:absolute;left:50%;top:50%;width:120%;aspect-ratio:1;border:1.5px solid var(--time-ink);border-radius:50%;transform:translate(-50%,-50%) scale(.6);opacity:0}
.ring .waves i{animation:wave 2.2s cubic-bezier(.2,.7,.3,1) infinite}
.ring .waves i:nth-child(2){animation-delay:.7s}.ring .waves i:nth-child(3){animation-delay:1.4s}
@keyframes wave{0%{opacity:.28;transform:translate(-50%,-50%) scale(.55)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
.ring .phone{animation:buzz .9s ease-in-out 2}
@keyframes buzz{0%,60%,100%{rotate:0deg}8%{rotate:-2.2deg}16%{rotate:2.2deg}24%{rotate:-1.8deg}32%{rotate:1.6deg}40%{rotate:-1deg}48%{rotate:.6deg}}

/* perched on the wordmark (10) */
.mega{display:block;width:max-content;font-size:26vw;line-height:.74;position:relative;z-index:2;color:var(--time-ink,#221C1A);user-select:none;-webkit-user-select:none}
html.not-apple .mega{letter-spacing:-.032em}
.mega .L{cursor:pointer}
.mega .bl{display:inline-block;width:0;height:0;vertical-align:baseline}
.mega .mbird{position:absolute;left:0;top:0;width:.21em;height:.21em;transform-origin:57.8% 88.3%;cursor:pointer;z-index:4}
.mega .mbird::before,.mega .mbird::after{content:"";position:absolute;left:52%;top:52%;width:240%;aspect-ratio:1;border:2px solid currentColor;border-radius:50%;transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none}
.ring .mega .mbird::before{animation:wave 2s cubic-bezier(.2,.7,.3,1) infinite}
.ring .mega .mbird::after{animation:wave 2s cubic-bezier(.2,.7,.3,1) 1s infinite}

/* ---------- Sky pieces ---------- */
.stars{position:absolute;inset:0 0 30% 0;opacity:var(--stars,0);pointer-events:none}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#F9F3ED;box-shadow:0 0 6px rgba(249,243,237,.6);animation:tw 3.6s ease-in-out infinite}
.stars i.b{width:3px;height:3px}
@keyframes tw{50%{opacity:.2}}
.sundisk{position:absolute;border-radius:50%;background:radial-gradient(circle at 42% 34%,#FBEBD0 0%,#F2D5A6 46%,#E8BCA0 100%);box-shadow:0 0 90px 10px rgba(242,213,166,.45)}
.moondisk{position:absolute;border-radius:50%;-webkit-mask:radial-gradient(ellipse 50% 50% at 74% 32%,transparent 98%,#000 100%);mask:radial-gradient(ellipse 50% 50% at 74% 32%,transparent 98%,#000 100%);background:radial-gradient(circle at 38% 34%,#FBF6EF 0%,#EDE3D8 60%,#D9CCBF 100%);box-shadow:0 0 70px 6px rgba(249,243,237,.16)}

/* ---------- Marquee band (10) ---------- */
.marquee{overflow:hidden;background:var(--time-ink,#221C1A);color:var(--time-paper,#F7F4EF);padding:clamp(14px,2vw,24px) 0}
.marquee .track{display:flex;width:max-content;animation:mq 46s linear infinite}
.marquee .track span{display:inline-flex;align-items:center;gap:.42em;padding-right:.42em;font-size:clamp(30px,4.4vw,68px);font-weight:820;letter-spacing:-.045em;line-height:1;white-space:nowrap}
.marquee .track .bird{width:.72em;height:.72em;display:inline-block;--cut:var(--time-ink,#221C1A)}
.marquee .track .dot{opacity:.45}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- Closing poster (10) ---------- */
.close{padding:clamp(90px,13vw,180px) var(--gutter) clamp(30px,5vw,60px)}
.cstage{position:relative;padding-bottom:clamp(10px,1.4vw,20px);border-bottom:1px solid var(--time-ink,#221C1A)}
.cstage h2{position:relative;z-index:2;margin:0;font-size:clamp(48px,8.8vw,152px);line-height:.9;letter-spacing:-.058em;font-weight:820;max-width:11ch}
.cclip{position:absolute;left:0;right:0;bottom:0;height:260%;overflow:hidden;pointer-events:none;z-index:1}
.csun{position:absolute;right:4%;width:clamp(170px,32vw,500px);aspect-ratio:1;border-radius:50%;bottom:calc(clamp(170px,32vw,500px) * -.34);background:radial-gradient(circle at 42% 34%,#FBEBD0 0%,#F2D5A6 46%,#E8BCA0 100%);box-shadow:0 0 90px 10px rgba(242,213,166,.4);will-change:transform}
.crow{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;padding-top:26px}
.crow p{margin:0;font-size:clamp(17px,1.4vw,20px)}
@media (max-width:760px){.crow{flex-direction:column;align-items:flex-start}}

/* review chip sits bottom-left so it never covers content */
.dir-chip{left:14px;transform:none}
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none}}