/* BROWISTA THAILAND 2026 — home poster flythrough (jury · co-organizers · speakers), iPad / desktop ≥768px.
   Port of the "Selected work" stage on nexorawebstudios.com (cases-fx.css), recoloured black & gold.
   Shown only while html.fly-on (set in <head>, removed by fly.js if WebGL2 is unavailable). */
.fly{display:none}
@media (min-width:768px){
  html.fly-on .fly-m{display:none!important}
  html.fly-on .fly{display:block;position:relative;background:#0b0907;color:#fff;--gx:max(28px,calc((100% - var(--wrap)) / 2 + 20px))}
  html.fly-on .hj-sec .hj-grid{grid-template-columns:1fr}
  html.fly-on .hj-sec .ha{border:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:44px;align-items:center}
  html.fly-on .hj-sec .ha .row-h{flex-direction:column;align-items:flex-start;gap:18px;margin:0}
  html.fly-on .hj-sec .awards-card{aspect-ratio:16/8}

  .fly-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
    background:radial-gradient(58% 54% at 52% 50%,rgba(196,147,61,.20) 0,rgba(196,147,61,.07) 42%,rgba(11,9,7,0) 72%),#0b0907}
  .fly-stick::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--hh) + 190px);background:linear-gradient(#0b0907 48%,rgba(11,9,7,0));z-index:1;pointer-events:none}
  .fly-stick::after{content:"";position:absolute;left:0;right:0;bottom:0;height:200px;background:linear-gradient(rgba(11,9,7,0),rgba(11,9,7,.88));z-index:1;pointer-events:none}
  .fly-cv{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1s ease}
  .fly.ready .fly-cv{opacity:1}
  .fly-hud{position:absolute;inset:0;pointer-events:none;z-index:2;transition:opacity .3s}

  .fly-head{position:absolute;left:var(--gx);top:calc(var(--hh) + 16px);max-width:calc(100% - 2*var(--gx));pointer-events:auto;text-shadow:0 2px 18px rgba(0,0,0,.85)}
  .fly-head::before{content:"";position:absolute;z-index:-1;left:-80px;top:-60px;right:-120px;bottom:-50px;background:radial-gradient(closest-side,rgba(11,9,7,.82),rgba(11,9,7,0));pointer-events:none}
  .fly-kick{display:block;font:600 11px/1.4 var(--fm);letter-spacing:.24em;color:var(--gold)}
  .fly-filters{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 10px;padding:4px;border-radius:30px;background:rgba(11,9,7,.72);border:1px solid rgba(248,221,160,.18);width:max-content;max-width:100%}
  .fly-filters button{height:42px;padding:0 22px;border-radius:21px;color:rgba(255,255,255,.82);font:600 15px/1.2 var(--f);transition:background .2s,color .2s}
  .fly-filters button:hover{color:var(--gold-light)}
  .fly-filters button[aria-pressed=true]{background:var(--gg);color:#2c1b0d}
  .fly-sub{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:4px 0 0 6px;color:rgba(255,255,255,.66);font-size:14px;line-height:1.55}
  .fly-sub[hidden]{display:none}
  .fly-all{display:inline-flex;align-items:center;gap:8px;color:var(--gold-light);font-weight:600;font-size:13px;border-bottom:1px solid rgba(248,221,160,.4);padding-bottom:2px}
  .fly-all:hover{color:#fff;border-color:#fff}
  .fly-all .ico{width:15px;height:15px}

  .fly-count{position:absolute;right:var(--gx);bottom:50px;margin:0;font:600 14px/1 var(--fm);color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;display:flex;gap:8px}
  .fly-count .fly-i{color:var(--gold-light)}
  .fly-info{position:absolute;left:var(--gx);bottom:46px;max-width:calc(100% - 2*var(--gx) - 160px)}
  .fly-title{display:block;overflow:hidden;color:#fff;pointer-events:auto;font:700 clamp(30px,3.6vw,60px)/1.12 var(--fm);letter-spacing:.02em;text-transform:uppercase;padding:.06em 0}
  .fly-title span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.1,1),opacity .35s}
  .fly-title:hover{color:var(--gold-light)}
  .fly-cat{margin:10px 0 0;font-size:15px;color:rgba(255,255,255,.7);display:flex;gap:22px;align-items:baseline;transition:opacity .35s}
  .fly-go{color:var(--gold-light);font-weight:600}.fly-go b{font-weight:400}
  .fly-info.out .fly-title span{transform:translateY(-105%);opacity:0}
  .fly-info.out .fly-cat{opacity:0}
  .fly-info.pre .fly-title span{transform:translateY(105%);opacity:0;transition:none}
  .fly-info.pre .fly-cat{opacity:0;transition:none}
  .fly-info.kb .fly-title span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
  .fly-bar{position:absolute;right:30px;top:50%;width:1px;height:28vh;background:rgba(255,255,255,.16);transform:translateY(-50%)}
  .fly-bar i{display:block;width:100%;height:100%;background:var(--gg2);transform-origin:top;transform:scaleY(0)}
  .fly-hint{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);margin:0;font-size:13px;color:rgba(255,255,255,.5);display:flex;align-items:center;gap:10px;white-space:nowrap}
  .fly-hint i{display:block;width:1px;height:22px;background:var(--gold);transform-origin:top;animation:flydrip 1.8s ease-in-out infinite}
  @keyframes flydrip{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
  .fly-cur{position:absolute;left:0;top:0;width:100px;height:100px;margin:-50px 0 0 -50px;border-radius:50%;background:var(--gg);color:#2c1b0d;font-size:13px;font-weight:700;line-height:1.25;padding:8px;
    display:flex;align-items:center;justify-content:center;text-align:center;pointer-events:none;transform:scale(0);will-change:transform;z-index:3;box-shadow:0 0 40px rgba(196,147,61,.45)}
  .fly-veil{position:absolute;inset:0;background:#0b0907;opacity:0;pointer-events:none;transition:opacity .38s ease .34s;z-index:4}
  .fly.go .fly-veil{opacity:1}
  .fly.go .fly-hud{opacity:0}
  .fly-src{position:absolute!important;left:0;top:0;width:1px!important;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0!important;padding:0;list-style:none}
}
@media (min-width:768px) and (max-width:1023px){
  .fly-info{max-width:calc(100% - 2*var(--gx) - 90px)}
  .fly-filters button{padding:0 14px;font-size:14px}
  html.fly-on .hj-sec .ha{grid-template-columns:1fr;gap:20px}
}