/* Silo's V16.1 age gate — same opening, more life. Works for the public site (.age) and the member app (.gate16). */
.gate161{overflow:hidden!important;isolation:isolate}
.gate161>*:not(.ageScene){position:relative;z-index:2}
.gate161.gate16>article{position:relative;z-index:2}
.ageScene{position:absolute!important;inset:0;z-index:0!important;pointer-events:none;overflow:hidden;background:#070706}
.ageScene img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;object-position:72% 50%;opacity:0;transform:scale(1.12);animation:gateScene 2.4s cubic-bezier(.2,.7,.2,1) .15s forwards,gateDrift 26s ease-in-out 2.6s infinite alternate}
.ageScene .veil{position:absolute;inset:0;background:linear-gradient(90deg,#070706 0%,#070706f2 30%,#0b0706b3 52%,#1a0c0e33 100%),radial-gradient(120% 90% at 50% 120%,#070706 20%,transparent 60%)}
.ageScene .flicker{position:absolute;right:18%;top:28%;width:46vw;height:46vw;max-width:720px;max-height:720px;border-radius:50%;background:radial-gradient(circle,#d5a84f40 0,#761f2b22 38%,transparent 70%);mix-blend-mode:screen;animation:gateFlicker 4.2s ease-in-out infinite;filter:blur(8px)}
.ageScene .embers i{position:absolute;bottom:-10px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:#f0cf86;box-shadow:0 0 10px 2px #d5a84f99;opacity:0;animation:gateEmber var(--d) linear var(--delay) infinite}
@keyframes gateScene{to{opacity:1;transform:scale(1.02)}}
@keyframes gateDrift{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.08) translate3d(-1.5%,-1%,0)}}
@keyframes gateFlicker{0%,100%{opacity:.75;transform:scale(1)}18%{opacity:.95}22%{opacity:.7}45%{opacity:1;transform:scale(1.05)}70%{opacity:.8}}
@keyframes gateEmber{0%{transform:translate3d(0,0,0);opacity:0}10%{opacity:.9}70%{opacity:.5}100%{transform:translate3d(30px,-95vh,0);opacity:0}}
/* Staggered entrance */
.gate161>img,.gate161>p,.gate161>h2,.gate161>span,.gate161>form,.gate161>.ageProgress,.gate161>small,.gate161 article>*{opacity:0;transform:translateY(22px);animation:gateRise .9s cubic-bezier(.2,.8,.2,1) forwards}
.gate161>img,.gate161 article>img{animation-name:gateLogo;animation-duration:1.3s;animation-delay:.25s}
.gate161>p,.gate161 article>p.k{animation-delay:.55s}
.gate161>h2,.gate161 article>h2{animation-delay:.7s}
.gate161>span,.gate161 article>small:first-of-type{animation-delay:.9s}
.gate161>form,.gate161 article>form{animation-delay:1.05s}
.gate161>.ageProgress,.gate161 article>.ageProgress{animation-delay:1.15s}
.gate161>small,.gate161 article>small:last-of-type,.gate161 article>.err{animation-delay:1.25s}
.gate161 article>.err{opacity:1;transform:none;animation:none}
@keyframes gateRise{to{opacity:1;transform:none}}
@keyframes gateLogo{0%{opacity:0;transform:translateY(10px) scale(.86);filter:drop-shadow(0 0 0 #d5a84f00)}60%{opacity:1;filter:drop-shadow(0 0 26px #d5a84fcc)}100%{opacity:1;transform:none;filter:drop-shadow(0 0 10px #d5a84f55)}}
.gate161 h2 em{background:linear-gradient(100deg,#d5a84f 20%,#fff1c9 42%,#d5a84f 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent!important;animation:gateShine 5s ease-in-out 1.6s infinite}
@keyframes gateShine{0%{background-position:100% 0}35%,100%{background-position:-60% 0}}
/* One date, three parts */
.gate161 form{display:flex!important;flex-wrap:wrap;align-items:stretch!important;gap:14px!important;grid-template-columns:none!important}
.ageDate{display:flex;align-items:center;gap:4px;padding:6px 10px;border:1px solid #d5a84f88;background:#0b0907b3;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:2px;transition:border-color .3s,box-shadow .3s}
.gate16 .ageDate{border-radius:14px;width:100%;justify-content:center}
.gate161.typing .ageDate,.ageDate:focus-within{border-color:#d5a84f;box-shadow:0 0 0 1px #d5a84f55,0 0 36px #d5a84f2e}
.ageCell{position:relative;display:block}
.ageCell:after{content:attr(data-l);position:absolute;left:0;right:0;bottom:4px;text-align:center;font:600 8px/1 'DM Sans',sans-serif;letter-spacing:.22em;color:#d5a84f99;pointer-events:none}
.gate161 .ageCell input{width:74px!important;height:68px;padding:0 0 12px!important;margin:0;border:0!important;background:transparent!important;color:#f6eddf!important;text-align:center;font-family:'Italiana',serif!important;font-size:34px!important;letter-spacing:.06em;outline:none;caret-color:#d5a84f;border-radius:0!important;box-shadow:none!important}
.gate161 .ageCell input#yyyy{width:118px!important}
.gate161 .ageCell input::placeholder{color:#f6eddf38}
.gate161 .ageCell input:focus{color:#fff}
.gate161 .ageCell input.filled{color:#f0cf86!important}
.ageCell:has(input:focus):before{content:'';position:absolute;left:14px;right:14px;bottom:18px;height:1px;background:#d5a84f;animation:gateLine .35s ease forwards;transform-origin:left}
@keyframes gateLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ageSep{font-family:'Italiana',serif;font-weight:400;font-size:30px;color:#d5a84f66;padding-bottom:12px}
.gate161 form button{position:relative;overflow:hidden;min-height:82px;padding:0 30px!important;flex:0 0 auto}
.gate16.gate161 form button{width:100%;min-height:58px}
.gate161 form button:after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff70 50%,transparent 70%);transform:translateX(-120%);animation:gateBtn 3.6s ease-in-out 2s infinite}
@keyframes gateBtn{0%{transform:translateX(-120%)}40%,100%{transform:translateX(120%)}}
.ageProgress{height:1px;width:min(560px,100%);background:#d5a84f26;margin:2px 0 18px;overflow:hidden}
.ageProgress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#761f2b,#d5a84f,#fff1c9);transition:width .35s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 12px #d5a84f}
.gate161.shake .ageDate{animation:gateShake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes gateShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
/* Opening: gate fades, a seam of gold light, cellar doors part */
.gate161.opening>*:not(.ageScene),.gate161.opening article{transition:opacity .35s,transform .35s;opacity:0!important;transform:translateY(-10px)!important}
.ageDoors{position:fixed;inset:0;z-index:100001;pointer-events:none}
.ageDoors i{position:absolute;top:0;bottom:0;width:50.5%;background:linear-gradient(90deg,#120a08,#2a1112 60%,#3a1518);box-shadow:inset 0 0 120px #000}
.ageDoors i.l{left:0;background:linear-gradient(270deg,#3a1518,#1a0c0e 40%,#0b0706);border-right:1px solid #d5a84f55}
.ageDoors i.r{right:0;background:linear-gradient(90deg,#3a1518,#1a0c0e 40%,#0b0706);border-left:1px solid #d5a84f55}
.ageDoors i:before{content:'';position:absolute;inset:7vh 6vw;border:1px solid #d5a84f22}
.ageDoors .seam{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:linear-gradient(180deg,transparent,#fff1c9 30%,#d5a84f 50%,#fff1c9 70%,transparent);box-shadow:0 0 30px 8px #d5a84f88;opacity:0;transform:scaleY(0)}
.ageDoors .welcome{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-family:'Italiana',serif;font-size:clamp(34px,5vw,64px);color:#f6eddf;letter-spacing:.04em;opacity:0;text-shadow:0 0 30px #d5a84f88}
.ageDoors i{opacity:0}
.ageDoors.go i{animation:doorIn .3s ease forwards,var(--door) 1s cubic-bezier(.7,0,.2,1) .85s forwards}
.ageDoors.go i.l{--door:doorL}.ageDoors.go i.r{--door:doorR}
.ageDoors.go .seam{animation:seam .55s cubic-bezier(.2,.8,.2,1) .3s forwards,seamOut .4s ease 1s forwards}
.ageDoors.go .welcome{animation:welcome 1.1s ease .35s forwards}
@keyframes doorIn{to{opacity:1}}
@keyframes doorL{from{opacity:1;transform:translateX(0)}to{opacity:1;transform:translateX(-102%)}}
@keyframes doorR{from{opacity:1;transform:translateX(0)}to{opacity:1;transform:translateX(102%)}}
@keyframes seam{to{opacity:1;transform:scaleY(1)}}
@keyframes seamOut{to{opacity:0;width:40vw;margin-left:-20vw;filter:blur(30px)}}
@keyframes welcome{0%{opacity:0;letter-spacing:.3em}40%{opacity:1;letter-spacing:.06em}75%{opacity:1}100%{opacity:0}}
@media(max-width:640px){
  .ageScene img{object-position:78% 50%}
  .ageScene .veil{background:linear-gradient(180deg,#070706e6 0%,#070706b3 35%,#070706d9 60%,#070706 100%)}
  .gate161 form{width:100%}.ageDate{width:100%;justify-content:space-between;padding:4px 6px}
  .ageScene .veil{background:linear-gradient(180deg,#070706cc 0%,#0707068c 30%,#070706cc 58%,#070706 100%)}
  .gate161 .ageCell input{width:64px!important;font-size:30px!important}
  .gate161 .ageCell input#yyyy{width:104px!important}
  .gate161 form button{width:100%;min-height:62px}
}
@media(prefers-reduced-motion:reduce){.gate161 *,.ageScene *{animation:none!important;transition:none!important}.gate161>*,.gate161 article>*{opacity:1!important;transform:none!important}.ageScene img{opacity:1;transform:none}}