/* Hero: clouds, a diary flies down, Padhlo appears, then a yellow ticker. Pure CSS. */
.hero.sky{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:86vh;padding:3.5rem 1.25rem 3rem;background:radial-gradient(650px 420px at 78% 8%,#bfe3ff 0%,rgba(191,227,255,0) 60%),linear-gradient(#2f7fe0 0%,#5ba3ee 32%,#9cc9f5 62%,#d9ecfb 100%);overflow:hidden}
.hero.sky>*{position:relative;z-index:2}
.sky>.sky__clouds{position:absolute;inset:0;z-index:auto;overflow:hidden;pointer-events:none}
.cloud{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:calc(var(--w)*.26);background:radial-gradient(circle at 32% 30%,#ffffff,#eaf3ff 70%);border-radius:999px;filter:blur(5px);opacity:var(--o,.85);z-index:1;animation:drift var(--t) ease-in-out infinite alternate}
.cloud::before,.cloud::after{content:"";position:absolute;background:inherit;border-radius:50%}
.cloud::before{width:45%;height:170%;left:14%;top:-75%}
.cloud::after{width:35%;height:135%;right:14%;top:-45%}
.cloud--front{z-index:3;opacity:.95;animation:puff 2s .3s ease-in both}
@keyframes drift{to{transform:translateX(var(--dx,40px))}}
@keyframes puff{to{opacity:0;transform:translateX(120px) scale(1.5)}}
.diary{margin-top:4.5rem;perspective:900px;animation:dfly 1.7s .5s cubic-bezier(.2,.9,.25,1.05) both}
.diary__float{animation:dfloat 5s ease-in-out 2.3s infinite}
.diary__book{position:relative;width:210px;height:290px;margin:0 auto;transform:rotateY(-22deg) rotateX(6deg);transform-style:preserve-3d}
.diary__pages{position:absolute;inset:6px -10px -8px 6px;border-radius:4px 10px 10px 4px;background:#f6efd9 repeating-linear-gradient(90deg,transparent 0 3px,#d9cfae 3px 4px);box-shadow:0 2px 0 #cfc4a0}
.diary__cover{position:absolute;inset:0;border-radius:6px 12px 12px 6px;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.16),transparent 45%),repeating-radial-gradient(circle,rgba(0,0,0,.07) 0 1px,transparent 1px 3px),linear-gradient(135deg,#8a5330,#4a2814);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 6px 0 12px rgba(0,0,0,.45),0 24px 40px rgba(0,0,0,.5)}
.diary__spine{position:absolute;left:0;top:0;bottom:0;width:22px;background:linear-gradient(90deg,#2e170a,#5e3620 60%,#3d2010);border-radius:6px 0 0 6px;box-shadow:inset -2px 0 3px rgba(0,0,0,.4)}
.diary__stitch{position:absolute;inset:12px 12px 12px 34px;border:2px dashed rgba(255,232,170,.6);border-radius:6px}
.diary__plate{position:absolute;left:50%;top:36%;transform:translateX(-50%);padding:.55rem 1.1rem;background:linear-gradient(135deg,#f9d84a,#c99a12);color:#0A1F44;font:900 1.3rem/1 Georgia,serif;letter-spacing:.22em;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.6)}
.diary__band{position:absolute;right:26px;top:-2px;bottom:-2px;width:12px;background:linear-gradient(90deg,#10141f,#2a3040,#10141f);box-shadow:0 0 6px rgba(0,0,0,.5)}
.diary__ribbon{position:absolute;right:52px;bottom:-34px;width:12px;height:44px;background:#c81e1e;clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.diary__shadow{margin:18px auto 0;width:200px;height:22px;border-radius:50%;background:rgba(0,0,0,.55);filter:blur(12px);animation:dshadow 5s ease-in-out 2.3s infinite}
@keyframes dfly{from{transform:translate(-120px,-260px) rotate(-35deg) scale(.45);opacity:0}45%{opacity:1}80%{transform:translate(0,14px) rotate(3deg) scale(1)}to{transform:none;opacity:1}}
@keyframes dfloat{50%{transform:translateY(-10px) rotate(.6deg)}}
@keyframes dshadow{50%{transform:scale(.85);opacity:.7}}
.sky .hero__title{margin:1.6rem 0 .2rem;font-size:clamp(3rem,10vw,5.5rem);color:#fff;text-shadow:0 4px 0 #1a4c92,0 10px 24px rgba(0,0,0,.25);clip-path:inset(-10% 100% -10% 0);animation:tw 1s 2.1s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes tw{to{clip-path:inset(-10% 0 -10% 0)}}
.fu{opacity:0;transform:translateY(14px);animation:fu .7s var(--d,3s) ease-out forwards}
@keyframes fu{to{opacity:1;transform:none}}
.ticker{background:#F5C518;color:#0A1F44;height:38px;overflow:hidden;display:flex;align-items:center;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;transform-origin:left;animation:tick .7s 3.5s cubic-bezier(.2,.8,.2,1) both}
.ticker__track{display:inline-flex;white-space:nowrap;animation:tmove 26s linear infinite}
.ticker__track span{padding:0 1.6rem}
.ticker__track span::after{content:"\2726";margin-left:1.6rem}
@keyframes tick{from{transform:scaleX(0)}}
@keyframes tmove{to{transform:translateX(-50%)}}
@media (max-width:760px){
  .hero.sky{min-height:auto;padding:.9rem 1rem 1.25rem}
  .diary{transform:scale(.5);margin:-3rem 0 -3.2rem}
  .diary__float{animation-delay:2.3s}
  .sky .hero__title{margin:.6rem 0 .1rem;font-size:clamp(2.2rem,13vw,3.2rem)}
  .sky .hero__tagline{font-size:1rem;margin:.25rem 0}
  .sky .hero__desc{font-size:.9rem;margin:.4rem 0}
  .search{margin-top:.6rem}
}
@media (prefers-reduced-motion:reduce){.cloud,.diary,.diary__float,.diary__shadow,.sky .hero__title,.fu,.ticker,.ticker__track{animation:none!important}.sky .hero__title{clip-path:none}.fu{opacity:1;transform:none}.cloud--front{display:none}}

.sun{position:absolute;top:6%;right:9%;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#fff9dd 0%,#ffe9a3 45%,rgba(255,233,163,0) 72%);filter:blur(1px);z-index:1}

.sky .hero__title{cursor:pointer;user-select:none;color:#fff;text-shadow:1px 0 0 #F5C518,-1px 0 0 #F5C518,0 1px 0 #F5C518,0 -1px 0 #F5C518,0 8px 18px rgba(10,31,68,.4)}
.sky .hero__title .letter{display:inline-block;animation:letterbob 2.6s ease-in-out calc(var(--i) * .09s) infinite}
.sky .hero__title:hover .letter{animation-duration:.9s}
.sky .hero__title.poke .letter{animation:letterpoke .55s cubic-bezier(.34,1.6,.5,1) calc(var(--i) * .04s) both}
@keyframes letterbob{50%{transform:translateY(-6px) rotate(-2deg)}}
@keyframes letterpoke{0%{transform:scale(1)}35%{transform:scale(1.35) rotate(-6deg);color:#F5C518}70%{transform:scale(.94) rotate(4deg)}100%{transform:scale(1) rotate(0);color:#fff}}
@media (prefers-reduced-motion:reduce){.sky .hero__title .letter,.sky .hero__title.poke .letter{animation:none}}