/* Rhino Bunny Academy membership emblems
 *
 * Metallic presentation treatments for the three membership levels. The
 * official logo artwork (rhino-bunny-logo.png) sits untouched on a recessed
 * white plate; the metal lives in the bezel around it, the engraved tier line
 * below it and a single highlight sweep that passes over it on first reveal.
 *
 *   .emblem--gold      Rhino Essential     polished gold
 *   .emblem--rose      Bunny Plus          rose gold
 *   .emblem--platinum  Texas Rhino VIP 24  platinum (flagship)
 *
 * Everything is CSS gradients and shadows: no images beyond the logo, no
 * looping animation. membership-emblem.js adds .lit once per emblem when it
 * enters the viewport; prefers-reduced-motion keeps the static metal only.
 */

.emblem{
  /* e1 dark edge · e2 base · e3 midtone · e4 highlight · e5 deepest shadow */
  --e1:#7A5512; --e2:#B0802A; --e3:#D2A447; --e4:#F3DEA6; --e5:#5C3F0C;
  --rule:rgba(122,85,18,.45); --drop:rgba(92,63,12,.42);
  --glint:rgba(255,232,184,.55); --glint-core:rgba(255,246,222,.9);
  --bezel:5px; --sweep-dur:1.3s; --sweep-delay:.45s;
  position:relative;display:block;isolation:isolate;
  width:100%;max-width:340px;margin:0 auto 22px;padding:var(--bezel);border-radius:16px;
  background:
    linear-gradient(145deg,var(--e1) 0%,var(--e2) 16%,var(--e4) 34%,var(--e3) 50%,var(--e2) 66%,var(--e4) 84%,var(--e1) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.26),
    0 1px 2px rgba(16,26,60,.16),
    0 12px 24px -14px var(--drop);
}
.emblem-plate{position:relative;display:block;border-radius:11px;background:#fff;padding:12px 16px 9px;
  box-shadow:0 0 0 1px var(--rule),inset 0 1px 3px rgba(16,26,60,.12)}
.emblem-plate img{display:block;width:100%;height:auto}
.emblem-tier{display:block;margin-top:5px;text-align:center;font-size:.6rem;font-weight:800;
  letter-spacing:.3em;text-transform:uppercase;line-height:1.4;color:var(--e1)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .emblem-tier{background:linear-gradient(180deg,var(--e3) 0%,var(--e1) 55%,var(--e5) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent}
}

/* single traveling highlight: screen blending lifts the metal and the logo ink
   without tinting the white plate */
.emblem-sheen{position:absolute;inset:0;z-index:2;border-radius:inherit;overflow:hidden;pointer-events:none}
.emblem-sheen::before{content:"";position:absolute;top:-25%;bottom:-25%;left:-40%;width:38%;opacity:0;
  background:linear-gradient(100deg,transparent 0%,var(--glint) 42%,var(--glint-core) 50%,var(--glint) 58%,transparent 100%);
  mix-blend-mode:screen;transform:translate3d(0,0,0) skewX(-16deg);will-change:transform}
.emblem.lit .emblem-sheen::before{
  animation:emblem-sweep var(--sweep-dur) cubic-bezier(.45,.05,.3,1) var(--sweep-delay) 1 both}
@keyframes emblem-sweep{
  0%{opacity:0;transform:translate3d(0,0,0) skewX(-16deg)}
  18%,82%{opacity:1}
  100%{opacity:0;transform:translate3d(385%,0,0) skewX(-16deg)}
}

/* Rhino Essential: polished gold */
.emblem--gold{--sweep-delay:.45s}

/* Bunny Plus: rose gold with Rhino Bunny pink undertone and navy detailing */
.emblem--rose{
  --e1:#87474D; --e2:#B86F77; --e3:#DB9AA4; --e4:#F8DED2; --e5:#5A2A34;
  --rule:rgba(22,35,78,.72); --drop:rgba(22,35,78,.38);
  --glint:rgba(255,216,214,.5); --glint-core:rgba(255,240,234,.9);
  --bezel:6px; --sweep-dur:1.5s; --sweep-delay:.6s;
}
.emblem--rose .emblem-plate{box-shadow:0 0 0 1px var(--rule),0 0 0 2px rgba(248,222,210,.55),inset 0 1px 3px rgba(16,26,60,.12)}

/* Texas Rhino VIP 24: platinum, double bevel, slow sweep then edge light */
.emblem--platinum{
  --e1:#66707E; --e2:#A8B0BB; --e3:#CCD2DA; --e4:#F6F8FB; --e5:#3B4556;
  --rule:rgba(22,35,78,.62); --drop:rgba(15,25,54,.55);
  --glint:rgba(236,243,255,.55); --glint-core:rgba(255,255,255,.95);
  --bezel:8px; --sweep-dur:2.2s; --sweep-delay:.75s;
  max-width:360px;
  background:
    linear-gradient(150deg,var(--e1) 0%,var(--e3) 14%,var(--e4) 30%,var(--e2) 48%,var(--e3) 62%,var(--e4) 80%,var(--e1) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1.5px 0 rgba(22,35,78,.35),
    inset 0 0 0 1px rgba(59,69,86,.25),
    0 2px 4px rgba(15,25,54,.18),
    0 16px 30px -16px var(--drop);
}
.emblem--platinum .emblem-plate{
  box-shadow:0 0 0 1px var(--rule),0 0 0 2.5px rgba(246,248,251,.8),0 0 0 3.5px rgba(59,69,86,.35),
    inset 0 1px 4px rgba(16,26,60,.14)}
.emblem--platinum::after{content:"";position:absolute;inset:-1px;z-index:3;border-radius:17px;pointer-events:none;
  box-shadow:0 0 0 1px rgba(250,252,255,.85),0 0 12px 1px rgba(190,205,230,.5);opacity:.4}
.emblem--platinum.emblem-armed:not(.lit)::after{opacity:0}
.emblem--platinum.lit::after{
  animation:emblem-edge 1.6s ease-out calc(var(--sweep-delay) + var(--sweep-dur) - .3s) 1 both}
@keyframes emblem-edge{0%{opacity:0}45%{opacity:.9}100%{opacity:.4}}

/* flagship label above the VIP emblem */
.flagship{display:block;width:max-content;margin:0 auto 14px;padding:5px 14px;border-radius:999px;
  font-size:.66rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:#16234E;
  background:linear-gradient(180deg,#F6F8FB 0%,#CCD2DA 55%,#A8B0BB 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(22,35,78,.25),0 0 0 1px rgba(22,35,78,.35)}

@media (prefers-reduced-motion:reduce){
  .emblem-sheen{display:none}
  .emblem--platinum::after,.emblem--platinum.lit::after,.emblem--platinum.emblem-armed:not(.lit)::after{animation:none;opacity:.4}
}