/* web/static/diary/heaven.css — the "Heaven opens" sign-in opening (Tom 2026-09-28).
   Loaded by auth/login.html after first_mile.css. The page starts in cloud; a light
   breaks through where the logo sits; the clouds roll back; the Helix T comes down
   out of the light white-hot and cools to gold; TURRI is lit letter by letter; then
   the line, the form and the button settle in (~5 s). After a failed sign-in the
   page carries .ho-quick and skips all of it.
   Spec: docs/superpowers/specs/2026-09-28-heaven-opens-design.md */

/* this page draws its own light (centred on the logo) and runs its own timeline */
.heaven-open .fm-app::before{display:none}
.heaven-open .fm-view > *,.heaven-open .fm-footer{animation:none}

.heaven-open .fm-view{padding-top:calc(28px + env(safe-area-inset-top, 0px))}
.ho-brand{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; margin:14px 0 30px}
.ho-mark{width:96px; height:96px}
.ho-mark svg{display:block; width:96px; height:96px; overflow:visible; filter:drop-shadow(0 0 10px var(--glow))}
.ho-word{font-family:var(--display); font-weight:500; font-size:30px; line-height:1; letter-spacing:.34em;
  margin:14px 0 0 .34em; color:var(--gold-ink); text-shadow:0 0 14px var(--glow)}
.ho-word span{display:inline-block}
.ho-tag{font-family:var(--serif); font-style:italic; font-size:17px; color:var(--ink-dim); margin:8px 0 0}
.ho-error{color:var(--bad); text-align:center}

/* the light the logo comes out of: centred on the logo (28 + 14 + 48 = 90 px down) */
.ho-src{position:fixed; left:50%; top:calc(90px + env(safe-area-inset-top, 0px)); width:560px; height:560px;
  margin:-280px 0 0 -280px; z-index:-2; pointer-events:none; transform:scale(.8)}
.ho-src::before,.ho-src::after{content:""; position:absolute; inset:0; border-radius:50%}
.ho-src::before{inset:-10%;
  background:repeating-conic-gradient(from 0deg,rgba(var(--light-ray),.8) 0deg 2deg,transparent 2deg 9deg);
  -webkit-mask-image:radial-gradient(circle closest-side,#000 4%,rgba(0,0,0,.45) 25%,transparent 62%);
  mask-image:radial-gradient(circle closest-side,#000 4%,rgba(0,0,0,.45) 25%,transparent 62%);
  animation:fm-turn 140s linear infinite}
.ho-src::after{background:radial-gradient(circle,#FFFFFF 0%,#FFFFFF 7%,rgba(var(--light-1),.92) 15%,rgba(var(--light-2),.5) 32%,rgba(var(--light-2),.14) 50%,transparent 66%)}

/* the cloud cover and the opening in it (above the page, never catching taps) */
.ho-sky{position:fixed; inset:0; z-index:5; pointer-events:none; overflow:hidden}
.ho-side{position:absolute; top:-8%; bottom:-8%; width:80%; opacity:0;
  --puff:radial-gradient(closest-side,rgba(var(--cloud),1),rgba(var(--cloud),.9) 50%,rgba(var(--cloud),0))}
.ho-l{left:-10%;
  background:var(--puff) 100% 4%/60% 22% no-repeat, var(--puff) 94% 24%/55% 20% no-repeat,
    var(--puff) 100% 44%/62% 22% no-repeat, var(--puff) 92% 64%/56% 20% no-repeat,
    var(--puff) 100% 84%/60% 22% no-repeat, var(--puff) 95% 100%/55% 20% no-repeat,
    linear-gradient(to right,rgba(var(--cloud),.97) 0%,rgba(var(--cloud),.97) 72%,rgba(var(--cloud),0) 94%)}
.ho-r{right:-10%;
  background:var(--puff) 0% 4%/60% 22% no-repeat, var(--puff) 6% 24%/55% 20% no-repeat,
    var(--puff) 0% 44%/62% 22% no-repeat, var(--puff) 8% 64%/56% 20% no-repeat,
    var(--puff) 0% 84%/60% 22% no-repeat, var(--puff) 5% 100%/55% 20% no-repeat,
    linear-gradient(to left,rgba(var(--cloud),.97) 0%,rgba(var(--cloud),.97) 72%,rgba(var(--cloud),0) 94%)}
.ho-gap{position:absolute; left:50%; top:calc(90px + env(safe-area-inset-top, 0px)); width:320px; height:320px;
  margin:-160px 0 0 -160px; border-radius:50%; opacity:0;
  background:radial-gradient(circle,#FFFFFF 0%,#FFFFFF 12%,rgba(var(--light-1),.85) 30%,rgba(var(--light-2),.3) 52%,transparent 68%)}

/* the timeline */
.heaven-open .ho-l{animation:ho-part-l 4.2s cubic-bezier(.55,.05,.2,1) .8s both}
.heaven-open .ho-r{animation:ho-part-r 4.2s cubic-bezier(.55,.05,.2,1) .8s both}
.heaven-open .ho-gap{animation:ho-gap 3.4s cubic-bezier(.3,.6,.3,1) .4s both}
.heaven-open .ho-src{animation:ho-src 3s ease-out 1s both, ho-breathe 8s ease-in-out 4s infinite}
.heaven-open .ho-mark{animation:ho-logo 2.6s cubic-bezier(.2,.7,.2,1) 1.5s backwards}
.heaven-open .ho-word span{animation:ho-letter 1.8s cubic-bezier(.2,.7,.2,1) calc(2.7s + var(--i) * .2s) backwards}
.heaven-open .ho-tag{animation:fm-settle 1.8s cubic-bezier(.2,.7,.2,1) 3.9s backwards}
.heaven-open .ho-form{animation:fm-settle 1.6s cubic-bezier(.2,.7,.2,1) 4.4s backwards}
.heaven-open .ho-foot{animation:fm-settle 1.6s cubic-bezier(.2,.7,.2,1) 4.8s backwards}
@keyframes ho-part-l{0%{opacity:1; transform:translateX(0)}20%{opacity:1; transform:translateX(-6%)}100%{opacity:0; transform:translateX(-100%)}}
@keyframes ho-part-r{0%{opacity:1; transform:translateX(0)}20%{opacity:1; transform:translateX(6%)}100%{opacity:0; transform:translateX(100%)}}
@keyframes ho-gap{0%{opacity:0; transform:scale(.05,.3)}25%{opacity:1; transform:scale(.4,1)}55%{opacity:1; transform:scale(1.4)}100%{opacity:0; transform:scale(2.2)}}
@keyframes ho-src{0%{opacity:0; transform:scale(.2)}100%{opacity:.85; transform:scale(.8)}}
@keyframes ho-breathe{0%,100%{opacity:.85; transform:scale(.8)}50%{opacity:1; transform:scale(.9)}}
@keyframes ho-logo{0%{opacity:0; transform:translateY(-36px) scale(.45); filter:blur(5px) brightness(7) saturate(0)}25%{opacity:1}100%{opacity:1; transform:none; filter:none}}
@keyframes ho-letter{0%{opacity:0; transform:translateY(-16px); filter:blur(6px) brightness(7) saturate(0); text-shadow:0 0 30px #fff}30%{opacity:1}100%{opacity:1; transform:none; filter:none; text-shadow:0 0 14px var(--glow)}}

/* after a failed sign-in: straight to the form */
.ho-quick *,.ho-quick *::before,.ho-quick *::after{animation:none!important}
.ho-quick .ho-side,.ho-quick .ho-gap{display:none}

@media (prefers-reduced-motion:reduce){
  .ho-side,.ho-gap{display:none}
}