/* 16.10.2026: the way in (mockup approved by Ioana):  the mascot walks up to the glass, knocks three times, asks for the music */
.gate{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 100%,rgba(237,30,70,.28),rgba(14,30,39,.94) 60%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));overflow:hidden}
.gate[hidden]{display:none}
.gate.is-leaving{animation:gate-out .55s ease-in forwards}
@keyframes gate-out{to{opacity:0;visibility:hidden}}
.gate__stage{position:relative;width:min(100%,980px);height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
.gate__m{grid-column:2;grid-row:1;justify-self:center;width:auto;height:min(74vh,600px);max-width:100%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));transform-origin:50% 100%;
  animation:m-in 1s cubic-bezier(.2,.9,.25,1.15) both,m-knock .4s 1.1s ease-in-out 3,m-idle 2.6s 2.4s ease-in-out infinite}
@keyframes m-in{from{transform:translate(30vw,40vh) scale(.55) rotate(14deg);opacity:0}to{transform:none;opacity:1}}
@keyframes m-knock{0%,100%{transform:none}45%{transform:translateY(-2%) scale(1.07) rotate(-2deg)}}
@keyframes m-idle{0%,100%{transform:none}50%{transform:translateY(-1.5%) rotate(1deg)}}

@keyframes shake{0%,100%{transform:none}50%{transform:translate(3px,-2px)}}
/* the knock lands where the raised fist meets the glass */
.gate__hit{position:absolute;right:calc(25% - min(74vh,600px) * .30);top:calc(100% - min(74vh,600px) * .72);width:120px;height:120px;transform:translate(50%,-50%);pointer-events:none}
.gate__ring{position:absolute;inset:0;border:3px solid rgba(255,255,255,.85);border-radius:50%;opacity:0;animation:ring .5s ease-out both}
.gate__ring.r1{animation-delay:1.28s}.gate__ring.r2{animation-delay:1.68s}.gate__ring.r3{animation-delay:2.08s}
@keyframes ring{from{transform:scale(.2);opacity:.95}to{transform:scale(1.6);opacity:0}}
.gate__crack{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.6;stroke-linecap:round;opacity:0;animation:crack .3s 2.1s ease-out forwards}
@keyframes crack{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.gate__toc{position:absolute;font:400 clamp(28px,4vw,46px)/1 "Bebas Neue",Impact,sans-serif;letter-spacing:.06em;color:#FFD86B;text-shadow:0 0 12px rgba(255,216,107,.6),3px 3px 0 #EC1E46;opacity:0;pointer-events:none;animation:toc .7s ease-out both}
.gate__toc.t1{right:6%;top:18%;animation-delay:1.28s}.gate__toc.t2{right:14%;top:10%;animation-delay:1.68s}.gate__toc.t3{right:3%;top:6%;animation-delay:2.08s;color:#fff}
@keyframes toc{0%{opacity:0;transform:scale(.4) rotate(-12deg)}30%{opacity:1;transform:scale(1.15) rotate(-6deg)}100%{opacity:0;transform:translateY(-30px) scale(1)}}
.gate__bubble{grid-column:1;grid-row:1;align-self:center;justify-self:end;margin-right:-12px;position:relative;background:#FAF6E8;color:#1C3947;border-radius:22px;padding:22px 24px 20px;width:min(100%,340px);display:grid;gap:10px;box-shadow:0 24px 50px rgba(0,0,0,.45);opacity:0;animation:bubble .5s 2.45s cubic-bezier(.2,.9,.25,1.3) forwards}
.gate__bubble::after{content:"";position:absolute;right:-14px;bottom:34px;border:14px solid transparent;border-left-color:#FAF6E8;border-right:0}
@keyframes bubble{from{opacity:0;transform:scale(.6) translateY(20px)}to{opacity:1;transform:none}}
.gate__q{margin:0;font:400 clamp(38px,5vw,54px)/.95 "Bebas Neue",Impact,sans-serif;letter-spacing:.02em}
.gate__sub{margin:0;font-size:14px;color:#3E5B68}
.gate__go{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border:0;border-radius:999px;background:#EC1E46;color:#fff;font:800 16px/1 "Archivo",sans-serif;font-stretch:80%;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 20px rgba(236,30,70,.4);animation:pulse 1.8s 3s ease-in-out infinite}
.gate__go svg{width:18px;height:18px;fill:currentColor}
@keyframes pulse{0%,100%{box-shadow:0 8px 20px rgba(236,30,70,.4),0 0 0 0 rgba(236,30,70,.5)}50%{box-shadow:0 8px 20px rgba(236,30,70,.4),0 0 0 12px rgba(236,30,70,0)}}
.gate__quiet{min-height:44px;border:0;background:none;color:#3E5B68;font:700 14px/1 "Archivo",sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.gate__go:focus-visible,.gate__quiet:focus-visible{outline:3px solid #29F3FF;outline-offset:3px}
@media (max-width:700px){
  .gate__stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:end}
  .gate__m{grid-column:1;grid-row:2;height:min(52vh,420px)}
  .gate__bubble{grid-column:1;grid-row:1;justify-self:center;margin:0;margin-top:max(24px,env(safe-area-inset-top,0px))}
  .gate__bubble::after{right:auto;left:50%;bottom:-14px;transform:translateX(-50%);border:14px solid transparent;border-top-color:#FAF6E8;border-bottom:0}
  .gate__hit{right:30%;top:calc(100% - min(52vh,420px) * .72)}
  .gate__toc.t1{right:8%;top:auto;bottom:52%}.gate__toc.t2{right:16%;top:auto;bottom:58%}.gate__toc.t3{right:4%;top:auto;bottom:63%}
}
@media (prefers-reduced-motion:reduce){.gate *,.gate__stage{animation:none!important;opacity:1}.gate__ring,.gate__toc,.gate__crack{display:none}}

/* the Kling clip: green keyed out in the browser (WebGL), so it works the same on iPhone */
.gate__mv{grid-column:2;grid-row:1;justify-self:center;position:relative;height:min(84vh,760px);aspect-ratio:9/16;max-width:100%}
.gate__cv{display:block;width:100%;height:100%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.gate__vid{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.gate__mv .gate__m{position:absolute;inset:auto 0 0;margin:auto;height:80%;width:auto;animation:m-in 1s cubic-bezier(.2,.9,.25,1.15) both}
.gate__mv .gate__hit{left:30%;top:33%;right:auto;transform:translate(-50%,-50%)}
.gate__mv .gate__ring{animation:none}
.gate__mv .gate__ring.go{animation:ring .5s ease-out both}
.gate__mv .gate__crack{animation:none}
.gate__mv .gate__crack.go{animation:crack .3s ease-out forwards}
.gate__mv .gate__toc{left:2%;top:8%;animation:none}
.gate__mv .gate__toc.go{animation:toc .7s ease-out both}
.gate__bubble{animation:none}
.gate__bubble.go{animation:bubble .5s cubic-bezier(.2,.9,.25,1.3) forwards}
.gate__stage.shake-now{animation:shake .25s 1}
/* The sides of the clip fade in the shader (js/gate.js, edges()). The shadow is shorter, so it is not cut by the
   bottom of the screen (19.10.2026). */
.gate__cv{filter:drop-shadow(0 14px 18px rgba(0,0,0,.5))}
@media (max-width:700px){.gate__mv{grid-column:1;grid-row:2;height:min(62vh,560px);justify-self:end;margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)))}}
@media (prefers-reduced-motion:reduce){.gate__bubble{opacity:1}}
html.gate-open{overflow:hidden}