/* ============================================================
   Beranda: banner Virtual Tour 360° (simpel: foto sekolah + tombol "360°" + satu judul).
   Pembuka: atribut data-tour360-open (js/tour360.js). Banner SENGAJA gelap di mode terang & gelap.
   Ringan: hanya transform/opacity yang dianimasikan, tanpa blur besar.
   ============================================================ */

.vt-home{position:relative;padding:34px 0 8px}
.vt-home[hidden]{display:none}

.vt-banner{
  position:relative;display:block;width:100%;height:clamp(190px,26vw,270px);padding:0;border:0;cursor:pointer;
  border-radius:28px;overflow:hidden;isolation:isolate;color:#fff;text-align:center;
  background:#051630;font-family:var(--font-display,'Sora','Segoe UI',sans-serif);
  box-shadow:0 0 0 1px rgba(255,196,110,.38),0 24px 48px -26px rgba(5,22,48,.9);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;
  -webkit-tap-highlight-color:transparent;
}
.vt-banner:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(255,196,110,.7),0 30px 56px -24px rgba(5,22,48,.95),0 0 40px -8px rgba(255,138,42,.45)}
.vt-banner:active{transform:scale(.985)}
.vt-banner:focus-visible{outline:3px solid #ffb23e;outline-offset:3px}

/* foto sekolah: bergeser pelan ke samping (transform, ringan) */
.vt-bg{
  position:absolute;z-index:-2;top:0;bottom:0;left:0;width:128%;
  background:url("../assets/profil-sekolah.jpg") center/cover no-repeat;
  animation:vt-pan 38s ease-in-out infinite alternate;will-change:transform;
  transition:filter .5s ease;
}
.vt-banner:hover .vt-bg{filter:saturate(1.15) brightness(1.06)}
@keyframes vt-pan{to{transform:translate3d(-21.8%,0,0)}}
.vt-shade{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 90% at 50% 100%,rgba(255,122,0,.28),transparent 70%),
    linear-gradient(180deg,rgba(5,22,48,.5) 0%,rgba(5,22,48,.72) 100%);
}

.vt-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:0 16px}

/* lingkaran "360°" + cincin berdenyut & berputar */
.vt-orb{position:relative;width:92px;height:92px;flex:none;display:grid;place-items:center;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.vt-banner:hover .vt-orb{transform:scale(1.08)}
.vt-core{
  position:relative;z-index:1;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(255,160,58,.95),rgba(255,107,0,.92) 70%,rgba(226,83,10,.95));
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 10px 26px -6px rgba(255,107,0,.75),inset 0 1px 0 rgba(255,255,255,.45);
}
.vt-core b{font-size:1.32rem;font-weight:800;letter-spacing:-.02em;line-height:1;text-shadow:0 2px 6px rgba(120,40,0,.45)}
.vt-dash{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:vt-spin 22s linear infinite}
.vt-dash circle{fill:none;stroke:rgba(255,226,160,.85);stroke-width:1.4;stroke-dasharray:2 5.4;stroke-linecap:round}
@keyframes vt-spin{to{transform:rotate(360deg)}}
.vt-ping{position:absolute;inset:7px;border-radius:50%;border:2px solid rgba(255,178,62,.7);opacity:0;animation:vt-ping 2.8s cubic-bezier(.2,.6,.3,1) infinite}
.vt-ping2{animation-delay:1.4s}
@keyframes vt-ping{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.1);opacity:0}}

.vt-title{
  display:inline-flex;align-items:center;gap:10px;font-size:clamp(1.05rem,2.4vw,1.35rem);font-weight:800;letter-spacing:.04em;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.vt-title i{font-size:.8em;color:#ffb23e;transition:transform .3s ease}
.vt-banner:hover .vt-title i{transform:translateX(6px)}

@media (max-width:480px){
  .vt-home{padding-top:22px}
  .vt-banner{border-radius:22px;height:200px}
  .vt-bg{width:170%}
  @keyframes vt-pan{to{transform:translate3d(-41%,0,0)}}
}
@media (prefers-reduced-motion:reduce){
  .vt-bg,.vt-dash,.vt-ping{animation:none!important}
  .vt-ping2{display:none}
  .vt-banner,.vt-orb,.vt-title i{transition-duration:.01s!important}
}
:root[data-perf="low"] .vt-bg,:root[data-perf="low"] .vt-ping{animation:none}
:root[data-perf="low"] .vt-ping2{display:none}