/* Oh My Gato! brand layer. Load BEFORE worlds.css. Adult pages only; never the kids game. */
@font-face{font-family:'OMG Brand';src:url(/assets/brand/fonts/sansita-swashed-800.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'OMG Body';src:url(/assets/brand/fonts/libre-franklin-400-800.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'OMG Display';src:url(/assets/brand/fonts/libre-franklin-400-800.woff2) format('woff2');font-weight:800 800;font-style:normal;font-display:swap}
/* Fallbacks tuned to the real faces (metrics from the TTFs vs Arial) so the swap does not shift layout */
@font-face{font-family:'OMG Brand Fallback';src:local('Arial');size-adjust:90.56%;ascent-override:112.63%;descent-override:19.88%;line-gap-override:0%}
@font-face{font-family:'OMG Body Fallback';src:local('Arial');size-adjust:93.39%;ascent-override:103.44%;descent-override:26.34%;line-gap-override:0%}

:root{
  --brand:'OMG Brand','OMG Brand Fallback',Georgia,serif;
  --body:'OMG Body','OMG Body Fallback',Arial,sans-serif;
  /* Every existing var(--display) becomes Franklin 800. Anton is gone. */
  --display:'OMG Display','OMG Body','OMG Body Fallback',Arial,sans-serif;
  --omg-cream:#FFF3DC;--omg-amber:#FFB020;--omg-ink:#0B1418;
}

/* Sansita: name, taglines and tier titles ONLY. Never caps, never tracked, never under 18px. */
.omg-name,.omg-tagline,.omg-tier{font-family:var(--brand);font-weight:800;text-transform:none!important;letter-spacing:0!important;font-synthesis:none}
.omg-name{font-size:max(18px,1.125rem);line-height:1.1}
.omg-tagline{font-size:max(18px,1.125rem);line-height:1.2;margin:0}
.omg-tier{font-size:max(18px,1.125rem);line-height:1.15}

/* Logo lockup: head + name. Fixed cream, never recoloured per world. */
.omg-logo{display:inline-flex;align-items:center;gap:8px;color:var(--omg-cream);text-decoration:none;min-height:44px}
.omg-logo img{display:block;width:32px;height:32px;flex:none}
.omg-logo .omg-wm{display:block;height:28px;width:auto;aspect-ratio:6819/1100;flex:none}
.omg-masthead-wm{display:block;width:min(260px,70vw);height:auto;aspect-ratio:6819/2424}
.omg-logo .omg-name{color:var(--omg-cream);white-space:nowrap}
.omg-endorse{font:600 12px/1.3 var(--body);color:var(--dim,#A7A497);display:flex;align-items:center;gap:6px;margin:0}
.omg-endorse::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--omg-amber);flex:none}

/* Framed art: aspect ratio comes from the img width/height attributes, so no CLS */
.omg-art{display:block;max-width:100%;height:auto;border:2px solid var(--accent,var(--omg-amber));border-radius:14px;background:var(--ground,var(--omg-ink));object-fit:cover}
.omg-host,.omg-tierimg{display:block;max-width:100%;height:auto;object-fit:contain}

/* Versus split diamond (coral | mint). Inline SVG uses these fills */
.omg-vs{display:inline-block;width:20px;height:20px;flex:none;vertical-align:middle}
.omg-vs .c{fill:var(--vs-coral,#FF6B57)}
.omg-vs .m{fill:var(--vs-mint,#4FE0B6)}

.omg-tierchip{display:inline-flex;align-items:center;gap:6px;font:800 12px/1 var(--body);text-transform:uppercase;letter-spacing:.06em;color:var(--ink,var(--omg-cream))}
.omg-tierchip img{width:24px;height:24px}
.omg-ribbon{display:inline-block;width:10px;height:18px;flex:none;clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);background:var(--rib-1)}
.omg-ribbon[data-r="2"]{background:var(--rib-2)}
.omg-ribbon[data-r="3"]{background:var(--rib-3)}

/* One-shot motion. transform + opacity only, nothing loops. Add the class, it runs once.
   Hard Mode gets "no easing" by NOT adding these classes. */
@keyframes omg-ignite{0%{opacity:0}18%{opacity:1}34%{opacity:.35}58%{opacity:1}74%{opacity:.6}100%{opacity:1}}
@keyframes omg-slam-l{0%{transform:translateX(-110%)}55%{transform:translateX(0)}70%{transform:translateX(-4px)}85%{transform:translateX(3px)}100%{transform:translateX(0)}}
@keyframes omg-slam-r{0%{transform:translateX(110%)}55%{transform:translateX(0)}70%{transform:translateX(4px)}85%{transform:translateX(-3px)}100%{transform:translateX(0)}}
@keyframes omg-flip{0%{transform:perspective(600px) rotateY(0)}50%{transform:perspective(600px) rotateY(90deg)}100%{transform:perspective(600px) rotateY(0)}}
@keyframes omg-sweep-out{from{transform:translateX(0);opacity:1}to{transform:translateX(-110%);opacity:0}}
@keyframes omg-sweep-in{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes omg-spin-in{from{transform:rotate(-540deg) scale(.15);opacity:0}to{transform:rotate(0) scale(1);opacity:1}}
@keyframes omg-glint{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@keyframes omg-rise{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
.omg-ignite{animation:omg-ignite 280ms steps(1,end) 1 both}
.omg-slam-l{animation:omg-slam-l 520ms cubic-bezier(.2,.8,.2,1) 1 both}
.omg-slam-r{animation:omg-slam-r 520ms cubic-bezier(.2,.8,.2,1) 1 both}
.omg-flip{animation:omg-flip 520ms ease-in-out 1 both}
.omg-sweep-out{animation:omg-sweep-out 320ms cubic-bezier(.5,0,.8,.4) 1 both}
.omg-sweep-in{animation:omg-sweep-in 320ms cubic-bezier(.2,.6,.3,1) 1 both}
.omg-spin-in{animation:omg-spin-in 700ms cubic-bezier(.2,.8,.2,1) 1 both}
.omg-rise{animation:omg-rise 360ms cubic-bezier(.2,.8,.2,1) 1 both}
.omg-glint-wrap{position:relative;overflow:hidden}
.omg-glint{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,243,220,.55) 50%,transparent 65%);transform:translateX(-120%);animation:omg-glint 900ms ease-out 1 both}
@media (prefers-reduced-motion:reduce){
  .omg-ignite,.omg-slam-l,.omg-slam-r,.omg-flip,.omg-sweep-out,.omg-sweep-in,.omg-spin-in,.omg-rise{animation:none!important}
  .omg-glint{animation:none!important;display:none}
}