*{box-sizing:border-box}html,body{margin:0;background:#06090b;color:#fff;font-family:Arial,sans-serif}body{min-height:100svh}header{position:absolute;top:0;left:0;width:100%;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:25px 42px;background:linear-gradient(#0009,transparent)}header img{width:115px}header>span{font-size:10px;letter-spacing:5px;color:#efe3c7}button{background:#0004;border:1px solid #ffffff40;color:#fff;padding:10px 15px;cursor:pointer}main{display:flex;height:100svh;min-height:660px;overflow:hidden;direction:ltr}.world{position:relative;flex:1;min-width:0;display:grid;place-items:center;isolation:isolate;transition:flex 1.2s cubic-bezier(.22,.7,.18,1);overflow:hidden}.world+.world{border-left:1px solid #e0c48365}.world:hover,.world:focus-within{flex:1.3}.art,.shade{position:absolute;inset:0;z-index:-2}.art{background-size:cover;background-position:center;transform:scale(1.025);transition:transform 2s ease,filter 1.2s;filter:saturate(.85)}.classic .art{background-image:url('bg__dragon.jpg');background-position:46% center}.next .art{background-image:url('background.png');background-position:60% center}.shade{z-index:-1;background:linear-gradient(0deg,#02070ceb,transparent 38%,#0002 70%,#02070c80),linear-gradient(90deg,#0003,#0005,#0003)}.world:hover .art,.world:focus-within .art{transform:scale(1.08);filter:saturate(1.15)}.content{text-align:center;width:min(92%,520px);padding:32px 30px 28px;border-radius:14px;background:linear-gradient(180deg,#00000055,#00000088);border:1px solid #ffffff22;box-shadow:0 12px 40px #00000090;text-shadow:0 2px 18px #000;transform:translateY(24px);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.classic .content{background:linear-gradient(180deg,#3a240a59,#1c110666);border-color:#e8b64c33;box-shadow:0 8px 28px #00000070,0 0 30px #e8a83c14}.next .content{background:linear-gradient(180deg,#1d153359,#0b081666);border-color:#b48ae033;box-shadow:0 8px 28px #00000070,0 0 30px #7a4fd114}.eyebrow{display:block;color:#f0d898;letter-spacing:5px;font-size:10px;font-weight:bold;margin-bottom:10px}.logo{width:min(300px,80%);filter:drop-shadow(0 10px 18px #0009)}h1{font-family:'Cinzel Decorative',Georgia,serif;font-size:clamp(30px,3.4vw,50px);font-weight:900;line-height:1.25;margin:8px 0 23px;letter-spacing:3px;color:#ffe9b3;text-shadow:0 2px 0 #4a2f0c,0 5px 24px #000c}h1 span{font-size:.58em;font-weight:700;letter-spacing:2px;color:#e6c887;margin-inline-end:14px}.content p{font-size:15px;line-height:1.8;margin:0 0 28px;color:#fff7e8}.enter{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:252px;padding:15px 32px;border:1px solid #241503;border-radius:3px;outline:1px solid #f0d48a;outline-offset:-6px;color:#3a2203;background:radial-gradient(circle at 15px 50%,#fff8dc 0 2px,#7a541f 2px 4px,#241503 4px 5px,transparent 6px),radial-gradient(circle at calc(100% - 15px) 50%,#fff8dc 0 2px,#7a541f 2px 4px,#241503 4px 5px,transparent 6px),linear-gradient(180deg,#7a541f 0%,#c49a45 14%,#f4dd96 42%,#fff7d2 50%,#f0d48a 58%,#b98a35 86%,#6b4a1a 100%);box-shadow:0 0 0 4px #00000090,0 8px 26px #000000b0,0 0 26px #e8b64c33,inset 0 2px 3px #fffbe8cc,inset 0 -4px 10px #4a2c00aa;text-decoration:none;font-family:'Cinzel Decorative',Georgia,serif;font-size:14px;font-weight:900;letter-spacing:2px;text-shadow:0 1px 0 #ffedbe99;transition:filter .25s,box-shadow .3s,transform .25s cubic-bezier(.34,1.56,.64,1)}.enter::before{content:"";position:absolute;inset:9px 11px;border:1px solid #5e3a0855;border-radius:2px;pointer-events:none;box-shadow:inset 0 0 0 1px #fff3c444}.enter span,.enter b{position:relative;z-index:1}.enter::after{content:"";position:absolute;inset:-7px;border-radius:6px;background:linear-gradient(115deg,#ff3d00,#ff9100 30%,#ffd54f 50%,#ff9100 70%,#ff3d00);background-size:220% 220%;filter:blur(10px);opacity:0;transition:opacity .3s;pointer-events:none;z-index:-1}.enter:hover::after,.enter:focus-visible::after{opacity:.85;animation:enter-fire 1.1s ease-in-out infinite}@keyframes enter-fire{0%,100%{background-position:0% 40%;opacity:.6}50%{background-position:100% 60%;opacity:.95}}.enter:hover{transform:scale(1.06);filter:brightness(1.1);box-shadow:0 0 0 4px #00000090,0 8px 26px #000000b0,0 0 18px #ff9100cc,0 0 55px #ff6d00aa,inset 0 2px 3px #fffbe8cc,inset 0 -4px 10px #4a2c00aa}.enter:active{transform:translateY(2px);filter:brightness(.95)}.classic .enter{color:#062730;outline-color:#c4edf5;background:radial-gradient(circle at 15px 50%,#f2fdff 0 2px,#2a6b80 2px 4px,#0b2c38 4px 5px,transparent 6px),radial-gradient(circle at calc(100% - 15px) 50%,#f2fdff 0 2px,#2a6b80 2px 4px,#0b2c38 4px 5px,transparent 6px),linear-gradient(180deg,#0e3a4a 0%,#35849a 14%,#a5e2ef 42%,#f2fdff 50%,#a5e2ef 58%,#2a6b80 86%,#0b2c38 100%);box-shadow:0 0 0 4px #00000090,0 8px 26px #000000b0,0 0 26px #6fd3e833,inset 0 2px 3px #f2fdffcc,inset 0 -4px 10px #062730aa}.classic .enter::before{border-color:#0b2c3855;box-shadow:inset 0 0 0 1px #f2fdff44}.classic .enter:hover{filter:brightness(1.09);box-shadow:0 0 0 4px #00000090,0 8px 26px #000000b0,0 0 40px #6fd3e8aa,inset 0 2px 3px #f2fdffcc,inset 0 -4px 10px #062730aa}.enter:focus-visible,button:focus-visible{outline:3px solid white;outline-offset:6px}.content small{display:block;margin-top:22px;font-size:10px;color:#e0d6c0;letter-spacing:1px}footer{position:absolute;bottom:22px;left:0;width:100%;padding:0 42px;display:flex;justify-content:space-between;gap:20px;font-size:9px;letter-spacing:2px;color:#c4c3bf;pointer-events:none}html[lang=ar] .content p,html[lang=ar] small{direction:rtl}html[lang=ar] .enter,html[lang=ar] .eyebrow{letter-spacing:0}@media(min-width:1600px){.content{transform:translateY(5px)}}@media(max-width:640px){header{padding:14px 20px}header img{width:85px}header>span{font-size:8px;letter-spacing:2px}main{height:auto;min-height:100svh;flex-direction:column}.world{min-height:620px}.world+.world{border-left:0;border-top:1px solid #e0c48365}.content{padding:26px 20px 22px;transform:none}.logo{width:220px}h1{font-size:29px;letter-spacing:2px}.world:hover,.world:focus-within{flex:1}footer{position:relative;padding:22px;font-size:8px}.next .content{padding-top:26px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}.world:hover .art{transform:none}.enter::after{display:none}.enter:hover{transform:none}}

/* Fill the section like 6159: cover the square source, keep head visible. */
.world-video{inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}
.classic .world-video{inset:-40% 0;width:100%;height:180%;object-fit:cover;object-position:18% 50%}
.next .world-video{object-position:50% 12%}

/* Reveal both videos smoothly on hover or keyboard focus. */
.next .shade,.classic .shade{opacity:1;transition:opacity .65s ease}
.next:hover .shade,.next:focus-within .shade,
.classic:hover .shade,.classic:focus-within .shade{opacity:0}