@font-face{font-family:Etasvir;src:url("./gallery-font.woff2") format("woff2");font-display:swap}
:root{
  --bg:#080d11;--panel:#10171c;--line:#263038;--muted:#a5abb0;
  --gold:#e9bd57;--white:#f4f3ef;--mx:50%;--my:50%;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#080d11}
html{scroll-behavior:smooth}
body{font-family:Etasvir,Tahoma,Arial,sans-serif;color:var(--white);overflow-x:hidden}
button,input{font:inherit}
button{color:inherit}

.cursor-glow{
  position:fixed;z-index:999;left:0;top:0;width:320px;height:320px;border-radius:50%;
  pointer-events:none;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(233,189,87,.14),rgba(233,189,87,.05) 28%,transparent 68%);
  mix-blend-mode:screen;opacity:.75;transition:opacity .25s ease;
}
.scroll-progress{position:fixed;z-index:1000;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.03)}
.scroll-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#9d7838,var(--gold),#fff0b1);box-shadow:0 0 16px rgba(233,189,87,.35)}

.gallery{
  width:100%;min-height:100vh;padding:42px 3.7vw 28px;overflow:hidden;position:relative;
  background:
    radial-gradient(circle at var(--mx) var(--my),rgba(24,37,49,.48),transparent 26%),
    radial-gradient(circle at 55% 8%,#101820 0,#080d11 43%,#070b0e 100%);
}
.hero{height:397px;display:grid;grid-template-columns:minmax(0,1fr) 180px;direction:ltr;position:relative}
.hero-aura{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;opacity:.35}
.aura-a{width:410px;height:180px;left:34%;top:-80px;background:#163a5c;animation:auraFloat 8s ease-in-out infinite}
.aura-b{width:340px;height:160px;right:12%;bottom:-60px;background:#8d6326;animation:auraFloat 10s ease-in-out infinite reverse}
@keyframes auraFloat{50%{transform:translate3d(42px,18px,0) scale(1.08)}}

.copy{direction:rtl;text-align:right;width:590px;justify-self:start;margin-left:27px;padding-top:17px;position:relative;z-index:2}
.eyebrow{direction:ltr;display:flex;align-items:center;gap:18px;color:#c9c9c7;font:600 13px/1 Arial,sans-serif;letter-spacing:.16em;margin-bottom:31px}
.eyebrow i{display:block;width:122px;height:2px;background:linear-gradient(90deg,var(--gold),rgba(233,189,87,.08));transform-origin:left;animation:lineBreath 3.5s ease-in-out infinite}
@keyframes lineBreath{50%{transform:scaleX(.68);opacity:.58}}
h1{margin:0;font-size:58px;line-height:1.23;font-weight:800;letter-spacing:-.045em}
h1 em{
  font-style:normal;color:var(--gold);
  text-shadow:0 0 38px rgba(233,189,87,.08);
}
.copy p{margin:22px 0 19px;color:#b8bdc0;font-size:15px;line-height:1.9;font-weight:500}
.video{border:0;background:none;padding:0;display:flex;flex-direction:row-reverse;align-items:center;gap:14px;cursor:pointer}
.video b{
  width:49px;height:49px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font:16px Arial;
  box-shadow:0 0 0 0 rgba(255,255,255,.2);animation:pulseRing 2.8s ease-out infinite
}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(255,255,255,.18)}70%{box-shadow:0 0 0 18px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.video span{font-size:14px;font-weight:700}

.hero-side{direction:ltr;display:flex;flex-direction:column;align-items:flex-start;padding:22px 0 0 26px;position:relative;z-index:2}
.motto{font:600 14px/1.75 Arial,sans-serif;letter-spacing:.16em;color:#c9c9c7}
.gold-line{width:91px;height:2px;background:linear-gradient(90deg,var(--gold),rgba(233,189,87,.12));margin-top:17px}
.hero-count{margin-top:43px;font:600 14px Arial;color:#aeb3b6;letter-spacing:.13em}
.hero-arrows{display:flex;gap:15px;margin-top:17px}
.hero-arrows button,.paging button{width:49px;height:49px;border-radius:50%;border:1px solid #27323a;background:transparent;font:25px Arial;color:#9aa1a6}
.hero-arrows .active,.paging .active{border-color:#9b7c39;color:#fff}

.toolbar{
  position:sticky;top:10px;z-index:50;height:69px;padding:8px 10px;
  border:1px solid rgba(255,255,255,.05);border-radius:13px;
  background:rgba(7,12,16,.74);backdrop-filter:blur(18px) saturate(135%);
  display:grid;grid-template-columns:375px minmax(700px,1fr) 154px 112px;gap:18px;align-items:center;direction:ltr;
  box-shadow:0 16px 45px rgba(0,0,0,.18);
}
.search{height:50px;border:1px solid #27323a;border-radius:9px;display:flex;align-items:center;direction:ltr;padding:0 16px;gap:12px;background:#0c1216}
.search:focus-within{border-color:#8b713f;box-shadow:0 0 0 3px rgba(233,189,87,.06)}
.search span{font:31px Arial;color:#a9b0b5;transform:rotate(-20deg)}
.search input{direction:rtl;text-align:right;min-width:0;width:100%;border:0;outline:0;background:transparent;color:#ddd;font-size:13px}
.filters{display:flex;direction:ltr;gap:13px;justify-content:center;white-space:nowrap}
.filters button,.sort{
  height:50px;padding:0 24px;border:1px solid #27323a;border-radius:9px;background:#0b1115;font-size:14px;cursor:pointer;
  transition:transform .25s ease,border-color .25s ease,background .25s ease,color .25s ease,box-shadow .25s ease
}
.filters button:hover{transform:translateY(-2px);border-color:#51452f}
.filters .selected{background:var(--gold);border-color:var(--gold);color:#17130b;font-weight:800;box-shadow:0 0 28px rgba(233,189,87,.13)}
.sort{display:flex;align-items:center;justify-content:center;gap:11px;background:#10171c}
.views{display:flex;height:50px;border:1px solid #27323a;border-radius:9px;overflow:hidden}
.views button{width:56px;border:0;border-left:1px solid #27323a;background:#10171c;font-size:23px}
.views .selected{background:#403722;color:#f1c75f}

/* cards */
.cards{direction:ltr;display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:18px;perspective:1400px}
.card{
  position:relative;overflow:hidden;border:1px solid #28323a;border-radius:11px;
  background:
    radial-gradient(circle at var(--lx,50%) var(--ly,50%),rgba(233,189,87,.10),transparent 31%),
    linear-gradient(145deg,#121a20,#10171b);
  min-width:0;transform-style:preserve-3d;
  transition:transform .22s ease,border-color .25s ease,box-shadow .3s ease,filter .3s ease;
  will-change:transform;
}
.card.top{grid-column:span 4;height:318px}
.card.bottom{grid-column:span 3;height:308px}
.card:before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(4,7,9,.84),transparent 49%),
    repeating-linear-gradient(90deg,transparent 0 31px,rgba(255,255,255,.018) 31px 32px);
  opacity:.92;
}
.card:after{
  content:attr(data-index);position:absolute;left:18px;top:15px;color:rgba(255,255,255,.12);
  font:700 60px/1 Arial;letter-spacing:-.08em;transform:translateZ(20px)
}
.card:hover{
  border-color:#5f5032;box-shadow:0 24px 75px rgba(0,0,0,.33),0 0 0 1px rgba(233,189,87,.08);
  filter:brightness(1.07)
}
.card-light{
  position:absolute;inset:-1px;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--lx,50%) var(--ly,50%),rgba(255,232,174,.18),transparent 34%);
  transition:opacity .25s ease;
}
.card:hover .card-light{opacity:1}
.card-scan{
  position:absolute;top:-30%;bottom:-30%;left:-35%;width:2px;
  background:linear-gradient(transparent,#fff0b4,var(--gold),transparent);
  box-shadow:0 0 26px rgba(233,189,87,.55);opacity:0;transform:rotate(10deg)
}
.card:hover .card-scan{animation:scanPass 1.25s cubic-bezier(.2,.7,.2,1)}
@keyframes scanPass{0%{left:-20%;opacity:0}15%{opacity:1}80%{opacity:.8}100%{left:120%;opacity:0}}

.info{position:absolute;z-index:2;right:24px;bottom:20px;direction:rtl;text-align:right;transform:translateZ(28px);transition:transform .28s ease}
.card:hover .info{transform:translateZ(48px) translateY(-4px)}
.info span{display:inline-flex;border:1px solid #46515a;border-radius:999px;background:rgba(8,13,17,.78);backdrop-filter:blur(8px);padding:5px 11px;font-size:12px;font-weight:700}
.info h2{font-size:21px;margin:9px 0 4px;line-height:1.15}
.info p{font-size:12px;color:#b3b9bd;margin:0}
.info p b{color:var(--gold);font-weight:400}
.go{
  position:absolute;z-index:3;left:25px;bottom:24px;width:55px;height:55px;border-radius:50%;
  border:1px solid #68727a;background:rgba(8,13,17,.45);font:29px Arial;
  transform:translateZ(34px);transition:border-color .25s ease,background .25s ease,color .25s ease
}
.card:hover .go{border-color:var(--gold);background:rgba(233,189,87,.08);color:#fff}

.gallery-foot{height:92px;display:flex;align-items:center;justify-content:space-between;direction:ltr}
.paging{display:flex;align-items:center;gap:14px}
.paging strong{font:600 14px Arial;letter-spacing:.13em;color:#aeb3b6}
.paging i{width:5px;height:5px;border-radius:50%;background:#4a5359}
.paging button{width:48px;height:48px}
.tagline{direction:ltr;display:flex;align-items:center;gap:22px;color:#9da4a8;font-size:14px;font-weight:700}
.tagline i{display:block;width:260px;height:2px;background:linear-gradient(90deg,var(--gold),rgba(233,189,87,.06));animation:taglineGlow 3s ease-in-out infinite}
@keyframes taglineGlow{50%{box-shadow:0 0 18px rgba(233,189,87,.28)}}

/* scroll reveals */
.reveal-section,.reveal-card{
  opacity:0;transform:translateY(36px);filter:blur(6px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .8s ease
}
.reveal-card:nth-child(2){transition-delay:.05s}
.reveal-card:nth-child(3){transition-delay:.10s}
.reveal-card:nth-child(4){transition-delay:.15s}
.reveal-card:nth-child(5){transition-delay:.20s}
.reveal-card:nth-child(6){transition-delay:.25s}
.reveal-card:nth-child(7){transition-delay:.30s}
.is-visible{opacity:1;transform:none;filter:none}

.magnetic{transition:transform .18s ease,box-shadow .25s ease,border-color .25s ease}

@media(max-width:1250px){
 .gallery{padding-inline:28px}
 .toolbar{grid-template-columns:280px 1fr auto auto}
 .filters{overflow:auto;justify-content:flex-start}
 .filters button{padding-inline:17px}
}
@media(max-width:900px){
 .cursor-glow{display:none}
 .gallery{padding:28px 18px}
 .hero{height:auto;min-height:400px;grid-template-columns:1fr}
 .copy{width:auto;margin:0;padding:0}
 .hero-side{display:none}
 h1{font-size:clamp(38px,9vw,58px)}
 .toolbar{position:relative;top:auto;height:auto;grid-template-columns:1fr;gap:10px;padding:16px 0;background:transparent;border:0;backdrop-filter:none}
 .filters{justify-content:flex-start}
 .sort,.views{display:none}
 .cards{grid-template-columns:1fr;gap:12px}
 .card.top,.card.bottom{grid-column:auto;height:260px}
 .gallery-foot{height:80px}
 .tagline i{width:80px}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important}
 .cursor-glow{display:none}
 .reveal-section,.reveal-card{opacity:1;transform:none;filter:none}
}


/* PHASE 08 — real assets + functional gallery */
.hero-photo{
  position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(90deg,rgba(8,13,17,.99) 0%,rgba(8,13,17,.84) 27%,rgba(8,13,17,.16) 55%,rgba(8,13,17,.40) 100%),
    linear-gradient(to bottom,rgba(8,13,17,.06),rgba(8,13,17,.15) 62%,#080d11 100%),
    var(--hero);
  background-size:cover;
  background-position:center 48%;
  filter:saturate(1.03) contrast(1.03) brightness(.86);
  transform:scale(1.015);
}
.copy,.hero-side{position:relative;z-index:3}

.card{
  background-image:
    linear-gradient(to top,rgba(5,8,10,.96) 0%,rgba(5,8,10,.34) 40%,rgba(5,8,10,.02) 78%),
    var(--card-image);
  background-size:cover;
  background-position:center;
}
.card:hover{background-size:106%}
.card.is-extra{display:none}
.cards.show-extra .card.is-extra{display:block}
.load-row{display:flex;justify-content:center;padding:26px 0 4px}
.load-more{
  min-width:230px;height:48px;border:1px solid #866b37;border-radius:999px;background:#0c1216;color:#eee;
  display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer
}
.load-more:hover{border-color:var(--gold);box-shadow:0 0 25px rgba(233,189,87,.10)}
.cards.list-view{display:flex;flex-direction:column}
.cards.list-view .card{height:180px!important;grid-column:auto!important}
.cards.list-view .info{bottom:32px}
.card[hidden]{display:none!important}
@media(max-width:900px){
  .hero-photo{background-position:65% center}
}

/* PHASE 09 R03 — search-intent categories */
.seo-filters{scroll-snap-type:x proximity}
.seo-filters button{min-width:max-content;scroll-snap-align:center}
.seo-filters button:not(.selected):hover{border-color:#7b6538;color:#f3dfaa}
@media(max-width:1150px){
  .seo-filters{
    overflow-x:auto;
    justify-content:flex-start;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .seo-filters::-webkit-scrollbar{display:none}
}

/* PHASE 10 R01 — completion layer */
.seo-filters{
  direction:rtl !important;
  justify-content:center !important;
}
.go{
  display:grid;
  place-items:center;
  text-decoration:none;
  cursor:pointer;
}
.go:focus-visible,
.project-link:focus-visible,
.seo-filters button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

.project-dialog{
  width:min(1120px,92vw);
  max-width:none;
  padding:0;
  border:1px solid rgba(233,189,87,.22);
  border-radius:18px;
  color:var(--white);
  background:#0a1014;
  box-shadow:0 40px 140px rgba(0,0,0,.72);
}
.project-dialog::backdrop{
  background:rgba(3,6,8,.78);
  backdrop-filter:blur(12px);
}
.dialog-shell{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  min-height:570px;
  position:relative;
  overflow:hidden;
  border-radius:18px;
}
.dialog-media{
  min-height:570px;
  background-size:cover;
  background-position:center;
  position:relative;
}
.dialog-media:after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 55%,rgba(10,16,20,.9) 100%);
}
.dialog-content{
  direction:rtl;
  text-align:right;
  padding:74px 42px 38px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:radial-gradient(circle at 80% 20%,rgba(233,189,87,.08),transparent 35%),#0a1014;
}
.dialog-kicker{
  color:var(--gold);
  font:600 11px/1 Arial,sans-serif;
  letter-spacing:.18em;
  margin-bottom:16px;
}
.dialog-content h2{
  margin:0 0 12px;
  font-size:34px;
  line-height:1.35;
}
.dialog-location{
  color:#b9bfc3;
  margin:0 0 22px;
}
.dialog-description{
  color:#aeb4b8;
  line-height:2;
  font-size:14px;
}
.dialog-actions{
  margin-top:28px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.dialog-actions button{
  min-height:46px;
  padding:0 20px;
  border-radius:999px;
  border:1px solid #39444c;
  background:#0d151a;
  cursor:pointer;
}
.dialog-actions .dialog-next{
  border-color:#806735;
  color:#f3d788;
}
.dialog-close{
  position:absolute;
  z-index:5;
  left:20px;
  top:20px;
  width:46px;height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(5,9,12,.65);
  color:#fff;
  font-size:27px;
  cursor:pointer;
}
.video-dialog{
  width:min(1200px,92vw);
  max-width:none;
  padding:0;
  border:1px solid rgba(233,189,87,.2);
  border-radius:18px;
  background:#05090c;
}
.video-dialog::backdrop{
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(10px);
}
.video-shell{position:relative}
.video-shell video{
  display:block;
  width:100%;
  max-height:82vh;
  background:#000;
  border-radius:18px;
}
.video-close{
  position:absolute;
  z-index:3;
  right:16px;
  top:16px;
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.65);
  color:#fff;
  font-size:26px;
  cursor:pointer;
}
@media(max-width:900px){
  .seo-filters{justify-content:flex-start !important}
  .dialog-shell{grid-template-columns:1fr}
  .dialog-media{min-height:300px}
  .dialog-media:after{background:linear-gradient(to bottom,transparent 55%,#0a1014 100%)}
  .dialog-content{padding:32px 24px}
  .dialog-content h2{font-size:27px}
}