/* Film teaser: a night over the steppe, lightning, one slab of stone across the whole page.
   The Bilge Khan inscription drifts across it, and TÜRK in runes, in 3D, flares up. */
@font-face{font-family:"Old Turkic";src:url(/fonts/NotoSansOldTurkic-Regular.woff2) format("woff2");font-display:block}
@font-face{font-family:"EB Garamond";src:url(/fonts/EBGaramond-SemiBold-latin.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --ember:#ff5a1a;--ember-2:#ff7a2e;--ember-3:#ff9a52;--ember-4:#ffd2a6;--ember-dark:#2a0f06;
  --fl:0;--bx:50%;                       /* lightning: strength 0..1 and where it struck */
  --stele-top:36svh;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:#020305;color:#cbbfa8;overflow:hidden;font-family:"EB Garamond",Georgia,serif;-webkit-font-smoothing:antialiased}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.scene{position:relative;height:100vh;height:100svh;width:100%;overflow:hidden;background:#020305}

/* sky, clouds, stars */
.sky{position:absolute;left:0;right:0;top:0;height:calc(var(--stele-top) + 14svh);
  background:radial-gradient(14% 20% at 78% 22%,rgba(150,175,225,.22),transparent 70%),linear-gradient(180deg,#010204 0%,#060a14 38%,#0f182b 74%,#1d2943 100%)}
.stars{position:absolute;inset:0 0 40%;opacity:.55;
  background:radial-gradient(1px 1px at 12% 18%,#9fb4d8,transparent),radial-gradient(1px 1px at 27% 8%,#cfd9ee,transparent),radial-gradient(1.2px 1.2px at 41% 22%,#9fb4d8,transparent),radial-gradient(1px 1px at 58% 12%,#cfd9ee,transparent),radial-gradient(1px 1px at 71% 24%,#9fb4d8,transparent),radial-gradient(1.2px 1.2px at 86% 9%,#cfd9ee,transparent),radial-gradient(1px 1px at 93% 26%,#9fb4d8,transparent),radial-gradient(1px 1px at 6% 30%,#9fb4d8,transparent),radial-gradient(1px 1px at 49% 4%,#cfd9ee,transparent)}
.clouds{position:absolute;inset:0;filter:brightness(calc(1 + var(--fl)*3.2)) saturate(calc(1 + var(--fl)*.3))}
.clouds i{position:absolute;display:block;border-radius:50%;filter:blur(26px);background:radial-gradient(closest-side,rgba(40,52,82,.85),rgba(16,22,38,.55) 60%,transparent);animation:cloud 90s linear infinite alternate}
.clouds i:nth-child(1){left:-10%;top:-6%;width:70%;height:42%}
.clouds i:nth-child(2){left:30%;top:6%;width:80%;height:36%;animation-duration:120s;animation-direction:alternate-reverse}
.clouds i:nth-child(3){left:60%;top:-10%;width:60%;height:38%;animation-duration:100s}
.clouds i:nth-child(4){left:5%;top:24%;width:90%;height:28%;opacity:.7;animation-duration:140s;animation-direction:alternate-reverse}
@keyframes cloud{from{transform:translateX(-6%)}to{transform:translateX(8%)}}

/* lightning */
.bolt{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bolt path{fill:none;stroke-linejoin:round;stroke-linecap:round;opacity:0;vector-effect:non-scaling-stroke}
.bolt-a{stroke:#9bbcff;stroke-width:9px}
.bolt-b{stroke:#f4f8ff;stroke-width:2.4px}
.bolt.on path{opacity:1}
.flash{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:calc(var(--fl)*.8);
  background:radial-gradient(70% 90% at var(--bx) 8%,rgba(170,200,255,.9),rgba(90,120,190,.4) 45%,transparent 75%)}

/* land: far mountains, rolling steppe, a few yurts and a fire */
.land{position:absolute;left:0;right:0;bottom:0;height:62%;width:100%;filter:brightness(calc(1 + var(--fl)*1.6))}
.land .m1{fill:#0d1424;stroke:rgba(130,160,220,.22);stroke-width:1.4}
.land .m2{fill:#070b15;stroke:rgba(120,150,210,.1);stroke-width:1.2}
.land .m3{fill:#03050a}
.land .yurts{fill:#04060c}
.land .camp{fill:#ff8a3a;filter:blur(6px);opacity:.85;animation:fire 2.4s ease-in-out infinite alternate}
@keyframes fire{from{opacity:.45;transform-origin:404px 226px;transform:scale(.8)}to{opacity:.95;transform:scale(1.25)}}

/* the stele */
.stele-wrap{position:absolute;left:0;right:0;top:var(--stele-top);bottom:0;z-index:2;
  filter:drop-shadow(0 -2px 1px rgba(170,185,215,.34)) drop-shadow(0 -22px 28px rgba(0,0,0,.85));
  opacity:0;translate:0 28px;transition:opacity 2s ease,translate 2.2s cubic-bezier(.2,.7,.2,1)}
.loaded .stele-wrap{opacity:1;translate:0 0}
.stele{position:absolute;inset:0;overflow:hidden;
  clip-path:polygon(0 2.4%,3% 1.2%,7% 1.9%,11% .7%,16% 1.6%,21% .3%,27% 1.3%,33% .5%,40% 1.5%,46% .2%,52% 1.1%,58% .4%,64% 1.6%,70% .6%,76% 1.5%,82% .3%,88% 1.3%,93% .5%,97% 1.7%,100% 1%,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(3,4,8,.72),rgba(3,4,8,.52) 40%,rgba(3,4,8,.84)),url(/img/tex/stein-dunkel.webp) 0 0/240px 240px,#141416}
.stele::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;z-index:1;background:linear-gradient(180deg,rgba(205,215,240,.26),transparent)}
.stele-runes{position:absolute;inset:0;overflow:hidden;font-family:"Old Turkic","Noto Sans Old Turkic",sans-serif;font-size:clamp(24px,3.3vw,46px);line-height:1}
.row{position:absolute;right:0;display:flex;direction:rtl;align-items:center;gap:.5em;width:max-content;white-space:nowrap;will-change:transform;
  animation:sweep var(--dur,60s) ease-in-out var(--del,0s) infinite var(--dir,alternate)}
@keyframes sweep{from{transform:translateX(0)}to{transform:translateX(var(--tr,0px))}}
.w{unicode-bidi:isolate;direction:rtl;display:inline-block;color:rgba(0,0,0,.92);text-shadow:1px 1px 0 rgba(200,210,235,calc(.2 + var(--fl)*.3))}
.d{display:inline-block;width:.16em;height:.62em;flex:none;
  background:radial-gradient(circle,rgba(0,0,0,.8) 38%,transparent 42%) 50% 22%/100% 38% no-repeat,radial-gradient(circle,rgba(0,0,0,.8) 38%,transparent 42%) 50% 78%/100% 38% no-repeat}
/* the glowing words in the inscription */
.k,.g{animation:flare var(--p,14s) ease-in-out var(--q,0s) infinite;color:var(--ember-dark)!important;-webkit-text-stroke:1.2px rgba(255,122,46,.6);text-shadow:0 0 6px rgba(255,90,26,.42)!important}
@keyframes flare{
  0%,52%,100%{-webkit-text-stroke-color:rgba(255,122,46,.55);text-shadow:0 0 5px rgba(255,90,26,.35);color:#2a0f06}
  64%,80%{-webkit-text-stroke-color:var(--ember-4);color:#ff7a2e;text-shadow:0 0 5px var(--ember),0 0 16px rgba(255,90,26,.9),0 0 38px rgba(255,70,20,.6),0 0 70px rgba(255,60,10,.35)}
}
.g{animation-name:flare-gold}
@keyframes flare-gold{
  0%,52%,100%{-webkit-text-stroke-color:rgba(255,190,90,.55);text-shadow:0 0 5px rgba(255,160,50,.35);color:#2a1606}
  64%,80%{-webkit-text-stroke-color:#fff0cf;color:#ffb446;text-shadow:0 0 5px #ff9a1a,0 0 16px rgba(255,170,50,.9),0 0 38px rgba(255,150,30,.6),0 0 70px rgba(255,130,10,.35)}
}
/* the lightning spills onto the stone */
.lightwash{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(75% 90% at var(--bx) -8%,rgba(150,185,255,calc(var(--fl)*.62)),rgba(90,120,190,calc(var(--fl)*.24)) 48%,transparent 78%),linear-gradient(180deg,rgba(120,150,220,calc(var(--fl)*.3)),transparent 34%)}

/* TÜRK in runes, in 3D */
.word{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;perspective:1100px}
.word span{grid-area:1/1;display:block;direction:rtl;font-family:"Old Turkic","Noto Sans Old Turkic",sans-serif;font-size:min(23vw,36svh);line-height:1;white-space:nowrap;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;will-change:transform,text-shadow}
.word-base{color:#1c0d07;-webkit-text-stroke:2px rgba(255,122,46,.5)}
.word-hot{color:#5d9bff;-webkit-text-stroke:2px #cfe2ff;opacity:0;animation:ignite 9s ease-in-out infinite}
@keyframes ignite{0%,18%{opacity:0}26%{opacity:1}30%{opacity:.45}35%{opacity:1}62%{opacity:.85}82%,100%{opacity:0}}

.gl-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;display:block;opacity:0;transition:opacity 1.8s ease}
.gl .gl-canvas{opacity:1}
.gl .stele-wrap{opacity:0!important;transition:opacity 1.8s ease!important}
.vignette{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse 66% 60% at 50% 52%,transparent 8%,rgba(0,0,0,.6) 46%,rgba(0,0,0,.97) 100%),linear-gradient(180deg,rgba(0,0,0,.7),transparent 20%,transparent 66%,rgba(0,0,0,.82));
  box-shadow:inset 0 0 30vmin 11vmin #000}

.foot{position:absolute;z-index:5;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:clamp(1rem,4vw,2.4rem);flex-wrap:wrap;padding:1.2rem 1rem max(.9rem,1.6svh);
  font:600 .68rem/1 "EB Garamond",serif;letter-spacing:.3em;text-transform:uppercase;opacity:0;transition:opacity 2.4s ease 1.6s}
.loaded .foot{opacity:1}
.foot a{position:relative;color:rgba(214,202,180,.55);text-decoration:none;padding:.5rem 0;border-bottom:1px solid transparent;transition:color .3s,border-color .3s,text-shadow .3s}
.foot a+a::before{content:"";position:absolute;left:calc(-1*clamp(1rem,4vw,2.4rem)/2 - 2.5px);top:50%;width:5px;height:5px;margin-top:-2.5px;transform:rotate(45deg);background:var(--ember);box-shadow:0 0 8px var(--ember);opacity:.7}
.foot a:hover,.foot a:focus-visible{color:#fff;border-color:var(--ember);outline:none;text-shadow:0 0 12px rgba(255,90,26,.7)}
/* the YavuzArts mark, the only link: gold, no text */
.foot a.ya{display:block;width:34px;height:25px;padding:0;border:0;opacity:.62;
  background:linear-gradient(180deg,#f3dc9c,#c99a45 55%,#8c6526);
  -webkit-mask:url(/gokturk/ya-zeichen.webp) center/contain no-repeat;mask:url(/gokturk/ya-zeichen.webp) center/contain no-repeat;
  transition:opacity .3s,filter .3s,transform .3s}
.foot a.ya:hover,.foot a.ya:focus-visible{opacity:1;background:linear-gradient(180deg,#fff3cf,#e8bd63 55%,#b5842f);transform:translateY(-1px)}
.foot a.ya:focus-visible{outline:1px solid rgba(240,200,110,.6);outline-offset:6px}

/* the sky as film, when there is one */
/* the film's horizon sits at 80 % of its height; it is placed just above the top of the stele */
.sky-video{--vh:max(56.25vw,calc((var(--stele-top) - 2svh) / .78));position:absolute;left:50%;translate:-50% 0;
  top:calc(var(--stele-top) - 2svh - var(--vh) * .8);height:var(--vh);width:calc(var(--vh) * 16 / 9);max-width:none;object-fit:cover}
.has-video .sky{overflow:visible;background:#010204}
.has-video .stars,.has-video .clouds,.has-video .bolt,.has-video .flash,.has-video .land{display:none}

/* Asena: the great strike; the wolf of cloud shows only while the light is on it */
.asena{position:absolute;inset:0;pointer-events:none;--w:0;opacity:var(--w);overflow:visible}
.asena-glow{position:absolute;left:50%;top:calc(var(--stele-top) - 30svh);width:120vmax;height:70svh;translate:-50% 0;
  background:radial-gradient(closest-side,rgba(190,215,255,.75),rgba(110,140,210,.32) 45%,transparent 75%);mix-blend-mode:screen;opacity:calc(var(--fl) * .9)}
.asena-wolf{--H:130svh;position:absolute;top:7svh;height:var(--H);width:calc(var(--H) * 1.7778);max-width:none;
  left:calc(23vw - var(--H) * 1.7778 * .405);opacity:calc(var(--fl) * 1.2);mix-blend-mode:screen;filter:saturate(1.1) brightness(1.45)}
.asena-bolt{position:absolute;left:0;right:0;top:0;height:calc(var(--stele-top) + 4svh);width:100%;overflow:visible}
.asena-bolt path{fill:none;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:var(--ab,0)}
.asena-bolt .ab-a{stroke:#a9c6ff;stroke-width:14px;filter:blur(6px)}
.asena-bolt .ab-b{stroke:#fbfdff;stroke-width:3.4px}

/* out of the dark: the opening of the camera flight */
.blackout{position:absolute;inset:0;z-index:6;background:#000;pointer-events:none;animation:aufblende 4.2s cubic-bezier(.5,0,.3,1) .2s both}
@keyframes aufblende{from{opacity:1}to{opacity:0}}

/* sound: off until asked for */
.ton{position:absolute;z-index:7;top:max(1rem,env(safe-area-inset-top));right:1.1rem;display:flex;align-items:center;gap:.55rem;padding:.55rem .8rem .55rem .65rem;
  background:rgba(8,6,5,.35);color:rgba(214,202,180,.62);border:1px solid rgba(255,122,46,.28);cursor:pointer;
  font:600 .62rem/1 "EB Garamond",serif;letter-spacing:.3em;text-transform:uppercase;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  opacity:0;transition:opacity 2s ease 2.4s,color .3s,border-color .3s,background .3s}
.loaded .ton{opacity:1}
.ton svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ton .spk{fill:currentColor;stroke:none}
.ton .wav{display:none}
.ton.an .wav{display:block}.ton.an .mute{display:none}
.ton.an{color:#ffd2a6;border-color:rgba(255,122,46,.7);text-shadow:0 0 10px rgba(255,90,26,.6)}
.ton:hover,.ton:focus-visible{color:#fff;border-color:var(--ember);outline:none;background:rgba(40,14,6,.5)}

@media (prefers-reduced-motion:reduce){
  .blackout{animation-duration:1.2s}
  .row,.clouds i,.land .camp{animation:none}
  .k,.g{animation:none}
  .word-hot{animation:none;opacity:.55}
  .stele-wrap{transition:none;opacity:1;translate:0 0}.foot{transition:none;opacity:1}
}
@media (max-width:40rem){:root{--stele-top:40svh}.asena-wolf{--H:90svh;top:3svh;left:calc(50vw - var(--H) * 1.7778 * .405)}.ton{right:.8rem;padding:.5rem .6rem;letter-spacing:.2em;font-size:.56rem}.word span{font-size:min(31vw,30svh)}.foot{letter-spacing:.16em;font-size:.6rem}}