/* Hallmark · checked: 2026-11-07 · genre: atmospheric · scope: app
   built: the project · redesign: polish · brand: GRIMCAT graphite and silver
   Material and interaction polish within the existing storefront.
   Real product imagery, existing typography and copy. One animated background.
   Hallmark floor / Taste motion guidance; no marketing-layout replacement. */
:root {
  --finish-surface-top:#1c2028;
  --finish-surface-bottom:#111419;
  --finish-header:#0d1015ed;
  --finish-edge:#ccd8eb24;
  --finish-edge-bright:#e5ebf946;
  --finish-highlight:#ffffff0c;
  --finish-clear:#ffffff00;
  --finish-shadow:#00000038;
  --finish-shadow-deep:#00000060;
  --finish-silver:#f4f6fa;
  --finish-silver-low:#c5ccd7;
  --finish-ink:#151921;
  --finish-red:#ec394d;
  --finish-red-soft:#ec394d13;
  --finish-cta:#d62d42;
  --finish-cta-low:#ba2337;
  --finish-cta-ink:#fff7f8;
  --finish-discord-soft:#5865f21c;
  --finish-hover:#e0e8f606;
  --finish-muted:#abb4c3;
  --finish-ease:cubic-bezier(.2,.8,.2,1);
  --finish-fast:160ms;
  --finish-panel:220ms;
  --button-color-dark:#8c9eb43d;
  --button-color-silver:#a8b5ca99;
  --button-color-red:#73112766;
}

/* Light stays on the edges, leaving the reading surface quiet. */
.storefront-shell .metal-background canvas.is-ready { opacity:.43 }
.storefront-shell .site-header {
  background:var(--finish-header);
  border-bottom-color:var(--finish-edge);
  box-shadow:0 8px 28px var(--finish-shadow);
}
.storefront-shell .nav-links>a[aria-current="page"] {
  background:linear-gradient(160deg,var(--finish-highlight),var(--finish-clear));
  border-color:var(--finish-edge-bright);
  box-shadow:inset 0 1px var(--finish-highlight);
}
.storefront-shell .nav-discord,
.storefront-shell .language-picker>summary,
.storefront-shell .metal-toggle,
.storefront-shell .has-mobile-menu .nav-toggle:not([hidden]) {
  border-color:var(--finish-edge);
  box-shadow:inset 0 1px var(--finish-highlight);
}

/* Satin controls share one restrained hover and press treatment. */
.metal-ui.storefront-shell .button:not(.secondary):not(.quiet):not(.danger):not(:disabled),
.metal-ui.storefront-shell .primary:not(:disabled) {
  background:linear-gradient(175deg,var(--finish-silver),var(--finish-silver-low));
  border-color:var(--finish-silver-low); color:var(--finish-ink);
  box-shadow:inset 0 1px var(--finish-silver),0 4px 14px var(--finish-shadow);
}
.metal-ui.storefront-shell .button,
.metal-ui.storefront-shell button.primary {
  transition:transform var(--finish-fast) var(--finish-ease),box-shadow var(--finish-fast) var(--finish-ease),border-color var(--finish-fast) var(--finish-ease);
}
.storefront-shell .button.secondary:not(:disabled) {
  background:linear-gradient(150deg,var(--finish-highlight),var(--finish-clear));
  border-color:var(--finish-edge);
}
.storefront-shell .text-link,
.storefront-shell .catalog-video-link,
.storefront-shell .credit-product-head>a {
  text-decoration-color:var(--finish-edge-bright); text-underline-offset:5px;
}
.storefront-shell :focus-visible { outline:2px solid var(--finish-silver-low); outline-offset:4px }
.storefront-shell input:focus-visible,
.storefront-shell textarea:focus-visible,
.storefront-shell select:focus-visible {
  outline:2px solid var(--finish-silver-low);
  box-shadow:0 0 0 4px var(--finish-highlight);
}

/* Shared materials; pricing remains a flat, stable comparison table. */
.storefront-shell .community-banner,
.storefront-shell .credits-page .credit-pack,
.storefront-shell .product-help-card,
.storefront-shell .member-page .member-panel,
.storefront-shell .auth-card,
.storefront-shell .product-stage .purchase-card {
  border-color:var(--finish-edge);
  background:linear-gradient(140deg,var(--finish-surface-top),var(--finish-surface-bottom));
  box-shadow:inset 0 1px var(--finish-highlight),0 12px 32px var(--finish-shadow);
}
.storefront-shell .community-banner {
  background:radial-gradient(ellipse at 0 30%,var(--finish-discord-soft),var(--finish-clear) 65%),linear-gradient(140deg,var(--finish-surface-top),var(--finish-surface-bottom));
}
.storefront-shell .discord-mark { box-shadow:inset 0 1px var(--finish-edge-bright),0 6px 18px var(--finish-shadow) }
.storefront-shell .credit-pack-purchase { border-top-color:var(--finish-edge) }
.storefront-shell .credit-plan-table thead th { color:var(--finish-muted) }
.storefront-shell .credit-plan-table tbody tr { transition:background-color var(--finish-fast) var(--finish-ease) }
.storefront-shell .desktop-section figure,
.storefront-shell .download-screenshot {
  border-radius:12px; box-shadow:0 24px 64px var(--finish-shadow-deep),0 3px 14px var(--finish-shadow);
}
.storefront-shell .desktop-section img { border-radius:12px }
.storefront-shell .desktop-section { padding-bottom:40px }
.storefront-shell .account-callout { border-top-color:var(--finish-edge); padding-block:32px }
.storefront-shell .site-footer { border-top-color:var(--finish-edge) }
.storefront-shell .footer-community-link img { object-fit:contain }

@media(hover:hover) and (pointer:fine) {
  .metal-ui.storefront-shell .button:not(.secondary):not(.quiet):not(.danger):not(:disabled):hover,
  .metal-ui.storefront-shell .button:not(:disabled):hover,
  .metal-ui.storefront-shell button.primary:not(:disabled):hover { transform:none }
  .storefront-shell .text-link:hover,
  .storefront-shell .catalog-video-link:hover,
  .storefront-shell .credit-product-head>a:hover { text-decoration:underline }
  .storefront-shell .credit-plan-table tbody tr:hover { background-color:var(--finish-hover) }
}
.metal-ui.storefront-shell .button:not(.secondary):not(.quiet):not(.danger):not(:disabled):active,
.metal-ui.storefront-shell .button:not(:disabled):active,
.metal-ui.storefront-shell button.primary:not(:disabled):active { transform:translateY(1px) scale(.985) }

@media(max-width:760px) {
  .storefront-shell .has-mobile-menu .nav-panel {
    border-color:var(--finish-edge-bright);
    background:linear-gradient(145deg,var(--finish-surface-top),var(--finish-surface-bottom));
  }
  .storefront-shell .desktop-section figure { box-shadow:0 12px 32px var(--finish-shadow-deep) }
  .storefront-shell .metal-background canvas.is-ready { opacity:.35 }
}
@media(prefers-reduced-motion:reduce) {
  .storefront-shell .credit-plan-table tbody tr { transition:none }
  .metal-ui.storefront-shell .button:not(.secondary):not(.quiet):not(.danger):not(:disabled):hover,
  .metal-ui.storefront-shell .button:not(.secondary):not(.quiet):not(.danger):not(:disabled):active,
  .metal-ui.storefront-shell .button:not(:disabled):hover,
  .metal-ui.storefront-shell .button:not(:disabled):active,
  .metal-ui.storefront-shell button.primary:not(:disabled):hover,
  .metal-ui.storefront-shell button.primary:not(:disabled):active { transform:none }
}

/* Download is the primary header action, using the actual brand accent. */
.storefront-shell .site-header .nav-links>a.nav-download {
  gap:8px; margin-left:8px; padding-inline:18px;
  background:linear-gradient(165deg,var(--finish-cta),var(--finish-cta-low));
  border-color:var(--finish-cta); color:var(--finish-cta-ink);
  box-shadow:inset 0 1px var(--finish-highlight),0 5px 16px var(--finish-shadow);
  transition:transform var(--finish-fast) var(--finish-ease),box-shadow var(--finish-fast) var(--finish-ease);
}
.storefront-shell .nav-links>a.nav-download svg { display:block; width:16px; height:16px }
@media(hover:hover) and (pointer:fine) {
  .storefront-shell .site-header .nav-links>a.nav-download:hover { transform:none }
}
.storefront-shell .site-header .nav-links>a.nav-download:active { transform:translateY(1px) }

@media(max-width:760px) {
  .storefront-shell .store-intro h1 { font-size:30px }
  .storefront-shell .has-mobile-menu .nav-panel { padding:14px; border-radius:16px }
  .storefront-shell .has-mobile-menu .nav-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
  .storefront-shell .has-mobile-menu .nav-links>a,.storefront-shell .has-mobile-menu .nav-links>a:first-child { min-height:52px; padding:12px; border:1px solid var(--finish-edge); background:var(--finish-highlight); border-radius:9px }
  .storefront-shell .has-mobile-menu .nav-links>a[aria-current="page"]:not(.nav-download) { border-color:var(--finish-edge-bright); background:var(--finish-surface-top); box-shadow:inset 2px 0 var(--finish-red) }
  .storefront-shell .has-mobile-menu .nav-links>a.nav-account { grid-column:1/-1; min-height:48px; background:none }
  .storefront-shell .site-header .has-mobile-menu .nav-links>a.nav-download { grid-column:1/-1; min-height:48px; justify-content:center; margin:2px 0 0; background:linear-gradient(165deg,var(--finish-cta),var(--finish-cta-low)); border-color:var(--finish-cta) }
  .storefront-shell .has-mobile-menu .nav-footer { margin-top:14px; padding-top:14px }
}
@media(prefers-reduced-motion:reduce) {
  .storefront-shell .site-header .nav-links>a.nav-download { transition:none }
  .storefront-shell .site-header .nav-links>a.nav-download:hover,
  .storefront-shell .site-header .nav-links>a.nav-download:active { transform:none }
}

/* Pointer-following color is explicitly requested. The control itself stays still.
   The isolated negative layer paints above the background and below text/icons. */
.storefront-shell .button-color { isolation:isolate; --button-color:var(--button-color-dark) }
.storefront-shell .button-color-anchor { position:relative }
.storefront-shell .button-color::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  border-radius:inherit; opacity:0;
  background:radial-gradient(ellipse 130px 90px at var(--button-x,50%) var(--button-y,50%),var(--button-color),var(--finish-clear) 80%);
  transition:opacity 150ms var(--finish-ease);
}
.storefront-shell .button-color.button:not(.secondary):not(.quiet):not(.danger),
.storefront-shell button.button-color.primary { --button-color:var(--button-color-silver) }
.storefront-shell .nav-download.button-color { --button-color:var(--button-color-red) }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .storefront-shell .button-color.is-color-active:not(:disabled):not([aria-disabled="true"])::before { opacity:1 }
}
@media(prefers-reduced-motion:reduce) { .storefront-shell .button-color::before { transition:none; opacity:0 } }