:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
html { scroll-behavior: smooth; }
body { background: #FBF6EE; }
::selection { background: #C39B4E; color: #FBF6EE; }

.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); background-size: 180px; opacity: 0.05; mix-blend-mode: multiply;
}
.tracking-tightish { letter-spacing: -0.03em; }

@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.rise { opacity: 0; animation: rise 0.9s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-10px) rotate(var(--r,0deg)); } }
.floaty { animation: floaty 7s ease-in-out infinite; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

.link-underline { position: relative; }
.link-underline::after { content:""; position:absolute; left:0; bottom:-4px; height:1px; width:0; background:#A67C36; transition: width .35s ease; }
.link-underline:hover::after, .link-underline:focus-visible::after, .link-underline.active::after { width:100%; }
.link-underline.active { color: #33271E; }

.card-img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.group:hover .card-img { transform: scale(1.06); }

.btn-primary { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background-color .25s ease; }
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }

.pearl { box-shadow: inset 0 2px 3px rgba(255,255,255,.9), inset 0 -2px 3px rgba(120,90,60,.35); }
.deco-line { background: linear-gradient(90deg, transparent, #C39B4E, transparent); }

/* mobile menu */
#mobileMenu { transition: opacity .3s ease, transform .3s ease; }
#mobileMenu.hidden-menu { opacity: 0; transform: translateY(-8px); pointer-events: none; }