/* Picture-led home (reference: hub360group.com): marquee, picture category bento, a pinned cinematic city story,
   a scroll-lit statement, picture owner panels and 3D tilt on cards. Home only; loaded after home.css.
   Motion uses transform/opacity; everything is removed or made static under prefers-reduced-motion. */

/* ---------- marquee ---------- */
.hmarq{overflow:hidden;padding:22px 0 6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hmarq-track{display:flex;align-items:center;gap:22px;width:max-content;animation:hmarq 46s linear infinite}
.hmarq:hover .hmarq-track{animation-play-state:paused}
.hm-city{display:inline-flex;align-items:center;gap:10px;font:800 22px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:-.03em;color:var(--navy);white-space:nowrap}
.hm-city img{width:34px;height:34px;border-radius:50%;object-fit:cover;box-shadow:0 4px 12px -6px rgba(15,23,42,.6)}
.hm-word{font:800 22px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:-.03em;color:#8a97ab;-webkit-text-stroke:0;white-space:nowrap}
.hm-dot{color:var(--or);font-size:14px}
@keyframes hmarq{to{transform:translateX(-50%)}}
html[data-theme="dark"] .hm-city{color:#eef2f8}
html[data-theme="dark"] .hm-word{color:#7d8ba1}

/* ---------- category picture bento ---------- */
.hcats.hcats-pic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:150px;gap:14px}
.hpc{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;padding:16px;overflow:hidden;border:0!important;border-radius:20px!important;background:#0f172a!important;color:#fff!important;box-shadow:0 14px 34px -24px rgba(15,23,42,.7);isolation:isolate}
.hpc.hpc-big{grid-column:span 2;grid-row:span 2}
.hpc-img{position:absolute;inset:0;z-index:-2;background:var(--img) center/cover no-repeat;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.hpc:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,14,28,0) 30%,rgba(8,14,28,.82) 100%)}
.hpc:hover .hpc-img{transform:scale(1.07)}
.hpc .hci{position:absolute;top:14px;left:14px;width:38px;height:38px;border-radius:12px;font-size:18px;box-shadow:0 6px 16px -8px rgba(0,0,0,.6)}
.hpc .hct b{color:#fff;font-size:15px;white-space:normal}
.hpc.hpc-big .hct b{font-size:24px;letter-spacing:-.03em}
.hpc .hct em{color:rgba(255,255,255,.72)}
.hpc.zero .hct em{color:rgba(255,255,255,.55)}

/* ---------- cinematic city story (pinned while you scroll through the cities) ---------- */
.cine-c{position:relative;height:calc(100vh + var(--n,8) * 55vh);margin-top:24px}
.cine-stage{position:sticky;top:calc(var(--hdr-full,104px) + 10px);height:calc(100vh - var(--hdr-full,104px) - 26px);margin:0 12px;border-radius:28px;overflow:hidden;background:#0b1426;isolation:isolate}
.cine-head{position:absolute;z-index:5;top:26px;left:34px;right:34px;display:flex;justify-content:space-between;align-items:center;color:#fff;pointer-events:none}
.cine-head h2{margin:0;color:#fff;font-size:15px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.cine-count{font:700 13px 'Plus Jakarta Sans',sans-serif;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}.cine-count b{color:#fff;font-size:18px}
.cine-scene{position:absolute;inset:0;display:block;color:#fff;opacity:0;visibility:hidden;transition:opacity .7s cubic-bezier(.2,.8,.2,1),visibility 0s .7s}
.cine-scene.on{opacity:1;visibility:visible;transition:opacity .7s cubic-bezier(.2,.8,.2,1),visibility 0s}
.cine-img{position:absolute;inset:0;background:var(--img) center/cover no-repeat;transform:scale(1.14);transition:transform 1.6s cubic-bezier(.2,.8,.2,1)}
.cine-scene.on .cine-img{transform:scale(1.02)}
.cine-scene:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,11,24,.85) 0%,rgba(6,11,24,.35) 45%,rgba(6,11,24,0) 70%),linear-gradient(0deg,rgba(6,11,24,.75) 0%,rgba(6,11,24,0) 45%)}
.cine-cap{position:absolute;z-index:2;left:34px;bottom:44px;display:flex;flex-direction:column;gap:6px;max-width:min(640px,80%)}
.cine-cap small{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fdba74}
.cine-cap b{font-size:clamp(48px,8vw,112px);line-height:.95;letter-spacing:-.05em;font-weight:800}
.cine-cap em{font-style:normal;font-size:16px;color:rgba(255,255,255,.75)}
.cine-go{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:12px;padding:12px 18px;border-radius:99px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-weight:800;font-size:14px;transition:background .2s}
.cine-scene:hover .cine-go{background:var(--or);border-color:var(--or)}
.cine-scene.cur .cine-cap small:after{content:" · your city";color:#fff}
.cine-cap>*{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.cine-scene.on .cine-cap>*{opacity:1;transform:none}
.cine-scene.on .cine-cap>:nth-child(2){transition-delay:.06s}.cine-scene.on .cine-cap>:nth-child(3){transition-delay:.12s}.cine-scene.on .cine-cap>:nth-child(4){transition-delay:.18s}
.cine-dots{position:absolute;z-index:5;right:30px;top:50%;display:flex;flex-direction:column;gap:9px;transform:translateY(-50%)}
.cine-dots i{width:6px;height:6px;border-radius:9px;background:rgba(255,255,255,.35);transition:height .3s cubic-bezier(.2,.8,.2,1),background .3s}
.cine-dots i.on{height:26px;background:var(--or)}

/* phones / no pinning: a swipeable photo gallery instead */
@media(max-width:760px){
  .cine-c{height:auto;margin-top:8px}
  .cine-stage{position:relative;top:auto;height:auto;margin:0;border-radius:0;background:none;display:flex;gap:12px;overflow-x:auto;padding:46px 16px 8px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .cine-stage::-webkit-scrollbar{display:none}
  .cine-head{top:8px;left:16px;right:16px;color:var(--navy)}.cine-head h2{color:var(--navy)}.cine-count{display:none}
  html[data-theme="dark"] .cine-head h2{color:#eef2f8}
  .cine-scene{position:relative;inset:auto;flex:0 0 78%;height:62vh;max-height:460px;border-radius:22px;overflow:hidden;opacity:1;visibility:visible;scroll-snap-align:start}
  .cine-img{transform:none!important}
  .cine-cap{left:18px;bottom:20px}.cine-cap>*{opacity:1;transform:none}
  .cine-cap b{font-size:40px}
  .cine-dots{display:none}
}

/* ---------- scroll-lit statement ---------- */
.hsay{padding:56px 0 8px}
.say{margin:0;max-width:980px;font-size:clamp(34px,5.4vw,72px);line-height:1.04;font-weight:800;letter-spacing:-.045em;color:var(--navy)}
.say em{font-style:normal;color:var(--or)}
.say .w{opacity:.22;transition:opacity .4s ease}
.say .w.lit{opacity:1}
html[data-theme="dark"] .say{color:#eef2f8}

/* ---------- picture owner panels ---------- */
.howners.howners-pic{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hop{position:relative;display:flex;align-items:flex-end;min-height:340px;padding:28px;border-radius:26px;overflow:hidden;color:#fff;isolation:isolate;box-shadow:0 20px 44px -30px rgba(15,23,42,.8)}
.hop-img{position:absolute;inset:0;z-index:-2;background:var(--img) center/cover no-repeat;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.hop:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,14,28,.05) 20%,rgba(8,14,28,.85) 100%)}
.hop:hover .hop-img{transform:scale(1.06)}
.hop-tx{display:flex;flex-direction:column;gap:10px;max-width:420px}
.hop-tx small{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fdba74}
.hop-tx b{font-size:30px;line-height:1.08;letter-spacing:-.035em}
.hop-tx .cta,.hop-tx .ghostb{align-self:flex-start;display:inline-flex;align-items:center;gap:8px}
.hop-dark .ghostb{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.35);backdrop-filter:blur(8px)}

/* ---------- 3D tilt (set by cine.js on fine pointers) ---------- */
.rh-tilt{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.rh-tilt.tilting{transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateZ(0);transition:transform .08s linear}
.rh-tilt .rh-glare{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.18),transparent 55%);opacity:0;transition:opacity .3s}
.rh-tilt.tilting .rh-glare{opacity:1}

@media(max-width:1000px){.hcats.hcats-pic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:140px}.hpc.hpc-big{grid-column:span 2;grid-row:span 1}.hpc.hpc-big .hct b{font-size:20px}}
@media(max-width:760px){.howners.howners-pic{grid-template-columns:1fr}.hop{min-height:260px;padding:22px}.hop-tx b{font-size:24px}.hsay{padding:70px 0}}

@media(prefers-reduced-motion:reduce){
  .hmarq-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .cine-scene,.cine-img,.cine-cap>*,.hpc-img,.hop-img,.say .w,.cine-dots i{transition:none!important}
  .cine-img{transform:none!important}
  .say .w{opacity:1}
  .rh-tilt{transform:none!important}
}

/* ---------- hero photo: always fills the whole hero (no hard edge for square/tall photos); a soft gradient keeps the text side readable ---------- */
@media(min-width:1001px){
  .home .hero.has-city-image .hcity:after{background:linear-gradient(90deg,rgba(8,14,28,.95) 0%,rgba(8,14,28,.84) 28%,rgba(8,14,28,.5) 50%,rgba(8,14,28,.16) 74%,rgba(8,14,28,.06) 100%),linear-gradient(0deg,rgba(8,14,28,.55) 0%,rgba(8,14,28,0) 38%),var(--himg) center 32%/cover no-repeat!important;-webkit-mask-image:none!important;mask-image:none!important}
}

/* ---------- category videos: fade in over the illustrated cover once playing ---------- */
.hpc-vid{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.hpc-vid.playing{opacity:1}
.hpc:hover .hpc-vid{transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){.hpc-vid{display:none}}
.hop .hop-vid{z-index:-2}
.hop:hover .hop-vid{transform:scale(1.05)}
.hsay+.hsec{padding-top:28px}