/* DUXA LIFE — cinematic homepage. No external fonts, no CDN. */
:root{
  --bg:#05070f;--ink:#eaf2ff;--mut:#93a4c8;--c1:#5ef2ff;--c2:#ff4fd8;--c3:#b6ff5e;
  --glass:rgba(14,20,44,.58);--line:rgba(140,180,255,.2);--r:22px;
  --font:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color-scheme:dark}
body{background:var(--bg);color:var(--ink);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.skip-link{position:absolute;left:-999px;top:8px;z-index:100;background:#fff;color:#000;padding:8px 14px;border-radius:8px}
.skip-link:focus{left:8px}

/* ---------- fixed layers ---------- */
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;background:
  radial-gradient(1200px 700px at 78% 30%,rgba(94,242,255,.12),transparent 60%),
  radial-gradient(900px 600px at 15% 85%,rgba(255,79,216,.12),transparent 60%),var(--bg)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.06;background-image:radial-gradient(#fff .6px,transparent .7px);background-size:3px 3px}
.vig{position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(0,0,0,.6))}
.bar{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:60;background:linear-gradient(90deg,var(--c1),var(--c2),var(--c3));box-shadow:0 0 18px var(--c1)}

/* ---------- header ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:clamp(12px,2vw,28px);padding:16px clamp(16px,3vw,44px);background:linear-gradient(rgba(5,7,15,.85),rgba(5,7,15,0))}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:40px;height:40px;border-radius:12px;box-shadow:0 0 26px rgba(94,242,255,.45)}
.brand strong{display:block;letter-spacing:.22em;font-size:13px;line-height:1.1}
.brand small{display:block;color:var(--mut);font-size:12px}
.nav{display:flex;gap:4px;margin-left:clamp(8px,2vw,32px);flex-wrap:wrap}
.nav a{padding:7px 13px;border-radius:99px;font-size:14px;color:#c9d6f2;border:1px solid transparent;transition:.25s}
.nav a:hover,.nav a:focus-visible{border-color:var(--line);background:rgba(94,242,255,.08);color:#fff;box-shadow:0 0 18px rgba(94,242,255,.18)}
.online{margin-left:auto;display:flex;align-items:center;gap:9px;padding:7px 14px;border-radius:99px;font-size:13px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px)}
.online i,.chip i{width:9px;height:9px;border-radius:50%;background:var(--c3);box-shadow:0 0 0 0 rgba(182,255,94,.7);animation:pulse 1.8s infinite}
.online strong{font-variant-numeric:tabular-nums;color:var(--c3);min-width:1ch}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(182,255,94,0)}100%{box-shadow:0 0 0 0 rgba(182,255,94,0)}}
.menu-btn{display:none}

/* ---------- scene track ---------- */
.hs{position:relative;z-index:5}
.hs-stick{position:relative}
.track{display:block}
.scene{position:relative;min-height:100vh;padding:120px clamp(20px,5vw,90px) 90px;display:flex;align-items:center}
.wrap{position:relative;z-index:2;width:100%;max-width:1180px}
html.h .hs-stick{position:sticky;top:0;height:100vh;overflow:hidden}
html.h .track{display:flex;height:100%;will-change:transform}
html.h .scene{flex:0 0 100vw;height:100vh;min-height:0;padding:110px clamp(40px,6vw,110px) 80px}
html.h .scene.wide{flex-basis:130vw}

/* ---------- typography ---------- */
.eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--c1);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.eyebrow:before{content:"";width:38px;height:1px;background:linear-gradient(90deg,var(--c1),transparent)}
h1{font-weight:800;line-height:.92;letter-spacing:-.045em;font-size:clamp(44px,8.2vw,138px)}
h1 .l1{display:block;color:#fff;text-shadow:0 0 50px rgba(94,242,255,.25)}
h1 .l2{display:block;font-size:.56em;letter-spacing:-.03em;margin-top:.22em;color:#cfe0ff;font-weight:700}
.grad{background:linear-gradient(100deg,var(--c1),var(--c2) 45%,var(--c3) 90%,var(--c1));background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 7s linear infinite}
@keyframes flow{to{background-position:240% 0}}
h2{font-weight:800;letter-spacing:-.035em;line-height:.98;font-size:clamp(34px,5.2vw,84px)}
h3{font-size:clamp(20px,1.7vw,28px);letter-spacing:-.02em;line-height:1.15}
.lead{margin-top:26px;max-width:600px;font-size:clamp(16px,1.35vw,21px);color:#b9c8e8}
p{color:#b9c8e8}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:99px;font-weight:700;font-size:15px;border:1px solid var(--line);background:var(--glass);color:#fff;backdrop-filter:blur(8px);transition:transform .25s,box-shadow .25s,border-color .25s;cursor:pointer}
.btn:hover,.btn:focus-visible{transform:translateY(-3px);border-color:var(--c1);box-shadow:0 10px 40px -8px rgba(94,242,255,.55)}
.btn.primary{background:linear-gradient(110deg,var(--c1),#7a7bff 55%,var(--c2));border:0;color:#04060f;box-shadow:0 10px 36px -10px rgba(122,123,255,.9)}
.btn.primary:hover{box-shadow:0 14px 50px -6px rgba(255,79,216,.7)}
.row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.chip{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:99px;font-size:13px;color:#d7e3ff;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.cue{position:absolute;left:clamp(20px,6vw,110px);bottom:34px;display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--mut)}
.cue b{display:block;width:70px;height:1px;background:linear-gradient(90deg,var(--c1),transparent);animation:cue 2.2s ease-in-out infinite;transform-origin:0 50%}
@keyframes cue{50%{transform:scaleX(.35)}}

/* reveal */
[data-r]{opacity:0;transform:translate3d(0,34px,0);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0)*90ms)}
.near [data-r],.no-js [data-r]{opacity:1;transform:none}
html.h .scene [data-r]{transform:translate3d(60px,0,0)}
html.h .near [data-r]{transform:none}

/* giant outline words */
.bigword{position:absolute;left:0;bottom:2vh;white-space:nowrap;font-weight:900;font-size:clamp(120px,20vw,340px);letter-spacing:-.05em;line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(140,180,255,.18);pointer-events:none;user-select:none;z-index:0}

/* 3D tilt cards */
.tilt{position:relative;transform-style:preserve-3d;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out;will-change:transform}
.tilt:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.16),transparent 55%);opacity:var(--g,0);transition:opacity .3s}
.games{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,40px);margin-top:44px}
.gcard{border-radius:var(--r);overflow:hidden;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(12px);box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.02) inset}
.gcard .art{aspect-ratio:16/9;overflow:hidden;position:relative}
.gcard .art img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform .8s}
.gcard:hover .art img{transform:scale(1.14)}
.gcard .art:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(5,7,15,.9))}
.gcard .body{padding:22px 26px 28px;transform:translateZ(40px)}
.gcard .tag{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--c2)}
.gcard h3{margin:8px 0 8px;font-size:clamp(24px,2.3vw,38px)}
.gcard .btn{margin-top:18px;padding:11px 20px}
.follow{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px 26px;font-size:14px;color:var(--mut)}
.follow a{color:var(--c1);border-bottom:1px solid rgba(94,242,255,.3)}
.follow a:hover{border-color:var(--c1)}

/* play scene */
.play{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,4vw,70px);align-items:center}
.play .shot{position:relative;border-radius:var(--r);padding:10px;background:linear-gradient(140deg,rgba(94,242,255,.5),rgba(255,79,216,.45));box-shadow:0 50px 120px -30px rgba(94,242,255,.35);animation:float 6s ease-in-out infinite}
.play .shot img{border-radius:calc(var(--r) - 8px);width:100%}
@keyframes float{50%{transform:translateY(-14px)}}
.note{margin-top:14px;font-size:13px;color:var(--mut)}

/* portals */
.portals{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,26px);margin-top:46px}
.portal{display:flex;flex-direction:column;gap:14px;padding:30px 28px 26px;min-height:300px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(12px);position:relative;overflow:hidden}
.portal:before{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-90px;border-radius:50%;background:radial-gradient(circle,var(--pc,var(--c1)),transparent 68%);opacity:.35;transition:.5s}
.portal:hover:before{opacity:.7;transform:scale(1.25)}
.portal .ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:26px;transform:translateZ(50px)}
.portal p{flex:1;font-size:15px}
.portal .go{font-weight:700;color:var(--pc,var(--c1))}

/* book */
.bookscene{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,90px);align-items:center}
.stage{perspective:1400px;display:grid;place-items:center;min-height:420px}
.book{position:relative;width:min(260px,60vw);aspect-ratio:240/340;transform-style:preserve-3d;transform:rotateY(var(--by,-26deg)) rotateX(var(--bx,6deg));transition:transform .25s ease-out}
.book img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:4px 10px 10px 4px;box-shadow:0 40px 70px rgba(0,0,0,.65),0 0 60px rgba(255,79,216,.25)}
.book:before{content:"";position:absolute;left:-18px;top:2px;bottom:2px;width:20px;transform-origin:right;transform:rotateY(-90deg);background:linear-gradient(90deg,#1a1f3a,#3b3f73);border-radius:3px 0 0 3px}
.book:after{content:"";position:absolute;inset:6px -14px 6px 10px;z-index:-1;transform:translateZ(-18px);border-radius:6px;background:repeating-linear-gradient(90deg,#e9ecff 0 2px,#b9bfe0 2px 4px)}
.facts{margin-top:14px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}

/* notes + contact */
.notes{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(20px,3vw,50px)}
.posts{display:grid;gap:16px;margin-top:34px}
.post{padding:22px 26px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);transition:.3s}
.post:hover{border-color:var(--c1);transform:translateX(6px)}
.post time{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--c2)}
.post h3{margin:6px 0 6px}
.post p{font-size:14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.links{display:grid;gap:10px;margin-top:34px}
.links a{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03);transition:.25s;font-weight:600}
.links a:hover{background:rgba(94,242,255,.08);border-color:var(--c1);padding-left:28px}
.links b{color:var(--c1)}
.foot{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 26px;font-size:13px;color:var(--mut)}
.foot a:hover{color:#fff}

/* dots */
.dots{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:50;display:none;gap:8px;padding:8px 12px;border-radius:99px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(12px)}
html.h .dots{display:flex}
.dots button{display:flex;align-items:center;gap:8px;height:26px;padding:0 6px;border:0;background:none;color:var(--mut);font:600 11px var(--font);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;border-radius:99px;transition:.25s}
.dots button i{width:8px;height:8px;border-radius:50%;background:#4a5a85;transition:.25s}
.dots button span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .35s}
.dots button.on{color:#fff}
.dots button.on i{background:var(--c1);box-shadow:0 0 12px var(--c1)}
.dots button.on span,.dots button:hover span{max-width:90px}

/* ---------- horizontal mode: size everything by viewport height so scenes never overflow ---------- */
html.h h1{font-size:min(8.2vw,17vh)}
html.h h2{font-size:min(5.2vw,9.5vh)}
html.h .lead{margin-top:2.4vh;font-size:min(1.35vw,2.6vh)}
html.h .row,html.h .chips{margin-top:3.4vh}
html.h .eyebrow{margin-bottom:2vh}
html.h .games{margin-top:3.6vh}
html.h .gcard .art{aspect-ratio:auto;height:30vh}
html.h .gcard .body{padding:1.8vh 24px 2.4vh}
html.h .gcard h3{font-size:min(2.3vw,4.2vh);margin:.6vh 0}
html.h .gcard .btn{margin-top:1.6vh;padding:1.2vh 20px}
html.h .follow{margin-top:2.6vh}
html.h .portals{margin-top:4vh}
html.h .portal{min-height:0;padding:3vh 26px}
html.h .play .shot{max-height:62vh}
html.h .play .shot img{max-height:60vh;object-fit:cover}
html.h .stage{min-height:0}
html.h .book{width:min(260px,36vh*.7*2)}
html.h .posts{margin-top:3vh;gap:1.6vh}
html.h .post{padding:2vh 24px}
html.h .links{margin-top:2.6vh;gap:1.2vh}
html.h .links a{padding:1.5vh 20px}
html.h .foot{margin-top:2.6vh}

/* ---------- responsive / fallback ---------- */
@media (max-width:980px){
  .nav{display:none;position:absolute;top:66px;left:12px;right:12px;flex-direction:column;padding:12px;border-radius:18px;background:rgba(8,12,28,.96);border:1px solid var(--line)}
  .top.open .nav{display:flex}
  .menu-btn{display:inline-flex;margin-left:8px;padding:8px 14px;border-radius:99px;border:1px solid var(--line);background:var(--glass);color:#fff;font:600 13px var(--font)}
  .games,.play,.portals,.bookscene,.notes{grid-template-columns:1fr}
  .scene{padding-top:104px}
  .bigword{display:none}
  .online{padding:6px 10px;font-size:12px}
  .online span{display:none}
  .online:after{content:"online";font-size:12px;color:#c9d6f2}
  .brand small{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-r]{opacity:1;transform:none}
}

.lang-switch{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:99px;background:rgba(255,255,255,.04);margin-left:auto}.lang-switch a,.lang-switch b{padding:6px 11px;border-radius:99px;font-size:.78rem;font-weight:800;letter-spacing:.06em;color:var(--mut)}.lang-switch a:hover{color:#fff;background:rgba(94,242,255,.12)}.lang-switch b{background:linear-gradient(110deg,#5ef2ff,#7a7bff);color:#04060f}.lang-switch+.online{margin-left:0}
@media(max-width:980px){.lang-switch a,.lang-switch b{padding:5px 8px;font-size:.7rem}}

@media (max-width:1320px){.nav a{padding:6px 9px;font-size:13px}.brand small{display:none}.nav{margin-left:8px;flex-wrap:nowrap}.online span{display:none}.online:after{content:'online';font-size:12px;color:#c9d6f2}}
.top{flex-wrap:nowrap}

@media (max-width:1320px){.brand strong,.brand small{display:none}.nav a{white-space:nowrap}.online{padding:6px 10px}.lang-switch{margin-left:auto}}
@media (max-width:1100px) and (min-width:981px){.nav a{padding:5px 6px;font-size:12px}.nav{margin-left:2px}}