/* HELLGATE MIRAGE: polar-night surfaces with restrained frost highlights. */

[data-style-preset="mirage-frost"] {
  --mirage-bg: oklch(13% 0.018 244);
  --mirage-panel: oklch(20% 0.024 235);
  --mirage-ice: oklch(84% 0.085 215);
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  color-scheme: dark;
  background: var(--bg) !important;
  font-family: "Exo 2", sans-serif !important;
  font-feature-settings: "ss01" 1, "cv02" 1;
}

[data-style-preset="mirage-frost"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3,8,14,.52), rgba(3,8,14,.04) 48%, rgba(3,8,14,.34)),
    linear-gradient(180deg, rgba(4,10,16,.04), rgba(4,10,16,.48));
}

[data-style-preset="mirage-frost"] .display-A {
  font-family: "Russo One", "Exo 2", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: .014em !important;
}

[data-style-preset="mirage-frost"] ::selection {
  color: oklch(16% 0.025 230);
  background: var(--accent2);
}

[data-style-preset="mirage-frost"] * {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb),.42) rgba(2,7,12,.52);
}

[data-style-preset="mirage-frost"] .hellgate-ripple {
  display: none !important;
}

[data-style-preset="mirage-frost"] .hate-topbar {
  background: linear-gradient(90deg, rgba(4,10,16,.98), rgba(11,27,39,.95) 52%, rgba(4,10,16,.98)) !important;
  border-bottom: 1px solid rgba(var(--accent-rgb),.27) !important;
  box-shadow: 0 16px 44px rgba(0,0,0,.42), inset 0 -1px 0 rgba(229,248,251,.04) !important;
  backdrop-filter: blur(18px) saturate(.82) !important;
  -webkit-backdrop-filter: blur(18px) saturate(.82) !important;
}

[data-style-preset="mirage-frost"] .hate-topbar img[alt="HELLGATE MIRAGE"] {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 10px rgba(var(--accent-rgb),.18)) !important;
}

[data-style-preset="mirage-frost"] input:focus,
[data-style-preset="mirage-frost"] textarea:focus,
[data-style-preset="mirage-frost"] select:focus {
  border-color: rgba(var(--accent-rgb),.68) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.12) !important;
}

[data-style-preset="mirage-frost"] button:focus-visible,
[data-style-preset="mirage-frost"] a:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 3px;
}

[data-style-preset="mirage-frost"] .hate-back-top:hover {
  color: var(--btn-ink) !important;
  border-color: var(--accent2) !important;
  background: var(--accent2) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.46) !important;
}

[data-style-preset="mirage-frost"] .hate-side-panel {
  border-color: rgba(var(--accent-rgb),.19) !important;
  background:
    linear-gradient(118deg, rgba(229,248,251,.025), transparent 34%),
    linear-gradient(160deg, rgba(14,31,43,.96), rgba(5,13,21,.94)) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.31), inset 0 1px 0 rgba(229,248,251,.055) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-style-preset="mirage-frost"] .hate-side-panel::after {
  content: "";
  display: block !important;
  position: absolute;
  top: -1px;
  left: 14px;
  width: 66px;
  height: 2px;
  background: var(--accent2);
  opacity: .62;
  pointer-events: none;
}

[data-style-preset="mirage-frost"] .hate-hero-panel {
  position: relative;
  border-color: rgba(var(--accent-rgb),.28) !important;
  border-radius: var(--card-radius) !important;
  background: linear-gradient(145deg, rgba(13,29,41,.98), rgba(4,11,18,.94)) !important;
  box-shadow: 0 34px 86px rgba(0,0,0,.47), inset 0 1px 0 rgba(229,248,251,.065) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-style-preset="mirage-frost"] .hate-hero-panel::before {
  content: "";
  display: block !important;
  position: absolute;
  z-index: 6;
  top: -1px;
  left: 3%;
  width: 36%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent2), var(--accent), transparent);
  pointer-events: none;
}

[data-style-preset="mirage-frost"] .hate-hero-panel::after {
  display: none !important;
}

[data-style-preset="mirage-frost"] .hate-hero-media {
  background:
    radial-gradient(ellipse at 50% 58%, rgba(var(--accent-rgb),.07), transparent 50%),
    linear-gradient(145deg, rgba(11,28,40,.92), rgba(3,10,17,.97)) !important;
}

[data-style-preset="mirage-frost"] .hate-hero-copy {
  background:
    radial-gradient(ellipse at 82% 112%, rgba(var(--accent-rgb),.14), transparent 52%),
    linear-gradient(145deg, rgba(16,37,51,.94), rgba(5,14,23,.98)) !important;
  border-left: 1px solid rgba(var(--accent-rgb),.23) !important;
}

[data-style-preset="mirage-frost"] .hate-hero-copy::before {
  content: "";
  position: absolute;
  z-index: 0;
  right: -76px;
  bottom: -110px;
  width: 360px;
  height: 360px;
  background: url('/images/mirage/logo.webp') center / contain no-repeat;
  opacity: .045;
  filter: saturate(.7) brightness(1.18);
  transform: rotate(-6deg);
  pointer-events: none;
}

[data-style-preset="mirage-frost"] .hate-hero img {
  transition: filter .22s ease-out !important;
}

[data-style-preset="mirage-frost"] .hate-hero-panel:hover img {
  transform: none !important;
  filter: contrast(1.03) saturate(.96) !important;
}

[data-style-preset="mirage-frost"] .hate-category-rail button {
  border-radius: 8px !important;
  clip-path: none !important;
}

[data-style-preset="mirage-frost"] .hate-product-card {
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--card-radius) !important;
  border-color: rgba(var(--accent-rgb),.17) !important;
  background:
    linear-gradient(125deg, rgba(229,248,251,.025), transparent 32%),
    linear-gradient(155deg, rgba(14,31,43,.97), rgba(5,13,21,.95)) !important;
  box-shadow: 0 16px 38px rgba(0,0,0,.29), inset 0 1px 0 rgba(229,248,251,.045) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: border-color .22s ease-out, box-shadow .22s ease-out !important;
}

[data-style-preset="mirage-frost"] .hate-product-card::before {
  content: "";
  position: absolute;
  z-index: 8;
  top: 0;
  left: 12px;
  width: 44px;
  height: 1px;
  background: var(--accent2);
  opacity: .48;
  pointer-events: none;
  transition: width .28s cubic-bezier(.16,1,.3,1), opacity .22s ease-out;
}

[data-style-preset="mirage-frost"] .hate-product-card::after {
  display: none !important;
}

[data-style-preset="mirage-frost"] .hate-product-card:hover {
  transform: none !important;
  border-color: rgba(var(--accent-rgb),.30) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.34), inset 0 1px 0 rgba(229,248,251,.06) !important;
}

[data-style-preset="mirage-frost"] .hate-product-card:hover::before {
  width: calc(100% - 24px);
  opacity: .92;
}

[data-style-preset="mirage-frost"] .hate-product-card img,
[data-style-preset="mirage-frost"] .hate-product-card:hover img {
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

[data-style-preset="mirage-frost"] .hate-product-card button,
[data-style-preset="mirage-frost"] .hate-product-card [style*="backdrop-filter"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-style-preset="mirage-frost"] footer {
  border-color: rgba(var(--accent-rgb),.16) !important;
  background: linear-gradient(180deg, transparent, rgba(4,11,18,.62));
}

/* The visual preset keeps its composition, while every surface follows
   the values selected in Shop -> Design. */
[data-style-preset="mirage-frost"]::before {
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--bg) 76%,transparent),transparent 48%,color-mix(in srgb,var(--bg) 58%,transparent)),
    linear-gradient(180deg,color-mix(in srgb,var(--bg) 8%,transparent),color-mix(in srgb,var(--bg) 62%,transparent)) !important;
}

[data-style-preset="mirage-frost"] .hate-topbar {
  background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 96%,black),color-mix(in srgb,var(--bg2) 90%,var(--panel) 10%) 52%,color-mix(in srgb,var(--bg) 96%,black)) !important;
  box-shadow:0 16px 44px rgba(0,0,0,.42),inset 0 -1px 0 color-mix(in srgb,var(--accent2) 5%,transparent) !important;
}

[data-style-preset="mirage-frost"] .hate-side-panel {
  background:linear-gradient(118deg,color-mix(in srgb,var(--accent2) 3%,transparent),transparent 34%),linear-gradient(160deg,color-mix(in srgb,var(--panel2) 94%,var(--accent) 6%),color-mix(in srgb,var(--panel) 82%,var(--bg) 18%)) !important;
  box-shadow:0 20px 48px rgba(0,0,0,.31),inset 0 1px 0 color-mix(in srgb,var(--accent2) 6%,transparent) !important;
}

[data-style-preset="mirage-frost"] .hate-hero-panel {
  background:linear-gradient(145deg,color-mix(in srgb,var(--panel2) 92%,var(--accent) 8%),color-mix(in srgb,var(--panel) 78%,var(--bg) 22%)) !important;
  box-shadow:0 34px 86px rgba(0,0,0,.47),inset 0 1px 0 color-mix(in srgb,var(--accent2) 7%,transparent) !important;
}

[data-style-preset="mirage-frost"] .hate-hero-media {
  background:radial-gradient(ellipse at 50% 58%,rgba(var(--accent-rgb),.07),transparent 50%),linear-gradient(145deg,color-mix(in srgb,var(--panel2) 88%,var(--bg) 12%),color-mix(in srgb,var(--bg) 94%,black)) !important;
}

[data-style-preset="mirage-frost"] .hate-hero-copy {
  background:radial-gradient(ellipse at 82% 112%,rgba(var(--accent-rgb),.14),transparent 52%),linear-gradient(145deg,color-mix(in srgb,var(--panel2) 86%,var(--accent) 14%),color-mix(in srgb,var(--panel) 82%,var(--bg) 18%)) !important;
}

[data-style-preset="mirage-frost"] .hate-product-card,
[data-style-preset="mirage-frost"] .hate-product-card:hover {
  background:linear-gradient(125deg,color-mix(in srgb,var(--accent2) 3%,transparent),transparent 32%),linear-gradient(155deg,color-mix(in srgb,var(--panel2) 94%,var(--accent) 6%),color-mix(in srgb,var(--panel) 84%,var(--bg) 16%)) !important;
}

[data-style-preset="mirage-frost"] footer {
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bg) 76%,transparent)) !important;
}

@media (max-width: 1100px) {
  [data-style-preset="mirage-frost"] .hate-hero-copy {
    border-left: 0 !important;
    border-top: 1px solid rgba(var(--accent-rgb),.19) !important;
  }
}

@media (max-width: 720px) {
  [data-style-preset="mirage-frost"] .mirage-brand-tag {
    display: none !important;
  }

  [data-style-preset="mirage-frost"] .hate-topbar img[alt="HELLGATE MIRAGE"] {
    width: 44px !important;
    height: 44px !important;
  }

  [data-style-preset="mirage-frost"] .hate-hero-copy::before {
    width: 260px;
    height: 260px;
    right: -72px;
    bottom: -76px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-style-preset="mirage-frost"] *,
  [data-style-preset="mirage-frost"] *::before,
  [data-style-preset="mirage-frost"] *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}