/* Redesign layer for MemoriasWeb chrome: finishing details and surfaces. Gift previews and published gifts keep their own look. */

/* Keyboard focus: gold ring everywhere except inside gift renderings. Style and width stay with each component. */
body:not([data-route="public"]) :focus-visible:not(#phone-preview *, #gift-view *) {
  outline-color: var(--mw-gold) !important;
}

/* Text selection. */
body:not([data-route="public"]) ::selection {
  color: var(--mw-pearl);
  background: color-mix(in srgb, var(--mw-violet-action-bright) 70%, transparent);
}
body:not([data-route="public"]) :is(#phone-preview, #gift-view) ::selection {
  color: inherit;
  background: Highlight;
}

/* Page scrollbar. */
:root:has(body:not([data-route="public"])) {
  scrollbar-color: color-mix(in srgb, var(--mw-violet-action-bright) 75%, var(--mw-night)) var(--mw-night);
}

/* Surfaces: coherent violet glows plus a faint sparkle layer. Static, so no motion cost. */
#home-view .hero { background-image: var(--mw-sparkles), radial-gradient(ellipse at 83% 34%, #61359680, transparent 50%), radial-gradient(ellipse at 8% 0%, #34336680, transparent 55%); background-size: var(--mw-sparkles-size), auto, auto; }
:is(#lower-home, #templates) { background-image: var(--mw-sparkles), radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--mw-violet-action-bright) 14%, transparent), transparent 60%); background-size: var(--mw-sparkles-size), auto; }
.auth-view { background-image: var(--mw-sparkles), radial-gradient(ellipse at 42% 48%, #7133a344, transparent 60%), radial-gradient(ellipse at 100% 80%, color-mix(in srgb, var(--mw-pink) 9%, transparent), transparent 55%); background-size: var(--mw-sparkles-size), auto, auto; }
body:is([data-route="editor"], [data-route="account"]) { background-image: var(--mw-sparkles), radial-gradient(ellipse at 15% 0%, color-mix(in srgb, var(--mw-violet-action-bright) 16%, transparent), transparent 55%); background-size: var(--mw-sparkles-size), auto; }

/* Frosted editor panels: the panel color stays, light and edge highlights are layered on top. */
.editor-panel { background-image: linear-gradient(160deg, color-mix(in srgb, var(--mw-pearl) 6%, transparent), transparent 42%); box-shadow: 0 16px 40px #05081520, var(--mw-glass-highlight); }

/* Real glass where the backdrop shows through. Without backdrop-filter support the original solid cards remain. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .auth-card, .auth-entry .auth-card { background: linear-gradient(155deg, color-mix(in srgb, var(--mw-violet) 86%, transparent), var(--mw-glass) 65%); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); }
  #account-view::before { background: var(--mw-glass); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); }
}

/* Controls: hover slides the primary gradient, press sinks slightly, disabled and error read the same everywhere. */
body:not([data-route="public"]) :is(.button, .auth-card button, .plans-primary, .plans-secondary):not(#phone-preview *, #gift-view *) {
  transition: background-color var(--mw-duration) var(--mw-ease-out), background-position var(--mw-duration-slow) var(--mw-ease-out), color var(--mw-duration), border-color var(--mw-duration), box-shadow var(--mw-duration) var(--mw-ease-out), transform var(--mw-duration-fast) var(--mw-ease-out), filter var(--mw-duration);
}
:is(#lower-home #home-plans, #plans) .plans-primary:hover { background-position: 100% 0; filter: brightness(1.06); }
body:not([data-route="public"]) :is(.button, .auth-card button, .plans-primary, .plans-secondary):not(#phone-preview *, #gift-view *):active:not(:disabled) {
  transform: translateY(0) scale(.97);
  transition-duration: 80ms;
}
body:not([data-route="public"]) :is(.button, .auth-card button):not(#phone-preview *, #gift-view *):disabled {
  cursor: not-allowed;
  opacity: .5;
  filter: saturate(.6);
  box-shadow: none;
  transform: none;
}
body:not([data-route="public"]) :is(input, textarea, select):not(#phone-preview *, #gift-view *) {
  transition: border-color var(--mw-duration), box-shadow var(--mw-duration) var(--mw-ease-out), background-color var(--mw-duration);
}
body:not([data-route="public"]) :is(input, textarea, select):not(#phone-preview *, #gift-view *):focus-visible {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mw-violet-action-bright) 28%, transparent);
}
body:not([data-route="public"]) [aria-invalid="true"]:not(#phone-preview *, #gift-view *) {
  border-color: var(--mw-error);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mw-error) 22%, transparent);
}

/* Click light wave, created by polish.js. Clipped by its own layer, so the host button never changes size. */
.mw-ripple { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.mw-ripple::after { content: ''; position: absolute; left: var(--mw-ripple-x); top: var(--mw-ripple-y); width: var(--mw-ripple-size); height: var(--mw-ripple-size); margin: calc(var(--mw-ripple-size) / -2) 0 0 calc(var(--mw-ripple-size) / -2); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--mw-pearl) 38%, transparent), transparent 70%); transform: scale(0); opacity: 1; animation: mw-ripple var(--mw-duration-slow) var(--mw-ease-out) forwards; }
@keyframes mw-ripple { to { transform: scale(1); opacity: 0; } }

/* Less motion: the web toggle and the device preference both remove decorative movement. */
body.reduced-motion :is(.button, .auth-card button, .plans-primary, .plans-secondary) { transition-duration: 1ms !important; }
body.reduced-motion .mw-ripple { display: none; }
@media (prefers-reduced-motion: reduce) {
  body :is(.button, .auth-card button, .plans-primary, .plans-secondary) { transition-duration: 1ms !important; }
  .mw-ripple { display: none; }
}

/* Template cards: more depth at rest; lift, gentle 3D tilt and a cursor-following glow on hover (fine pointers only). */
:is(#templates .template-card, #lower-home .featured-card)[data-available="true"] {
  position: relative;
  box-shadow: var(--mw-shadow-rest), var(--mw-glass-highlight);
  transition: transform var(--mw-duration) var(--mw-ease-out), box-shadow var(--mw-duration) var(--mw-ease-out), border-color var(--mw-duration);
}
:is(#templates .template-card, #lower-home .featured-card)[data-available="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(240px circle at var(--mw-glow-x, 50%) var(--mw-glow-y, 0%), color-mix(in srgb, var(--mw-pearl) 11%, transparent), transparent 65%);
  opacity: 0;
  transition: opacity var(--mw-duration);
}
:is(#templates .template-card, #lower-home .featured-card)[data-available="true"]:hover {
  border-color: color-mix(in srgb, var(--mw-pink) 55%, transparent);
  box-shadow: var(--mw-shadow-lift), 0 0 0 1px color-mix(in srgb, var(--mw-pink) 18%, transparent), var(--mw-glass-highlight);
}
@media (hover: hover) and (pointer: fine) {
  #templates .template-card[data-available="true"]:hover { transform: perspective(900px) rotateX(var(--mw-tilt-x, 0deg)) rotateY(var(--mw-tilt-y, 0deg)) translateY(-4px); }
  /* The carousel only has 4px of room above the cards before it clips. */
  #lower-home .featured-card[data-available="true"]:hover { transform: perspective(900px) rotateX(var(--mw-tilt-x, 0deg)) rotateY(var(--mw-tilt-y, 0deg)) translateY(-3px); }
  :is(#templates .template-card, #lower-home .featured-card)[data-available="true"]:hover::after { opacity: 1; }
}
body.reduced-motion :is(#templates .template-card, #lower-home .featured-card)[data-available="true"] { transform: none !important; transition-duration: 1ms; }
body.reduced-motion :is(#templates .template-card, #lower-home .featured-card)::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  :is(#templates .template-card, #lower-home .featured-card)[data-available="true"] { transform: none !important; transition-duration: 1ms; }
  :is(#templates .template-card, #lower-home .featured-card)::after { display: none; }
}

/* Chest: soft violet-pink halo and a warm contact shadow, painted inside the stage it already occupies. */
#home-view .hero-chest-stage { isolation: isolate; }
#home-view .hero-chest-stage::before {
  content: '';
  position: absolute;
  inset: 4% 6% 2%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 9% at 50% 93%, color-mix(in srgb, var(--mw-gold) 22%, transparent), transparent 70%),
    radial-gradient(ellipse 52% 48% at 52% 48%, color-mix(in srgb, var(--mw-violet-action-bright) 30%, transparent), transparent 70%),
    radial-gradient(ellipse 34% 30% at 40% 30%, color-mix(in srgb, var(--mw-pink) 14%, transparent), transparent 70%);
}

/* Scroll reveal: polish.js marks only sections that start below the fold; they fade in and end exactly in place. */
.mw-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--mw-duration-slow) var(--mw-ease-out), transform var(--mw-duration-slow) var(--mw-ease-out); }
.mw-reveal.is-revealed { opacity: 1; transform: none; }
body.reduced-motion .mw-reveal { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .mw-reveal { opacity: 1; transform: none; transition: none; } }

/* Loading: a palette shimmer sweeps the submit button while an access form is busy. */
.auth-card .auth-submit { position: relative; }
.auth-card form[aria-busy="true"] .auth-submit { cursor: progress; }
.auth-card form[aria-busy="true"] .auth-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--mw-pearl) 24%, transparent) 50%, transparent 70%) 0 0 / 250% 100%;
  animation: mw-shimmer 1.3s linear infinite;
}
@keyframes mw-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
body.reduced-motion .auth-card form[aria-busy="true"] .auth-submit::after { animation: none; background-position: 50% 0; }
@media (prefers-reduced-motion: reduce) { .auth-card form[aria-busy="true"] .auth-submit::after { animation: none; background-position: 50% 0; } }