/*created by kinjal*/
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes fadeTo7{to{opacity:.7}}
@keyframes fadeTo35{to{opacity:.35}}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
@keyframes up{to{opacity:1;transform:translateY(0)}}
@keyframes settle{to{opacity:1;transform:translateY(0)}}
@keyframes bloom{to{opacity:1;transform:translateY(0) scale(4)}}
@keyframes fadeOut{to{opacity:0}}
@keyframes hazeIn{to{opacity:1}}
@keyframes roofDay{to{fill:#1C3B20}}
@keyframes goldDay{to{fill:#B09A6C}}
@keyframes sunrise{
  0%{opacity:0;transform:translateY(260px) scale(.85);animation-timing-function:cubic-bezier(.4,0,.6,1)}
  22%{opacity:.5;transform:translateY(170px) scale(.95);animation-timing-function:cubic-bezier(.4,0,.6,1)}
  56%{opacity:1;transform:translateY(10px) scale(1.15);animation-timing-function:cubic-bezier(.4,0,.6,1)}
  80%{opacity:.75;transform:translateY(-40px) scale(1.8);animation-timing-function:cubic-bezier(.4,0,.6,1)}
  100%{opacity:0;transform:translateY(-90px) scale(2.5)}
}
:root{--draw:cubic-bezier(.65,0,.35,1);--settle:cubic-bezier(.16,1,.3,1);--light:cubic-bezier(.45,0,.55,1)}
@keyframes vanish{to{opacity:0}}


.o-e .sky-dawn,.o-e .sky-day,.o-e .haze{opacity:0}
.o-e .sun{opacity:0;transform:translateY(260px) scale(.85)}
.o-e .ground-night{opacity:1}
.o-e .hz-full{stroke-dasharray:1200;stroke-dashoffset:1200}
.o-e .hz-l,.o-e .hz-r{opacity:0}
.o-e .roof .plane{opacity:0;transform:translateY(70px)}
.o-e .roof .gable{opacity:0;transform:translateY(46px)}
.o-e .roof .ridge{opacity:0}
.o-e .roof .plane,.o-e .roof .gable{fill:#0B1B0E}
.o-e .roof .ridge{fill:#8C7748}
.o-e .ridge-draw{fill:none;stroke:#8C7748}
.o-e .ridge-draw{stroke-dasharray:266.0;stroke-dashoffset:266.0}
.o-e .key{stroke-dasharray:365.7;stroke-dashoffset:365.7}
.o-e .wordmark,.o-e .desc,.o-e .tagrow,.o-e .welcome{opacity:0;transform:translateY(14px)}
.o-e .roof .plane,.o-e .roof .gable{fill:#1C3B20}
.o-e .roof .ridge{fill:#B09A6C}
.o-e .ridge-draw{stroke:#B09A6C}
/* the rule, the roof plane lands on it, the ridge draws over the peak, the gable, the keyline, the name */
.play.o-e .hz-full{animation:draw .5s var(--draw) .1s forwards, vanish .01s linear .85s forwards}
.play.o-e .hz-l,.play.o-e .hz-r{animation:fade .01s linear .85s forwards}
.play.o-e .roof .plane{animation:settle .55s var(--settle) .35s forwards}
.play.o-e .ridge-draw{animation:draw .45s var(--draw) .85s forwards, vanish .01s linear 1.3s forwards}
.play.o-e .roof .ridge{animation:fade .01s linear 1.3s forwards}
.play.o-e .roof .gable{animation:settle .5s var(--settle) 1.05s forwards}
.play.o-e .key{animation:draw .6s var(--draw) 1.4s forwards}
.play.o-e .wordmark{animation:up .6s var(--settle) 1.45s forwards}
.play.o-e .desc{animation:up .6s var(--settle) 1.6s forwards}
.play.o-e .tagrow{animation:up .6s var(--settle) 1.75s forwards}
.play.o-e .welcome{animation:up .7s var(--settle) 1.95s forwards}

.stage svg.port{display:none}
@media(max-aspect-ratio:1/1){.stage svg.land{display:none}.stage svg.port{display:block}}

#intro .stage{position:absolute;inset:0}
#intro .stage svg{width:100%;height:100%}