/* /css/rwd.css v2.3 — responsive hardening & light-mode sweep
   - Drawer above header; search overlay softer backdrop + click-out
   - Icon-only Support/Admin; hide floating AI globally
   - Minimal header icons on mobile
   - Stronger light-mode sweep for cards/sections with white text
   - 3D buttons + tilt; kill legacy overlaps
   - Social UI snippets (glowing input, expanding search pill, password toggle, floating avatar)
*/

/* =========================================================
   Base variables and resets
   ========================================================= */
:root {
  --max-w: 1200px;
  --container-pad: clamp(12px, 2vw, 24px);
  --space-1: clamp(4px, 0.6vw, 8px);
  --space-2: clamp(8px, 1.2vw, 16px);
  --space-3: clamp(12px, 1.6vw, 24px);
  --space-4: clamp(16px, 2vw, 32px);

  --text-s: clamp(0.875rem, 0.25vw + 0.84rem, 0.975rem);
  --text-m: clamp(1rem, 0.35vw + 0.95rem, 1.125rem);
  --text-l: clamp(1.125rem, 0.6vw + 1rem, 1.25rem);
  --h6: clamp(1rem, 0.8vw + 0.95rem, 1.25rem);
  --h5: clamp(1.125rem, 1vw + 1rem, 1.5rem);
  --h4: clamp(1.25rem, 1.6vw + 1rem, 1.75rem);
  --h3: clamp(1.5rem, 2.2vw + 1rem, 2.125rem);
  --h2: clamp(1.75rem, 3vw + 1rem, 2.5rem);
  --h1: clamp(2rem, 3.8vw + 1rem, 3rem);

  --radius-s: 8px;
  --radius-m: 12px;

  --badge-min: 1.5ch;
}

*,
*::before,
*::after { box-sizing: border-box; min-inline-size: 0; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; line-height: 1.5; font-size: var(--text-m); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

img, svg, video, canvas, audio, iframe, embed, object { display: block; max-width: 100%; }
img { height: auto; }

h1 { font-size: var(--h1); line-height: 1.15; }
h2 { font-size: var(--h2); line-height: 1.2; }
h3 { font-size: var(--h3); line-height: 1.25; }

.container, .wrap, .inner {
  width: min(100% - (var(--container-pad) * 2), var(--max-w));
  margin-inline: auto;
}

/* =========================================================
   Fluid grids and media
   ========================================================= */
.product-grid,
.grid.products,
.grid-list,
[data-collection="flavor"],
[data-grid="auto"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(160px, 33vw, 260px), 1fr));
  gap: var(--space-3);
  align-items: stretch;
}

.product-grid img,
.grid.products img,
.card .thumb img,
[data-collection="flavor"] img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-s);
}

button, .button, .btn, [role="button"] { white-space: normal; word-break: break-word; }

/* =========================================================
   Safe overlays (dialogs, modals, search)
   ========================================================= */
[role="dialog"],
[aria-modal="true"],
.overlay,
.modal,
.search-overlay {
  position: fixed;
  inset: 0;
  max-width: 100vw;
  max-height: 100dvh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Prevent CLS on small badges */
#notif-bell-count,
.bell .count,
.badge,
.cart-count,
.notification-badge,
[data-bell-count] {
  min-width: var(--badge-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 0.25em;
}

input, select, textarea { font-size: inherit; }
p, li, h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }

/* Orientation edge cases */
@media (orientation: landscape) and (max-height: 480px) {
  header, .site-header { padding-block: var(--space-1); }
  .hero { min-height: 40dvh; }
  .product-grid, .grid.products, .grid-list { gap: var(--space-2); }
  h1 { font-size: clamp(1.5rem, 2.5vw + 1rem, 2.25rem); }
}

/* Tiny screens */
@media (max-width: 480px) {
  .container, .wrap, .inner { width: min(100% - 16px, var(--max-w)); }
  .product-grid, .grid.products, .grid-list { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
}

/* Reduced motion global */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* =========================================================
   Legacy suggestion bubble (kept for backward-compat)
   ========================================================= */
.smoch-suggest {
  z-index: 2147483646;
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
  max-height: min(50vh, 420px);
  overflow: auto;
  padding: 6px;
}
.smoch-suggest__item {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 8px; background: transparent; border: 0; font: inherit; color: inherit; cursor: pointer;
}
.smoch-suggest__item strong { font-weight: 700; }
.smoch-suggest__item:hover, .smoch-suggest__item.is-active { background: rgba(0,0,0,.05); }
.smoch-nudge { outline: 2px solid #5b9df9; outline-offset: 2px; }

@media (prefers-color-scheme: dark) {
  .smoch-suggest { background: #121212; color: #eee; border-color: rgba(255,255,255,.12); box-shadow: 0 8px 30px rgba(0,0,0,.5); }
  .smoch-suggest__item:hover, .smoch-suggest__item.is-active { background: rgba(255,255,255,.08); }
}

/* Slight contrast boost for OS dark defaults */
@media (prefers-color-scheme: dark) {
  body { color: #e6e7eb; }
  a { color: #93c5fd; }
  .opacity-70 { opacity: .8; }
  .text-xs, .text-sm { color: #d7dae0; }
}

/* =========================================================
   Fluid type, layout, tap targets (secondary var set)
   ========================================================= */
:root{
  --container: min(100%, 72rem);
  --gutter: clamp(0.75rem, 1.2vw, 1.25rem);
  --radius: 12px;
  --tap: 44px;

  --text: clamp(0.95rem, 0.88rem + 0.40vw, 1.0625rem);
  --h6: clamp(1.00rem, 0.95rem + 0.50vw, 1.125rem);
  --h5: clamp(1.125rem, 1.00rem + 0.80vw, 1.25rem);
  --h4: clamp(1.25rem, 1.05rem + 1.20vw, 1.5rem);
  --h3: clamp(1.5rem, 1.2rem + 1.8vw, 1.875rem);
  --h2: clamp(1.75rem, 1.4rem + 2.4vw, 2.25rem);
  --h1: clamp(2rem, 1.6rem + 3.2vw, 2.75rem);

  --space-1: clamp(0.25rem, 0.20rem + 0.20vw, 0.375rem);
  --space-2: clamp(0.50rem, 0.45rem + 0.30vw, 0.75rem);
  --space-3: clamp(0.75rem, 0.60rem + 0.60vw, 1rem);
  --space-4: clamp(1rem, 0.80rem + 0.80vw, 1.5rem);
  --space-5: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

/* Safe, fluid base size (~14px → 16px) */
html { font-size: clamp(14px, 1.2vw + 12px, 16px); }
body { font-size: var(--text); line-height: 1.6; }
h1 { font-size: var(--h1); line-height: 1.15; }
h2 { font-size: var(--h2); line-height: 1.2; }
h3 { font-size: var(--h3); line-height: 1.25; }
h4 { font-size: var(--h4); line-height: 1.3; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.btn, button, a.btn {
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0.625rem 1rem;
  border-radius: var(--radius);
}

nav a { padding: 0.5rem 0.75rem; }

.section { padding-block: var(--space-5); }
.card { border-radius: var(--radius); }
p { max-width: 65ch; }

/* Search bar utility (desktop header search) */
.header-search { flex: 1 1 auto; max-width: 520px; position: relative; }
.header-search input[type="search"]{
  width: 100%; height: var(--tap); border-radius: 12px;
  padding: 0 1rem 0 2.25rem; background: var(--input-bg); border: 1px solid var(--input-border); color: inherit;
}
.header-search .icon {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); opacity: .8; pointer-events: none;
}

/* Brand text */
.brand { font-weight: 800; letter-spacing: -0.02em; }

/* Reduced motion utility */
@media (prefers-reduced-motion: reduce){
  [data-reveal], [data-tilt] { animation: none !important; transform: none !important; }
}

/* Mobile header tweaks */
@media (max-width: 768px){
  header .brand { font-size: var(--h4); }
  .desktop-only { display: none !important; }
  .mobile-only { display: block !important; }
}

/* Ensure header controls meet tap target size */
header .nav-link, header .btn, header button, header a { min-height: var(--tap); }

/* Below-the-fold speed-up utility */
.cv-auto { content-visibility: auto; contain-intrinsic-size: 800px 600px; }

/* Prevent iOS zoom on focus when font < 16px */
input, select, textarea { font-size: max(16px, 1em); }

/* =========================================================
   Standardized header controls (icons + search button)
   ========================================================= */
.icon-24 { width:24px; height:24px; stroke: currentColor; stroke-width:1.8; fill:none; }

/* Theme-aware glass for icon buttons (notif bell, theme toggle, burger) */
.icon-btn {
  width:44px; height:44px; display:grid; place-items:center; border-radius:.75rem;
  color: inherit; border:1px solid rgba(15,23,42,.12); background: rgba(255,255,255,.6);
  -webkit-backdrop-filter: saturate(1.2) blur(8px); backdrop-filter: saturate(1.2) blur(8px);
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.icon-btn:hover { background: rgba(2,6,23,.06); }
.dark .icon-btn { color: #e5e7eb; border-color: rgba(255,255,255,.15); background: rgba(2,6,23,.55); }
.dark .icon-btn:hover { background: rgba(255,255,255,.08); }

/* Icon-only link/button (Support/Admin icons) */
.icon-only,
#header-links a.icon-only {
  width: 44px; height: 44px; display: grid; place-items: center;
  padding: 0; border-radius: .75rem;
}

/* Search button (optional pattern) */
.search-btn {
  display:inline-flex; align-items:center; gap:.5rem; height:44px; padding:0 .5rem; border-radius:.75rem;
  color: inherit; border:1px solid rgba(148,163,184,.35); background: transparent;
}
.search-btn .label, .search-btn .kbd { display:none; }
@media (min-width:768px){
  .search-btn{ min-width:240px; height:auto; padding:.5rem .75rem; justify-content:flex-start; }
  .search-btn .label, .search-btn .kbd { display:inline-flex; }
}

/* Small KBD badge for hints (e.g., "/" on desktop search) */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  padding: 2px 6px; border-radius: 6px;
  border: 1px solid rgba(15,23,42,.18);
  background: rgba(255,255,255,.7);
  color: inherit; opacity: .9;
}
.dark .kbd {
  border-color: rgba(255,255,255,.18);
  background: rgba(2,6,23,.6);
}

/* =========================================================
   Drawer, overlay, and search stabilizers
   ========================================================= */
/* Drawer: right side (z-index above header) */
#main-drawer, #side-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; left: auto;
  width: min(380px, 48vw);
  transform: translate3d(110%, 0, 0);
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms ease;
  will-change: transform;
  z-index: 10001; /* above header */
  backface-visibility: hidden;
  contain: content;
}
#main-drawer.open, #side-drawer.open { transform: translate3d(0, 0, 0); box-shadow: -24px 0 48px -24px rgba(0,0,0,.35); }
#main-drawer[aria-hidden="true"], #side-drawer[aria-hidden="true"] { transform: translate3d(110%, 0, 0); }
#main-drawer[aria-hidden="false"], #side-drawer[aria-hidden="false"] { transform: translate3d(0, 0, 0); }

/* Drawer backdrop (below drawer, above content) */
#drawer-backdrop {
  position: fixed; inset: 0; display: none;
  background: rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  z-index: 10000;
}
#drawer-backdrop.show { display: block; }

/* Hide burger on >= 1024px */
@media (min-width: 1024px) { #nav-toggle { display: none !important; } }

/* Remove drawer close button globally */
#drawer-close { display: none !important; }

/* Search overlay container (above everything) */
#search-overlay {
  position: fixed; inset: 0; display: none;
  z-index: 10002;
  background: rgba(15,23,42,.45);
  -webkit-backdrop-filter: blur(2px) saturate(1.03);
  backdrop-filter: blur(2px) saturate(1.03);
}
#search-overlay.open { display: block !important; }

/* =========================================================
   Search overlay: list styles + legacy kill switch
   ========================================================= */
#search-suggestions { list-style: none; margin: 0; padding: 0; }
#search-suggestions li { margin: 0; padding: 0; }
#search-suggestions li a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  color: inherit;
  text-decoration: none;
}
#search-suggestions li a:hover { background: rgba(0,0,0,0.05); }
.dark #search-suggestions li a:hover { background: rgba(255,255,255,0.08); }

#search-suggestions [role="option"][aria-selected="true"] a { background: rgba(0,0,0,0.05); }
.dark #search-suggestions [role="option"][aria-selected="true"] a { background: rgba(255,255,255,0.08); }

/* Hide any legacy "black panel" while our overlay is open */
body[data-smoch-search-open="1"] > #ai-search-panel,
body[data-smoch-search-open="1"] > #aiSearchPanel,
body[data-smoch-search-open="1"] > #ai-overlay,
body[data-smoch-search-open="1"] > #ai-panel,
body[data-smoch-search-open="1"] > .ai-search-panel,
body[data-smoch-search-open="1"] > #search-ai,
body[data-smoch-search-open="1"] > #search-ai-panel,
body[data-smoch-search-open="1"] > #keywords-panel,
body[data-smoch-search-open="1"] > #black-panel,
body[data-smoch-search-open="1"] > .black-search-panel,
body[data-smoch-search-open="1"] > [data-legacy-search-panel],
body[data-smoch-search-open="1"] > div[id*="search"]:not(#search-overlay),
body[data-smoch-search-open="1"] > div[class*="search"]:not(#search-overlay) {
  display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important;
}

/* Compact search card on mobile */
#search-overlay-inner { width: min(92vw, 40rem); max-width: 40rem; margin: 12vh auto 0; border-radius: 12px; }
@media (max-width: 640px) {
  #search-overlay-inner { margin-top: 16vh; width: 92vw; }
  #search-suggestions { max-height: 55vh; }
}

/* =========================================================
   Minimal sliders (global utility)
   ========================================================= */
.slider { position: relative; overflow: hidden; }
.slides { display: flex; width: 100%; transition: transform .45s ease; will-change: transform; }
.slides > * { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; }
.nav-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.8);
  color: inherit; display: grid; place-items: center;
  -webkit-backdrop-filter: saturate(1.2) blur(6px); backdrop-filter: saturate(1.2) blur(6px);
}
.nav-prev { left: .5rem; } .nav-next { right: .5rem; }
.ar-16-9 { aspect-ratio: 16 / 9; }

@media (prefers-color-scheme: dark) {
  .nav-btn { border-color: rgba(255,255,255,.15); background: rgba(2,6,23,.55); }
}
@media (prefers-reduced-motion: reduce) {
  .slides { transition: none; }
}

/* =========================================================
   Footer legibility (strict light/dark)
   ========================================================= */
html:not(.dark) footer { color: #1f2937 !important; }                 /* gray-800 */
html:not(.dark) footer a { color: #0f172a !important; }               /* near-black */
html:not(.dark) footer p,
html:not(.dark) footer li,
html:not(.dark) footer span,
html:not(.dark) footer small,
html:not(.dark) footer h4,
html:not(.dark) footer button { color: #1f2937 !important; }
/* Normalize any accidental “white-ish” text in footer on light mode */
html:not(.dark) footer .text-white,
html:not(.dark) footer [class*="text-slate-2"],
html:not(.dark) footer [class*="text-gray-2"],
html:not(.dark) footer [class*="text-zinc-2"] { color: #1f2937 !important; }
/* Keep gradient brand text unaffected */
html:not(.dark) footer a.gradient-text { -webkit-text-fill-color: transparent; }

/* Brand vertical centering in header */
#site-header a[aria-label*="Smoch" i],
#site-header a[aria-label*="SMOCH" i],
header .brand {
  display: inline-flex; align-items: center; height: 40px; line-height: 1;
}

/* =========================================================
   Mobile header minimal icons
   ========================================================= */
/* Minimal mobile header icons: show only Search + Menu on <=1024px */
@media (max-width: 1023.98px) {
  #cart-btn,
  #notif-btn,
  #theme-toggle,
  #profile-btn,
  #nav-auth,
  #nav-user { display: none !important; }
}

/* Never allow global background to intercept clicks */
#bg-3d {
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
.ambient-spot { position: fixed !important; z-index: -1 !important; pointer-events: none !important; }

/* Safety: if overlays are 'hidden', make them truly non-blocking */
#profile-menu.hidden,
#notif-panel.hidden,
#chat-panel.hidden,
#contact-modal.hidden { display: none !important; }
#drawer-backdrop:not(.show) { display: none !important; }
#search-overlay:not(.open) { display: none !important; }

/* Hide floating AI button on all devices */
#chat-open { display: none !important; }

/* About hero description centered */
[aria-labelledby="about-hero-title"] { text-align: center; }
[aria-labelledby="about-hero-title"] p { margin-left: auto; margin-right: auto; }

/* =========================================================
   Buttons: 3D depth + tilt
   ========================================================= */
.btn-3d, .icon-btn-3d {
  transform: translateZ(0);
  transition: transform 160ms ease, box-shadow 160ms ease;
  will-change: transform, box-shadow;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}
.btn-3d:hover, .icon-btn-3d:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}
.btn-3d:active, .icon-btn-3d:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}
/* Optional tilt targets for hero CTAs/cards */
.tiltable { transform-style: preserve-3d; perspective: 600px; }

/* =========================================================
   React icon revamp helpers (Artworks or lists)
   ========================================================= */
.metrics-row { display: flex; align-items: center; gap: .75rem; }
.react-btn { display: inline-flex; align-items: center; gap: .35rem; }

/* =========================================================
   Light-mode readability sweep (v2.3)
   ========================================================= */
/* Force legible text when switching to light mode across sections/cards */
html:not(.dark) .text-white,
html:not(.dark) [class*="text-white"],
html:not(.dark) .text-slate-50,
html:not(.dark) .text-gray-50,
html:not(.dark) .text-zinc-50,
html:not(.dark) .text-neutral-50 { color: #0f172a !important; } /* slate-900 */

html:not(.dark) .text-slate-100,
html:not(.dark) .text-gray-100,
html:not(.dark) .text-zinc-100,
html:not(.dark) .text-neutral-100 { color: #0f172a !important; }

html:not(.dark) .text-slate-200,
html:not(.dark) .text-gray-200,
html:not(.dark) .text-zinc-200,
html:not(.dark) .text-neutral-200 { color: #1f2937 !important; } /* gray-800 */

/* Cards/sections commonly styled for dark — enforce readable text in light mode */
html:not(.dark) .card,
html:not(.dark) .services,
html:not(.dark) .offers,
html:not(.dark) .portfolio,
html:not(.dark) [data-section],
html:not(.dark) [data-block],
html:not(.dark) main,
html:not(.dark) section,
html:not(.dark) .content {
  color: #0f172a !important;
}

/* Neutralize forced dark backgrounds that hurt readability in light mode */
html:not(.dark) .bg-black,
html:not(.dark) .bg-slate-900,
html:not(.dark) .bg-zinc-900,
html:not(.dark) [class*="bg-black"] {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* Links remain visible in light mode */
html:not(.dark) a { color: #0f172a; }

/* =========================================================
   Social UI snippets (theme-aware)
   ========================================================= */

/* Glowing input (gradient focus underline) */
.glowing-input { position: relative; }
.glowing-input input {
  width: 100%; padding: 12px 0; background: transparent; border: none;
  border-bottom: 2px solid #cbd5e1; outline: none; color: inherit; font-size: 1rem;
}
.glowing-input .focus-border {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg,#06b6d4,#22d3ee,#38bdf8);
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.glowing-input input:focus + .focus-border { transform: scaleX(1); }
.dark .glowing-input input { border-color:#475569; }

/* Expanding search pill with gradient (local flair; not replacing global overlay) */
.search.fx {
  display:inline-flex; align-items:center; gap:.5rem; height:40px; padding:0 .5rem; border-radius:8px; position:relative;
  background-image: linear-gradient(45deg,#06b6d4,#22d3ee);
  color:#fff; transition: all .25s ease; isolation:isolate;
}
.search__input, .search__button { background:transparent; color:inherit; border:0; outline:0; }
.search__input { width:0; transition: width .5s ease; }
.search.fx:focus-within .search__input { width:200px; }
.search__button { display:grid; place-items:center; width:25px; height:25px; cursor:pointer; }
@media (max-width:480px){ .search.fx:focus-within .search__input { width: 140px; } }

/* Password input with gradient toggle button */
.input-group { position: relative; }
.input-field {
  width:100%; padding:1rem .75rem; background:rgba(255,255,255,.05);
  border:2px solid rgba(255,255,255,.1); border-radius:8px; color:inherit; transition: all .25s ease;
}
.dark .input-field { background:rgba(2,6,23,.35); border-color:rgba(255,255,255,.12); }
.input-field:focus { outline:none; box-shadow: 0 0 0 2px #38bdf8; transform: translateY(-1px); }
.toggle-btn {
  position:absolute; right:10px; top:50%; transform: translateY(-50%); width:36px; height:36px; border:none; border-radius:50%;
  background: linear-gradient(45deg,#06b6d4,#38bdf8); cursor:pointer; box-shadow:0 4px 14px rgba(99,102,241,.3);
}

/* Floating profile avatar with status indicator + gentle float */
.profile-container { position:relative; display:inline-block; cursor:pointer; animation: float 4s ease-in-out infinite; }
.profile-pic {
  --size: 72px; width:var(--size); height:var(--size); border-radius:50%; object-fit:cover;
  border:3px solid #1e293b; box-shadow: 0 10px 30px rgba(99,102,241,.3); transition:transform .3s ease;
}
.dark .profile-pic { border-color: #0b1220; }
.profile-container:hover .profile-pic { transform: translateY(-2px); }
.status-indicator { position:absolute; right:6px; bottom:6px; width:12px; height:12px; border-radius:50%; background:#10b981; border:2px solid #fff; }
@keyframes float { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }
@media (prefers-reduced-motion: reduce) {
  .profile-container { animation: none; }
}