/* ============================================================================
   Gosney Mortgage Group — Bullion UI
   Buttons and program tiles become silver bars; hover lifts them outward and
   turns them to gold with a gleam; click = lion's paw claws the bar open.
   Loaded after each page's inline styles; bullion.js adds the claw behavior.
   ============================================================================ */
:root{
  --bl-s-top:#f7f7f7; --bl-s-left:#d9dbde; --bl-s-right:#8d9095; --bl-s-bot:#5f6267;
  --bl-s-face:linear-gradient(135deg,#f1f1f1 0%,#c3c5c8 22%,#e6e7e9 42%,#a3a6ab 62%,#d9dbde 82%,#b5b8bc 100%);
  --bl-g-top:#f9e6a8; --bl-g-left:#e3c15c; --bl-g-right:#a57a22; --bl-g-bot:#6e5115;
  --bl-g-face:linear-gradient(135deg,#f8e4a4 0%,#d9b24e 22%,#f1d48a 42%,#b48c36 62%,#e9cb6e 82%,#c9a24a 100%);
  --bl-ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- the bar shell (applied to existing .btn and .tile anchors) ---------- */
.bar{position:relative;display:inline-block;text-decoration:none;cursor:pointer;
  --ch:11px;--bv:6px;
  padding:0!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;
  color:#141414;line-height:1.1;white-space:normal;
  filter:drop-shadow(0 6px 9px rgba(0,0,0,.55));
  transform:translate3d(0,0,0) scale(1);
  transition:transform .4s var(--bl-ease),filter .4s var(--bl-ease);will-change:transform}
.btn.bar::after,.tile.bar::after{display:none!important}          /* old sweep effects off; bars gleam on their own */
.bar .ingot{position:relative;display:block;overflow:hidden;
  clip-path:polygon(var(--ch) 0,calc(100% - var(--ch)) 0,100% var(--ch),100% calc(100% - var(--ch)),calc(100% - var(--ch)) 100%,var(--ch) 100%,0 calc(100% - var(--ch)),0 var(--ch));
  border:var(--bv) solid;border-top-color:var(--bl-s-top);border-left-color:var(--bl-s-left);border-right-color:var(--bl-s-right);border-bottom-color:var(--bl-s-bot);
  transition:border-color .45s ease}
.bar .face{position:relative;display:flex;align-items:center;justify-content:center;gap:.55em;padding:.78em 1.25em;isolation:isolate;text-align:center;
  background:var(--bl-s-face);color:#141414;
  font:700 .8rem/1.15 var(--display,"Cinzel",Georgia,serif);letter-spacing:.06em;text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.55),0 -1px 0 rgba(0,0,0,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.25),inset 0 0 0 1px rgba(0,0,0,.08);
  transition:color .35s,opacity .3s}
.bar .face::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:var(--bl-g-face);background-size:200% 200%;transition:opacity .45s ease}
.bar .face::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.9;mix-blend-mode:soft-light;
  background:repeating-linear-gradient(100deg,rgba(255,255,255,.16) 0 1px,rgba(0,0,0,.06) 1px 3px)}
.bar .face>*{position:relative;z-index:1}
.bar .face svg{width:1.05em;height:1.05em;flex:none}
.bar .gleam{position:absolute;top:-60%;bottom:-60%;left:-40%;width:34%;pointer-events:none;z-index:3;opacity:0;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,0) 35%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 65%,transparent 100%);
  transform:translateX(-120%) skewX(-18deg);animation:blIdle 7s linear infinite}
@keyframes blIdle{0%,78%{transform:translateX(-120%) skewX(-18deg);opacity:0}80%{opacity:.32}100%{transform:translateX(480%) skewX(-18deg);opacity:0}}

/* hover / focus: lift outward, silver -> gold, bright gleam */
.bar:hover,.bar:focus-visible{transform:translate3d(0,-6px,0) scale(1.045);
  filter:drop-shadow(0 16px 24px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(241,212,138,.45))}
.bar:hover .ingot,.bar:focus-visible .ingot{border-top-color:var(--bl-g-top);border-left-color:var(--bl-g-left);border-right-color:var(--bl-g-right);border-bottom-color:var(--bl-g-bot)}
.bar:hover .face,.bar:focus-visible .face{color:#1a1200}
.bar:hover .face::before,.bar:focus-visible .face::before{opacity:1;animation:blShimmer 2.4s linear infinite}
.bar:hover .gleam,.bar:focus-visible .gleam{animation:blSweep .95s var(--bl-ease) .05s forwards}
.bar:active{transform:translate3d(0,-2px,0) scale(1.02)}
@keyframes blSweep{0%{transform:translateX(-120%) skewX(-18deg);opacity:0}15%{opacity:1}100%{transform:translateX(480%) skewX(-18deg);opacity:0}}
@keyframes blShimmer{0%{background-position:0% 0%}100%{background-position:100% 100%}}

/* size variants by context */
.acts .bar,.top .bar{--ch:7px;--bv:4px}
.acts .bar .face,.top .bar .face{padding:.55em .85em;font-size:.68rem;white-space:nowrap}
.btn-lg.bar{--ch:13px;--bv:7px}
.btn-lg.bar .face{padding:.95em 1.5em;font-size:.9rem}
.fast-cta .bar,.mbar .bar{display:block}
.mbar .bar .face{padding:.8em .6em}

/* lion button: medallion sits outside the bar so it can still pop + roar */
.bar.lion-bar{overflow:visible}
.bar.lion-bar .face{padding-left:3.5rem}
.bar.lion-bar .lb-lion{position:absolute;left:12px;top:50%;margin-top:-20px;z-index:12}
.acts .bar.lion-bar .face{padding-left:3rem}

/* ---------- program tiles: a bar with a dark face ---------- */
.tile.bar{display:block;--ch:15px;--bv:9px;color:var(--cream,#f3ecdf);height:100%}
.tile.bar .ingot{height:100%}
.tile.bar .face{display:block;text-align:left;padding:20px;height:100%;
  background:linear-gradient(180deg,#152335,#0d141e);color:var(--cream,#f3ecdf);text-transform:none;letter-spacing:0;text-shadow:none;
  font:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.tile.bar .face::before{background:linear-gradient(180deg,#1d1a10,#0f0d08)}
.tile.bar .face::after{opacity:.35}
.tile.bar h3{margin-top:8px;font-family:var(--display,"Cinzel",serif);
  background:linear-gradient(135deg,#f7f7f7,#c3c5c8 35%,#e6e7e9 55%,#a3a6ab 80%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;transition:filter .3s}
.tile.bar:hover h3{background-image:linear-gradient(135deg,#f8e4a4,#d9b24e 35%,#f1d48a 55%,#b48c36 80%)}
.tile.bar p{color:var(--muted,#a3adbb)}
.tile.bar:hover,.tile.bar:focus-visible{transform:translate3d(0,-8px,0) scale(1.03)}
.tile.bar:hover .face,.tile.bar:focus-visible .face{color:var(--cream,#f3ecdf)}

/* ---------- main-menu links: silver lettering that turns gold and lifts ---------- */
.menu>li>a{background-image:linear-gradient(135deg,#f7f7f7,#c3c5c8 30%,#e6e7e9 50%,#a3a6ab 70%,#d9dbde);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:200% 100%;
  font-weight:700;letter-spacing:.02em;transition:transform .3s var(--bl-ease),filter .3s}
.menu>li>a:hover,.menu>li:focus-within>a{color:#f1d48a;
  background-image:linear-gradient(135deg,#f8e4a4,#d9b24e 30%,#f1d48a 50%,#b48c36 70%,#e9cb6e);
  transform:translateY(-3px);filter:drop-shadow(0 6px 10px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(241,212,138,.4));animation:blTextGleam 1.1s ease forwards}
@keyframes blTextGleam{from{background-position:120% 0}to{background-position:-20% 0}}

/* ---------- click: lion's paw swipe + claw marks + bar opens ---------- */
.bar .paw{position:absolute;z-index:20;pointer-events:none;opacity:0;left:0;top:0;width:var(--pw,90px);height:var(--pw,90px);
  filter:drop-shadow(0 0 5px rgba(255,214,96,.7)) drop-shadow(0 6px 8px rgba(0,0,0,.75));
  transform:translate(calc(var(--pw,90px) * -.6),calc(var(--pw,90px) * -.9)) rotate(145deg)}
.bar .mark{position:absolute;top:-35%;height:170%;width:3px;z-index:4;pointer-events:none;transform:rotate(-38deg) scaleY(0);transform-origin:50% 0;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.25) 22%,#0a0a0a 38%,#000 72%,rgba(120,120,120,.55) 100%);
  clip-path:polygon(50% 0,100% 3%,100% 97%,50% 100%,0 97%,0 3%)}
.bar .mark:nth-of-type(1){left:31%}.bar .mark:nth-of-type(2){left:40%}.bar .mark:nth-of-type(3){left:49%}.bar .mark:nth-of-type(4){left:58%}
.tile.bar .mark{top:-20%;height:140%}
.tile.bar .mark:nth-of-type(1){left:26%}.tile.bar .mark:nth-of-type(2){left:40%}.tile.bar .mark:nth-of-type(3){left:54%}.tile.bar .mark:nth-of-type(4){left:68%}
.bar.clawed{animation:blJolt .38s .22s var(--bl-ease)}
.bar.clawed .paw{animation:blSwipe .62s cubic-bezier(.35,.65,.25,1) forwards}
.bar.clawed .mark{animation:blTear .46s var(--bl-ease) forwards}
.bar.clawed .mark:nth-of-type(1){animation-delay:.16s}.bar.clawed .mark:nth-of-type(2){animation-delay:.21s}
.bar.clawed .mark:nth-of-type(3){animation-delay:.26s}.bar.clawed .mark:nth-of-type(4){animation-delay:.31s}
.bar.clawed .face{animation:blOpen .55s .5s var(--bl-ease) forwards}
.bar.clawed .ingot::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,226,120,.75),rgba(230,189,62,.25) 45%,transparent 72%);animation:blGlow .6s .55s var(--bl-ease) forwards}
@keyframes blSwipe{
  0%{opacity:0;transform:translate(calc(var(--pw,90px) * -.6),calc(var(--pw,90px) * -.9)) rotate(145deg) scale(.9)}
  12%{opacity:1}
  55%{opacity:1;transform:translate(calc(var(--bw,300px) * .45 - var(--pw,90px) * .5),calc(var(--bh,60px) * .4 - var(--pw,90px) * .5)) rotate(166deg) scale(1.08)}
  100%{opacity:0;transform:translate(calc(var(--bw,300px) + var(--pw,90px) * .15),calc(var(--bh,60px) + var(--pw,90px) * .3)) rotate(190deg) scale(.95)}}
@keyframes blTear{0%{opacity:1;transform:rotate(-38deg) scaleY(0);width:2px}55%{opacity:1;transform:rotate(-38deg) scaleY(1);width:4px}100%{opacity:1;transform:rotate(-38deg) scaleY(1);width:9px}}
@keyframes blOpen{to{opacity:.12}}
@keyframes blGlow{to{opacity:1}}
@keyframes blJolt{0%{translate:0 0}25%{translate:-2px 1px}50%{translate:2px -1px}75%{translate:-1px 0}100%{translate:0 0}}

@media (prefers-reduced-motion:reduce){
  .bar,.bar .ingot,.bar .face,.bar .face::before,.menu>li>a{transition:none!important}
  .bar .gleam,.bar .paw,.bar .mark,.bar.clawed,.bar.clawed .face,.bar.clawed .ingot::after,.menu>li>a{animation:none!important}
  .bar:hover,.bar:focus-visible,.tile.bar:hover{transform:none}
}
@media (max-width:520px){
  .bar .face{padding:.72em 1em;font-size:.74rem}
  .bar.lion-bar .face{padding-left:3.2rem}
}