/* Forge Pantry Premium Polish · Beta 1.1.0 · Build 0009 */

:root {
  --panel-highlight: rgba(255,255,255,.22);
  --soft-glow: 0 0 0 1px rgba(255,255,255,.04), 0 26px 80px rgba(10,3,12,.32);
}

.glass-panel {
  box-shadow: var(--soft-glow);
}

.topbar {
  border-color: rgba(255,255,255,.2);
  background: linear-gradient(135deg, rgba(61,35,53,.88), rgba(31,20,32,.78));
}

.brand-mark {
  overflow: hidden;
  padding: 0;
  background: transparent;
  box-shadow: 0 10px 28px rgba(243,201,120,.2);
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
}

.brand:hover .brand-mark {
  transform: translateY(-2px) rotate(-2deg);
}

.brand-mark,
.action-card,
.recipe-card,
.primary-button,
.secondary-button,
.icon-button {
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
}

.hero {
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 38%, rgba(243,201,120,.13), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.045));
}

.hero::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 0 52%, rgba(255,255,255,.035) 52% 53%, transparent 53% 100%);
  content: "";
  pointer-events: none;
}

.hero h1 {
  text-wrap: balance;
  text-shadow: 0 8px 32px rgba(0,0,0,.18);
}

.hero p,
.page-header p,
.empty-state p {
  text-wrap: pretty;
}

.primary-button {
  box-shadow: 0 10px 28px rgba(243,201,120,.18);
}

.primary-button:hover,
.secondary-button:hover {
  transform: translateY(-2px);
}

.primary-button:active,
.secondary-button:active {
  transform: translateY(0) scale(.985);
}

.action-card {
  position: relative;
  overflow: hidden;
}

.action-card::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.08) 48%, transparent 76%);
  content: "";
  transform: translateX(-120%);
  transition: transform 520ms ease;
  pointer-events: none;
}

.action-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 22px 55px rgba(10,3,12,.3);
}

.action-card:hover::after {
  transform: translateX(120%);
}

.action-card:hover .card-arrow {
  transform: translateX(4px);
}

.card-arrow {
  transition: transform var(--transition);
}

.recipe-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.26);
}

.empty-state {
  background:
    radial-gradient(circle at 50% 0, rgba(243,201,120,.09), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.055));
}

.empty-icon {
  display: inline-grid;
  width: 78px;
  height: 78px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 24px;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.app-dialog[open],
.viewer-dialog[open],
.cooking-dialog[open],
.image-lightbox-dialog[open] {
  animation: dialog-enter 180ms ease-out both;
}

@keyframes dialog-enter {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (hover: none) {
  .action-card:hover,
  .recipe-card:hover,
  .primary-button:hover,
  .secondary-button:hover {
    transform: none;
  }
}