/* ============================================================
   VINORA EVENTS — logo.css
   The brand lockup: vector mark + wordmark, and the drop-in
   swap for real artwork at assets/img/logo.png.
   Loaded LAST so it wins over style.css / style2.css.
   ============================================================ */

/* ---------- real artwork (hidden until it actually loads) ---------- */
.logo-img{display:none;height:54px;width:auto;transition:height .45s var(--ease),filter .45s}
.logo-img.on{display:block}
.header.scrolled .logo-img{height:44px}
.footer .logo-img{height:56px}
/* the supplied artwork is drawn for light backgrounds — lift it slightly on the dark footer */
.footer .logo-img.on-dark{filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}

/* ---------- vector lockup ---------- */
.logo-lockup{display:flex;align-items:center;gap:13px}
.logo-mark{width:58px;height:50px;flex:none;transform-style:preserve-3d;transition:transform 1s var(--ease)}
.header.scrolled .logo-mark{width:50px;height:43px}
.logo:hover .logo-mark{transform:rotateY(360deg) scale(1.06)}

/* thin gold divider between mark and wordmark, as in the artwork */
.logo-rule{width:1px;height:38px;flex:none;
  background:linear-gradient(180deg,transparent,var(--gold-500) 22%,var(--gold-500) 78%,transparent);opacity:.6}
.header.scrolled .logo-rule{height:32px}
.footer .logo-rule{opacity:.45}

/* wordmark — purple with a gold edge, like the artwork */
.logo-txt{line-height:1}
.logo-txt b{display:block;font-family:var(--font-display);font-size:30px;font-weight:600;letter-spacing:.13em;
  background:linear-gradient(120deg,#7b1f88 0%,#5d1170 45%,#8a2497 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 1px 0 rgba(212,160,23,.55), 0 -1px 0 rgba(247,230,182,.35)}
.header.scrolled .logo-txt b{font-size:26px}
.logo-txt small{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:.46em;font-weight:500;
  margin-top:5px;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-txt small:before,.logo-txt small:after{content:"";flex:1;height:1px;background:var(--gold-500);opacity:.65}
.logo-tag{display:block;font-size:7.4px;letter-spacing:.22em;text-transform:uppercase;color:var(--plum-500);margin-top:6px}
.logo-tag b{color:var(--gold-700);font-weight:400;margin:0 4px;background:none;-webkit-text-fill-color:var(--gold-700);
  display:inline;font-size:inherit;text-shadow:none;letter-spacing:0}

/* footer variant sits on the dark plum background */
.footer .logo-txt b{background:linear-gradient(120deg,#f7e6b6,#ffffff 48%,#e8c680);
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.footer .logo-txt small{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.footer .logo-txt small:before,.footer .logo-txt small:after{background:var(--gold-500);opacity:.55}
.footer .logo-tag{color:#c3aecd}
.footer .logo-tag b{color:var(--gold-400);-webkit-text-fill-color:var(--gold-400)}

/* ---------- preloader ---------- */
.pre-logo-img{display:none;width:min(280px,72vw);height:auto;margin:0 auto 26px;
  opacity:0;transform:scale(.9);filter:drop-shadow(0 10px 30px rgba(0,0,0,.5))}
.pre-logo-img.on{display:block;animation:preImg 1.5s var(--ease) forwards}
@keyframes preImg{
  0%{opacity:0;transform:perspective(900px) translateZ(-160px) rotateX(16deg) scale(.9)}
  60%{opacity:1}
  100%{opacity:1;transform:none}
}
/* when the real artwork is used the vector wordmark below is redundant */
.pre-logo-img.on ~ .pre-word,
.pre-logo-img.on ~ .pre-sub,
.pre-logo-img.on ~ .pre-tag{display:none}

.pre-logo{width:172px;height:148px}
.pre-logo .pl-rib{opacity:0;animation:plUp .5s 1.62s forwards}

/* ---------- responsive ---------- */
@media(max-width:880px){
  .logo-mark{width:52px;height:45px}
  .logo-txt b{font-size:27px}
  .logo-rule{height:34px}
}
@media(max-width:620px){
  .logo-img{height:44px}
  .header.scrolled .logo-img{height:38px}
  .logo-lockup{gap:10px}
  .logo-mark{width:46px;height:40px}
  .header.scrolled .logo-mark{width:42px;height:36px}
  .logo-txt b{font-size:23px;letter-spacing:.11em}
  .header.scrolled .logo-txt b{font-size:21px}
  .logo-txt small{font-size:7.6px;letter-spacing:.36em;margin-top:4px}
  .logo-rule{height:30px}
  .logo-tag{display:none}
  .pre-logo{width:132px;height:114px}
  .pre-logo-img{width:min(220px,74vw)}
}
@media(max-width:400px){
  .logo-rule{display:none}
  .logo-lockup{gap:8px}
  .logo-mark{width:40px;height:35px}
  .logo-txt b{font-size:20px}
  .logo-txt small{font-size:7px;letter-spacing:.3em}
  .logo-img{height:38px}
}