/* iKAUF – Eingang: zwei Welten treffen sich im Zeichen */
:root{--night:#0C2B28;--deep:#071D1B;--paper:#F7F6F1;--gold:#B8862B;--teal:#5FB3A8;
 --display:"Marcellus","Lora",Georgia,serif;
 --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Liberation Sans",Arial,sans-serif}
@font-face{font-family:"Lora";src:url("../fonts/Lora-Variable.ttf") format("truetype");font-weight:400 700;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body.gate-body{margin:0;background:var(--deep);color:var(--paper);font:400 1rem/1.5 var(--body);overflow:hidden}
.gate{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto auto;align-items:center;
 padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}

/* --- the two worlds --- */
.worlds{position:absolute;inset:0;overflow:hidden}
.world{position:absolute;top:0;height:100%;width:62%;object-fit:cover;filter:saturate(.95)}
.world-tech{left:0;object-position:left center;
 -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 46%,transparent 78%);
 mask-image:linear-gradient(90deg,#000 0%,#000 46%,transparent 78%)}
.world-markt{right:0;object-position:right center;
 -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 46%,transparent 78%);
 mask-image:linear-gradient(270deg,#000 0%,#000 46%,transparent 78%)}
.shade{position:absolute;inset:0;background:
 radial-gradient(38% 55% at 50% 48%,rgba(7,29,27,.92) 0%,rgba(7,29,27,.72) 45%,rgba(7,29,27,.25) 100%),
 linear-gradient(180deg,rgba(7,29,27,.55) 0%,rgba(7,29,27,.12) 35%,rgba(7,29,27,.55) 75%,rgba(7,29,27,.95) 100%)}
.core-glow{position:absolute;left:50%;top:48%;width:min(70vw,52rem);aspect-ratio:1;transform:translate(-50%,-50%);
 background:radial-gradient(circle,rgba(95,179,168,.16) 0%,rgba(184,134,43,.10) 35%,transparent 68%);
 animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.96)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}

/* energy drifting inward from both sides */
.flow{position:absolute;top:0;height:100%;width:50%;pointer-events:none;mix-blend-mode:screen;opacity:.5}
.flow-left{left:0;background:linear-gradient(90deg,transparent 0%,rgba(95,179,168,.00) 35%,rgba(95,179,168,.22) 70%,rgba(95,179,168,.00) 100%);
 animation:drift-r 11s ease-in-out infinite}
.flow-right{right:0;background:linear-gradient(270deg,transparent 0%,rgba(216,166,72,.00) 35%,rgba(216,166,72,.20) 70%,rgba(216,166,72,.00) 100%);
 animation:drift-l 14s ease-in-out infinite}
@keyframes drift-r{0%{transform:translateX(-14%);opacity:.15}50%{transform:translateX(6%);opacity:.5}100%{transform:translateX(-14%);opacity:.15}}
@keyframes drift-l{0%{transform:translateX(14%);opacity:.15}50%{transform:translateX(-6%);opacity:.45}100%{transform:translateX(14%);opacity:.15}}

/* --- the sign in the middle --- */
/* stage */
.stage{position:relative;display:flex;align-items:center;justify-content:center;padding:2rem}
.side{position:absolute;bottom:clamp(4.5rem,8vh,6rem);font-size:.68rem;letter-spacing:.38em;color:rgba(247,246,241,.55);margin:0;white-space:nowrap;text-shadow:0 2px 14px rgba(0,0,0,.75)}
.side-l{left:clamp(1.25rem,5vw,3rem)}
.side-r{right:clamp(1.25rem,5vw,3rem)}
@media (max-width:760px){.side{bottom:auto;top:clamp(1.5rem,5vh,3rem);font-size:.6rem;letter-spacing:.3em}}
.mark{position:relative;width:min(42vw,215px);flex:none}
.mark-img{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 40px rgba(0,0,0,.55))}
.dot-btn{position:absolute;left:50%;top:67%;transform:translate(-50%,-50%);appearance:none;border:0;background:none;padding:1.5rem;cursor:pointer}
.dot{display:block;width:clamp(18px,12.6vw,24px);aspect-ratio:1;border-radius:50%;background:var(--gold);position:relative;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.dot::before,.dot::after{content:"";position:absolute;inset:-16px;border-radius:50%;border:1px solid var(--gold);opacity:.4;animation:ring 3.6s ease-out infinite}
.dot::after{animation-delay:1.8s}
@keyframes ring{0%{transform:scale(.7);opacity:.5}100%{transform:scale(2.3);opacity:0}}
.dot-btn:hover .dot,.dot-btn:focus-visible .dot{transform:scale(1.45)}
.dot-btn:focus-visible{outline:2px solid var(--paper);outline-offset:6px;border-radius:50%}
.dot-btn.go .dot{transform:scale(120);transition:transform 1s cubic-bezier(.7,0,.2,1)}

/* --- words --- */
.words{position:relative;text-align:center;padding:0 1.5rem 1rem}
.brandline{font-family:var(--body);font-weight:500;letter-spacing:.34em;font-size:clamp(.85rem,1.5vw,1.05rem);color:var(--gold);margin:0 0 1.2rem}
.hint{font-size:.7rem;letter-spacing:.24em;color:rgba(247,246,241,.5);margin:0 0 .8rem}
.enter-link{display:inline-block;font-size:.72rem;letter-spacing:.24em;color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(247,246,241,.35);padding-bottom:.25rem}
.enter-link:hover{border-color:var(--gold)}

.gate-foot{position:relative;display:flex;flex-wrap:wrap;gap:.5rem 2rem;justify-content:space-between;
 padding:1.5rem clamp(1rem,4vw,3rem);font-size:.78rem;color:rgba(247,246,241,.45)}
.gate-foot a{color:rgba(247,246,241,.7);text-decoration:none;margin-left:1.5rem}
.gate-foot a:hover{color:var(--paper)}
@media (max-width:640px){.gate-foot{justify-content:center;text-align:center}.gate-foot a{margin:0 .75rem}}

@media (prefers-reduced-motion:reduce){
 .core-glow,.flow,.dot::before,.dot::after{animation:none}
 .dot-btn.go .dot{transform:none}
}